AccountMenu form data management + layout fixes

app/assets/javascripts/directives/views/accountMenu.js

@@ -64,33 +64,33 @@ class AccountMenuCtrl extends PureCtrl {
       mutable: {
         backupEncrypted: this.encryptedBackupsAvailable()
       }
-    }
+    };
 
     this.syncStatus = this.syncManager.syncStatus;
     this.syncManager.getServerURL().then((url) => {
       this.setState({
         server: url,
         formData: { ...this.state.formData, url: url }
-      })
-    })
+      });
+    });
     this.authManager.checkForSecurityUpdate().then((available) => {
       this.setState({
         securityUpdateAvailable: available
-      })
-    })
+      });
+    });
     this.reloadAutoLockInterval();
   }
 
   $onInit() {
     this.initProps({
       closeFunction: this.closeFunction
-    })
+    });
   }
 
   close() {
     this.$timeout(() => {
       this.props.closeFunction()();
-    })
+    });
   }
 
   encryptedBackupsAvailable() {
@@ -115,11 +115,22 @@ class AccountMenuCtrl extends PureCtrl {
     }
   }
 
+  async setFormDataState(formData) {
+    return this.setState({
+      formData: {
+        ...this.state.formData,
+        ...formData
+      }
+    });
+  }
+
   async login(extraParams) {
     /** Prevent a timed sync from occuring while signing in. */
     this.syncManager.lockSyncing();
-    this.state.formData.status = STRING_GENERATING_LOGIN_KEYS;
-    this.state.formData.authenticating = true;
+    await this.setFormDataState({
+      status: STRING_GENERATING_LOGIN_KEYS,
+      authenticating: true
+    });
     const response = await this.authManager.login(
       this.state.formData.url,
       this.state.formData.email,
@@ -136,24 +147,32 @@ class AccountMenuCtrl extends PureCtrl {
       return;
     }
     this.syncManager.unlockSyncing();
-    this.state.formData.status = null;
+    await this.setFormDataState({
+      status: null,
+    });
     const error = response
       ? response.error
-      : { message: "An unknown error occured." }
+      : { message: "An unknown error occured." };
 
     if (error.tag === 'mfa-required' || error.tag === 'mfa-invalid') {
-      this.state.formData.showLogin = false;
-      this.state.formData.mfa = error;
+     await this.setFormDataState({
+        showLogin: false,
+        mfa: error
+      });
     } else {
-      this.state.formData.showLogin = true;
-      this.state.formData.mfa = null;
+      await this.setFormDataState({
+        showLogin: true,
+        mfa: null
+      });
       if (error.message) {
         this.alertManager.alert({
           text: error.message
         });
       }
     }
-    this.state.formData.authenticating = false;
+    await this.setFormDataState({
+      authenticating: false,
+    });
   }
 
   async register() {
@@ -163,22 +182,28 @@ class AccountMenuCtrl extends PureCtrl {
         text: STRING_NON_MATCHING_PASSWORDS
       });
       return;
-    }
-    this.state.formData.confirmPassword = false;
-    this.state.formData.status = STRING_GENERATING_REGISTER_KEYS;
-    this.state.formData.authenticating = true;
+    }    
+    await this.setFormDataState({
+      confirmPassword: false,
+      status: STRING_GENERATING_REGISTER_KEYS,
+      authenticating: true
+    });
     const response = await this.authManager.register(
       this.state.formData.url,
       this.state.formData.email,
       this.state.formData.user_password,
       this.state.formData.ephemeral
-    )
+    );
     if (!response || response.error) {
-      this.state.formData.status = null;
+      await this.setFormDataState({
+        status: null
+      });
       const error = response
         ? response.error
         : { message: "An unknown error occured." };
-      this.state.formData.authenticating = false;
+      await this.setFormDataState({
+        authenticating: false
+      });
       this.alertManager.alert({
         text: error.message
       });
@@ -194,9 +219,11 @@ class AccountMenuCtrl extends PureCtrl {
         text: STRING_ACCOUNT_MENU_UNCHECK_MERGE,
         destructive: true,
         onCancel: () => {
-          this.state.formData.mergeLocal = true;
+          this.setFormDataState({
+            mergeLocal: true
+          });
         }
-      })
+      });
     }
   }
 
@@ -208,7 +235,9 @@ class AccountMenuCtrl extends PureCtrl {
       this.modelManager.removeAllItemsFromMemory();
       await this.storageManager.clearAllModels();
     }
-    this.state.formData.authenticating = false;
+    await this.setFormDataState({
+      authenticating: false
+    });
     this.syncManager.refreshErroredItems();
     this.close();
   }
@@ -222,7 +251,7 @@ class AccountMenuCtrl extends PureCtrl {
     this.close();
     const run = () => {
       this.privilegesManager.presentPrivilegesManagementModal();
-    }
+    };
     const needsPrivilege = await this.privilegesManager.actionRequiresPrivilege(
       PrivilegesManager.ActionManagePrivileges
     );
@@ -257,7 +286,7 @@ class AccountMenuCtrl extends PureCtrl {
         await this.authManager.signout(true);
         window.location.reload();
       }
-    })
+    });
   }
 
   async submitImportPassword() {
@@ -279,10 +308,9 @@ class AccountMenuCtrl extends PureCtrl {
             text: STRING_INVALID_IMPORT_FILE
           });
         }
-      }
-
+      };
       reader.readAsText(file);
-    })
+    });
   }
 
   /**
@@ -302,7 +330,7 @@ class AccountMenuCtrl extends PureCtrl {
             requestPassword: true,
             data: data
           }
-        })
+        });
         const element = document.getElementById(
           ELEMENT_ID_IMPORT_PASSWORD_INPUT
         );
@@ -312,7 +340,7 @@ class AccountMenuCtrl extends PureCtrl {
       } else {
         await this.performImport(data, null);
       }
-    }
+    };
     const needsPrivilege = await this.privilegesManager.actionRequiresPrivilege(
       PrivilegesManager.ActionManageBackups
     );
@@ -332,20 +360,20 @@ class AccountMenuCtrl extends PureCtrl {
         ...this.state.importData,
         loading: true
       }
-    })
+    });
     const errorCount = await this.importJSONData(data, password);
     this.setState({
       importData: null
-    })
+    });
     if (errorCount > 0) {
-      const message = StringImportError({ errorCount: errorCount })
+      const message = StringImportError({ errorCount: errorCount });
       this.alertManager.alert({
         text: message
       });
     } else {
       this.alertManager.alert({
         text: STRING_IMPORT_SUCCESS
-      })
+      });
     }
   }
 
@@ -437,14 +465,14 @@ class AccountMenuCtrl extends PureCtrl {
     const interval = await this.passcodeManager.getAutoLockInterval();
     this.setState({
       selectedAutoLockInterval: interval
-    })
+    });
   }
 
   async selectAutoLockInterval(interval) {
     const run = async () => {
       await this.passcodeManager.setAutoLockInterval(interval);
       this.reloadAutoLockInterval();
-    }
+    };
     const needsPrivilege = await this.privilegesManager.actionRequiresPrivilege(
       PrivilegesManager.ActionManagePasscode
     );
@@ -465,7 +493,9 @@ class AccountMenuCtrl extends PureCtrl {
   }
 
   addPasscodeClicked() {
-    this.state.formData.showPasscodeForm = true;
+    this.setFormDataState({
+      showPasscodeForm: true
+    });
   }
 
   submitPasscodeForm() {
@@ -480,26 +510,23 @@ class AccountMenuCtrl extends PureCtrl {
       ? this.passcodeManager.changePasscode.bind(this.passcodeManager)
       : this.passcodeManager.setPasscode.bind(this.passcodeManager);
     func(passcode, async () => {
-      this.setState({
-        formData: {
-          ...this.state.formData,
-          passcode: null,
-          confirmPasscode: null,
-          showPasscodeForm: false
-        }
-      })
+      await this.setFormDataState({
+        passcode: null,
+        confirmPasscode: null,
+        showPasscodeForm: false
+      });
       if (await this.authManager.offline()) {
         this.$rootScope.$broadcast('major-data-change');
         this.clearDatabaseAndRewriteAllItems();
       }
-    })
+    });
   }
 
   async changePasscodePressed() {
     const run = () => {
       this.state.formData.changingPasscode = true;
       this.addPasscodeClicked();
-    }
+    };
     const needsPrivilege = await this.privilegesManager.actionRequiresPrivilege(
       PrivilegesManager.ActionManagePasscode
     );
@@ -529,8 +556,8 @@ class AccountMenuCtrl extends PureCtrl {
             this.syncManager.markAllItemsDirtyAndSaveOffline();
           }
         }
-      })
-    }
+      });
+    };
     const needsPrivilege = await this.privilegesManager.actionRequiresPrivilege(
       PrivilegesManager.ActionManagePasscode
     );

app/assets/stylesheets/_notes.scss

@@ -1,4 +1,5 @@
-#notes-column, .notes {
+#notes-column,
+.notes {
   border-left: 1px solid var(--sn-stylekit-border-color);
   border-right: 1px solid var(--sn-stylekit-border-color);
 
@@ -90,7 +91,8 @@
 
     // Autohide scrollbar on Windows.
     @at-root {
-      .windows-web &, .windows-desktop & {
+      .windows-web &,
+      .windows-desktop & {
         overflow-y: hidden;
         &:hover {
           overflow-y: auto;
@@ -98,7 +100,6 @@
         }
       }
     }
-
   }
 
   .note {
@@ -130,13 +131,14 @@
       overflow: hidden;
       text-overflow: ellipsis;
 
-      .default-preview, .plain-preview {
+      .default-preview,
+      .plain-preview {
         display: -webkit-box;
         -webkit-box-orient: vertical;
         -webkit-line-clamp: 1; /* number of lines to show */
         $line-height: 18px;
-        line-height: $line-height;        /* fallback */
-        max-height: calc(#{$line-height} * 1);       /* fallback */
+        line-height: $line-height; /* fallback */
+        max-height: calc(#{$line-height} * 1); /* fallback */
       }
 
       .html-preview {

app/assets/stylesheets/_stylekit-sub.scss

@@ -1,5 +1,4 @@
 .sn-component {
-
   .sk-notification {
     &.unpadded {
       padding: 0;
@@ -17,9 +16,7 @@
     }
   }
 
-
   .sk-app-bar {
-
     &.dynamic-height {
       min-height: 2rem !important;
       height: inherit !important;
@@ -31,7 +28,16 @@
       border-top: 0;
     }
   }
+}
 
+.sk-horizontal-group.tight > *:not(:first-child) {
+  margin-left: 0.3rem;
+}
+
+.sk-panel-section {
+  &:last-child {
+    padding-bottom: 1rem;
+  }
 }
 
 .sk-panel {
@@ -59,7 +65,7 @@
 
 #session-history-menu {
   .sk-menu-panel .sk-menu-panel-row .sk-sublabel.opaque {
-    opacity: 1.0
+    opacity: 1;
   }
 }
 

app/assets/stylesheets/_tags.scss

@@ -5,7 +5,8 @@
   -khtml-user-select: none;
   -webkit-user-select: none;
 
-  &, #tags-content {
+  &,
+  #tags-content {
     background-color: var(--sn-stylekit-secondary-background-color);
     display: flex;
     flex-direction: column;
@@ -29,11 +30,15 @@
     height: inherit;
 
     // Autohide scrollbar on Windows.
-    // Unfortunately must affect every platform since no way to hide just for Windows.
-    overflow-y: hidden;
-    &:hover {
-      overflow-y: auto;
-      overflow-y: overlay; // overlay is not supported on ff, so keep previous statement up
+    @at-root {
+      .windows-web &,
+      .windows-desktop & {
+        overflow-y: hidden;
+        &:hover {
+          overflow-y: auto;
+          overflow-y: overlay; // overlay is not supported on ff, so keep previous statement up
+        }
+      }
     }
   }
 
@@ -48,7 +53,7 @@
     min-height: 30px;
     padding: 5px 12px;
     cursor: pointer;
-    transition: height .1s ease-in-out;
+    transition: height 0.1s ease-in-out;
     position: relative;
 
     > .tag-info {
@@ -80,7 +85,7 @@
         // Make sure to undo if it's selected (for editing)
         -webkit-user-select: none;
 
-        &.editing  {
+        &.editing {
           -webkit-user-select: text !important;
         }
 
@@ -111,7 +116,7 @@
       margin-bottom: 2px;
 
       &:hover {
-        opacity: 1.0;
+        opacity: 1;
       }
     }
 
@@ -123,9 +128,11 @@
       }
     }
 
-    &:hover:not(.selected), &.selected  {
+    &:hover:not(.selected),
+    &.selected {
       background-color: var(--sn-stylekit-secondary-contrast-background-color);
       color: var(--sn-stylekit-secondary-contrast-foreground-color);
+
       > .title {
         color: var(--sn-stylekit-secondary-contrast-foreground-color);
       }

app/assets/templates/directives/account-menu.pug

@@ -79,18 +79,21 @@
                   required='', 
                   type='text'
                   )
-              label.sk-label.padded-row(ng-if='self.state.formData.showLogin')
-                input.sk-input(
-                  ng-model='self.state.formData.strictSignin', 
-                  type='checkbox'
-                  )
-                | Use strict sign in
-                span
-                  a.info(
-                    href='https://standardnotes.org/help/security', 
-                    rel='noopener', 
-                    target='_blank'
-                    ) (Learn more)
+              label.sk-label.padded-row.sk-panel-row.justify-left(
+                ng-if='self.state.formData.showLogin'
+                )
+                .sk-horizontal-group.tight
+                  input.sk-input(
+                    ng-model='self.state.formData.strictSignin', 
+                    type='checkbox'
+                    )
+                  p.sk-p Use strict sign in
+                  span
+                    a.info(
+                      href='https://standardnotes.org/help/security', 
+                      rel='noopener', 
+                      target='_blank'
+                      ) (Learn more)
           .sk-panel-section.form-submit(ng-if='!self.state.formData.authenticating')
             .sk-button-group.stretch
               .sk-button.info.featured(
@@ -110,14 +113,14 @@
               .sk-label {{self.state.formData.status}}
           .sk-panel-section.no-bottom-pad(ng-if='!self.state.formData.authenticating')
             label.sk-panel-row.justify-left
-              .sk-horizontal-group
+              .sk-horizontal-group.tight
                 input(
                   ng-false-value='true', 
                   ng-model='self.state.formData.ephemeral', 
                   ng-true-value='false', 
                   type='checkbox'
                   )
-                | Stay signed in
+                p.sk-p Stay signed in
             label.sk-panel-row.justify-left(ng-if='self.notesAndTagsCount() > 0')
               .sk-panel-row
               input(
@@ -280,22 +283,23 @@
           .sk-panel-row
           form.sk-panel-form.sk-panel-row(ng-if='self.encryptedBackupsAvailable()')
             .sk-input-group
-              label
+              label.sk-horizontal-group.tight
                 input(
                   ng-change='self.state.mutable.backupEncrypted = true', 
                   ng-model='self.state.mutable.backupEncrypted', 
                   ng-value='true', 
                   type='radio'
                   )
-                | Encrypted
-              label
+                p.sk-p Encrypted
+              label.sk-horizontal-group.tight
                 input(
                   ng-change='self.state.mutable.backupEncrypted = false', 
                   ng-model='self.state.mutable.backupEncrypted', 
                   ng-value='false', 
                   type='radio'
                   )
-                | Decrypted
+                p.sk-p Decrypted
+          .sk-panel-row
           .sk-button-group.sk-panel-row.justify-left
             .sk-button.info(ng-click='self.downloadDataArchive()')
               .sk-label Download Backup