Skip to content

Commit 37e3054

Browse files
PIG208PIG208
committed
compose_box: Use new icons from the redesign.
The icons are mainly exported from the Figma design: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=544-22131&node-type=CANVAS&t=hNeqhPGojoFpTJnp-0 Except image.svg, which was downloaded from the original source of the icon (https://lucide.dev/icons/image). Due to the limitation of the icon font, image.svg and send.svg have been adjusted with a tool that converts SVG strokes to fills: https://www.npmjs.com/package/oslllo-svg-fixer See also: https://chat.zulip.org/#narrow/stream/243-mobile-team/topic/Icon.20not.20rendering.20correctly/near/1936793 Signed-off-by: Zixuan James Li <[email protected]>
1 parent 14520bc commit 37e3054

File tree

9 files changed

+49
-27
lines changed

9 files changed

+49
-27
lines changed

‎assets/icons/ZulipIcons.ttf

1.07 KB
Binary file not shown.

‎assets/icons/attach_file.svg

Lines changed: 3 additions & 0 deletions
Loading

‎assets/icons/camera.svg

Lines changed: 3 additions & 0 deletions
Loading

‎assets/icons/image.svg

Lines changed: 1 addition & 0 deletions
Loading

‎assets/icons/send.svg

Lines changed: 1 addition & 0 deletions
Loading

‎lib/widgets/compose_box.dart

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import '../model/narrow.dart';
1515
import '../model/store.dart';
1616
import 'autocomplete.dart';
1717
import 'dialog.dart';
18+
import 'icons.dart';
1819
import 'store.dart';
1920
import 'theme.dart';
2021

@@ -642,7 +643,7 @@ class _AttachFileButton extends _AttachUploadsButton {
642643
const _AttachFileButton({required super.contentController, required super.contentFocusNode});
643644

644645
@override
645-
IconData get icon => Icons.attach_file;
646+
IconData get icon => ZulipIcons.attach_file;
646647

647648
@override
648649
String tooltip(ZulipLocalizations zulipLocalizations) =>
@@ -658,7 +659,7 @@ class _AttachMediaButton extends _AttachUploadsButton {
658659
const _AttachMediaButton({required super.contentController, required super.contentFocusNode});
659660

660661
@override
661-
IconData get icon => Icons.image;
662+
IconData get icon => ZulipIcons.image;
662663

663664
@override
664665
String tooltip(ZulipLocalizations zulipLocalizations) =>
@@ -675,7 +676,7 @@ class _AttachFromCameraButton extends _AttachUploadsButton {
675676
const _AttachFromCameraButton({required super.contentController, required super.contentFocusNode});
676677

677678
@override
678-
IconData get icon => Icons.camera_alt;
679+
IconData get icon => ZulipIcons.camera;
679680

680681
@override
681682
String tooltip(ZulipLocalizations zulipLocalizations) =>
@@ -871,7 +872,7 @@ class _SendButtonState extends State<_SendButton> {
871872
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
872873
),
873874
color: foregroundColor,
874-
icon: const Icon(Icons.send),
875+
icon: const Icon(ZulipIcons.send),
875876
onPressed: _send));
876877
}
877878
}

‎lib/widgets/icons.dart

Lines changed: 28 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -33,53 +33,65 @@ abstract final class ZulipIcons {
3333
/// The Zulip custom icon "at_sign".
3434
static const IconData at_sign = IconData(0xf103, fontFamily: "Zulip Icons");
3535

36+
/// The Zulip custom icon "attach_file".
37+
static const IconData attach_file = IconData(0xf104, fontFamily: "Zulip Icons");
38+
3639
/// The Zulip custom icon "bot".
37-
static const IconData bot = IconData(0xf104, fontFamily: "Zulip Icons");
40+
static const IconData bot = IconData(0xf105, fontFamily: "Zulip Icons");
41+
42+
/// The Zulip custom icon "camera".
43+
static const IconData camera = IconData(0xf106, fontFamily: "Zulip Icons");
3844

3945
/// The Zulip custom icon "chevron_right".
40-
static const IconData chevron_right = IconData(0xf105, fontFamily: "Zulip Icons");
46+
static const IconData chevron_right = IconData(0xf107, fontFamily: "Zulip Icons");
4147

4248
/// The Zulip custom icon "clock".
43-
static const IconData clock = IconData(0xf106, fontFamily: "Zulip Icons");
49+
static const IconData clock = IconData(0xf108, fontFamily: "Zulip Icons");
4450

4551
/// The Zulip custom icon "edited".
46-
static const IconData edited = IconData(0xf107, fontFamily: "Zulip Icons");
52+
static const IconData edited = IconData(0xf109, fontFamily: "Zulip Icons");
4753

4854
/// The Zulip custom icon "globe".
49-
static const IconData globe = IconData(0xf108, fontFamily: "Zulip Icons");
55+
static const IconData globe = IconData(0xf10a, fontFamily: "Zulip Icons");
5056

5157
/// The Zulip custom icon "group_dm".
52-
static const IconData group_dm = IconData(0xf109, fontFamily: "Zulip Icons");
58+
static const IconData group_dm = IconData(0xf10b, fontFamily: "Zulip Icons");
5359

5460
/// The Zulip custom icon "hash_sign".
55-
static const IconData hash_sign = IconData(0xf10a, fontFamily: "Zulip Icons");
61+
static const IconData hash_sign = IconData(0xf10c, fontFamily: "Zulip Icons");
62+
63+
/// The Zulip custom icon "image".
64+
static const IconData image = IconData(0xf10d, fontFamily: "Zulip Icons");
5665

5766
/// The Zulip custom icon "language".
58-
static const IconData language = IconData(0xf10b, fontFamily: "Zulip Icons");
67+
static const IconData language = IconData(0xf10e, fontFamily: "Zulip Icons");
5968

6069
/// The Zulip custom icon "lock".
61-
static const IconData lock = IconData(0xf10c, fontFamily: "Zulip Icons");
70+
static const IconData lock = IconData(0xf10f, fontFamily: "Zulip Icons");
6271

6372
/// The Zulip custom icon "message_moved".
64-
static const IconData message_moved = IconData(0xf10d, fontFamily: "Zulip Icons");
73+
static const IconData message_moved = IconData(0xf110, fontFamily: "Zulip Icons");
6574

6675
/// The Zulip custom icon "mute".
67-
static const IconData mute = IconData(0xf10e, fontFamily: "Zulip Icons");
76+
static const IconData mute = IconData(0xf111, fontFamily: "Zulip Icons");
6877

6978
/// The Zulip custom icon "read_receipts".
70-
static const IconData read_receipts = IconData(0xf10f, fontFamily: "Zulip Icons");
79+
static const IconData read_receipts = IconData(0xf112, fontFamily: "Zulip Icons");
80+
81+
/// The Zulip custom icon "send".
82+
static const IconData send = IconData(0xf113, fontFamily: "Zulip Icons");
7183

7284
/// The Zulip custom icon "star_filled".
73-
static const IconData star_filled = IconData(0xf110, fontFamily: "Zulip Icons");
85+
static const IconData star_filled = IconData(0xf114, fontFamily: "Zulip Icons");
7486

7587
/// The Zulip custom icon "topic".
76-
static const IconData topic = IconData(0xf111, fontFamily: "Zulip Icons");
88+
static const IconData topic = IconData(0xf115, fontFamily: "Zulip Icons");
7789

7890
/// The Zulip custom icon "unmute".
79-
static const IconData unmute = IconData(0xf112, fontFamily: "Zulip Icons");
91+
static const IconData unmute = IconData(0xf116, fontFamily: "Zulip Icons");
8092

8193
/// The Zulip custom icon "user".
82-
static const IconData user = IconData(0xf113, fontFamily: "Zulip Icons");
94+
static const IconData user = IconData(0xf117, fontFamily: "Zulip Icons");
8395

8496
// END GENERATED ICON DATA
8597
}

‎test/widgets/compose_box_test.dart

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import 'package:zulip/model/localizations.dart';
1414
import 'package:zulip/model/narrow.dart';
1515
import 'package:zulip/model/store.dart';
1616
import 'package:zulip/widgets/compose_box.dart';
17+
import 'package:zulip/widgets/icons.dart';
1718

1819
import '../api/fake_api.dart';
1920
import '../example_data.dart' as eg;
@@ -251,7 +252,7 @@ void main() {
251252
group('uploads', () {
252253
void checkAppearsLoading(WidgetTester tester, bool expected) {
253254
final sendButtonElement = tester.element(find.ancestor(
254-
of: find.byIcon(Icons.send),
255+
of: find.byIcon(ZulipIcons.send),
255256
matching: find.byType(IconButton)));
256257
final sendButtonWidget = sendButtonElement.widget as IconButton;
257258
final colorScheme = Theme.of(sendButtonElement).colorScheme;
@@ -284,7 +285,7 @@ void main() {
284285
connection.prepare(delay: const Duration(seconds: 1), json:
285286
UploadFileResult(uri: '/user_uploads/1/4e/m2A3MSqFnWRLUf9SaPzQ0Up_/image.jpg').toJson());
286287

287-
await tester.tap(find.byIcon(Icons.image));
288+
await tester.tap(find.byIcon(ZulipIcons.image));
288289
await tester.pump();
289290
final call = testBinding.takePickFilesCalls().single;
290291
check(call.allowMultiple).equals(true);
@@ -340,7 +341,7 @@ void main() {
340341
connection.prepare(delay: const Duration(seconds: 1), json:
341342
UploadFileResult(uri: '/user_uploads/1/4e/m2A3MSqFnWRLUf9SaPzQ0Up_/image.jpg').toJson());
342343

343-
await tester.tap(find.byIcon(Icons.camera_alt));
344+
await tester.tap(find.byIcon(ZulipIcons.camera));
344345
await tester.pump();
345346
final call = testBinding.takePickImageCalls().single;
346347
check(call.source).equals(ImageSource.camera);
@@ -385,9 +386,9 @@ void main() {
385386

386387
void checkComposeBoxParts({required bool areShown}) {
387388
check(contentFieldFinder().evaluate().length).equals(areShown ? 1 : 0);
388-
check(attachButtonFinder(Icons.attach_file).evaluate().length).equals(areShown ? 1 : 0);
389-
check(attachButtonFinder(Icons.image).evaluate().length).equals(areShown ? 1 : 0);
390-
check(attachButtonFinder(Icons.camera_alt).evaluate().length).equals(areShown ? 1 : 0);
389+
check(attachButtonFinder(ZulipIcons.attach_file).evaluate().length).equals(areShown ? 1 : 0);
390+
check(attachButtonFinder(ZulipIcons.image).evaluate().length).equals(areShown ? 1 : 0);
391+
check(attachButtonFinder(ZulipIcons.camera).evaluate().length).equals(areShown ? 1 : 0);
391392
}
392393

393394
void checkBanner({required bool isShown}) {

‎test/widgets/message_list_test.dart

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -649,7 +649,7 @@ void main() {
649649
..controller.isNotNull().text.equals('Some text');
650650

651651
connection.prepare(json: SendMessageResult(id: 1).toJson());
652-
await tester.tap(find.byIcon(Icons.send));
652+
await tester.tap(find.byIcon(ZulipIcons.send));
653653
await tester.pump();
654654
check(connection.lastRequest).isA<http.Request>()
655655
..method.equals('POST')

0 commit comments

Comments
 (0)