From 8ff15b868b352b3a7701817ee1cd9b40aaee4c34 Mon Sep 17 00:00:00 2001 From: Dermot Duffy Date: Wed, 8 Jun 2022 18:52:59 -0700 Subject: [PATCH 1/2] Improve editor submenu formatting. --- src/editor.ts | 519 ++++++++++++++++++++++--------------------- src/scss/editor.scss | 27 ++- 2 files changed, 288 insertions(+), 258 deletions(-) diff --git a/src/editor.ts b/src/editor.ts index ebd52bd7..6b25275f 100644 --- a/src/editor.ts +++ b/src/editor.ts @@ -1,6 +1,7 @@ import { fireEvent, HomeAssistant, LovelaceCardEditor } from 'custom-card-helpers'; import { CSSResultGroup, html, LitElement, TemplateResult, unsafeCSS } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; +import { classMap } from 'lit/directives/class-map.js'; import { copyConfig, deleteConfigValue, @@ -8,7 +9,7 @@ import { getConfigValue, isConfigUpgradeable, setConfigValue, - upgradeConfig + upgradeConfig, } from './config-mgmt.js'; import { CONF_CAMERAS, @@ -93,7 +94,7 @@ import { CONF_VIEW_TIMEOUT_SECONDS, CONF_VIEW_UPDATE_CYCLE_CAMERA, CONF_VIEW_UPDATE_FORCE, - CONF_VIEW_UPDATE_SECONDS + CONF_VIEW_UPDATE_SECONDS, } from './const.js'; import { localize } from './localize/localize.js'; import frigate_card_editor_style from './scss/editor.scss'; @@ -104,7 +105,7 @@ import { RawFrigateCardConfig, RawFrigateCardConfigArray, THUMBNAIL_WIDTH_MAX, - THUMBNAIL_WIDTH_MIN + THUMBNAIL_WIDTH_MIN, } from './types.js'; import { arrayMove } from './utils/basic.js'; import { getCameraID, getCameraTitle } from './utils/camera.js'; @@ -598,41 +599,52 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor } protected _renderViewScanMenu(): TemplateResult { + const selected = !!this._expandedMenus[MENU_VIEW_SCAN]; + const submenuClasses = { + submenu: true, + selected: selected, + }; + const headerClasses = { + 'submenu-header': true, + selected: selected, + }; return html` -
- - ${localize(`config.${CONF_VIEW_SCAN}.scan_mode`)} +
+
+ + ${localize(`config.${CONF_VIEW_SCAN}.scan_mode`)} +
+ ${this._expandedMenus[MENU_VIEW_SCAN] + ? html`
+ ${this._renderSwitch( + CONF_VIEW_SCAN_ENABLED, + frigateCardConfigDefaults.view.scan.enabled, + { + label: localize(`config.${CONF_VIEW_SCAN_ENABLED}`), + }, + )} + ${this._renderSwitch( + CONF_VIEW_SCAN_SHOW_TRIGGER_STATUS, + frigateCardConfigDefaults.view.scan.show_trigger_status, + { + label: localize(`config.${CONF_VIEW_SCAN_SHOW_TRIGGER_STATUS}`), + }, + )} + ${this._renderSwitch( + CONF_VIEW_SCAN_UNTRIGGER_RESET, + frigateCardConfigDefaults.view.scan.untrigger_reset, + )} + ${this._renderNumberInput(CONF_VIEW_SCAN_UNTRIGGER_SECONDS, { + default: frigateCardConfigDefaults.view.scan.untrigger_seconds, + })} +
` + : ''}
- ${this._expandedMenus[MENU_VIEW_SCAN] - ? html`
- ${this._renderSwitch( - CONF_VIEW_SCAN_ENABLED, - frigateCardConfigDefaults.view.scan.enabled, - { - label: localize(`config.${CONF_VIEW_SCAN_ENABLED}`), - }, - )} - ${this._renderSwitch( - CONF_VIEW_SCAN_SHOW_TRIGGER_STATUS, - frigateCardConfigDefaults.view.scan.show_trigger_status, - { - label: localize(`config.${CONF_VIEW_SCAN_SHOW_TRIGGER_STATUS}`), - }, - )} - ${this._renderSwitch( - CONF_VIEW_SCAN_UNTRIGGER_RESET, - frigateCardConfigDefaults.view.scan.untrigger_reset, - )} - ${this._renderNumberInput(CONF_VIEW_SCAN_UNTRIGGER_SECONDS, { - default: frigateCardConfigDefaults.view.scan.untrigger_seconds, - })} -
` - : ''} `; } @@ -647,80 +659,58 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor { value: 'matching', label: localize('config.menu.buttons.alignments.matching') }, { value: 'opposing', label: localize('config.menu.buttons.alignments.opposing') }, ]; + const selected = this._expandedMenus[MENU_BUTTONS] === button; + const submenuClasses = { + submenu: true, + selected: selected, + }; + const headerClasses = { + 'submenu-header': true, + selected: selected, + }; return html` -
- - ${localize('editor.button') + - ': ' + - localize(`config.${CONF_MENU_BUTTONS}.${button}`)} +
-
+ + ${localize('editor.button') + + ': ' + + localize(`config.${CONF_MENU_BUTTONS}.${button}`)} +
- ${this._expandedMenus[MENU_BUTTONS] === button - ? html`
- ${this._renderSwitch( - `${CONF_MENU_BUTTONS}.${button}.enabled`, - frigateCardConfigDefaults.menu.buttons[button]?.enabled ?? true, - { - label: localize('config.menu.buttons.enabled'), - }, - )} - ${this._renderOptionSelector( - `${CONF_MENU_BUTTONS}.${button}.alignment`, - menuButtonAlignments, - { - label: localize('config.menu.buttons.alignment'), - }, - )} - ${this._renderNumberInput(`${CONF_MENU_BUTTONS}.${button}.priority`, { - max: FRIGATE_MENU_PRIORITY_MAX, - default: frigateCardConfigDefaults.menu.buttons[button]?.priority, - label: localize('config.menu.buttons.priority'), - })} - ${this._renderIconSelector(`${CONF_MENU_BUTTONS}.${button}.icon`, { - label: localize('config.menu.buttons.icon'), - })} -
` - : ''} - `; - } - - /** - * Render a camera header. - * @param cameraIndex The index of the camera to edit/add. - * @param cameraConfig The configuration of the camera in question. - * @param addNewCamera Whether or not this is a header to add a new camera. - * @returns A rendered template. - */ - protected _renderCameraHeader( - cameraIndex: number, - cameraConfig?: RawFrigateCardConfig, - addNewCamera?: boolean, - ): TemplateResult { - return html` -
- - - ${addNewCamera - ? html` - [${localize('editor.add_new_camera')}...] - ` - : html`${this._getEditorCameraTitle(cameraIndex, cameraConfig || {})}`} - + ${this._expandedMenus[MENU_BUTTONS] === button + ? html`
+ ${this._renderSwitch( + `${CONF_MENU_BUTTONS}.${button}.enabled`, + frigateCardConfigDefaults.menu.buttons[button]?.enabled ?? true, + { + label: localize('config.menu.buttons.enabled'), + }, + )} + ${this._renderOptionSelector( + `${CONF_MENU_BUTTONS}.${button}.alignment`, + menuButtonAlignments, + { + label: localize('config.menu.buttons.alignment'), + }, + )} + ${this._renderNumberInput(`${CONF_MENU_BUTTONS}.${button}.priority`, { + max: FRIGATE_MENU_PRIORITY_MAX, + default: frigateCardConfigDefaults.menu.buttons[button]?.priority, + label: localize('config.menu.buttons.priority'), + })} + ${this._renderIconSelector(`${CONF_MENU_BUTTONS}.${button}.icon`, { + label: localize('config.menu.buttons.icon'), + })} +
` + : ''}
`; } @@ -772,135 +762,166 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor } }; + const selected = this._expandedMenus[MENU_CAMERAS] === cameraIndex; + const submenuClasses = { + submenu: true, + selected: selected, + }; + const headerClasses = { + 'submenu-header': true, + selected: selected, + }; + return html` - ${this._renderCameraHeader(cameraIndex, cameras[cameraIndex], addNewCamera)} - ${this._expandedMenus[MENU_CAMERAS] === cameraIndex - ? html`
-
- - !addNewCamera && - modifyConfig((config: RawFrigateCardConfig): boolean => { - if (Array.isArray(config.cameras) && cameraIndex > 0) { - arrayMove(config.cameras, cameraIndex, cameraIndex - 1); - this._openMenu(MENU_CAMERAS, cameraIndex - 1); - return true; - } - return false; - })} - > - - - = this._config.cameras.length - 1} - @click=${() => - !addNewCamera && - modifyConfig((config: RawFrigateCardConfig): boolean => { - if ( - Array.isArray(config.cameras) && - cameraIndex < config.cameras.length - 1 - ) { - arrayMove(config.cameras, cameraIndex, cameraIndex + 1); - this._openMenu(MENU_CAMERAS, cameraIndex + 1); - return true; - } - return false; - })} - > - - - { - modifyConfig((config: RawFrigateCardConfig): boolean => { - if (Array.isArray(config.cameras)) { - config.cameras.splice(cameraIndex, 1); - this._closeMenu(MENU_CAMERAS); - return true; - } - return false; - }); - }} - > - - -
- ${this._renderEntitySelector( - getArrayConfigPath(CONF_CAMERAS_ARRAY_CAMERA_ENTITY, cameraIndex), - 'camera', - )} - ${this._renderStringInput( - getArrayConfigPath(CONF_CAMERAS_ARRAY_CAMERA_NAME, cameraIndex), - )} - ${this._renderOptionSelector( - getArrayConfigPath(CONF_CAMERAS_ARRAY_LIVE_PROVIDER, cameraIndex), - liveProviders, - )} - ${this._renderStringInput( - getArrayConfigPath(CONF_CAMERAS_ARRAY_URL, cameraIndex), - )} - ${this._renderStringInput( - getArrayConfigPath(CONF_CAMERAS_ARRAY_LABEL, cameraIndex), - )} - ${this._renderStringInput( - getArrayConfigPath(CONF_CAMERAS_ARRAY_ZONE, cameraIndex), - )} - ${this._renderStringInput( - getArrayConfigPath(CONF_CAMERAS_ARRAY_CLIENT_ID, cameraIndex), - )} - ${this._renderStringInput( - getArrayConfigPath(CONF_CAMERAS_ARRAY_TITLE, cameraIndex), - )} - ${this._renderStringInput( - getArrayConfigPath(CONF_CAMERAS_ARRAY_ICON, cameraIndex), - )} - ${this._renderStringInput( - getArrayConfigPath(CONF_CAMERAS_ARRAY_ID, cameraIndex), - )} - ${this._renderEntitySelector( - getArrayConfigPath(CONF_CAMERAS_ARRAY_WEBRTC_CARD_ENTITY, cameraIndex), - 'camera', - )} - ${this._renderStringInput( - getArrayConfigPath(CONF_CAMERAS_ARRAY_WEBRTC_CARD_URL, cameraIndex), - )} - ${this._renderOptionSelector( - getArrayConfigPath(CONF_CAMERAS_ARRAY_DEPENDENT_CAMERAS, cameraIndex), - dependentCameras, - { - multiple: true, - }, - )} - ${this._renderSwitch( - getArrayConfigPath(CONF_CAMERAS_ARRAY_TRIGGER_BY_OCCUPANCY, cameraIndex), - frigateCardConfigDefaults.cameras.trigger_by_occupancy, - )} - ${this._renderSwitch( - getArrayConfigPath(CONF_CAMERAS_ARRAY_TRIGGER_BY_MOTION, cameraIndex), - frigateCardConfigDefaults.cameras.trigger_by_motion, - )} - ${this._renderOptionSelector( - getArrayConfigPath(CONF_CAMERAS_ARRAY_TRIGGER_BY_ENTITIES, cameraIndex), - entities, - { - multiple: true, - }, - )} -
` - : ``} +
+
+ + + ${addNewCamera + ? html` + [${localize('editor.add_new_camera')}...] + ` + : html`${this._getEditorCameraTitle( + cameraIndex, + cameras[cameraIndex] || {}, + )}`} + +
+ ${this._expandedMenus[MENU_CAMERAS] === cameraIndex + ? html`
+
+ + !addNewCamera && + modifyConfig((config: RawFrigateCardConfig): boolean => { + if (Array.isArray(config.cameras) && cameraIndex > 0) { + arrayMove(config.cameras, cameraIndex, cameraIndex - 1); + this._openMenu(MENU_CAMERAS, cameraIndex - 1); + return true; + } + return false; + })} + > + + + = this._config.cameras.length - 1} + @click=${() => + !addNewCamera && + modifyConfig((config: RawFrigateCardConfig): boolean => { + if ( + Array.isArray(config.cameras) && + cameraIndex < config.cameras.length - 1 + ) { + arrayMove(config.cameras, cameraIndex, cameraIndex + 1); + this._openMenu(MENU_CAMERAS, cameraIndex + 1); + return true; + } + return false; + })} + > + + + { + modifyConfig((config: RawFrigateCardConfig): boolean => { + if (Array.isArray(config.cameras)) { + config.cameras.splice(cameraIndex, 1); + this._closeMenu(MENU_CAMERAS); + return true; + } + return false; + }); + }} + > + + +
+ ${this._renderEntitySelector( + getArrayConfigPath(CONF_CAMERAS_ARRAY_CAMERA_ENTITY, cameraIndex), + 'camera', + )} + ${this._renderStringInput( + getArrayConfigPath(CONF_CAMERAS_ARRAY_CAMERA_NAME, cameraIndex), + )} + ${this._renderOptionSelector( + getArrayConfigPath(CONF_CAMERAS_ARRAY_LIVE_PROVIDER, cameraIndex), + liveProviders, + )} + ${this._renderStringInput( + getArrayConfigPath(CONF_CAMERAS_ARRAY_URL, cameraIndex), + )} + ${this._renderStringInput( + getArrayConfigPath(CONF_CAMERAS_ARRAY_LABEL, cameraIndex), + )} + ${this._renderStringInput( + getArrayConfigPath(CONF_CAMERAS_ARRAY_ZONE, cameraIndex), + )} + ${this._renderStringInput( + getArrayConfigPath(CONF_CAMERAS_ARRAY_CLIENT_ID, cameraIndex), + )} + ${this._renderStringInput( + getArrayConfigPath(CONF_CAMERAS_ARRAY_TITLE, cameraIndex), + )} + ${this._renderStringInput( + getArrayConfigPath(CONF_CAMERAS_ARRAY_ICON, cameraIndex), + )} + ${this._renderStringInput( + getArrayConfigPath(CONF_CAMERAS_ARRAY_ID, cameraIndex), + )} + ${this._renderEntitySelector( + getArrayConfigPath(CONF_CAMERAS_ARRAY_WEBRTC_CARD_ENTITY, cameraIndex), + 'camera', + )} + ${this._renderStringInput( + getArrayConfigPath(CONF_CAMERAS_ARRAY_WEBRTC_CARD_URL, cameraIndex), + )} + ${this._renderOptionSelector( + getArrayConfigPath(CONF_CAMERAS_ARRAY_DEPENDENT_CAMERAS, cameraIndex), + dependentCameras, + { + multiple: true, + }, + )} + ${this._renderSwitch( + getArrayConfigPath(CONF_CAMERAS_ARRAY_TRIGGER_BY_OCCUPANCY, cameraIndex), + frigateCardConfigDefaults.cameras.trigger_by_occupancy, + )} + ${this._renderSwitch( + getArrayConfigPath(CONF_CAMERAS_ARRAY_TRIGGER_BY_MOTION, cameraIndex), + frigateCardConfigDefaults.cameras.trigger_by_motion, + )} + ${this._renderOptionSelector( + getArrayConfigPath(CONF_CAMERAS_ARRAY_TRIGGER_BY_ENTITIES, cameraIndex), + entities, + { + multiple: true, + }, + )} +
` + : ``} +
`; } @@ -1014,10 +1035,10 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
${this._renderOptionSetHeader('cameras')} ${this._expandedMenus[MENU_OPTIONS] === 'cameras' - ? html`
+ ? html` ${cameras.map((_, index) => this._renderCamera(cameras, index, entities))} ${this._renderCamera(cameras, cameras.length, entities, true)} -
` + ` : ''} ${this._renderOptionSetHeader('view')} ${this._expandedMenus[MENU_OPTIONS] === 'view' @@ -1051,19 +1072,17 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor min: BUTTON_SIZE_MIN, })}
-
- ${this._renderMenuButton('frigate') /* */} - ${this._renderMenuButton('cameras') /* */} - ${this._renderMenuButton('live') /* */} - ${this._renderMenuButton('clips') /* */} - ${this._renderMenuButton('snapshots')} - ${this._renderMenuButton('image') /* */} - ${this._renderMenuButton('download')} - ${this._renderMenuButton('frigate_ui')} - ${this._renderMenuButton('fullscreen')} - ${this._renderMenuButton('timeline')} - ${this._renderMenuButton('media_player')} -
+ ${this._renderMenuButton('frigate') /* */} + ${this._renderMenuButton('cameras') /* */} + ${this._renderMenuButton('live') /* */} + ${this._renderMenuButton('clips') /* */} + ${this._renderMenuButton('snapshots')} + ${this._renderMenuButton('image') /* */} + ${this._renderMenuButton('download')} + ${this._renderMenuButton('frigate_ui')} + ${this._renderMenuButton('fullscreen')} + ${this._renderMenuButton('timeline')} + ${this._renderMenuButton('media_player')} ` : ''} ${this._renderOptionSetHeader('live')} @@ -1305,7 +1324,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor const domain = ev.target.domain; const key = ev.target.key; - if (this._expandedMenus[domain] == key) { + if (this._expandedMenus[domain] === key) { this._closeMenu(domain); } else { this._openMenu(domain, key); diff --git a/src/scss/editor.scss b/src/scss/editor.scss index 5ddfa307..4b9aafa4 100644 --- a/src/scss/editor.scss +++ b/src/scss/editor.scss @@ -23,10 +23,8 @@ pointer-events: none; } .values { - padding: 10px; background: var(--secondary-background-color); display: grid; - margin-bottom: 10px; } div.upgrade { width: auto; @@ -42,26 +40,39 @@ div.upgrade span { .submenu-header { display: flex; - margin-top: 10px; + padding: 10px; cursor: pointer; } +.submenu-header.selected { + background-color: var(--primary-color); + color: var(--primary-text-color); +} + .submenu-header * { flex-basis: auto; // Only allow clicks on the header. pointer-events: none; } -.submenu-header ha-icon { - padding-right: 10px; -} .submenu-header .new-camera { font-style: italic; +} +.submenu-header:not(.selected) .new-camera { color: var(--secondary-text-color, 'black'); } -.submenu { - margin: 5px 5px 10px 20px; + +.submenu-header ha-icon { + padding-right: 15px; } + +.submenu { + border: 1px solid var(--divider-color); +} +.submenu.selected { + border: 1px solid var(--primary-color); +} + .submenu .controls { display: inline-block; margin-left: auto; From 95c4423524a57a05f1908875a8e7d0858d9bfccf Mon Sep 17 00:00:00 2001 From: Dermot Duffy Date: Wed, 8 Jun 2022 19:03:13 -0700 Subject: [PATCH 2/2] Slight simplification. --- src/editor.ts | 33 +++++++++------------------------ src/scss/editor.scss | 4 ++-- 2 files changed, 11 insertions(+), 26 deletions(-) diff --git a/src/editor.ts b/src/editor.ts index 6b25275f..9eb6fc24 100644 --- a/src/editor.ts +++ b/src/editor.ts @@ -9,7 +9,7 @@ import { getConfigValue, isConfigUpgradeable, setConfigValue, - upgradeConfig, + upgradeConfig } from './config-mgmt.js'; import { CONF_CAMERAS, @@ -94,7 +94,7 @@ import { CONF_VIEW_TIMEOUT_SECONDS, CONF_VIEW_UPDATE_CYCLE_CAMERA, CONF_VIEW_UPDATE_FORCE, - CONF_VIEW_UPDATE_SECONDS, + CONF_VIEW_UPDATE_SECONDS } from './const.js'; import { localize } from './localize/localize.js'; import frigate_card_editor_style from './scss/editor.scss'; @@ -105,7 +105,7 @@ import { RawFrigateCardConfig, RawFrigateCardConfigArray, THUMBNAIL_WIDTH_MAX, - THUMBNAIL_WIDTH_MIN, + THUMBNAIL_WIDTH_MIN } from './types.js'; import { arrayMove } from './utils/basic.js'; import { getCameraID, getCameraTitle } from './utils/camera.js'; @@ -599,19 +599,14 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor } protected _renderViewScanMenu(): TemplateResult { - const selected = !!this._expandedMenus[MENU_VIEW_SCAN]; const submenuClasses = { submenu: true, - selected: selected, - }; - const headerClasses = { - 'submenu-header': true, - selected: selected, + selected: !!this._expandedMenus[MENU_VIEW_SCAN], }; return html`