From 92b0dd7db083a44144641733b4e2f0f98f6f9747 Mon Sep 17 00:00:00 2001
From: Mo Bitar <me@bitar.io>
Date: Tue, 27 Feb 2018 14:29:40 -0600
Subject: [PATCH] Autohide tags and notes scrollbar

---
 app/assets/stylesheets/app/_notes.scss |  8 ++++++
 app/assets/stylesheets/app/_tags.scss  |  7 +++++
 app/assets/templates/tags.html.haml    | 39 +++++++++++++-------------
 3 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/app/assets/stylesheets/app/_notes.scss b/app/assets/stylesheets/app/_notes.scss
index 45e6cd0f0..c4e05442c 100644
--- a/app/assets/stylesheets/app/_notes.scss
+++ b/app/assets/stylesheets/app/_notes.scss
@@ -85,6 +85,14 @@
   .infinite-scroll {
     overflow-x: hidden;
     height: inherit;
+
+    // Autohide scrollbar on Windows.
+    // Unfortunately must affect every platform since no way to hide just for Windows.
+    overflow-y: hidden;
+    &:hover {
+      overflow-y: scroll;
+    }
+
   }
 
   .note {
diff --git a/app/assets/stylesheets/app/_tags.scss b/app/assets/stylesheets/app/_tags.scss
index 5285e9c91..b46136761 100644
--- a/app/assets/stylesheets/app/_tags.scss
+++ b/app/assets/stylesheets/app/_tags.scss
@@ -36,6 +36,13 @@
   .infinite-scroll {
     overflow-x: hidden;
     height: inherit;
+
+    // Autohide scrollbar on Windows. 
+    // Unfortunately must affect every platform since no way to hide just for Windows.
+    overflow-y: hidden;
+    &:hover {
+      overflow-y: scroll;
+    }
   }
 
   .tag {
diff --git a/app/assets/templates/tags.html.haml b/app/assets/templates/tags.html.haml
index f99e9bfba..8bb32cced 100644
--- a/app/assets/templates/tags.html.haml
+++ b/app/assets/templates/tags.html.haml
@@ -10,26 +10,27 @@
         .add-button#tag-add-button{"ng-click" => "ctrl.clickedAddNewTag()"} +
 
     .scrollable
-      .tag{"ng-if" => "ctrl.allTag", "ng-click" => "ctrl.selectTag(ctrl.allTag)", "ng-class" => "{'selected' : ctrl.selectedTag == ctrl.allTag}"}
-        .info
-          %input.title{"ng-disabled" => "true", "ng-model" => "ctrl.allTag.title"}
-          .count {{ctrl.noteCount(ctrl.allTag)}}
-      .tag{"ng-repeat" => "tag in ctrl.tags track by tag.uuid", "ng-click" => "ctrl.selectTag(tag)", "ng-class" => "{'selected' : ctrl.selectedTag == tag}"}
-        .info
-          %input.title{"ng-attr-id" => "tag-{{tag.uuid}}", "ng-click" => "ctrl.selectTag(tag)", "ng-model" => "tag.title",
-          "ng-keyup" => "$event.keyCode == 13 && ctrl.saveTag($event, tag)", "sn-autofocus" => "true", "should-focus" => "ctrl.newTag || ctrl.editingTag == tag",
-          "ng-change" => "ctrl.tagTitleDidChange(tag)", "ng-blur" => "ctrl.saveTag($event, tag)", "spellcheck" => "false"}
-          .count {{ctrl.noteCount(tag)}}
+      .infinite-scroll
+        .tag{"ng-if" => "ctrl.allTag", "ng-click" => "ctrl.selectTag(ctrl.allTag)", "ng-class" => "{'selected' : ctrl.selectedTag == ctrl.allTag}"}
+          .info
+            %input.title{"ng-disabled" => "true", "ng-model" => "ctrl.allTag.title"}
+            .count {{ctrl.noteCount(ctrl.allTag)}}
+        .tag{"ng-repeat" => "tag in ctrl.tags track by tag.uuid", "ng-click" => "ctrl.selectTag(tag)", "ng-class" => "{'selected' : ctrl.selectedTag == tag}"}
+          .info
+            %input.title{"ng-attr-id" => "tag-{{tag.uuid}}", "ng-click" => "ctrl.selectTag(tag)", "ng-model" => "tag.title",
+            "ng-keyup" => "$event.keyCode == 13 && ctrl.saveTag($event, tag)", "sn-autofocus" => "true", "should-focus" => "ctrl.newTag || ctrl.editingTag == tag",
+            "ng-change" => "ctrl.tagTitleDidChange(tag)", "ng-blur" => "ctrl.saveTag($event, tag)", "spellcheck" => "false"}
+            .count {{ctrl.noteCount(tag)}}
 
-        .red.small.bold{"ng-if" => "tag.conflict_of"} Conflicted copy
-        .red.small.bold{"ng-if" => "tag.errorDecrypting"} Error decrypting
+          .red.small.bold{"ng-if" => "tag.conflict_of"} Conflicted copy
+          .red.small.bold{"ng-if" => "tag.errorDecrypting"} Error decrypting
 
-        .menu{"ng-if" => "ctrl.selectedTag == tag"}
-          %a.item{"ng-click" => "ctrl.selectedRenameTag($event, tag)", "ng-if" => "!ctrl.editingTag"} Rename
-          %a.item{"ng-click" => "ctrl.saveTag($event, tag)", "ng-if" => "ctrl.editingTag"} Save
-          %a.item{"ng-click" => "ctrl.selectedDeleteTag(tag)"} Delete
-      .tag.faded{"ng-if" => "ctrl.archiveTag", "ng-click" => "ctrl.selectTag(ctrl.archiveTag)", "ng-class" => "{'selected' : ctrl.selectedTag == ctrl.archiveTag}"}
-        .info
-          %input.title{"ng-disabled" => "true", "ng-model" => "ctrl.archiveTag.title"}
+          .menu{"ng-if" => "ctrl.selectedTag == tag"}
+            %a.item{"ng-click" => "ctrl.selectedRenameTag($event, tag)", "ng-if" => "!ctrl.editingTag"} Rename
+            %a.item{"ng-click" => "ctrl.saveTag($event, tag)", "ng-if" => "ctrl.editingTag"} Save
+            %a.item{"ng-click" => "ctrl.selectedDeleteTag(tag)"} Delete
+        .tag.faded{"ng-if" => "ctrl.archiveTag", "ng-click" => "ctrl.selectTag(ctrl.archiveTag)", "ng-class" => "{'selected' : ctrl.selectedTag == ctrl.archiveTag}"}
+          .info
+            %input.title{"ng-disabled" => "true", "ng-model" => "ctrl.archiveTag.title"}
 
   %panel-resizer{"panel-id" => "'tags-column'", "on-resize-finish" => "ctrl.onPanelResize", "control" => "ctrl.panelController", "hoverable" => "true", "collapsable" => "true"}