Skip to content

ui [nfc]: Comment with TODO(#95) where we need dark-theme colors #689

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
May 20, 2024
Merged

ui [nfc]: Comment with TODO(#95) where we need dark-theme colors #689

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
abfaed8
subscription_list [nfc]: Factor out helper for dividing line
chrisbobbe May 20, 2024
d67b1f2
ui [nfc]: Comment with TODO(#95) where we need dark-theme colors
chrisbobbe May 19, 2024
cf7851f
code_block [nfc]: Add TODO(#95) to follow web in syntax highlighting
chrisbobbe May 20, 2024
b9e585e
inbox: Express _AllDmsHeaderItem.uncollapsedBackgroundColor as HSL
chrisbobbe May 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions lib/widgets/code_block.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import '../model/code_block.dart';
// Highlighted code block styles adapted from:
// https://github.com/zulip/zulip/blob/213387249e7ba7772084411b22d8cef64b135dd0/web/styles/pygments.css

// TODO(#95) follow web for dark-theme colors

// .hll { background-color: hsl(60deg 100% 90%); }
final _kCodeBlockStyleHll = TextStyle(backgroundColor: const HSLColor.fromAHSL(1, 60, 1, 0.90).toColor());

Expand Down
13 changes: 12 additions & 1 deletion lib/widgets/inbox.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,6 +245,7 @@ abstract class _HeaderItem extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Material(
// TODO(#95) need dark-theme color
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit in commit message:

ui [nfc]: Comment with TODO(#95) where we need dark-theme colors

Related: #95
In these places, I was unable to find a specific dark-theme color by
consulting web or the Figma (as it is now).

Any header-style "Foo: bar" lines should be their own stanza — so add a blank line between "Related: #95" and the paragraph that follows.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh weird; I think maybe it got this way because I added the "Related" line hastily and I forgot there was a commit-message body. There was a commit-message body, but I guess I accidentally lumped it in with the other text in the editor that is not commit-message body:

ui [nfc]: Comment with TODO(#95) where we need dark-theme colors

Related: #95
In these places, I was unable to find a specific dark-theme color by
consulting web or the Figma (as it is now).

# Please enter the commit message for your changes. Lines starting
# with '#' will be ignored, and an empty message aborts the commit.
#
# Date:      Sun May 19 15:44:50 2024 -0700
#
# interactive rebase in progress; [etc.]

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I usually put "Foo: bar"-style lines at the ends of commit messages; do you think we should start putting them at the top of the body?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, at the end is good.

color: collapsed ? Colors.white : uncollapsedBackgroundColor,
child: InkWell(
// TODO use onRowTap to handle taps that are not on the collapse button.
Expand All @@ -256,6 +257,7 @@ abstract class _HeaderItem extends StatelessWidget {
onTap: onCollapseButtonTap,
child: Row(crossAxisAlignment: CrossAxisAlignment.center, children: [
Padding(padding: const EdgeInsets.all(10),
// TODO(#95) need dark-theme color
child: Icon(size: 20, color: const Color(0x7F1D2E48),
collapsed ? ZulipIcons.arrow_right : ZulipIcons.arrow_down)),
Icon(size: 18, color: collapsed ? collapsedIconColor : uncollapsedIconColor,
Expand All @@ -267,6 +269,7 @@ abstract class _HeaderItem extends StatelessWidget {
style: const TextStyle(
fontSize: 17,
height: (20 / 17),
// TODO(#95) need dark-theme color
color: Color(0xFF222222),
).merge(weightVariableTextStyle(context, wght: 600)),
maxLines: 1,
Expand All @@ -292,9 +295,12 @@ class _AllDmsHeaderItem extends _HeaderItem {

@override get title => 'Direct messages'; // TODO(i18n)
@override get icon => ZulipIcons.user;

// TODO(#95) need dark-theme colors
@override get collapsedIconColor => const Color(0xFF222222);
@override get uncollapsedIconColor => const Color(0xFF222222);
@override get uncollapsedBackgroundColor => const Color(0xFFF3F0E7);

@override get uncollapsedBackgroundColor => const HSLColor.fromAHSL(1, 46, 0.35, 0.93).toColor();
@override get unreadCountBadgeBackgroundColor => null;

@override get onCollapseButtonTap => () async {
Expand Down Expand Up @@ -367,6 +373,7 @@ class _DmItem extends StatelessWidget {
};

return Material(
// TODO(#95) need dark-theme color
color: Colors.white,
child: InkWell(
onTap: () {
Expand All @@ -382,6 +389,7 @@ class _DmItem extends StatelessWidget {
style: const TextStyle(
fontSize: 17,
height: (20 / 17),
// TODO(#95) need dark-theme color
color: Color(0xFF222222),
),
maxLines: 2,
Expand Down Expand Up @@ -486,6 +494,7 @@ class _TopicItem extends StatelessWidget {
final subscription = store.subscriptions[streamId]!;

return Material(
// TODO(#95) need dark-theme color
color: Colors.white,
child: InkWell(
onTap: () {
Expand All @@ -502,6 +511,7 @@ class _TopicItem extends StatelessWidget {
style: const TextStyle(
fontSize: 17,
height: (20 / 17),
// TODO(#95) need dark-theme color
color: Color(0xFF222222),
),
maxLines: 2,
Expand All @@ -519,6 +529,7 @@ class _TopicItem extends StatelessWidget {
class _AtMentionMarker extends StatelessWidget {
const _AtMentionMarker();

// TODO(#95) need dark-theme color
static final markerColor = const HSLColor.fromAHSL(0.5, 0, 0, 0.2).toColor();

@override
Expand Down
1 change: 1 addition & 0 deletions lib/widgets/login.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -621,6 +621,7 @@ class _UsernamePasswordFormState extends State<_UsernamePasswordForm> {
}

// Loosely based on the corresponding element in the web app.
// TODO(#95) need dark-theme colors
class OrDivider extends StatelessWidget {
const OrDivider({super.key});

Expand Down
4 changes: 4 additions & 0 deletions lib/widgets/recent_dm_conversations.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,12 +109,15 @@ class RecentDmConversationsItem extends StatelessWidget {
// new Intl.ListFormat('ja').format(['Chris', 'Greg', 'Alya'])
// // 'Chris、Greg、Alya'
title = narrow.otherRecipientIds.map((id) => store.users[id]?.fullName ?? '(unknown user)').join(', ');
// TODO(#95) need dark-theme color
avatar = ColoredBox(color: const Color(0x33808080),
child: Center(
// TODO(#95) need dark-theme color
child: Icon(ZulipIcons.group_dm, color: Colors.black.withOpacity(0.5))));
}

return Material(
// TODO(#95) need dark-theme color
color: Colors.white,
child: InkWell(
onTap: () {
Expand All @@ -132,6 +135,7 @@ class RecentDmConversationsItem extends StatelessWidget {
style: const TextStyle(
fontSize: 17,
height: (20 / 17),
// TODO(#95) need dark-theme color
color: Color(0xFF222222),
),
maxLines: 2,
Expand Down
15 changes: 11 additions & 4 deletions lib/widgets/subscription_list.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,7 @@ class _NoSubscriptionsItem extends StatelessWidget {
child: Text("No streams found",
textAlign: TextAlign.center,
style: TextStyle(
// TODO(#95) need dark-theme color
color: const HSLColor.fromAHSL(1.0, 240, 0.1, 0.5).toColor(),
fontSize: 18,
height: (20 / 18),
Expand All @@ -130,30 +131,34 @@ class _SubscriptionListHeader extends StatelessWidget {

final String label;

static final _line = Expanded(child: Divider(
// TODO(#95) need dark-theme color
color: const HSLColor.fromAHSL(0.2, 240, 0.1, 0.5).toColor()));

@override
Widget build(BuildContext context) {
return SliverToBoxAdapter(
child: ColoredBox(
// TODO(#95) need dark-theme color
color: Colors.white,
child: Row(crossAxisAlignment: CrossAxisAlignment.center,
children: [
const SizedBox(width: 16),
Expanded(child: Divider(
color: const HSLColor.fromAHSL(0.2, 240, 0.1, 0.5).toColor())),
_line,
const SizedBox(width: 8),
Padding(
padding: const EdgeInsets.symmetric(vertical: 7),
child: Text(label,
textAlign: TextAlign.center,
style: TextStyle(
// TODO(#95) need dark-theme color
color: const HSLColor.fromAHSL(1.0, 240, 0.1, 0.5).toColor(),
fontSize: 14,
letterSpacing: proportionalLetterSpacing(context, 0.04, baseFontSize: 14),
height: (16 / 14),
))),
const SizedBox(width: 8),
Expanded(child: Divider(
color: const HSLColor.fromAHSL(0.2, 240, 0.1, 0.5).toColor())),
_line,
const SizedBox(width: 16),
])));
}
Expand Down Expand Up @@ -197,6 +202,7 @@ class SubscriptionItem extends StatelessWidget {
final swatch = subscription.colorSwatch();
final hasUnreads = (unreadCount > 0);
return Material(
// TODO(#95) need dark-theme color
color: Colors.white,
child: InkWell(
onTap: () {
Expand All @@ -221,6 +227,7 @@ class SubscriptionItem extends StatelessWidget {
style: const TextStyle(
fontSize: 18,
height: (20 / 18),
// TODO(#95) need dark-theme color
color: Color(0xFF262626),
).merge(weightVariableTextStyle(context,
wght: hasUnreads ? 600 : null)),
Expand Down
2 changes: 2 additions & 0 deletions lib/widgets/unread_count_badge.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ class UnreadCountBadge extends StatelessWidget {
final effectiveBackgroundColor = switch (backgroundColor) {
StreamColorSwatch(unreadCountBadgeBackground: var color) => color,
Color() => backgroundColor,
// TODO(#95) need dark-theme color
null => const Color.fromRGBO(102, 102, 153, 0.15),
};

Expand All @@ -57,6 +58,7 @@ class UnreadCountBadge extends StatelessWidget {
// - in dark mode use `Color.fromRGBO(255, 255, 255, 0.9)`
// The web app doesn't (yet?) use stream-colored unread markers
// so we can't take direction from there.
// TODO(#95) need dark-theme color
color: Color(0xFF222222),
).merge(weightVariableTextStyle(context,
wght: bold ? 600 : null)),
Expand Down
Loading