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

Add a hover-card menu style.

Browse Source
This commit is contained in:
Dermot Duffy
2022-10-10 20:43:35 -07:00
parent 5fac1c2e1f
commit c35fdc56d5
7 changed files with 21 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/editor.ts
+1
View File
@@ -284,6 +284,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
{ 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: 'hover-card', label: localize('config.menu.styles.hover-card') },
{ value: 'outside', label: localize('config.menu.styles.outside') },
];
src/localize/languages/en.json
+1
View File
@@ -236,6 +236,7 @@
"styles": {
"hidden": "Hidden menu",
"hover": "Hover menu",
"hover-card": "Hover menu (card-wide)",
"none": "No menu",
"outside": "Outside menu",
"overlay": "Overlay menu"
src/scss/card.scss
+7 -4
View File
@@ -58,18 +58,22 @@ div.main.curve-bottom {
border-bottom-right-radius: var(--ha-card-border-radius, 4px);
}
/* The 'hover' menu mode is styling applied outside of the menu itself */
frigate-card-menu[data-style='hover'] {
/* The 'hover' menu mode is styled applied outside of the menu itself */
frigate-card-menu[data-style*='hover'] {
z-index: 1;
transition: opacity 0.5s ease;
}
.main + frigate-card-menu[data-style='hover'] {
.main + frigate-card-menu[data-style*='hover'] {
opacity: 0;
}
frigate-card-menu[data-style='hover']:hover {
opacity: 1;
}
.main:hover + frigate-card-menu[data-style='hover-card'],
frigate-card-menu[data-style='hover-card']:hover {
opacity: 1;
}
ha-card {
display: flex;
@@ -98,7 +102,6 @@ ha-card.triggered {
animation: warning-pulse 5s infinite;
}
frigate-card-live.hidden {
// Live view will be rendered but hidden for live preloading.
display: none;
src/scss/menu.scss
+7 -7
View File
@@ -114,8 +114,8 @@ div.opposing {
}
:host(:not([data-style='outside'])[data-style='overlay'][data-position='left']) div > *,
:host(:not([data-style='outside'])[data-style='overlay'][data-position='right']) div > *,
:host(:not([data-style='outside'])[data-style='hover'][data-position='left']) div > *,
:host(:not([data-style='outside'])[data-style='hover'][data-position='right']) div > *,
:host(:not([data-style='outside'])[data-style*='hover'][data-position='left']) div > *,
:host(:not([data-style='outside'])[data-style*='hover'][data-position='right']) div > *,
:host(:not([data-style='outside'])[data-style='hidden'][data-position='left']) div > *,
:host(:not([data-style='outside'])[data-style='hidden'][data-position='right']) div > * {
// See "Awful hack" above. Note that this "cancelation" of writing mode only
@@ -154,7 +154,7 @@ div.opposing {
********************************************/
:host([data-style='overlay']),
:host([data-style='hover']),
:host([data-style*=hover]),
:host([data-style='hidden']) {
position: absolute;
overflow: hidden;
@@ -164,8 +164,8 @@ div.opposing {
: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*='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%;
@@ -176,8 +176,8 @@ div.opposing {
: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*='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%;
src/types.ts
+1 -1
View File
@@ -52,7 +52,7 @@ export type FrigateCardUserSpecifiedView =
typeof FRIGATE_CARD_VIEWS_USER_SPECIFIED[number];
export const FRIGATE_CARD_VIEW_DEFAULT = 'live' as const;
const FRIGATE_MENU_STYLES = ['none', 'hidden', 'overlay', 'hover', 'outside'] as const;
const FRIGATE_MENU_STYLES = ['none', 'hidden', 'overlay', 'hover', 'hover-card', 'outside'] as const;
const FRIGATE_MENU_POSITIONS = ['left', 'right', 'top', 'bottom'] as const;
const FRIGATE_MENU_ALIGNMENTS = FRIGATE_MENU_POSITIONS;