From 06368a6f0ef8ccf635c17a2604d6a673213fe832 Mon Sep 17 00:00:00 2001
From: Florian Gareis <TheZoker@users.noreply.github.com>
Date: Wed, 25 Jan 2023 16:28:22 +0100
Subject: [PATCH] Add vertical option for tile card (#14743)

---
 src/panels/lovelace/cards/hui-tile-card.ts             | 10 ++++++++--
 .../editor/config-elements/hui-tile-card-editor.ts     |  8 ++++++++
 src/translations/en.json                               |  1 +
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-tile-card.ts b/src/panels/lovelace/cards/hui-tile-card.ts
index 75595d7bcd..9611a09a98 100644
--- a/src/panels/lovelace/cards/hui-tile-card.ts
+++ b/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;
diff --git a/src/panels/lovelace/editor/config-elements/hui-tile-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-tile-card-editor.ts
index 65dbeac6d1..d62f0e071e 100644
--- a/src/panels/lovelace/editor/config-elements/hui-tile-card-editor.ts
+++ b/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}`
         );
diff --git a/src/translations/en.json b/src/translations/en.json
index f5631ef552..fc202a9cde 100755
--- a/src/translations/en.json
+++ b/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",