feat: slim account menu and icon buttons (#655)

* feat: footer icon for preferences menu * feat: account footer icon * feat: account menu icon and slimmed down account menu
standardnotes · Sep 29, 2021 · 0e5692d · 0e5692d
1 parent 3867f62
commit 0e5692d
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 58 deletions.
diff --git a/app/assets/icons/ic-account-circle.svg b/app/assets/icons/ic-account-circle.svg
diff --git a/app/assets/javascripts/components/AccountMenu/User.tsx b/app/assets/javascripts/components/AccountMenu/User.tsx
@@ -1,6 +1,5 @@
 import { observer } from 'mobx-react-lite';
 import { AppState } from '@/ui_models/app_state';
-import { PasswordWizardType } from '@/types';
 import { WebApplication } from '@/ui_models/application';
 import { User } from '@standardnotes/snjs/dist/@types/services/api/responses';
 
@@ -10,22 +9,12 @@ type Props = {
 }
 
 const User = observer(({
-                         appState,
-                         application,
-                       }: Props) => {
-  const { server, closeAccountMenu } = appState.accountMenu;
+  appState,
+  application,
+}: Props) => {
+  const { server } = appState.accountMenu;
   const user = application.getUser();
 
-  const openPasswordWizard = () => {
-    closeAccountMenu();
-    application.presentPasswordWizard(PasswordWizardType.ChangePassword);
-  };
-
-  const openSessionsModal = () => {
-    closeAccountMenu();
-    appState.openSessionsModal();
-  };
-
   return (
     <div className="sk-panel-section">
       {appState.sync.errorMessage && (
@@ -56,12 +45,6 @@ const User = observer(({
         </div>
       </div>
       <div className="sk-panel-row" />
-      <a className="sk-a info sk-panel-row condensed" onClick={openPasswordWizard}>
-        Change Password
-      </a>
-      <a className="sk-a info sk-panel-row condensed" onClick={openSessionsModal}>
-        Manage Sessions
-      </a>
     </div>
   );
 });

diff --git a/app/assets/javascripts/components/AccountMenu/index.tsx b/app/assets/javascripts/components/AccountMenu/index.tsx
@@ -51,25 +51,12 @@ const AccountMenu = observer(({ application, appState }: Props) => {
             application={application}
             appState={appState}
           />
-          {!showLogin && !showRegister && (
+          {!showLogin && !showRegister && user && (
             <div>
-              {user && (
-                <User
-                  application={application}
-                  appState={appState}
-                />
-              )}
-              <Encryption appState={appState} />
-              <Protections application={application} />
-              <PasscodeLock
+              <User
                 application={application}
                 appState={appState}
               />
-              <DataBackup
-                application={application}
-                appState={appState}
-              />
-              <ErrorReporting appState={appState} />
             </div>
           )}
         </div>

diff --git a/app/assets/javascripts/components/Icon.tsx b/app/assets/javascripts/components/Icon.tsx
@@ -28,6 +28,7 @@ import DownloadIcon from '../../icons/ic-download.svg';
 import InfoIcon from '../../icons/ic-info.svg';
 import CheckIcon from '../../icons/ic-check.svg';
 import CheckBoldIcon from '../../icons/ic-check-bold.svg';
+import AccountCircleIcon from '../../icons/ic-account-circle.svg';
 
 import { toDirective } from './utils';
 import { FunctionalComponent } from 'preact';
@@ -61,7 +62,8 @@ const ICONS = {
   download: DownloadIcon,
   info: InfoIcon,
   check: CheckIcon,
-  "check-bold": CheckBoldIcon,
+  'check-bold': CheckBoldIcon,
+  'account-circle': AccountCircleIcon,
 };
 
 export type IconType = keyof typeof ICONS;

diff --git a/app/assets/javascripts/views/footer/footer-view.pug b/app/assets/javascripts/views/footer/footer-view.pug
@@ -1,28 +1,37 @@
 .sn-component
   #footer-bar.sk-app-bar.no-edges.no-bottom-edge
     .left
-      .sk-app-bar-item(
+      .sk-app-bar-item.ml-0(
         click-outside='ctrl.clickOutsideAccountMenu()',
         is-open='ctrl.showAccountMenu',
         ng-click='ctrl.accountMenuPressed()'
-        )
-        .sk-app-bar-item-column
-          .sk-circle.small(
-            ng-class="ctrl.hasError ? 'danger' : (ctrl.user ? 'info' : 'neutral')"
+      )
+        .w-8.h-8.flex.items-center.justify-center.cursor-pointer.rounded-full(
+            ng-class="ctrl.showAccountMenu ? 'bg-border' : '' "
+          )
+            .w-5.h-5(
+              ng-class="ctrl.hasError ? 'danger' : (ctrl.user ? 'info' : 'neutral')"
             )
-        .sk-app-bar-item-column
-          .sk-label.title(ng-class='{red: ctrl.hasError}') Account
+              icon(
+                type="account-circle"
+                class-name="hover:color-info w-5 h-5 max-h-5"
+              )
         account-menu(
           ng-click='$event.stopPropagation()',
           app-state='ctrl.appState'
           application='ctrl.application'
           ng-if='ctrl.showAccountMenu',
         )
-      .sk-app-bar-item(
+      .sk-app-bar-item.ml-0-important(
         ng-click='ctrl.clickPreferences()'
         ng-if='ctrl.appState.enableUnfinishedFeatures'
       )
-        .sk-label.title Preferences
+        .w-8.h-8.flex.items-center.justify-center.cursor-pointer
+          .h-5
+            icon(
+              type="tune"
+              class-name="rounded hover:color-info"
+            )
       .sk-app-bar-item
         a.no-decoration.sk-label.title(
           href='https://standardnotes.com/help',

diff --git a/app/assets/stylesheets/_footer.scss b/app/assets/stylesheets/_footer.scss
@@ -34,17 +34,6 @@
       border-bottom: 2px solid var(--sn-stylekit-info-color);
     }
   }
-
-  svg {
-    width: 12px;
-    height: 12px;
-    fill: var(--sn-stylekit-secondary-foreground-color);
-
-    &:hover {
-      fill: var(--sn-stylekit-info-color) !important;
-      color: var(--sn-stylekit-info-color) !important;
-    }
-  }
 }
 
 #account-switcher-icon {

diff --git a/app/assets/stylesheets/_main.scss b/app/assets/stylesheets/_main.scss
@@ -115,7 +115,7 @@ p {
   background-color: var(--sn-stylekit-background-color);
 }
 
-$footer-height: 32px;
+$footer-height: 2rem;
 
 #resizer-overlay {
   position: absolute;

diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
@@ -154,6 +154,13 @@
   @extend .font-bold;
 }
 
+.ml-0-important {
+  margin-left: 0rem !important;
+}
+
+.ml-3 {
+  margin-left: 0.75rem;
+}
 .ml-4 {
   margin-left: 1rem;
 }
@@ -222,6 +229,10 @@
   min-height: 1.5rem;
 }
 
+.max-h-5 {
+  max-height: 1.25rem;
+}
+
 .border-danger {
   border-color: var(--sn-stylekit-danger-color);
 }