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:
yosilevy 2019-02-12 00:18:17 +02:00 committed by Paulus Schoutsen
parent 310b81de04
commit 44dca3b86d
4 changed files with 56 additions and 17 deletions

View File

@ -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 {

View File

@ -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}"

View File

@ -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>

View File

@ -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 {