Skip to content

icons: Add matchTextDirection to directional icons #2015

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

Open
yash-agarwa-l wants to merge 1 commit into
base: main
Choose a base branch
from
+33 −7
Open

icons: Add matchTextDirection to directional icons #2015

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
10 changes: 10 additions & 0 deletions assets/icons/directional_icons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
// List of icons that should flip horizontally in RTL layout.

module.exports = [
"arrow_right",
"chevron_right",
"send",
"arrow_left_right",
"message_feed",
"topics",
];
17 changes: 11 additions & 6 deletions lib/widgets/icons.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,11 @@ abstract final class ZulipIcons {
// or otherwise edit the SVG files there.
// The files' names (before ".svg") should be valid Dart identifiers.
//
// * If the icon is directional (meaning it should point
// the other way in RTL layouts), add its name in
// `assets/icons/directional_icons.js`. For guidance, see:
// https://m3.material.io/foundations/layout/understanding-layout/bidirectionality-rtl#ad90d075-6db4-457b-a15b-51fb6653c825
//
// * Then run the command `tools/icons/build-icon-font`.
// That will update this file and the generated icon font,
// `assets/icons/ZulipIcons.ttf`.
Expand All @@ -28,10 +33,10 @@ abstract final class ZulipIcons {
static const IconData arrow_down = IconData(0xf101, fontFamily: "Zulip Icons");

/// The Zulip custom icon "arrow_left_right".
static const IconData arrow_left_right = IconData(0xf102, fontFamily: "Zulip Icons");
static const IconData arrow_left_right = IconData(0xf102, fontFamily: "Zulip Icons", matchTextDirection: true);

/// The Zulip custom icon "arrow_right".
static const IconData arrow_right = IconData(0xf103, fontFamily: "Zulip Icons");
static const IconData arrow_right = IconData(0xf103, fontFamily: "Zulip Icons", matchTextDirection: true);

/// The Zulip custom icon "at_sign".
static const IconData at_sign = IconData(0xf104, fontFamily: "Zulip Icons");
Expand Down Expand Up @@ -64,7 +69,7 @@ abstract final class ZulipIcons {
static const IconData chevron_down = IconData(0xf10d, fontFamily: "Zulip Icons");

/// The Zulip custom icon "chevron_right".
static const IconData chevron_right = IconData(0xf10e, fontFamily: "Zulip Icons");
static const IconData chevron_right = IconData(0xf10e, fontFamily: "Zulip Icons", matchTextDirection: true);

/// The Zulip custom icon "circle_x".
static const IconData circle_x = IconData(0xf10f, fontFamily: "Zulip Icons");
Expand Down Expand Up @@ -133,7 +138,7 @@ abstract final class ZulipIcons {
static const IconData message_checked = IconData(0xf124, fontFamily: "Zulip Icons");

/// The Zulip custom icon "message_feed".
static const IconData message_feed = IconData(0xf125, fontFamily: "Zulip Icons");
static const IconData message_feed = IconData(0xf125, fontFamily: "Zulip Icons", matchTextDirection: true);

/// The Zulip custom icon "more_horizontal".
static const IconData more_horizontal = IconData(0xf126, fontFamily: "Zulip Icons");
Expand All @@ -160,7 +165,7 @@ abstract final class ZulipIcons {
static const IconData see_who_reacted = IconData(0xf12d, fontFamily: "Zulip Icons");

/// The Zulip custom icon "send".
static const IconData send = IconData(0xf12e, fontFamily: "Zulip Icons");
static const IconData send = IconData(0xf12e, fontFamily: "Zulip Icons", matchTextDirection: true);

/// The Zulip custom icon "settings".
static const IconData settings = IconData(0xf12f, fontFamily: "Zulip Icons");
Expand All @@ -187,7 +192,7 @@ abstract final class ZulipIcons {
static const IconData topic = IconData(0xf136, fontFamily: "Zulip Icons");

/// The Zulip custom icon "topics".
static const IconData topics = IconData(0xf137, fontFamily: "Zulip Icons");
static const IconData topics = IconData(0xf137, fontFamily: "Zulip Icons", matchTextDirection: true);

/// The Zulip custom icon "trash".
static const IconData trash = IconData(0xf138, fontFamily: "Zulip Icons");
Expand Down
13 changes: 12 additions & 1 deletion tools/icons/build-icon-font.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,12 +62,23 @@ async function main() {
fs.copyFileSync(path.join(tmpDir, `${fontName}.ttf`), path.join(destDir, `${fontFileBaseName}.ttf`));

const template = fs.readFileSync(dataTemplateFile, 'utf8');

// Icons that should flip horizontally in RTL layout.
const directionalIconsFile = path.join(srcDir, 'directional_icons.js');
const directionalIcons = require(directionalIconsFile);

const generated = Object.entries(codepoints).map(([name, codepoint]) => {
const codepointHex = "0x" + codepoint.toString(16);

const namedParams = [`fontFamily: "${fontName}"`];
if (directionalIcons.includes(name)) {
namedParams.push('matchTextDirection: true');
}

return `\

/// The Zulip custom icon "${name}".
static const IconData ${name} = IconData(${codepointHex}, fontFamily: "${fontName}");
static const IconData ${name} = IconData(${codepointHex}, ${namedParams.join(', ')});
`;
}).join("");
const output = template.replace(
Expand Down