💄 settings uses Material 3 top-app-bar

src/components/icon-button.mjs

@@ -24,5 +24,6 @@ export const IconButton = ({
 }) => html`
   <a href='#' ...${properties}
     class=${`material3 icon-button ${disabled ? 'disabled ' : ''}${className}`}
-    onClick=${disabled ? null : onClick}>${icon}</a>
+    disabled=${disabled} onClick=${disabled ? null : onClick}
+  >${icon}</a>
 `;

src/components/index.mjs

@@ -22,4 +22,4 @@ export {DropDown} from './drop-down.mjs';
 export {Icon} from './icon.mjs';
 export {IconButton} from './icon-button.mjs';
 export {Panel} from './panel.mjs';
-export {TopBar, TopAppBar} from './top-bar.mjs';
+export {TopAppBar} from './top-app-bar.mjs';

src/components/top-bar.mjs → src/components/top-app-bar.mjs

@@ -15,49 +15,27 @@
  */
 import {html, IconButton} from './index.mjs';
 
-/**
- * A TopBar partially based on Bulma's Navbar component.
- */
-export const TopBar = ({
-  title,
-  titleClass = 'navbar-item is-size-5 has-text-info has-text-weight-bold',
-  containerClass = '',
-  endComponents = '',
-  endComponentsClass = '',
-  fixed = false
-}) => {
-  if (fixed) {
-    document.body.classList.add('has-navbar-fixed-top');
-  }
-  return html`
-    <nav class=${`top-bar navbar ${fixed ? 'is-fixed-top' : ''}`}>
-      <div class=${`not-navbar-brand is-flex is-flex-grow-1 is-align-content-center ${containerClass}`}>
-        <div class=${`not-navbar-brand is-flex is-flex-grow-1 ${titleClass}`}>${title}</div>
-        <div class=${endComponentsClass}>${endComponents}</div>
-      </div>
-    </nav>
-  `;
-};
-
 /**
  * A top app bar based on Material design (3) guidelines.
  *
  * @param icon represented using a Material Icon codepoint.
  * @param iconClick callback function to be executed when the icon is clicked.
  * @param headline the headline of the app bar.
+ * @param components or component containing an icon displayed at the end of the app bar.
  * @see https://m3.material.io/components/top-app-bar
  */
 export const TopAppBar = ({
   icon,
   iconClick = () => {},
-  headline
+  headline,
+  trailingIcon
 }) => {
   document.body.classList.add('has-top-app-bar');
   return html`
     <div class='material3 top-app-bar small elevation-0 surface'>
       <${IconButton} className='leading-navigation-icon title-large' icon=${icon} onClick=${iconClick}/>
       <div class='top-app-bar__headline title-large'>${headline}</div>
-      <div class='trailing-icon title-large'></div>
+      <div class='trailing-icon title-large'>${trailingIcon}</div>
     </div>
   `;
 };

src/settings/__tests__/settings.browser.test.mjs

@@ -47,7 +47,7 @@ describe('Settings in Browser test suite', () => {
     });
     test('Cancel should send close dialog event', () => {
       // When
-      fireEvent.click(document.querySelector('.settings__cancel'));
+      fireEvent.click(document.querySelector('.top-app-bar .leading-navigation-icon'));
       // Then
       expect(mockIpcRenderer.send).toHaveBeenCalledTimes(1);
       expect(mockIpcRenderer.send).toHaveBeenCalledWith('closeDialog');

src/settings/settings.browser.mjs

@@ -15,7 +15,7 @@
  */
 const {ipcRenderer} = window;
 
-import {APP_EVENTS, Checkbox, TopBar, html, render, useReducer} from '../components/index.mjs';
+import {APP_EVENTS, html, render, useReducer, Checkbox, IconButton, TopAppBar} from '../components/index.mjs';
 import {
   ACTIONS, reducer, dictionariesEnabled, setTabProperty, toggleTabProperty
 } from './settings.reducer.browser.mjs';
@@ -121,18 +121,10 @@ const Settings = ({initialState}) => {
   });
   const cancel = () => ipcRenderer.send(APP_EVENTS.closeDialog);
   return html`
-  <${TopBar} fixed=${true} title='Settings'
-    endComponents=${html`
-      <div class="navbar-item field is-grouped">
-        <div class="control">
-          <button class="settings__submit button is-link"
-            disabled=${!state.canSave || state.invalidTabs.size !== 0} onClick=${save}>Ok</button>
-        </div>
-        <div class="control">
-          <button class="settings__cancel button is-link is-light" onClick=${cancel}>Cancel</button>
-        </div>
-      </div>
-    `}
+  <${TopAppBar} headline='Settings' icon='\uE5C4' iconClick=${cancel}
+    trailingIcon=${html`<${IconButton}
+        className='settings__submit' icon='\ue161' onClick=${save}
+        disabled=${!state.canSave || state.invalidTabs.size !== 0}/>`}
   />
   <div class="container">
     <div class="form">

src/styles/base/material3/palette.css

@@ -14,6 +14,7 @@
    limitations under the License.
  */
 
+/* https://m3.material.io/theme-builder */
 /* https://github.com/material-foundation/material-tokens/blob/main/css/palette.css */
 
 :root {

src/styles/components/icon-button.css

@@ -13,6 +13,10 @@
    See the License for the specific language governing permissions and
    limitations under the License.
  */
+:root {
+  --material3-icon-button-size: 24px;
+}
+
 .electronim .material3.icon-button,
 .electronim .material3.icon-button:active,
 .electronim .material3.icon-button:focus,
@@ -23,10 +27,10 @@
   color: var(--md-sys-color-on-surface-variant);
   outline: none;
   text-decoration: none;
-  width: 24px;
-  height: 24px;
-  font-size: 24px;
-  line-height: 24px;
+  width: var(--material3-icon-button-size);
+  height: var(--material3-icon-button-size);
+  font-size: var(--material3-icon-button-size);
+  line-height: var(--material3-icon-button-size);
   text-align: center;
 }
 
@@ -47,3 +51,16 @@
 .electronim .material3.icon-button:hover::before {
   opacity: var(--md-sys-state-hover-state-layer-opacity);
 }
+
+.electronim .material3.icon-button.disabled {
+  opacity: 38%;
+  color: var(--md-sys-color-on-surface);
+}
+
+.electronim .material3.icon-button.disabled:hover {
+  cursor: not-allowed;
+}
+
+.electronim .material3.icon-button.disabled:hover::before {
+  opacity: 0;
+}

src/styles/components/top-bar.css

@@ -13,10 +13,6 @@
    See the License for the specific language governing permissions and
    limitations under the License.
  */
-.electronim .top-bar.navbar {
-  background: var(--color-canvas-default);
-}
-
 :root {
   --material3-top-app-bar-height: 64px;
 }
@@ -30,6 +26,7 @@
   top: 0;
   left: 0;
   right: 0;
+  z-index: 1;
 }
 
 .electronim .material3.top-app-bar.small {
@@ -46,5 +43,13 @@
 
 .electronim .material3.top-app-bar.small .leading-navigation-icon {
   width: 24px;
-  text-align: center;
+}
+
+.electronim .material3.top-app-bar .top-app-bar__headline {
+  flex: 1;
+}
+
+.electronim .material3.top-app-bar .trailing-icon {
+  display: flex;
+  align-items: center;
 }