From 2f20e92af1d248c31e222957b77f6b33d3b48204 Mon Sep 17 00:00:00 2001
From: Mo Bitar <me@bitar.io>
Date: Mon, 17 Dec 2018 09:52:25 -0600
Subject: [PATCH] Fixes issue with components in revision preview not iframe
 loading, misc css/html updates

---
 .../javascripts/app/controllers/editor.js     |  4 ++-
 .../javascripts/app/controllers/home.js       |  6 ++--
 .../app/directives/views/componentView.js     | 14 +++++---
 .../directives/views/revisionPreviewModal.js  | 35 +++++++++---------
 .../app/services/componentManager.js          | 36 ++++++++++++-------
 app/assets/stylesheets/app/_editor.scss       |  4 +--
 app/assets/stylesheets/app/_main.scss         |  7 ++--
 app/assets/stylesheets/app/_notes.scss        |  2 ++
 app/assets/stylesheets/app/_tags.scss         |  5 ++-
 .../directives/input-modal.html.haml          |  6 ++--
 .../privileges-auth-modal.html.haml           |  2 +-
 app/assets/templates/tags.html.haml           |  3 +-
 12 files changed, 73 insertions(+), 51 deletions(-)

diff --git a/app/assets/javascripts/app/controllers/editor.js b/app/assets/javascripts/app/controllers/editor.js
index 61284ea0f..9aa1c96ae 100644
--- a/app/assets/javascripts/app/controllers/editor.js
+++ b/app/assets/javascripts/app/controllers/editor.js
@@ -613,7 +613,9 @@ angular.module('app')
         this.reloadComponentContext();
       }
     }, contextRequestHandler: (component) => {
-      return this.note;
+      if(component == this.selectedEditor || this.componentStack.includes(component)) {
+        return this.note;
+      }
     }, focusHandler: (component, focused) => {
       if(component.isEditor() && focused) {
         this.closeAllMenus();
diff --git a/app/assets/javascripts/app/controllers/home.js b/app/assets/javascripts/app/controllers/home.js
index 2581f72cc..0c155635f 100644
--- a/app/assets/javascripts/app/controllers/home.js
+++ b/app/assets/javascripts/app/controllers/home.js
@@ -208,7 +208,7 @@ angular.module('app')
         modelManager.setItemToBeDeleted(tag);
         syncManager.sync().then(() => {
           // force scope tags to update on sub directives
-          $scope.safeApply();
+          $rootScope.safeApply();
         });
       }
     }
@@ -230,7 +230,7 @@ angular.module('app')
     Shared Callbacks
     */
 
-    $scope.safeApply = function(fn) {
+    $rootScope.safeApply = function(fn) {
       var phase = this.$root.$$phase;
       if(phase == '$apply' || phase == '$digest')
         this.$eval(fn);
@@ -262,7 +262,7 @@ angular.module('app')
           // when deleting items while ofline, we need to explictly tell angular to refresh UI
           setTimeout(function () {
             $rootScope.notifyDelete();
-            $scope.safeApply();
+            $rootScope.safeApply();
           }, 50);
         } else {
           $timeout(() => {
diff --git a/app/assets/javascripts/app/directives/views/componentView.js b/app/assets/javascripts/app/directives/views/componentView.js
index d73dc8476..03a06b6e9 100644
--- a/app/assets/javascripts/app/directives/views/componentView.js
+++ b/app/assets/javascripts/app/directives/views/componentView.js
@@ -94,7 +94,6 @@ class ComponentView {
           }
         }, 3500);
         iframe.onload = (event) => {
-          // console.log("iframe loaded for component", component.name, "cancelling load timeout", $scope.loadTimeout);
           $timeout.cancel($scope.loadTimeout);
           componentManager.registerComponentWindow(component, iframe.contentWindow);
 
@@ -141,7 +140,11 @@ class ComponentView {
 
     $scope.reloadComponent = function() {
       console.log("Reloading component", $scope.component);
-      componentManager.reloadComponent($scope.component);
+      // force iFrame to deinit, allows new one to be created
+      $scope.componentValid = false;
+      componentManager.reloadComponent($scope.component).then(() => {
+        $scope.reloadStatus();
+      });
     }
 
     $scope.reloadStatus = function(doManualReload = true) {
@@ -160,7 +163,11 @@ class ComponentView {
 
       $scope.expired = component.valid_until && component.valid_until <= new Date();
 
-      component.readonly = $scope.expired;
+      // Here we choose our own readonly state based on custom logic. However, if a parent
+      // wants to implement their own readonly logic, they can lock it.
+      if(!component.lockReadonly) {
+        component.readonly = $scope.expired;
+      }
 
       $scope.componentValid = !offlineRestricted && !urlError;
 
@@ -234,7 +241,6 @@ class ComponentView {
     }
 
     $scope.$on("$destroy", function() {
-      // console.log("Deregistering handler", $scope.identifier, $scope.component.name);
       $scope.destroy();
     });
   }
diff --git a/app/assets/javascripts/app/directives/views/revisionPreviewModal.js b/app/assets/javascripts/app/directives/views/revisionPreviewModal.js
index 534189f8c..70891f354 100644
--- a/app/assets/javascripts/app/directives/views/revisionPreviewModal.js
+++ b/app/assets/javascripts/app/directives/views/revisionPreviewModal.js
@@ -13,7 +13,7 @@ class RevisionPreviewModal {
     $scope.el = el;
   }
 
-  controller($scope, modelManager, syncManager, componentManager) {
+  controller($scope, modelManager, syncManager, componentManager, $timeout) {
     'ngInject';
 
     $scope.dismiss = function() {
@@ -31,29 +31,32 @@ class RevisionPreviewModal {
     // Set UUID to editoForNote can find proper editor,
     // but then generate new uuid for note as not to save changes to original, if editor makes changes.
     $scope.note.uuid = $scope.uuid;
-    let editor = componentManager.editorForNote($scope.note);
+    let editorForNote = componentManager.editorForNote($scope.note);
     $scope.note.uuid = SFJS.crypto.generateUUIDSync();
 
-    if(editor) {
+    if(editorForNote) {
       // Create temporary copy, as a lot of componentManager is uuid based,
       // so might interfere with active editor. Be sure to copy only the content, as the
       // top level editor object has non-copyable properties like .window, which cannot be transfered
-      $scope.editor = new SNComponent({content: editor.content});
-      $scope.editor.readonly = true;
-      $scope.identifier = $scope.editor.uuid;
+      let editorCopy = new SNComponent({content: editorForNote.content});
+      editorCopy.readonly = true;
+      editorCopy.lockReadonly = true;
+      $scope.identifier = editorCopy.uuid;
 
       componentManager.registerHandler({identifier: $scope.identifier, areas: ["editor-editor"],
-      contextRequestHandler: (component) => {
-        if(component == $scope.editor) {
-          return $scope.note;
+        contextRequestHandler: (component) => {
+          if(component == $scope.editor) {
+            return $scope.note;
+          }
+        },
+        componentForSessionKeyHandler: (key) => {
+          if(key == $scope.editor.sessionKey) {
+            return $scope.editor;
+          }
         }
-      },
-      componentForSessionKeyHandler: (key) => {
-        if(key == $scope.editor.sessionKey) {
-          return $scope.editor;
-        }
-      }
-    });
+      });
+
+      $scope.editor = editorCopy;
     }
 
 
diff --git a/app/assets/javascripts/app/services/componentManager.js b/app/assets/javascripts/app/services/componentManager.js
index a62a92fe7..045ceb93a 100644
--- a/app/assets/javascripts/app/services/componentManager.js
+++ b/app/assets/javascripts/app/services/componentManager.js
@@ -299,6 +299,9 @@ class ComponentManager {
       for(let handler of this.handlers) {
         if(handler.componentForSessionKeyHandler) {
           component = handler.componentForSessionKeyHandler(key);
+          if(component) {
+            break;
+          }
         }
       }
     }
@@ -881,25 +884,29 @@ class ComponentManager {
   }
 
   /* Performs func in timeout, but syncronously, if used `await waitTimeout` */
-  async waitTimeout(func) {
-    return new Promise((resolve, reject) => {
-      this.timeout(() => {
-        func();
-        resolve();
-      });
-    })
-  }
+  // No longer used. See comment in activateComponent.
+  // async waitTimeout(func) {
+  //   return new Promise((resolve, reject) => {
+  //     this.timeout(() => {
+  //       func();
+  //       resolve();
+  //     });
+  //   })
+  // }
 
 
   async activateComponent(component, dontSync = false) {
     var didChange = component.active != true;
 
     component.active = true;
-    for(var handler of this.handlers) {
+    for(let handler of this.handlers) {
       if(handler.areas.includes(component.area) || handler.areas.includes("*")) {
         // We want to run the handler in a $timeout so the UI updates, but we also don't want it to run asyncronously
         // so that the steps below this one are run before the handler. So we run in a waitTimeout.
-        await this.waitTimeout(() => {
+        // Update 12/18: We were using this.waitTimeout previously, however, that caused the iframe.onload callback to never be called
+        // for some reason for iframes on desktop inside the revision-preview-modal. So we'll use safeApply instead. I'm not quite sure
+        // where the original "so the UI updates" comment applies to, but we'll have to keep an eye out to see if this causes problems somewhere else.
+        this.$rootScope.safeApply(() => {
           handler.activationHandler && handler.activationHandler(component);
         })
       }
@@ -926,7 +933,8 @@ class ComponentManager {
 
     for(let handler of this.handlers) {
       if(handler.areas.includes(component.area) || handler.areas.includes("*")) {
-        await this.waitTimeout(() => {
+        // See comment in activateComponent regarding safeApply and awaitTimeout
+        this.$rootScope.safeApply(() => {
           handler.activationHandler && handler.activationHandler(component);
         })
       }
@@ -960,7 +968,8 @@ class ComponentManager {
 
     for(let handler of this.handlers) {
       if(handler.areas.includes(component.area) || handler.areas.includes("*")) {
-        await this.waitTimeout(() => {
+        // See comment in activateComponent regarding safeApply and awaitTimeout
+        this.$rootScope.safeApply(() => {
           handler.activationHandler && handler.activationHandler(component);
         })
       }
@@ -986,7 +995,8 @@ class ComponentManager {
       component.active = true;
       for(var handler of this.handlers) {
         if(handler.areas.includes(component.area) || handler.areas.includes("*")) {
-          await this.waitTimeout(() => {
+          // See comment in activateComponent regarding safeApply and awaitTimeout
+          this.$rootScope.safeApply(() => {
             handler.activationHandler && handler.activationHandler(component);
           })
         }
diff --git a/app/assets/stylesheets/app/_editor.scss b/app/assets/stylesheets/app/_editor.scss
index 66ffa9678..bdf91317f 100644
--- a/app/assets/stylesheets/app/_editor.scss
+++ b/app/assets/stylesheets/app/_editor.scss
@@ -29,7 +29,7 @@ $heading-height: 75px;
   overflow: visible;
 
   > .title {
-    font-size: 18px;
+    font-size: var(--sn-stylekit-font-size-h1);
     font-weight: bold;
     padding-top: 0px;
     width: 100%;
@@ -58,7 +58,7 @@ $heading-height: 75px;
     position: absolute;
 
     right: 20px;
-    font-size: 12px;
+    font-size: var(--sn-stylekit-font-size-h5);
     text-transform: none;
     font-weight: normal;
     margin-top: 4px;
diff --git a/app/assets/stylesheets/app/_main.scss b/app/assets/stylesheets/app/_main.scss
index 3209ae1d0..514b8843a 100644
--- a/app/assets/stylesheets/app/_main.scss
+++ b/app/assets/stylesheets/app/_main.scss
@@ -22,7 +22,7 @@ body {
   -webkit-font-smoothing: antialiased;
   min-height: 100%;
   height: 100%;
-  font-size: 14px;
+  font-size: var(--sn-stylekit-base-font-size);
   margin: 0;
   color: var(--sn-stylekit-foreground-color);
   background-color: var(--sn-stylekit-background-color);
@@ -172,7 +172,6 @@ $footer-height: 32px;
     padding-bottom: 0px;
     height: 100%;
     max-height: calc(100vh - #{$footer-height});
-    font-size: 17px;
     position: relative;
     overflow: hidden;
 
@@ -190,7 +189,6 @@ $footer-height: 32px;
 
     .section-title-bar {
      font-weight: bold;
-     font-size: 14px;
 
      .padded {
        padding: 0 14px;
@@ -200,7 +198,8 @@ $footer-height: 32px;
        display: flex;
        justify-content: space-between;
        align-items: center;
-       overflow: hidden;
+       // This was causing problems with tags + button cutting off on right when the panel is a certain size
+       // overflow: hidden;
 
        > .title {
          white-space: nowrap;
diff --git a/app/assets/stylesheets/app/_notes.scss b/app/assets/stylesheets/app/_notes.scss
index 06adfc630..5e6a549cc 100644
--- a/app/assets/stylesheets/app/_notes.scss
+++ b/app/assets/stylesheets/app/_notes.scss
@@ -2,6 +2,8 @@
   border-left: 1px solid var(--sn-stylekit-border-color);
   border-right: 1px solid var(--sn-stylekit-border-color);
 
+  font-size: var(--sn-stylekit-font-size-h2);
+
   width: 350px;
   flex-grow: 0;
   user-select: none;
diff --git a/app/assets/stylesheets/app/_tags.scss b/app/assets/stylesheets/app/_tags.scss
index c23d15108..8049e4b88 100644
--- a/app/assets/stylesheets/app/_tags.scss
+++ b/app/assets/stylesheets/app/_tags.scss
@@ -13,8 +13,8 @@
 
   #tags-title-bar {
     color: var(--sn-stylekit-secondary-foreground-color);
-    padding-top: 14px;
-    padding-bottom: 16px;
+    padding-top: 15px;
+    padding-bottom: 8px;
     padding-left: 12px;
     padding-right: 12px;
     font-size: 12px;
@@ -43,7 +43,6 @@
     cursor: pointer;
     transition: height .1s ease-in-out;
     position: relative;
-    font-size: 14px;
 
     > .info {
       height: 20px;
diff --git a/app/assets/templates/directives/input-modal.html.haml b/app/assets/templates/directives/input-modal.html.haml
index 716e7a4eb..66d36f10e 100644
--- a/app/assets/templates/directives/input-modal.html.haml
+++ b/app/assets/templates/directives/input-modal.html.haml
@@ -5,15 +5,15 @@
       .sn-component
         .sk-panel
           .sk-panel-header
-            %h1.sk-panel-header-title {{title}}
+            .sk-h1.sk-panel-header-title {{title}}
             %a.sk-a.info.close-button{"ng-click" => "dismiss()"} Close
           .sk-panel-content
             .sk-panel-section
-              %p.sk-panel-row {{message}}
+              .sk-p.sk-panel-row {{message}}
               .sk-panel-row
                 .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"}
+                    %input.sk-input.contrast{:type => '{{type}}', "ng-model" => "formData.input", "placeholder" => "{{placeholder}}", "sn-autofocus" => "true", "should-focus" => "true"}
 
           .sk-panel-footer
             %a.sk-a.info.right{"ng-click" => "submit()"}
diff --git a/app/assets/templates/directives/privileges-auth-modal.html.haml b/app/assets/templates/directives/privileges-auth-modal.html.haml
index c48f6a9d2..95d41c9a5 100644
--- a/app/assets/templates/directives/privileges-auth-modal.html.haml
+++ b/app/assets/templates/directives/privileges-auth-modal.html.haml
@@ -21,7 +21,7 @@
             .sk-horizontal-group
               .sk-p.sk-bold Remember For
               %a.sk-a.info{"ng-repeat" => "option in sessionLengthOptions", "ng-click" => "selectSessionLength(option.value)",
-              "ng-class" => "{'info boxed' : option.value == selectedSessionLength}"}
+              "ng-class" => "{'boxed' : option.value == selectedSessionLength}"}
                 {{option.label}}
 
       .sk-panel-footer.extra-padding
diff --git a/app/assets/templates/tags.html.haml b/app/assets/templates/tags.html.haml
index 1df7a327f..0af5c93b6 100644
--- a/app/assets/templates/tags.html.haml
+++ b/app/assets/templates/tags.html.haml
@@ -6,7 +6,8 @@
   #tags-content.content{"ng-if" => "!(ctrl.component && ctrl.component.active)"}
     #tags-title-bar.section-title-bar
       .section-title-bar-header
-        .title Tags
+        .sk-h3.title
+          %span.sk-bold Tags
         .sk-button.sk-secondary-contrast.wide{"ng-click" => "ctrl.clickedAddNewTag()", "title" => "Create a new tag"}
           .sk-label +