From e2733691edaf6fc3d780038bbed246a4c316cd7d Mon Sep 17 00:00:00 2001 From: Marc Nuri Date: Sun, 13 Nov 2022 17:28:10 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20settings=20uses=20Material=203?= =?UTF-8?q?=20top-app-bar?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Marc Nuri --- src/components/icon-button.mjs | 3 +- src/components/index.mjs | 2 +- .../{top-bar.mjs => top-app-bar.mjs} | 30 +++---------------- .../__tests__/settings.browser.test.mjs | 2 +- src/settings/settings.browser.mjs | 18 ++++------- src/styles/base/material3/palette.css | 1 + src/styles/components/icon-button.css | 25 +++++++++++++--- src/styles/components/top-bar.css | 15 ++++++---- 8 files changed, 45 insertions(+), 51 deletions(-) rename src/components/{top-bar.mjs => top-app-bar.mjs} (63%) diff --git a/src/components/icon-button.mjs b/src/components/icon-button.mjs index 1d5b9fee..4a0cfe9f 100644 --- a/src/components/icon-button.mjs +++ b/src/components/icon-button.mjs @@ -24,5 +24,6 @@ export const IconButton = ({ }) => html` ${icon} + disabled=${disabled} onClick=${disabled ? null : onClick} + >${icon} `; diff --git a/src/components/index.mjs b/src/components/index.mjs index e51195ab..951fa76b 100644 --- a/src/components/index.mjs +++ b/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'; diff --git a/src/components/top-bar.mjs b/src/components/top-app-bar.mjs similarity index 63% rename from src/components/top-bar.mjs rename to src/components/top-app-bar.mjs index d8168180..298ed7dd 100644 --- a/src/components/top-bar.mjs +++ b/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` - - `; -}; - /** * 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`
<${IconButton} className='leading-navigation-icon title-large' icon=${icon} onClick=${iconClick}/>
${headline}
-
+
${trailingIcon}
`; }; diff --git a/src/settings/__tests__/settings.browser.test.mjs b/src/settings/__tests__/settings.browser.test.mjs index 610b8bbc..19dafe5d 100644 --- a/src/settings/__tests__/settings.browser.test.mjs +++ b/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'); diff --git a/src/settings/settings.browser.mjs b/src/settings/settings.browser.mjs index 12f472dc..93d6cf73 100644 --- a/src/settings/settings.browser.mjs +++ b/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` -
-
- -
-
- -
-
- `} + <${TopAppBar} headline='Settings' icon='\uE5C4' iconClick=${cancel} + trailingIcon=${html`<${IconButton} + className='settings__submit' icon='\ue161' onClick=${save} + disabled=${!state.canSave || state.invalidTabs.size !== 0}/>`} />
diff --git a/src/styles/base/material3/palette.css b/src/styles/base/material3/palette.css index 00b3ed9e..3284244e 100644 --- a/src/styles/base/material3/palette.css +++ b/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 { diff --git a/src/styles/components/icon-button.css b/src/styles/components/icon-button.css index 294d4588..e1ced0cc 100644 --- a/src/styles/components/icon-button.css +++ b/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; +} diff --git a/src/styles/components/top-bar.css b/src/styles/components/top-bar.css index e52a47a4..1eaa1244 100644 --- a/src/styles/components/top-bar.css +++ b/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; }