Automation icon tweaks (#13495)

2025-04-25 05:47:20 +00:00 · 2022-08-26 02:39:21 +02:00 · 2022-08-26 02:39:21 +02:00 · 35fa763086
commit 35fa763086
parent 44e38cd24e
10 changed files with 61 additions and 36 deletions
--- a/src/components/trace/hat-script-graph.ts
+++ b/src/components/trace/hat-script-graph.ts
@ -1,6 +1,5 @@
 import {
  mdiAbTesting,
-  mdiAlertOctagon,
  mdiArrowDecision,
  mdiArrowUp,
  mdiAsterisk,
@ -12,15 +11,16 @@ import {
  mdiChevronDown,
  mdiChevronUp,
  mdiClose,
-  mdiCloseOctagon,
+  mdiCodeBraces,
  mdiCodeBrackets,
  mdiDevices,
-  mdiExclamation,
+  mdiGestureDoubleTap,
+  mdiHandBackRight,
+  mdiPalette,
  mdiRefresh,
  mdiRoomService,
  mdiShuffleDisabled,
  mdiTimerOutline,
-  mdiTrafficLight,
 } from "@mdi/js";
 import { css, html, LitElement, PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators";
@ -46,7 +46,6 @@ import {
  ChooseActionTraceStep,
  ConditionTraceStep,
  IfActionTraceStep,
-  StopActionTraceStep,
  TraceExtended,
 } from "../../data/trace";
 import "../ha-icon-button";
@ -419,7 +418,7 @@ export class HatScriptGraph extends LitElement {
    return html`
      <hat-graph-node
        .graphStart=${graphStart}
-        .iconPath=${mdiExclamation}
+        .iconPath=${mdiGestureDoubleTap}
        @focus=${this.selectNode(node, path)}
        ?track=${path in this.trace.trace}
        ?active=${this.selected === path}
@ -485,7 +484,7 @@ export class HatScriptGraph extends LitElement {
    return html`
      <hat-graph-node
        .graphStart=${graphStart}
-        .iconPath=${mdiExclamation}
+        .iconPath=${mdiPalette}
        @focus=${this.selectNode(node, path)}
        ?track=${path in this.trace.trace}
        ?active=${this.selected === path}
@ -523,7 +522,7 @@ export class HatScriptGraph extends LitElement {
    return html`
      <hat-graph-node
        .graphStart=${graphStart}
-        .iconPath=${mdiTrafficLight}
+        .iconPath=${mdiCodeBraces}
        @focus=${this.selectNode(node, path)}
        ?track=${path in this.trace.trace}
        ?active=${this.selected === path}
@ -587,13 +586,10 @@ export class HatScriptGraph extends LitElement {
    graphStart = false,
    disabled = false
  ) {
-    const trace = this.trace.trace[path] as StopActionTraceStep[] | undefined;
    return html`
      <hat-graph-node
        .graphStart=${graphStart}
-        .iconPath=${trace?.[0].result?.error
-          ? mdiAlertOctagon
-          : mdiCloseOctagon}
+        .iconPath=${mdiHandBackRight}
        @focus=${this.selectNode(node, path)}
        ?track=${path in this.trace.trace}
        ?active=${this.selected === path}
--- a/src/data/action.ts
+++ b/src/data/action.ts
@ -2,9 +2,10 @@ import {
  mdiAbTesting,
  mdiArrowDecision,
  mdiCallSplit,
-  mdiCloseOctagon,
+  mdiCodeBraces,
  mdiDevices,
-  mdiExclamation,
+  mdiGestureDoubleTap,
+  mdiHandBackRight,
  mdiPalette,
  mdiPlay,
  mdiRefresh,
@ -17,16 +18,16 @@ import {
 export const ACTION_TYPES = {
  condition: mdiAbTesting,
  delay: mdiTimerOutline,
-  event: mdiExclamation,
+  event: mdiGestureDoubleTap,
  play_media: mdiPlay,
  activate_scene: mdiPalette,
  service: mdiRoomService,
-  wait_template: mdiTrafficLight,
+  wait_template: mdiCodeBraces,
  wait_for_trigger: mdiTrafficLight,
  repeat: mdiRefresh,
  choose: mdiArrowDecision,
  if: mdiCallSplit,
  device_id: mdiDevices,
-  stop: mdiCloseOctagon,
+  stop: mdiHandBackRight,
  parallel: mdiShuffleDisabled,
 };
--- a/src/data/condition.ts
+++ b/src/data/condition.ts
@ -1,12 +1,12 @@
 import {
  mdiAmpersand,
-  mdiCancel,
  mdiClockOutline,
  mdiCodeBraces,
  mdiDevices,
-  mdiExclamation,
  mdiGateOr,
+  mdiIdentifier,
  mdiMapMarkerRadius,
+  mdiNotEqualVariant,
  mdiNumeric,
  mdiStateMachine,
  mdiWeatherSunny,
@ -16,12 +16,12 @@ export const CONDITION_TYPES = {
  device: mdiDevices,
  and: mdiAmpersand,
  or: mdiGateOr,
-  not: mdiCancel,
+  not: mdiNotEqualVariant,
  state: mdiStateMachine,
  numeric_state: mdiNumeric,
  sun: mdiWeatherSunny,
  template: mdiCodeBraces,
  time: mdiClockOutline,
-  trigger: mdiExclamation,
+  trigger: mdiIdentifier,
  zone: mdiMapMarkerRadius,
 };
--- a/src/data/script_i18n.ts
+++ b/src/data/script_i18n.ts
@ -119,7 +119,7 @@ export const describeAction = <T extends ActionType>(
      entityId = config.target?.entity_id || config.entity_id;
    }
    const sceneStateObj = entityId ? hass.states[entityId] : undefined;
-    return `Activate scene ${
+    return `Scene ${
      sceneStateObj
        ? computeStateName(sceneStateObj)
        : "scene" in config
@ -154,9 +154,9 @@ export const describeAction = <T extends ActionType>(
  if (actionType === "fire_event") {
    const config = action as EventAction;
    if (isTemplate(config.event)) {
-      return "Fire event based on a template";
+      return "Event based on a template";
    }
-    return `Fire event ${config.event}`;
+    return `Event ${config.event}`;
  }

  if (actionType === "wait_template") {
--- a/src/data/trigger.ts
+++ b/src/data/trigger.ts
@ -4,7 +4,7 @@ import {
  mdiClockOutline,
  mdiCodeBraces,
  mdiDevices,
-  mdiExclamation,
+  mdiGestureDoubleTap,
  mdiHomeAssistant,
  mdiMapMarker,
  mdiMapMarkerRadius,
@ -19,7 +19,7 @@ import {
 export const TRIGGER_TYPES = {
  calendar: mdiCalendar,
  device: mdiDevices,
-  event: mdiExclamation,
+  event: mdiGestureDoubleTap,
  state: mdiStateMachine,
  geo_location: mdiMapMarker,
  homeassistant: mdiHomeAssistant,
--- a/src/panels/config/automation/action/ha-automation-action-row.ts
+++ b/src/panels/config/automation/action/ha-automation-action-row.ts
@ -508,8 +508,15 @@ export default class HaAutomationActionRow extends LitElement {
          --expansion-panel-content-padding: 0;
        }
        .action-icon {
-          color: var(--sidebar-icon-color);
-          padding-right: 8px;
+          display: none;
+        }
+        @media (min-width: 870px) {
+          .action-icon {
+            display: inline-block;
+            color: var(--primary-color);
+            opacity: 0.9;
+            margin-right: 8px;
+          }
        }
        .card-content {
          padding: 16px;
--- a/src/panels/config/automation/condition/ha-automation-condition-row.ts
+++ b/src/panels/config/automation/condition/ha-automation-condition-row.ts
@ -424,8 +424,15 @@ export default class HaAutomationConditionRow extends LitElement {
          --expansion-panel-content-padding: 0;
        }
        .condition-icon {
-          color: var(--sidebar-icon-color);
-          padding-right: 8px;
+          display: none;
+        }
+        @media (min-width: 870px) {
+          .condition-icon {
+            display: inline-block;
+            color: var(--primary-color);
+            opacity: 0.9;
+            margin-right: 8px;
+          }
        }
        .card-content {
          padding: 16px;
--- a/src/panels/config/automation/manual-automation-editor.ts
+++ b/src/panels/config/automation/manual-automation-editor.ts
@ -347,8 +347,15 @@ export class HaManualAutomationEditor extends LitElement {
          padding: 16px;
        }
        .settings-icon {
-          color: var(--sidebar-icon-color);
-          padding-right: 8px;
+          display: none;
+        }
+        @media (min-width: 870px) {
+          .settings-icon {
+            display: inline-block;
+            color: var(--primary-color);
+            opacity: 0.9;
+            margin-right: 8px;
+          }
        }
        .disabled-bar {
          background: var(--divider-color, #e0e0e0);
--- a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
+++ b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
@ -533,8 +533,15 @@ export default class HaAutomationTriggerRow extends LitElement {
          --expansion-panel-content-padding: 0;
        }
        .trigger-icon {
-          color: var(--sidebar-icon-color);
-          padding-right: 8px;
+          display: none;
+        }
+        @media (min-width: 870px) {
+          .trigger-icon {
+            display: inline-block;
+            color: var(--primary-color);
+            opacity: 0.9;
+            margin-right: 8px;
+          }
        }
        .card-content {
          padding: 16px;
--- a/src/translations/en.json
+++ b/src/translations/en.json
@ -2113,7 +2113,7 @@
                  "label": "Condition"
                },
                "event": {
-                  "label": "Fire event",
+                  "label": "Event",
                  "event": "[%key:ui::panel::config::automation::editor::triggers::type::event::label%]",
                  "event_data": "[%key:ui::panel::config::automation::editor::triggers::type::event::event_data%]"
                },
@ -2133,7 +2133,7 @@
                  }
                },
                "activate_scene": {
-                  "label": "Activate scene",
+                  "label": "Scene",
                  "scene": "Scene"
                },
                "repeat": {