From 518b364cdd9ab4506eafa907e2845c745585d838 Mon Sep 17 00:00:00 2001
From: Mo Bitar <me@bitar.io>
Date: Thu, 1 Nov 2018 12:36:02 -0500
Subject: [PATCH] Flash panel resizers when enabled

---
 .../javascripts/app/controllers/editor.js     | 12 ++++++++---
 .../app/directives/views/panelResizer.js      | 11 ++++++++++
 app/assets/stylesheets/app/_main.scss         | 20 +++++++++++++++++++
 app/assets/templates/editor.html.haml         |  4 ++--
 4 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/app/controllers/editor.js b/app/assets/javascripts/app/controllers/editor.js
index ccb986609..be01e789e 100644
--- a/app/assets/javascripts/app/controllers/editor.js
+++ b/app/assets/javascripts/app/controllers/editor.js
@@ -475,7 +475,8 @@ angular.module('app')
 
     /* Resizability */
 
-    this.resizeControl = {};
+    this.leftResizeControl = {};
+    this.rightResizeControl = {};
 
     this.onPanelResizeFinish = function(width, left, isMaxWidth) {
       if(isMaxWidth) {
@@ -511,12 +512,12 @@ angular.module('app')
       if(this.marginResizersEnabled) {
         let width = authManager.getUserPrefValue("editorWidth", null);
         if(width !== null) {
-          this.resizeControl.setWidth(width);
+          this.leftResizeControl.setWidth(width);
         }
 
         let left = authManager.getUserPrefValue("editorLeft", null);
         if(left !== null) {
-          this.resizeControl.setLeft(left);
+          this.leftResizeControl.setLeft(left);
         }
       }
     }
@@ -553,6 +554,11 @@ angular.module('app')
             this.reloadFont();
           })
         }, 0)
+      } else if(key == "marginResizersEnabled" && this[key] == true) {
+        $timeout(() => {
+          this.leftResizeControl.flash();
+          this.rightResizeControl.flash();
+        })
       }
     }
 
diff --git a/app/assets/javascripts/app/directives/views/panelResizer.js b/app/assets/javascripts/app/directives/views/panelResizer.js
index cd54836c6..fc31c0ca6 100644
--- a/app/assets/javascripts/app/directives/views/panelResizer.js
+++ b/app/assets/javascripts/app/directives/views/panelResizer.js
@@ -28,6 +28,10 @@ class PanelResizer {
     scope.control.setLeft = function(value) {
       scope.setLeft(value);
     }
+
+    scope.control.flash = function() {
+      scope.flash();
+    }
   }
 
   controller($scope, $element, modelManager, actionsManager, $timeout, $compile) {
@@ -171,6 +175,13 @@ class PanelResizer {
       }
     }
 
+    $scope.flash = function() {
+      resizerColumn.classList.add("animate-opacity");
+      $timeout(() => {
+        resizerColumn.classList.remove("animate-opacity");
+      }, 3000)
+    }
+
     resizerColumn.addEventListener("mousedown", function(event){
       $scope.addInvisibleOverlay();
 
diff --git a/app/assets/stylesheets/app/_main.scss b/app/assets/stylesheets/app/_main.scss
index d915c5e71..c4f412b3b 100644
--- a/app/assets/stylesheets/app/_main.scss
+++ b/app/assets/stylesheets/app/_main.scss
@@ -120,6 +120,20 @@ $footer-height: 32px;
     border-top: none;
     border-bottom: none;
 
+    @keyframes fade {
+      0% {
+        opacity: 0;
+      }
+
+      50% {
+        opacity: 1;
+      }
+
+      100% {
+        opacity: 0;
+      }
+    }
+
     &.left {
       left: 0;
       right: none;
@@ -138,6 +152,12 @@ $footer-height: 32px;
       opacity: 1;
     }
 
+    &.animate-opacity {
+      animation-duration: 1.6s;
+      animation-name: fade;
+      animation-delay: 0.25s;
+    }
+
     &.hoverable {
       &:hover {
         opacity: 1;
diff --git a/app/assets/templates/editor.html.haml b/app/assets/templates/editor.html.haml
index 7cf546035..d78f5eca9 100644
--- a/app/assets/templates/editor.html.haml
+++ b/app/assets/templates/editor.html.haml
@@ -64,7 +64,7 @@
 
   .editor-content#editor-content{"ng-if" => "ctrl.noteReady && !ctrl.note.errorDecrypting"}
 
-    %panel-resizer.left{"ng-if" => "ctrl.marginResizersEnabled", "panel-id" => "'editor-content'", "on-resize-finish" => "ctrl.onPanelResizeFinish","control" => "ctrl.resizeControl", "min-width" => 300, "property" => "'left'", "hoverable" => "true"}
+    %panel-resizer.left{"ng-if" => "ctrl.marginResizersEnabled", "panel-id" => "'editor-content'", "on-resize-finish" => "ctrl.onPanelResizeFinish","control" => "ctrl.leftResizeControl", "min-width" => 300, "property" => "'left'", "hoverable" => "true"}
 
     %component-view.component-view{"ng-if" => "ctrl.selectedEditor", "component" => "ctrl.selectedEditor"}
 
@@ -73,7 +73,7 @@
      "ng-focus" => "ctrl.onContentFocus()", "dir" => "auto", "ng-attr-spellcheck" => "{{ctrl.spellcheck}}", "ng-model-options"=>"{ debounce: 200 }"}
       {{ctrl.onSystemEditorLoad()}}
 
-    %panel-resizer{"ng-if" => "ctrl.marginResizersEnabled", "panel-id" => "'editor-content'", "on-resize-finish" => "ctrl.onPanelResizeFinish","control" => "ctrl.resizeControl", "min-width" => 300, "hoverable" => "true", "property" => "'right'"}
+    %panel-resizer{"ng-if" => "ctrl.marginResizersEnabled", "panel-id" => "'editor-content'", "on-resize-finish" => "ctrl.onPanelResizeFinish", "control" => "ctrl.rightResizeControl", "min-width" => 300, "hoverable" => "true", "property" => "'right'"}
 
   .section{"ng-if" => "ctrl.note.errorDecrypting"}
     %p.medium-padding{"style" => "padding-top: 0 !important;"} There was an error decrypting this item. Ensure you are running the latest version of this app, then sign out and sign back in to try again.