Skip to content

Commit 5956528

Browse files
PIG208PIG208
committed
compose: 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 88b2ff9 commit 5956528

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;
@@ -299,7 +300,7 @@ void main() {
299300

300301
connection.prepare(json: {});
301302
connection.prepare(json: SendMessageResult(id: 123).toJson());
302-
await tester.tap(find.byIcon(Icons.send));
303+
await tester.tap(find.byIcon(ZulipIcons.send));
303304
await tester.pump(Duration.zero);
304305
final requests = connection.takeRequests();
305306
checkSetTypingStatusRequests([requests.first], [(TypingOp.stop, narrow)]);
@@ -453,7 +454,7 @@ void main() {
453454
group('uploads', () {
454455
void checkAppearsLoading(WidgetTester tester, bool expected) {
455456
final sendButtonElement = tester.element(find.ancestor(
456-
of: find.byIcon(Icons.send),
457+
of: find.byIcon(ZulipIcons.send),
457458
matching: find.byType(IconButton)));
458459
final sendButtonWidget = sendButtonElement.widget as IconButton;
459460
final colorScheme = Theme.of(sendButtonElement).colorScheme;
@@ -492,7 +493,7 @@ void main() {
492493
connection.prepare(delay: const Duration(seconds: 1), json:
493494
UploadFileResult(uri: '/user_uploads/1/4e/m2A3MSqFnWRLUf9SaPzQ0Up_/image.jpg').toJson());
494495

495-
await tester.tap(find.byIcon(Icons.image));
496+
await tester.tap(find.byIcon(ZulipIcons.image));
496497
await tester.pump();
497498
final call = testBinding.takePickFilesCalls().single;
498499
check(call.allowMultiple).equals(true);
@@ -554,7 +555,7 @@ void main() {
554555
connection.prepare(delay: const Duration(seconds: 1), json:
555556
UploadFileResult(uri: '/user_uploads/1/4e/m2A3MSqFnWRLUf9SaPzQ0Up_/image.jpg').toJson());
556557

557-
await tester.tap(find.byIcon(Icons.camera_alt));
558+
await tester.tap(find.byIcon(ZulipIcons.camera));
558559
await tester.pump();
559560
final call = testBinding.takePickImageCalls().single;
560561
check(call.source).equals(ImageSource.camera);
@@ -602,9 +603,9 @@ void main() {
602603
void checkComposeBoxParts({required bool areShown}) {
603604
final inputFieldCount = inputFieldFinder().evaluate().length;
604605
areShown ? check(inputFieldCount).isGreaterThan(0) : check(inputFieldCount).equals(0);
605-
check(attachButtonFinder(Icons.attach_file).evaluate().length).equals(areShown ? 1 : 0);
606-
check(attachButtonFinder(Icons.image).evaluate().length).equals(areShown ? 1 : 0);
607-
check(attachButtonFinder(Icons.camera_alt).evaluate().length).equals(areShown ? 1 : 0);
606+
check(attachButtonFinder(ZulipIcons.attach_file).evaluate().length).equals(areShown ? 1 : 0);
607+
check(attachButtonFinder(ZulipIcons.image).evaluate().length).equals(areShown ? 1 : 0);
608+
check(attachButtonFinder(ZulipIcons.camera).evaluate().length).equals(areShown ? 1 : 0);
608609
}
609610

610611
void checkBannerWithLabel(String label, {required bool isShown}) {

‎test/widgets/message_list_test.dart

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

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

0 commit comments

Comments
 (0)