Moved navbar buttons to dropdown menu

diff --git a/flatnotes/src/components/Login.vue b/flatnotes/src/components/Login.vue
index 35e2418c63b163a7140531c52698f04bd4b05af4..f99be0ebc437ce9a938221e2ddcd5968a29b0b3b 100644 (file)
--- a/flatnotes/src/components/Login.vue
+++ b/flatnotes/src/components/Login.vue
@@ -68,7 +68,7 @@
 
         <!-- Button -->
         <button type="submit" class="bttn">
-          <b-icon icon="box-arrow-in-right"></b-icon> Log In
+          <b-icon icon="box-arrow-in-right"></b-icon><span>Log In</span>
         </button>
       </form>
     </div>

diff --git a/flatnotes/src/components/NavBar.vue b/flatnotes/src/components/NavBar.vue
index c0b82ef8b80f1082d702709dd43c3589a58a823f..3a0280f3a84d675874becc12c4411bce1a3d1292 100644 (file)
--- a/flatnotes/src/components/NavBar.vue
+++ b/flatnotes/src/components/NavBar.vue
@@ -10,70 +10,103 @@
 
     <!-- Buttons -->
     <div class="d-flex">
-      <!-- Log Out -->
-      <button
-        v-if="showLogOutButton"
-        type="button"
-        class="bttn"
-        @click="$emit('logout')"
-      >
-        <b-icon icon="box-arrow-right"></b-icon> Log Out
-      </button>
-
       <!-- New Note -->
       <a
         v-if="showNewButton"
         :href="constants.basePaths.new"
         class="bttn"
         @click.prevent="navigate(constants.basePaths.new, $event)"
-        v-b-tooltip.hover
-        title="Create a New Note"
       >
-        <b-icon icon="plus-circle"></b-icon> New
+        <b-icon icon="plus-circle"></b-icon><span>New Note</span>
       </a>
 
-      <!-- Theme Toggle -->
-      <button
-        type="button"
-        id="theme-button"
-        class="bttn"
-        @click="$emit('toggleTheme')"
-        v-b-tooltip.hover
-        title="Toggle Theme"
+      <!-- Menu -->
+      <b-dropdown
+        menu-class="menu"
+        toggle-class="bttn text-decoration-none"
+        size="md"
+        variant="link"
+        offset="-10px"
+        no-caret
+        right
       >
-        <b-icon :icon="darkTheme ? 'sun' : 'moon'"></b-icon>
-      </button>
+        <template #button-content>
+          <b-icon icon="list"></b-icon><span>Menu</span>
+        </template>
 
-      <!-- A-Z -->
-      <a
-        :href="azHref"
-        class="bttn"
-        @click.prevent="navigate(azHref, $event)"
-        v-b-tooltip.hover
-        title="Show All Notes"
-        >A-Z</a
-      >
+        <!-- Search -->
+        <!-- Note: We use .capture.native.stop here to prevent button from gaining focus after the menu is closed. -->
+        <b-dropdown-item-button
+          button-class="bttn d-flex align-items-center"
+          @click.capture.native.stop="$emit('search')"
+        >
+          <b-icon icon="search" font-scale="0.8" class="mr-2"></b-icon>
+          <span class="mr-3">Search</span>
+          <span class="keyboard-shortcut" title="Keyboard Shortcut">/</span>
+        </b-dropdown-item-button>
 
-      <!-- Search -->
-      <button
-        type="button"
-        id="search-button"
-        class="bttn"
-        @click="$emit('search')"
-        v-b-tooltip.hover
-        title="Search (Keyboard Shortcut: /)"
-      >
-        <b-icon icon="search"></b-icon>
-      </button>
+        <!-- All Notes -->
+        <b-dropdown-item
+          link-class="bttn d-flex align-items-center"
+          :href="azHref"
+          @click.prevent="navigate(azHref, $event)"
+        >
+          <b-icon icon="files" font-scale="0.8" class="mr-2"></b-icon>
+          <span>All Notes</span>
+        </b-dropdown-item>
+
+        <!-- Toggle Theme -->
+        <b-dropdown-item-button
+          button-class="bttn d-flex align-items-center"
+          @click="$emit('toggleTheme')"
+        >
+          <b-icon
+            :icon="darkTheme ? 'sun' : 'moon'"
+            font-scale="0.8"
+            class="mr-2"
+          >
+          </b-icon>
+          <span>Toggle Theme</span>
+        </b-dropdown-item-button>
+
+        <!-- Log Out -->
+        <b-dropdown-divider v-if="showLogOutButton"></b-dropdown-divider>
+        <b-dropdown-item-button
+          v-if="showLogOutButton"
+          button-class="bttn d-flex align-items-center"
+          @click="$emit('logout')"
+        >
+          <b-icon icon="box-arrow-right" font-scale="0.8" class="mr-2"></b-icon>
+          <span>Log Out</span>
+        </b-dropdown-item-button>
+      </b-dropdown>
     </div>
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss">
 // Use visibility hidden instead of v-show to maintain consistent height
 .invisible {
   visibility: hidden;
 }
+
+.menu {
+  background-color: var(--colour-background);
+  color: var(--colour-text);
+  border: 1px solid var(--colour-border);
+
+  hr {
+    border-top: 1px solid var(--colour-border);
+  }
+}
+
+.keyboard-shortcut {
+  background-color: var(--colour-background-elevated);
+  padding: 0.1em 0.75em;
+  border: 1px solid var(--colour-border);
+  border-radius: 4px;
+  font-size: 0.75em;
+}
 </style>
 
 <script>

diff --git a/flatnotes/src/components/NoteViewerEditor.vue b/flatnotes/src/components/NoteViewerEditor.vue
index ede6ea08d6b1d741b7091f9ac070d90580e151c4..cbef12b5f134a14a3e8c929e06d35e9632eb4ec9 100644 (file)
--- a/flatnotes/src/components/NoteViewerEditor.vue
+++ b/flatnotes/src/components/NoteViewerEditor.vue
@@ -42,7 +42,7 @@
             v-b-tooltip.hover
             title="Keyboard Shortcut: e"
           >
-            <b-icon icon="pencil-square"></b-icon> Edit
+            <b-icon icon="pencil-square"></b-icon><span>Edit</span>
           </button>
 
           <!-- Delete -->
@@ -52,7 +52,7 @@
             class="bttn"
             @click="deleteNote"
           >
-            <b-icon icon="trash"></b-icon> Delete
+            <b-icon icon="trash"></b-icon><span>Delete</span>
           </button>
 
           <!-- Cancel -->
@@ -62,7 +62,7 @@
             class="bttn"
             @click="confirmCancelNote"
           >
-            <b-icon icon="arrow-return-left"></b-icon> Cancel
+            <b-icon icon="arrow-return-left"></b-icon><span>Cancel</span>
           </button>
 
           <!-- Save -->
@@ -72,7 +72,7 @@
             class="bttn"
             @click="saveNote"
           >
-            <b-icon icon="check-square"></b-icon> Save
+            <b-icon icon="check-square"></b-icon><span>Save</span>
           </button>
         </div>
       </div>

diff --git a/flatnotes/src/global.scss b/flatnotes/src/global.scss
index ea499d1d4af7e741c915ca195d092fe3692ae96e..35197523d190e8e0980f8c632d3c5aafff8a9987 100644 (file)
--- a/flatnotes/src/global.scss
+++ b/flatnotes/src/global.scss
@@ -40,7 +40,7 @@ a {
   color: var(--colour-text-muted);
 
   svg {
-    margin-right: 2px;
+    margin-right: 6px;
   }
 
   &:hover {