Add vertical option for tile card (#14743)

src/panels/lovelace/cards/hui-tile-card.ts

@@ -260,10 +260,12 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
     const entityId = this._config.entity;
     const stateObj = entityId ? this.hass.states[entityId] : undefined;
 
+    const vertical = this._config.vertical ? "tile-vertical" : "";
+
     if (!stateObj) {
       return html`
         <ha-card class="disabled">
-          <div class="tile">
+          <div class="tile ${vertical}">
             <div class="icon-container">
               <ha-tile-icon class="icon" .iconPath=${mdiHelp}></ha-tile-icon>
               <ha-tile-badge
@@ -310,7 +312,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
     return html`
       <ha-card style=${styleMap(style)} class=${classMap({ active })}>
         ${this._shouldRenderRipple ? html`<mwc-ripple></mwc-ripple>` : null}
-        <div class="tile">
+        <div class="tile ${vertical}">
           <div
             class="icon-container"
             role="button"
@@ -435,6 +437,10 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
         flex-direction: row;
         align-items: center;
       }
+      .tile-vertical {
+        flex-direction: column;
+        text-align: center;
+      }
       .icon-container {
         position: relative;
         flex: none;

src/panels/lovelace/editor/config-elements/hui-tile-card-editor.ts

@@ -41,6 +41,7 @@ const cardConfigStruct = assign(
     icon: optional(string()),
     color: optional(string()),
     show_entity_picture: optional(boolean()),
+    vertical: optional(boolean()),
     tap_action: optional(actionConfigStruct),
     icon_tap_action: optional(actionConfigStruct),
     features: optional(array(any())),
@@ -104,6 +105,12 @@ export class HuiTileCardEditor
                     boolean: {},
                   },
                 },
+                {
+                  name: "vertical",
+                  selector: {
+                    boolean: {},
+                  },
+                },
               ] as const,
             },
           ] as const,
@@ -259,6 +266,7 @@ export class HuiTileCardEditor
       case "color":
       case "icon_tap_action":
       case "show_entity_picture":
+      case "vertical":
         return this.hass!.localize(
           `ui.panel.lovelace.editor.card.tile.${schema.name}`
         );

src/translations/en.json

@@ -4293,6 +4293,7 @@
               "appearance": "Appearance",
               "default_color": "Default color (state)",
               "show_entity_picture": "Show entity picture",
+              "vertical": "Vertical",
               "features": {
                 "name": "Features",
                 "not_compatible": "Not compatible",