github
/
ha-frontend
mirror of https://github.com/home-assistant/frontend
1
Fork 0
Code Releases Activity

Make fab blue (#7839)

This commit is contained in:
Bram Kragten 2020-11-28 17:22:42 +01:00 committed by GitHub
parent cae94175fe
commit b5724ed343
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
31 changed files with 99 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/ha-fab.ts Normal file
View File

@ -0,0 +1,20 @@
import type { Fab } from "@material/mwc-fab";
import "@material/mwc-fab";
import { customElement } from "lit-element";
import { Constructor } from "../types";
const MwcFab = customElements.get("mwc-fab") as Constructor<Fab>;
@customElement("ha-fab")
export class HaFab extends MwcFab {
protected firstUpdated(changedProperties) {
super.firstUpdated(changedProperties);
this.style.setProperty("--mdc-theme-secondary", "var(--primary-color)");
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-fab": HaFab;
}
}

10
src/components/media-player/ha-media-player-browse.ts
View File

@ -1,5 +1,5 @@
import "@material/mwc-button/mwc-button";
import "@material/mwc-fab/mwc-fab";
import "../ha-fab";
import "@material/mwc-list/mwc-list";
import "@material/mwc-list/mwc-list-item";
import { mdiArrowLeft, mdiClose, mdiPlay, mdiPlus } from "@mdi/js";
@ -170,7 +170,7 @@ export class HaMediaPlayerBrowse extends LitElement {
>
${this._narrow && currentItem?.can_play
? html`
<mwc-fab
<ha-fab
mini
.item=${currentItem}
@click=${this._actionClicked}
@ -185,7 +185,7 @@ export class HaMediaPlayerBrowse extends LitElement {
${this.hass.localize(
`ui.components.media-browser.${this.action}`
)}
</mwc-fab>
</ha-fab>
`
: ""}
</div>
@ -927,7 +927,7 @@ export class HaMediaPlayerBrowse extends LitElement {
transition: width 0.4s, height 0.4s, padding-bottom 0.4s;
}
mwc-fab {
ha-fab {
position: absolute;
--mdc-theme-secondary: var(--primary-color);
bottom: -20px;
@ -1011,7 +1011,7 @@ export class HaMediaPlayerBrowse extends LitElement {
margin-bottom: 0;
}
:host([scroll]) mwc-fab {
:host([scroll]) ha-fab {
bottom: 4px;
right: 4px;
--mdc-fab-box-shadow: none;

6
src/panels/config/areas/ha-config-areas-dashboard.ts
View File

@ -1,4 +1,4 @@
import "@material/mwc-fab";
import "../../../components/ha-fab";
import { mdiPlus } from "@mdi/js";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-item/paper-item-body";
@ -124,7 +124,7 @@ export class HaConfigAreasDashboard extends LitElement {
icon="hass:help-circle"
@click=${this._showHelp}
></ha-icon-button>
<mwc-fab
<ha-fab
slot="fab"
.label=${this.hass.localize(
"ui.panel.config.areas.picker.create_area"
@ -133,7 +133,7 @@ export class HaConfigAreasDashboard extends LitElement {
@click=${this._createArea}
>
<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
</mwc-fab>
</ha-fab>
</hass-tabs-subpage-data-table>
`;
}

22
src/panels/config/automation/blueprint-automation-editor.ts
View File

@ -278,17 +278,9 @@ export class HaBlueprintAutomationEditor extends LitElement {
ha-card {
overflow: hidden;
}
.errors {
padding: 20px;
font-weight: bold;
color: var(--error-color);
}
.padding {
padding: 16px;
}
.content {
padding-bottom: 20px;
}
.blueprint-picker-container {
padding: 16px;
display: flex;
@ -317,20 +309,6 @@ export class HaBlueprintAutomationEditor extends LitElement {
:host(:not([narrow])) ha-settings-row ha-selector {
width: 50%;
}
mwc-fab {
position: relative;
bottom: calc(-80px - env(safe-area-inset-bottom));
transition: bottom 0.3s;
}
mwc-fab.dirty {
bottom: 0;
}
.selected_menu_item {
color: var(--primary-color);
}
li[role="separator"] {
border-bottom-color: var(--divider-color);
}
`,
];
}

13
src/panels/config/automation/ha-automation-editor.ts
View File

@ -1,4 +1,4 @@
import "@material/mwc-fab";
import "../../../components/ha-fab";
import {
mdiCheck,
mdiContentDuplicate,
@ -271,7 +271,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
</div>
`
: ""}
<mwc-fab
<ha-fab
slot="fab"
class=${classMap({ dirty: this._dirty })}
.label=${this.hass.localize("ui.panel.config.automation.editor.save")}
@ -279,7 +279,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
@click=${this._saveAutomation}
>
<ha-svg-icon slot="icon" .path=${mdiContentSave}></ha-svg-icon>
</mwc-fab>
</ha-fab>
</hass-tabs-subpage>
`;
}
@ -524,21 +524,18 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
.content {
padding-bottom: 20px;
}
span[slot="introduction"] a {
color: var(--primary-color);
}
p {
margin-bottom: 0;
}
ha-entity-toggle {
margin-right: 8px;
}
mwc-fab {
ha-fab {
position: relative;
bottom: calc(-80px - env(safe-area-inset-bottom));
transition: bottom 0.3s;
}
mwc-fab.dirty {
ha-fab.dirty {
bottom: 0;
}
.selected_menu_item {

6
src/panels/config/automation/ha-automation-picker.ts
View File

@ -1,4 +1,4 @@
import "@material/mwc-fab";
import "../../../components/ha-fab";
import "@material/mwc-icon-button";
import { mdiPlus, mdiHelpCircle } from "@mdi/js";
import "@polymer/paper-tooltip/paper-tooltip";
@ -170,7 +170,7 @@ class HaAutomationPicker extends LitElement {
<mwc-icon-button slot="toolbar-icon" @click=${this._showHelp}>
<ha-svg-icon .path=${mdiHelpCircle}></ha-svg-icon>
</mwc-icon-button>
<mwc-fab
<ha-fab
slot="fab"
.label=${this.hass.localize(
"ui.panel.config.automation.picker.add_automation"
@ -179,7 +179,7 @@ class HaAutomationPicker extends LitElement {
@click=${this._createNew}
>
<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
</mwc-fab>
</ha-fab>
</hass-tabs-subpage-data-table>
`;
}

22
src/panels/config/automation/manual-automation-editor.ts
View File

@ -309,14 +309,6 @@ export class HaManualAutomationEditor extends LitElement {
ha-card {
overflow: hidden;
}
.errors {
padding: 20px;
font-weight: bold;
color: var(--error-color);
}
.content {
padding-bottom: 20px;
}
span[slot="introduction"] a {
color: var(--primary-color);
}
@ -326,20 +318,6 @@ export class HaManualAutomationEditor extends LitElement {
ha-entity-toggle {
margin-right: 8px;
}
mwc-fab {
position: relative;
bottom: calc(-80px - env(safe-area-inset-bottom));
transition: bottom 0.3s;
}
mwc-fab.dirty {
bottom: 0;
}
.selected_menu_item {
color: var(--primary-color);
}
li[role="separator"] {
border-bottom-color: var(--divider-color);
}
`,
];
}

6
src/panels/config/blueprint/ha-blueprint-overview.ts
View File

@ -1,4 +1,4 @@
import "@material/mwc-fab";
import "../../../components/ha-fab";
import "@material/mwc-icon-button";
import { mdiPlus, mdiHelpCircle, mdiDelete, mdiRobot } from "@mdi/js";
import "@polymer/paper-tooltip/paper-tooltip";
@ -174,7 +174,7 @@ class HaBlueprintOverview extends LitElement {
<mwc-icon-button slot="toolbar-icon" @click=${this._showHelp}>
<ha-svg-icon .path=${mdiHelpCircle}></ha-svg-icon>
</mwc-icon-button>
<mwc-fab
<ha-fab
slot="fab"
.label=${this.hass.localize(
"ui.panel.config.blueprint.overview.add_blueprint"
@ -183,7 +183,7 @@ class HaBlueprintOverview extends LitElement {
@click=${this._addBlueprint}
>
<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
</mwc-fab>
</ha-fab>
</hass-tabs-subpage-data-table>
`;
}

6
src/panels/config/helpers/ha-config-helpers.ts
View File

@ -1,4 +1,4 @@
import "@material/mwc-fab";
import "../../../components/ha-fab";
import { mdiPlus } from "@mdi/js";
import "@polymer/paper-checkbox/paper-checkbox";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
@ -158,7 +158,7 @@ export class HaConfigHelpers extends LitElement {
"ui.panel.config.helpers.picker.no_helpers"
)}
>
<mwc-fab
<ha-fab
slot="fab"
.label=${this.hass.localize(
"ui.panel.config.helpers.picker.add_helper"
@ -167,7 +167,7 @@ export class HaConfigHelpers extends LitElement {
@click=${this._createHelpler}
>
<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
</mwc-fab>
</ha-fab>
</hass-tabs-subpage-data-table>
`;
}

6
src/panels/config/integrations/ha-config-integrations.ts
View File

@ -1,4 +1,4 @@
import "@material/mwc-fab";
import "../../../components/ha-fab";
import "@material/mwc-icon-button";
import "@material/mwc-list/mwc-list-item";
import { mdiDotsVertical, mdiPlus } from "@mdi/js";
@ -474,7 +474,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
`
: ""}
</div>
<mwc-fab
<ha-fab
slot="fab"
.label=${this.hass.localize(
"ui.panel.config.integrations.add_integration"
@ -483,7 +483,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
@click=${this._createFlow}
>
<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
</mwc-fab>
</ha-fab>
</hass-tabs-subpage>
`;
}

1
src/panels/config/integrations/integration-panels/ozw/ozw-config-dashboard.ts
View File

@ -1,5 +1,4 @@
import "@material/mwc-button/mwc-button";
import "@material/mwc-fab";
import { mdiCheckCircle, mdiCircle, mdiCloseCircle, mdiZWave } from "@mdi/js";
import "@polymer/paper-item/paper-icon-item";
import "@polymer/paper-item/paper-item-body";

1
src/panels/config/integrations/integration-panels/ozw/ozw-network-dashboard.ts
View File

@ -1,5 +1,4 @@
import "@material/mwc-button/mwc-button";
import "@material/mwc-fab";
import { mdiCheckCircle, mdiCircle, mdiCloseCircle } from "@mdi/js";
import {
css,

1
src/panels/config/integrations/integration-panels/ozw/ozw-network-nodes.ts
View File

@ -1,5 +1,4 @@
import "@material/mwc-button/mwc-button";
import "@material/mwc-fab";
import { mdiAlert, mdiCheck } from "@mdi/js";
import {
CSSResult,

1
src/panels/config/integrations/integration-panels/ozw/ozw-node-config.ts
View File

@ -1,5 +1,4 @@
import "@material/mwc-button/mwc-button";
import "@material/mwc-fab";
import {
css,
CSSResultArray,

1
src/panels/config/integrations/integration-panels/ozw/ozw-node-dashboard.ts
View File

@ -1,5 +1,4 @@
import "@material/mwc-button/mwc-button";
import "@material/mwc-fab";
import {
css,
CSSResultArray,

6
src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts
View File

@ -1,6 +1,6 @@
import "@polymer/paper-item/paper-item";
import "@polymer/paper-item/paper-item-body";
import "@material/mwc-fab";
import "../../../../../components/ha-fab";
import {
css,
CSSResultArray,
@ -88,13 +88,13 @@ class ZHAConfigDashboard extends LitElement {
: ""}
</ha-card>
<a href="/config/zha/add" slot="fab">
<mwc-fab
<ha-fab
.label=${this.hass.localize("ui.panel.config.zha.add_device")}
extended
?rtl=${computeRTL(this.hass)}
>
<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
</mwc-fab>
</ha-fab>
</a>
</hass-tabs-subpage>
`;

6
src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts
View File

@ -1,5 +1,5 @@
import "@material/mwc-button";
import "@material/mwc-fab";
import "../../../../../components/ha-fab";
import "../../../../../components/ha-icon-button";
import memoizeOne from "memoize-one";
import {
@ -127,14 +127,14 @@ export class ZHAGroupsDashboard extends LitElement {
clickable
>
<a href="/config/zha/group-add" slot="fab">
<mwc-fab
<ha-fab
.label=${this.hass!.localize(
"ui.panel.config.zha.groups.add_group"
)}
extended
>
<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
</mwc-fab>
</ha-fab>
</a>
</hass-tabs-subpage-data-table>
`;

6
src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts
View File

@ -1,4 +1,4 @@
import "@material/mwc-fab";
import "../../../../components/ha-fab";
import { mdiPlus } from "@mdi/js";
import "@polymer/paper-tooltip/paper-tooltip";
import {
@ -223,7 +223,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
hasFab
clickable
>
<mwc-fab
<ha-fab
slot="fab"
.label=${this.hass.localize(
"ui.panel.config.lovelace.dashboards.picker.add_dashboard"
@ -232,7 +232,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
@click=${this._addDashboard}
>
<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
</mwc-fab>
</ha-fab>
</hass-tabs-subpage-data-table>
`;
}

6
src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts
View File

@ -1,4 +1,4 @@
import "@material/mwc-fab";
import "../../../../components/ha-fab";
import { mdiPlus } from "@mdi/js";
import "@polymer/paper-checkbox/paper-checkbox";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
@ -103,7 +103,7 @@ export class HaConfigLovelaceRescources extends LitElement {
hasFab
clickable
>
<mwc-fab
<ha-fab
slot="fab"
.label=${this.hass.localize(
"ui.panel.config.lovelace.resources.picker.add_resource"
@ -112,7 +112,7 @@ export class HaConfigLovelaceRescources extends LitElement {
@click=${this._addResource}
>
<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
</mwc-fab>
</ha-fab>
</hass-tabs-subpage-data-table>
`;
}

6
src/panels/config/person/ha-config-person.ts
View File

@ -1,4 +1,4 @@
import "@material/mwc-fab";
import "../../../components/ha-fab";
import { mdiPlus } from "@mdi/js";
import "@polymer/paper-item/paper-icon-item";
import "@polymer/paper-item/paper-item-body";
@ -146,14 +146,14 @@ class HaConfigPerson extends LitElement {
`
: ""}
</ha-config-section>
<mwc-fab
<ha-fab
slot="fab"
.label=${hass.localize("ui.panel.config.person.add_person")}
extended
@click=${this._createPerson}
>
<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
</mwc-fab>
</ha-fab>
</hass-tabs-subpage>
`;
}

6
src/panels/config/scene/ha-scene-dashboard.ts
View File

@ -1,4 +1,4 @@
import "@material/mwc-fab";
import "../../../components/ha-fab";
import "@material/mwc-icon-button";
import { mdiPlus, mdiHelpCircle } from "@mdi/js";
import "@polymer/paper-tooltip/paper-tooltip";
@ -152,14 +152,14 @@ class HaSceneDashboard extends LitElement {
<ha-svg-icon .path=${mdiHelpCircle}></ha-svg-icon>
</mwc-icon-button>
<a href="/config/scene/edit/new" slot="fab">
<mwc-fab
<ha-fab
.label=${this.hass.localize(
"ui.panel.config.scene.picker.add_scene"
)}
extended
>
<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
</mwc-fab>
</ha-fab>
</a>
</hass-tabs-subpage-data-table>
`;

10
src/panels/config/scene/ha-scene-editor.ts
View File

@ -25,7 +25,7 @@ import "../../../components/device/ha-device-picker";
import "../../../components/entity/ha-entities-picker";
import "../../../components/ha-card";
import "../../../components/ha-icon-input";
import "@material/mwc-fab";
import "../../../components/ha-fab";
import {
computeDeviceName,
DeviceRegistryEntry,
@ -403,7 +403,7 @@ export class HaSceneEditor extends SubscribeMixin(
`
: ""}
</div>
<mwc-fab
<ha-fab
slot="fab"
.label=${this.hass.localize("ui.panel.config.scene.editor.save")}
extended
@ -411,7 +411,7 @@ export class HaSceneEditor extends SubscribeMixin(
class=${classMap({ dirty: this._dirty })}
>
<ha-svg-icon slot="icon" .path=${mdiContentSave}></ha-svg-icon>
</mwc-fab>
</ha-fab>
</hass-tabs-subpage>
`;
}
@ -786,12 +786,12 @@ export class HaSceneEditor extends SubscribeMixin(
span[slot="introduction"] a {
color: var(--primary-color);
}
mwc-fab {
ha-fab {
position: relative;
bottom: calc(-80px - env(safe-area-inset-bottom));
transition: bottom 0.3s;
}
mwc-fab.dirty {
ha-fab.dirty {
bottom: 0;
}
`,

10
src/panels/config/script/ha-script-editor.ts
View File

@ -1,4 +1,4 @@
import "@material/mwc-fab";
import "../../../components/ha-fab";
import {
mdiCheck,
mdiContentSave,
@ -388,7 +388,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
`
: ``}
</div>
<mwc-fab
<ha-fab
slot="fab"
.label=${this.hass.localize(
"ui.panel.config.script.editor.save_script"
@ -400,7 +400,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
})}
>
<ha-svg-icon slot="icon" .path=${mdiContentSave}></ha-svg-icon>
</mwc-fab>
</ha-fab>
</hass-tabs-subpage>
`;
}
@ -690,12 +690,12 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
span[slot="introduction"] a {
color: var(--primary-color);
}
mwc-fab {
ha-fab {
position: relative;
bottom: calc(-80px - env(safe-area-inset-bottom));
transition: bottom 0.3s;
}
mwc-fab.dirty {
ha-fab.dirty {
bottom: 0;
}
.selected_menu_item {

6
src/panels/config/script/ha-script-picker.ts
View File

@ -16,7 +16,7 @@ import { fireEvent } from "../../../common/dom/fire_event";
import { computeStateName } from "../../../common/entity/compute_state_name";
import { computeRTL } from "../../../common/util/compute_rtl";
import { DataTableColumnContainer } from "../../../components/data-table/ha-data-table";
import "@material/mwc-fab";
import "../../../components/ha-fab";
import { triggerScript } from "../../../data/script";
import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
import "../../../layouts/hass-tabs-subpage-data-table";
@ -147,7 +147,7 @@ class HaScriptPicker extends LitElement {
<ha-svg-icon .path=${mdiHelpCircle}></ha-svg-icon>
</mwc-icon-button>
<a href="/config/script/edit/new" slot="fab">
<mwc-fab
<ha-fab
?is-wide=${this.isWide}
?narrow=${this.narrow}
.label=${this.hass.localize(
@ -157,7 +157,7 @@ class HaScriptPicker extends LitElement {
?rtl=${computeRTL(this.hass)}
>
<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
</mwc-fab>
</ha-fab>
</a>
</hass-tabs-subpage-data-table>
`;

6
src/panels/config/tags/ha-config-tags.ts
View File

@ -1,4 +1,4 @@
import "@material/mwc-fab";
import "../../../components/ha-fab";
import "@material/mwc-icon-button";
import {
mdiCog,
@ -207,14 +207,14 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
<mwc-icon-button slot="toolbar-icon" @click=${this._showHelp}>
<ha-svg-icon .path=${mdiHelpCircle}></ha-svg-icon>
</mwc-icon-button>
<mwc-fab
<ha-fab
slot="fab"
.label=${this.hass.localize("ui.panel.config.tags.add_tag")}
extended
@click=${this._addTag}
>
<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
</mwc-fab>
</ha-fab>
</hass-tabs-subpage-data-table>
`;
}

6
src/panels/config/users/ha-config-users.ts
View File

@ -1,4 +1,4 @@
import "@material/mwc-fab";
import "../../../components/ha-fab";
import { mdiPlus } from "@mdi/js";
import {
customElement,
@ -112,14 +112,14 @@ export class HaConfigUsers extends LitElement {
hasFab
clickable
>
<mwc-fab
<ha-fab
slot="fab"
.label=${this.hass.localize("ui.panel.config.users.picker.add_user")}
extended
@click=${this._addUser}
>
<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
</mwc-fab>
</ha-fab>
</hass-tabs-subpage-data-table>
`;
}

6
src/panels/config/zone/ha-config-zone.ts
View File

@ -1,4 +1,4 @@
import "@material/mwc-fab";
import "../../../components/ha-fab";
import "@material/mwc-icon-button";
import { mdiPencil, mdiPencilOff, mdiPlus } from "@mdi/js";
import "@polymer/paper-item/paper-icon-item";
@ -255,14 +255,14 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
</div>
`
: ""}
<mwc-fab
<ha-fab
slot="fab"
.label=${hass.localize("ui.panel.config.zone.add_zone")}
extended
@click=${this._createZone}
>
<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
</mwc-fab>
</ha-fab>
</hass-tabs-subpage>
`;
}

10
src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts
View File

@ -1,4 +1,4 @@
import "@material/mwc-fab";
import "../../../../components/ha-fab";
import {
css,
CSSResult,
@ -108,13 +108,13 @@ export class HuiUnusedEntities extends LitElement {
selected: this._selectedEntities.length,
})}"
>
<mwc-fab
<ha-fab
.label=${this.hass.localize("ui.panel.lovelace.editor.edit_card.add")}
extended
@click=${this._addToLovelaceView}
>
<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
</mwc-fab>
</ha-fab>
</div>
`;
}
@ -189,12 +189,12 @@ export class HuiUnusedEntities extends LitElement {
padding-right: 16px;
padding-left: calc(16px + env(safe-area-inset-left));
}
mwc-fab {
ha-fab {
position: relative;
bottom: calc(-80px - env(safe-area-inset-bottom));
transition: bottom 0.3s;
}
.fab.selected mwc-fab {
.fab.selected ha-fab {
bottom: 0;
}
`;

2
src/panels/lovelace/views/default-view-editable.ts
View File

@ -1,3 +1,3 @@
// hui-view dependencies for when in edit mode.
import "@material/mwc-fab";
import "../../../components/ha-fab";
import "../components/hui-card-options";

8
src/panels/lovelace/views/hui-masonry-view.ts
View File

@ -83,7 +83,7 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
<div id="columns"></div>
${this.lovelace?.editMode
? html`
<mwc-fab
<ha-fab
.label=${this.hass!.localize(
"ui.panel.lovelace.editor.edit_card.add"
)}
@ -94,7 +94,7 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
})}
>
<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
</mwc-fab>
</ha-fab>
`
: ""}
`;
@ -296,7 +296,7 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
margin: 4px 4px 8px;
}
mwc-fab {
ha-fab {
position: sticky;
float: right;
right: calc(16px + env(safe-area-inset-right));
@ -304,7 +304,7 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
z-index: 1;
}
mwc-fab.rtl {
ha-fab.rtl {
float: left;
right: auto;
left: calc(16px + env(safe-area-inset-left));

8
src/panels/lovelace/views/hui-panel-view.ts
View File

@ -75,7 +75,7 @@ export class PanelView extends LitElement implements LovelaceViewElement {
${this._card}
${this.lovelace?.editMode && this.cards.length === 0
? html`
<mwc-fab
<ha-fab
.label=${this.hass!.localize(
"ui.panel.lovelace.editor.edit_card.add"
)}
@ -86,7 +86,7 @@ export class PanelView extends LitElement implements LovelaceViewElement {
})}
>
<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
</mwc-fab>
</ha-fab>
`
: ""}
`;
@ -137,7 +137,7 @@ export class PanelView extends LitElement implements LovelaceViewElement {
height: 100%;
}
mwc-fab {
ha-fab {
position: sticky;
float: right;
right: calc(16px + env(safe-area-inset-right));
@ -145,7 +145,7 @@ export class PanelView extends LitElement implements LovelaceViewElement {
z-index: 1;
}
mwc-fab.rtl {
ha-fab.rtl {
float: left;
right: auto;
left: calc(16px + env(safe-area-inset-left));