Merge pull request #317 from dermotduffy/new-icon
Replace the 'F' logo with a Frigate logo
This commit is contained in:
Dermot Duffy
@@ -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. | <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 '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"> |
|
||||
|`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"> |
|
||||
|`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>
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
version="1.1"
|
||||
id="svg54"
|
||||
sodipodi:docname="logo.svg"
|
||||
inkscape:version="1.1.1 (1:1.1+202109281949+c3084ef5ed)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs58" />
|
||||
<sodipodi:namedview
|
||||
id="namedview56"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
showgrid="false"
|
||||
width="24px"
|
||||
inkscape:zoom="32"
|
||||
inkscape:cx="0.921875"
|
||||
inkscape:cy="10.390625"
|
||||
inkscape:window-width="3768"
|
||||
inkscape:window-height="1536"
|
||||
inkscape:window-x="72"
|
||||
inkscape:window-y="27"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg54" />
|
||||
<path
|
||||
d="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"
|
||||
fill="#000000"
|
||||
id="path52"
|
||||
style="stroke-width:1" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
+28
-8
@@ -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)}
|
||||
>
|
||||
<ha-icon icon="${stateParameters.icon || 'mdi:gesture-tap-button'}"></ha-icon>
|
||||
${svgPath
|
||||
? html`<ha-svg-icon .path="${svgPath}"></ha-svg-icon>`
|
||||
: html`<ha-icon
|
||||
icon="${stateParameters.icon || 'mdi:gesture-tap-button'}"
|
||||
></ha-icon>`}
|
||||
</ha-icon-button>`;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user