From ba781f27656c01b507f9825b93285de1f87c83a5 Mon Sep 17 00:00:00 2001 From: Mo Bitar Date: Tue, 11 Dec 2018 09:08:10 -0600 Subject: [PATCH] Style updates --- Gruntfile.js | 2 +- .../javascripts/app/controllers/editor.js | 18 ++++++++------ app/assets/stylesheets/app/_editor.scss | 5 ++-- app/assets/stylesheets/app/_lock-screen.scss | 2 +- app/assets/stylesheets/app/_main.scss | 2 +- .../directives/account-menu.html.haml | 24 ++++++++++--------- .../directives/password-wizard.html.haml | 6 ++--- app/assets/templates/editor.html.haml | 14 +++++------ app/assets/templates/footer.html.haml | 2 +- app/assets/templates/lock-screen.html.haml | 2 +- 10 files changed, 42 insertions(+), 35 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index f35fa3316..ab803c3cc 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -166,6 +166,6 @@ module.exports = function(grunt) { grunt.registerTask('default', ['haml', 'ngtemplates', 'sass', 'concat:app', 'babel', 'browserify', 'concat:lib', 'concat:dist', 'ngAnnotate', 'concat:css', 'uglify']); - grunt.registerTask('vendor', ['concat:app', 'babel', 'browserify', + grunt.registerTask('vendor', ['concat:app', 'sass', 'babel', 'browserify', 'concat:lib', 'concat:dist', 'ngAnnotate', 'concat:css', 'uglify']); }; diff --git a/app/assets/javascripts/app/controllers/editor.js b/app/assets/javascripts/app/controllers/editor.js index 1edba4c77..c1a4416a3 100644 --- a/app/assets/javascripts/app/controllers/editor.js +++ b/app/assets/javascripts/app/controllers/editor.js @@ -170,19 +170,23 @@ angular.module('app') } } - this.onEditorMenuClick = function() { - // App bar menu item click - this.showEditorMenu = !this.showEditorMenu; - this.showMenu = false; - this.showExtensions = false; - } - this.closeAllMenus = function() { this.showEditorMenu = false; this.showMenu = false; this.showExtensions = false; } + this.toggleMenu = function(menu) { + this[menu] = !this[menu]; + + let allMenus = ['showMenu', 'showEditorMenu', 'showExtensions', 'showSessionHistory']; + for(var candidate of allMenus) { + if(candidate != menu) { + this[candidate] = false; + } + } + } + this.editorMenuOnSelect = function(component) { if(!component || component.area == "editor-editor") { // if plain editor or other editor diff --git a/app/assets/stylesheets/app/_editor.scss b/app/assets/stylesheets/app/_editor.scss index ed59df22a..65eb89e1f 100644 --- a/app/assets/stylesheets/app/_editor.scss +++ b/app/assets/stylesheets/app/_editor.scss @@ -60,7 +60,7 @@ $heading-height: 75px; font-weight: normal; margin-top: 4px; text-align: right; - color: var(--sn-stylekit-neutral-color); + color: var(--sn-stylekit-secondary-contrast-background-color); } .editor-tags { @@ -133,9 +133,10 @@ $heading-height: 75px; iframe { width: 100%; + background-color: var(--sn-stylekit-background-color); // we moved the border top from the .component-stack-item to the .iframe, as on parent, // it increases its height and caused unneccessary scrollbars on windows. - border-top: 1px solid var(--sn-component-border-color); + border-top: 1px solid var(--sn-stylekit-border-color); } } } diff --git a/app/assets/stylesheets/app/_lock-screen.scss b/app/assets/stylesheets/app/_lock-screen.scss index 4a7f57b66..5e135881e 100644 --- a/app/assets/stylesheets/app/_lock-screen.scss +++ b/app/assets/stylesheets/app/_lock-screen.scss @@ -12,7 +12,7 @@ bottom: 0; z-index: $z-index-lock-screen; - background-color: var(--sn-stylekit-background-color); + background-color: var(--sn-stylekit-contrast-background-color); color: var(--sn-stylekit-foreground-color); font-size: 16px; display: flex; diff --git a/app/assets/stylesheets/app/_main.scss b/app/assets/stylesheets/app/_main.scss index caa68d27a..ada2d1d9b 100644 --- a/app/assets/stylesheets/app/_main.scss +++ b/app/assets/stylesheets/app/_main.scss @@ -118,7 +118,7 @@ $footer-height: 32px; position: absolute; cursor: col-resize; // needs to be a color that works on main bg and contrast bg - background-color: var(--sn-stylekit-on-contrast-background-color); + background-color: var(--sn-stylekit-secondary-contrast-background-color); opacity: 0; border-top: none; border-bottom: none; diff --git a/app/assets/templates/directives/account-menu.html.haml b/app/assets/templates/directives/account-menu.html.haml index ae61a0577..9cff2a4b0 100644 --- a/app/assets/templates/directives/account-menu.html.haml +++ b/app/assets/templates/directives/account-menu.html.haml @@ -4,16 +4,16 @@ .sk-panel-header-title Account %a.sk-a.infoclose-button{"ng-click" => "close()"} Close .sk-panel-content - .sk-panel-section.hero{"ng-if" => "!user && !formData.showLogin && !formData.showRegister && !formData.mfa"} - .sk-panel-section-title Sign in or register to enable sync and end-to-end encryption. + .sk-panel-section.sk-panel-hero{"ng-if" => "!user && !formData.showLogin && !formData.showRegister && !formData.mfa"} .sk-panel-row + .sk-h1 Sign in or register to enable sync and end-to-end encryption. .sk-panel-row .sk-button-group.stretch .sk-button.info.featured{"ng-click" => "formData.showLogin = true"} .sk-label Sign In .sk-button.info.featured{"ng-click" => "formData.showRegister = true"} .sk-label Register - %p + .sk-panel-row.sk-p Standard Notes is free on every platform, and comes standard with sync and encryption. .sk-panel-section{"ng-if" => "formData.showLogin || formData.showRegister"} @@ -21,22 +21,22 @@ {{formData.showLogin ? "Sign In" : "Register"}} %form.sk-panel-form{"ng-submit" => "submitAuthForm()"} - %input{:placeholder => 'Email', "sn-autofocus" => 'true', "should-focus" => "true", :name => 'email', :required => true, :type => 'email', 'ng-model' => 'formData.email'} - %input{:placeholder => 'Password', :name => 'password', :required => true, :type => 'password', 'ng-model' => 'formData.user_password'} - %input{:placeholder => 'Confirm Password', "ng-if" => "formData.showRegister", :name => 'password', :required => true, :type => 'password', 'ng-model' => 'formData.password_conf'} + %input.sk-input.contrast{:placeholder => 'Email', "sn-autofocus" => 'true', "should-focus" => "true", :name => 'email', :required => true, :type => 'email', 'ng-model' => 'formData.email'} + %input.sk-input.contrast{:placeholder => 'Password', :name => 'password', :required => true, :type => 'password', 'ng-model' => 'formData.user_password'} + %input.sk-input.contrast{:placeholder => 'Confirm Password', "ng-if" => "formData.showRegister", :name => 'password', :required => true, :type => 'password', 'ng-model' => 'formData.password_conf'} %a.sk-panel-row{"ng-click" => "formData.showAdvanced = !formData.showAdvanced"} Advanced Options - .sk-notification.info{"ng-if" => "formData.showRegister"} + .sk-notification.neutral{"ng-if" => "formData.showRegister"} .sk-notification-title No Password Reset. .sk-notification-text Because your notes are encrypted using your password, Standard Notes does not have a password reset option. You cannot forget your password. - .sk-notification.unpadded.default.advanced-options.sk-panel-row{"ng-if" => "formData.showAdvanced"} + .sk-notification.unpadded.contrast.advanced-options.sk-panel-row{"ng-if" => "formData.showAdvanced"} .sk-panel-column.stretch .sk-notification-title.sk-panel-row.padded-row Advanced Options %div.bordered-row.padded-row %label.sk-label Sync Server Domain - %input.sk-input.mt-5.sk-input{:name => 'server', :placeholder => 'Server URL', :required => true, :type => 'text', 'ng-model' => 'formData.url'} + %input.sk-input.mt-5.sk-base{:name => 'server', :placeholder => 'Server URL', :required => true, :type => 'text', 'ng-model' => 'formData.url'} %label.sk-label.padded-row{"ng-if" => "formData.showLogin"} %input.sk-input{"type" => "checkbox", "ng-model" => "formData.strictSignin"} Use strict sign in @@ -47,9 +47,11 @@ %button.sk-button.info.featured{"type" => "submit", "ng-disabled" => "formData.authenticating"} .sk-label {{formData.showLogin ? "Sign In" : "Register"}} + .sk-panel-row %label %input{"type" => "checkbox", "ng-model" => "formData.ephemeral", "ng-true-value" => "false", "ng-false-value" => "true"} Stay signed in + .sk-panel-row %label{"ng-if" => "notesAndTagsCount() > 0"} %input{"type" => "checkbox", "ng-model" => "formData.mergeLocal", "ng-bind" => "true", "ng-change" => "mergeLocalChanged()"} Merge local data ({{notesAndTagsCount()}} notes and tags) @@ -113,8 +115,8 @@ %form.sk-panel-form{"ng-if" => "formData.showPasscodeForm", "ng-submit" => "submitPasscodeForm()"} .sk-panel-row - %input.sk-input{:type => 'password', "ng-model" => "formData.passcode", "placeholder" => "Passcode", "sn-autofocus" => "true", "should-focus" => "true"} - %input.sk-input{:type => 'password', "ng-model" => "formData.confirmPasscode", "placeholder" => "Confirm Passcode"} + %input.sk-input.contrast{:type => 'password', "ng-model" => "formData.passcode", "placeholder" => "Passcode", "sn-autofocus" => "true", "should-focus" => "true"} + %input.sk-input.contrast{:type => 'password', "ng-model" => "formData.confirmPasscode", "placeholder" => "Confirm Passcode"} .sk-button-group.stretch.sk-panel-row.form-submit %button.sk-button.info{"type" => "submit"} .sk-label Set Passcode diff --git a/app/assets/templates/directives/password-wizard.html.haml b/app/assets/templates/directives/password-wizard.html.haml index 70a856aa2..207c9e8c9 100644 --- a/app/assets/templates/directives/password-wizard.html.haml +++ b/app/assets/templates/directives/password-wizard.html.haml @@ -68,9 +68,9 @@ .sk-panel-row .sk-panel-column.stretch %form.sk-panel-form - %input.sk-input{:type => 'password', "ng-model" => "formData.currentPassword", "placeholder" => "Current Password", "sn-autofocus" => "true", "should-focus" => "true"} - %input.sk-input{"ng-if" => "changePassword", :type => 'password', "ng-model" => "formData.newPassword", "placeholder" => "New Password"} - %input.sk-input{"ng-if" => "changePassword", :type => 'password', "ng-model" => "formData.newPasswordConfirmation", "placeholder" => "Confirm New Password"} + %input.sk-input.contrast{:type => 'password', "ng-model" => "formData.currentPassword", "placeholder" => "Current Password", "sn-autofocus" => "true", "should-focus" => "true"} + %input.sk-input.contrast{"ng-if" => "changePassword", :type => 'password', "ng-model" => "formData.newPassword", "placeholder" => "New Password"} + %input.sk-input.contrast{"ng-if" => "changePassword", :type => 'password', "ng-model" => "formData.newPasswordConfirmation", "placeholder" => "Confirm New Password"} %div{"ng-if" => "step == 4"} %p.sk-panel-row diff --git a/app/assets/templates/editor.html.haml b/app/assets/templates/editor.html.haml index d33f6f985..dfea92eed 100644 --- a/app/assets/templates/editor.html.haml +++ b/app/assets/templates/editor.html.haml @@ -25,7 +25,7 @@ .sn-component{"ng-if" => "ctrl.note"} .sk-app-bar.no-edges .left - .sk-app-bar-item{"ng-click" => "ctrl.showMenu = !ctrl.showMenu; ctrl.showExtensions = false; ctrl.showEditorMenu = false;", "ng-class" => "{'selected' : ctrl.showMenu}", "click-outside" => "ctrl.showMenu = false;", "is-open" => "ctrl.showMenu"} + .sk-app-bar-item{"ng-click" => "ctrl.toggleMenu('showMenu')", "ng-class" => "{'selected' : ctrl.showMenu}", "click-outside" => "ctrl.showMenu = false;", "is-open" => "ctrl.showMenu"} .sk-label Options .sk-menu-panel.dropdown-menu{"ng-if" => "ctrl.showMenu"} .sk-menu-panel-section @@ -41,24 +41,24 @@ .sk-menu-panel-header .sk-menu-panel-header-title Global Display - %menu-row{"label" => "'Monospace Font'", "circle" => "ctrl.monospaceFont ? 'success' : 'default'", "action" => "ctrl.selectedMenuItem(true); ctrl.toggleKey('monospaceFont')", + %menu-row{"label" => "'Monospace Font'", "circle" => "ctrl.monospaceFont ? 'success' : 'neutral'", "action" => "ctrl.selectedMenuItem(true); ctrl.toggleKey('monospaceFont')", "desc" => "'Toggles the font style for the default editor'", "subtitle" => "ctrl.selectedEditor ? 'Not available with editor extensions' : null", "disabled" => "ctrl.selectedEditor"} - %menu-row{"label" => "'Spellcheck'", "circle" => "ctrl.spellcheck ? 'success' : 'default'", "action" => "ctrl.selectedMenuItem(true); ctrl.toggleKey('spellcheck')", + %menu-row{"label" => "'Spellcheck'", "circle" => "ctrl.spellcheck ? 'success' : 'neutral'", "action" => "ctrl.selectedMenuItem(true); ctrl.toggleKey('spellcheck')", "desc" => "'Toggles spellcheck for the default editor'", "subtitle" => "ctrl.selectedEditor ? 'Not available with editor extensions' : null", "disabled" => "ctrl.selectedEditor"} - %menu-row{"label" => "'Margin Resizers'", "circle" => "ctrl.marginResizersEnabled ? 'success' : 'default'", "action" => "ctrl.selectedMenuItem(true); ctrl.toggleKey('marginResizersEnabled')", + %menu-row{"label" => "'Margin Resizers'", "circle" => "ctrl.marginResizersEnabled ? 'success' : 'neutral'", "action" => "ctrl.selectedMenuItem(true); ctrl.toggleKey('marginResizersEnabled')", "desc" => "'Allows for editor left and right margins to be resized'", "faded" => "!ctrl.marginResizersEnabled"} - .sk-app-bar-item{"ng-click" => "ctrl.onEditorMenuClick()", "ng-class" => "{'selected' : ctrl.showEditorMenu}", "click-outside" => "ctrl.showEditorMenu = false;", "is-open" => "ctrl.showEditorMenu"} + .sk-app-bar-item{"ng-click" => "ctrl.toggleMenu('showEditorMenu')", "ng-class" => "{'selected' : ctrl.showEditorMenu}", "click-outside" => "ctrl.showEditorMenu = false;", "is-open" => "ctrl.showEditorMenu"} .sk-label Editor %editor-menu{"ng-if" => "ctrl.showEditorMenu", "callback" => "ctrl.editorMenuOnSelect", "selected-editor" => "ctrl.selectedEditor", "current-item" => "ctrl.note"} - .sk-app-bar-item{"ng-click" => "ctrl.showExtensions = !ctrl.showExtensions; ctrl.showMenu = false; ctrl.showEditorMenu = false;", "ng-class" => "{'selected' : ctrl.showExtensions}", "click-outside" => "ctrl.showExtensions = false;", "is-open" => "ctrl.showExtensions"} + .sk-app-bar-item{"ng-click" => "ctrl.toggleMenu('showExtensions')", "ng-class" => "{'selected' : ctrl.showExtensions}", "click-outside" => "ctrl.showExtensions = false;", "is-open" => "ctrl.showExtensions"} .sk-label Actions %actions-menu{"ng-if" => "ctrl.showExtensions", "item" => "ctrl.note"} - .sk-app-bar-item{"ng-click" => "ctrl.showSessionHistory = !ctrl.showSessionHistory; ctrl.showMenu = false; ctrl.showEditorMenu = false;", "click-outside" => "ctrl.showSessionHistory = false;", "is-open" => "ctrl.showSessionHistory"} + .sk-app-bar-item{"ng-click" => "ctrl.toggleMenu('showSessionHistory')", "click-outside" => "ctrl.showSessionHistory = false;", "is-open" => "ctrl.showSessionHistory"} .sk-label Session History %session-history-menu{"ng-if" => "ctrl.showSessionHistory", "item" => "ctrl.note"} diff --git a/app/assets/templates/footer.html.haml b/app/assets/templates/footer.html.haml index edf43f615..41ac65bb7 100644 --- a/app/assets/templates/footer.html.haml +++ b/app/assets/templates/footer.html.haml @@ -3,7 +3,7 @@ .left .sk-app-bar-item{"ng-click" => "ctrl.accountMenuPressed()", "click-outside" => "ctrl.showAccountMenu = false;", "is-open" => "ctrl.showAccountMenu"} .sk-app-bar-item-column - .sk-circle.small{"ng-class" => "ctrl.error ? 'danger' : (ctrl.getUser() ? 'info' : 'default')"} + .sk-circle.small{"ng-class" => "ctrl.error ? 'danger' : (ctrl.getUser() ? 'info' : 'neutral')"} .sk-app-bar-item-column .sk-label.title{"ng-class" => "{red: ctrl.error}"} Account %account-menu{"ng-click" => "$event.stopPropagation()", "ng-if" => "ctrl.showAccountMenu", "on-successful-auth" => "ctrl.onAuthSuccess", "close-function" => "ctrl.closeAccountMenu"} diff --git a/app/assets/templates/lock-screen.html.haml b/app/assets/templates/lock-screen.html.haml index 46cde4e19..890b495b2 100644 --- a/app/assets/templates/lock-screen.html.haml +++ b/app/assets/templates/lock-screen.html.haml @@ -6,7 +6,7 @@ .sk-panel-section %form.sk-panel-form.sk-panel-row{"ng-submit" => "submitPasscodeForm()"} .sk-panel-column.stretch - %input.sk-panel-row.sk-input{:type => 'password', + %input.center-text.sk-input.contrast{:type => 'password', "ng-model" => "formData.passcode", "autofocus" => "true", "sn-autofocus" => "true", "should-focus" => "true", "placeholder" => "Enter Passcode", "autocomplete" => "new-password"} .sk-button-group.stretch.sk-panel-row.form-submit