fix: change code mode toggle into group buttons [tree|code] (see #59)

josdejong · Apr 12, 2022 · ad33b26 · ad33b26
1 parent f0a1feb
commit ad33b26
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 15 deletions.
diff --git a/src/lib/components/JSONEditor.svelte b/src/lib/components/JSONEditor.svelte
@@ -1,7 +1,6 @@
 <svelte:options accessors={false} immutable={true} />
 
 <script>
-  import { faCode } from '@fortawesome/free-solid-svg-icons'
   import { createDebug } from '../utils/debug'
   import Modal from 'svelte-simple-modal'
   import { MODE, SORT_MODAL_OPTIONS, TRANSFORM_MODAL_OPTIONS } from '../constants.js'
@@ -287,9 +286,15 @@
   $: isCodeMode = mode === MODE.CODE
   $: modeMenuItems = [
     {
-      icon: faCode,
-      title: `Toggle code mode on/off (currently: ${isCodeMode ? 'on' : 'off'})`,
-      className: 'code-mode' + (isCodeMode ? ' selected' : ''),
+      text: 'code',
+      title: `Switch to code mode (current mode: ${mode})`,
+      className: 'group-button first' + (isCodeMode ? ' selected' : ''),
+      onClick: toggleCodeMode
+    },
+    {
+      text: 'tree',
+      title: `Switch to tree mode (current mode: ${mode})`,
+      className: 'group-button last' + (!isCodeMode ? ' selected' : ''),
       onClick: toggleCodeMode
     }
   ]

diff --git a/src/lib/components/controls/Menu.scss b/src/lib/components/controls/Menu.scss
@@ -33,19 +33,30 @@
       background: transparent;
     }
 
-    &.selected {
-      width: $menu-button-size - 2 * $pressed-button-margin;
-      height: $menu-button-size - 2 * $pressed-button-margin;
-      margin: $pressed-button-margin;
-      $p: $padding-half - $pressed-button-margin;
-      padding: ($p + 1px) ($p - 1px) ($p - 1px) ($p + 1px);
+    &.group-button {
+      $group-button-border: 1px solid rgba(255, 255, 255, 0.5);
 
-      box-shadow: inset 1px 1px 2px #1d4075;
-      background: rgba(255, 255, 255, 0.3);
-      border-radius: 1px;
+      border: $group-button-border;
+      &:not(.last) {
+        border-right: none;
+      }
+
+      padding: 0;
+      margin: $padding-half 0;
+      height: $menu-button-size - 2 * $padding-half;
+      width: 40px;
+
+      &.first {
+        margin-left: $padding-half;
+      }
 
-      color: white;
-      cursor: pointer;
+      &.last {
+        margin-right: $padding-half;
+      }
+    }
+
+    &.selected {
+      background: rgba(255, 255, 255, 0.3);
 
       &:hover,
       &:focus {