rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Style updates

Browse Source
This commit is contained in:
Mo Bitar
2018-12-11 09:08:10 -06:00
parent d867888b75
commit ba781f2765
10 changed files with 42 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Gruntfile.js
View File

@@ -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']);
};

18
app/assets/javascripts/app/controllers/editor.js
View File

@@ -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

5
app/assets/stylesheets/app/_editor.scss
View File

@@ -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);
}
}
}

2
app/assets/stylesheets/app/_lock-screen.scss
View File

@@ -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;

2
app/assets/stylesheets/app/_main.scss
View File

@@ -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;

24
app/assets/templates/directives/account-menu.html.haml
View File

@@ -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

6
app/assets/templates/directives/password-wizard.html.haml
View File

@@ -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

14
app/assets/templates/editor.html.haml
View File

@@ -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"}

2
app/assets/templates/footer.html.haml
View File

@@ -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"}

2
app/assets/templates/lock-screen.html.haml
View File

@@ -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