css

2017-01-26 01:00:47 -06:00
parent 5141b963bc
commit ac5569429d
10 changed files with 66 additions and 50 deletions
--- a/app/assets/javascripts/app/services/directives/accountDataMenu.js
+++ b/app/assets/javascripts/app/services/directives/accountDataMenu.js
@@ -7,10 +7,11 @@ class AccountDataMenu {
    };
  }

-  controller($scope, apiController, modelManager, keyManager) {
+  controller($scope, apiController, modelManager, keyManager, syncManager) {
    'ngInject';

    $scope.keys = keyManager.keys;
+    $scope.syncProviders = syncManager.syncProviders;

    $scope.destroyLocalData = function() {
      if(!confirm("Are you sure you want to end your session? This will delete all local items, sync providers, keys, and extensions.")) {
--- a/app/assets/javascripts/app/services/directives/delay-hide.js
+++ b/app/assets/javascripts/app/services/directives/delay-hide.js
@@ -10,6 +10,8 @@ angular
     link: function(scope, elem, attrs) {
       var showTimer;

+       showElement(false);
+
       //This is where all the magic happens!
       // Whenever the scope variable updates we simply
       // show if it evaluates to 'true' and hide if 'false'
--- a/app/assets/stylesheets/app/_directives.scss
+++ b/app/assets/stylesheets/app/_directives.scss
@@ -96,8 +96,6 @@ Extensions

  .extension {
    margin-bottom: 18px;
-    background-color: #f6f6f6;
-    border: 1px solid #f2f2f2;
    padding: 14px 6px;
    padding-bottom: 8px;
    color: black;
@@ -224,8 +222,6 @@ Extensions
    font-size: 12px;

    .provider {
-      background-color: #f6f6f6;
-      border: 1px solid #f2f2f2;
      padding: 10px 10px;
      padding-bottom: 8px;
      margin-bottom: 10px;
@@ -235,10 +231,10 @@ Extensions
      }

      > .url {
-        // white-space: nowrap;
-        // text-overflow: ellipsis;
-        // overflow: hidden;
-        word-wrap: break-word;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        // word-wrap: break-word;
        margin-top: 4px;
      }

@@ -257,10 +253,9 @@ Extensions
 .account-keys-section {
  .keys {
    .key {
-      background-color: #f6f6f6;
-      border: 1px solid #f2f2f2;
      padding: 10px 10px;
      padding-bottom: 8px;
+      margin-bottom: 8px;

      > .name {
        font-size: 13px;
--- a/app/assets/stylesheets/app/_header.scss
+++ b/app/assets/stylesheets/app/_header.scss
@@ -91,6 +91,7 @@
        margin-top: 0px;
        margin-bottom: 4px;
        font-size: 16px;
+        width: 100%;
      }

      a {
@@ -154,6 +155,16 @@
  float: left;
 }

+.gray-bg {
+  background-color: #f6f6f6;
+  border: 1px solid #f2f2f2;
+}
+
+.white-bg {
+  background-color: white;
+  border: 1px solid rgba(gray, 0.2);
+}
+
 .item.last-refreshed {
  font-weight: normal !important;
  cursor: default !important;
@@ -193,9 +204,15 @@
      margin-top: 0px;
    }

+    .account-section-content {
+      margin-top: 15px;
+    }
+
    .account-item {
      width: 100%;
-      margin-bottom: 34px;
+      margin-bottom: 15px;
+      min-height: 50px;
+      padding: 20px 14px;

      a {
        color: $blue-color;
--- a/app/assets/templates/frontend/directives/account-data-menu.html.haml
+++ b/app/assets/templates/frontend/directives/account-data-menu.html.haml
@@ -1,19 +1,19 @@
 .panel.panel-default.account-panel.panel-right.account-data-menu
  .panel-body
    .account-items
-      %section.account-item
+      %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
-        %h3{"ng-click" => "showSync = !showSync"} Sync Providers
+      %section.account-item.gray-bg
+        %h3{"ng-click" => "showSync = !showSync"} Sync Locations ({{syncProviders.length}})
        %account-sync-section{"ng-if" => "showSync"}

-      %section.account-item
-        %h3{"ng-click" => "showKeys = !showKeys"} Encryption Keys ({{keys.length}}) 
+      %section.account-item.gray-bg
+        %h3{"ng-click" => "showKeys = !showKeys"} Encryption Keys ({{keys.length}})
        %account-keys-section{"ng-if" => "showKeys"}

-      %section.account-item
+      %section.account-item.gray-bg
        %h3{"ng-click" => "showIO = !showIO"} Import/Export
        %import-export-menu{"ng-if" => "showIO"}

--- a/app/assets/templates/frontend/directives/account-keys-section.html.haml
+++ b/app/assets/templates/frontend/directives/account-keys-section.html.haml
@@ -1,6 +1,6 @@
-.account-keys-section
+.account-keys-section.account-section-content
  .keys
-    .key{"ng-repeat" => "key in keys"}
+    .key.white-bg{"ng-repeat" => "key in keys"}
      .name {{key.name}}
      .value {{key.key}}

--- a/app/assets/templates/frontend/directives/account-sync-section.html.haml
+++ b/app/assets/templates/frontend/directives/account-sync-section.html.haml
@@ -1,5 +1,5 @@
-.providers
-  .provider{"ng-repeat" => "provider in syncProviders"}
+.providers.account-section-content
+  .provider.white-bg{"ng-repeat" => "provider in syncProviders"}
    .type {{!provider.enabled ? 'Not enabled' : (provider.primary ? 'Primary' : 'Secondary')}}
    .key{"ng-if" => "provider.keyName"} Using key: {{provider.keyName}}
    .url {{provider.url}}
--- a/app/assets/templates/frontend/directives/account-vendor-account-section.html.haml
+++ b/app/assets/templates/frontend/directives/account-vendor-account-section.html.haml
@@ -1,4 +1,4 @@
-.registration-login
+.registration-login.account-section-content
  %div{"ng-if" => "user"}
    .email {{user.email}}
    .server {{serverURL}}
@@ -15,7 +15,7 @@
  %div{"ng-if" => "!user"}
    .meta-container
      .title Sign in or Register (optional)
-      .desc Enter your <a href="https://standardfile.org" target="_blank">Standard File</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-tag.has-feedback
--- a/app/assets/templates/frontend/directives/import-export-menu.html.haml
+++ b/app/assets/templates/frontend/directives/import-export-menu.html.haml
@@ -1,26 +1,27 @@
-.options{"style" => "font-size: 12px; margin-top: 4px;"}
-  %label.enc-option{"ng-if" => "user"}
-    %input{"type" => "radio", "ng-model" => "archiveFormData.encryption_type", "ng-value" => "'mk'", "ng-change" => "archiveFormData.encryption_type = 'mk'"}
-    Encrypted with Standard File key
-  %label.enc-option
-    %input{"type" => "radio", "ng-model" => "archiveFormData.encryption_type", "ng-value" => "'ek'", "ng-change" => "archiveFormData.encryption_type = 'ek'"}
-    {{user ? 'Encrypted with custom key' : 'Encrypted' }}
-  %div{"ng-if" => "!user || (user && archiveFormData.encryption_type == 'ek')"}
-    %input{"ng-model" => "archiveFormData.ek", "placeholder" => "Encryption key"}
-  %label.enc-option
-    %input{"type" => "radio", "ng-model" => "archiveFormData.encryption_type", "ng-value" => "'none'", "ng-change" => "archiveFormData.encryption_type = 'none'"}
-    Decrypted
-.action-container
-  %a{"ng-click" => "downloadDataArchive()"} Download Data Archive
+.account-section-content
+  .options{"style" => "font-size: 12px; margin-top: 4px;"}
+    %label.enc-option{"ng-if" => "user"}
+      %input{"type" => "radio", "ng-model" => "archiveFormData.encryption_type", "ng-value" => "'mk'", "ng-change" => "archiveFormData.encryption_type = 'mk'"}
+      Encrypted with Standard File key
+    %label.enc-option
+      %input{"type" => "radio", "ng-model" => "archiveFormData.encryption_type", "ng-value" => "'ek'", "ng-change" => "archiveFormData.encryption_type = 'ek'"}
+      {{user ? 'Encrypted with custom key' : 'Encrypted' }}
+    %div{"ng-if" => "!user || (user && archiveFormData.encryption_type == 'ek')"}
+      %input{"ng-model" => "archiveFormData.ek", "placeholder" => "Encryption key"}
+    %label.enc-option
+      %input{"type" => "radio", "ng-model" => "archiveFormData.encryption_type", "ng-value" => "'none'", "ng-change" => "archiveFormData.encryption_type = 'none'"}
+      Decrypted
+  .action-container
+    %a{"ng-click" => "downloadDataArchive()"} Download Data Archive

-%div{"ng-if" => "!importData.loading"}
-  %label#import-archive
-    %input{"type" => "file", "style" => "display: none;", "file-change" => "->", "handler" => "importFileSelected(files)"}
-    %a.disabled
-      %span
-        Import Data from Archive
-  .import-password{"ng-if" => "importData.requestPassword"}
-    Enter the account password associated with the import file.
-    %input.field{"type" => "text", "ng-model" => "importData.password"}
-    %button{"ng-click" => "submitImportPassword()"} Decrypt & Import
-.spinner{"ng-if" => "importData.loading"}
+  %div{"ng-if" => "!importData.loading"}
+    %label#import-archive
+      %input{"type" => "file", "style" => "display: none;", "file-change" => "->", "handler" => "importFileSelected(files)"}
+      %a.disabled
+        %span
+          Import Data from Archive
+    .import-password{"ng-if" => "importData.requestPassword"}
+      Enter the account password associated with the import file.
+      %input.field{"type" => "text", "ng-model" => "importData.password"}
+      %button{"ng-click" => "submitImportPassword()"} Decrypt & Import
+  .spinner{"ng-if" => "importData.loading"}
--- a/app/assets/templates/frontend/header.html.haml
+++ b/app/assets/templates/frontend/header.html.haml
@@ -4,7 +4,7 @@

      .items
        .item.account
-          %a{"ng-click" => "ctrl.accountMenuPressed()"} Data
+          %a{"ng-click" => "ctrl.accountMenuPressed()"} Account
          %account-data-menu{"ng-if" => "ctrl.showAccountMenu"}

        .item