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

Initial version of status bar.

Browse Source
This commit is contained in:
Dermot Duffy
2024-08-16 20:08:21 -07:00
parent db9303c60d
commit e503f0e429
77 changed files with 3072 additions and 1061 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/scss/card.scss
+49 -17
View File
@@ -80,23 +80,6 @@ div.main.curve-bottom {
border-bottom-right-radius: var(--ha-card-border-radius, 4px);
}
/* 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'] {
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;
flex-direction: column;
@@ -181,3 +164,52 @@ web-dialog::part(dialog) {
border-radius: 0px;
background: transparent;
}
/*************************************
* "Outside" style for menu/status bar
*************************************/
.outerlay[data-position='top'] {
border-top-left-radius: var(--ha-card-border-radius, 4px);
border-top-right-radius: var(--ha-card-border-radius, 4px);
}
.outerlay[data-position='bottom'] {
border-bottom-left-radius: var(--ha-card-border-radius, 4px);
border-bottom-right-radius: var(--ha-card-border-radius, 4px);
}
/****************
* Overlay styles
****************/
frigate-card-overlay {
z-index: 1;
}
/*******************
* Menu hover styles
*******************/
frigate-card-menu[data-style*='hover'] {
z-index: 4;
transition: opacity 0.5s ease;
opacity: 0;
}
frigate-card-menu[data-style*='hover']:hover,
.main:hover > frigate-card-overlay > frigate-card-menu[data-style='hover-card'] {
opacity: 1;
}
/*************************
* Status bar hover styles
*************************/
frigate-card-status-bar[data-style*='hover'] {
z-index: 3;
transition: opacity 0.5s ease;
opacity: 0;
}
frigate-card-status-bar[data-style*='hover']:hover,
.main:hover > frigate-card-overlay > frigate-card-status-bar[data-style='hover-card'] {
opacity: 1;
}
src/scss/menu.scss
+9 -55
View File
@@ -5,9 +5,7 @@
--mdc-icon-button-size: var(--frigate-card-menu-button-size);
--mdc-icon-size: calc(var(--mdc-icon-button-size) / 2);
// Menu itself does not handle click events. Without this, in overlay mode the
// menu component prevents clicking on gallery items 'behind' the overlay.
pointer-events: none;
pointer-events: auto;
display: flex;
flex-direction: row;
@@ -45,52 +43,6 @@ div.opposing {
background: var(--secondary-background-color);
}
/************************************
* Match menu rounded corners to card
************************************/
:host([data-position='top']),
:host([data-position='left']) {
border-top-left-radius: var(--ha-card-border-radius, 4px);
}
:host([data-position='top']),
:host([data-position='right']) {
border-top-right-radius: var(--ha-card-border-radius, 4px);
}
:host([data-position='bottom']),
:host([data-position='left']) {
border-bottom-left-radius: var(--ha-card-border-radius, 4px);
}
:host([data-position='bottom']),
:host([data-position='right']) {
border-bottom-right-radius: var(--ha-card-border-radius, 4px);
}
/**************************************
* Positioning for absolute menu styles
**************************************/
:host(:not([data-style='outside'])[data-position='top']),
:host(:not([data-style='outside'])[data-position='left'][data-alignment='top']),
:host(:not([data-style='outside'])[data-position='right'][data-alignment='top']) {
top: 0px;
}
:host(:not([data-style='outside'])[data-position='bottom']),
:host(:not([data-style='outside'])[data-position='left'][data-alignment='bottom']),
:host(:not([data-style='outside'])[data-position='right'][data-alignment='bottom']) {
bottom: 0px;
}
:host(:not([data-style='outside'])[data-position='left']),
:host(:not([data-style='outside'])[data-position='top'][data-alignment='left']),
:host(:not([data-style='outside'])[data-position='bottom'][data-alignment='left']) {
left: 0px;
}
:host(:not([data-style='outside'])[data-position='right']),
:host(:not([data-style='outside'])[data-position='top'][data-alignment='right']),
:host(:not([data-style='outside'])[data-position='bottom'][data-alignment='right']) {
right: 0px;
}
/********************************************************
* Hack: Ensure host & div expand for column flex layouts
********************************************************/
@@ -156,12 +108,18 @@ div.opposing {
: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-style='overlay']),
:host([data-style*='hover']),
:host([data-style='hidden'][expanded]) {
overflow: visible;
background: linear-gradient(90deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
}
:host([data-style='overlay'][data-position='top']),
:host([data-style='overlay'][data-position='bottom']),
:host([data-style*='hover'][data-position='top']),
@@ -170,8 +128,6 @@ div.opposing {
: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));
}
:host([data-style='overlay'][data-position='left']),
@@ -180,8 +136,6 @@ div.opposing {
: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));
height: 100%;
}
src/scss/overlay.scss
+66
View File
@@ -0,0 +1,66 @@
@use './button.scss';
:host {
position: absolute;
width: 100%;
height: 100%;
// Overlay itself does not handle click events.
pointer-events: none;
}
slot {
position: absolute;
display: block;
}
/***************
* Slot position
***************/
slot[name='top'] {
top: 0px;
}
slot[name='bottom'] {
bottom: 0px;
}
slot[name='left'] {
left: 0px;
}
slot[name='right'] {
right: 0px;
}
/***********
* Slot size
***********/
slot[name='top'],
slot[name='bottom'] {
width: 100%;
}
slot[name='left'],
slot[name='right'] {
height: 100%;
}
/*******************************
* Match rounded corners to card
*******************************/
slot[name='top'],
slot[name='left'] {
border-top-left-radius: var(--ha-card-border-radius, 4px);
}
slot[name='top'],
slot[name='right'] {
border-top-right-radius: var(--ha-card-border-radius, 4px);
}
slot[name='bottom'],
slot[name='left'] {
border-bottom-left-radius: var(--ha-card-border-radius, 4px);
}
slot[name='bottom'],
slot[name='right'] {
border-bottom-right-radius: var(--ha-card-border-radius, 4px);
}
src/scss/status.scss
+82
View File
@@ -0,0 +1,82 @@
@use './button.scss';
:host {
--mdc-icon-button-size: calc(var(--frigate-card-status-bar-height) - 6px);
--mdc-icon-size: calc(var(--mdc-icon-button-size) / 2);
display: block;
width: 100%;
pointer-events: auto;
opacity: 1;
transition: opacity 1s;
}
/***************
* Outside style
***************/
:host([data-style='outside']) {
color: var(--primary-text-color);
background: var(--secondary-background-color);
}
/*******************
* Non-outside style
*******************/
:host(:not([data-style='outside'])) {
color: white;
background: linear-gradient(90deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
}
:host([data-style='popup'][hide]) {
opacity: 0;
pointer-events: none;
}
/*********************
* Status bar contents
*********************/
.status {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
overflow: hidden;
width: 100%;
height: var(--frigate-card-status-bar-height);
}
.item {
display: inline-block;
margin: 3px;
padding: 3px;
align-content: center;
opacity: 0.7;
}
.item:first-child {
margin-left: 10px;
}
.item:last-child {
margin-right: 10px;
}
.item.expand {
flex: 1;
}
.item.action {
cursor: pointer;
}
img.item {
width: var(--mdc-icon-size, 24px);
height: var(--mdc-icon-size, 24px);
}
src/scss/title-control.scss
-29
View File
@@ -1,29 +0,0 @@
:host {
--paper-toast-background-color: rgba(0, 0, 0, 0.6);
--paper-toast-color: white;
pointer-events: none;
position: relative;
}
paper-toast {
max-width: unset;
min-width: unset;
display: flex;
align-items: center;
// Without this the paper-toast will consume vertical space before being
// opened, which causes the card to render blank space needlessly. It also
// won't work with 'display: none', it appears to need something with
// width/height properties even before being opened.
position: absolute;
}
paper-toast.paper-toast-open {
position: relative;
}
paper-toast img {
max-height: 24px;
padding-left: 10px;
}