diff --git a/.hass_dev/views/title-view.yaml b/.hass_dev/views/title-view.yaml index 9e75250ff..e78d8982a 100644 --- a/.hass_dev/views/title-view.yaml +++ b/.hass_dev/views/title-view.yaml @@ -1,5 +1,5 @@ title: Title -icon: mdi:card-text +icon: mdi:format-title cards: - type: vertical-stack cards: diff --git a/README.md b/README.md index 9f59279fa..175c562fe 100644 --- a/README.md +++ b/README.md @@ -24,7 +24,7 @@ Mushroom mission is to propose easy to use components to build your [Home Assist - 🌈 Based on Material UI colors - πŸŒ“ Light and dark theme support - 🎨 Optional theme customization -- 🌎 Internationalization +- 🌎 Internationalization The goal of Mushroom is not to provide custom card for deep customization. You can use the excellent [UI Lovelace Minimalist][ui-lovelace-minimalist] and [Button card][button-card] plugins for this. @@ -74,6 +74,7 @@ Different cards are available for differents entities : - πŸ™‹ [Person card](docs/cards/person.md) - πŸ›  [Template card](docs/cards/template.md) - πŸ”” [Chips card](docs/cards/chips.md) +- ✏️ [Title card](docs/cards/title.md) Some cards are on the todo list : @@ -91,8 +92,18 @@ Mushroom: # HA variables ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16) ha-card-border-radius: 12px - # Mushroom custom variables + # Mushroom layout mush-spacing: 12px + # Mushroom title styles + mush-title-padding: 12px + mush-title-spacing: 12px + mush-title-font-size: 24px + mush-title-font-size: normal + mush-title-line-height: 1.2 + mush-subtitle-font-size: 16px + mush-subtitle-font-weight: normal + mush-subtitle-line-height: 1.2 + # Mushroom colors mush-rgb-red: 244, 67, 54 mush-rgb-pink: 233, 30, 99 mush-rgb-purple: 156, 39, 176 @@ -183,4 +194,3 @@ The design is inspired by [7ahang’s work][7ahang] on Behance and [Ui Lovelace [button-card]: https://github.com/custom-cards/button-card [7ahang]: https://www.behance.net/gallery/88433905/Redesign-Smart-Home [release-url]: https://github.com/piitaya/lovelace-mushroom/releases - diff --git a/src/cards/title-card/title-card-editor.ts b/src/cards/title-card/title-card-editor.ts index e0862515b..e39833a0c 100644 --- a/src/cards/title-card/title-card-editor.ts +++ b/src/cards/title-card/title-card-editor.ts @@ -34,7 +34,7 @@ export class TitleCardEditor extends LitElement implements LovelaceCardEditor {
{ return { type: `custom:${TITLE_CARD_NAME}`, + title: "Hello, {{ user }} !", }; } diff --git a/src/translations/en.json b/src/translations/en.json index a59ca7296..1dd4b059d 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -44,6 +44,10 @@ "template": { "primary": "Primary information", "secondary": "Secondary information" + }, + "title": { + "title": "Title", + "subtitle": "Subtitle" } }, "chip": { diff --git a/src/translations/fr.json b/src/translations/fr.json index 522ba9606..2a400db56 100644 --- a/src/translations/fr.json +++ b/src/translations/fr.json @@ -44,6 +44,10 @@ "template": { "primary": "Information principale", "secondary": "Information secondaire" + }, + "title": { + "title": "Titre", + "subtitle": "Sous-titre" } }, "chip": {