Add themes to demos (#2518)

This commit is contained in:
Paulus Schoutsen 2019-01-20 20:19:01 -08:00 committed by GitHub
parent 26dbef8d4c
commit 5276db5d23
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 173 additions and 11 deletions

View File

@ -23,4 +23,5 @@ export const setDemoConfig = async (
const config = await selectedDemoConfig;
hass.addEntities(config.entities(), true);
lovelace.saveConfig(config.lovelace());
hass.mockTheme(config.theme());
};

View File

@ -3774,7 +3774,7 @@ export const demoEntitiesJimpower: () => Entity[] = () =>
"binary_sensor.recycle": {
entity_id: "binary_sensor.recycle",
state: "off",
attributes: { friendly_name: "Recycle", icon: "fas:recycle" },
attributes: { friendly_name: "Recycle", icon: "mdi:recycle" },
last_changed: "2019-01-14T08:57:00.348349+00:00",
last_updated: "2019-01-14T08:58:04.463267+00:00",
context: { id: "76ef24942b0b4822bde851fc9e5e1b37", user_id: null },
@ -3782,7 +3782,7 @@ export const demoEntitiesJimpower: () => Entity[] = () =>
"binary_sensor.trash": {
entity_id: "binary_sensor.trash",
state: "off",
attributes: { friendly_name: "Trash", icon: "fas:trash-alt" },
attributes: { friendly_name: "Trash", icon: "mdi:delete" },
last_changed: "2019-01-15T14:00:01.040666+00:00",
last_updated: "2019-01-15T14:00:01.040666+00:00",
context: { id: "7bb9aaeb1b6b41e3be746e200a452318", user_id: null },
@ -3812,7 +3812,7 @@ export const demoEntitiesJimpower: () => Entity[] = () =>
state: "off",
attributes: {
friendly_name: "Doors",
icon: "fas:door-closed",
icon: "mdi:door-closed",
device_class: "door",
},
last_changed: "2019-01-18T19:17:16.499271+00:00",
@ -3824,7 +3824,7 @@ export const demoEntitiesJimpower: () => Entity[] = () =>
state: "on",
attributes: {
friendly_name: "Lights",
icon: "fas:lightbulb",
icon: "mdi:lightbulb",
device_class: "light",
},
last_changed: "2019-01-18T18:59:16.225881+00:00",

View File

@ -1,6 +1,7 @@
import { DemoConfig } from "../types";
import { demoLovelaceJimpower } from "./lovelace";
import { demoEntitiesJimpower } from "./entities";
import { demoThemeJimpower } from "./theme";
export const demoJimpower: DemoConfig = {
authorName: "Jimpower",
@ -8,4 +9,5 @@ export const demoJimpower: DemoConfig = {
name: "Kingia Castle",
lovelace: demoLovelaceJimpower,
entities: demoEntitiesJimpower,
theme: demoThemeJimpower,
};

View File

@ -0,0 +1,48 @@
export const demoThemeJimpower = () => ({
"text-primary-color": "var(--primary-text-color)",
"paper-item-icon-color": "var(--primary-text-color)",
"primary-color": "#5294E2",
"label-badge-red": "var(--accent-color)",
"paper-tabs-selection-bar-color": "green",
"paper-slider-knob-color": "var(--accent-color)",
"light-primary-color": "var(--accent-color)",
"primary-background-color": "#383C45",
"primary-text-color": "#FFFFFF",
"paper-item-selected_-_background-color": "#434954",
"paper-slider-active-color": "var(--accent-color)",
"secondary-background-color": "#383C45",
"paper-slider-container-color":
"linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat",
"paper-slider-disabled-active-color": "var(--disabled-text-color)",
"disabled-text-color": "#7F848E",
"paper-item-icon_-_color": "green",
"paper-grey-200": "#414A59",
"label-badge-background-color": "#2E333A",
"paper-card-header-color": "var(--accent-color)",
"paper-listbox-background-color": "#2E333A",
"table-row-background-color": "#353840",
"paper-grey-50": "var(--primary-text-color)",
"paper-toggle-button-checked-button-color": "var(--accent-color)",
"paper-dialog-background-color": "#434954",
"secondary-text-color": "#5294E2",
"google-red-500": "#E45E65",
"divider-color": "rgba(0, 0, 0, .12)",
"paper-toggle-button-unchecked-ink-color": "var(--disabled-text-color)",
"google-green-500": "#39E949",
"paper-toggle-button-unchecked-button-color": "var(--disabled-text-color)",
"label-badge-border-color": "green",
"paper-listbox-color": "var(--primary-color)",
"paper-slider-disabled-secondary-color": "var(--disabled-text-color)",
"paper-toggle-button-checked-ink-color": "var(--accent-color)",
"paper-card-background-color": "#434954",
"label-badge-text-color": "var(--primary-text-color)",
"paper-slider-knob-start-color": "var(--accent-color)",
"paper-toggle-button-unchecked-bar-color": "var(--disabled-text-color)",
"dark-primary-color": "var(--accent-color)",
"paper-slider-secondary-color": "var(--secondary-background-color)",
"paper-slider-pin-color": "var(--accent-color)",
"paper-item-icon-active-color": "#F9C536",
"accent-color": "#E45E65",
"paper-toggle-button-checked-bar-color": "var(--accent-color)",
"table-row-alternative-background-color": "#3E424B",
});

View File

@ -1,6 +1,7 @@
import { DemoConfig } from "../types";
import { demoLovelaceKernehed } from "./lovelace";
import { demoEntitiesKernehed } from "./entities";
import { demoThemeKernehed } from "./theme";
export const demoKernehed: DemoConfig = {
authorName: "Kernehed",
@ -8,4 +9,5 @@ export const demoKernehed: DemoConfig = {
name: "Hem",
lovelace: demoLovelaceKernehed,
entities: demoEntitiesKernehed,
theme: demoThemeKernehed,
};

View File

@ -0,0 +1,50 @@
// https://community.home-assistant.io/t/slate-a-new-dark-theme/86410
export const demoThemeKernehed = () => ({
"text-primary-color": "var(--primary-text-color)",
"paper-item-icon-color": "var(--primary-text-color)",
"primary-color": "#2980b9",
"label-badge-red": "var(--accent-color)",
"paper-tabs-selection-bar-color": "green",
"paper-slider-knob-color": "var(--accent-color)",
"primary-text-color": "#FFFFFF",
"light-primary-color": "var(--accent-color)",
"primary-background-color": "#222222",
"sidebar-icon-color": "#777777",
"paper-item-selected_-_background-color": "#292929",
"paper-slider-active-color": "var(--accent-color)",
"secondary-background-color": "#222222",
"paper-slider-container-color":
"linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat",
"paper-slider-disabled-active-color": "var(--disabled-text-color)",
"disabled-text-color": "#777777",
"paper-item-icon_-_color": "green",
"paper-grey-200": "#222222",
"label-badge-background-color": "#222222",
"paper-card-header-color": "var(--accent-color)",
"paper-listbox-background-color": "#141414",
"table-row-background-color": "#292929",
"paper-grey-50": "var(--primary-text-color)",
"paper-toggle-button-checked-button-color": "var(--accent-color)",
"paper-dialog-background-color": "#292929",
"secondary-text-color": "#b58e31",
"google-red-500": "#b58e31",
"divider-color": "rgba(0, 0, 0, .12)",
"paper-toggle-button-unchecked-ink-color": "var(--disabled-text-color)",
"google-green-500": "#2980b9",
"paper-toggle-button-unchecked-button-color": "var(--disabled-text-color)",
"label-badge-border-color": "green",
"paper-listbox-color": "#777777",
"paper-slider-disabled-secondary-color": "var(--disabled-text-color)",
"paper-toggle-button-checked-ink-color": "var(--accent-color)",
"paper-card-background-color": "#292929",
"label-badge-text-color": "var(--primary-text-color)",
"paper-slider-knob-start-color": "var(--accent-color)",
"paper-toggle-button-unchecked-bar-color": "var(--disabled-text-color)",
"dark-primary-color": "var(--accent-color)",
"paper-slider-secondary-color": "var(--secondary-background-color)",
"paper-slider-pin-color": "var(--accent-color)",
"paper-item-icon-active-color": "#b58e31",
"accent-color": "#2980b9",
"paper-toggle-button-checked-bar-color": "var(--accent-color)",
"table-row-alternative-background-color": "#292929",
});

View File

@ -1,6 +1,7 @@
import { DemoConfig } from "../types";
import { demoLovelaceTeachingbirds } from "./lovelace";
import { demoEntitiesTeachingbirds } from "./entities";
import { demoThemeTeachingbirds } from "./theme";
export const demoTeachingbirds: DemoConfig = {
authorName: "Isabella Gross Alström",
@ -8,4 +9,5 @@ export const demoTeachingbirds: DemoConfig = {
name: "Isa's mobile friendly LL",
lovelace: demoLovelaceTeachingbirds,
entities: demoEntitiesTeachingbirds,
theme: demoThemeTeachingbirds,
};

View File

@ -0,0 +1,31 @@
export const demoThemeTeachingbirds = () => ({
"paper-card-header-color": "var(--paper-item-icon-color)",
"paper-slider-pin-color": "var(--primary-color)",
"paper-listbox-background-color": "#202020",
"paper-grey-50": "var(--primary-text-color)",
"paper-item-icon-color": "#d3d3d3",
"divider-color": "rgba(255, 255, 255, 0.12)",
"primary-color": "#389638",
"label-badge-red": "var(--primary-color)",
"paper-slider-secondary-color": "var(--light-primary-color)",
"paper-slider-knob-color": "var(--primary-color)",
"paper-listbox-color": "#FFFFFF",
"paper-toggle-button-checked-bar-color": "var(--light-primary-color)",
"paper-toggle-button-checked-ink-color": "var(--dark-primary-color)",
"paper-toggle-button-unchecked-bar-color": "var(--primary-text-color)",
"paper-card-background-color": "#4e4e4e",
"label-badge-text-color": "var(--text-primary-color)",
"primary-background-color": "#303030",
"sidebar-icon-color": "var(--paper-item-icon-color)",
"paper-slider-active-color": "#d8bf50",
"secondary-background-color": "#2b2b2b",
"paper-slider-knob-start-color": "var(--primary-color)",
"paper-item-icon-active-color": "#d8bf50",
"paper-toggle-button-checked-button-color": "var(--primary-color)",
"secondary-text-color": "#389638",
"disabled-text-color": "#545454",
"paper-item-icon_-_color": "var(--primary-text-color)",
"paper-grey-200": "#191919",
"primary-text-color": "#cfcfcf",
"label-badge-background-color": "var(--secondary-background-color)",
});

View File

@ -8,4 +8,5 @@ export interface DemoConfig {
authorUrl: string;
lovelace: () => LovelaceConfig;
entities: () => Entity[];
theme: () => { [key: string]: string } | null;
}

View File

@ -20,7 +20,12 @@ class HaDemo extends HomeAssistant {
mockTranslations(hass);
mockHistory(hass);
mockShoppingList(hass);
selectedDemoConfig.then((conf) => hass.addEntities(conf.entities()));
selectedDemoConfig.then((conf) => {
hass.addEntities(conf.entities());
if (conf.theme) {
hass.mockTheme(conf.theme());
}
});
// Taken from polymer/pwa-helpers. BSD-3 licensed
document.body.addEventListener(

View File

@ -11,7 +11,7 @@ export const demoConfig: HassConfig = {
temperature: "°C",
volume: "L",
},
components: [],
components: ["conversation"],
time_zone: "America/Los_Angeles",
config_dir: "/config",
version: "DEMO",

View File

@ -1,4 +1,5 @@
import { fireEvent } from "../common/dom/fire_event";
import applyThemesOnElement from "../common/dom/apply_themes_on_element";
import { demoConfig } from "./demo_config";
import { demoServices } from "./demo_services";
@ -26,6 +27,7 @@ export interface MockHomeAssistant extends HomeAssistant {
mockWS(type: string, callback: (msg: any) => any);
mockAPI(path: string | RegExp, callback: RestCallback);
mockEvent(event);
mockTheme(theme: { [key: string]: string } | null);
}
export const provideHass = (
@ -33,6 +35,8 @@ export const provideHass = (
overrideData: Partial<HomeAssistant> = {}
): MockHomeAssistant => {
elements = ensureArray(elements);
// Can happen because we store sidebar, more info etc on hass.
const hass = (): MockHomeAssistant => elements[0].hass;
const wsCommands = {};
const restResponses: Array<[string | RegExp, RestCallback]> = [];
@ -42,22 +46,22 @@ export const provideHass = (
const entities = {};
function updateHass(obj: Partial<MockHomeAssistant>) {
const hass = { ...elements[0].hass, ...obj };
const newHass = { ...hass(), ...obj };
elements.forEach((el) => {
el.hass = hass;
el.hass = newHass;
});
}
function updateStates(newStates: HassEntities) {
updateHass({
states: { ...elements[0].hass.states, ...newStates },
states: { ...hass().states, ...newStates },
});
}
function addEntities(newEntities, replace: boolean = false) {
const states = {};
ensureArray(newEntities).forEach((ent) => {
ent.hass = elements[0].hass;
ent.hass = hass();
entities[ent.entityId] = ent;
states[ent.entityId] = ent.toState();
});
@ -203,10 +207,25 @@ export const provideHass = (
mockEvent(event) {
(eventListeners[event] || []).forEach((fn) => fn(event));
},
mockTheme(theme) {
updateHass({
selectedTheme: theme ? "mock" : "default",
themes: {
...hass().themes,
themes: {
mock: theme as any,
},
},
});
const hassObj = hass();
elements.forEach((el) => {
applyThemesOnElement(el, hassObj.themes, hassObj.selectedTheme, true);
});
},
...overrideData,
} as MockHomeAssistant);
// @ts-ignore
return elements[0].hass;
return hass();
};

View File

@ -86,6 +86,7 @@ export interface HomeAssistant {
services: HassServices;
config: HassConfig;
themes: Themes;
selectedTheme: string | null;
panels: Panels;
panelUrl: string;
language: string;