openvibers/openvibe.design Commits

Icons: each chevron and arrow from Lucide and Material points its own way (#80)

OP OpenVibers committed 12 days ago · 03b03dc23d · 3 files, +13 −5

Our chevron points right (Font Awesome's chevron-right). Lucide's chevron-down and Material's expand_more had been
mapped to it, and Lucide's arrow-left and Material's arrow_back to the back chevron; the Lead motion nudged the
chevron down. Now down, up, right, back and the arrows match Font Awesome's own mapping, with a test.

Changes

ddiff --git a/server/glyphs/aliases.js b/server/glyphs/aliases.js
iindex 99f4f75..8230b7d 100644
---- a/server/glyphs/aliases.js
++++ b/server/glyphs/aliases.js
@@@ -82,7 +82,8 @@ const LUCIDE = keep({
'external-link': 'open', 'square-arrow-out-up-right': 'open', loader: 'busy', 'loader-circle': 'busy', 'loader-2': 'busy',
'volume-1': 'volume', 'volume-2': 'volume', 'volume-x': 'mute', 'volume-off': 'mute', users: 'members', 'users-round': 'members',
'message-circle': 'chat', 'message-square': 'chat', 'messages-square': 'chat', 'message-circle-off': 'chat-off', house: 'home',
-- 'map-pin': 'pin', 'map-pinned': 'pin', pin: 'tack', 'chevron-down': 'chevron', 'rotate-ccw': 'retry', 'rotate-cw': 'retry',
++ // Our chevron points right (Font Awesome's chevron-right); down, up and back are the other ways.
++ 'map-pin': 'pin', 'map-pinned': 'pin', pin: 'tack', 'chevron-right': 'chevron', 'chevron-down': 'down', 'chevron-up': 'up', 'rotate-ccw': 'retry', 'rotate-cw': 'retry',
'refresh-cw': 'retry', 'refresh-ccw': 'retry', repeat: 'retry', 'undo-2': 'undo', 'log-in': 'enter', 'log-out': 'leave',
'circle-help': 'help', 'help-circle': 'help', 'circle-alert': 'alert-circle', 'triangle-alert': 'alert', 'alert-triangle': 'alert',
'circle-check': 'check-circle', 'circle-check-big': 'check-circle', 'check-circle-2': 'check-circle', 'circle-x': 'x-circle',
@@@ -110,7 +111,7 @@ const LUCIDE = keep({
'arrow-left-right': 'arrows-h', 'arrow-right-left': 'swap', 'columns-2': 'columns', 'table-2': 'table', 'list-checks': 'steps',
'list-todo': 'task', 'corner-up-left': 'reply', 'circle-parking': 'parking', 'square-parking': 'parking', dumbbell: 'weight',
'tv-2': 'tv', 'tv-minimal': 'tv', 'circle-dot': 'record', 'mail-open': 'mail', 'bell-ring': 'bell', 'phone-off': 'phone-off',
-- 'arrow-left': 'back', 'chevron-left': 'back', 'move-right': 'arrow-right', hourglass: 'hourglass', timer: 'hourglass',
++ 'chevron-left': 'back', 'move-right': 'arrow-right', hourglass: 'hourglass', timer: 'hourglass',
'ticket-check': 'ticket', 'radio-tower': 'live', podcast: 'live', 'ear-off': 'ear', 'scale-3d': 'cubes', 'shapes': 'shapes',
});
@@@ -140,8 +141,10 @@ const MATERIAL = keep({
feed: 'news', campaign: 'megaphone', hearing: 'ear', badge: 'id', vpn_key: 'key', hub: 'nodes', account_tree: 'nodes',
open_in_new: 'open', launch: 'open', refresh: 'retry', autorenew: 'retry', replay: 'retry', login: 'enter', logout: 'leave',
fullscreen: 'expand', fullscreen_exit: 'compress', open_with: 'move', swap_horiz: 'swap', view_column: 'columns',
-- table_chart: 'table', table_rows: 'table', checklist: 'steps', task_alt: 'task', arrow_back: 'back', arrow_forward: 'arrow-right',
-- arrow_upward: 'arrow-up', arrow_downward: 'arrow-down', expand_more: 'chevron', keyboard_arrow_down: 'chevron',
++ table_chart: 'table', table_rows: 'table', checklist: 'steps', task_alt: 'task', arrow_back: 'arrow-left', arrow_forward: 'arrow-right',
++ arrow_upward: 'arrow-up', arrow_downward: 'arrow-down', expand_more: 'down', keyboard_arrow_down: 'down', expand_less: 'up',
++ keyboard_arrow_up: 'up', chevron_right: 'chevron', keyboard_arrow_right: 'chevron', navigate_next: 'chevron',
++ chevron_left: 'back', keyboard_arrow_left: 'back', navigate_before: 'back',
local_fire_department: 'fire', whatshot: 'fire', bolt: 'zap', flash_on: 'zap', auto_awesome: 'spark', card_giftcard: 'gift',
redeem: 'gift', diamond: 'gem', workspace_premium: 'crown', emoji_events: 'trophy', military_tech: 'ranking', leaderboard: 'ranking',
gps_fixed: 'target', my_location: 'target', center_focus_strong: 'focus', wb_sunny: 'sun', light_mode: 'sun', dark_mode: 'moon',
ddiff --git a/server/glyphs/motion.js b/server/glyphs/motion.js
iindex 86e140b..47819fc 100644
---- a/server/glyphs/motion.js
++++ b/server/glyphs/motion.js
@@@ -23,7 +23,7 @@ const PRESETS = Object.freeze([
]);
const NUDGE = { 'arrow-right': [2, 0], 'arrow-left': [-2, 0], back: [-2, 0], 'arrow-up': [0, -2], 'arrow-down': [0, 2], down: [0, 2], up: [0, -2],
-- open: [2, -2], send: [2, -2], plane: [2, -2], forward: [2, 0], enter: [2, 0], leave: [2, 0], chevron: [0, 2], 'chevrons-right': [2, 0],
++ open: [2, -2], send: [2, -2], plane: [2, -2], forward: [2, 0], enter: [2, 0], leave: [2, 0], chevron: [2, 0], 'chevrons-right': [2, 0],
'chevrons-left': [-2, 0], download: [0, 2], upload: [0, -2], reply: [-2, 0], 'fast-forward': [2, 0], rewind: [-2, 0], skip: [2, 0], share: [2, -2] };
const SUITS = {
ring: ['bell', 'megaphone', 'phone', 'alert'],
ddiff --git a/test/icons-find.test.js b/test/icons-find.test.js
iindex 46439b4..bcccc20 100644
---- a/test/icons-find.test.js
++++ b/test/icons-find.test.js
@@@ -25,6 +25,11 @@ import DeleteIcon from "@mui/icons-material/DeleteOutlined";`;
'mui:DeleteOutlined': 'trash', 'fa-gear': 'gear', 'fa:gear': 'gear', settings: 'gear', heart: 'heart', 'material:home': 'home' };
for (const [n, g] of Object.entries(cases)) assert.equal(aliases.resolve(n), g, n);
assert.equal(aliases.resolve('no-such-icon'), null);
++ // Each chevron points its own way: ours points right, as Font Awesome's chevron-right does.
++ assert.deepEqual(['lucide:chevron-right', 'lucide:chevron-down', 'lucide:chevron-up', 'lucide:chevron-left', 'material:expand_more', 'material:chevron_right', 'material:keyboard_arrow_left'].map(aliases.resolve),
++ ['chevron', 'down', 'up', 'back', 'down', 'chevron', 'back']);
++ assert.equal(aliases.resolve('lucide:chevron-down'), glyphs.fromFa('chevron-down'), 'the same as Font Awesome\'s');
++ assert.deepEqual(['lucide:arrow-left', 'material:arrow_back', 'material:arrow_forward'].map(aliases.resolve), ['arrow-left', 'arrow-left', 'arrow-right'], 'an arrow is an arrow, not a chevron');
assert.ok(aliases.words('gear').includes('settings') && aliases.words('trash').includes('delete'), 'the words people type');
});