jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-24 09:46:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use icon button to switch between code and editor (#17294)

Browse Source
This commit is contained in:
Paul Bottein 2023-07-13 16:35:53 +02:00 committed by GitHub
parent 56e82eab03
commit df765515ec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 30 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts
View File

@ -1,7 +1,7 @@
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-tab-bar/mwc-tab-bar";
import "@material/mwc-tab/mwc-tab";
import { mdiContentCopy } from "@mdi/js";
import { mdiCodeBraces, mdiContentCopy, mdiListBoxOutline } from "@mdi/js";
import deepClone from "deep-clone-simple";
import type { MDCTabBarActivatedEvent } from "@material/tab-bar";
import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
@ -92,6 +92,8 @@ export class HuiConditionalCardEditor
return nothing;
}
const isGuiMode = !this._cardEditorEl || this._GUImode;
return html`
<mwc-tab-bar
.activeIndex=${this._cardTab ? 1 : 0}
@ -114,17 +116,17 @@ export class HuiConditionalCardEditor
${this._config.card.type !== undefined
? html`
<div class="card-options">
<mwc-button
<ha-icon-button
class="gui-mode-button"
@click=${this._toggleMode}
.disabled=${!this._guiModeAvailable}
class="gui-mode-button"
>
${this.hass!.localize(
!this._cardEditorEl || this._GUImode
.label=${this.hass!.localize(
isGuiMode
? "ui.panel.lovelace.editor.edit_card.show_code_editor"
: "ui.panel.lovelace.editor.edit_card.show_visual_editor"
)}
</mwc-button>
.path=${isGuiMode ? mdiCodeBraces : mdiListBoxOutline}
></ha-icon-button>
<ha-icon-button
.label=${this.hass!.localize(

24
src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts
View File

@ -1,15 +1,17 @@
import {
mdiArrowLeft,
mdiArrowRight,
mdiDelete,
mdiContentCut,
mdiCodeBraces,
mdiContentCopy,
mdiContentCut,
mdiDelete,
mdiListBoxOutline,
mdiPlus,
} from "@mdi/js";
import "@polymer/paper-tabs";
import "@polymer/paper-tabs/paper-tab";
import deepClone from "deep-clone-simple";
import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import {
any,
@ -21,7 +23,7 @@ import {
string,
} from "superstruct";
import { storage } from "../../../../common/decorators/storage";
import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
import { HASSDomEvent, fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-icon-button";
import { LovelaceCardConfig, LovelaceConfig } from "../../../../data/lovelace";
import { HomeAssistant } from "../../../../types";
@ -87,6 +89,8 @@ export class HuiStackCardEditor
const selected = this._selectedCard!;
const numcards = this._config.cards.length;
const isGuiMode = !this._cardEditorEl || this._GUImode;
return html`
<div class="card-config">
<div class="toolbar">
@ -114,17 +118,17 @@ export class HuiStackCardEditor
${selected < numcards
? html`
<div id="card-options">
<mwc-button
<ha-icon-button
class="gui-mode-button"
@click=${this._toggleMode}
.disabled=${!this._guiModeAvailable}
class="gui-mode-button"
>
${this.hass!.localize(
!this._cardEditorEl || this._GUImode
.label=${this.hass!.localize(
isGuiMode
? "ui.panel.lovelace.editor.edit_card.show_code_editor"
: "ui.panel.lovelace.editor.edit_card.show_visual_editor"
)}
</mwc-button>
.path=${isGuiMode ? mdiCodeBraces : mdiListBoxOutline}
></ha-icon-button>
<ha-icon-button
.disabled=${selected === 0}

14
src/panels/lovelace/editor/hui-sub-element-editor.ts
View File

@ -1,5 +1,5 @@
import "@material/mwc-button";
import { mdiArrowLeft } from "@mdi/js";
import { mdiArrowLeft, mdiCodeBraces, mdiListBoxOutline } from "@mdi/js";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { fireEvent, HASSDomEvent } from "../../../common/dom/fire_event";
@ -50,17 +50,17 @@ export class HuiSubElementEditor extends LitElement {
)}</span
>
</div>
<mwc-button
slot="secondaryAction"
.disabled=${!this._guiModeAvailable}
<ha-icon-button
class="gui-mode-button"
@click=${this._toggleMode}
>
${this.hass.localize(
.disabled=${!this._guiModeAvailable}
.label=${this.hass!.localize(
this._guiMode
? "ui.panel.lovelace.editor.edit_card.show_code_editor"
: "ui.panel.lovelace.editor.edit_card.show_visual_editor"
)}
</mwc-button>
.path=${this._guiMode ? mdiCodeBraces : mdiListBoxOutline}
></ha-icon-button>
</div>
${this.config.type === "row"
? html`