feat(layout): add default, horizontal and vertical layout for all car…

…ds (#132) * feat(layout): add layout options * feat(layout): add layout options on light card * feat(layout): add layout options on template card * feat(layout): add layout options on person card * feat(layout): add layout options on fan card * feat(layout): add layout options on entity card * feat(layout): add layout options on cover card * feat(layout): improve layout options on cover card * feat(layout): improve layout options on alarm control panel card * fix(alarm): fix horizontal layout with alarm panel * update documentation * chore: add default layout * fix: fix pr comment * fix: fix pr comment * chore: move padding on ha-card
piitaya · Feb 17, 2022 · 32f87d6 · 32f87d6
1 parent 616e495
commit 32f87d6
Show file tree

Hide file tree

Showing 46 changed files with 795 additions and 527 deletions.
diff --git a/.hass_dev/views/alarm-control-panel-view.yaml b/.hass_dev/views/alarm-control-panel-view.yaml
@@ -34,15 +34,31 @@ cards:
  - armed_home
  - armed_away
  name: Text code (azerty)
- - type: grid
- title: Vertical
+ - type: vertical-stack
+ title: Layout
  cards:
+ - type: grid
+ columns: 2
+ square: false
+ cards:
+ - type: custom:mushroom-alarm-control-panel-card
+ entity: alarm_control_panel.alarm_panel_1
+ states:
+ - armed_home
+ - armed_away
+ - type: grid
+ columns: 2
+ square: false
+ cards:
+ - type: custom:mushroom-alarm-control-panel-card
+ entity: alarm_control_panel.alarm_panel_1
+ states:
+ - armed_home
+ - armed_away
+ layout: "vertical"
  - type: custom:mushroom-alarm-control-panel-card
  entity: alarm_control_panel.alarm_panel_1
- vertical: true
- - type: custom:mushroom-alarm-control-panel-card
- entity: alarm_control_panel.alarm_panel_1
- vertical: true
- hide_state: true
- columns: 2
- square: false
+ states:
+ - armed_home
+ - armed_away
+ layout: "horizontal"
diff --git a/.hass_dev/views/cover-view.yaml b/.hass_dev/views/cover-view.yaml
@@ -30,15 +30,25 @@ cards:
  name: Multiple controls
  show_buttons_control: true
  show_position_control: true
- - type: grid
- title: Vertical
+ - type: vertical-stack
+ title: Layout
  cards:
+ - type: grid
+ columns: 2
+ square: false
+ cards:
+ - type: custom:mushroom-cover-card
+ entity: cover.living_room_window
+ show_buttons_control: true
+ - type: grid
+ columns: 2
+ square: false
+ cards:
+ - type: custom:mushroom-cover-card
+ entity: cover.living_room_window
+ show_buttons_control: true
+ layout: "vertical"
  - type: custom:mushroom-cover-card
  entity: cover.living_room_window
- vertical: true
- - type: custom:mushroom-cover-card
- entity: cover.living_room_window
- vertical: true
- hide_state: true
- columns: 2
- square: false
+ show_buttons_control: true
+ layout: "horizontal"
diff --git a/.hass_dev/views/entity-view.yaml b/.hass_dev/views/entity-view.yaml
@@ -57,21 +57,25 @@ cards:
  icon_color: green
  columns: 2
  square: false
- - type: grid
- title: Vertical
+ - type: vertical-stack
+ title: Layout
  cards:
+ - type: grid
+ columns: 2
+ square: false
+ cards:
+ - type: custom:mushroom-entity-card
+ entity: sensor.power_consumption
+ - type: grid
+ columns: 2
+ square: false
+ cards:
+ - type: custom:mushroom-entity-card
+ entity: sensor.power_consumption
+ layout: "vertical"
  - type: custom:mushroom-entity-card
  entity: sensor.power_consumption
- vertical: true
- - type: custom:mushroom-entity-card
- entity: sensor.power_consumption
- vertical: true
- secondary_info: none
- - type: custom:mushroom-entity-card
- entity: sensor.power_consumption
- vertical: true
- hide_icon: true
- secondary_info: none
+ layout: "horizontal"
  columns: 3
  square: false
  - type: grid

diff --git a/.hass_dev/views/fan-view.yaml b/.hass_dev/views/fan-view.yaml
@@ -30,15 +30,28 @@ cards:
  show_oscillate_control: true
  columns: 2
  square: false
- - type: grid
- title: Vertical
+ - type: vertical-stack
+ title: Layout
  cards:
+ - type: grid
+ columns: 2
+ square: false
+ cards:
+ - type: custom:mushroom-fan-card
+ entity: fan.living_room_fan
+ show_percentage_control: true
+ show_oscillate_control: true
+ - type: grid
+ columns: 2
+ square: false
+ cards:
+ - type: custom:mushroom-fan-card
+ entity: fan.living_room_fan
+ show_percentage_control: true
+ show_oscillate_control: true
+ layout: "vertical"
  - type: custom:mushroom-fan-card
  entity: fan.living_room_fan
- vertical: true
- - type: custom:mushroom-fan-card
- entity: fan.living_room_fan
- vertical: true
- hide_state: true
- columns: 2
- square: false
+ show_percentage_control: true
+ show_oscillate_control: true
+ layout: "horizontal"
diff --git a/.hass_dev/views/light-view.yaml b/.hass_dev/views/light-view.yaml
@@ -32,15 +32,25 @@ cards:
  show_color_temp_control: true
  show_color_control: true
  use_light_color: true
- - type: grid
- title: Vertical
+ - type: vertical-stack
+ title: Layout
  cards:
+ - type: grid
+ columns: 2
+ square: false
+ cards:
+ - type: custom:mushroom-light-card
+ entity: light.bed_light
+ show_brightness_control: true
+ - type: grid
+ columns: 2
+ square: false
+ cards:
+ - type: custom:mushroom-light-card
+ entity: light.bed_light
+ show_brightness_control: true
+ layout: "vertical"
  - type: custom:mushroom-light-card
  entity: light.bed_light
- vertical: true
- - type: custom:mushroom-light-card
- entity: light.bed_light
- vertical: true
- hide_state: true
- columns: 2
- square: false
+ show_brightness_control: true
+ layout: "horizontal"
diff --git a/.hass_dev/views/person-view.yaml b/.hass_dev/views/person-view.yaml
@@ -16,24 +16,25 @@ cards:
  use_entity_picture: true
  columns: 2
  square: false
- - type: grid
- title: Vertical
+ - type: vertical-stack
+ title: Layout
  cards:
+ - type: grid
+ columns: 2
+ square: false
+ cards:
+ - type: custom:mushroom-person-card
+ entity: person.anne_therese
+ - type: grid
+ columns: 2
+ square: false
+ cards:
+ - type: custom:mushroom-person-card
+ entity: person.anne_therese
+ layout: "vertical"
  - type: custom:mushroom-person-card
  entity: person.anne_therese
- vertical: true
- - type: custom:mushroom-person-card
- entity: person.anne_therese
- vertical: true
- hide_state: true
- - type: custom:mushroom-person-card
- entity: person.anne_therese
- vertical: true
- hide_state: true
- use_entity_picture: true
- hide_name: true
- columns: 3
- square: false
+ layout: "horizontal"
  - type: grid
  title: Demo controls
  cards:

diff --git a/.hass_dev/views/template-view.yaml b/.hass_dev/views/template-view.yaml
@@ -37,24 +37,30 @@ cards:
  {{ "green" if states | count > 50 else "red" }} 
  columns: 2
  square: false
- - type: grid
- title: Vertical
+ - type: vertical-stack
+ title: Layout
  cards:
+ - type: grid
+ columns: 2
+ square: false
+ cards:
+ - type: custom:mushroom-template-card
+ primary: Hello, {{user}}
+ secondary: How are you?
+ icon: mdi:home
+ - type: grid
+ columns: 2
+ square: false
+ cards:
+ - type: custom:mushroom-template-card
+ primary: Hello, {{user}}
+ secondary: How are you?
+ hide_icon: true
+ icon: mdi:home
+ layout: "vertical"
  - type: custom:mushroom-template-card
  primary: Hello, {{user}}
  secondary: How are you?
+ hide_icon: true
  icon: mdi:home
- vertical: true
- - type: custom:mushroom-template-card
- primary: Number of entities
- secondary: |
- {{ states | count }} entities
- icon: mdi:format-list-bulleted
- vertical: true
- - type: custom:mushroom-template-card
- primary: Hide icon
- secondary: |
- {{ states | count }} entities
- vertical: true
- columns: 3
- square: false
+ layout: "horizontal"
diff --git a/docs/cards/alarm.md b/docs/cards/alarm.md
@@ -11,14 +11,14 @@ A alarm control panel card allow you to control a alarm panel entity.
 
 All the options are available in the lovelace editor but you can use `yaml` if you want.
 
-| Name | Type | Default | Description |
-| :------------------ | :------ | :----------------------------- | :--------------------------------------------- |
-| `entity` | string | Required | Alarm control panel entity |
-| `icon` | string | Optional | Custom icon |
-| `name` | string | Optional | Custom name |
-| `vertical` | boolean | `false`  | Vertical layout  |
-| `hide_state` | boolean | `false` | Hide the entity state |
-| `states` | list | `["armed_home", "armed_away"]` | List of arm states to display |
-| `tap_action` | action | `more-info` | Home assistant action to perform on tap |
-| `hold_action` | action | `more-info` | Home assistant action to perform on hold |
-| `double_tap_action` | action | `more-info` | Home assistant action to perform on double_tap |
+| Name | Type | Default | Description  |
+| :------------------ | :------ | :----------------------------- | :------------------------------------------------------------------------ |
+| `entity` | string | Required | Alarm control panel entity  |
+| `icon` | string | Optional | Custom icon  |
+| `name` | string | Optional | Custom name  |
+| `layout`   | string | Optional  | Layout of the card. Vertical, horizontal and default layout are supported |
+| `hide_state` | boolean | `false` | Hide the entity state  |
+| `states` | list | `["armed_home", "armed_away"]` | List of arm states to display  |
+| `tap_action` | action | `more-info` | Home assistant action to perform on tap  |
+| `hold_action` | action | `more-info` | Home assistant action to perform on hold  |
+| `double_tap_action` | action | `more-info` | Home assistant action to perform on double_tap  |
diff --git a/docs/cards/cover.md b/docs/cards/cover.md
@@ -11,15 +11,15 @@ A cover card allow you to control a cover entity.
 
 All the options are available in the lovelace editor but you can use `yaml` if you want.
 
-| Name | Type | Default | Description |
-| :---------------------- | :------ | :---------- | :--------------------------------------------- |
-| `entity` | string | Required | Cover entity |
-| `icon` | string | Optional | Custom icon |
-| `name` | string | Optional | Custom name |
-| `vertical` | boolean | `false` | Vertical layout   |
-| `hide_state` | boolean | `false` | Hide the entity state |
-| `show_buttons_control` | boolean | `false` | Show buttons to open, close and stop cover |
-| `show_position_control` | boolean | `false` | Show a slider to control position of the cover |
-| `tap_action` | action | `toggle` | Home assistant action to perform on tap |
-| `hold_action` | action | `more-info` | Home assistant action to perform on hold |
-| `double_tap_action` | action | `more-info` | Home assistant action to perform on double_tap |
+| Name | Type | Default | Description  |
+| :---------------------- | :------ | :---------- | :------------------------------------------------------------------------ |
+| `entity` | string | Required | Cover entity  |
+| `icon` | string | Optional | Custom icon  |
+| `name` | string | Optional | Custom name  |
+| `layout`   | string | Optional  | Layout of the card. Vertical, horizontal and default layout are supported |
+| `hide_state` | boolean | `false` | Hide the entity state  |
+| `show_buttons_control` | boolean | `false` | Show buttons to open, close and stop cover  |
+| `show_position_control` | boolean | `false` | Show a slider to control position of the cover  |
+| `tap_action` | action | `toggle` | Home assistant action to perform on tap  |
+| `hold_action` | action | `more-info` | Home assistant action to perform on hold  |
+| `double_tap_action` | action | `more-info` | Home assistant action to perform on double_tap  |
diff --git a/docs/cards/entity.md b/docs/cards/entity.md
@@ -11,16 +11,16 @@ A entity card allow you to display an entity.
 
 All the options are available in the lovelace editor but you can use `yaml` if you want.
 
-| Name | Type | Default | Description |
-| :------------------ | :-------------------------------------------------- | :---------- | :--------------------------------------------------- |
-| `entity` | string | Required | Entity |
-| `icon` | string | Optional | Custom icon |
-| `icon_color` | string | `blue` | Custom color for icon when entity is state is active |
-| `hide_icon` | boolean | `false` | Hide the entity icon |
-| `name` | string | Optional | Custom name |
-| `vertical` | boolean  | `false` | Vertical layout   |
-| `primary_info` | `name` `state` `last-changed` `last-updated` `none` | `name` | Info to show as primary info |
-| `secondary_info` | `name` `state` `last-changed` `last-updated` `none` | `state` | Info to show as secondary info |
-| `tap_action` | action | `more-info` | Home assistant action to perform on tap |
-| `hold_action` | action | `more-info` | Home assistant action to perform on hold |
-| `double_tap_action` | action | `more-info` | Home assistant action to perform on double_tap |
+| Name | Type | Default | Description  |
+| :------------------ | :-------------------------------------------------- | :---------- | :------------------------------------------------------------------------ |
+| `entity` | string | Required | Entity  |
+| `icon` | string | Optional | Custom icon  |
+| `icon_color` | string | `blue` | Custom color for icon when entity is state is active  |
+| `hide_icon` | boolean | `false` | Hide the entity icon  |
+| `name` | string | Optional | Custom name  |
+| `layout`  | string  | Optional  | Layout of the card. Vertical, horizontal and default layout are supported |
+| `primary_info` | `name` `state` `last-changed` `last-updated` `none` | `name` | Info to show as primary info  |
+| `secondary_info` | `name` `state` `last-changed` `last-updated` `none` | `state` | Info to show as secondary info  |
+| `tap_action` | action | `more-info` | Home assistant action to perform on tap  |
+| `hold_action` | action | `more-info` | Home assistant action to perform on hold  |
+| `double_tap_action` | action | `more-info` | Home assistant action to perform on double_tap  |