From feacc5ac035eb8106c961b58d24e6ace4b2cfd02 Mon Sep 17 00:00:00 2001 From: Philip Allgaier Date: Thu, 22 Oct 2020 21:10:41 +0200 Subject: [PATCH 1/7] Make dev tools use more screen space + use ha-card for template editor --- .../event/developer-tools-event.js | 6 +- .../event/event-subscribe-card.ts | 10 +- .../service/developer-tools-service.js | 1 - .../state/developer-tools-state.js | 4 - .../template/developer-tools-template.ts | 102 +++++++++--------- src/translations/en.json | 26 ++--- 6 files changed, 76 insertions(+), 73 deletions(-) diff --git a/src/panels/developer-tools/event/developer-tools-event.js b/src/panels/developer-tools/event/developer-tools-event.js index ec7526fee9e0..bd2a06792cd6 100644 --- a/src/panels/developer-tools/event/developer-tools-event.js +++ b/src/panels/developer-tools/event/developer-tools-event.js @@ -35,7 +35,6 @@ class HaPanelDevEvent extends EventsMixin(LocalizeMixin(PolymerElement)) { .ha-form { margin-right: 16px; - max-width: 400px; } mwc-button { @@ -48,8 +47,7 @@ class HaPanelDevEvent extends EventsMixin(LocalizeMixin(PolymerElement)) { event-subscribe-card { display: block; - max-width: 800px; - margin: 16px auto; + margin: 16px 16px 0 0; } a { @@ -93,6 +91,7 @@ class HaPanelDevEvent extends EventsMixin(LocalizeMixin(PolymerElement)) { )]] +
@@ -106,7 +105,6 @@ class HaPanelDevEvent extends EventsMixin(LocalizeMixin(PolymerElement)) { >
- `; } diff --git a/src/panels/developer-tools/event/event-subscribe-card.ts b/src/panels/developer-tools/event/event-subscribe-card.ts index f2f386d1ec78..4347aba53a6f 100644 --- a/src/panels/developer-tools/event/event-subscribe-card.ts +++ b/src/panels/developer-tools/event/event-subscribe-card.ts @@ -125,19 +125,23 @@ class EventSubscribeCard extends LitElement { return css` form { display: block; - padding: 16px; + padding: 0 0 16px 16px; } paper-input { display: inline-block; width: 200px; } + mwc-button { + vertical-align: middle; + } .events { margin: -16px 0; padding: 0 16px; } .event { - border-bottom: 1px solid var(--divider-color); - padding-bottom: 16px; + border-top: 1px solid var(--divider-color); + padding-top: 8px; + padding-bottom: 8px; margin: 16px 0; } .event:last-child { diff --git a/src/panels/developer-tools/service/developer-tools-service.js b/src/panels/developer-tools/service/developer-tools-service.js index 71c2a91949ac..4c52102533c4 100644 --- a/src/panels/developer-tools/service/developer-tools-service.js +++ b/src/panels/developer-tools/service/developer-tools-service.js @@ -32,7 +32,6 @@ class HaPanelDevService extends LocalizeMixin(PolymerElement) { .ha-form { margin-right: 16px; - max-width: 400px; } ha-progress-button { diff --git a/src/panels/developer-tools/state/developer-tools-state.js b/src/panels/developer-tools/state/developer-tools-state.js index 530ae3f7363b..63e9ffbbf6b0 100644 --- a/src/panels/developer-tools/state/developer-tools-state.js +++ b/src/panels/developer-tools/state/developer-tools-state.js @@ -32,10 +32,6 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) { padding: 16px; } - .inputs { - max-width: 400px; - } - mwc-button { margin-top: 8px; } diff --git a/src/panels/developer-tools/template/developer-tools-template.ts b/src/panels/developer-tools/template/developer-tools-template.ts index a44755deb548..5ba765e5edde 100644 --- a/src/panels/developer-tools/template/developer-tools-template.ts +++ b/src/panels/developer-tools/template/developer-tools-template.ts @@ -13,6 +13,7 @@ import { classMap } from "lit-html/directives/class-map"; import { debounce } from "../../../common/util/debounce"; import "../../../components/ha-circular-progress"; import "../../../components/ha-code-editor"; +import "../../../components/ha-card"; import { RenderTemplateResult, subscribeRenderTemplate, @@ -90,54 +91,58 @@ class HaPanelDevTemplate extends LitElement { })}" >
-

- ${this.hass.localize( - "ui.panel.developer-tools.tabs.templates.description" - )} -

- -

- ${this.hass.localize( - "ui.panel.developer-tools.tabs.templates.editor" - )} -

- - - ${this.hass.localize( - "ui.panel.developer-tools.tabs.templates.reset" - )} - + "ui.panel.developer-tools.tabs.templates.editor" + )} +

+ + + ${this.hass.localize( + "ui.panel.developer-tools.tabs.templates.reset" + )} + +
+
@@ -243,12 +248,12 @@ class HaPanelDevTemplate extends LitElement { } .horizontal .edit-pane { - max-width: 50%; + max-width: 65%; } .render-pane { position: relative; - max-width: 50%; + flex-grow: 1; } .render-spinner { @@ -263,6 +268,7 @@ class HaPanelDevTemplate extends LitElement { white-space: pre-wrap; background-color: var(--secondary-background-color); padding: 8px; + margin-top: 0; } .all_listeners { diff --git a/src/translations/en.json b/src/translations/en.json index 8a8d8d2c1c5e..f365f9023c42 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -385,7 +385,7 @@ } }, "history_charts": { - "loading_history": "Loading state history...", + "loading_history": "Loading state history…", "no_history_found": "No state history found." }, "service-picker": { @@ -881,7 +881,7 @@ }, "lovelace": { "caption": "Lovelace Dashboards", - "description": "Manage your Lovelace Dashboards", + "description": "Manage your Lovelace dashboards", "dashboards": { "default_dashboard": "This is the default dashboard", "caption": "Dashboards", @@ -1454,7 +1454,7 @@ "email_error_msg": "Invalid email", "password": "Password", "password_error_msg": "Passwords are at least 8 characters", - "forgot_password": "forgot password?", + "forgot_password": "Forgot password?", "start_trial": "Start your free 1 month trial", "trial_info": "No payment information necessary", "alert_password_change_required": "You need to change your password before logging in.", @@ -1552,7 +1552,7 @@ "no_hooks_yet2": " or by creating a ", "no_hooks_yet_link_automation": "webhook automation", "link_learn_more": "Learn more about creating webhook-powered automations.", - "loading": "Loading ...", + "loading": "Loading…", "manage": "Manage", "disable_hook_error_msg": "Failed to disable webhook:" } @@ -1620,17 +1620,17 @@ "unknown_automation": "Unknown automation", "create": "Create automation with device", "triggers": { - "caption": "Do something when...", + "caption": "Do something when…", "no_triggers": "No triggers", "unknown_trigger": "Unknown trigger" }, "conditions": { - "caption": "Only do something if...", + "caption": "Only do something if…", "no_conditions": "No conditions", "unknown_condition": "Unknown condition" }, "actions": { - "caption": "When something is triggered...", + "caption": "When something is triggered…", "no_actions": "No actions", "unknown_action": "Unknown action" }, @@ -1956,7 +1956,7 @@ "wakeup_header": "Wakeup Instructions for", "wakeup_instructions_source": "Wakeup instructions are sourced from the OpenZWave community device database.", "start_refresh_button": "Start Refresh", - "refreshing_description": "Refreshing node information...", + "refreshing_description": "Refreshing node information…", "node_status": "Node Status", "step": "Step" }, @@ -2038,7 +2038,7 @@ "value": "Value" }, "add_device_page": { - "spinner": "Searching for ZHA Zigbee devices...", + "spinner": "Searching for ZHA Zigbee devices…", "pairing_mode": "Make sure your devices are in pairing mode. Check the instructions of your device on how to do this.", "discovered_text": "Devices will show up here once discovered.", "no_devices_found": "No devices were found, make sure they are in paring mode and keep them awake while discovering is running.", @@ -2171,7 +2171,7 @@ }, "network_status": { "network_stopped": "Z-Wave Network Stopped", - "network_starting": "Starting Z-Wave Network...", + "network_starting": "Starting Z-Wave Network…", "network_starting_note": "This may take a while depending on the size of your network.", "network_started": "Z-Wave Network Started", "network_started_note_some_queried": "Awake nodes have been queried. Sleeping nodes will be queried when they wake.", @@ -2258,7 +2258,7 @@ "description": "Home Assistant ran into trouble while loading your configuration and is now running in safe mode. Take a look at the error log to see what went wrong." }, "starting": { - "description": "Home Assistant is starting, please wait..." + "description": "Home Assistant is starting, please wait…" } }, "unused_entities": { @@ -2906,7 +2906,7 @@ "events": { "title": "Events", "description": "Fire an event on the event bus.", - "documentation": "Events Documentation.", + "documentation": "Events documentation.", "type": "Event Type", "data": "Event Data (YAML, optional)", "fire_event": "Fire Event", @@ -2919,7 +2919,7 @@ "start_listening": "Start listening", "stop_listening": "Stop listening", "alert_event_type": "Event type is a mandatory field", - "notification_event_fired": "Event {type} successful fired!" + "notification_event_fired": "Event {type} successfully fired!" }, "services": { "title": "Services", From 80f68f0e083e8a3c2a7a98b6942557a9046668ba Mon Sep 17 00:00:00 2001 From: Philip Allgaier Date: Thu, 22 Oct 2020 21:18:53 +0200 Subject: [PATCH 2/7] Miniscule change --- src/translations/en.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/translations/en.json b/src/translations/en.json index f365f9023c42..b3071db5ac56 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -2906,7 +2906,7 @@ "events": { "title": "Events", "description": "Fire an event on the event bus.", - "documentation": "Events documentation.", + "documentation": "Events documentation", "type": "Event Type", "data": "Event Data (YAML, optional)", "fire_event": "Fire Event", From a5b4fbcba7cd7a88a4013c164e1322ff019d9444 Mon Sep 17 00:00:00 2001 From: Philip Allgaier Date: Thu, 22 Oct 2020 21:29:44 +0200 Subject: [PATCH 3/7] One more miniscule text change --- src/translations/en.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/translations/en.json b/src/translations/en.json index b3071db5ac56..d842b06fc1c7 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -2355,7 +2355,7 @@ "edit": "Edit", "delete": "Delete card", "duplicate": "Duplicate card", - "move": "Move to View", + "move": "Move to view", "move_before": "Move card before", "move_after": "Move card after", "options": "More options", From f5dc2ac4425bd200723e78082929f43c0058bc07 Mon Sep 17 00:00:00 2001 From: Philip Allgaier Date: Fri, 23 Oct 2020 16:49:16 +0200 Subject: [PATCH 4/7] Reduce width of input fields --- .../event/developer-tools-event.js | 20 +++++++++------ .../service/developer-tools-service.js | 25 +++++++++++-------- .../state/developer-tools-state.js | 17 ++++++++++--- 3 files changed, 41 insertions(+), 21 deletions(-) diff --git a/src/panels/developer-tools/event/developer-tools-event.js b/src/panels/developer-tools/event/developer-tools-event.js index bd2a06792cd6..a9794aecc351 100644 --- a/src/panels/developer-tools/event/developer-tools-event.js +++ b/src/panels/developer-tools/event/developer-tools-event.js @@ -33,14 +33,18 @@ class HaPanelDevEvent extends EventsMixin(LocalizeMixin(PolymerElement)) { display: block; } - .ha-form { - margin-right: 16px; + .inputs { + max-width: 400px; } mwc-button { margin-top: 8px; } + .code-editor { + margin-right: 16px; + } + .header { @apply --paper-font-title; } @@ -68,7 +72,7 @@ class HaPanelDevEvent extends EventsMixin(LocalizeMixin(PolymerElement)) { )]]

-
+
- [[localize( 'ui.panel.developer-tools.tabs.events.fire_event' - )]]
+ [[localize( 'ui.panel.developer-tools.tabs.events.fire_event' + )]]
diff --git a/src/panels/developer-tools/service/developer-tools-service.js b/src/panels/developer-tools/service/developer-tools-service.js index 4c52102533c4..48c23ace4806 100644 --- a/src/panels/developer-tools/service/developer-tools-service.js +++ b/src/panels/developer-tools/service/developer-tools-service.js @@ -30,8 +30,8 @@ class HaPanelDevService extends LocalizeMixin(PolymerElement) { padding: 16px; } - .ha-form { - margin-right: 16px; + .inputs { + max-width: 400px; } ha-progress-button { @@ -113,7 +113,7 @@ class HaPanelDevService extends LocalizeMixin(PolymerElement) { [[localize('ui.panel.developer-tools.tabs.services.description')]]

-
+

[[localize('ui.panel.developer-tools.tabs.services.data')]]

+
+
- - [[localize('ui.panel.developer-tools.tabs.services.call_service')]] - -
+
+ + [[localize('ui.panel.developer-tools.tabs.services.call_service')]] + +
diff --git a/src/panels/developer-tools/state/developer-tools-state.js b/src/panels/developer-tools/state/developer-tools-state.js index 63e9ffbbf6b0..ca377d5510d4 100644 --- a/src/panels/developer-tools/state/developer-tools-state.js +++ b/src/panels/developer-tools/state/developer-tools-state.js @@ -36,6 +36,10 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) { margin-top: 8px; } + .entities { + width: 100%; + } + .entities th { text-align: left; } @@ -74,6 +78,10 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) { .entities a { color: var(--primary-color); } + + .inputs { + max-width: 400px; + }
@@ -102,16 +110,19 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {

[[localize('ui.panel.developer-tools.tabs.states.state_attributes')]]

+
+
- [[localize('ui.panel.developer-tools.tabs.states.set_state')]]
+ [[localize('ui.panel.developer-tools.tabs.states.set_state')]] +

[[localize('ui.panel.developer-tools.tabs.states.current_entities')]] From fb4e9c8e4754dae343059e9deca5f8ce827455a5 Mon Sep 17 00:00:00 2001 From: Philip Allgaier Date: Tue, 3 Nov 2020 01:04:04 +0100 Subject: [PATCH 5/7] Align render pane corners with ha-card --- src/panels/developer-tools/template/developer-tools-template.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/panels/developer-tools/template/developer-tools-template.ts b/src/panels/developer-tools/template/developer-tools-template.ts index 5ba765e5edde..bd18335408ad 100644 --- a/src/panels/developer-tools/template/developer-tools-template.ts +++ b/src/panels/developer-tools/template/developer-tools-template.ts @@ -267,6 +267,7 @@ class HaPanelDevTemplate extends LitElement { clear: both; white-space: pre-wrap; background-color: var(--secondary-background-color); + border-radius: var(--ha-card-border-radius, 4px); padding: 8px; margin-top: 0; } From 4f213d527dd688acc6c5f617bcb222e437a05819 Mon Sep 17 00:00:00 2001 From: Philip Allgaier Date: Mon, 26 Apr 2021 11:46:45 +0200 Subject: [PATCH 6/7] Keep only changes to event tab --- .../state/developer-tools-state.js | 4 - .../template/developer-tools-template.ts | 103 ++++++++---------- src/translations/en.json | 30 ++--- 3 files changed, 63 insertions(+), 74 deletions(-) diff --git a/src/panels/developer-tools/state/developer-tools-state.js b/src/panels/developer-tools/state/developer-tools-state.js index 71f6a25a6621..6eb56c86561c 100644 --- a/src/panels/developer-tools/state/developer-tools-state.js +++ b/src/panels/developer-tools/state/developer-tools-state.js @@ -158,10 +158,6 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) { - [[localize('ui.panel.developer-tools.tabs.states.set_state')]] -

[[localize('ui.panel.developer-tools.tabs.states.current_entities')]] diff --git a/src/panels/developer-tools/template/developer-tools-template.ts b/src/panels/developer-tools/template/developer-tools-template.ts index c29c557aa829..9ec9c1c4adaa 100644 --- a/src/panels/developer-tools/template/developer-tools-template.ts +++ b/src/panels/developer-tools/template/developer-tools-template.ts @@ -13,7 +13,6 @@ import { classMap } from "lit-html/directives/class-map"; import { debounce } from "../../../common/util/debounce"; import "../../../components/ha-circular-progress"; import "../../../components/ha-code-editor"; -import "../../../components/ha-card"; import { RenderTemplateResult, subscribeRenderTemplate, @@ -98,58 +97,54 @@ class HaPanelDevTemplate extends LitElement { })}" >
- -
-

- ${this.hass.localize( - "ui.panel.developer-tools.tabs.templates.description" +

+ ${this.hass.localize( + "ui.panel.developer-tools.tabs.templates.description" + )} +

+
- + "ui.panel.developer-tools.tabs.templates.template_extensions" + )} + + +

+ ${this.hass.localize( + "ui.panel.developer-tools.tabs.templates.editor" + )} +

+ + + ${this.hass.localize( + "ui.panel.developer-tools.tabs.templates.reset" + )} +
@@ -269,12 +264,12 @@ class HaPanelDevTemplate extends LitElement { } .horizontal .edit-pane { - max-width: 65%; + max-width: 50%; } .render-pane { position: relative; - flex-grow: 1; + max-width: 50%; } .render-spinner { @@ -288,9 +283,7 @@ class HaPanelDevTemplate extends LitElement { clear: both; white-space: pre-wrap; background-color: var(--secondary-background-color); - border-radius: var(--ha-card-border-radius, 4px); padding: 8px; - margin-top: 0; } .all_listeners { diff --git a/src/translations/en.json b/src/translations/en.json index 42460cdfce8d..b69f874f606c 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -374,7 +374,7 @@ "clear": "Clear", "show_areas": "Show areas", "area": "Area", - "add_new": "Add new area…", + "add_new": "Add new area...", "no_areas": "You don't have any areas", "no_match": "No matching areas found", "add_dialog": { @@ -847,7 +847,7 @@ }, "notification_toast": { "service_call_failed": "Failed to call service {service}.", - "connection_lost": "Connection lost. Reconnecting…", + "connection_lost": "Connection lost. Reconnecting...", "started": "Home Assistant has started!", "starting": "Home Assistant is starting, not everything will be available until it is finished.", "wrapping_up_startup": "Wrapping up startup, not everything will be available until it is finished.", @@ -1055,7 +1055,7 @@ "description": "View the Home Assistant logs", "details": "Log Details ({level})", "load_full_log": "Load Full Home Assistant Log", - "loading_log": "Loading error log…", + "loading_log": "Loading error log...", "no_errors": "No errors have been reported", "no_issues": "There are no new issues!", "clear": "Clear", @@ -1196,7 +1196,7 @@ }, "server_management": { "heading": "Server management", - "introduction": "Control your Home Assistant server… from Home Assistant.", + "introduction": "Control your Home Assistant server... from Home Assistant.", "restart": "Restart", "confirm_restart": "Are you sure you want to restart Home Assistant?", "stop": "Stop", @@ -1781,7 +1781,7 @@ "integrations_link_all_features": " all available features", "connected": "Connected", "not_connected": "Not Connected", - "fetching_subscription": "Fetching subscription…", + "fetching_subscription": "Fetching subscription...", "tts": { "title": "Text to Speech", "info": "Bring personality to your home by having it speak to you by using our Text-to-Speech services. You can use this in automations and scripts by using the {service} service.", @@ -1846,7 +1846,7 @@ "no_hooks_yet2": " or by creating a ", "no_hooks_yet_link_automation": "webhook automation", "link_learn_more": "Learn more about creating webhook-powered automations.", - "loading": "Loading…", + "loading": "Loading...", "manage": "Manage", "disable_hook_error_msg": "Failed to disable webhook:" } @@ -1923,17 +1923,17 @@ "create": "Create automation with device", "create_disable": "Can't create automation with disabled device", "triggers": { - "caption": "Do something when…", + "caption": "Do something when...", "no_triggers": "No triggers", "unknown_trigger": "Unknown trigger" }, "conditions": { - "caption": "Only do something if…", + "caption": "Only do something if...", "no_conditions": "No conditions", "unknown_condition": "Unknown condition" }, "actions": { - "caption": "When something is triggered…", + "caption": "When something is triggered...", "no_actions": "No actions", "unknown_action": "Unknown action" }, @@ -2310,7 +2310,7 @@ "wakeup_header": "Wake-up Instructions for", "wakeup_instructions_source": "Wake-up instructions are sourced from the OpenZWave community device database.", "start_refresh_button": "Start Refresh", - "refreshing_description": "Refreshing node information…", + "refreshing_description": "Refreshing node information...", "node_status": "Node Status", "step": "Step" }, @@ -2387,7 +2387,7 @@ "value": "Value" }, "add_device_page": { - "spinner": "Searching for ZHA Zigbee devices…", + "spinner": "Searching for ZHA Zigbee devices...", "pairing_mode": "Make sure your devices are in pairing mode. Check the instructions of your device on how to do this.", "discovered_text": "Devices will show up here once discovered.", "no_devices_found": "No devices were found, make sure they are in pairing mode and keep them awake while discovering is running.", @@ -2517,7 +2517,7 @@ }, "network_status": { "network_stopped": "Z-Wave Network Stopped", - "network_starting": "Starting Z-Wave Network…", + "network_starting": "Starting Z-Wave Network...", "network_starting_note": "This may take a while depending on the size of your network.", "network_started": "Z-Wave Network Started", "network_started_note_some_queried": "Awake nodes have been queried. Sleeping nodes will be queried when they wake.", @@ -2692,7 +2692,7 @@ "description": "Home Assistant ran into trouble while loading your configuration and is now running in safe mode. Take a look at the error log to see what went wrong." }, "starting": { - "description": "Home Assistant is starting, please wait…" + "description": "Home Assistant is starting, please wait..." } }, "unused_entities": { @@ -3442,8 +3442,8 @@ }, "states": { "title": "States", - "description1": "Set the representation of a device within Home Assistant.", - "description2": "This will not communicate with the actual device.", + "description1": "Set the current state representation of an entity within Home Assistant.", + "description2": "If the entity belongs to a device, there will be no actual communication with that device.", "entity": "Entity", "state": "State", "attributes": "Attributes", From 4f4ca3a4644ff2864f75adce09339b8240cfdea6 Mon Sep 17 00:00:00 2001 From: Philip Allgaier Date: Mon, 26 Apr 2021 11:52:20 +0200 Subject: [PATCH 7/7] Limit max-width --- .../developer-tools/event/developer-tools-event.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/panels/developer-tools/event/developer-tools-event.js b/src/panels/developer-tools/event/developer-tools-event.js index 11bc51faa0c8..163c034b2b41 100644 --- a/src/panels/developer-tools/event/developer-tools-event.js +++ b/src/panels/developer-tools/event/developer-tools-event.js @@ -24,12 +24,17 @@ class HaPanelDevEvent extends EventsMixin(LocalizeMixin(PolymerElement)) { return html`