improved blue main menu bar

ludus-leonis · Nov 23, 2023 · f1d7959 · f1d7959
1 parent de261fa
commit f1d7959
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 19 deletions.
diff --git a/src/js/lib/icon.mjs b/src/js/lib/icon.mjs
@@ -84,5 +84,5 @@ export const BALL = svgIcon('<circle cx="14.13" cy="9.399" r="10" transform="rot
  * @returns {string} SVG string.
  */
 function svgIcon (content) {
-  return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${content}</svg'`
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${content}</svg>`
 }
diff --git a/src/js/view/room/index.mjs b/src/js/view/room/index.mjs
@@ -59,16 +59,19 @@ export function getMode () {
  * @param {string} m MODE.* to enable.
  */
 export function setMode (m) {
+  _('.menu-modes button').remove('.active')
   switch (m) {
     case MODE.MEASURE:
       mode?.quit()
       State.setRoomPreference(State.PREF.MODE, MODE.MEASURE)
+      _('#btn-m2').add('.active')
       mode = new ModeMeasure()
       break
     case MODE.MAIN:
     default:
       mode?.quit()
       State.setRoomPreference(State.PREF.MODE, MODE.MAIN)
+      _('#btn-m1').add('.active')
       mode = new ModeMain()
   }
   mode.enter()
@@ -382,6 +385,11 @@ function setupRoom () {
             <button id="btn-tile" class="btn-icon" title="Toggle tiles [4]">${Icon.TILE}</button>
           </div>
 
+          <div class="menu-modes spacing-small">
+            <button id="btn-m1" class="btn-icon" title="Main mode [m]">${Icon.BALL}</button>
+            <button id="btn-m2" class="btn-icon" title="Measure mode [m]">${Icon.RULER}</button>
+          </div>
+
           <div class="menu-mode spacing-small"></div>
         </div>
         <div>
@@ -438,6 +446,8 @@ function setupRoom () {
 
   // setup remaining menu
   _('#btn-S').on('click', () => ModalSettings.open())
+  _('#btn-m1').on('click', () => setMode(MODE.MAIN))
+  _('#btn-m2').on('click', () => setMode(MODE.MEASURE))
   _('#btn-h').on('click', () => ModalHelp.open())
   _('#btn-q').on('click', () => App.navigateToJoin(State.getRoom().name))
 

diff --git a/src/js/view/room/mode/Main.mjs b/src/js/view/room/mode/Main.mjs
@@ -37,8 +37,6 @@ export class Main extends Mode {
   enter () { // initialize UI
     const menu = _('.menu-mode')
     menu.innerHTML = `
-      <button id="btn-m" class="btn-icon" title="Measure mode [m]">${Icon.RULER}</button>
-
       <button id="btn-a" class="btn-icon" title="Open library [l]">${Icon.ADD}</button>
       <button id="btn-e" class="btn-icon" title="Edit [e]">${Icon.EDIT}</button>
       <button id="btn-r" class="btn-icon" title="Rotate [r]">${Icon.ROTATE}</button>
@@ -50,8 +48,6 @@ export class Main extends Mode {
       <button id="btn-del" class="btn-icon" title="Delete [Del]">${Icon.DELETE}</button>
     `
 
-    _('#btn-m').on('click', () => Room.setMode(Room.MODE.MEASURE))
-
     _('#btn-a').on('click', () => ModalLibrary.open(Room.getViewCenter()))
     _('#btn-e').on('click', () => Selection.edit())
     _('#btn-r').on('click', () => Selection.rotate())
@@ -81,7 +77,6 @@ export class Main extends Mode {
     _('.menu-mode button').remove('.disabled')
     _('.menu-mode button').add('.disabled')
 
-    _('#btn-m').remove('.disabled')
     _('#btn-a').remove('.disabled')
     const features = Selection.getFeatures()
     if (features.edit) _('#btn-e').remove('.disabled')

diff --git a/src/js/view/room/mode/Measure.mjs b/src/js/view/room/mode/Measure.mjs
@@ -22,7 +22,6 @@
 import _ from '../../../lib/FreeDOM.mjs'
 import { Mode } from './_Mode.mjs'
 import * as Dom from '../tabletop/dom.mjs'
-import * as Icon from '../../../lib/icon.mjs'
 import * as Mouse from '../mouse/index.mjs'
 import * as Room from '../index.mjs'
 import { Grab } from '../mouse/Grab.mjs'
@@ -31,11 +30,7 @@ import { Los } from '../mouse/Los.mjs'
 export class Measure extends Mode {
   enter () { // initialize UI
     const menu = _('.menu-mode')
-    menu.innerHTML = `
-      <button id="btn-m" class="btn-icon" title="Play mode [m]">${Icon.BALL}</button>
-    `
-
-    _('#btn-m').on('click', () => Room.setMode(Room.MODE.MAIN))
+    menu.innerHTML = ''
 
     Mouse.setButtons(
       new Los(),
@@ -54,7 +49,6 @@ export class Measure extends Mode {
     // (de)activate menu
     _('.menu-mode button').remove('.disabled')
     _('.menu-mode button').add('.disabled')
-    _('#btn-m').remove('.disabled')
   }
 
   keydown (keydown) {

diff --git a/src/scss/pages/room.scss b/src/scss/pages/room.scss
@@ -63,22 +63,25 @@
       border-radius: 0;
       color: $color-white-100;
       margin: 0;
-      padding: $spacing-tiny $spacing-micro;
-
-      &.active {
-        color: $color-black-100;
-      }
+      padding: $spacing-micro;
 
       svg {
         height: px(20);
         width: px(20);
       }
+
+      &.active svg {
+        background-color: $color-white-100;
+        border-radius: 2px;
+        box-shadow: 0 0 0 2px $color-white-100;
+        color: $color-primary;
+      }
     }
 
     .btn-icon.disabled,
     .disabled > .btn-icon {
-      color: $color-white-25a;
       cursor: not-allowed;
+      opacity: .25;
     }
 
     > div {