Options: use MD icons in the language editor buttons
This unifies how the buttons look in different OSs, because before we
relied in the characters being rendered by the default sans-serif font
installed in the computer.
Bug: translateselectedtext:12
Change-Id: I70e524f9664a957637f37e81465c9ec435ecc3dd
diff --git a/package-lock.json b/package-lock.json
index 4aaae85..0d4cec1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
"version": "0.0.0",
"license": "MIT",
"dependencies": {
+ "@mdi/js": "^6.7.96",
"@polymer/paper-button": "^3.0.1",
"chrome-types": "^0.1.113",
"clean-terminal-webpack-plugin": "^3.0.0",
@@ -83,6 +84,11 @@
"resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.3.2.tgz",
"integrity": "sha512-A2e18XzPMrIh35nhIdE4uoqRzoIpEU5vZYuQN4S3Ee1zkGdYC27DP12pewbw/RLgPHzaE4kx/YqxMzebOpm0dA=="
},
+ "node_modules/@mdi/js": {
+ "version": "6.7.96",
+ "resolved": "https://registry.npmjs.org/@mdi/js/-/js-6.7.96.tgz",
+ "integrity": "sha512-vZvhFrNN9LQx+Awu3nU6ESfXXDpRA/CA4mwikzU5g8uf9NpAocK43ecQvVNntwiXlLKpyplas8d4lsfpqjtXLA=="
+ },
"node_modules/@nodelib/fs.scandir": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -3159,6 +3165,11 @@
"resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.3.2.tgz",
"integrity": "sha512-A2e18XzPMrIh35nhIdE4uoqRzoIpEU5vZYuQN4S3Ee1zkGdYC27DP12pewbw/RLgPHzaE4kx/YqxMzebOpm0dA=="
},
+ "@mdi/js": {
+ "version": "6.7.96",
+ "resolved": "https://registry.npmjs.org/@mdi/js/-/js-6.7.96.tgz",
+ "integrity": "sha512-vZvhFrNN9LQx+Awu3nU6ESfXXDpRA/CA4mwikzU5g8uf9NpAocK43ecQvVNntwiXlLKpyplas8d4lsfpqjtXLA=="
+ },
"@nodelib/fs.scandir": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
diff --git a/package.json b/package.json
index 74a3012..3e4d53f 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
"license": "MIT",
"private": true,
"dependencies": {
+ "@mdi/js": "^6.7.96",
"@polymer/paper-button": "^3.0.1",
"chrome-types": "^0.1.113",
"clean-terminal-webpack-plugin": "^3.0.0",
diff --git a/src/options/credits.json5 b/src/options/credits.json5
index ac911a6..286b50d 100644
--- a/src/options/credits.json5
+++ b/src/options/credits.json5
@@ -17,6 +17,12 @@
"license": "MIT License"
},
{
+ "name": "@mdi/js",
+ "url": "https://materialdesignicons.com/",
+ "author": "Pictogrammers icon Group, Google LLC",
+ "license": "MIT and Apache-2.0 License"
+ },
+ {
"name": "@polymer/paper-button",
"url": "https://github.com/PolymerElements/paper-button",
"author": "The Polymer Project Authors",
@@ -100,4 +106,9 @@
"author": "Pavel Kuzmin",
"license": "MIT License"
},
+ {
+ "name": "Home Assistant Frontend",
+ "url": "https://github.com/home-assistant/frontend",
+ "license": "Apache-2.0 License"
+ }
]
diff --git a/src/options/elements/framework/ha-svg-icon.ts b/src/options/elements/framework/ha-svg-icon.ts
new file mode 100644
index 0000000..99b18f2
--- /dev/null
+++ b/src/options/elements/framework/ha-svg-icon.ts
@@ -0,0 +1,60 @@
+/*
+ * Written by the Home Assistant frontend authors, and copied here under the
+ * Apache 2.0 license
+ * (https://github.com/home-assistant/frontend/blob/dev/LICENSE.md).
+ *
+ * Slightly adapted.
+ *
+ * Original file:
+ * https://github.com/home-assistant/frontend/blob/4922e575f822c65d81fcde1225cfee5e338ac997/src/components/ha-svg-icon.ts
+ **/
+import {css, CSSResultGroup, LitElement, svg, SVGTemplateResult} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('ha-svg-icon')
+export class HaSvgIcon extends LitElement {
+ @property() public path?: string;
+
+ @property() public viewBox?: string;
+
+ protected render(): SVGTemplateResult {
+ return svg`
+ <svg
+ viewBox=${this.viewBox || '0 0 24 24'}
+ preserveAspectRatio="xMidYMid meet"
+ focusable="false"
+ role="img"
+ aria-hidden="true"
+ >
+ <g>
+ ${this.path ? svg`<path d=${this.path}></path>` : ''}
+ </g>
+ </svg>`;
+ }
+
+ static get styles(): CSSResultGroup {
+ return css`
+ :host {
+ display: var(--ha-icon-display, inline-flex);
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ vertical-align: middle;
+ fill: currentcolor;
+ width: var(--mdc-icon-size, 24px);
+ height: var(--mdc-icon-size, 24px);
+ }
+ svg {
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ display: block;
+ }
+ `;
+ }
+}
+declare global {
+ interface HTMLElementTagNameMap {
+ 'ha-svg-icon': HaSvgIcon;
+ }
+}
diff --git a/src/options/elements/options-editor/languages-editor.ts b/src/options/elements/options-editor/languages-editor.ts
index c48a3b6..d6f3e52 100644
--- a/src/options/elements/options-editor/languages-editor.ts
+++ b/src/options/elements/options-editor/languages-editor.ts
@@ -1,6 +1,8 @@
import '@polymer/paper-button/paper-button.js';
import './add-language-dialog';
+import '../framework/ha-svg-icon';
+import {mdiArrowDown, mdiArrowUp, mdiClose} from '@mdi/js';
import {css, html, LitElement} from 'lit';
import {customElement, property} from 'lit/decorators.js';
import {map} from 'lit/directives/map.js';
@@ -60,7 +62,6 @@
}
#languages li :is(.delete, .movebtn) {
- font-family: inherit!important;
min-width: 28px;
width: 28px;
min-height: 28px;
@@ -69,6 +70,10 @@
margin: 0;
}
+ #languages li ha-svg-icon {
+ --mdc-icon-size: 16px;
+ }
+
#languages li paper-button:is(:hover, :focus) {
background: rgba(0, 0, 0, 0.06);
}
@@ -98,13 +103,13 @@
<paper-button
class="movebtn"
@click=${() => this.swapLanguages(i, i - 1)}>
- ↑
+ <ha-svg-icon .path=${mdiArrowUp}></ha-svg-icon>
</paper-button>
`);
} else {
moveBtns.push(html`
<paper-button class="movebtn" disabled>
- ↑
+ <ha-svg-icon .path=${mdiArrowUp}></ha-svg-icon>
</paper-button>
`);
}
@@ -113,13 +118,13 @@
<paper-button
class="movebtn"
@click=${() => this.swapLanguages(i, i + 1)}>
- ↓
+ <ha-svg-icon .path=${mdiArrowDown}></ha-svg-icon>
</paper-button>
`);
} else {
moveBtns.push(html`
<paper-button class="movebtn" disabled>
- ↓
+ <ha-svg-icon .path=${mdiArrowDown}></ha-svg-icon>
</paper-button>
`);
}
@@ -133,7 +138,7 @@
<paper-button
class="delete"
@click=${() => this.deleteLanguage(lang)}>
- ×
+ <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
</paper-button>
</li>
`;