mirror of
https://github.com/home-assistant/frontend.git
synced 2025-08-01 13:37:47 +00:00
Make yaml editor scrollabel in RTL mode (#2706)
* Make yaml editor scrollabel in RTL mode * Refactor * Refactor scopped CSS * Refactor * Fixes * Refactor
This commit is contained in:
parent
310b81de04
commit
44dca3b86d
@ -3,7 +3,10 @@ import CodeMirror from "codemirror";
|
|||||||
import "codemirror/mode/yaml/yaml";
|
import "codemirror/mode/yaml/yaml";
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
import codeMirrorCSS from "codemirror/lib/codemirror.css";
|
import codeMirrorCSS from "codemirror/lib/codemirror.css";
|
||||||
|
import { HomeAssistant } from "../../../types";
|
||||||
import { fireEvent } from "../../../common/dom/fire_event";
|
import { fireEvent } from "../../../common/dom/fire_event";
|
||||||
|
import { computeRTL } from "../../../common/util/compute_rtl";
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
interface HASSDomEvents {
|
interface HASSDomEvents {
|
||||||
"yaml-changed": {
|
"yaml-changed": {
|
||||||
@ -14,6 +17,7 @@ declare global {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export class HuiYamlEditor extends HTMLElement {
|
export class HuiYamlEditor extends HTMLElement {
|
||||||
|
public _hass?: HomeAssistant;
|
||||||
public codemirror: CodeMirror;
|
public codemirror: CodeMirror;
|
||||||
private _value: string;
|
private _value: string;
|
||||||
|
|
||||||
@ -26,25 +30,40 @@ export class HuiYamlEditor extends HTMLElement {
|
|||||||
const shadowRoot = this.attachShadow({ mode: "open" });
|
const shadowRoot = this.attachShadow({ mode: "open" });
|
||||||
shadowRoot.innerHTML = `
|
shadowRoot.innerHTML = `
|
||||||
<style>
|
<style>
|
||||||
${codeMirrorCSS}
|
${codeMirrorCSS}
|
||||||
.CodeMirror {
|
.CodeMirror {
|
||||||
height: var(--code-mirror-height, 300px);
|
height: var(--code-mirror-height, 300px);
|
||||||
direction: var(--code-mirror-direction, ltr);
|
direction: var(--code-mirror-direction, ltr);
|
||||||
}
|
}
|
||||||
.CodeMirror-gutters {
|
.CodeMirror-gutters {
|
||||||
border-right: 1px solid var(--paper-input-container-color, var(--secondary-text-color));
|
border-right: 1px solid var(--paper-input-container-color, var(--secondary-text-color));
|
||||||
background-color: var(--paper-dialog-background-color, var(--primary-background-color));
|
background-color: var(--paper-dialog-background-color, var(--primary-background-color));
|
||||||
transition: 0.2s ease border-right;
|
transition: 0.2s ease border-right;
|
||||||
}
|
}
|
||||||
.CodeMirror-focused .CodeMirror-gutters {
|
.CodeMirror-focused .CodeMirror-gutters {
|
||||||
border-right: 2px solid var(--paper-input-container-focus-color, var(--primary-color));;
|
border-right: 2px solid var(--paper-input-container-focus-color, var(--primary-color));;
|
||||||
}
|
}
|
||||||
.CodeMirror-linenumber {
|
.CodeMirror-linenumber {
|
||||||
color: var(--paper-dialog-color, var(--primary-text-color));
|
color: var(--paper-dialog-color, var(--primary-text-color));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.rtl .CodeMirror-vscrollbar {
|
||||||
|
right: auto;
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
.rtl-gutter {
|
||||||
|
width: 20px;
|
||||||
|
}
|
||||||
</style>`;
|
</style>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
set hass(hass: HomeAssistant) {
|
||||||
|
this._hass = hass;
|
||||||
|
if (this._hass) {
|
||||||
|
this.setScrollBarDirection();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
set value(value: string) {
|
set value(value: string) {
|
||||||
if (this.codemirror) {
|
if (this.codemirror) {
|
||||||
if (value !== this.codemirror.getValue()) {
|
if (value !== this.codemirror.getValue()) {
|
||||||
@ -76,7 +95,12 @@ export class HuiYamlEditor extends HTMLElement {
|
|||||||
cm.replaceSelection(spaces);
|
cm.replaceSelection(spaces);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
gutters:
|
||||||
|
this._hass && computeRTL(this._hass!)
|
||||||
|
? ["rtl-gutter", "CodeMirror-linenumbers"]
|
||||||
|
: [],
|
||||||
});
|
});
|
||||||
|
this.setScrollBarDirection();
|
||||||
this.codemirror.on("changes", () => this._onChange());
|
this.codemirror.on("changes", () => this._onChange());
|
||||||
} else {
|
} else {
|
||||||
this.codemirror.refresh();
|
this.codemirror.refresh();
|
||||||
@ -86,6 +110,16 @@ export class HuiYamlEditor extends HTMLElement {
|
|||||||
private _onChange(): void {
|
private _onChange(): void {
|
||||||
fireEvent(this, "yaml-changed", { value: this.codemirror.getValue() });
|
fireEvent(this, "yaml-changed", { value: this.codemirror.getValue() });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private setScrollBarDirection() {
|
||||||
|
if (!this.codemirror) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.codemirror
|
||||||
|
.getWrapperElement()
|
||||||
|
.classList.toggle("rtl", computeRTL(this._hass!));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
|
@ -119,6 +119,7 @@ export class HuiEditCard extends LitElement {
|
|||||||
? this._configElement
|
? this._configElement
|
||||||
: html`
|
: html`
|
||||||
<hui-yaml-editor
|
<hui-yaml-editor
|
||||||
|
.hass="${this.hass}"
|
||||||
.value="${this._configValue!.value}"
|
.value="${this._configValue!.value}"
|
||||||
@yaml-changed="${this._handleYamlChanged}"
|
@yaml-changed="${this._handleYamlChanged}"
|
||||||
@yaml-save="${this._save}"
|
@yaml-save="${this._save}"
|
||||||
|
@ -95,6 +95,7 @@ class LovelacePanel extends LitElement {
|
|||||||
if (state === "yaml-editor") {
|
if (state === "yaml-editor") {
|
||||||
return html`
|
return html`
|
||||||
<hui-editor
|
<hui-editor
|
||||||
|
.hass="${this.hass}"
|
||||||
.lovelace="${this.lovelace}"
|
.lovelace="${this.lovelace}"
|
||||||
.closeEditor="${this._closeEditor}"
|
.closeEditor="${this._closeEditor}"
|
||||||
></hui-editor>
|
></hui-editor>
|
||||||
|
@ -18,6 +18,7 @@ import "./components/hui-yaml-editor";
|
|||||||
// This is not a duplicate import, one is for types, one is for element.
|
// This is not a duplicate import, one is for types, one is for element.
|
||||||
// tslint:disable-next-line
|
// tslint:disable-next-line
|
||||||
import { HuiYamlEditor } from "./components/hui-yaml-editor";
|
import { HuiYamlEditor } from "./components/hui-yaml-editor";
|
||||||
|
import { HomeAssistant } from "../../types";
|
||||||
|
|
||||||
const lovelaceStruct = struct.interface({
|
const lovelaceStruct = struct.interface({
|
||||||
title: "string?",
|
title: "string?",
|
||||||
@ -26,6 +27,7 @@ const lovelaceStruct = struct.interface({
|
|||||||
});
|
});
|
||||||
|
|
||||||
class LovelaceFullConfigEditor extends LitElement {
|
class LovelaceFullConfigEditor extends LitElement {
|
||||||
|
public hass?: HomeAssistant;
|
||||||
public lovelace?: Lovelace;
|
public lovelace?: Lovelace;
|
||||||
public closeEditor?: () => void;
|
public closeEditor?: () => void;
|
||||||
private _saving?: boolean;
|
private _saving?: boolean;
|
||||||
@ -34,6 +36,7 @@ class LovelaceFullConfigEditor extends LitElement {
|
|||||||
|
|
||||||
static get properties() {
|
static get properties() {
|
||||||
return {
|
return {
|
||||||
|
hass: {},
|
||||||
lovelace: {},
|
lovelace: {},
|
||||||
_saving: {},
|
_saving: {},
|
||||||
_changed: {},
|
_changed: {},
|
||||||
@ -62,6 +65,7 @@ class LovelaceFullConfigEditor extends LitElement {
|
|||||||
</app-header>
|
</app-header>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<hui-yaml-editor
|
<hui-yaml-editor
|
||||||
|
.hass="${this.hass}"
|
||||||
@yaml-changed="${this._yamlChanged}"
|
@yaml-changed="${this._yamlChanged}"
|
||||||
@yaml-save="${this._handleSave}"
|
@yaml-save="${this._handleSave}"
|
||||||
>
|
>
|
||||||
@ -102,7 +106,6 @@ class LovelaceFullConfigEditor extends LitElement {
|
|||||||
|
|
||||||
.content {
|
.content {
|
||||||
height: calc(100vh - 68px);
|
height: calc(100vh - 68px);
|
||||||
direction: ltr;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
hui-code-editor {
|
hui-code-editor {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user