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

Style cleanup

Browse Source
This commit is contained in:
Mo Bitar
2018-12-07 18:59:28 -06:00
parent 285bb76c7a
commit c0e702805c
14 changed files with 209 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,7 +4,7 @@ $heading-height: 75px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow-y: hidden; overflow-y: hidden;
background-color: white; background-color: var(--sn-stylekit-background-color);
} }
.locked { .locked {
@@ -19,7 +19,6 @@ $heading-height: 75px;
padding-bottom: 10px; padding-bottom: 10px;
padding-right: 10px; padding-right: 10px;
background-color: white;
border-bottom: none; border-bottom: none;
z-index: $z-index-editor-title-bar; z-index: $z-index-editor-title-bar;
@@ -41,9 +40,10 @@ $heading-height: 75px;
border: none; border: none;
outline: none; outline: none;
background-color: transparent; background-color: transparent;
color: var(--sn-stylekit-foreground-color);
&:disabled { &:disabled {
color: black; color: var(--sn-stylekit-foreground-color);
} }
} }
@@ -60,17 +60,12 @@ $heading-height: 75px;
font-weight: normal; font-weight: normal;
margin-top: 4px; margin-top: 4px;
text-align: right; text-align: right;
color: rgba(black, 0.23); color: var(--sn-stylekit-contrast-background-color);
&.error, .error {
color: #f6a200;
}
} }
.editor-tags { .editor-tags {
clear: left; clear: left;
width: 100%; width: 100%;
// height: 25px;
overflow: visible; overflow: visible;
position: relative; position: relative;
@@ -88,6 +83,7 @@ $heading-height: 75px;
.tags-input { .tags-input {
background-color: transparent; background-color: transparent;
color: var(--sn-stylekit-foreground-color);
width: 100%; width: 100%;
border: none; border: none;
} }
@@ -100,7 +96,7 @@ $heading-height: 75px;
overflow-y: hidden; overflow-y: hidden;
height: 100%; height: 100%;
display: flex; display: flex;
background-color: white; background-color: var(--sn-stylekit-background-color);
position: relative; position: relative;
@@ -113,12 +109,14 @@ $heading-height: 75px;
font-family: monospace; font-family: monospace;
overflow-y: scroll; overflow-y: scroll;
width: 100%; width: 100%;
background-color: var(--sn-stylekit-background-color);
color: var(--sn-stylekit-foreground-color);
border: none; border: none;
outline: none; outline: none;
padding: 15px; padding: 15px;
padding-top: 11px; padding-top: 11px;
font-size: 17px; font-size: var(--sn-stylekit-font-size-editor);
resize: none; resize: none;
} }
} }
@@ -129,7 +127,8 @@ $heading-height: 75px;
.component-stack-item { .component-stack-item {
width: 100%; width: 100%;
position: relative; position: relative;
border-top: 1px solid $bg-color; border-top: 1px solid var(--sn-stylekit-border-color);
iframe { iframe {
width: 100%; width: 100%;
} }

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

@@ -12,8 +12,8 @@
bottom: 0; bottom: 0;
z-index: $z-index-lock-screen; z-index: $z-index-lock-screen;
background-color: rgba(white, 0.5); background-color: var(--sn-stylekit-background-color);
color: black; color: var(--sn-stylekit-foreground-color);
font-size: 16px; font-size: 16px;
display: flex; display: flex;
align-items: center; align-items: center;

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

@@ -1,11 +1,3 @@
$main-text-color: black;
$secondary-text-color: rgba($main-text-color, 0.8);
$bg-color: #e3e3e3;
$light-bg-color: #e9e9e9;
$selection-color: $bg-color;
$selected-text-color: black;
$blue-color: #086dd6;
$z-index-editor-content: 10; $z-index-editor-content: 10;
$z-index-editor-title-bar: 100; $z-index-editor-title-bar: 100;
@@ -27,13 +19,13 @@ body {
"Segoe UI", "Roboto", "Oxygen", "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Ubuntu", "Cantarell", "Fira Sans",
"Droid Sans", "Helvetica Neue", sans-serif; "Droid Sans", "Helvetica Neue", sans-serif;
color: $main-text-color;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
min-height: 100%; min-height: 100%;
height: 100%; height: 100%;
font-size: 14px; font-size: 14px;
margin: 0; margin: 0;
background-color: $bg-color; color: var(--sn-stylekit-foreground-color);
background-color: var(--sn-stylekit-background-color);
} }
* { * {
@@ -41,11 +33,11 @@ body {
} }
.tinted { .tinted {
color: $blue-color; color: var(--sn-stylekit-info-color);
} }
.tinted-selected { .tinted-selected {
color: white; color: var(--sn-stylekit-info-contrast-color);
} }
*:focus {outline:0;} *:focus {outline:0;}
@@ -61,7 +53,7 @@ input, button, select, textarea {
} }
a { a {
color: $blue-color; color: var(--sn-stylekit-info-color);
text-decoration: none; text-decoration: none;
&.no-decoration { &.no-decoration {
@@ -77,6 +69,16 @@ a {
} }
} }
::selection {
background: var(--sn-stylekit-info-color) !important; /* WebKit/Blink Browsers */
color: var(--sn-stylekit-info-contrast-color);
}
::-moz-selection {
background: var(--sn-stylekit-text-selection-color) !important; /* WebKit/Blink Browsers */
color: white;
}
p { p {
overflow: auto; overflow: auto;
} }
@@ -85,7 +87,7 @@ p {
min-height: 100vh; min-height: 100vh;
height: 100vh; height: 100vh;
overflow: auto; overflow: auto;
background-color: $bg-color; background-color: var(--sn-stylekit-background-color);
} }
$footer-height: 32px; $footer-height: 32px;
@@ -115,7 +117,8 @@ $footer-height: 32px;
height: 100%; height: 100%;
position: absolute; position: absolute;
cursor: col-resize; cursor: col-resize;
background-color: rgba(black, 0.1); // needs to be a color that works on main bg and contrast bg
background-color: var(--sn-stylekit-on-contrast-background-color);
opacity: 0; opacity: 0;
border-top: none; border-top: none;
border-bottom: none; border-bottom: none;
@@ -181,7 +184,7 @@ $footer-height: 32px;
> .content { > .content {
height: 100%; height: 100%;
max-height: 100%; max-height: 100%;
background-color: white; background-color: var(--sn-stylekit-background-color);
position: relative; position: relative;
} }
@@ -205,24 +208,6 @@ $footer-height: 32px;
width: 80%; width: 80%;
overflow: hidden; overflow: hidden;
} }
> .add-button {
$button-bg: #e9e9e9;
color: lighten($main-text-color, 40%);
font-size: 18px;
width: 45px;
height: 24px;
cursor: pointer;
background-color: $button-bg;
border-radius: 4px;
font-weight: normal;
text-align: center;
&:hover {
background-color: darken($button-bg, 5%);
color: lighten($main-text-color, 40%);
}
}
} }
} }
} }

30
app/assets/stylesheets/app/_modals.scss
View File

@@ -2,7 +2,6 @@
width: 350px; width: 350px;
.sk-panel { .sk-panel {
border-radius: 0; border-radius: 0;
background-color: white;
} }
.sk-panel-content { .sk-panel-content {
padding-top: 1.1rem; padding-top: 1.1rem;
@@ -17,7 +16,7 @@
} }
#item-preview-modal { #item-preview-modal {
> .content { > .sk-modal-content {
width: 800px; width: 800px;
height: 500px; height: 500px;
} }
@@ -37,21 +36,17 @@
.border { .border {
height: 100%; height: 100%;
background-color: rgba(black, 0.1); background-color: var(--sn-stylekit-border-color);
width: 1px; width: 1px;
margin: 0 15px; margin: 0 15px;
} }
} }
// .sk-panel {
// background-color: white;
// }
.header .subtitle { .header .subtitle {
font-size: 1.1rem; font-size: 1.1rem;
} }
.modal { .sk-modal {
position: fixed; position: fixed;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@@ -62,8 +57,9 @@
z-index: $z-index-modal; z-index: $z-index-modal;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-color: rgba(gray, 0.3);
color: black; background-color: transparent;
color: var(--sn-stylekit-contrast-foreground-color);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -76,40 +72,42 @@
} }
&.auto-height { &.auto-height {
> .content { > .sk-modal-content {
height: auto !important; height: auto !important;
} }
} }
&.large { &.large {
> .content { > .sk-modal-content {
width: 900px; width: 900px;
height: 600px; height: 600px;
} }
} }
&.medium { &.medium {
> .content { > .sk-modal-content {
width: 700px; width: 700px;
height: 500px; height: 500px;
} }
} }
&.small { &.small {
> .content { > .sk-modal-content {
width: 700px; width: 700px;
height: 344px; height: 344px;
} }
} }
.background { .sk-modal-background {
position: absolute; position: absolute;
z-index: -1; z-index: -1;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: var(--sn-stylekit-contrast-background-color);
opacity: 0.7;
} }
> .content { > .sk-modal-content {
overflow-y: auto; overflow-y: auto;
width: auto; width: auto;
padding: 0; padding: 0;

29
app/assets/stylesheets/app/_notes.scss
View File

@@ -1,6 +1,6 @@
#notes-column, .notes { #notes-column, .notes {
border-left: 1px solid #dddddd; border-left: 1px solid var(--sn-stylekit-border-color);
border-right: 1px solid #dddddd; border-right: 1px solid var(--sn-stylekit-border-color);
width: 350px; width: 350px;
flex-grow: 0; flex-grow: 0;
@@ -21,15 +21,11 @@
font-size: 18px; font-size: 18px;
.section-title-bar-header .title { .section-title-bar-header .title {
color: rgba(black, 0.40); color: var(--sn-stylekit-neutral-color);
width: calc(90% - 45px); width: calc(90% - 45px);
} }
} }
#notes-add-button {
}
#notes-menu-bar { #notes-menu-bar {
position: relative; position: relative;
margin-top: 14px; margin-top: 14px;
@@ -42,7 +38,7 @@
position: relative; position: relative;
.filter-bar { .filter-bar {
background-color: $light-bg-color; background-color: var(--sn-stylekit-contrast-background-color);
border-radius: 4px; border-radius: 4px;
height: 100%; height: 100%;
color: #909090; color: #909090;
@@ -60,9 +56,9 @@
border-radius: 50%; border-radius: 50%;
width: 17px; width: 17px;
height: 17px; height: 17px;
color: white;
cursor: default; cursor: default;
background-color: gray; background-color: var(--sn-stylekit-neutral-color);
color: var(--sn-stylekit-neutral-contrast-color);
font-size: 10px; font-size: 10px;
line-height: 17px; line-height: 17px;
text-align: center; text-align: center;
@@ -73,7 +69,7 @@
transition: background-color 0.15s linear; transition: background-color 0.15s linear;
&:hover { &:hover {
background-color: $blue-color; background-color: var(--sn-stylekit-info-color);
} }
} }
} }
@@ -102,9 +98,8 @@
.note { .note {
width: 100%; width: 100%;
padding: 15px; padding: 15px;
border-bottom: 1px solid $bg-color; border-bottom: 1px solid var(--sn-stylekit-border-color);
cursor: pointer; cursor: pointer;
background-color: white;
> .name { > .name {
font-weight: 600; font-weight: 600;
@@ -137,11 +132,11 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
$line-height: 18px;
.default-preview, .plain-preview { .default-preview, .plain-preview {
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 1; /* number of lines to show */ -webkit-line-clamp: 1; /* number of lines to show */
$line-height: 18px;
line-height: $line-height; /* fallback */ line-height: $line-height; /* fallback */
max-height: calc(#{$line-height} * 1); /* fallback */ max-height: calc(#{$line-height} * 1); /* fallback */
} }
@@ -159,11 +154,11 @@
} }
&.selected { &.selected {
background-color: $blue-color; background-color: var(--sn-stylekit-info-color);
color: white; color: var(--sn-stylekit-info-contrast-color);
.pinned { .pinned {
color: white; color: var(--sn-stylekit-info-contrast-color);
} }
} }

4
app/assets/stylesheets/app/_stylekit-sub.scss
View File

@@ -12,8 +12,8 @@
} }
.bordered-row { .bordered-row {
border-bottom: 1px solid rgba(black, 0.1); border-bottom: 1px solid var(--sn-stylekit-border-color);
border-top: 1px solid rgba(black, 0.1); border-top: 1px solid var(--sn-stylekit-border-color);
} }
} }

39
app/assets/stylesheets/app/_tags.scss
View File

@@ -6,27 +6,18 @@
-webkit-user-select: none; -webkit-user-select: none;
&, #tags-content { &, #tags-content {
background-color: #f6f6f6; background-color: var(--sn-stylekit-secondary-background-color);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
#tags-title-bar { #tags-title-bar {
color: black; color: var(--sn-stylekit-secondary-foreground-color);
padding-top: 14px; padding-top: 14px;
padding-bottom: 16px; padding-bottom: 16px;
padding-left: 12px; padding-left: 12px;
padding-right: 12px; padding-right: 12px;
font-size: 12px; font-size: 12px;
color: rgba(black, 0.8);
}
#tag-add-button {
background-color: #d7d7d7;
&:hover {
background-color: rgba(#d7d7d7, 0.8);
}
} }
.scrollable { .scrollable {
@@ -62,7 +53,7 @@
background-color: transparent; background-color: transparent;
font-weight: 600; font-weight: 600;
float: left; float: left;
color: $main-text-color; color: var(--sn-stylekit-secondary-foreground-color);
border: none; border: none;
cursor: pointer; cursor: pointer;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -76,6 +67,7 @@
right: 17px; right: 17px;
padding-top: 1px; padding-top: 1px;
font-weight: bold; font-weight: bold;
color: var(--sn-stylekit-neutral-color);
} }
} }
@@ -97,32 +89,17 @@
} }
} }
$tags-selected-color: #dbdbdb;
&.selected { &.selected {
background-color: $tags-selected-color;
color: $selected-text-color;
> .title { > .title {
color: $selected-text-color;
cursor: text; cursor: text;
} }
} }
/* When a note is dragged over tag */ &:hover:not(.selected), &.selected {
&.over { background-color: var(--sn-stylekit-secondary-contrast-background-color);
background-color: $tags-selected-color; color: var(--sn-stylekit-secondary-contrast-foreground-color);
color: $selected-text-color;
border: 2px dashed white;
> .title { > .title {
color: $selected-text-color; color: var(--sn-stylekit-secondary-contrast-foreground-color);
}
}
&:hover:not(.selected) {
background-color: $tags-selected-color;
color: $selected-text-color;
> .title {
color: $selected-text-color;
} }
} }
} }

9
app/assets/templates/directives/conflict-resolution-modal.html.haml
View File

@@ -1,6 +1,7 @@
.modal.large#conflict-resolution-modal .sn-component
.content .sk-modal.large#conflict-resolution-modal
.sn-component .sk-modal-background
.sk-modal-content
.sk-panel .sk-panel
.sk-panel-header .sk-panel-header
%h1.sk-panel-header-title Conflicted items — choose which version to keep %h1.sk-panel-header-title Conflicted items — choose which version to keep
@@ -17,7 +18,7 @@
{{contentType}} {{contentType}}
%p You may wish to look at the "created_at" and "updated_at" fields of the items to gain better context in deciding which to keep. %p You may wish to look at the "created_at" and "updated_at" fields of the items to gain better context in deciding which to keep.
#items #items
.sk-panel.static#item1.item.border-color .sk-panel.static#item1.item
%p.normal{"style" => "white-space: pre-wrap; font-size: 16px;"} {{item1Content}} %p.normal{"style" => "white-space: pre-wrap; font-size: 16px;"} {{item1Content}}
.border .border

36
app/assets/templates/directives/input-modal.html.haml
View File

@@ -1,18 +1,20 @@
.modal.small.auto-height .sn-component
.content .sk-modal.small.auto-height
.sn-component .sk-modal-background
.sk-panel .sk-modal-content
.sk-panel-header .sn-component
%h1.sk-panel-header-title {{title}} .sk-panel
%a.sk-a.info.close-button{"ng-click" => "dismiss()"} Close .sk-panel-header
.sk-panel-content %h1.sk-panel-header-title {{title}}
.sk-panel-section %a.sk-a.info.close-button{"ng-click" => "dismiss()"} Close
%p.sk-panel-row {{message}} .sk-panel-content
.sk-panel-row .sk-panel-section
.sk-panel-column.stretch %p.sk-panel-row {{message}}
%form{"ng-submit" => "submit()"} .sk-panel-row
%input.sk-input{:type => '{{type}}', "ng-model" => "formData.input", "placeholder" => "{{placeholder}}", "sn-autofocus" => "true", "should-focus" => "true"} .sk-panel-column.stretch
%form{"ng-submit" => "submit()"}
%input.sk-input{:type => '{{type}}', "ng-model" => "formData.input", "placeholder" => "{{placeholder}}", "sn-autofocus" => "true", "should-focus" => "true"}
.sk-panel-footer .sk-panel-footer
%a.sk-a.info.right{"ng-click" => "submit()"} %a.sk-a.info.right{"ng-click" => "submit()"}
Submit Submit

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

@@ -1,103 +1,105 @@
#password-wizard.modal.small.auto-height .sn-component
.content #password-wizard.sk-modal.small.auto-height
.sn-component .sk-modal-background
.sk-panel .sk-modal-content
.sk-panel-header .sn-component
.sk-panel-header-title {{title}} .sk-panel
%a.sk-a.info.close-button{"ng-click" => "dismiss()"} Close .sk-panel-header
.sk-panel-content .sk-panel-header-title {{title}}
%a.sk-a.info.close-button{"ng-click" => "dismiss()"} Close
.sk-panel-content
%div{"ng-if" => "step == 0"} %div{"ng-if" => "step == 0"}
%div{"ng-if" => "changePassword"} %div{"ng-if" => "changePassword"}
%p.sk-p %p.sk-p
Changing your password involves changing your encryption key, which requires your data to be re-encrypted and synced. Changing your password involves changing your encryption key, which requires your data to be re-encrypted and synced.
If you have many items, syncing your data can take several minutes. If you have many items, syncing your data can take several minutes.
%p.sk-p %p.sk-p
%strong You must keep the application window open during this process. %strong You must keep the application window open during this process.
%div{"ng-if" => "securityUpdate"} %div{"ng-if" => "securityUpdate"}
%p.sk-p %p.sk-p
A new update is available for your account. Updates address improvements and enhancements to our security specification. A new update is available for your account. Updates address improvements and enhancements to our security specification.
This process will guide you through the update, and perform the steps necessary with your supervision. This process will guide you through the update, and perform the steps necessary with your supervision.
%p.sk-p %p.sk-p
For more information about security updates, please visit For more information about security updates, please visit
%a.sk-a.info{"href" => "https://standardnotes.org/help/security", "target" => "_blank"} standardnotes.org/help/security. %a.sk-a.info{"href" => "https://standardnotes.org/help/security", "target" => "_blank"} standardnotes.org/help/security.
%p.sk-panel-row.sk-p
.info Press Continue to proceed.
.sk-panel-section{"ng-if" => "step > 0"}
.sk-panel-section-title Step {{step}} — {{titleForStep(step)}}
%div{"ng-if" => "step == 1"}
%p.sk-panel-row.sk-p %p.sk-panel-row.sk-p
As a result of this process, the entirety of your data will be re-encrypted and synced to your account. This is a generally safe process, .info Press Continue to proceed.
but unforeseen factors like poor network connectivity or a sudden shutdown of your computer may cause this process to fail.
It's best to be on the safe side before large operations such as this one.
.sk-panel-row
.sk-panel-row
.sk-button-group
.sk-button.info{"ng-click" => "downloadBackup(true)"}
.sk-label Download Encrypted Backup
.sk-button.info{"ng-click" => "downloadBackup(false)"}
.sk-label Download Decrypted Backup
%div{"ng-if" => "step == 2"} .sk-panel-section{"ng-if" => "step > 0"}
%p.sk-p.sk-panel-row
As a result of this process, your encryption keys will change.
Any device on which you use Standard Notes will need to end its session. After this process completes, you will be asked to sign back in.
%p.sk-p.bold.sk-panel-row.info-i Please sign out of all applications (excluding this one), including: .sk-panel-section-title Step {{step}} — {{titleForStep(step)}}
%ul
%li Desktop %div{"ng-if" => "step == 1"}
%li Web (Chrome, Firefox, Safari) %p.sk-panel-row.sk-p
%li Mobile (iOS and Android) As a result of this process, the entirety of your data will be re-encrypted and synced to your account. This is a generally safe process,
%p.sk-p.sk-panel-row but unforeseen factors like poor network connectivity or a sudden shutdown of your computer may cause this process to fail.
If you do not currently have access to a device you're signed in on, you may proceed, It's best to be on the safe side before large operations such as this one.
but must make signing out and back in the first step upon gaining access to that device. .sk-panel-row
%p.sk-p.sk-panel-row Press Continue only when you have completed signing out of all your devices. .sk-panel-row
.sk-button-group
.sk-button.info{"ng-click" => "downloadBackup(true)"}
.sk-label Download Encrypted Backup
.sk-button.info{"ng-click" => "downloadBackup(false)"}
.sk-label Download Decrypted Backup
%div{"ng-if" => "step == 2"}
%p.sk-p.sk-panel-row
As a result of this process, your encryption keys will change.
Any device on which you use Standard Notes will need to end its session. After this process completes, you will be asked to sign back in.
%p.sk-p.bold.sk-panel-row.info-i Please sign out of all applications (excluding this one), including:
%ul
%li Desktop
%li Web (Chrome, Firefox, Safari)
%li Mobile (iOS and Android)
%p.sk-p.sk-panel-row
If you do not currently have access to a device you're signed in on, you may proceed,
but must make signing out and back in the first step upon gaining access to that device.
%p.sk-p.sk-panel-row Press Continue only when you have completed signing out of all your devices.
%div{"ng-if" => "step == 3"} %div{"ng-if" => "step == 3"}
%div{"ng-if" => "changePassword"} %div{"ng-if" => "changePassword"}
%div{"ng-if" => "securityUpdate"} %div{"ng-if" => "securityUpdate"}
%p.sk-panel-row Enter your current password. We'll run this through our encryption scheme to generate strong new encryption keys. %p.sk-panel-row Enter your current password. We'll run this through our encryption scheme to generate strong new encryption keys.
.sk-panel-row .sk-panel-row
.sk-panel-row .sk-panel-row
.sk-panel-column.stretch .sk-panel-column.stretch
%form.sk-panel-form %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{: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.newPassword", "placeholder" => "New Password"}
%input.sk-input{"ng-if" => "changePassword", :type => 'password', "ng-model" => "formData.newPasswordConfirmation", "placeholder" => "Confirm New Password"} %input.sk-input{"ng-if" => "changePassword", :type => 'password', "ng-model" => "formData.newPasswordConfirmation", "placeholder" => "Confirm New Password"}
%div{"ng-if" => "step == 4"} %div{"ng-if" => "step == 4"}
%p.sk-panel-row
Your data is being re-encrypted with your new keys and synced to your account.
%p.sk-panel-row.danger
Do not close this window until this process completes.
.sk-panel-row
.sk-panel-column
.sk-spinner.small.inline.info.mr-5{"ng-if" => "formData.processing"}
.inline.bold{"ng-class" => "{'info' : !formData.statusError, 'error' : formData.statusError}"}
{{formData.status}}
.sk-panel-column{"delay-hide" => "true", "show" => "syncStatus.syncOpInProgress || syncStatus.needsMoreSync", "delay" => "1000"}
%p.info
Syncing {{syncStatus.current}}/{{syncStatus.total}}
%div{"ng-if" => "step == 5"}
%div{"ng-if" => "changePassword"}
%p.sk-panel-row Your password has been successfully changed.
%div{"ng-if" => "securityUpdate"}
%p.sk-panel-row %p.sk-panel-row
The security update has been successfully applied to your account. Your data is being re-encrypted with your new keys and synced to your account.
%p.sk-panel-row %p.sk-panel-row.danger
%strong Please ensure you are running the latest version of Standard Notes on all platforms to ensure maximum compatibility. Do not close this window until this process completes.
%p.sk-panel-row You may now sign back in on all your devices and close this window. .sk-panel-row
.sk-panel-column
.sk-spinner.small.inline.info.mr-5{"ng-if" => "formData.processing"}
.inline.bold{"ng-class" => "{'info' : !formData.statusError, 'error' : formData.statusError}"}
{{formData.status}}
.sk-panel-column{"delay-hide" => "true", "show" => "syncStatus.syncOpInProgress || syncStatus.needsMoreSync", "delay" => "1000"}
%p.info
Syncing {{syncStatus.current}}/{{syncStatus.total}}
.sk-panel-footer %div{"ng-if" => "step == 5"}
.empty %div{"ng-if" => "changePassword"}
%a.sk-a.info.right{"ng-click" => "continue()", "ng-disabled" => "lockContinue", "ng-class" => "{'disabled' : lockContinue}"} %p.sk-panel-row Your password has been successfully changed.
.sk-spinner.small.inline.info.mr-5{"ng-if" => "showSpinner"} %div{"ng-if" => "securityUpdate"}
{{continueTitle}} %p.sk-panel-row
The security update has been successfully applied to your account.
%p.sk-panel-row
%strong Please ensure you are running the latest version of Standard Notes on all platforms to ensure maximum compatibility.
%p.sk-panel-row You may now sign back in on all your devices and close this window.
.sk-panel-footer
.empty
%a.sk-a.info.right{"ng-click" => "continue()", "ng-disabled" => "lockContinue", "ng-class" => "{'disabled' : lockContinue}"}
.sk-spinner.small.inline.info.mr-5{"ng-if" => "showSpinner"}
{{continueTitle}}

28
app/assets/templates/directives/revision-preview-modal.html.haml
View File

@@ -1,13 +1,15 @@
.modal.medium#item-preview-modal .sn-component
.content .sk-modal.medium#item-preview-modal
.sn-component .sk-modal-background
.sk-panel .sk-modal-content
.sk-panel-header .sn-component
.sk-panel-header-title Preview .sk-panel
.sk-horizontal-group .sk-panel-header
%a.sk-a.info.close-button{"ng-click" => "restore(false)"} Restore .sk-panel-header-title Preview
%a.sk-a.info.close-button{"ng-click" => "restore(true)"} Restore as copy .sk-horizontal-group
%a.sk-a.info.close-button{"ng-click" => "dismiss(); $event.stopPropagation()"} Close %a.sk-a.info.close-button{"ng-click" => "restore(false)"} Restore
.sk-panel-content.selectable %a.sk-a.info.close-button{"ng-click" => "restore(true)"} Restore as copy
.sk-h2 {{content.title}} %a.sk-a.info.close-button{"ng-click" => "dismiss(); $event.stopPropagation()"} Close
%p.normal.sk-p{"style" => "white-space: pre-wrap; font-size: 16px;"} {{content.text}} .sk-panel-content.selectable
.sk-h2 {{content.title}}
%p.normal.sk-p{"style" => "white-space: pre-wrap; font-size: 16px;"} {{content.text}}

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

@@ -13,7 +13,7 @@
"ng-change" => "ctrl.nameChanged()", "ng-focus" => "ctrl.onNameFocus()", "ng-blur" => "ctrl.onNameBlur()", "ng-change" => "ctrl.nameChanged()", "ng-focus" => "ctrl.onNameFocus()", "ng-blur" => "ctrl.onNameBlur()",
"select-on-click" => "true", "ng-disabled" => "ctrl.note.locked"} "select-on-click" => "true", "ng-disabled" => "ctrl.note.locked"}
#save-status{"ng-class" => "{'error bold': ctrl.syncTakingTooLong}", "ng-bind-html" => "ctrl.noteStatus"} #save-status{"ng-class" => "{'warning bold': ctrl.syncTakingTooLong}", "ng-bind-html" => "ctrl.noteStatus"}
.editor-tags .editor-tags
#note-tags-component-container{"ng-if" => "ctrl.tagsComponent"} #note-tags-component-container{"ng-if" => "ctrl.tagsComponent"}
@@ -80,5 +80,5 @@
#editor-pane-component-stack #editor-pane-component-stack
.sn-component .sn-component
%component-view.component-view.component-stack-item.border-color{"ng-repeat" => "component in ctrl.componentStack", %component-view.component-view.component-stack-item{"ng-repeat" => "component in ctrl.componentStack",
"ng-if" => "component.active", "ng-show" => "!component.hidden", "manual-dealloc" => "true", "component" => "component"} "ng-if" => "component.active", "ng-show" => "!component.hidden", "manual-dealloc" => "true", "component" => "component"}

5
app/assets/templates/notes.html.haml
View File

@@ -1,10 +1,11 @@
.section.notes#notes-column{"aria-label" => "Notes"} .sn-component.section.notes#notes-column{"aria-label" => "Notes"}
.content .content
.section-title-bar#notes-title-bar .section-title-bar#notes-title-bar
.padded .padded
.section-title-bar-header .section-title-bar-header
.title {{ctrl.panelTitle()}} .title {{ctrl.panelTitle()}}
.add-button#notes-add-button{"ng-click" => "ctrl.createNewNote()", "title" => "Create a new note in the selected tag"} + .sk-button.contrast.wide{"ng-click" => "ctrl.createNewNote()", "title" => "Create a new note in the selected tag"}
.sk-label +
.filter-section{"role" => "search"} .filter-section{"role" => "search"}
%input.filter-bar#search-bar.mousetrap{"select-on-click" => "true", "ng-model" => "ctrl.noteFilter.text", "placeholder" => "Search", %input.filter-bar#search-bar.mousetrap{"select-on-click" => "true", "ng-model" => "ctrl.noteFilter.text", "placeholder" => "Search",
"ng-change" => "ctrl.filterTextChanged()", "lowercase" => "true", "ng-blur" => "ctrl.onFilterEnter()", "ng-keyup" => "$event.keyCode == 13 && ctrl.onFilterEnter();", "ng-change" => "ctrl.filterTextChanged()", "lowercase" => "true", "ng-blur" => "ctrl.onFilterEnter()", "ng-keyup" => "$event.keyCode == 13 && ctrl.onFilterEnter();",

5
app/assets/templates/tags.html.haml
View File

@@ -1,4 +1,4 @@
.section.tags#tags-column{"aria-label" => "Tags"} .sn-component.section.tags#tags-column{"aria-label" => "Tags"}
.component-view-container{"ng-if" => "ctrl.component.active"} .component-view-container{"ng-if" => "ctrl.component.active"}
%component-view.component-view{"component" => "ctrl.component"} %component-view.component-view{"component" => "ctrl.component"}
@@ -7,7 +7,8 @@
#tags-title-bar.section-title-bar #tags-title-bar.section-title-bar
.section-title-bar-header .section-title-bar-header
.title Tags .title Tags
.add-button#tag-add-button{"ng-click" => "ctrl.clickedAddNewTag()", "title" => "Create a new tag"} + .sk-button.sk-secondary-contrast.wide{"ng-click" => "ctrl.clickedAddNewTag()", "title" => "Create a new tag"}
.sk-label +
.scrollable .scrollable
.infinite-scroll .infinite-scroll