Some fixes for icons (#5758)

This commit is contained in:
Bram Kragten 2020-05-06 23:18:10 +02:00 committed by GitHub
parent 89f6f16ba2
commit 9630a58ea7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 42 additions and 17 deletions

1
.gitignore vendored
View File

@ -5,7 +5,6 @@ npm-debug.log
.DS_Store .DS_Store
hass_frontend/* hass_frontend/*
.reify-cache .reify-cache
demo/hademo-icons.html
# Python stuff # Python stuff
*.py[cod] *.py[cod]

View File

@ -3,7 +3,6 @@ build-translations/*
translations/* translations/*
node_modules/* node_modules/*
hass_frontend/* hass_frontend/*
demo/hademo-icons.html
pip-selfcheck.json pip-selfcheck.json
# vscode # vscode

View File

@ -8,6 +8,7 @@ const ICON_PACKAGE_PATH = path.resolve(
"../../node_modules/@mdi/svg/" "../../node_modules/@mdi/svg/"
); );
const META_PATH = path.resolve(ICON_PACKAGE_PATH, "meta.json"); const META_PATH = path.resolve(ICON_PACKAGE_PATH, "meta.json");
const PACKAGE_PATH = path.resolve(ICON_PACKAGE_PATH, "package.json");
const ICON_PATH = path.resolve(ICON_PACKAGE_PATH, "svg"); const ICON_PATH = path.resolve(ICON_PACKAGE_PATH, "svg");
const OUTPUT_DIR = path.resolve(__dirname, "../../build/mdi"); const OUTPUT_DIR = path.resolve(__dirname, "../../build/mdi");
@ -26,7 +27,7 @@ const getMeta = () => {
const splitBySize = (meta) => { const splitBySize = (meta) => {
const chunks = []; const chunks = [];
const CHUNK_SIZE = 100000; const CHUNK_SIZE = 50000;
let curSize = 0; let curSize = 0;
let startKey; let startKey;
@ -64,8 +65,7 @@ const findDifferentiator = (curString, prevString) => {
return curString.substring(0, i + 1); return curString.substring(0, i + 1);
} }
} }
console.error("Cannot find differentiator", curString, prevString); throw new Error("Cannot find differentiator", curString, prevString);
return undefined;
}; };
gulp.task("gen-icons-json", (done) => { gulp.task("gen-icons-json", (done) => {
@ -75,7 +75,7 @@ gulp.task("gen-icons-json", (done) => {
if (!fs.existsSync(OUTPUT_DIR)) { if (!fs.existsSync(OUTPUT_DIR)) {
fs.mkdirSync(OUTPUT_DIR, { recursive: true }); fs.mkdirSync(OUTPUT_DIR, { recursive: true });
} }
const manifest = []; const parts = [];
let lastEnd; let lastEnd;
split.forEach((chunk) => { split.forEach((chunk) => {
@ -93,16 +93,19 @@ gulp.task("gen-icons-json", (done) => {
output[icon.name] = icon.path; output[icon.name] = icon.path;
}); });
const filename = hash(output); const filename = hash(output);
manifest.push({ start: startKey, file: filename }); parts.push({ start: startKey, file: filename });
fs.writeFileSync( fs.writeFileSync(
path.resolve(OUTPUT_DIR, `${filename}.json`), path.resolve(OUTPUT_DIR, `${filename}.json`),
JSON.stringify(output) JSON.stringify(output)
); );
}); });
const file = fs.readFileSync(PACKAGE_PATH, { encoding });
const package = JSON.parse(file);
fs.writeFileSync( fs.writeFileSync(
path.resolve(OUTPUT_DIR, "iconMetadata.json"), path.resolve(OUTPUT_DIR, "iconMetadata.json"),
JSON.stringify(manifest) JSON.stringify({ version: package.version, parts })
); );
done(); done();

View File

@ -18,6 +18,10 @@ export class HaIconButton extends LitElement {
@property({ type: String }) label = ""; @property({ type: String }) label = "";
protected createRenderRoot() {
return this.attachShadow({ mode: "open", delegatesFocus: true });
}
protected render(): TemplateResult { protected render(): TemplateResult {
return html` return html`
<mwc-icon-button <mwc-icon-button
@ -40,6 +44,10 @@ export class HaIconButton extends LitElement {
return css` return css`
:host { :host {
display: inline-block; display: inline-block;
outline: none;
}
mwc-icon-button {
--mdc-theme-on-primary: currentColor;
} }
ha-icon { ha-icon {
display: inline-flex; display: inline-flex;

View File

@ -1,5 +1,5 @@
import "@polymer/iron-icon/iron-icon"; import "@polymer/iron-icon/iron-icon";
import { get, Store } from "idb-keyval"; import { get, set, clear, Store } from "idb-keyval";
import { import {
customElement, customElement,
LitElement, LitElement,
@ -13,7 +13,7 @@ import {
import "./ha-svg-icon"; import "./ha-svg-icon";
import { debounce } from "../common/util/debounce"; import { debounce } from "../common/util/debounce";
import { iconMetadata } from "../resources/icon-metadata"; import { iconMetadata } from "../resources/icon-metadata";
import { IconMetadata } from "../types"; import { IconMeta } from "../types";
interface Icons { interface Icons {
[key: string]: string; [key: string]: string;
@ -24,12 +24,23 @@ interface Chunks {
} }
const iconStore = new Store("hass-icon-db", "mdi-icon-store"); const iconStore = new Store("hass-icon-db", "mdi-icon-store");
get("_version", iconStore).then((version) => {
if (!version) {
set("_version", iconMetadata.version, iconStore);
} else if (version !== iconMetadata.version) {
clear(iconStore).then(() =>
set("_version", iconMetadata.version, iconStore)
);
}
});
const chunks: Chunks = {}; const chunks: Chunks = {};
const MDI_PREFIXES = ["mdi", "hass", "hassio"]; const MDI_PREFIXES = ["mdi", "hass", "hassio", "hademo"];
const findIconChunk = (icon): string => { const findIconChunk = (icon): string => {
let lastChunk: IconMetadata; let lastChunk: IconMeta;
for (const chunk of iconMetadata) { for (const chunk of iconMetadata.parts) {
if (chunk.start !== undefined && icon < chunk.start) { if (chunk.start !== undefined && icon < chunk.start) {
break; break;
} }

View File

@ -482,7 +482,7 @@ class HaSidebar extends LitElement {
box-sizing: border-box; box-sizing: border-box;
height: 65px; height: 65px;
display: flex; display: flex;
padding: 0 12px; padding: 0 8.5px;
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
white-space: nowrap; white-space: nowrap;
font-weight: 400; font-weight: 400;

View File

@ -1,4 +1,4 @@
import * as iconMetadata_ from "../../build/mdi/iconMetadata.json"; import * as iconMetadata_ from "../../build/mdi/iconMetadata.json";
import { IconMetadata } from "../types.js"; import { IconMetaFile } from "../types.js";
export const iconMetadata = (iconMetadata_ as any).default as IconMetadata[]; export const iconMetadata = (iconMetadata_ as any).default as IconMetaFile;

View File

@ -109,7 +109,12 @@ export interface TranslationMetadata {
}; };
} }
export interface IconMetadata { export interface IconMetaFile {
version: string;
parts: IconMeta[];
}
export interface IconMeta {
start: string; start: string;
file: string; file: string;
} }