Skip to content

Commit fe6d8a7

Browse files
PIG208PIG208
committed
Icon changes.
Signed-off-by: Zixuan James Li <zixuan@zulip.com>
1 parent 9492046 commit fe6d8a7

File tree

2 files changed

+61
-46
lines changed

2 files changed

+61
-46
lines changed

‎lib/widgets/compose_box.dart

Lines changed: 54 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import 'store.dart';
2020
import 'text.dart';
2121
import 'theme.dart';
2222

23-
const double _sendButtonSize = 36;
23+
const double _composeButtonWidth = 44;
2424

2525
/// A [TextEditingController] for use in the compose box.
2626
///
@@ -304,7 +304,7 @@ class _ContentInput extends StatelessWidget {
304304
// [SingleChildScrollView] to insert a fixed-height padding that can
305305
// be scrolled along with the text.
306306
child: Padding(
307-
padding: const EdgeInsets.only(top: topPadding),
307+
padding: const EdgeInsets.only(top: topPadding, left: 16, right: 16),
308308
child: TextField(
309309
controller: controller,
310310
focusNode: focusNode,
@@ -411,17 +411,20 @@ class _TopicInput extends StatelessWidget {
411411
controller: controller,
412412
focusNode: focusNode,
413413
contentFocusNode: contentFocusNode,
414-
fieldViewBuilder: (context) => TextField(
415-
controller: controller,
416-
focusNode: focusNode,
417-
textInputAction: TextInputAction.next,
418-
style: topicTextStyle,
419-
decoration: InputDecoration(
420-
isDense: true,
421-
border: const UnderlineInputBorder(),
422-
contentPadding: const EdgeInsets.fromLTRB(0, 10, 0, 10),
423-
hintStyle: topicTextStyle.copyWith(color: designVariables.textInput.withOpacity(0.5)),
424-
hintText: zulipLocalizations.composeBoxTopicHintText)));
414+
fieldViewBuilder: (context) => Padding(
415+
padding: const EdgeInsets.symmetric(horizontal: 16),
416+
child: TextField(
417+
controller: controller,
418+
focusNode: focusNode,
419+
textInputAction: TextInputAction.next,
420+
style: topicTextStyle,
421+
decoration: InputDecoration(
422+
isDense: true,
423+
border: const UnderlineInputBorder(),
424+
contentPadding: const EdgeInsets.fromLTRB(0, 10, 0, 10),
425+
hintStyle: topicTextStyle.copyWith(color: designVariables.textInput.withOpacity(0.5)),
426+
hintText: zulipLocalizations.composeBoxTopicHintText)),
427+
));
425428
}
426429
}
427430

@@ -594,10 +597,14 @@ abstract class _AttachUploadsButton extends StatelessWidget {
594597
@override
595598
Widget build(BuildContext context) {
596599
final zulipLocalizations = ZulipLocalizations.of(context);
597-
return IconButton(
598-
icon: Icon(icon),
599-
tooltip: tooltip(zulipLocalizations),
600-
onPressed: () => _handlePress(context));
600+
return SizedBox(
601+
width: _composeButtonWidth,
602+
child: IconButton(
603+
padding: const EdgeInsets.symmetric(horizontal: 10),
604+
icon: Icon(icon),
605+
tooltip: tooltip(zulipLocalizations),
606+
onPressed: () => _handlePress(context)),
607+
);
601608
}
602609
}
603610

@@ -865,20 +872,14 @@ class _SendButtonState extends State<_SendButton> {
865872
? designVariables.icon.withOpacity(0.5)
866873
: designVariables.icon;
867874

868-
return IconButton(
869-
tooltip: zulipLocalizations.composeBoxSendTooltip,
870-
style: const ButtonStyle(
871-
// Match the height of the content input.
872-
minimumSize: WidgetStatePropertyAll(Size.square(_sendButtonSize)),
873-
// With the default of [MaterialTapTargetSize.padded], not just the
874-
// tap target but the visual button would get padded to 48px square.
875-
// It would be nice if the tap target extended invisibly out from the
876-
// button, to make a 48px square, but that's not the behavior we get.
877-
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
878-
),
879-
color: buttonColor,
880-
icon: const Icon(ZulipIcons.send),
881-
onPressed: _send);
875+
return SizedBox(
876+
width: _composeButtonWidth,
877+
child: IconButton(
878+
tooltip: zulipLocalizations.composeBoxSendTooltip,
879+
color: buttonColor,
880+
icon: const Icon(ZulipIcons.send),
881+
onPressed: _send),
882+
);
882883
}
883884
}
884885

@@ -898,11 +899,7 @@ class _ComposeBoxContainer extends StatelessWidget {
898899
border: Border(top: BorderSide(color: designVariables.borderBar))),
899900
child: Material(
900901
color: designVariables.bgComposeBox,
901-
child: SafeArea(
902-
child: Padding(
903-
padding: const EdgeInsets.symmetric(horizontal: 16.0),
904-
child: child,
905-
)),
902+
child: SafeArea(child: child),
906903
));
907904
}
908905
}
@@ -924,6 +921,9 @@ class _ComposeBoxLayout extends StatelessWidget {
924921

925922
@override
926923
Widget build(BuildContext context) {
924+
final themeData = Theme.of(context);
925+
final designVariables = DesignVariables.of(context);
926+
927927
return _ComposeBoxContainer(
928928
child: Column(children: [
929929
Row(crossAxisAlignment: CrossAxisAlignment.end, children: [
@@ -933,16 +933,24 @@ class _ComposeBoxLayout extends StatelessWidget {
933933
contentInput,
934934
])),
935935
]),
936-
Row(
937-
mainAxisAlignment: MainAxisAlignment.spaceBetween,
938-
children: [
939-
Row(children: [
940-
_AttachFileButton(contentController: contentController, contentFocusNode: contentFocusNode),
941-
_AttachMediaButton(contentController: contentController, contentFocusNode: contentFocusNode),
942-
_AttachFromCameraButton(contentController: contentController, contentFocusNode: contentFocusNode),
943-
]),
944-
sendButton,
945-
],
936+
Container(
937+
padding: const EdgeInsets.symmetric(horizontal: 8.0),
938+
height: 42,
939+
child: Row(
940+
mainAxisAlignment: MainAxisAlignment.spaceBetween,
941+
children: [
942+
Theme(
943+
data: themeData.copyWith(
944+
iconTheme: themeData.iconTheme.copyWith(color: designVariables.foreground.withOpacity(0.5))),
945+
child: Row(children: [
946+
_AttachFileButton(contentController: contentController, contentFocusNode: contentFocusNode),
947+
_AttachMediaButton(contentController: contentController, contentFocusNode: contentFocusNode),
948+
_AttachFromCameraButton(contentController: contentController, contentFocusNode: contentFocusNode),
949+
]),
950+
),
951+
sendButton,
952+
],
953+
),
946954
),
947955
]));
948956
}

‎lib/widgets/theme.dart

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
117117
title: const Color(0xff1a1a1a),
118118
bgComposeBox: const Color(0xffffffff),
119119
textInput: const Color(0xff000000),
120+
foreground: const Color(0xff000000),
120121
channelColorSwatches: ChannelColorSwatches.light,
121122
atMentionMarker: const HSLColor.fromAHSL(0.5, 0, 0, 0.2).toColor(),
122123
dmHeaderBg: const HSLColor.fromAHSL(1, 46, 0.35, 0.93).toColor(),
@@ -147,6 +148,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
147148
title: const Color(0xffffffff),
148149
bgComposeBox: const Color(0xff0f0f0f),
149150
textInput: const Color(0xffffffff).withOpacity(0.9),
151+
foreground: const Color(0xffffffff),
150152
channelColorSwatches: ChannelColorSwatches.dark,
151153
// TODO(design-dark) need proper dark-theme color (this is ad hoc)
152154
atMentionMarker: const HSLColor.fromAHSL(0.4, 0, 0, 1).toColor(),
@@ -183,6 +185,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
183185
required this.title,
184186
required this.bgComposeBox,
185187
required this.textInput,
188+
required this.foreground,
186189
required this.channelColorSwatches,
187190
required this.atMentionMarker,
188191
required this.dmHeaderBg,
@@ -221,6 +224,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
221224
final Color title;
222225
final Color bgComposeBox;
223226
final Color textInput;
227+
final Color foreground;
224228

225229
// Not exactly from the Figma design, but from Vlad anyway.
226230
final ChannelColorSwatches channelColorSwatches;
@@ -254,6 +258,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
254258
Color? title,
255259
Color? bgComposeBox,
256260
Color? textInput,
261+
Color? foreground,
257262
ChannelColorSwatches? channelColorSwatches,
258263
Color? atMentionMarker,
259264
Color? dmHeaderBg,
@@ -282,6 +287,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
282287
title: title ?? this.title,
283288
bgComposeBox: bgComposeBox ?? this.bgComposeBox,
284289
textInput: textInput ?? this.textInput,
290+
foreground: foreground ?? this.foreground,
285291
channelColorSwatches: channelColorSwatches ?? this.channelColorSwatches,
286292
atMentionMarker: atMentionMarker ?? this.atMentionMarker,
287293
dmHeaderBg: dmHeaderBg ?? this.dmHeaderBg,
@@ -317,6 +323,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
317323
title: Color.lerp(title, other.title, t)!,
318324
bgComposeBox: Color.lerp(bgComposeBox, other.bgComposeBox, t)!,
319325
textInput: Color.lerp(textInput, other.textInput, t)!,
326+
foreground: Color.lerp(foreground, other.foreground, t)!,
320327
channelColorSwatches: ChannelColorSwatches.lerp(channelColorSwatches, other.channelColorSwatches, t),
321328
atMentionMarker: Color.lerp(atMentionMarker, other.atMentionMarker, t)!,
322329
dmHeaderBg: Color.lerp(dmHeaderBg, other.dmHeaderBg, t)!,

0 commit comments

Comments
 (0)