Action menu updates, ionicons minimal

app/assets/javascripts/app/frontend/models/app/extension.js

@@ -8,55 +8,12 @@ class Action {
       this.lastExecuted = new Date(this.lastExecuted);
     }
   }
-
-  permissionsString() {
-    if(!this.permissions) {
-      return "";
-    }
-
-    var permission = this.permissions.charAt(0).toUpperCase() + this.permissions.slice(1); // capitalize first letter
-    permission += ": ";
-    for(var contentType of this.content_types) {
-      if(contentType == "*") {
-        permission += "All items";
-      } else {
-        permission += contentType;
-      }
-
-      permission += " ";
-    }
-
-    return permission;
-  }
-
-  encryptionModeString() {
-    if(this.verb != "post") {
-      return null;
-    }
-    var encryptionMode = "This action accepts data ";
-    if(this.accepts_encrypted && this.accepts_decrypted) {
-      encryptionMode += "encrypted or decrypted.";
-    } else {
-      if(this.accepts_encrypted) {
-        encryptionMode += "encrypted.";
-      } else {
-        encryptionMode += "decrypted.";
-      }
-    }
-    return encryptionMode;
-  }
-
 }
 
 class Extension extends Item {
   constructor(json) {
       super(json);
 
-      if(this.encrypted === null || this.encrypted === undefined) {
-        // Default to encrypted on creation.
-        this.encrypted = true;
-      }
-
       if(json.actions) {
         this.actions = json.actions.map(function(action){
           return new Action(action);
@@ -68,12 +25,6 @@ class Extension extends Item {
       }
   }
 
-  actionsInGlobalContext() {
-    return this.actions.filter(function(action){
-      return action.context == "global";
-    })
-  }
-
   actionsWithContextForItem(item) {
     return this.actions.filter(function(action){
       return action.context == item.content_type || action.context == "Item";
@@ -86,12 +37,6 @@ class Extension extends Item {
     this.description = content.description;
     this.url = content.url;
 
-    if(content.encrypted !== null && content.encrypted !== undefined) {
-      this.encrypted = content.encrypted;
-    } else {
-      this.encrypted = true;
-    }
-
     this.supported_types = content.supported_types;
     if(content.actions) {
       this.actions = content.actions.map(function(action){
@@ -114,8 +59,7 @@ class Extension extends Item {
       url: this.url,
       description: this.description,
       actions: this.actions,
-      supported_types: this.supported_types,
+      supported_types: this.supported_types
-      encrypted: this.encrypted
     };
 
     _.merge(params, super.structureParams());

app/assets/javascripts/app/services/actionsManager.js

@@ -7,16 +7,6 @@ class ActionsManager {
       this.enabledRepeatActionUrls = JSON.parse(storageManager.getItem("enabledRepeatActionUrls")) || [];
       this.syncManager = syncManager;
       this.storageManager = storageManager;
-
-      modelManager.addItemSyncObserver("actionsManager", "Extension", function(allItems, validItems, deletedItems){
-        for (var ext of validItems) {
-          for (var action of ext.actions) {
-            if(_.includes(this.enabledRepeatActionUrls, action.url)) {
-              this.enableRepeatAction(action, ext);
-            }
-          }
-        }
-      }.bind(this))
   }
 
   get extensions() {
@@ -40,14 +30,6 @@ class ActionsManager {
   }
 
   deleteExtension(extension) {
-    for(var action of extension.actions) {
-      if(action.repeat_mode) {
-        if(this.isRepeatActionEnabled(action)) {
-          this.disableRepeatAction(action);
-        }
-      }
-    }
-
     this.modelManager.setItemToBeDeleted(extension);
     this.syncManager.sync(null);
   }
@@ -90,7 +72,6 @@ class ActionsManager {
 
   handleExtensionLoadExternalResponseItem(url, externalResponseItem) {
     // Don't allow remote response to set these flags
-    delete externalResponseItem.encrypted;
     delete externalResponseItem.uuid;
 
     var extension = _.find(this.extensions, {url: url});
@@ -125,13 +106,6 @@ class ActionsManager {
   }
 
   refreshExtensionsFromServer() {
-    for (var url of this.enabledRepeatActionUrls) {
-      var action = this.actionWithURL(url);
-      if(action) {
-        this.disableRepeatAction(action);
-      }
-    }
-
     for(var ext of this.extensions) {
       this.retrieveExtensionFromServer(ext.url, function(extension){
         extension.setDirty(true);
@@ -141,12 +115,6 @@ class ActionsManager {
 
   executeAction(action, extension, item, callback) {
 
-    if(extension.encrypted && this.authManager.offline()) {
-      alert("To send data encrypted, you must have an encryption key, and must therefore be signed in.");
-      callback(null);
-      return;
-    }
-
     var customCallback = function(response) {
       action.running = false;
       callback(response);
@@ -154,6 +122,8 @@ class ActionsManager {
 
     action.running = true;
 
+    let decrypted = action.access_type == "decrypted";
+
     switch (action.verb) {
       case "get": {
 
@@ -204,12 +174,12 @@ class ActionsManager {
         if(action.all) {
           var items = this.modelManager.allItemsMatchingTypes(action.content_types);
           params.items = items.map(function(item){
-            var params = this.outgoingParamsForItem(item, extension);
+            var params = this.outgoingParamsForItem(item, extension, decrypted);
             return params;
           }.bind(this))
 
         } else {
-          params.items = [this.outgoingParamsForItem(item, extension)];
+          params.items = [this.outgoingParamsForItem(item, extension, decrypted)];
         }
 
         this.performPost(action, extension, params, function(response){
@@ -231,35 +201,6 @@ class ActionsManager {
     return _.includes(this.enabledRepeatActionUrls, action.url);
   }
 
-  disableRepeatAction(action, extension) {
-    _.pull(this.enabledRepeatActionUrls, action.url);
-    this.storageManager.setItem("enabledRepeatActionUrls", JSON.stringify(this.enabledRepeatActionUrls));
-    this.modelManager.removeItemChangeObserver(action.url);
-
-    console.assert(this.isRepeatActionEnabled(action) == false);
-  }
-
-  enableRepeatAction(action, extension) {
-    if(!_.find(this.enabledRepeatActionUrls, action.url)) {
-      this.enabledRepeatActionUrls.push(action.url);
-      this.storageManager.setItem("enabledRepeatActionUrls", JSON.stringify(this.enabledRepeatActionUrls));
-    }
-
-    if(action.repeat_mode) {
-
-      if(action.repeat_mode == "watch") {
-        this.modelManager.addItemChangeObserver(action.url, action.content_types, function(changedItems){
-          this.triggerWatchAction(action, extension, changedItems);
-        }.bind(this))
-      }
-
-      if(action.repeat_mode == "loop") {
-        // todo
-      }
-
-    }
-  }
-
   queueAction(action, extension, delay, changedItems) {
     this.actionQueue = this.actionQueue || [];
     if(_.find(this.actionQueue, {url: action.url})) {
@@ -274,38 +215,9 @@ class ActionsManager {
     }.bind(this), delay * 1000);
   }
 
-  triggerWatchAction(action, extension, changedItems) {
+  outgoingParamsForItem(item, extension, decrypted = false) {
-    if(action.repeat_timeout > 0) {
-      var lastExecuted = action.lastExecuted;
-      var diffInSeconds = (new Date() - lastExecuted)/1000;
-      if(diffInSeconds < action.repeat_timeout) {
-        var delay = action.repeat_timeout - diffInSeconds;
-        this.queueAction(action, extension, delay, changedItems);
-        return;
-      }
-    }
-
-    action.lastExecuted = new Date();
-
-    if(action.verb == "post") {
-      var params = {};
-      params.items = changedItems.map(function(item){
-        var params = this.outgoingParamsForItem(item, extension);
-        return params;
-      }.bind(this))
-
-      action.running = true;
-      this.performPost(action, extension, params, function(){
-        action.running = false;
-      });
-    } else {
-      // todo
-    }
-  }
-
-  outgoingParamsForItem(item, extension) {
     var keys = this.authManager.keys();
-    if(!extension.encrypted) {
+    if(decrypted) {
       keys = null;
     }
     var itemParams = new ItemParams(item, keys, this.authManager.protocolVersion());
@@ -313,11 +225,6 @@ class ActionsManager {
   }
 
   performPost(action, extension, params, callback) {
-
-    if(extension.encrypted) {
-      params.auth_params = this.authManager.getAuthParams();
-    }
-
     this.httpManager.postAbsolute(action.url, params, function(response){
       action.error = false;
       if(callback) {

app/assets/javascripts/app/services/directives/views/actionsMenu.js

@@ -23,12 +23,12 @@ class ActionsMenu {
     }
 
     $scope.executeAction = function(action, extension, parentAction) {
-      if(!$scope.isActionEnabled(action, extension)) {
-        alert("This action requires " + action.access_type + " access to this note. You can change this setting in the Extensions menu on the bottom of the app.");
-        return;
-      }
       if(action.verb == "nested") {
-        action.showNestedActions = !action.showNestedActions;
+        if(!action.subrows) {
+          action.subrows = $scope.subRowsForAction(action, extension);
+        } else {
+          action.subrows = null;
+        }
         return;
       }
       action.running = true;
@@ -41,7 +41,7 @@ class ActionsMenu {
           // keep nested state
           if(parentAction) {
             var matchingAction = _.find(ext.actions, {label: parentAction.label});
-            matchingAction.showNestedActions = true;
+            matchingAction.subrows = $scope.subRowsForAction(parentAction, extension);
           }
         });
       })
@@ -60,21 +60,25 @@ class ActionsMenu {
       }
     }
 
-    $scope.isActionEnabled = function(action, extension) {
+
-      if(action.access_type) {
+    $scope.subRowsForAction = function(parentAction, extension) {
-        var extEncryptedAccess = extension.encrypted;
+      if(!parentAction.subactions) {
-        if(action.access_type == "decrypted" && extEncryptedAccess) {
+        return null;
-          return false;
-        } else if(action.access_type == "encrypted" && !extEncryptedAccess) {
-          return false;
-        }
       }
-      return true;
+      return parentAction.subactions.map((subaction) => {
+        return {
+          onClick: ($event) => {
+            this.executeAction(subaction, extension, parentAction);
+            $event.stopPropagation();
+          },
+          title: subaction.label,
+          subtitle: subaction.desc,
+          spinnerClass: subaction.running ? 'info' : null
+        }
+      })
     }
 
-    $scope.accessTypeForExtension = function(extension) {
+
-      return extension.encrypted ? "encrypted" : "decrypted";
-    }
   }
 
 }

app/assets/javascripts/app/services/directives/views/menuRow.js

@@ -11,7 +11,9 @@ class MenuRow {
       hasButton: "=",
       buttonText: "=",
       buttonClass: "=",
-      buttonAction: "&"
+      buttonAction: "&",
+      spinnerClass: "=",
+      subRows: "="
     };
   }
 

app/assets/stylesheets/app/_extensions.scss

@@ -1,97 +0,0 @@
-.extension-render-modal {
-  position: fixed;
-  margin-left: auto;
-  margin-right: auto;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  z-index: 10000;
-  width: 100vw;
-  height: 100vh;
-  background-color: rgba(gray, 0.3);
-  color: black;
-
-  .content {
-    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
-    background-color: white;
-    width: 700px;
-    height: 500px;
-    margin: auto;
-    padding: 25px;
-    position: absolute;
-    top: 0; left: 0; bottom: 0; right: 0;
-    overflow-y: scroll;
-  }
-}
-
-#global-ext-menu {
-  color: black;
-  .panel-body {
-    padding: 0;
-  }
-
-  .container {
-    padding: 13px 18px;
-
-    &.no-bottom {
-      padding-bottom: 0;
-    }
-  }
-
-  p {
-    font-size: 14px;
-
-    &.small {
-      font-size: 12px;
-    }
-  }
-
-  .link-group {
-    a {
-      margin-right: 2px;
-    }
-  }
-
-  .dashboard-link {
-    padding-top: 12px;
-    font-weight: normal;
-  }
-
-  .section-margin {
-    margin-top: 20px;
-  }
-
-  input {
-    border: 1px solid $blue-color;
-    border-radius: 2px;
-  }
-
-  .header {
-    padding-bottom: 12px;
-  }
-
-  ul {
-    border-top: 1px solid $light-bg-color;
-    border-bottom: 1px solid $light-bg-color;
-    margin: 0;
-    padding: 0;
-
-    li {
-      cursor: pointer;
-      background-color: rgba($light-bg-color, 0.2);
-      &:hover {
-        background-color: rgba($light-bg-color, 0.4);
-      }
-      &:not(:last-child) {
-        border-bottom: 1px solid $light-bg-color;
-      }
-    }
-  }
-
-}
-
-ul {
-  margin: 0;
-  padding: 0;
-}

app/assets/stylesheets/app/_footer.scss

@@ -21,12 +21,6 @@
     z-index: 1000;
     margin-top: 15px;
     background-color: white;
-
-    .close-button {
-      &:hover {
-        text-decoration: none;
-      }
-    }
   }
 
 }
@@ -43,58 +37,8 @@ a.disabled {
   pointer-events: none;
 }
 
-
 .icon.ion-locked {
   margin-left: 5px;
   border-left: 1px solid gray;
   padding-left: 8px;
 }
-
-
-
-
-/* Global Ext Menu */
-
-.ext-section {
-
-  min-height: 50px;
-
-  h1 {
-    margin: 0;
-    padding: 0;
-    padding-top: 5px;
-  }
-
-  &.opened {
-    h1 {
-      padding-top: 0px;
-      // padding-bottom: 6px;
-    }
-  }
-}
-
-.room-iframe {
-  width: 100%;
-  height: 100%;
-}
-
-
-
-// .spinner {
-//   height: 10px;
-//   width: 10px;
-//   animation: rotate 0.8s infinite linear;
-//   border: 1px solid #515263;
-//   border-right-color: transparent;
-//   border-radius: 50%;
-//
-//   &.tinted {
-//     border: 1px solid $blue-color;
-//     border-right-color: transparent;
-//   }
-// }
-//
-// @keyframes rotate {
-//   0%    { transform: rotate(0deg); }
-//   100%  { transform: rotate(360deg); }
-// }

app/assets/stylesheets/app/_main.scss

@@ -22,7 +22,15 @@ body {
 }
 
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.tinted {
+  color: $blue-color;
+}
+
+.tinted-selected {
+  color: white;
 }
 
 *:focus {outline:0;}
@@ -37,51 +45,6 @@ input, button, select, textarea {
   line-height: inherit;
 }
 
-.tinted {
-  color: $blue-color;
-}
-
-.tinted-selected {
-  color: white;
-}
-
-.tinted-box {
-  background-color: $blue-color;
-  color: white;
-  border-radius: 4px;
-  padding: 16px 20px;
-
-  button {
-   background-color: white;
-   color: $blue-color;
-   border-radius: 3px;
-   font-weight: bold;
-   padding: 6px 20px;
-   width: 100%;
-   &:hover {
-     text-decoration: underline;
-   }
-  }
-}
-
-.dark-button {
-  background-color: #2e2e2e;
-  border: 0;
-  padding: 6px 18px;
-  font-size: 16px;
-  cursor: pointer;
-  color: #fff;
-  border-radius: 2px;
-  border: 1px solid transparent;
-  -webkit-appearance: none;
-  -webkit-font-smoothing: antialiased;
-  -webkit-tap-highlight-color: transparent;
-
-  &:hover {
-    background-color: black;
-  }
-}
-
 a {
   color: $blue-color;
   text-decoration: none;
@@ -120,21 +83,6 @@ $footer-height: 32px;
   overflow: hidden;
   position: relative;
 
-  .light-button {
-    background-color: $bg-color;
-    font-weight: bold;
-    color: $main-text-color;
-    font-size: 16px;
-    text-align: center;
-    height: 35px;
-    border-radius: 4px;
-    padding-top: 6px;
-
-    &:hover {
-      background-color: #cdcdcd;
-    }
-  }
-
   panel-resizer {
     top: 0;
     right: 0;

app/assets/stylesheets/app/_menus.scss

@@ -5,19 +5,16 @@
 }
 
 .dropdown-menu {
-    position: absolute;
+  position: absolute;
-    top: 100%;
+  top: 100%;
-    left: 0;
+  left: 0;
-    float: left;
+  float: left;
-    min-width: 160px;
+  min-width: 160px;
-    z-index: 100;
+  z-index: 100;
 
-    margin-top: 5px;
+  margin-top: 5px;
-
+  width: 280px;
-    width: 280px;
+  max-height: calc(85vh - 90px);
-
+  background-color: white;
-    max-height: calc(85vh - 90px);
+  color: $selected-text-color;
-
-    background-color: white;
-    color: $selected-text-color;
 }

app/assets/stylesheets/app/_modals.scss

@@ -37,6 +37,20 @@
   align-items: center;
   justify-content: center;
 
+  .sn-component {
+    height: 100%;
+    .panel {
+      height: 100%;
+    }
+  }
+
+  &.medium {
+    > .content {
+      width: 700px;
+      height: 500px;
+    }
+  }
+
   .background {
     position: absolute;
     z-index: -1;

app/assets/stylesheets/app/_standard.scss

@@ -1,48 +0,0 @@
-.mt-5 {
-  margin-top: 5px !important;
-}
-
-.mt-10 {
-  margin-top: 10px !important;
-}
-
-.faded {
-  opacity: 0.5;
-}
-
-.center-align {
-  text-align: center !important;
-}
-
-.block {
-  display: block !important;
-}
-
-.wrap {
-  word-wrap: break-word;
-  word-break: break-all;
-}
-
-.medium-padding {
-  padding: 10px !important;
-}
-
-.red {
-  color: red !important;
-}
-
-.bold {
-  font-weight: bold !important;
-}
-
-.normal {
-  font-weight: normal !important;
-}
-
-.small {
-  font-size: 10px;
-}
-
-.medium {
-  font-size: 14px !important;
-}

app/assets/stylesheets/app/_stylekit-sub.scss

@@ -1,6 +1,18 @@
+.sn-component {
+
+}
+
 .panel {
   color: black;
 
+  .header {
+    .close-button {
+      &:hover {
+        text-decoration: none;
+      }
+    }
+  }
+
   input {
     min-height: 39px;
   }

app/assets/stylesheets/app/_ui.scss

@@ -56,3 +56,57 @@ $screen-md-max:              ($screen-lg-min - 1) !default;
     @content;
   }
 }
+
+.selectable {
+  user-select: text !important;
+  cursor: text;
+}
+
+.mt-5 {
+  margin-top: 5px !important;
+}
+
+.mt-10 {
+  margin-top: 10px !important;
+}
+
+.faded {
+  opacity: 0.5;
+}
+
+.center-align {
+  text-align: center !important;
+}
+
+.block {
+  display: block !important;
+}
+
+.wrap {
+  word-wrap: break-word;
+  word-break: break-all;
+}
+
+.medium-padding {
+  padding: 10px !important;
+}
+
+.red {
+  color: red !important;
+}
+
+.bold {
+  font-weight: bold !important;
+}
+
+.normal {
+  font-weight: normal !important;
+}
+
+.small {
+  font-size: 10px;
+}
+
+.medium {
+  font-size: 14px !important;
+}

app/assets/stylesheets/frontend.css.scss

@@ -1,13 +1,9 @@
-$dark-gray: #2e2e2e;
-
-@import "app/standard";
 @import "app/main";
 @import "app/ui";
 @import "app/footer";
 @import "app/tags";
 @import "app/notes";
 @import "app/editor";
-@import "app/extensions";
 @import "app/menus";
 @import "app/modals";
 @import "app/lock-screen";

app/assets/templates/frontend/directives/actions-menu.html.haml

@@ -4,33 +4,29 @@
     %a.no-decoration{"ng-if" => "extensions.length == 0", "href" => "https://standardnotes.org/extensions", "target" => "blank"}
       %menu-row{"title" => "'Download Actions'"}
 
-    .section{"ng-repeat" => "extension in extensions"}
+    %div{"ng-repeat" => "extension in extensions"}
       .header{"ng-click" => "extension.hide = !extension.hide; $event.stopPropagation();"}
         .column
           %h4.title {{extension.name}}
-          .subtitle
-            Will submit your note
-            %strong {{accessTypeForExtension(extension)}}
           .spinner.small.loading{"ng-if" => "extension.loading"}
           %div{"ng-if" => "extension.hide"} …
 
-      %menu-row{"ng-if" => "!extension.hide", "ng-repeat" => "action in extension.actionsWithContextForItem(item)", "ng-click" => "executeAction(action, extension); $event.stopPropagation();",
+      %menu-row{"ng-if" => "!extension.hide", "ng-repeat" => "action in extension.actionsWithContextForItem(item)",
-      "ng-class" => "{'faded' : !isActionEnabled(action, extension)}", "title" => "action.label", "subtitle" => "action.desc"}
+      "ng-click" => "executeAction(action, extension); $event.stopPropagation();", "title" => "action.label", "subtitle" => "action.desc",
-        .small.normal{"ng-if" => "!isActionEnabled(action, extension)"}
+      "spinner-class" => "action.running ? 'info' : null", "sub-rows" => "action.subrows"}
-          Requires {{action.access_type}} access to this note.
+        .sublabel{"ng-if" => "action.access_type"}
+          Uses
+          %strong {{action.access_type}}
+          access to this note.
 
-        %div{"ng-if" => "action.showNestedActions"}
-          %ul.mt-10
-            %li.menu-item.white-bg.nested-hover{"ng-repeat" => "subaction in action.subactions", "ng-click" => "executeAction(subaction, extension, action); $event.stopPropagation();", "style" => "margin-top: -1px;"}
-              %label.menu-item-title {{subaction.label}}
-              .menu-item-subtitle {{subaction.desc}}
-              %span{"ng-if" => "subaction.running"}
-                .spinner.small{"style" => "margin-top: 3px;"}
 
-        %span{"ng-if" => "action.running"}
+.modal.medium{"ng-if" => "renderData.showRenderModal", "ng-click" => "$event.stopPropagation();"}
-          .spinner.small{"style" => "margin-top: 3px;"}
+  .content
-
+    .sn-component
-  .extension-render-modal{"ng-if" => "renderData.showRenderModal", "ng-click" => "renderData.showRenderModal = false"}
+      .panel
-    .content
+        .header
-      %h2 {{renderData.title}}
+          %h1.title Preview
-      %p.normal{"style" => "white-space: pre-wrap; font-family: monospace; font-size: 16px;"} {{renderData.text}}
+          %a.close-button.info{"ng-click" => "renderData.showRenderModal = false; $event.stopPropagation();"} Close
+        .content.selectable
+          %h2 {{renderData.title}}
+          %p.normal{"style" => "white-space: pre-wrap; font-family: monospace; font-size: 16px;"} {{renderData.text}}

app/assets/templates/frontend/directives/editor-menu.html.haml

@@ -9,7 +9,7 @@
       "circle" => "selectedEditor === editor && 'success'",
        "has-button" => "selectedEditor == editor || defaultEditor == editor", "button-text" => "defaultEditor == editor ? 'Undefault' : 'Set Default'",
        "button-action" => "toggleDefaultForEditor(editor)", "button-class" => "defaultEditor == editor ? 'warning' : 'info'"}
-        .row
+        .row{"ng-if" => "component.conflict_of || offlineAvailableForComponent(editor)"}
           .column
             %strong.red.medium{"ng-if" => "editor.conflict_of"} Conflicted copy
             .sublabel{"ng-if" => "offlineAvailableForComponent(editor)"}
@@ -22,8 +22,8 @@
         %h4.title Editor Stack
       %menu-row{"ng-repeat" => "component in stack", "ng-click" => "selectComponent($event, component)", "title" => "component.name",
       "circle" => "component.active ? 'success' : 'danger'"}
-        .row
+        .row{"ng-if" => "component.conflict_of || offlineAvailableForComponent(component)"}
           .column
             %strong.red.medium{"ng-if" => "component.conflict_of"} Conflicted copy
-            .sublabel{"ng-if" => "component.local_url"}
+            .sublabel{"ng-if" => "offlineAvailableForComponent(component)"}
               Available Offline

app/assets/templates/frontend/directives/menu-row.html.haml

@@ -9,6 +9,13 @@
         .sublabel{"ng-if" => "subtitle"}
           {{subtitle}}
         %ng-transclude
+    .subrows{"ng-if" => "subRows && subRows.length > 0"}
+      %menu-row{"ng-repeat" => "row in subRows", "ng-click" => "row.onClick($event); $event.stopPropagation();",
+      "title" => "row.title", "subtitle" => "row.subtitle", "spinner-class" => "row.spinnerClass"}
+
   .column{"ng-if" => "hasButton"}
     .button.info{"ng-click" => "clickButton($event)", "ng-class" => "buttonClass"}
       {{buttonText}}
+
+  .column{"ng-if" => "spinnerClass"}
+    .spinner.small{"ng-class" => "spinnerClass"}

app/assets/templates/frontend/footer.html.haml

@@ -28,7 +28,7 @@
     .right
 
       .item{"ng-if" => "ctrl.newUpdateAvailable", "ng-click" => "ctrl.clickedNewUpdateAnnouncement()"}
-        %span.tinted.normal New update downloaded. Installs on app restart.
+        %span.info.normal New update downloaded. Installs on app restart.
 
       .item.no-pointer{"ng-if" => "ctrl.lastSyncDate && !ctrl.isRefreshing"}
         .label.subtle

app/assets/templates/frontend/notes.html.haml

@@ -48,7 +48,7 @@
           %strong.red.medium{"ng-if" => "note.errorDecrypting"} Error decrypting
 
           .pinned.tinted{"ng-if" => "note.pinned", "ng-class" => "{'tinted-selected' : ctrl.selectedNote == note}"}
-            %i.icon.ion-ios-flag
+            %i.icon.ion-bookmark
             %strong.medium Pinned
 
           .archived.tinted{"ng-if" => "note.archived && !ctrl.tag.archiveTag", "ng-class" => "{'tinted-selected' : ctrl.selectedNote == note}"}

package-lock.json

@@ -5781,9 +5781,10 @@
       "dev": true
     },
     "sn-stylekit": {
-      "version": "1.0.115",
+      "version": "1.0.1191",
-      "resolved": "https://registry.npmjs.org/sn-stylekit/-/sn-stylekit-1.0.115.tgz",
+      "resolved": "https://registry.npmjs.org/sn-stylekit/-/sn-stylekit-1.0.1191.tgz",
-      "integrity": "sha512-NsOS+sJoLBexantCSU/kwFWoRquAVDWs/+lxPQ1UHhEFh2Gj8G7q3omZmmbesTnHvL0vf+XK55Ne8sr50ZWJag=="
+      "integrity": "sha512-Xez1FNz822zw7NsG9krfxiSXklYZQNwQRSaTbxnYXmOjqCvcsGiWAgEyUzSo5p3g2nVIC/8LzKIrQw4/b3ORXw==",
+      "dev": true
     },
     "snake-case": {
       "version": "https://registry.npmjs.org/snake-case/-/snake-case-2.1.0.tgz",

package.json

@@ -32,10 +32,8 @@
     "karma": "^1.4.0",
     "karma-cli": "^1.0.1",
     "karma-jasmine": "^1.1.0",
-    "karma-phantomjs-launcher": "^1.0.2"
+    "karma-phantomjs-launcher": "^1.0.2",
+    "sn-stylekit": "^1.0.1191"
   },
-  "license": "GPL-3.0",
+  "license": "GPL-3.0"
-  "dependencies": {
-    "sn-stylekit": "^1.0.115"
-  }
 }