From dcc869cb079980254cba8a2066ca178720bc4c36 Mon Sep 17 00:00:00 2001
From: evazion <noizave@gmail.com>
Date: Wed, 29 Jul 2020 12:04:00 -0500
Subject: [PATCH] notes: raise notes on hover.

* Raise notes when hovering over them. This is so that when dragging
  embedded notes, they're not hidden behind other notes. Also so that if
  two notes are overlapping, you can hover over one to raise it over the
  other.

* Replace .hovering class with :hover selector.
---
 app/javascript/src/javascripts/notes.js       | 2 --
 app/javascript/src/styles/specific/notes.scss | 9 +++++++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/app/javascript/src/javascripts/notes.js b/app/javascript/src/javascripts/notes.js
index c237ea3eb..122df40af 100644
--- a/app/javascript/src/javascripts/notes.js
+++ b/app/javascript/src/javascripts/notes.js
@@ -86,12 +86,10 @@ class Note {
 
     on_mouseenter() {
       this.note.body.show();
-      this.$note_box.addClass("hovering");
     }
 
     on_mouseleave() {
       this.note.body.hide();
-      this.$note_box.removeClass("hovering");
     }
 
     on_dragstart() {
diff --git a/app/javascript/src/styles/specific/notes.scss b/app/javascript/src/styles/specific/notes.scss
index 6fd6c9a59..ae5f3229a 100644
--- a/app/javascript/src/styles/specific/notes.scss
+++ b/app/javascript/src/styles/specific/notes.scss
@@ -95,6 +95,11 @@
     opacity: 0.5;
     z-index: 100;
 
+    /* Raise notes on hover so overlapping embedded notes are readable. */
+    &:hover {
+      z-index: 200;
+    }
+
     &.unsaved {
       border: var(--unsaved-note-box-border);
     }
@@ -108,7 +113,7 @@
       border: 1px solid transparent;
       opacity: 1;
 
-      &.hovering {
+      &:hover {
         border: var(--note-box-border);
         box-shadow: var(--note-box-shadow);
 
@@ -132,7 +137,7 @@
         border: var(--movable-note-box-border);
       }
 
-      &:not(.hovering) div.ui-resizable-handle {
+      &:not(:hover) div.ui-resizable-handle {
         display: none !important;
       }
     }