Skip to content

Commit 46c4527

Browse files
PIG208PIG208
committed
compose_box: Use new icons from the redesign
The icons are exported from the Figma design: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=544-22131&node-type=CANVAS&t=hNeqhPGojoFpTJnp-0 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 6cdbb4e commit 46c4527

File tree

9 files changed

+54
-32
lines changed

9 files changed

+54
-32
lines changed

‎assets/icons/ZulipIcons.ttf

1.18 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

@@ -726,7 +727,7 @@ class _AttachFileButton extends _AttachUploadsButton {
726727
const _AttachFileButton({required super.contentController, required super.contentFocusNode});
727728

728729
@override
729-
IconData get icon => Icons.attach_file;
730+
IconData get icon => ZulipIcons.attach_file;
730731

731732
@override
732733
String tooltip(ZulipLocalizations zulipLocalizations) =>
@@ -742,7 +743,7 @@ class _AttachMediaButton extends _AttachUploadsButton {
742743
const _AttachMediaButton({required super.contentController, required super.contentFocusNode});
743744

744745
@override
745-
IconData get icon => Icons.image;
746+
IconData get icon => ZulipIcons.image;
746747

747748
@override
748749
String tooltip(ZulipLocalizations zulipLocalizations) =>
@@ -759,7 +760,7 @@ class _AttachFromCameraButton extends _AttachUploadsButton {
759760
const _AttachFromCameraButton({required super.contentController, required super.contentFocusNode});
760761

761762
@override
762-
IconData get icon => Icons.camera_alt;
763+
IconData get icon => ZulipIcons.camera;
763764

764765
@override
765766
String tooltip(ZulipLocalizations zulipLocalizations) =>
@@ -959,7 +960,7 @@ class _SendButtonState extends State<_SendButton> {
959960
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
960961
),
961962
color: foregroundColor,
962-
icon: const Icon(Icons.send),
963+
icon: const Icon(ZulipIcons.send),
963964
onPressed: _send));
964965
}
965966
}

‎lib/widgets/icons.dart

Lines changed: 32 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -33,65 +33,77 @@ 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 "copy".
46-
static const IconData copy = IconData(0xf107, fontFamily: "Zulip Icons");
52+
static const IconData copy = IconData(0xf109, fontFamily: "Zulip Icons");
4753

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

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

5460
/// The Zulip custom icon "group_dm".
55-
static const IconData group_dm = IconData(0xf10a, fontFamily: "Zulip Icons");
61+
static const IconData group_dm = IconData(0xf10c, fontFamily: "Zulip Icons");
5662

5763
/// The Zulip custom icon "hash_sign".
58-
static const IconData hash_sign = IconData(0xf10b, fontFamily: "Zulip Icons");
64+
static const IconData hash_sign = IconData(0xf10d, fontFamily: "Zulip Icons");
65+
66+
/// The Zulip custom icon "image".
67+
static const IconData image = IconData(0xf10e, fontFamily: "Zulip Icons");
5968

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

6372
/// The Zulip custom icon "lock".
64-
static const IconData lock = IconData(0xf10d, fontFamily: "Zulip Icons");
73+
static const IconData lock = 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 "share".
73-
static const IconData share = IconData(0xf110, fontFamily: "Zulip Icons");
85+
static const IconData share = IconData(0xf114, fontFamily: "Zulip Icons");
7486

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

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

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

8496
/// The Zulip custom icon "star_filled".
85-
static const IconData star_filled = IconData(0xf114, fontFamily: "Zulip Icons");
97+
static const IconData star_filled = IconData(0xf118, fontFamily: "Zulip Icons");
8698

8799
/// The Zulip custom icon "topic".
88-
static const IconData topic = IconData(0xf115, fontFamily: "Zulip Icons");
100+
static const IconData topic = IconData(0xf119, fontFamily: "Zulip Icons");
89101

90102
/// The Zulip custom icon "unmute".
91-
static const IconData unmute = IconData(0xf116, fontFamily: "Zulip Icons");
103+
static const IconData unmute = IconData(0xf11a, fontFamily: "Zulip Icons");
92104

93105
/// The Zulip custom icon "user".
94-
static const IconData user = IconData(0xf117, fontFamily: "Zulip Icons");
106+
static const IconData user = IconData(0xf11b, fontFamily: "Zulip Icons");
95107

96108
// END GENERATED ICON DATA
97109
}

‎test/widgets/compose_box_test.dart

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import 'package:zulip/model/typing_status.dart';
1919
import 'package:zulip/widgets/app.dart';
2020
import 'package:zulip/widgets/compose_box.dart';
2121
import 'package:zulip/widgets/page.dart';
22+
import 'package:zulip/widgets/icons.dart';
2223

2324
import '../api/fake_api.dart';
2425
import '../example_data.dart' as eg;
@@ -283,7 +284,7 @@ void main() {
283284

284285
connection.prepare(json: {});
285286
connection.prepare(json: SendMessageResult(id: 123).toJson());
286-
await tester.tap(find.byIcon(Icons.send));
287+
await tester.tap(find.byIcon(ZulipIcons.send));
287288
await tester.pump(Duration.zero);
288289
final requests = connection.takeRequests();
289290
checkSetTypingStatusRequests([requests.first], [(TypingOp.stop, narrow)]);
@@ -432,7 +433,7 @@ void main() {
432433
group('uploads', () {
433434
void checkAppearsLoading(WidgetTester tester, bool expected) {
434435
final sendButtonElement = tester.element(find.ancestor(
435-
of: find.byIcon(Icons.send),
436+
of: find.byIcon(ZulipIcons.send),
436437
matching: find.byType(IconButton)));
437438
final sendButtonWidget = sendButtonElement.widget as IconButton;
438439
final colorScheme = Theme.of(sendButtonElement).colorScheme;
@@ -469,7 +470,7 @@ void main() {
469470
connection.prepare(delay: const Duration(seconds: 1), json:
470471
UploadFileResult(uri: '/user_uploads/1/4e/m2A3MSqFnWRLUf9SaPzQ0Up_/image.jpg').toJson());
471472

472-
await tester.tap(find.byIcon(Icons.image));
473+
await tester.tap(find.byIcon(ZulipIcons.image));
473474
await tester.pump();
474475
final call = testBinding.takePickFilesCalls().single;
475476
check(call.allowMultiple).equals(true);
@@ -529,7 +530,7 @@ void main() {
529530
connection.prepare(delay: const Duration(seconds: 1), json:
530531
UploadFileResult(uri: '/user_uploads/1/4e/m2A3MSqFnWRLUf9SaPzQ0Up_/image.jpg').toJson());
531532

532-
await tester.tap(find.byIcon(Icons.camera_alt));
533+
await tester.tap(find.byIcon(ZulipIcons.camera));
533534
await tester.pump();
534535
final call = testBinding.takePickImageCalls().single;
535536
check(call.source).equals(ImageSource.camera);
@@ -574,9 +575,9 @@ void main() {
574575

575576
void checkComposeBoxParts({required bool areShown}) {
576577
check(contentFieldFinder().evaluate().length).equals(areShown ? 1 : 0);
577-
check(attachButtonFinder(Icons.attach_file).evaluate().length).equals(areShown ? 1 : 0);
578-
check(attachButtonFinder(Icons.image).evaluate().length).equals(areShown ? 1 : 0);
579-
check(attachButtonFinder(Icons.camera_alt).evaluate().length).equals(areShown ? 1 : 0);
578+
check(attachButtonFinder(ZulipIcons.attach_file).evaluate().length).equals(areShown ? 1 : 0);
579+
check(attachButtonFinder(ZulipIcons.image).evaluate().length).equals(areShown ? 1 : 0);
580+
check(attachButtonFinder(ZulipIcons.camera).evaluate().length).equals(areShown ? 1 : 0);
580581
}
581582

582583
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
@@ -652,7 +652,7 @@ void main() {
652652
..controller.isNotNull().text.equals('Some text');
653653

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

0 commit comments

Comments
 (0)