mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-10 02:46:38 +00:00
Some fixes for icons (#5758)
This commit is contained in:
parent
89f6f16ba2
commit
9630a58ea7
1
.gitignore
vendored
1
.gitignore
vendored
@ -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]
|
||||||
|
@ -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
|
||||||
|
@ -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();
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user