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

css cleanup

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

61
app/assets/stylesheets/app/_directives.scss
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;
}
} }
} }
} }

275
app/assets/stylesheets/app/_header.scss
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,95 +19,118 @@
border-bottom: 1px solid rgba(#979799, 0.4); border-bottom: 1px solid rgba(#979799, 0.4);
a { a {
color: $dark-gray; font-weight: bold;
cursor: pointer;
color: $blue-color;
&.gray {
color: $dark-gray !important;
} }
&.block {
display: block !important;
}
} }
.header-content { p {
margin-bottom: 0px; margin: 2px 0px;
padding-top: 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; border-radius: 0px;
left: 0px;
right: 0px;
} }
.panel-status-text { .block {
margin-top: 20px; display: block;
font-style: italic;
font-size: 14px;
} }
.menu { .wrap {
margin-left: 15px; word-wrap: break-word;
padding-top: 5px; }
margin-top: 0px;
color: #515263; .one-line-overflow {
z-index: 1000; white-space: nowrap;
margin-bottom: 0px; text-overflow: ellipsis;
overflow: hidden;
}
.small-v-space {
height: 6px;
display: block;
}
.medium-padding {
padding: 10px;
}
.large-padding {
padding: 15px;
}
}
.footer-bar-link {
font-size: 11px; font-size: 11px;
font-weight: bold;
margin-left: 8px;
color: #515263;
&.left { z-index: 1000;
float: left;
}
&.right {
float: right;
margin-right: 10px;
}
.login-panel .login-input {
border-radius: 0px;
}
}
.items {
.item {
display: inline-block; display: inline-block;
margin-right: 7px;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
font-weight: bold;
a { > a {
color: #515263; color: #515263;
} }
}
.panel { .footer-bar-link .panel {
font-weight: normal;
font-size: 12px;
max-height: 85vh;
position: absolute; position: absolute;
right: 0px; right: 0px;
bottom: 20px; bottom: 20px;
min-width: 300px; min-width: 300px;
z-index: 1000; z-index: 1000;
margin-top: 15px; margin-top: 15px;
box-shadow: 0px 0px 15px rgba(black, 0.2); box-shadow: 0px 0px 15px rgba(black, 0.2);
border: none; border: none;
cursor: default; cursor: default;
max-height: 85vh;
overflow: auto; overflow: auto;
background-color: white; 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 { button.light {
font-weight: bold; font-weight: bold;
@@ -138,14 +170,6 @@
margin-right: auto; margin-right: auto;
} }
} }
}
}
.item.io {
.enc-option {
display: block;
}
}
.half-button { .half-button {
$spacing: 2px; $spacing: 2px;
@@ -170,78 +194,8 @@
cursor: default !important; cursor: default !important;
} }
.item.account {
.email {
font-size: 18px;
font-weight: bold;
margin-bottom: 2px;
}
.server {
margin-bottom: 10px;
}
.links {
margin-bottom: 25px;
}
.link-item {
margin-bottom: 8px;
}
input {
border-radius: 0px;
}
.account-panel { .account-panel {
width: 350px;
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 { .import-password {
@@ -263,51 +217,10 @@
} }
} }
&: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;
}
}
}
a.disabled { 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;

29
app/assets/templates/frontend/directives/account-data-menu.html.haml
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"} %section.gray-bg.medium-padding{"ng-init" => "showSN = true"}
%h3{"ng-click" => "showSN = !showSN"} Standard Notes Account %h3{"ng-click" => "showSN = !showSN"} Standard Notes Account
.small-v-space
%account-vendor-account-section{"ng-if" => "showSN"} %account-vendor-account-section{"ng-if" => "showSN"}
%section.account-item.gray-bg %h4
%h3{"ng-click" => "showSync = !showSync"} Sync Locations ({{syncProviders.length}}) %a{"ng-click" => "showIO = !showIO"} Import/Export
%account-sync-section{"ng-if" => "showSync"} %section.gray-bg{"ng-if" => "showIO"}
%section.account-item.gray-bg
%h3{"ng-click" => "showKeys = !showKeys"} Encryption Keys ({{keys.length}})
%account-keys-section{"ng-if" => "showKeys"}
%section.account-item.gray-bg
%h3{"ng-click" => "showIO = !showIO"} Import/Export
%import-export-menu{"ng-if" => "showIO"} %import-export-menu{"ng-if" => "showIO"}
%h4
%a{"ng-click" => "showAdvanced = !showAdvanced"} Advanced
%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

8
app/assets/templates/frontend/directives/account-keys-section.html.haml
View File

@@ -1,8 +1,6 @@
.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"}

18
app/assets/templates/frontend/directives/account-sync-section.html.haml
View File

@@ -1,9 +1,8 @@
.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:
@@ -17,13 +16,12 @@
%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

35
app/assets/templates/frontend/directives/account-vendor-account-section.html.haml
View File

@@ -1,29 +1,20 @@
.registration-login.account-section-content
%div{"ng-if" => "user"} %div{"ng-if" => "user"}
.email {{user.email}} %h3 {{user.email}}
.server {{serverURL}} %p {{serverURL}}
.links{"ng-if" => "user"} %div{"ng-if" => "user"}
.link-item
%a{"ng-click" => "signOutPressed()"} Sign out %a{"ng-click" => "signOutPressed()"} Sign out
%p Note: Signing out does not delete your local items, extensions, and keys. %p Note: Signing out does not delete your local items, extensions, and keys.
.meta-container %label Local Encryption
.title Local Encryption %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.
.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. %label Status:
.action-container
%span.status-title Status:
{{encryptionStatusForNotes()}} {{encryptionStatusForNotes()}}
%div{"ng-if" => "!user"} %div{"ng-if" => "!user"}
.meta-container %label Sign in or Register (optional)
.title Sign in or Register (optional) %p Enter your <a href="https://standardnotes.org" target="_blank">Standard Notes</a> account information.
.desc Enter your <a href="https://standardnotes.org" target="_blank">Standard Notes</a> account information.
.action-container
%form.account-form{'name' => "loginForm"} %form.account-form{'name' => "loginForm"}
.form-tag.has-feedback
%input.form-control{:name => 'server', :placeholder => 'Server URL', :required => true, :type => 'text', 'ng-model' => 'loginData.url'} %input.form-control{:name => 'server', :placeholder => 'Server URL', :required => true, :type => 'text', 'ng-model' => 'loginData.url'}
.form-tag.has-feedback %input.form-control{:autofocus => 'autofocus', :name => 'email', :placeholder => 'Email', :required => true, :type => 'email', 'ng-model' => 'loginData.email'}
%input.form-control.login-input{:autofocus => 'autofocus', :name => 'email', :placeholder => 'Email', :required => true, :type => 'email', 'ng-model' => 'loginData.email'} %input.form-control{:placeholder => 'Password', :name => 'password', :required => true, :type => 'password', 'ng-model' => 'loginData.user_password'}
.form-tag.has-feedback
%input.form-control.login-input{:placeholder => 'Password', :name => 'password', :required => true, :type => 'password', 'ng-model' => 'loginData.user_password'}
.checkbox{"ng-if" => "localNotesCount() > 0"} .checkbox{"ng-if" => "localNotesCount() > 0"}
%label %label
%input{"type" => "checkbox", "ng-model" => "loginData.mergeLocal", "ng-bind" => "true", "ng-change" => "mergeLocalChanged()"} %input{"type" => "checkbox", "ng-model" => "loginData.mergeLocal", "ng-bind" => "true", "ng-change" => "mergeLocalChanged()"}
@@ -33,9 +24,9 @@
%button.btn.dark-button.half-button{"ng-click" => "submitRegistrationForm()", "data-style" => "expand-right", "data-size" => "s", "state" => "buttonState"} %button.btn.dark-button.half-button{"ng-click" => "submitRegistrationForm()", "data-style" => "expand-right", "data-size" => "s", "state" => "buttonState"}
%span Register %span Register
%br %br
.login-forgot{"style" => "padding-top: 4px;"} .block{"style" => "margin-top: 10px; font-size: 14px; font-weight: bold; text-align: center;"}
%a.btn.btn-link{"ng-click" => "showResetForm = !showResetForm"} Passwords cannot be forgotten. %a.btn{"ng-click" => "showResetForm = !showResetForm"} Passwords cannot be forgotten.
.panel-status-text{"ng-if" => "loginData.status", "style" => "font-size: 14px;"} {{loginData.status}} %em{"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;"}

14
app/assets/templates/frontend/directives/import-export-menu.html.haml
View File

@@ -1,17 +1,16 @@
.account-section-content
.options{"style" => "font-size: 12px; margin-top: 4px;"} .options{"style" => "font-size: 12px; margin-top: 4px;"}
%label.enc-option{"ng-if" => "user"} %label{"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.enc-option %label
%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.enc-option %label
%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 %a{"ng-click" => "downloadDataArchive()"} Download Data Archive
%div{"ng-if" => "!importData.loading"} %div{"ng-if" => "!importData.loading"}
@@ -20,8 +19,9 @@
%a.disabled %a.disabled
%span %span
Import Data from Archive Import Data from Archive
.import-password{"ng-if" => "importData.requestPassword"} %div{"ng-if" => "importData.requestPassword"}
Enter the account password associated with the import file. Enter the account password associated with the import file.
%input.field{"type" => "text", "ng-model" => "importData.password"} %input{"type" => "text", "ng-model" => "importData.password"}
%button{"ng-click" => "submitImportPassword()"} Decrypt & Import %button{"ng-click" => "submitImportPassword()"} Decrypt & Import
.spinner{"ng-if" => "importData.loading"} .spinner{"ng-if" => "importData.loading"}

26
app/assets/templates/frontend/header.html.haml
View File

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