Merge pull request #66 from saxel/vertical_buttons_custom_state

Vertical buttons custom state

config/minimalist-templates/button_card_templates.yaml

@@ -237,11 +237,11 @@ card_title:
       - font-weight: bold
       - font-size: '1rem'
       - opacity: '0.4'
-### VERTICAL BUTTONS (fka SCENES) ###        
+### VERTICAL BUTTONS (fka SCENES) ###
 vertical_buttons:
   show_label: true
   label: "[[[ return (entity.attributes.value )]]]"
-  styles: 
+  styles:
     icon:
       - color: 'rgba(var(--color-theme),0.2)'
     label:
@@ -268,43 +268,38 @@ vertical_buttons:
       - box-shadow: var(--box-shadow)
       - padding: 10px 0px 8px 0px
   size: 20px
-vertical_buttons_blue:
+
+vertical_buttons_custom_state:
   template: vertical_buttons
   variables:
-    state: "default"
-  state:
-    - operator: template
-      value: "[[[ return states['input_select.localisation_thomas'].state == variables.state ]]]"
-      styles:
-        icon:
-          - color: 'rgba(var(--color-blue),1)'
-        label:
-          - color: 'rgba(var(--color-blue-text),1)'
-        name:
-          - color: 'rgba(var(--color-blue-text),1)'
-        img_cell:
-          - background-color: 'rgba(var(--color-blue), 0.2)'
-        card:
-          - background-color: 'rgba(var(--color-background-blue), var(--opacity-bg))'
-vertical_buttons_green:
-  variables:
-    state: "default"
-  template: 
-    - vertical_buttons
+    state: 'default'
+    color: 'blue'  # blue, red, green, yellow, purple, pink
+  show_last_changed: false
+  name: '[[[ return variables.state ]]]'
+  styles:
+    name:
+      - text-transform: capitalize
   state:
     - operator: template
-      value: "[[[ return states['input_select.localisation_thomas'].state == variables.state ]]]"
+      value: '[[[ return entity.state == variables.state ]]]'
       styles:
         icon:
-          - color: 'rgba(var(--color-green),1)'
+          - color: '[[[ return `rgba(var(--color-${variables.color}), 1)`; ]]]'
         label:
-          - color: 'rgba(var(--color-green-text),1)'
+          - color: '[[[ return `rgba(var(--color-${variables.color}-text), 1)`; ]]]'
         name:
-          - color: 'rgba(var(--color-green-text),1)'
+          - color: '[[[ return `rgba(var(--color-${variables.color}-text), 1)`; ]]]'
         img_cell:
-          - background-color: 'rgba(var(--color-green), 0.2)'
+          - background-color: '[[[ return `rgba(var(--color-${variables.color}), 0.2)`; ]]]'
         card:
-          - background-color: 'rgba(var(--color-background-green), var(--opacity-bg))'
+          - background-color: '[[[ return `rgba(var(--color-background-${variables.color}), var(--opacity-bg))`; ]]]'
+  tap_action:
+    action: call-service
+    service: input_select.select_option
+    service_data:
+      entity_id: '[[[ return entity.entity_id ]]]'
+      option: '[[[ return variables.state ]]]'
+
 ### CARDS ###
 card_generic:
   template: 
@@ -1756,13 +1751,6 @@ media_buttons:
   variables:
     ulm_card_media_player_with_controls_entity: "[[[ return variables.entity ]]]"
     ulm_card_media_player_with_controls_name: "[[[ return variables.name ]]]"
-### SCENES ###
-scene:
-  template: vertical_buttons
-scene_blue:
-  template: vertical_buttons_blue
-scene_green:
-  template: vertical_buttons_green
 ### ITEMS ###
 list_items:
-  template: list_3_items
+  template: list_3_items

config/themes/minimalist-desktop/minimalist-desktop.yaml

@@ -32,15 +32,19 @@ minimalist-desktop:
       color-background-blue : 250, 250, 250
       color-background-green : 250, 250, 250
       color-background-red : 250, 250, 250
+      color-background-pink : 250, 250, 250
+      color-background-purple : 250, 250, 250
       color-yellow-text: 'var(--primary-text-color)'
       color-blue-text: 'var(--primary-text-color)'
       color-green-text: 'var(--primary-text-color)'
       color-red-text: 'var(--primary-text-color)'
+      color-pink-text: 'var(--primary-text-color)'
+      color-purple-text: 'var(--primary-text-color)'
       opacity-bg: '1'
       #background and sidebar
       card-background-color: '#FAFAFA'
       primary-background-color: '#EFEFEF'
-      secondary-background-color: '#EFEFEF' 
+      secondary-background-color: '#EFEFEF'
       #header
       app-header-text-color: 'var(--primary-text-color)'
       app-header-background-color: 'var(--primary-background-color)'
@@ -82,17 +86,21 @@ minimalist-desktop:
       color-background-blue : 'var(--color-blue)'
       color-background-green : 'var(--color-green)'
       color-background-red : 'var(--color-red)'
+      color-background-pink : 'var(--color-pink)'
+      color-background-purple : 'var(--color-purple)'
       color-yellow-text: 'var(--color-yellow)'
       color-blue-text: 'var(--color-blue)'
       color-green-text: 'var(--color-green)'
       color-red-text: 'var(--color-red)'
+      color-pink-text: 'var(--color-pink)'
+      color-purple-text: 'var(--color-purple)'
       opacity-bg: '0.1'
       #floating button text color
       mdc-theme-on-secondary: 'var(--card-background-color)'
       #background and sidebar
       card-background-color: '#1D1D1D'
       primary-background-color: '#121212'
-      secondary-background-color: '#121212' 
+      secondary-background-color: '#121212'
       #header
       app-header-text-color: 'var(--primary-text-color)'
       app-header-background-color: 'var(--primary-background-color)'
@@ -108,4 +116,4 @@ minimalist-desktop:
       #media player
       mini-media-player-accent-color: 'var(--google-blue)'
       # Journal
-      state-icon-color: 'rgb(var(--color-theme))'
+      state-icon-color: 'rgb(var(--color-theme))'

config/themes/minimalist-mobile/minimalist-mobile.yaml

@@ -37,15 +37,19 @@ minimalist-mobile:
       color-background-blue : 250, 250, 250
       color-background-green : 250, 250, 250
       color-background-red : 250, 250, 250
+      color-background-pink : 250, 250, 250
+      color-background-purple : 250, 250, 250
       color-yellow-text: 'var(--primary-text-color)'
       color-blue-text: 'var(--primary-text-color)'
       color-green-text: 'var(--primary-text-color)'
       color-red-text: 'var(--primary-text-color)'
+      color-pink-text: 'var(--primary-text-color)'
+      color-purple-text: 'var(--primary-text-color)'
       opacity-bg: '1'
       #background and sidebar
       card-background-color: '#FAFAFA'
       primary-background-color: '#EFEFEF'
-      secondary-background-color: '#EFEFEF' 
+      secondary-background-color: '#EFEFEF'
       #header
       app-header-text-color: 'var(--primary-text-color)'
       app-header-background-color: 'var(--primary-background-color)'
@@ -87,17 +91,21 @@ minimalist-mobile:
       color-background-blue : 'var(--color-blue)'
       color-background-green : 'var(--color-green)'
       color-background-red : 'var(--color-red)'
+      color-background-pink : 'var(--color-pink)'
+      color-background-purple : 'var(--color-purple)'
       color-yellow-text: 'var(--color-yellow)'
       color-blue-text: 'var(--color-blue)'
       color-green-text: 'var(--color-green)'
       color-red-text: 'var(--color-red)'
+      color-pink-text: 'var(--color-pink)'
+      color-purple-text: 'var(--color-purple)'
       opacity-bg: '0.1'
       #floating button text color
       mdc-theme-on-secondary: 'var(--card-background-color)'
       #background and sidebar
       card-background-color: '#1D1D1D'
       primary-background-color: '#121212'
-      secondary-background-color: '#121212' 
+      secondary-background-color: '#121212'
       #header
       app-header-text-color: 'var(--primary-text-color)'
       app-header-background-color: 'var(--primary-background-color)'
@@ -113,4 +121,4 @@ minimalist-mobile:
       #media player
       mini-media-player-accent-color: 'var(--google-blue)'
       # Journal
-      state-icon-color: 'rgb(var(--color-theme))'
+      state-icon-color: 'rgb(var(--color-theme))'