feat: improve UX of selecting chord diagrams

stufro · Jul 16, 2023 · 697c360 · 697c360
1 parent 2b4f6fb
commit 697c360
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 12 deletions.
diff --git a/app/assets/stylesheets/chord_sheets.scss b/app/assets/stylesheets/chord_sheets.scss
@@ -40,8 +40,9 @@ a.sort-by-icon.is-active:hover {
   border: 1px solid $grey-lightest;
   padding: 1rem;
   margin-bottom: 2rem;
-  box-shadow: 0 0.5em 1em -0.125em rgba(10,10,10,.1),
-              0 0px 0 1px rgba(10,10,10,.02);;
+  box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, .1),
+    0 0px 0 1px rgba(10, 10, 10, .02);
+  ;
 }
 
 #chord-diagram {
@@ -52,8 +53,9 @@ a.sort-by-icon.is-active:hover {
   position: absolute;
   top: 70px;
   background-color: white;
-  box-shadow: 0 0.5em 1em -0.125em rgba(10,10,10,.1);
+  box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, .1);
   border-radius: 1rem;
+  z-index: 1;
 }
 
 .hidden {

diff --git a/app/javascript/controllers/chord_diagram_controller.js b/app/javascript/controllers/chord_diagram_controller.js
@@ -1,11 +1,16 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = ["icon", "guitarChords", "ukuleleChords", "selectBox"]
+  static targets = ["icon", "guitarChords", "ukuleleChords", "selectBox", "wrapper"]
 
   connect() {
     this.show()
     document.addEventListener("turbo:frame-render", () => this.show())
+
+    document.addEventListener("click", (event) => {
+      if (this.wrapperTarget.contains(event.target)) return
+      this.selectBoxTarget.classList.add("hidden")
+    })
   }
 
   set(event) {
@@ -15,11 +20,8 @@ export default class extends Controller {
   }
 
   click_icon() {
-    if (localStorage.getItem("chord-diagrams")) {
-      localStorage.removeItem("chord-diagrams")
-    } else {
-      this.selectBoxTarget.classList.toggle("hidden")
-    }
+    localStorage.removeItem("chord-diagrams")
+    this.selectBoxTarget.classList.toggle("hidden")
     this.show()
   }
 

diff --git a/app/views/chord_sheets/_chord_diagram_icon.html.slim b/app/views/chord_sheets/_chord_diagram_icon.html.slim
@@ -1,4 +1,4 @@
-<svg width="35" height="35" viewBox="0 0 100 105" class="svg-disabled" id="chord-diagram" data-chord-diagram-target="icon" data-action="click->chord-diagram#click_icon">
+<svg title="Chord diagrams" width="35" height="35" viewBox="0 0 100 105" class="svg-disabled" id="chord-diagram" data-chord-diagram-target="icon" data-action="click->chord-diagram#click_icon">
   <line x1="0" y1="24" x2="100" y2="24" style="stroke-width:2; stroke-linecap:square"></line>
   <line x1="0" y1="44" x2="100" y2="44" style="stroke-width:2; stroke-linecap:square"></line>
   <line x1="0" y1="64" x2="100" y2="64" style="stroke-width:2; stroke-linecap:square"></line>

diff --git a/app/views/chord_sheets/_main.html.slim b/app/views/chord_sheets/_main.html.slim
@@ -22,7 +22,7 @@ turbo-frame[id=dom_id(chord_sheet) data-controller="clipboard chord-diagram moda
                 i.fas.fa-arrow-circle-down
 
         .level-right.align-items-space-between
-          .level-item.mt-2
+          .level-item.mt-2 data-chord-diagram-target="wrapper"
             = render("chord_diagram_icon")
             .hidden#diagram-select data-chord-diagram-target="selectBox"
               .diagram-option#guitar data-action="click->chord-diagram#set" Guitar
@@ -36,7 +36,8 @@ turbo-frame[id=dom_id(chord_sheet) data-controller="clipboard chord-diagram moda
               span.icon
                 i.fas.fa-trash
             = button_to("#", class: "button is-rounded is-info mr-2 modal-trigger",
-                             id: "versions", data: { target: "versions-modal" })
+                             id: "versions", title: "Previous versions",
+                             data: { target: "versions-modal" })
               span.icon
                 i.fas.fa-history
             = button_to "#", class: "button is-rounded is-info mr-2", id: "copy-to-clipboard",