feat: get editor icons and their colors from snjs (#828)

* feat: get editor icons and their colors from snjs * feat: get icons and their tints from snjs * fix: use IconType from snjs
standardnotes · Jan 31, 2022 · bf382ce · bf382ce
1 parent e890e22
commit bf382ce
Show file tree

Hide file tree

Showing 21 changed files with 126 additions and 104 deletions.
diff --git a/app/assets/javascripts/components/Dropdown.tsx b/app/assets/javascripts/components/Dropdown.tsx
@@ -8,7 +8,8 @@ import {
 } from '@reach/listbox';
 import VisuallyHidden from '@reach/visually-hidden';
 import { FunctionComponent } from 'preact';
-import { IconType, Icon } from './Icon';
+import { Icon } from './Icon';
+import { IconType } from '@standardnotes/snjs';
 
 export type DropdownItem = {
   icon?: IconType;

diff --git a/app/assets/javascripts/components/Icon.tsx b/app/assets/javascripts/components/Icon.tsx
@@ -67,6 +67,7 @@ import MenuArrowDownAlt from '../../icons/ic-menu-arrow-down-alt.svg';
 import MenuArrowRight from '../../icons/ic-menu-arrow-right.svg';
 
 import { FunctionalComponent } from 'preact';
+import { IconType } from '@standardnotes/snjs';
 
 const ICONS = {
   editor: EditorIcon,
@@ -137,8 +138,6 @@ const ICONS = {
   'premium-feature': PremiumFeatureIcon,
 };
 
-export type IconType = keyof typeof ICONS;
-
 type Props = {
   type: IconType;
   className?: string;

diff --git a/app/assets/javascripts/components/IconButton.tsx b/app/assets/javascripts/components/IconButton.tsx
@@ -1,5 +1,6 @@
 import { FunctionComponent } from 'preact';
-import { Icon, IconType } from './Icon';
+import { Icon } from './Icon';
+import { IconType } from '@standardnotes/snjs';
 
 interface Props {
   /**

diff --git a/app/assets/javascripts/components/InputWithIcon.tsx b/app/assets/javascripts/components/InputWithIcon.tsx
@@ -1,8 +1,9 @@
 import { FunctionComponent, Ref } from 'preact';
 import { JSXInternal } from 'preact/src/jsx';
 import { forwardRef } from 'preact/compat';
-import { Icon, IconType } from './Icon';
+import { Icon } from './Icon';
 import { IconButton } from './IconButton';
+import { IconType } from '@standardnotes/snjs';
 
 type ToggleProps = {
   toggleOnIcon: IconType;

diff --git a/app/assets/javascripts/components/NotesListItem.tsx b/app/assets/javascripts/components/NotesListItem.tsx
@@ -1,4 +1,3 @@
-import { getIconAndTintForEditor } from '@/preferences/panes/general-segments';
 import { WebApplication } from '@/ui_models/application';
 import {
   CollectionSort,
@@ -74,7 +73,9 @@ export const NotesListItem: FunctionComponent<Props> = ({
   const showModifiedDate = sortedBy === CollectionSort.UpdatedAt;
   const editorForNote = application.componentManager.editorForNote(note);
   const editorName = editorForNote?.name ?? 'Plain editor';
-  const [icon, tint] = getIconAndTintForEditor(editorForNote?.identifier);
+  const [icon, tint] = application.iconsController.getIconAndTintForEditor(
+    editorForNote?.identifier
+  );
 
   return (
     <div

diff --git a/app/assets/javascripts/components/NotesOptions/ChangeEditorOption.tsx b/app/assets/javascripts/components/NotesOptions/ChangeEditorOption.tsx
@@ -18,6 +18,7 @@ import {
 } from '@reach/disclosure';
 import {
   ComponentArea,
+  IconType,
   ItemMutator,
   NoteMutator,
   PrefKey,
@@ -27,7 +28,7 @@ import {
 } from '@standardnotes/snjs';
 import { FunctionComponent } from 'preact';
 import { useEffect, useRef, useState } from 'preact/hooks';
-import { Icon, IconType } from '../Icon';
+import { Icon } from '../Icon';
 import { PremiumModalProvider } from '../Premium';
 import { createEditorMenuGroups } from './changeEditor/createEditorMenuGroups';
 import { EditorAccordionMenu } from './changeEditor/EditorAccordionMenu';

diff --git a/app/assets/javascripts/components/RoundIconButton.tsx b/app/assets/javascripts/components/RoundIconButton.tsx
@@ -1,5 +1,6 @@
 import { FunctionComponent } from 'preact';
-import { Icon, IconType } from './Icon';
+import { Icon } from './Icon';
+import { IconType } from '@standardnotes/snjs';
 
 type ButtonType = 'normal' | 'primary';
 

diff --git a/app/assets/javascripts/components/Switch.tsx b/app/assets/javascripts/components/Switch.tsx
@@ -29,7 +29,9 @@ export const Switch: FunctionalComponent<SwitchProps> = (
 
   return (
     <label
-      className={`sn-component flex justify-between items-center cursor-pointer px-3 ${className} ${isDisabled ? 'faded' : ''}`}
+      className={`sn-component flex justify-between items-center cursor-pointer px-3 ${className} ${
+        isDisabled ? 'faded' : ''
+      }`}
       {...(props.role ? { role: props.role } : {})}
     >
       {props.children}
@@ -51,8 +53,9 @@ export const Switch: FunctionalComponent<SwitchProps> = (
         />
         <span
           aria-hidden
-          className={`sn-switch-handle ${checked ? 'sn-switch-handle--right' : ''
-            }`}
+          className={`sn-switch-handle ${
+            checked ? 'sn-switch-handle--right' : ''
+          }`}
         />
       </CustomCheckboxContainer>
     </label>

diff --git a/app/assets/javascripts/components/Tags/SmartTagsListItem.tsx b/app/assets/javascripts/components/Tags/SmartTagsListItem.tsx
@@ -1,8 +1,8 @@
-import { Icon, IconType } from '@/components/Icon';
+import { Icon } from '@/components/Icon';
 import { FeaturesState } from '@/ui_models/app_state/features_state';
 import { TagsState } from '@/ui_models/app_state/tags_state';
 import '@reach/tooltip/styles.css';
-import { SNSmartTag } from '@standardnotes/snjs';
+import { SNSmartTag, IconType } from '@standardnotes/snjs';
 import { observer } from 'mobx-react-lite';
 import { FunctionComponent } from 'preact';
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';

diff --git a/app/assets/javascripts/components/menu/MenuItem.tsx b/app/assets/javascripts/components/menu/MenuItem.tsx
@@ -6,8 +6,9 @@ import {
 } from 'preact';
 import { forwardRef, Ref } from 'preact/compat';
 import { JSXInternal } from 'preact/src/jsx';
-import { Icon, IconType } from '../Icon';
+import { Icon } from '../Icon';
 import { Switch, SwitchProps } from '../Switch';
+import { IconType } from '@standardnotes/snjs';
 
 export enum MenuItemType {
   IconButton,

diff --git a/app/assets/javascripts/preferences/PreferencesMenu.ts b/app/assets/javascripts/preferences/PreferencesMenu.ts
@@ -1,11 +1,11 @@
-import { IconType } from '@/components/Icon';
 import { action, makeAutoObservable, observable } from 'mobx';
 import { ExtensionsLatestVersions } from '@/preferences/panes/extensions-segments';
 import {
   ComponentArea,
   ContentType,
   FeatureIdentifier,
   SNComponent,
+  IconType,
 } from '@standardnotes/snjs';
 import { WebApplication } from '@/ui_models/application';
 

diff --git a/app/assets/javascripts/preferences/components/MenuItem.tsx b/app/assets/javascripts/preferences/components/MenuItem.tsx
@@ -1,5 +1,6 @@
-import { Icon, IconType } from '@/components/Icon';
+import { Icon } from '@/components/Icon';
 import { FunctionComponent } from 'preact';
+import { IconType } from '@standardnotes/snjs';
 
 interface Props {
   iconType: IconType;

diff --git a/app/assets/javascripts/preferences/panes/Appearance.tsx b/app/assets/javascripts/preferences/panes/Appearance.tsx
@@ -142,7 +142,8 @@ const AppearancePane: FunctionComponent<Props> = observer(({ application }) => {
               <div className="flex flex-col">
                 <Subtitle>Use system color scheme</Subtitle>
                 <Text>
-                  Automatically change active theme based on your system settings.
+                  Automatically change active theme based on your system
+                  settings.
                 </Text>
               </div>
               <Switch

diff --git a/app/assets/javascripts/preferences/panes/backups-segments/EmailBackups.tsx b/app/assets/javascripts/preferences/panes/backups-segments/EmailBackups.tsx
@@ -1,4 +1,7 @@
-import { convertStringifiedBooleanToBoolean, isDesktopApplication } from '@/utils';
+import {
+  convertStringifiedBooleanToBoolean,
+  isDesktopApplication,
+} from '@/utils';
 import { STRING_FAILED_TO_UPDATE_USER_SETTING } from '@/strings';
 import { useCallback, useEffect, useState } from 'preact/hooks';
 import { WebApplication } from '@/ui_models/application';

diff --git a/...sets/javascripts/preferences/panes/backups-segments/cloud-backups/CloudBackupProvider.tsx b/...sets/javascripts/preferences/panes/backups-segments/cloud-backups/CloudBackupProvider.tsx
@@ -5,7 +5,7 @@ import {
   CloudProvider,
   DropboxBackupFrequency,
   GoogleDriveBackupFrequency,
-  OneDriveBackupFrequency
+  OneDriveBackupFrequency,
 } from '@standardnotes/settings';
 import { WebApplication } from '@/ui_models/application';
 import { Button } from '@/components/Button';
@@ -20,9 +20,9 @@ type Props = {
 };
 
 export const CloudBackupProvider: FunctionComponent<Props> = ({
-                                                                application,
-                                                                providerName
-                                                              }) => {
+  application,
+  providerName,
+}) => {
   const [authBegan, setAuthBegan] = useState(false);
   const [successfullyInstalled, setSuccessfullyInstalled] = useState(false);
   const [backupFrequency, setBackupFrequency] = useState<string | null>(null);
@@ -32,14 +32,13 @@ export const CloudBackupProvider: FunctionComponent<Props> = ({
     event.stopPropagation();
 
     try {
-      const shouldDisable = await application.alertService
-        .confirm(
-          'Are you sure you want to disable this integration?',
-          'Disable?',
-          'Disable',
-          ButtonType.Danger,
-          'Cancel'
-        );
+      const shouldDisable = await application.alertService.confirm(
+        'Are you sure you want to disable this integration?',
+        'Disable?',
+        'Disable',
+        ButtonType.Danger,
+        'Cancel'
+      );
       if (shouldDisable) {
         await application.deleteSetting(backupFrequencySettingName);
         await application.deleteSetting(backupTokenSettingName);
@@ -54,15 +53,21 @@ export const CloudBackupProvider: FunctionComponent<Props> = ({
   const installIntegration = (event: Event) => {
     event.stopPropagation();
 
-    const authUrl = application.getCloudProviderIntegrationUrl(providerName, isDev);
+    const authUrl = application.getCloudProviderIntegrationUrl(
+      providerName,
+      isDev
+    );
     openInNewTab(authUrl);
     setAuthBegan(true);
   };
 
   const performBackupNow = async () => {
     // A backup is performed anytime the setting is updated with the integration token, so just update it here
     try {
-      await application.updateSetting(backupFrequencySettingName, backupFrequency as string);
+      await application.updateSetting(
+        backupFrequencySettingName,
+        backupFrequency as string
+      );
       application.alertService.alert(
         'A backup has been triggered for this provider. Please allow a couple minutes for your backup to be processed.'
       );
@@ -77,20 +82,24 @@ export const CloudBackupProvider: FunctionComponent<Props> = ({
     [CloudProvider.Dropbox]: {
       backupTokenSettingName: SettingName.DropboxBackupToken,
       backupFrequencySettingName: SettingName.DropboxBackupFrequency,
-      defaultBackupFrequency: DropboxBackupFrequency.Daily
+      defaultBackupFrequency: DropboxBackupFrequency.Daily,
     },
     [CloudProvider.Google]: {
       backupTokenSettingName: SettingName.GoogleDriveBackupToken,
       backupFrequencySettingName: SettingName.GoogleDriveBackupFrequency,
-      defaultBackupFrequency: GoogleDriveBackupFrequency.Daily
+      defaultBackupFrequency: GoogleDriveBackupFrequency.Daily,
     },
     [CloudProvider.OneDrive]: {
       backupTokenSettingName: SettingName.OneDriveBackupToken,
       backupFrequencySettingName: SettingName.OneDriveBackupFrequency,
-      defaultBackupFrequency: OneDriveBackupFrequency.Daily
-    }
+      defaultBackupFrequency: OneDriveBackupFrequency.Daily,
+    },
   };
-  const { backupTokenSettingName, backupFrequencySettingName, defaultBackupFrequency } = backupSettingsData[providerName];
+  const {
+    backupTokenSettingName,
+    backupFrequencySettingName,
+    defaultBackupFrequency,
+  } = backupSettingsData[providerName];
 
   const getCloudProviderIntegrationTokenFromUrl = (url: URL) => {
     const urlSearchParams = new URLSearchParams(url.search);
@@ -123,8 +132,14 @@ export const CloudBackupProvider: FunctionComponent<Props> = ({
         if (!cloudProviderToken) {
           throw new Error();
         }
-        await application.updateSetting(backupTokenSettingName, cloudProviderToken);
-        await application.updateSetting(backupFrequencySettingName, defaultBackupFrequency);
+        await application.updateSetting(
+          backupTokenSettingName,
+          cloudProviderToken
+        );
+        await application.updateSetting(
+          backupFrequencySettingName,
+          defaultBackupFrequency
+        );
 
         setBackupFrequency(defaultBackupFrequency);
 
@@ -174,15 +189,15 @@ export const CloudBackupProvider: FunctionComponent<Props> = ({
       </div>
       {authBegan && (
         <div>
-          <p className='sk-panel-row'>
+          <p className="sk-panel-row">
             Complete authentication from the newly opened window. Upon
             completion, a confirmation code will be displayed. Enter this code
             below:
           </p>
           <div className={`mt-1`}>
             <input
-              className='sk-input sk-base center-text'
-              placeholder='Enter confirmation code'
+              className="sk-input sk-base center-text"
+              placeholder="Enter confirmation code"
               value={confirmation}
               onKeyPress={handleKeyPress}
               onChange={handleChange}
@@ -193,8 +208,8 @@ export const CloudBackupProvider: FunctionComponent<Props> = ({
       {shouldShowEnableButton && (
         <div>
           <Button
-            type='normal'
-            label='Enable'
+            type="normal"
+            label="Enable"
             className={'px-1 text-xs min-w-40'}
             onClick={installIntegration}
           />
@@ -204,15 +219,15 @@ export const CloudBackupProvider: FunctionComponent<Props> = ({
       {backupFrequency && (
         <div className={'flex flex-col items-end'}>
           <Button
-            className='min-w-40 mb-2'
-            type='normal'
-            label='Perform Backup'
+            className="min-w-40 mb-2"
+            type="normal"
+            label="Perform Backup"
             onClick={performBackupNow}
           />
           <Button
-            className='min-w-40'
-            type='normal'
-            label='Disable'
+            className="min-w-40"
+            type="normal"
+            label="Disable"
             onClick={disable}
           />
         </div>