css cleanup

This commit is contained in:
Mo Bitar
2017-01-26 13:25:46 -06:00
parent 191f665dde
commit ee6ec5bfbc
8 changed files with 296 additions and 454 deletions

View File

@@ -210,67 +210,6 @@ Extensions
margin-top: 6px; margin-top: 6px;
} }
} }
}
}
}
.account-data-menu {
padding: 5px !important;
.providers {
font-size: 12px;
.provider {
padding: 10px 10px;
padding-bottom: 8px;
margin-bottom: 10px;
> .type {
font-weight: bold;
margin-bottom: 2px;
}
> .key {
font-style: italic;
}
> .url {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
// word-wrap: break-word;
margin-top: 2px;
}
.sync-status {
font-weight: bold;
height: 30px;
}
> .options {
margin-top: 10px;
}
}
}
}
.account-keys-section {
.keys {
.key {
padding: 10px 10px;
padding-bottom: 8px;
margin-bottom: 8px;
> .name {
font-size: 13px;
font-weight: bold;
margin-bottom: 2px;
}
> .value {
word-wrap: break-word;
}
} }
} }
} }

View File

@@ -1,6 +1,15 @@
.header { .pull-left {
float: left;
}
.pull-right {
float: right;
}
.footer-bar {
position: relative; position: relative;
width: 100%; width: 100%;
padding: 5px;
background-color: #d8d7d9; background-color: #d8d7d9;
height: $header-height; height: $header-height;
max-height: $header-height; max-height: $header-height;
@@ -10,140 +19,155 @@
border-bottom: 1px solid rgba(#979799, 0.4); border-bottom: 1px solid rgba(#979799, 0.4);
a { a {
color: $dark-gray;
}
}
.header-content {
margin-bottom: 0px;
padding-top: 0px;
border-radius: 0px;
left: 0px;
right: 0px;
}
.panel-status-text {
margin-top: 20px;
font-style: italic;
font-size: 14px;
}
.menu {
margin-left: 15px;
padding-top: 5px;
margin-top: 0px;
color: #515263;
z-index: 1000;
margin-bottom: 0px;
font-size: 11px;
&.left {
float: left;
}
&.right {
float: right;
margin-right: 10px;
}
.login-panel .login-input {
border-radius: 0px;
}
}
.items {
.item {
display: inline-block;
margin-right: 7px;
position: relative;
cursor: pointer;
font-weight: bold; font-weight: bold;
cursor: pointer;
color: $blue-color;
a { &.gray {
color: #515263; color: $dark-gray !important;
} }
.panel { &.block {
position: absolute; display: block !important;
right: 0px;
bottom: 20px;
min-width: 300px;
z-index: 1000;
margin-top: 15px;
box-shadow: 0px 0px 15px rgba(black, 0.2);
border: none;
cursor: default;
max-height: 85vh;
overflow: auto;
background-color: white;
font-weight: normal;
section {
margin-bottom: 10px;
}
h3 {
font-weight: bold;
margin-top: 0px;
margin-bottom: 4px;
font-size: 16px;
width: 100%;
}
a {
font-size: 12px;
color: $blue-color;
font-weight: bold;
}
button.light {
font-weight: bold;
margin-bottom: 0px;
font-size: 12px;
height: 30px;
padding-top: 3px;
text-align: center;
margin-bottom: 6px;
background-color: white;
display: block;
width: 100%;
border: 1px solid rgba(gray, 0.15);
cursor: pointer;
color: $blue-color;
&:hover {
background-color: rgba(gray, 0.10);
}
.execution-spinner {
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 3px;
}
}
.storage-text {
font-size: 14px;
}
.checkbox {
font-size: 14px;
font-weight: normal;
margin-left: auto;
margin-right: auto;
}
} }
} }
p {
margin: 2px 0px;
font-size: 12px;
}
label {
font-weight: bold;
margin-bottom: 4px;
}
strong {
display: block;
}
h3 {
font-size: 14px !important;
margin-top: 4px !important;
margin-bottom: 0px !important;
}
h4 {
margin-bottom: 0px !important;
}
section {
padding: 5px;
margin-top: 5px;
&.inline-h {
padding: 5px 0px;
}
}
input {
margin-bottom: 10px;
border-radius: 0px;
}
.block {
display: block;
}
.wrap {
word-wrap: break-word;
}
.one-line-overflow {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.small-v-space {
height: 6px;
display: block;
}
.medium-padding {
padding: 10px;
}
.large-padding {
padding: 15px;
}
} }
.item.io { .footer-bar-link {
.enc-option { font-size: 11px;
display: block; font-weight: bold;
margin-left: 8px;
color: #515263;
z-index: 1000;
display: inline-block;
position: relative;
cursor: pointer;
> a {
color: #515263;
}
}
.footer-bar-link .panel {
font-weight: normal;
font-size: 12px;
max-height: 85vh;
position: absolute;
right: 0px;
bottom: 20px;
min-width: 300px;
z-index: 1000;
margin-top: 15px;
box-shadow: 0px 0px 15px rgba(black, 0.2);
border: none;
cursor: default;
overflow: auto;
background-color: white;
button.light {
font-weight: bold;
margin-bottom: 0px;
font-size: 12px;
height: 30px;
padding-top: 3px;
text-align: center;
margin-bottom: 6px;
background-color: white;
display: block;
width: 100%;
border: 1px solid rgba(gray, 0.15);
cursor: pointer;
color: $blue-color;
&:hover {
background-color: rgba(gray, 0.10);
}
.execution-spinner {
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 3px;
}
}
.storage-text {
font-size: 14px;
}
.checkbox {
font-size: 14px;
font-weight: normal;
margin-left: auto;
margin-right: auto;
} }
} }
@@ -170,120 +194,26 @@
cursor: default !important; cursor: default !important;
} }
.item.account { .account-panel {
width: 350px;
}
.email { .import-password {
font-size: 18px; margin-top: 14px;
font-weight: bold;
margin-bottom: 2px; > .field {
display: block;
margin: 5px 0px;
} }
}
.server { .encryption-confirmation {
margin-bottom: 10px; position: relative;
} .buttons {
.cancel {
.links { font-weight: normal;
margin-bottom: 25px; margin-right: 3px;
}
.link-item {
margin-bottom: 8px;
}
input {
border-radius: 0px;
}
.account-panel {
padding: 12px;
padding-bottom: 6px;
.account-items {
margin-top: 0px;
} }
.account-section-content {
margin-top: 15px;
}
.account-item {
width: 100%;
margin-bottom: 15px;
min-height: 50px;
padding: 20px 14px;
a {
color: $blue-color;
font-weight: bold;
cursor: pointer;
}
.meta-container {
display: block;
font-size: 10px;
}
.action-container {
font-size: 12px;
margin-top: 6px;
.status-title {
font-weight: bold;
}
.subtext {
font-size: 10px;
margin-top: 2px;
}
a {
display: block;
margin-bottom: -10px;
}
}
.import-password {
margin-top: 14px;
> .field {
display: block;
margin: 5px 0px;
}
}
.encryption-confirmation {
position: relative;
.buttons {
.cancel {
font-weight: normal;
margin-right: 3px;
}
}
}
&:last-child {
margin-bottom: 8px !important;
}
.meta-container {
> .title {
font-size: 13px;
font-weight: bold;
}
> .desc {
font-size: 12px;
margin-top: 3px;
}
}
}
.membership-settings {
font-size: 14px;
}
} }
} }
@@ -291,23 +221,6 @@ a.disabled {
pointer-events: none; pointer-events: none;
} }
.account-form {
margin-top: 10px;
}
.registration-login {
.login-forgot {
margin-top: 20px;
clear: both;
a {
display: block;
font-size: 13px !important;
text-align: center;
}
}
}
.spinner { .spinner {
height: 10px; height: 10px;
width: 10px; width: 10px;

View File

@@ -1,20 +1,25 @@
.panel.panel-default.account-panel.panel-right.account-data-menu .panel.panel-default.account-panel.panel-right.account-data-menu
.panel-body .panel-body
.account-items
%section.account-item.gray-bg{"ng-init" => "showSN = true"}
%h3{"ng-click" => "showSN = !showSN"} Standard Notes Account
%account-vendor-account-section{"ng-if" => "showSN"}
%section.account-item.gray-bg %section.gray-bg.medium-padding{"ng-init" => "showSN = true"}
%h3{"ng-click" => "showSync = !showSync"} Sync Locations ({{syncProviders.length}}) %h3{"ng-click" => "showSN = !showSN"} Standard Notes Account
%account-sync-section{"ng-if" => "showSync"} .small-v-space
%account-vendor-account-section{"ng-if" => "showSN"}
%section.account-item.gray-bg %h4
%h3{"ng-click" => "showKeys = !showKeys"} Encryption Keys ({{keys.length}}) %a{"ng-click" => "showIO = !showIO"} Import/Export
%account-keys-section{"ng-if" => "showKeys"} %section.gray-bg{"ng-if" => "showIO"}
%import-export-menu{"ng-if" => "showIO"}
%section.account-item.gray-bg %h4
%h3{"ng-click" => "showIO = !showIO"} Import/Export %a{"ng-click" => "showAdvanced = !showAdvanced"} Advanced
%import-export-menu{"ng-if" => "showIO"} %div{"ng-if" => "showAdvanced"}
%section.gray-bg.medium-padding
%h3 Sync Locations ({{syncProviders.length}})
%account-sync-section
%section.gray-bg.medium-padding
%h3 Encryption Keys ({{keys.length}})
%account-keys-section
%h4
%a{"ng-click" => "destroyLocalData()"} Destroy all local data %a{"ng-click" => "destroyLocalData()"} Destroy all local data

View File

@@ -1,11 +1,9 @@
.account-keys-section.account-section-content %section.white-bg{"ng-repeat" => "key in keys track by key.name"}
.keys %label {{key.name}}
.key.white-bg{"ng-repeat" => "key in keys track by key.name"} %p.wrap {{key.key}}
.name {{key.name}}
.value {{key.key}}
%a{"ng-click" => "newKeyData.showForm = !newKeyData.showForm"} Add New Key %a{"ng-click" => "newKeyData.showForm = !newKeyData.showForm"} Add New Key
%form{"ng-if" => "newKeyData.showForm"} %form{"ng-if" => "newKeyData.showForm"}
%input{"ng-model" => "newKeyData.name", "placeholder" => "Name your key"} %input{"ng-model" => "newKeyData.name", "placeholder" => "Name your key"}
%input{"ng-model" => "newKeyData.key", "placeholder" => "Key"} %input{"ng-model" => "newKeyData.key", "placeholder" => "Key"}
%button.light{"ng-click" => "submitNewKeyForm()"} Add Key %button.light{"ng-click" => "submitNewKeyForm()"} Add Key

View File

@@ -1,29 +1,27 @@
.providers.account-section-content %section.white-bg{"ng-repeat" => "provider in syncProviders"}
.provider.white-bg{"ng-repeat" => "provider in syncProviders"} %label {{!provider.enabled ? 'Not enabled' : (provider.primary ? 'Main' : 'Secondary')}}
.type {{!provider.enabled ? 'Not enabled' : (provider.primary ? 'Main' : 'Secondary')}} %em{"ng-if" => "provider.keyName"} Using key: {{provider.keyName}}
.key{"ng-if" => "provider.keyName"} Using key: {{provider.keyName}} %p {{provider.url}}
.url {{provider.url}} %section.inline-h
.options %div{"ng-if" => "!provider.keyName || provider.showKeyForm"}
%div{"ng-if" => "!provider.keyName || provider.showKeyForm"} %p
%p %strong Choose encryption key:
%strong Choose encryption key: %select{"ng-model" => "provider.formData.keyName"}
%select{"ng-model" => "provider.formData.keyName"} %option{"ng-repeat" => "key in keys", "ng-selected" => "{{key.name == provider.formData.keyName}}", "value" => "{{key.name}}"}
%option{"ng-repeat" => "key in keys", "ng-selected" => "{{key.name == provider.formData.keyName}}", "value" => "{{key.name}}"} {{key.name}}
{{key.name}} %button{"ng-click" => "saveKey(provider)"} Set
%button{"ng-click" => "saveKey(provider)"} Set
%div{"ng-if" => "!provider.enabled"} %div{"ng-if" => "!provider.enabled"}
%button.light{"ng-click" => "enableSyncProvider(provider, true)"} Set as Main %button.light{"ng-click" => "enableSyncProvider(provider, true)"} Set as Main
%button.light{"ng-if" => "syncProviders.length > 1", "ng-click" => "enableSyncProvider(provider, false)"} Add as Secondary %button.light{"ng-if" => "syncProviders.length > 1", "ng-click" => "enableSyncProvider(provider, false)"} Add as Secondary
%button.light{"ng-if" => "provider.keyName", "ng-click" => "changeEncryptionKey(provider)"} Change Encryption Key %button.light{"ng-if" => "provider.keyName", "ng-click" => "changeEncryptionKey(provider)"} Change Encryption Key
%button.light{"ng-click" => "removeSyncProvider(provider)"} Remove Provider %button.light{"ng-click" => "removeSyncProvider(provider)"} Remove Provider
.sync-status{"delay-hide" => "true", "show" => "provider.syncOpInProgress", "delay" => "1000"} %div{"style" => "height: 30px;", "delay-hide" => "true", "show" => "provider.syncOpInProgress", "delay" => "1000"}
.text{"style" => "float: left;"} Syncing: {{provider.syncStatus.statusString}} %strong{"style" => "float: left;"} Syncing: {{provider.syncStatus.statusString}}
.spinner{"style" => "float: right"} .spinner{"style" => "float: right"}
%a{"ng-click" => "newSyncData.showAddSyncForm = !newSyncData.showAddSyncForm"} Add external sync with Secret URL %a{"ng-click" => "newSyncData.showAddSyncForm = !newSyncData.showAddSyncForm"} Add external sync with Secret URL
%form.sync-form{"ng-if" => "newSyncData.showAddSyncForm"} %form{"ng-if" => "newSyncData.showAddSyncForm"}
.form-tag.has-feedback %input.form-control{:autofocus => 'autofocus', :name => 'url', :placeholder => 'Secret URL', :required => true, :type => 'url', 'ng-model' => 'newSyncData.url'}
%input.form-control{:autofocus => 'autofocus', :name => 'url', :placeholder => 'Secret URL', :required => true, :type => 'url', 'ng-model' => 'newSyncData.url'} %button.btn.dark-button.btn-block{"ng-click" => "submitExternalSyncURL()"}
%button.btn.dark-button.btn-block{"ng-click" => "submitExternalSyncURL()"} Add External Sync
Add External Sync

View File

@@ -1,43 +1,34 @@
.registration-login.account-section-content %div{"ng-if" => "user"}
%h3 {{user.email}}
%p {{serverURL}}
%div{"ng-if" => "user"} %div{"ng-if" => "user"}
.email {{user.email}} %a{"ng-click" => "signOutPressed()"} Sign out
.server {{serverURL}} %p Note: Signing out does not delete your local items, extensions, and keys.
.links{"ng-if" => "user"} %label Local Encryption
.link-item %p Notes are encrypted locally before being sent to the server. Neither the server owner nor an intrusive entity can decrypt your locally encrypted notes.
%a{"ng-click" => "signOutPressed()"} Sign out %label Status:
%p Note: Signing out does not delete your local items, extensions, and keys. {{encryptionStatusForNotes()}}
.meta-container %div{"ng-if" => "!user"}
.title Local Encryption %label Sign in or Register (optional)
.desc Notes are encrypted locally before being sent to the server. Neither the server owner nor an intrusive entity can decrypt your locally encrypted notes. %p Enter your <a href="https://standardnotes.org" target="_blank">Standard Notes</a> account information.
.action-container %form.account-form{'name' => "loginForm"}
%span.status-title Status: %input.form-control{:name => 'server', :placeholder => 'Server URL', :required => true, :type => 'text', 'ng-model' => 'loginData.url'}
{{encryptionStatusForNotes()}} %input.form-control{:autofocus => 'autofocus', :name => 'email', :placeholder => 'Email', :required => true, :type => 'email', 'ng-model' => 'loginData.email'}
%div{"ng-if" => "!user"} %input.form-control{:placeholder => 'Password', :name => 'password', :required => true, :type => 'password', 'ng-model' => 'loginData.user_password'}
.meta-container .checkbox{"ng-if" => "localNotesCount() > 0"}
.title Sign in or Register (optional) %label
.desc Enter your <a href="https://standardnotes.org" target="_blank">Standard Notes</a> account information. %input{"type" => "checkbox", "ng-model" => "loginData.mergeLocal", "ng-bind" => "true", "ng-change" => "mergeLocalChanged()"}
.action-container Merge local notes ({{localNotesCount()}} notes)
%form.account-form{'name' => "loginForm"} %button.btn.dark-button.half-button{"ng-click" => "loginSubmitPressed()", "data-style" => "expand-right", "data-size" => "s", "state" => "buttonState"}
.form-tag.has-feedback %span Sign In
%input.form-control{:name => 'server', :placeholder => 'Server URL', :required => true, :type => 'text', 'ng-model' => 'loginData.url'} %button.btn.dark-button.half-button{"ng-click" => "submitRegistrationForm()", "data-style" => "expand-right", "data-size" => "s", "state" => "buttonState"}
.form-tag.has-feedback %span Register
%input.form-control.login-input{:autofocus => 'autofocus', :name => 'email', :placeholder => 'Email', :required => true, :type => 'email', 'ng-model' => 'loginData.email'} %br
.form-tag.has-feedback .block{"style" => "margin-top: 10px; font-size: 14px; font-weight: bold; text-align: center;"}
%input.form-control.login-input{:placeholder => 'Password', :name => 'password', :required => true, :type => 'password', 'ng-model' => 'loginData.user_password'} %a.btn{"ng-click" => "showResetForm = !showResetForm"} Passwords cannot be forgotten.
.checkbox{"ng-if" => "localNotesCount() > 0"} %em{"ng-if" => "loginData.status", "style" => "font-size: 14px;"} {{loginData.status}}
%label
%input{"type" => "checkbox", "ng-model" => "loginData.mergeLocal", "ng-bind" => "true", "ng-change" => "mergeLocalChanged()"}
Merge local notes ({{localNotesCount()}} notes)
%button.btn.dark-button.half-button{"ng-click" => "loginSubmitPressed()", "data-style" => "expand-right", "data-size" => "s", "state" => "buttonState"}
%span Sign In
%button.btn.dark-button.half-button{"ng-click" => "submitRegistrationForm()", "data-style" => "expand-right", "data-size" => "s", "state" => "buttonState"}
%span Register
%br
.login-forgot{"style" => "padding-top: 4px;"}
%a.btn.btn-link{"ng-click" => "showResetForm = !showResetForm"} Passwords cannot be forgotten.
.panel-status-text{"ng-if" => "loginData.status", "style" => "font-size: 14px;"} {{loginData.status}}
%div{"ng-if" => "showResetForm"} %div{"ng-if" => "showResetForm"}
%p{"style" => "font-size: 13px; text-align: center;"} %p{"style" => "font-size: 13px; text-align: center;"}
Because notes are locally encrypted using a secret key derived from your password, there's no way to decrypt these notes if you forget your password. Because notes are locally encrypted using a secret key derived from your password, there's no way to decrypt these notes if you forget your password.
For this reason, Standard Notes cannot offer a password reset option. You <strong>must</strong> make sure to store or remember your password. For this reason, Standard Notes cannot offer a password reset option. You <strong>must</strong> make sure to store or remember your password.

View File

@@ -1,27 +1,27 @@
.account-section-content .options{"style" => "font-size: 12px; margin-top: 4px;"}
.options{"style" => "font-size: 12px; margin-top: 4px;"} %label{"ng-if" => "user"}
%label.enc-option{"ng-if" => "user"} %input{"type" => "radio", "ng-model" => "archiveFormData.encryption_type", "ng-value" => "'mk'", "ng-change" => "archiveFormData.encryption_type = 'mk'"}
%input{"type" => "radio", "ng-model" => "archiveFormData.encryption_type", "ng-value" => "'mk'", "ng-change" => "archiveFormData.encryption_type = 'mk'"} Encrypted with Standard File key
Encrypted with Standard File key %label
%label.enc-option %input{"type" => "radio", "ng-model" => "archiveFormData.encryption_type", "ng-value" => "'ek'", "ng-change" => "archiveFormData.encryption_type = 'ek'"}
%input{"type" => "radio", "ng-model" => "archiveFormData.encryption_type", "ng-value" => "'ek'", "ng-change" => "archiveFormData.encryption_type = 'ek'"} {{user ? 'Encrypted with custom key' : 'Encrypted' }}
{{user ? 'Encrypted with custom key' : 'Encrypted' }} %div{"ng-if" => "!user || (user && archiveFormData.encryption_type == 'ek')"}
%div{"ng-if" => "!user || (user && archiveFormData.encryption_type == 'ek')"} %input{"ng-model" => "archiveFormData.ek", "placeholder" => "Encryption key"}
%input{"ng-model" => "archiveFormData.ek", "placeholder" => "Encryption key"} %label
%label.enc-option %input{"type" => "radio", "ng-model" => "archiveFormData.encryption_type", "ng-value" => "'none'", "ng-change" => "archiveFormData.encryption_type = 'none'"}
%input{"type" => "radio", "ng-model" => "archiveFormData.encryption_type", "ng-value" => "'none'", "ng-change" => "archiveFormData.encryption_type = 'none'"} Decrypted
Decrypted
.action-container
%a{"ng-click" => "downloadDataArchive()"} Download Data Archive
%div{"ng-if" => "!importData.loading"} %a{"ng-click" => "downloadDataArchive()"} Download Data Archive
%label#import-archive
%input{"type" => "file", "style" => "display: none;", "file-change" => "->", "handler" => "importFileSelected(files)"} %div{"ng-if" => "!importData.loading"}
%a.disabled %label#import-archive
%span %input{"type" => "file", "style" => "display: none;", "file-change" => "->", "handler" => "importFileSelected(files)"}
Import Data from Archive %a.disabled
.import-password{"ng-if" => "importData.requestPassword"} %span
Enter the account password associated with the import file. Import Data from Archive
%input.field{"type" => "text", "ng-model" => "importData.password"} %div{"ng-if" => "importData.requestPassword"}
%button{"ng-click" => "submitImportPassword()"} Decrypt & Import Enter the account password associated with the import file.
.spinner{"ng-if" => "importData.loading"} %input{"type" => "text", "ng-model" => "importData.password"}
%button{"ng-click" => "submitImportPassword()"} Decrypt & Import
.spinner{"ng-if" => "importData.loading"}

View File

@@ -1,26 +1,24 @@
.header .footer-bar
.header-content .pull-left
.menu.left .footer-bar-link
%a{"ng-click" => "ctrl.accountMenuPressed()"} Account
%account-data-menu{"ng-if" => "ctrl.showAccountMenu"}
.items .footer-bar-link
.item.account %a{"ng-click" => "ctrl.toggleExtensions()"} Extensions
%a{"ng-click" => "ctrl.accountMenuPressed()"} Account %global-extensions-menu{"ng-if" => "ctrl.showExtensionsMenu"}
%account-data-menu{"ng-if" => "ctrl.showAccountMenu"}
.item .footer-bar-link
%a{"ng-click" => "ctrl.toggleExtensions()"} Extensions %a{"href" => "https://standardnotes.org", "target" => "_blank"}
%global-extensions-menu{"ng-if" => "ctrl.showExtensionsMenu"} Help
.item .pull-right
%a{"href" => "https://standardnotes.org", "target" => "_blank"}
Help
.menu.right .footer-bar-link
.items %div{"ng-if" => "ctrl.lastSyncDate", "style" => "float: left; font-weight: normal; margin-right: 8px;"}
.item.last-refreshed{"ng-if" => "ctrl.lastSyncDate"} %span{"ng-if" => "!ctrl.isRefreshing"}
%span{"ng-if" => "!ctrl.isRefreshing"} Last refreshed {{ctrl.lastSyncDate | appDateTime}}
Last refreshed {{ctrl.lastSyncDate | appDateTime}} %span{"ng-if" => "ctrl.isRefreshing"}
%span{"ng-if" => "ctrl.isRefreshing"} .spinner{"style" => "margin-top: 2px;"}
.spinner
.item{"ng-click" => "ctrl.refreshData()"} %a{"ng-click" => "ctrl.refreshData()"} Refresh
Refresh