Meta key icons

Author: H7GhosT

public/assets/fonts/tgico.svg

@@ -26,6 +26,8 @@
     padding: 2rem;
   }
 
+  overflow: hidden;
+
   min-width: 114px;
   border-radius: 8px;
 

public/assets/fonts/tgico.ttf

@@ -35,7 +35,7 @@ const InlineSelect: Component<{
     });
   });
 
-  const onEnter = async(el: Element, done: () => void) => {
+  const onEnter = (el: Element, done: () => void) => {
     const selectEl = el.firstElementChild as HTMLElement;
     const selectOptionEl = selectEl.querySelector(`.${styles.selected}`);
 
@@ -79,16 +79,14 @@ const InlineSelect: Component<{
         }
       }
     );
-
-    done();
   };
 
-  const onExit = (el: Element, done: () => void) => {
+  const onExit = async(el: Element, done: () => void) => {
     const selectEl = el.firstElementChild as HTMLElement;
 
-    selectEl.animate({opacity: [1, 0]}, {duration: 120}).finished.then(() => {
-      done();
-    });
+    await selectEl.animate({opacity: [1, 0]}, {duration: 120}).finished;
+
+    done();
   };
 
   const onMouseMove = (e: MouseEvent) => {
@@ -139,9 +137,7 @@ const InlineSelect: Component<{
                         classList={{
                           [styles.selected]: isSelected(option.value)
                         }}
-                        onClick={() => {
-                          props.onChange(option.value);
-                        }}
+                        onClick={[props.onChange, option.value]}
                       >
                         <span>{option.label}</span>
                       </div>

public/assets/fonts/tgico.woff

@@ -15,7 +15,7 @@ import InlineSelect from './inlineSelect';
 import ShortcutBuilder, {ShortcutKey} from './shortcutBuilder';
 
 import commonStyles from './common.module.scss';
-import styles from './main.module.scss';
+import styles from './mainTab.module.scss';
 
 const MainTab = () => {
   return (
@@ -74,7 +74,7 @@ const PasscodeSetContent = () => {
 
   const [isOpen, setIsOpen] = createSignal(false);
 
-  const [keys, setKeys] = createSignal<ShortcutKey[]>([]);
+  const [keys, setKeys] = createSignal<ShortcutKey[]>(['Alt']);
 
   const caption = (
     <>
@@ -113,15 +113,16 @@ const PasscodeSetContent = () => {
           ref={setAutoCloseRowEl}
           classList={{[styles.Row]: true}}
           title={i18n('PasscodeLock.AutoLock')}
-          // icon="lockoff"
-          rightContent={<InlineSelect
-            value={value()}
-            onClose={() => setIsOpen(false)}
-            options={options}
-            onChange={setValue}
-            isOpen={isOpen()}
-            parent={autoCloseRowEl()}
-          />}
+          rightContent={
+            <InlineSelect
+              value={value()}
+              onClose={() => setIsOpen(false)}
+              options={options}
+              onChange={setValue}
+              isOpen={isOpen()}
+              parent={autoCloseRowEl()}
+            />
+          }
           clickable={(e) => {
             setIsOpen(true);
             console.log('setting isOpen to true');

src/components/sidebarLeft/tabs/passcodeLock/inlineSelect.module.scss

@@ -26,11 +26,15 @@
   font-size: 12px;
   font-weight: 500;
 
+  :global(.tgico) {
+    font-size: 20px;
+  }
+
   border-radius: 2px;
 
   color: white;
   // background-color: #e0e3e5;
-  background-color: hsl(from var(--secondary-color) h s calc(l + 7));
+  background-color: hsl(from var(--secondary-color) h s calc(l + 8));
 
   transition: background-color 0.2s;
 

src/components/sidebarLeft/tabs/passcodeLock/inlineSelect.tsx

@@ -1,4 +1,6 @@
-import {Component, createSelector} from 'solid-js';
+import {Component, createSelector, JSX} from 'solid-js';
+
+import {IS_APPLE} from '../../../../environment/userAgent';
 
 import {IconTsx} from '../../../iconTsx';
 import ripple from '../../../ripple'; // keep
@@ -17,6 +19,28 @@ const ShortcutBuilder: Component<{
 }> = (props) => {
   const isSelected = createSelector(() => props.value, (value: ShortcutKey, shortcuts) => shortcuts.includes(value));
 
+  const getKeyContent = (key: ShortcutKey): JSX.Element => {
+    if(key === 'Meta') {
+      return <IconTsx icon={IS_APPLE ? 'mac_command_key' : 'win_key'} />;
+    }
+    return <span>{key}</span>;
+  };
+
+  const onKeyClick = (key: ShortcutKey) => {
+    if(props.value.includes(key)) {
+      const newValue = props.value.filter((k) => k !== key);
+
+      if(!newValue.length) {
+        const indicies = [0, 1, 2, 3].filter((i) => i !== shortcutKeys.indexOf(key));
+        newValue.push(shortcutKeys[indicies[Math.floor(Math.random() * indicies.length)]]);
+      }
+
+      props.onChange(newValue);
+    } else {
+      props.onChange([...props.value, key]);
+    }
+  };
+
   return (
     <div class={styles.Container}>
       <div class={styles.KeysContainer}>
@@ -25,22 +49,9 @@ const ShortcutBuilder: Component<{
             use:ripple
             class={styles.KeyButton}
             classList={{[styles.selected]: isSelected(key)}}
-            onClick={() => {
-              if(props.value.includes(key)) {
-                const newValue = props.value.filter((k) => k !== key);
-                if(!newValue.length) {
-                  const indicies = [0, 1, 2, 3].filter((i) => i !== shortcutKeys.indexOf(key));
-                  newValue.push(shortcutKeys[indicies[Math.floor(Math.random() * indicies.length)]]);
-                }
-                props.onChange(newValue);
-              } else {
-                props.onChange([...props.value, key]);
-              }
-            }}
+            onClick={[onKeyClick, key]}
           >
-            <span>
-              {key}
-            </span>
+            {getKeyContent(key)}
           </button>
         ))}
       </div>