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

Add support for a 'hover' menu.

Browse Source
This commit is contained in:
Dermot Duffy
2021-09-08 20:58:01 -07:00
parent 632fdb0079
commit 0e8e0d38c5
7 changed files with 45 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+2 -1
View File
@@ -198,7 +198,8 @@ This card supports several menu configurations.
| Key | Description | Screenshot |
| ------------- | --------------------------------------------- | - |
|`hidden-{top,bottom,right,left}` [default: `hidden-top`]| Hide the menu by default, expandable upon clicking the 'F' 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 on top of the card contents. The 'F' 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"> |
|`overlay-{top,bottom,right,left}`| Overlay the menu over the card contents. The 'F' 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 'F' 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 'F' 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 'F' 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"> |
|`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"> |
src/editor.ts
+4
View File
@@ -115,6 +115,10 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
'overlay-left': localize('menu_mode.overlay-left'),
'overlay-bottom': localize('menu_mode.overlay-bottom'),
'overlay-right': localize('menu_mode.overlay-right'),
'hover-top': localize('menu_mode.hover-top'),
'hover-left': localize('menu_mode.hover-left'),
'hover-bottom': localize('menu_mode.hover-bottom'),
'hover-right': localize('menu_mode.hover-right'),
above: localize('menu_mode.above'),
below: localize('menu_mode.below'),
};
src/frigate-hass-card.ts
+16 -6
View File
@@ -169,12 +169,18 @@ export class FrigateCardMenu extends LitElement {
const classes = {
'frigate-card-menu': true,
'overlay-hidden':
this.menuMode.startsWith('hidden-') || this.menuMode.startsWith('overlay-'),
this.menuMode.startsWith('hidden-') ||
this.menuMode.startsWith('overlay-') ||
this.menuMode.startsWith('hover-'),
'expanded-horizontal':
(this.menuMode.startsWith('overlay-') || this.expand) &&
(this.menuMode.startsWith('overlay-') ||
this.menuMode.startsWith('hover-') ||
this.expand) &&
(this.menuMode.endsWith('-top') || this.menuMode.endsWith('-bottom')),
'expanded-vertical':
(this.menuMode.startsWith('overlay-') || this.expand) &&
(this.menuMode.startsWith('overlay-') ||
this.menuMode.startsWith('hover-') ||
this.expand) &&
(this.menuMode.endsWith('-left') || this.menuMode.endsWith('-right')),
full: ['above', 'below'].includes(this.menuMode),
left: this.menuMode.endsWith('-left'),
@@ -978,9 +984,13 @@ export class FrigateCard extends LitElement {
}
protected _renderMenu(): TemplateResult | void {
const classes = {
'hover-menu': this.config.menu_mode.startsWith('hover-'),
};
return html`
<frigate-card-menu
id="${FrigateCardMenu.FRIGATE_CARD_MENU_ID}"
class="${classMap(classes)}"
.actionCallback=${this._menuActionHandler.bind(this)}
.menuMode=${this.config.menu_mode}
.buttons=${this._getMenuButtons()}
@@ -997,8 +1007,8 @@ export class FrigateCard extends LitElement {
return this._showError(localize('common.show_error'));
}
return html` <ha-card @click=${this._interactionHandler}>
${this.config.menu_mode != 'below' ? this._renderMenu() : ''}
<div class="container_16_9">
${this.config.menu_mode == 'above' ? this._renderMenu() : ''}
<div class="container_16_9 outer">
<div class="frigate-card-contents">
${this._view.is('clips') || this._view.is('snapshots')
? until(this._renderEvents(), this._renderProgressIndicator())
@@ -1009,7 +1019,7 @@ export class FrigateCard extends LitElement {
${this._view.is('live') ? this._renderLiveViewer() : ``}
</div>
</div>
${this.config.menu_mode == 'below' ? this._renderMenu() : ''}
${this.config.menu_mode != 'above' ? this._renderMenu() : ''}
</ha-card>`;
}
src/localize/languages/en.json
+4
View File
@@ -59,6 +59,10 @@
"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"
},
src/scss/card.scss
+12
View File
@@ -22,6 +22,18 @@
scrollbar-width: none; /* Hide scrollbar: Firefox */
}
/* Support the 'hover' menu mode. */
.hover-menu {
z-index: 1;
transition: all 0.5s ease;
}
.outer + .hover-menu {
opacity: 0.0;
}
.outer:hover + .hover-menu, .hover-menu:hover {
opacity: 1.0;
}
.frigate-card-contents img.media,video.media {
width: 100%;
}
src/scss/menu.scss
+3 -3
View File
@@ -13,16 +13,16 @@
position: absolute;
width: 46px;
}
.frigate-card-menu.overlay-hidden.left {
.frigate-card-menu.overlay-hidden.left, .frigate-card-menu.overlay-hidden.top {
left: 0px;
top: 0px;
}
.frigate-card-menu.overlay-hidden.right {
right: 0px;
}
.frigate-card-menu.overlay-hidden.top {
top: 0px;
}
.frigate-card-menu.overlay-hidden.bottom {
left: 0px;
bottom: 0px;
}
.frigate-card-menu.overlay-hidden.expanded-horizontal {
src/types.ts
+4
View File
@@ -34,6 +34,10 @@ export const FRIGATE_MENU_MODES = [
'overlay-left',
'overlay-bottom',
'overlay-right',
'hover-top',
'hover-left',
'hover-bottom',
'hover-right',
'above',
'below',
] as const;