Automation icon tweaks (#13495)

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
+        .iconPath=${mdiHandBackRight}
-          ? mdiAlertOctagon
-          : mdiCloseOctagon}
         @focus=${this.selectNode(node, path)}
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}

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,
 };

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,
 };

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") {

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,

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);
+          display: none;
-          padding-right: 8px;
+        }
+        @media (min-width: 870px) {
+          .action-icon {
+            display: inline-block;
+            color: var(--primary-color);
+            opacity: 0.9;
+            margin-right: 8px;
+          }
         }
         .card-content {
           padding: 16px;

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);
+          display: none;
-          padding-right: 8px;
+        }
+        @media (min-width: 870px) {
+          .condition-icon {
+            display: inline-block;
+            color: var(--primary-color);
+            opacity: 0.9;
+            margin-right: 8px;
+          }
         }
         .card-content {
           padding: 16px;

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);
+          display: none;
-          padding-right: 8px;
+        }
+        @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);

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);
+          display: none;
-          padding-right: 8px;
+        }
+        @media (min-width: 870px) {
+          .trigger-icon {
+            display: inline-block;
+            color: var(--primary-color);
+            opacity: 0.9;
+            margin-right: 8px;
+          }
         }
         .card-content {
           padding: 16px;

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": {