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
2021-09-29 17:52:27 +02:00
parent 3867f625f1
commit 0e5692d8ab
8 changed files with 42 additions and 58 deletions
--- a/app/assets/icons/ic-account-circle.svg
+++ b/app/assets/icons/ic-account-circle.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.0001 16.0001C7.91675 16.0001 6.07508 14.9334 5.00008 13.3334C5.02508 11.6667 8.33342 10.7501 10.0001 10.7501C11.6667 10.7501 14.9751 11.6667 15.0001 13.3334C13.9251 14.9334 12.0834 16.0001 10.0001 16.0001ZM10.0001 4.16675C10.6631 4.16675 11.299 4.43014 11.7679 4.89898C12.2367 5.36782 12.5001 6.00371 12.5001 6.66675C12.5001 7.32979 12.2367 7.96568 11.7679 8.43452C11.299 8.90336 10.6631 9.16675 10.0001 9.16675C9.33704 9.16675 8.70116 8.90336 8.23232 8.43452C7.76347 7.96568 7.50008 7.32979 7.50008 6.66675C7.50008 6.00371 7.76347 5.36782 8.23232 4.89898C8.70116 4.43014 9.33704 4.16675 10.0001 4.16675ZM10.0001 1.66675C8.90573 1.66675 7.8221 1.8823 6.81105 2.30109C5.80001 2.71987 4.88135 3.3337 4.10753 4.10753C2.54472 5.67033 1.66675 7.78995 1.66675 10.0001C1.66675 12.2102 2.54472 14.3298 4.10753 15.8926C4.88135 16.6665 5.80001 17.2803 6.81105 17.6991C7.8221 18.1179 8.90573 18.3334 10.0001 18.3334C12.2102 18.3334 14.3298 17.4554 15.8926 15.8926C17.4554 14.3298 18.3334 12.2102 18.3334 10.0001C18.3334 5.39175 14.5834 1.66675 10.0001 1.66675Z"/>
+</svg>
--- 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>
  );
 });
--- 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>
--- 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;
--- 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',
--- 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 {
--- 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;
--- 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);
 }