From b37b5b20b2180bd21ebc79ef1bcb14cda570e0d0 Mon Sep 17 00:00:00 2001 From: Dermot Duffy Date: Thu, 3 Feb 2022 21:35:18 -0800 Subject: [PATCH 1/2] Replace the 'F' logo with the Frigate logo. --- README.md | 10 +++++----- src/components/menu.ts | 36 ++++++++++++++++++++++++++++-------- src/images/logo.svg | 41 +++++++++++++++++++++++++++++++++++++++++ 3 files changed, 74 insertions(+), 13 deletions(-) create mode 100644 src/images/logo.svg diff --git a/README.md b/README.md index e9f7c9ca..0530a97e 100644 --- a/README.md +++ b/README.md @@ -701,11 +701,11 @@ 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. | Menu hidden | -|`overlay-{top,bottom,right,left}`| Overlay the menu over the card contents. The 'F' button shows the default view. | Menu overlaid | -|`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. | Menu overlaid | -|`above`| Render the menu above the card. The 'F' button shows the default view. | Menu above | -|`below`| Render the menu below the card. The 'F' button shows the default view. | Menu below | +|`hidden-{top,bottom,right,left}` [default: `hidden-top`]| Hide the menu by default, expandable upon clicking the Frigate button. | Menu hidden | +|`overlay-{top,bottom,right,left}`| Overlay the menu over the card contents. The Frigate button shows the default view. | Menu overlaid | +|`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. | Menu overlaid | +|`above`| Render the menu above the card. The Frigate button shows the default view. | Menu above | +|`below`| Render the menu below the card. The Frigate button shows the default view. | Menu below | |`none`| No menu is shown. | No Menu | diff --git a/src/components/menu.ts b/src/components/menu.ts index 68144030..d1a7f0be 100644 --- a/src/components/menu.ts +++ b/src/components/menu.ts @@ -28,6 +28,27 @@ import menuStyle from '../scss/menu.scss'; import { Corner } from '@material/mwc-menu'; export const FRIGATE_BUTTON_MENU_ICON = 'frigate'; +export const FRIGATE_ICON_FILLED = + 'm 4.6991705,22.76567 c 0.0866,0.69274 0.81181,1.16359 0.37885,1.27183 ' + + '-0.43297,0.10824 -2.32718,-3.43665 -2.76015,-4.95202 -0.43296,-1.51538 ' + + '-0.6764998,-3.22017 -0.5682598,-4.19434 0.1082298,-0.97417 5.7097098, ' + + '-2.48955 5.7097098,-2.89545 0,-0.4059 -1.81304,-0.0271 -1.89422,-0.35178 ' + + '-0.0812,-0.32472 1.36925,-0.12989 1.75892,-0.64945 0.60885,-0.81181 1.38007,' + + '-0.6765 1.86715,-1.1094695 0.48709,-0.4329599 1.0824095,-2.0836399 1.1906595,' + + '-2.7871996 0.108241,-0.70357 -1.0824095,-1.51538 -1.4071395,-2.05658 -0.32472,' + + '-0.54121 0.70357,-0.92005 3.1931105,-1.94834 2.48954,-1.02829 10.39114, ' + + '-3.30134995 10.49938,-3.03074995 0.10824,0.27061 -2.59779,1.40713995 -4.492, ' + + '2.11069995 -1.89422,0.70357 -4.97909,2.05658 -4.97909,2.43542 0,0.37885 0.16236,' + + '0.67651 0.0541,1.54244 -0.10824,0.86593 -0.12123,1.2702597 -0.32472,1.8400997 ' + + '-0.1353,0.37884 -0.2706,1.27183 0,2.0836294 0.21648,0.64945 0.92005,1.13653 ' + + '1.24477,1.24478 0.2706,0.018 1.01746,0.0433 1.8401,0 1.02829,-0.0541 2.48954,' + + '0.0541 2.48954,0.32472 0,0.2706 -2.21894,0.10824 -2.21894,0.48708 0,0.37885 ' + + '2.27306,-0.0541 2.21894,0.32473 -0.0541,0.37884 -1.89422,0.21648 -2.86839,' + + '0.21648 -0.77933,0 -1.93031,-0.0361 -2.43542,-0.21648 l -0.10824,0.37884 c ' + + '-0.18038,0 -0.55744,0.10824 -0.94711,0.10824 -0.48708,0 -0.51414,0.16236 ' + + '-1.40713,0.16236 -0.8929905,0 -0.622391,-0.0541 -1.4341905,-0.10824 -0.81181,' + + '-0.0541 -3.84256,2.27306 -4.38376,3.03075 -0.54121,0.75768 -0.21649,2.59778 ' + + '-0.21649,3.43665 0,0.75379 -0.10824,2.43542 0,3.30135 z'; /** * A menu for the FrigateCard. @@ -195,13 +216,8 @@ export class FrigateCardMenu extends LitElement { } let stateParameters: StateParameters = { ...button }; - - if (stateParameters.icon == FRIGATE_BUTTON_MENU_ICON) { - stateParameters.icon = - this._menuConfig?.mode.startsWith('hidden-') && !this.expanded - ? 'mdi:alpha-f-box-outline' - : 'mdi:alpha-f-box'; - } + const svgPath = + stateParameters.icon === FRIGATE_BUTTON_MENU_ICON ? FRIGATE_ICON_FILLED : ''; if (button.type === 'custom:frigate-card-menu-state-icon') { if (!this.hass) { @@ -227,7 +243,11 @@ export class FrigateCardMenu extends LitElement { .label=${stateParameters.title || ''} @action=${(ev) => this._actionHandler(ev, button)} > - + ${svgPath + ? html`` + : html``} `; } diff --git a/src/images/logo.svg b/src/images/logo.svg new file mode 100644 index 00000000..0c0f9e5b --- /dev/null +++ b/src/images/logo.svg @@ -0,0 +1,41 @@ + + + + + + From f10fbb050534525beb6be3dee20f30af8cf0f057 Mon Sep 17 00:00:00 2001 From: Dermot Duffy Date: Thu, 3 Feb 2022 21:38:12 -0800 Subject: [PATCH 2/2] Rename logo. --- src/images/logo.svg => images/frigate-logo.svg | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/images/logo.svg => images/frigate-logo.svg (100%) diff --git a/src/images/logo.svg b/images/frigate-logo.svg similarity index 100% rename from src/images/logo.svg rename to images/frigate-logo.svg