flan/advanced-camera-card
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #524 from dermotduffy/menu-versatility

Browse Source 
Improve menu versatility and add menu alignment
This commit is contained in:
Dermot Duffy
2022-04-23 22:15:43 -07:00
committed by GitHub
parent 0ca4476a99 724dc32c79
commit 241ee4b204
10 changed files with 251 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+12 -11
View File
@@ -171,7 +171,9 @@ menu:
| Option | Default | Overridable | Description |
| - | - | - | - |
| `mode` | `hidden-top` | :white_check_mark: | The menu mode to show by default. See [menu modes](#menu-modes) below.|
| `style` | `hidden` | :white_check_mark: | The menu style to show by default, one of `none`, `hidden`, `hover`, `overlay`, or `outside`. See [menu styles](#menu-styles) below.|
| `position` | `top` | :white_check_mark: | Whether to show the menu on the `left`, `right`, `top` or `bottom` side of the card.|
| `alignment` | `left` | :white_check_mark: | Whether to align the menu buttons to the `left`, `right`, `top` or `bottom` of the menu. Some selections may have no effect depending on the value of `position` (e.g. it doesn't make sense to `left` align icons on a menu with `position` to the `left`).|
| `button_size` | 40 | :white_check_mark: | The size of the menu buttons in pixels. Must be >= `20`.|
| `buttons` | | :white_check_mark: | Whether to show or hide built-in buttons. See below. |
@@ -186,7 +188,7 @@ menu:
| Option | Default | Overridable | Description |
| - | - | - | - |
| `frigate` | `true` | :white_check_mark: | Whether to show the `Frigate` menu button: brings the user to the default configured view (`view.default`), or collapses/expands the menu if the `menu.mode` is `hidden-*` . |
| `frigate` | `true` | :white_check_mark: | Whether to show the `Frigate` menu button: brings the user to the default configured view (`view.default`), or collapses/expands the menu if the `menu.style` is `hidden` . |
| `cameras` | `true` | :white_check_mark: | Whether to show the camera selection submenu. Will only appear if multiple cameras are configured. |
| `live` | `true` | :white_check_mark: | Whether to show the `live` view menu button: brings the user to the `live` view. See [views](#views) below.|
| `clips` | `true` | :white_check_mark: | Whether to show the `clips` view menu button: brings the user to the `clips` view on tap and the most-recent `clip` view on hold. See [views](#views) below. This button will never be shown if the `camera_name` for the selected camera is not auto-detected/specified (e.g. non-Frigate cameras), or if the `camera_name` is `birdseye`.|
@@ -655,7 +657,7 @@ Parameters for the `custom:frigate-card-conditional` element:
|`frigate_ui`|Open the Frigate UI at the configured URL.|
|`fullscreen`|Toggle fullscreen.|
|`camera_select`|Select a given camera. Takes a single additional `camera` parameter with the [camera ID](#camera-ids) of the camera to select. Respects the value of `view.camera_select` to choose the appropriate view on the new camera.|
|`menu_toggle` | Show/hide the menu (for `hidden-*` mode menus). |
|`menu_toggle` | Show/hide the menu (for the `hidden` mode style). |
<a name="views"></a>
@@ -747,17 +749,16 @@ next/previous controls, thumbnails, etc), but in some cases this is not possible
(e.g. embedded WebRTC card controls) -- in these cases duplicate actions may
occur with certain configurations (e.g. `tap`).
## Menu Modes
## Menu Styles
This card supports several menu configurations.
This card supports several menu styles.
| Key | Description | Screenshot |
| ------------- | --------------------------------------------- | - |
|`hidden-{top,bottom,right,left}` [default: `hidden-top`]| Hide the menu by default, expandable upon clicking the Frigate button. | <img src="https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/main/images/menu-mode-hidden.png" alt="Menu hidden" width="400px"> |
|`overlay-{top,bottom,right,left}`| Overlay the menu over the card contents. The Frigate button shows the default view. | <img src="https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/main/images/menu-mode-overlay.png" alt="Menu overlaid" width="400px"> |
|`hover-{top,bottom,right,left}`| Overlay the menu over the card contents when the mouse is over the card / touch on the card, otherwise it is not shown. The Frigate button shows the default view. | <img src="https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/main/images/menu-mode-overlay.png" alt="Menu overlaid" width="400px"> |
|`above`| Render the menu above the card. The Frigate button shows the default view. | <img src="https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/main/images/menu-mode-above.png" alt="Menu above" width="400px"> |
|`below`| Render the menu below the card. The Frigate button shows the default view. | <img src="https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/main/images/menu-mode-below.png" alt="Menu below" width="400px"> |
|`hidden`| Hide the menu by default, expandable upon clicking the Frigate button. | <img src="https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/main/images/menu-mode-hidden.png" alt="Menu hidden" width="400px"> |
|`overlay`| Overlay the menu over the card contents. The Frigate button shows the default view. | <img src="https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/main/images/menu-mode-overlay.png" alt="Menu overlaid" width="400px"> |
|`hover`| Overlay the menu over the card contents when the mouse is over the card / touch on the card, otherwise it is not shown. The Frigate button shows the default view. | <img src="https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/main/images/menu-mode-overlay.png" alt="Menu overlaid" width="400px"> |
|`outside`| Render the menu outside the card (i.e. above it if `position` is `top`, or below it if `position` is `bottom`). The Frigate button shows the default view. | <img src="https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/main/images/menu-mode-above.png" alt="Menu above" width="400px"> |
|`none`| No menu is shown. | <img src="https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/main/images/menu-mode-none.png" alt="No Menu" width="400px"> |
<a name="screenshots"></a>
@@ -1189,7 +1190,7 @@ overrides:
fullscreen: true
overrides:
menu:
mode: none
style: none
```
</details>
src/card.ts
+5 -2
View File
@@ -1203,6 +1203,9 @@ export class FrigateCard extends LitElement {
};
const actions = this._getMergedActions();
const renderMenuAbove =
this._getConfig().menu.style === 'outside' &&
this._getConfig().menu.position === 'top';
return html` <ha-card
.actionHandler=${actionHandler({
@@ -1216,7 +1219,7 @@ export class FrigateCard extends LitElement {
@frigate-card:media-show=${this._mediaShowHandler}
@frigate-card:render=${() => this.requestUpdate()}
>
${this._getConfig().menu.mode == 'above' ? this._renderMenu() : ''}
${renderMenuAbove ? this._renderMenu() : ''}
<div class="container outer" style="${styleMap(outerStyle)}">
<div class="${classMap(contentClasses)}">
${this._cameras === undefined
@@ -1261,7 +1264,7 @@ export class FrigateCard extends LitElement {
}
</div>
</div>
${this._getConfig().menu.mode != 'above' ? this._renderMenu() : ''}
${!renderMenuAbove ? this._renderMenu() : ''}
</ha-card>`;
}
src/components/menu.ts
+9 -7
View File
@@ -64,8 +64,11 @@ export class FrigateCardMenu extends LitElement {
`${menuConfig.button_size}px`,
);
}
// Store the menu mode as an attribute (used for CSS attribute selectors).
this.setAttribute('data-mode', menuConfig.mode);
// Store the menu style, position and alignment as attributes (used for
// styling).
this.setAttribute('data-style', menuConfig.style);
this.setAttribute('data-position', menuConfig.position);
this.setAttribute('data-alignment', menuConfig.alignment);
}
@state()
protected _menuConfig?: MenuConfig;
@@ -82,7 +85,7 @@ export class FrigateCardMenu extends LitElement {
* @returns `true` if the menu is hiding, `false` otherwise.
*/
static isHidingMenu(menuConfig: MenuConfig | undefined): boolean {
return menuConfig?.mode.startsWith('hidden-') ?? false;
return menuConfig?.style === 'hidden' ?? false;
}
/**
@@ -265,15 +268,14 @@ export class FrigateCardMenu extends LitElement {
if (!this._menuConfig) {
return;
}
const mode = this._menuConfig.mode;
if (mode == 'none') {
const style = this._menuConfig.style;
if (style === 'none') {
return;
}
// If the hidden menu isn't expanded, only show the Frigate button.
const buttons =
!mode.startsWith('hidden-') || this.expanded
style !== 'hidden' || this.expanded
? this.buttons
: this.buttons.filter((button) => button.icon === FRIGATE_BUTTON_MENU_ICON);
return html` ${buttons.map((button) => this._renderButton(button))} `;
src/config-mgmt.ts
+89 -15
View File
@@ -19,7 +19,8 @@ import {
CONF_LIVE_WEBRTC_CARD,
CONF_MENU,
CONF_MENU_BUTTON_SIZE,
CONF_MENU_MODE,
CONF_MENU_POSITION,
CONF_MENU_STYLE,
CONF_OVERRIDES,
CONF_VIEW_DEFAULT,
CONF_VIEW_TIMEOUT_SECONDS,
@@ -203,7 +204,7 @@ const toPixelsOrDelete = function (value: unknown): number | null | undefined {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const deleteProperty = function (_value: unknown): number | null | undefined {
return null;
}
};
/**
* Move a property from one location to another.
@@ -218,6 +219,7 @@ export const moveConfigValue = (
oldPath: string,
newPath: string,
transform?: (valueIn: unknown) => unknown,
keepOriginal?: boolean,
): boolean => {
const inValue = getConfigValue(obj, oldPath);
if (inValue === undefined) {
@@ -228,11 +230,16 @@ export const moveConfigValue = (
return false;
}
if (outValue === null) {
deleteConfigValue(obj, oldPath);
return true;
if (!keepOriginal) {
deleteConfigValue(obj, oldPath);
return true;
}
return false;
}
if (outValue !== undefined) {
deleteConfigValue(obj, oldPath);
if (!keepOriginal) {
deleteConfigValue(obj, oldPath);
}
setConfigValue(obj, newPath, outValue);
return true;
}
@@ -260,9 +267,10 @@ const upgradeMoveTo = function (
oldPath: string,
newPath: string,
transform?: (valueIn: unknown) => unknown,
keepOriginal?: boolean,
): (obj: RawFrigateCardConfig) => boolean {
return function (obj: RawFrigateCardConfig): boolean {
return moveConfigValue(obj, oldPath, newPath, transform);
return moveConfigValue(obj, oldPath, newPath, transform, keepOriginal);
};
};
@@ -278,13 +286,14 @@ const upgradeMoveToWithOverrides = function (
oldPath: string,
newPath: string,
transform?: (valueIn: unknown) => unknown,
keepOriginal?: boolean,
): (obj: RawFrigateCardConfig) => boolean {
return function (obj: RawFrigateCardConfig): boolean {
let modified = upgradeMoveTo(oldPath, newPath, transform)(obj);
let modified = upgradeMoveTo(oldPath, newPath, transform, keepOriginal)(obj);
modified =
upgradeArrayValue(
CONF_OVERRIDES,
upgradeMoveTo(oldPath, newPath, transform),
upgradeMoveTo(oldPath, newPath, transform, keepOriginal),
(obj) => obj.overrides as RawFrigateCardConfig | undefined,
)(obj) || modified;
return modified;
@@ -334,8 +343,7 @@ const upgradeArrayValue = function (
/**
* Upgrade from a singular camera model to multiple.
* @param key A string key.
* @returns A safe key.
* @returns An upgrade function.
*/
const upgradeToMultipleCameras = (): ((obj: RawFrigateCardConfig) => boolean) => {
return function (obj: RawFrigateCardConfig): boolean {
@@ -366,6 +374,74 @@ const upgradeToMultipleCameras = (): ((obj: RawFrigateCardConfig) => boolean) =>
};
};
/**
* Upgrade from a menu-mode to a style & position.
* @returns An upgrade function.
*/
const upgradeMenuModeToStyleAndPosition = (): ((
obj: RawFrigateCardConfig,
) => boolean) => {
return function (obj: RawFrigateCardConfig): boolean {
let modified = false;
// Change the 'start' of the mode into a style.
modified =
upgradeMoveToWithOverrides(
'menu.mode',
CONF_MENU_STYLE,
(mode: unknown): string | undefined => {
if (typeof mode === 'string') {
const result = mode.match(/^(hover|hidden|overlay|above|below|none)/);
if (result) {
switch (result[1]) {
case 'hover':
case 'hidden':
case 'overlay':
case 'none':
return result[1];
case 'above':
case 'below':
return 'outside';
}
}
}
return undefined;
},
true,
)(obj) || modified;
// Change the 'end' of the mode into a position.
modified =
upgradeMoveToWithOverrides(
'menu.mode',
CONF_MENU_POSITION,
(mode: unknown): string | undefined => {
if (typeof mode === 'string') {
const result = mode.match(/(above|below|left|right|top|bottom)$/);
if (result) {
switch (result[1]) {
case 'left':
case 'right':
case 'top':
case 'bottom':
return result[1];
case 'above':
return 'top';
case 'below':
return 'bottom';
}
}
}
return undefined;
},
true,
)(obj) || modified;
// Delete the old `menu.mode` .
return upgradeWithOverrides('menu.mode', deleteProperty)(obj) || modified;
};
};
/**
* Upgrade from a condition on the menu (to allow rendering) to a menu mode
* override instead.
@@ -415,7 +491,7 @@ const UPGRADES = [
upgradeMoveTo('autoplay_clip', 'event_viewer.autoplay_clip'),
upgradeMoveTo('controls.nextprev', CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_STYLE),
upgradeMoveTo('controls.nextprev_size', CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE),
upgradeMoveTo('menu_mode', CONF_MENU_MODE),
upgradeMoveTo('menu_mode', 'menu.mode'),
upgradeMoveTo('menu_buttons', 'menu.buttons'),
upgradeMoveTo('menu_button_size', CONF_MENU_BUTTON_SIZE),
upgradeMoveTo('image', 'image.src', isNotObject),
@@ -461,8 +537,6 @@ const UPGRADES = [
CONF_MENU_BUTTON_SIZE,
createRangedTransform(toPixelsOrDelete, BUTTON_SIZE_MIN),
),
upgradeWithOverrides(
'event_gallery.min_columns',
deleteProperty
),
upgradeWithOverrides('event_gallery.min_columns', deleteProperty),
upgradeMenuModeToStyleAndPosition(),
];
src/const.ts
+3 -1
View File
@@ -108,6 +108,9 @@ export const CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_CONTROLS =
`${CONF_TIMELINE}.controls.thumbnails.show_controls` as const;
export const CONF_MENU = 'menu' as const;
export const CONF_MENU_ALIGNMENT = `${CONF_MENU}.alignment` as const;
export const CONF_MENU_POSITION = `${CONF_MENU}.position` as const;
export const CONF_MENU_STYLE = `${CONF_MENU}.style` as const;
export const CONF_MENU_BUTTONS_FRIGATE = `${CONF_MENU}.buttons.frigate` as const;
export const CONF_MENU_BUTTONS_FRIGATE_UI = `${CONF_MENU}.buttons.frigate_ui` as const;
export const CONF_MENU_BUTTONS_FRIGATE_FULLSCREEN =
@@ -119,7 +122,6 @@ export const CONF_MENU_BUTTONS_CLIPS = `${CONF_MENU}.buttons.clips` as const;
export const CONF_MENU_BUTTONS_SNAPSHOTS = `${CONF_MENU}.buttons.snapshots` as const;
export const CONF_MENU_BUTTONS_IMAGE = `${CONF_MENU}.buttons.image` as const;
export const CONF_MENU_BUTTON_SIZE = `${CONF_MENU}.button_size` as const;
export const CONF_MENU_MODE = `${CONF_MENU}.mode` as const;
export const CONF_DIMENSIONS = 'dimensions' as const;
export const CONF_DIMENSIONS_ASPECT_RATIO = `${CONF_DIMENSIONS}.aspect_ratio` as const;
src/editor.ts
+29 -23
View File
@@ -64,6 +64,7 @@ import {
CONF_LIVE_LAZY_UNLOAD,
CONF_LIVE_PRELOAD,
CONF_LIVE_TRANSITION_EFFECT,
CONF_MENU_ALIGNMENT,
CONF_MENU_BUTTONS_CLIPS,
CONF_MENU_BUTTONS_FRIGATE,
CONF_MENU_BUTTONS_FRIGATE_DOWNLOAD,
@@ -73,7 +74,8 @@ import {
CONF_MENU_BUTTONS_LIVE,
CONF_MENU_BUTTONS_SNAPSHOTS,
CONF_MENU_BUTTON_SIZE,
CONF_MENU_MODE,
CONF_MENU_POSITION,
CONF_MENU_STYLE,
CONF_TIMELINE_CLUSTERING_THRESHOLD,
CONF_TIMELINE_CONTROLS_THUMBNAILS_MODE,
CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_CONTROLS,
@@ -89,11 +91,7 @@ import {
CONF_VIEW_UPDATE_FORCE,
CONF_VIEW_UPDATE_SECONDS,
} from './const.js';
import {
arrayMove,
getCameraID,
getCameraTitle,
} from './common.js';
import { arrayMove, getCameraID, getCameraTitle } from './common.js';
import {
copyConfig,
deleteConfigValue,
@@ -219,23 +217,29 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
{ value: 'current', label: localize('config.view.views.current') },
];
protected _menuModes: EditorSelectOption[] = [
protected _menuStyles: EditorSelectOption[] = [
{ value: '', label: '' },
{ value: 'none', label: localize('config.menu.modes.none') },
{ value: 'hidden-top', label: localize('config.menu.modes.hidden-top') },
{ value: 'hidden-left', label: localize('config.menu.modes.hidden-left') },
{ value: 'hidden-bottom', label: localize('config.menu.modes.hidden-bottom') },
{ value: 'hidden-right', label: localize('config.menu.modes.hidden-right') },
{ value: 'overlay-top', label: localize('config.menu.modes.overlay-top') },
{ value: 'overlay-left', label: localize('config.menu.modes.overlay-left') },
{ value: 'overlay-bottom', label: localize('config.menu.modes.overlay-bottom') },
{ value: 'overlay-right', label: localize('config.menu.modes.overlay-right') },
{ value: 'hover-top', label: localize('config.menu.modes.hover-top') },
{ value: 'hover-left', label: localize('config.menu.modes.hover-left') },
{ value: 'hover-bottom', label: localize('config.menu.modes.hover-bottom') },
{ value: 'hover-right', label: localize('config.menu.modes.hover-right') },
{ value: 'above', label: localize('config.menu.modes.above') },
{ value: 'below', label: localize('config.menu.modes.below') },
{ value: 'none', label: localize('config.menu.styles.none') },
{ value: 'hidden', label: localize('config.menu.styles.hidden') },
{ value: 'overlay', label: localize('config.menu.styles.overlay') },
{ value: 'hover', label: localize('config.menu.styles.hover') },
{ value: 'outside', label: localize('config.menu.styles.outside') },
];
protected _menuPositions: EditorSelectOption[] = [
{ value: '', label: '' },
{ value: 'left', label: localize('config.menu.positions.left') },
{ value: 'right', label: localize('config.menu.positions.right') },
{ value: 'top', label: localize('config.menu.positions.top') },
{ value: 'bottom', label: localize('config.menu.positions.bottom') },
];
protected _menuAlignments: EditorSelectOption[] = [
{ value: '', label: '' },
{ value: 'left', label: localize('config.menu.alignments.left') },
{ value: 'right', label: localize('config.menu.alignments.right') },
{ value: 'top', label: localize('config.menu.alignments.top') },
{ value: 'bottom', label: localize('config.menu.alignments.bottom') },
];
protected _eventViewerNextPreviousControlStyles: EditorSelectOption[] = [
@@ -878,7 +882,9 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
${options.menu.show
? html`
<div class="values">
${this._renderOptionSelector(CONF_MENU_MODE, this._menuModes)}
${this._renderOptionSelector(CONF_MENU_STYLE, this._menuStyles)}
${this._renderOptionSelector(CONF_MENU_POSITION, this._menuPositions)}
${this._renderOptionSelector(CONF_MENU_ALIGNMENT, this._menuAlignments)}
${this._renderNumberInput(CONF_MENU_BUTTON_SIZE, BUTTON_SIZE_MIN)}
${this._renderSwitch(
CONF_MENU_BUTTONS_FRIGATE,
src/localize/languages/en.json
+20 -16
View File
@@ -164,23 +164,27 @@
"download": "Download event media",
"cameras": "Select camera"
},
"mode": "Menu mode",
"modes": {
"style": "Menu style",
"styles": {
"none": "No menu",
"hidden-top": "Hidden top",
"hidden-left": "Hidden left",
"hidden-bottom": "Hidden bottom",
"hidden-right": "Hidden right",
"overlay-top": "Overlay top",
"overlay-left": "Overlay left",
"overlay-bottom": "Overlay bottom",
"overlay-right": "Overlay right",
"hover-top": "Hover top",
"hover-left": "Hover left",
"hover-bottom": "Hover bottom",
"hover-right": "Hover right",
"above": "Above",
"below": "Below"
"hidden": "Hidden menu",
"overlay": "Overlay menu",
"hover": "Hover menu",
"outside": "Outside menu"
},
"position": "Menu position",
"positions": {
"left": "Positioned on the left",
"right": "Positioned on the right",
"top": "Positioned on the top",
"bottom": "Positioned on the bottom"
},
"alignment": "Menu alignment",
"alignments": {
"left": "Aligned to the left",
"right": "Aligned to the right",
"top": "Aligned to the top",
"bottom": "Aligned to the bottom"
},
"button_size": "Menu button size in pixels"
},
src/scss/card.scss
+12 -8
View File
@@ -29,11 +29,14 @@
height: inherit;
margin: auto;
overflow: auto;
-ms-overflow-style: none; /* Hide scrollbar: IE and Edge */
scrollbar-width: none; /* Hide scrollbar: Firefox */
display: flex;
align-items: center;
justify-content: center;
// Hide scrollbar: Firefox
scrollbar-width: none;
// Hide scrollbar: IE and Edge
-ms-overflow-style: none;
}
/* Hide scrollbar for Chrome, Safari and Opera */
@@ -51,16 +54,17 @@
}
/* The 'hover' menu mode is styling applied outside of the menu itself */
frigate-card-menu[data-mode^=hover-] {
frigate-card-menu[data-style='hover'] {
z-index: 1;
transition: opacity 0.5s ease;
}
.outer + frigate-card-menu[data-mode^=hover-] {
opacity: 0.0;
.outer + frigate-card-menu[data-style='hover'] {
opacity: 0;
}
.outer:hover + frigate-card-menu[data-mode^=hover-], frigate-card-menu[data-mode^=hover-]:hover {
opacity: 1.0;
.outer:hover + frigate-card-menu[data-style='hover'],
frigate-card-menu[data-mode='hover']:hover {
opacity: 1;
}
ha-card {
@@ -78,7 +82,7 @@ ha-card {
border-radius: var(--ha-card-border-radius, 4px);
}
frigate-card-live.hidden {
frigate-card-live.hidden {
// Live view will be rendered but hidden for live preloading.
display: none;
}
src/scss/menu.scss
+53 -38
View File
@@ -14,23 +14,41 @@
flex-wrap: wrap;
}
:host([data-mode="above"]),:host([data-mode="below"]) {
:host([data-style='outside']) {
width: 100%;
background: var(--secondary-background-color);
}
:host([data-mode="above"]) {
:host([data-mode='outside'][data-position='top']) {
border-top-left-radius: var(--ha-card-border-radius, 4px);
border-top-right-radius: var(--ha-card-border-radius, 4px);
}
:host([data-mode="below"]) {
:host([data-mode='outside'][data-position='below']) {
border-bottom-left-radius: var(--ha-card-border-radius, 4px);
border-bottom-right-radius: var(--ha-card-border-radius, 4px);
}
:host([data-mode$="-left"]) {
left: 0px;
:host([data-position='top']),
:host([data-position='left'][data-alignment='top']),
:host([data-position='right'][data-alignment='top']) {
top: 0px;
}
:host([data-position='bottom']),
:host([data-position='left'][data-alignment='bottom']),
:host([data-position='right'][data-alignment='bottom']) {
bottom: 0px;
}
:host([data-position='left']),
:host([data-position='top'][data-alignment='left']),
:host([data-position='bottom'][data-alignment='left']) {
left: 0px;
}
:host([data-position='right']),
:host([data-position='top'][data-alignment='right']),
:host([data-position='bottom'][data-alignment='right']) {
right: 0px;
}
:host([data-position='left']) {
// Awful hack: Flexbox column wrapping doesn't work properly in most major
// browsers -- the element boundary does not expand to cover the full wrapped
// content as it should. This results in the wrapped 'content' appearing
@@ -43,66 +61,63 @@
// - https://bugs.chromium.org/p/chromium/issues/detail?id=507397
writing-mode: vertical-lr;
}
:host([data-mode$="-right"]) {
right: 0px;
top: 0px;
:host([data-position='right']) {
// See "Awful hack" above.
writing-mode: vertical-rl;
}
:host([data-mode$="-top"]) {
left: 0px;
top: 0px;
:host([data-position='left'][data-alignment='bottom']),
:host([data-position='right'][data-alignment='bottom']),
:host([data-position='top'][data-alignment='right']),
:host([data-position='bottom'][data-alignment='right']) {
flex-direction: row-reverse;
}
:host([data-mode$="-bottom"]) {
left: 0px;
bottom: 0px;
:host([data-position='bottom']) {
// If the menu has more content that allows, "wrap upwards" to keep the
// Frigate button in the same place.
flex-wrap: wrap-reverse;
}
:host([data-mode^="overlay-"]),:host([data-mode^="hover-"]),:host([data-mode^="hidden-"]) {
:host([data-style='overlay']),
:host([data-style='hover']),
:host([data-style='hidden']) {
position: absolute;
overflow: hidden;
width: calc(var(--frigate-card-menu-button-size) + 6px);
height: calc(var(--frigate-card-menu-button-size) + 6px);
}
:host([data-mode="overlay-top"]),
:host([data-mode="overlay-bottom"]),
:host([data-mode="hover-top"]),
:host([data-mode="hover-bottom"]),
:host([data-mode="hidden-top"][expanded]),
:host([data-mode="hidden-bottom"][expanded]) {
:host([data-style='overlay'][data-position='top']),
:host([data-style='overlay'][data-position='bottom']),
:host([data-style='hover'][data-position='top']),
:host([data-style='hover'][data-position='bottom']),
:host([data-style='hidden'][data-position='top'][expanded]),
:host([data-style='hidden'][data-position='bottom'][expanded]) {
width: 100%;
height: auto;
overflow: visible;
background: linear-gradient(90deg, rgba(0,0,0,0.3), rgba(0,0,0,0));
background: linear-gradient(90deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
}
:host([data-mode="overlay-left"]),
:host([data-mode="overlay-right"]),
:host([data-mode="hover-left"]),
:host([data-mode="hover-right"]),
:host([data-mode="hidden-left"][expanded]),
:host([data-mode="hidden-right"][expanded]) {
:host([data-style='overlay'][data-position='left']),
:host([data-style='overlay'][data-position='right']),
:host([data-style='hover'][data-position='left']),
:host([data-style='hover'][data-position='right']),
:host([data-style='hidden'][data-position='left'][expanded]),
:host([data-style='hidden'][data-position='right'][expanded]) {
height: 100%;
width: auto;
overflow: visible;
background: linear-gradient(180deg, rgba(0,0,0,0.3), rgba(0,0,0,0));
background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
}
:host([data-mode="overlay-left"]) > *,
:host([data-mode="hover-left"]) > *,
:host([data-mode="hidden-left"]) > *,
:host([data-mode="overlay-right"]) > *,
:host([data-mode="hover-right"]) > *,
:host([data-mode="hidden-right"]) > * {
:host([data-style='overlay'][data-position='left']) > *,
:host([data-style='overlay'][data-position='right']) > *,
:host([data-style='hover'][data-position='left']) > *,
:host([data-style='hover'][data-position='right']) > *,
:host([data-style='hidden'][data-position='left']) > *,
:host([data-style='hidden'][data-position='right']) > * {
// See "Awful hack" above.
writing-mode: horizontal-tb;
}
src/types.ts
+19 -17
View File
@@ -53,23 +53,21 @@ const FRIGATE_CARD_VIEWS = [
export type FrigateCardView = typeof FRIGATE_CARD_VIEWS[number];
const FRIGATE_MENU_MODES = [
const FRIGATE_MENU_STYLES = [
'none',
'hidden-top',
'hidden-left',
'hidden-bottom',
'hidden-right',
'overlay-top',
'overlay-left',
'overlay-bottom',
'overlay-right',
'hover-top',
'hover-left',
'hover-bottom',
'hover-right',
'above',
'below',
'hidden',
'overlay',
'hover',
'outside',
] as const;
const FRIGATE_MENU_POSITIONS = [
'left',
'right',
'top',
'bottom',
] as const;
const FRIGATE_MENU_ALIGNMENTS = FRIGATE_MENU_POSITIONS;
const LIVE_PROVIDERS = ['auto', 'ha', 'frigate-jsmpeg', 'webrtc-card'] as const;
export type LiveProvider = typeof LIVE_PROVIDERS[number];
@@ -615,7 +613,9 @@ export type LiveConfig = z.infer<typeof liveConfigSchema>;
* Menu configuration section.
*/
const menuConfigDefault = {
mode: 'hidden-top' as const,
style: 'hidden' as const,
position: 'top' as const,
alignment: 'left' as const,
buttons: {
frigate: true,
cameras: true,
@@ -633,7 +633,9 @@ const menuConfigDefault = {
const menuConfigSchema = z
.object({
mode: z.enum(FRIGATE_MENU_MODES).default(menuConfigDefault.mode),
style: z.enum(FRIGATE_MENU_STYLES).default(menuConfigDefault.style),
position: z.enum(FRIGATE_MENU_POSITIONS).default(menuConfigDefault.position),
alignment: z.enum(FRIGATE_MENU_ALIGNMENTS).default(menuConfigDefault.alignment),
buttons: z
.object({
frigate: z.boolean().default(menuConfigDefault.buttons.frigate),