🔧 Continue working on the menu selection buttons

kando-menu · Mar 9, 2024 · 45b6962 · 45b6962
1 parent 305f333
commit 45b6962
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 22 deletions.
diff --git a/src/renderer/editor/theme.scss b/src/renderer/editor/theme.scss
@@ -33,9 +33,9 @@ $kando-highlight-color: #ffc8c8;
   // The secondary button is used most of the time. We want it to be a bit darker than
   // the default.
   .btn-secondary {
-    --bs-btn-bg: #{rgba(70, 70, 70, 0.6)};
-    --bs-btn-hover-bg: #{lighten(rgba(70, 70, 70, 0.6), 5%)};
-    --bs-btn-active-bg: #{lighten(rgba(70, 70, 70, 0.6), 10%)};
+    --bs-btn-bg: #{rgba(50, 50, 50, 0.4)};
+    --bs-btn-hover-bg: #{lighten(rgba(50, 50, 50, 0.4), 5%)};
+    --bs-btn-active-bg: #{lighten(rgba(50, 50, 50, 0.4), 15%)};
     --bs-btn-border-color: transparent;
     --bs-btn-hover-border-color: transparent;
     --bs-btn-active-border-color: transparent;
@@ -113,21 +113,6 @@ $kando-highlight-color: #ffc8c8;
 
 // Make buttons respond to clicks by moving down a bit.
 .btn {
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
-
-  transition:
-    transform 150ms ease,
-    opacity 150ms ease;
-
-  // Center text.
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  &:active {
-    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
-  }
-
   &.disabled {
     background: repeating-linear-gradient(
       -45deg,

diff --git a/src/renderer/editor/toolbar/templates/menus-tab.hbs b/src/renderer/editor/toolbar/templates/menus-tab.hbs
@@ -14,14 +14,16 @@
 -->
 
 <div class='d-flex h-100 kando-font'>
-  <div class='flex-grow-1 row' id='menu-buttons-list'>
+  <div class='flex-grow-1' id='menu-buttons-list'>
     {{#each menus}}
-      <label class="col-3 btn btn-secondary menu-selection-button">
+      <label class="btn btn-secondary menu-selection-button">
         <input type="radio"
                name="menu-selection-button"
                data-index="{{index}}"
                {{#if active}} checked {{/if}}/>
-        {{name}}
+               {{{icon}}}
+        <span class="name">{{name}}</span>
+        <span class="shortcut">{{shortcut}}</span>
       </label>
     {{/each}}
   </div>

diff --git a/src/renderer/editor/toolbar/toolbar.scss b/src/renderer/editor/toolbar/toolbar.scss
@@ -97,8 +97,14 @@
       display: none;
     }
 
+    display: inline-flex;
+    margin: 10px;
+    width: 200px;
+    height: 60px;
+
     &:has(input:checked) {
-      border: 2px solid white;
+      border: 2px dashed rgba(255, 255, 255, 0.5);
+      background: var(--bs-btn-active-bg);
     }
   }
 }
diff --git a/src/renderer/editor/toolbar/toolbar.ts b/src/renderer/editor/toolbar/toolbar.ts
@@ -11,6 +11,7 @@
 import Handlebars from 'handlebars';
 import { EventEmitter } from 'events';
 import { IMenu } from '../../../common';
+import * as themedIcon from '../common/themed-icon';
 
 /**
  * This class is responsible for the toolbar on the bottom of the editor screen. It is an
@@ -52,6 +53,8 @@ export class Toolbar extends EventEmitter {
     const data = menus.map((menu, index) => ({
       name: menu.nodes.name,
       active: index === currentMenu,
+      shortcut: menu.shortcut,
+      icon: themedIcon.createDiv(menu.nodes.icon, menu.nodes.iconTheme).outerHTML,
       index,
     }));