Implementation of popup cards

README.md

@@ -87,6 +87,7 @@ Take a look here: [https://ui-lovelace-minimalist.netlify.app/](https://ui-lovel
   * [Title](#title)  
   * [Vertical buttons](#vertical-buttons)  
   * [Cards](#cards)   
+  * [Popups](#popups)  
   * [Language specific buttons](#language-specific-buttons)  
   * [Custom cards](#custom-cards)  
   * [Extend the "theme"](#extend-with-your-own-code)
@@ -142,18 +143,25 @@ In the list above #5 enhances the normal `cards` with a "second line", that is u
 * 2-line cards: These are cards with a second line for informations or controls, eg. your `cover controls`.
 * Custom cards: These are special cards, that you can install, only if needed. These cards are mostly developed and contributed to the repository. Eg. an `aircondition-card` that shows the state of your aircondition and buttons to control it.  
 
+### Popups   
+`Popups` are an optionnal art of this design and are based on browser-mod integration. With these `popups`you can overwrite the default more-info window.
+
+![Popups](./screenshots/popup_outlet.png) ![Popups](./screenshots/popup_light.png)
+
 ### Language specific buttons  
 Sometimes the language specific strings from Home Assistant aren't available for your button, so we added the possibility to use language specific strings over the template system.   
 
-### Custom cards  
-This "theme" is designed with an open structure in mind, that's why it is possible to add `custom-cards` without much hassle. A few `custom-cards` are readily available through the folder `custom-cards` in the repository.  
-`Custom-cards` are `cards`, that don't fit everywhere and therefor are not part of the standard installation, but can be easily added, if needed. Take an air-condition card. Not everybody has an air-condition. So why include this `card` as a default? And that's why we did a structure and system for `custom-cards`. Easily added, but only when needed!  
-And the best thing is: everybody can develop a cool `card` and can (not have to) share it afterwards with the community (hint, hint, the support thread is [here](https://community.home-assistant.io/t/lovelace-ui-minimalist/322687)).  
+### Custom cards and popups 
+This "theme" is designed with an open structure in mind, that's why it is possible to add `custom-cards` and `custom-popups` without much hassle. A few custom components are readily available through the folder `custom-cards` and `custom-popups` in the repository.  
+custom components don't fit everywhere and therefor are not part of the standard installation, but can be easily added, if needed. Take an air-condition card. Not everybody has an air-condition. So why include this `card` as a default? And that's why we did a structure and system for `custom-cards`. Easily added, but only when needed!  
+And the best thing is: everybody can develop a cool `card` or `popup and can (not have to) share it afterwards with the community (hint, hint, the support thread is [here](https://community.home-assistant.io/t/lovelace-ui-minimalist/322687)).  
 
-See a complete list of already included `custom-cards` in our [wiki](https://ui-lovelace-minimalist.netlify.app/usage/template_list). 
+See a complete list of already included `custom-cards` and `custom-popups` in our [wiki](https://ui-lovelace-minimalist.netlify.app/usage/template_list). 
 
 Find informations on how to develop a `custom-card` [here](https://ui-lovelace-minimalist.netlify.app/development/custom_card).  
 
+Find informations on how to develop a `custom-popup` [here](https://ui-lovelace-minimalist.netlify.app/development/custom_popup).  
+
 ### Extend with your own code  
 As we tried to be as modular as possible (and useful), it is easy to enhance or extend the code, we provide with your own definitions. That means for you, you can inherit every template to enhance it only with functions, you really want. No need to copy full blocks of code - just inherit and enhance only where changes are needed.  
 

config/minimalist-templates/EN.yaml

@@ -7,4 +7,7 @@ ulm_language_variables:
     ulm_unavailable: "unavailable"
     ulm_standby: "standby"
     ulm_idle: "idle"
-    ulm_currency: "$"
+    ulm_currency: "$"
+    ulm_popups_back: "Back"
+    ulm_popups_toggle: "Toogle"
+    ulm_popups_statistics: "Statistics"

config/minimalist-templates/button_card_templates.yaml

@@ -41,50 +41,51 @@ chip_temperature:
     ]]]
 chip_icon_only:
   template: chips
-  variables:
-    icon: '❔'
-  show_icon: true
-  icon: "[[[ return variables.ulm_chip_icon_only ? variables.ulm_chip_icon_only : variables.icon ]]]"
-  styles:
-    grid:
-      - grid-template-areas: '"i"'
+  label: |
+    [[[
+      var icon = '❔';
+      if (variables.ulm_chip_icon_only){
+        var icon = variables.ulm_chip_icon_only;
+      } 
+      return icon;
+    ]]]
 chip_icon_state:
   template: chips
-  variables:
-    icon: "❔"
   triggers_update:
     - "[[[ variables.ulm_chip_icon_state_entity ]]]"
-  show_icon: true
-  show_label: true
-  icon: "[[[ return variables.ulm_chip_icon_state_icon ? variables.ulm_chip_icon_state_icon : variables.icon ]]]"
-  label: "[[[ return variables.ulm_chip_icon_state_entity ? states[variables.ulm_chip_icon_state_entity].state : '' ]]]"
-  styles:
-    label:
-      - justify-self: center
-      - padding: 0px 6px
-      - font-weight: bold
-      - font-size: 14px
-    grid:
-      - grid-template-areas: '"i l"'
+  label: |
+    [[[
+      var icon = '❔';
+      if (variables.ulm_chip_icon_state_icon){
+        var icon = variables.ulm_chip_icon_state_icon;
+      } 
+      var state = '';
+      if (states[variables.ulm_chip_icon_state_entity].state){
+        var state = states[variables.ulm_chip_icon_state_entity].state;
+      } 
+      return icon + ' ' + state;
+    ]]]
 chip_icon_double_state:
   template: chips
-  variables:
-    icon: "❔"
   triggers_update:
-    - "[[[ variables.ulm_chip_icon_state_entity_1 ]]]"
-    - "[[[ variables.ulm_chip_icon_state_entity_2 ]]]"
-  show_icon: true
-  show_label: true
-  icon: "[[[ return variables.ulm_chip_icon_double_state_icon ? variables.ulm_chip_icon_double_state_icon : variables.icon ]]]"
-  label: "[[[ return variables.ulm_chip_icon_double_state_entity_1 ? states[variables.ulm_chip_icon_double_state_entity_1].state + ' • ' + states[variables.ulm_chip_icon_double_state_entity_2].state : '' ]]]"
-  styles:
-    label:
-      - justify-self: center
-      - padding: 0px 6px
-      - font-weight: bold
-      - font-size: 14px
-    grid:
-      - grid-template-areas: '"i l"'
+    - "[[[ variables.ulm_chip_icon_double_state_entity_1 ]]]"
+    - "[[[ variables.ulm_chip_icon_double_state_entity_2 ]]]"
+  label: |
+    [[[
+      var icon = '❔';
+      if (variables.ulm_chip_icon_double_state_icon){
+        var icon = variables.ulm_chip_icon_double_state_icon;
+      } 
+      var state1 = '';
+      if (states[variables.ulm_chip_icon_double_state_entity_1].state){
+        var state1 = states[variables.ulm_chip_icon_double_state_entity_1].state;
+      } 
+      var state2 = '';
+      if (states[variables.ulm_chip_icon_double_state_entity_2].state){
+        var state2 = states[variables.ulm_chip_icon_double_state_entity_2].state;
+      } 
+      return icon + ' ' + state1 + ' • ' + state2;
+    ]]]
 chip_back:
   template: chips
   tap_action:
@@ -121,6 +122,16 @@ chip_power_consumption:
         return '⚡ ' +  states[variables.ulm_chip_electric_consumption].state;
       }
     ]]]
+chip_navigate:
+  template: chips
+  tap_action:
+    action: navigate
+    navigation_path: "[[[ return variables.ulm_chip_navigate_path; ]]]"
+  show_icon: true
+  icon: "[[[ return variables.ulm_chip_navigate_icon; ]]]"
+  styles:
+    grid:
+      - grid-template-areas: '"i"'
 ### TITLE ###
 card_title:
   tap_action:
@@ -314,8 +325,6 @@ card_light:
     - ulm_language_variables
   tap_action:
     action: toggle
-  hold_action:
-    action: more-info
   label: >-
     [[[ 
       if (entity.state !='unavailable'){
@@ -334,8 +343,11 @@ card_light:
       }
     ]]]
 card_light_slider:
+  template: 
+    - ulm_language_variables
   variables:
     ulm_card_light_slider_name: "[[[ return entity.attributes.friendly_name ]]]"
+    ulm_popup_template: popup_default
   show_icon: false
   show_name: false
   show_label: false
@@ -361,13 +373,31 @@ card_light_slider:
         type: 'custom:button-card'
         template:
           - icon_info
-          - light
+          - yellow_slider
+          - "[[[ return variables.ulm_popup_template ]]]"
         entity: "[[[ return entity.entity_id ]]]"
+        label: >-
+          [[[  
+            if (entity.state !='unavailable'){
+              if (entity.state =='off'){
+                return variables.ulm_off;  
+              } else if (entity.state == 'on'){
+                if (entity.attributes.brightness != null){
+                  var bri = Math.round(entity.attributes.brightness / 2.55);
+                  return (bri ? bri : '0') + '%';
+                } else {
+                  return variables.ulm_on
+                } 
+              }
+            } else {
+              return variables.ulm_unavailable;
+            }
+          ]]]
         name: "[[[ return variables.ulm_card_light_slider_name ]]]"
         styles:
           card:
             - box-shadow: none
-            - border-radius: var(--border-radius) var(--border-radius) 0px 0px
+            - border-radius: var(--border-radius) var(--border-radius) var(--border-radius) var(--border-radius)
             - padding: 0px
     item2:
       card:
@@ -389,19 +419,22 @@ card_light_slider:
             box-shadow: none;
           }
 card_light_slider_collapse:
+  template: 
+    - ulm_language_variables
   variables:
     ulm_card_light_slider_collapse_name: "[[[ return entity.attributes.friendly_name ]]]"
+    ulm_popup_template: popup_default
   show_icon: false
   show_name: false
   show_label: false
   state:
     - operator: template
       value: "[[[ return entity.state == 'on' ]]]"
       styles:
-        grid:
-          - row-gap: 12px
         card:
           - background-color: 'rgba(var(--color-background-yellow),var(--opacity-bg))'
+        grid:
+          - row-gap: 12px
   styles:
     grid:
       - grid-template-areas: '"item1" "item2"'
@@ -417,13 +450,31 @@ card_light_slider_collapse:
         type: 'custom:button-card'
         template:
           - icon_info
-          - light
+          - yellow_slider
+          - "[[[ return variables.ulm_popup_template ]]]"
         entity: "[[[ return entity.entity_id ]]]"
+        label: >-
+          [[[  
+            if (entity.state !='unavailable'){
+              if (entity.state =='off'){
+                return variables.ulm_off;  
+              } else if (entity.state == 'on'){
+                if (entity.attributes.brightness != null){
+                  var bri = Math.round(entity.attributes.brightness / 2.55);
+                  return (bri ? bri : '0') + '%';
+                } else {
+                  return variables.ulm_on
+                } 
+              }
+            } else {
+              return variables.ulm_unavailable;
+            }
+          ]]]
         name: "[[[ return variables.ulm_card_light_slider_collapse_name ]]]"
         styles:
           card:
             - box-shadow: none
-            - border-radius: var(--border-radius) var(--border-radius) 0px 0px
+            - border-radius: var(--border-radius) var(--border-radius) var(--border-radius) var(--border-radius)
             - padding: 0px
     item2:
       card:
@@ -450,6 +501,8 @@ card_light_slider_collapse:
               box-shadow: none;
             }
 card_light_slider_horizontal:
+  template: 
+    - ulm_language_variables
   variables:
     ulm_card_light_slider_horizontal_name: "[[[ return entity.attributes.friendly_name ]]]"
   show_icon: false
@@ -476,13 +529,30 @@ card_light_slider_horizontal:
         type: 'custom:button-card'
         template:
           - icon_info
-          - light
+          - yellow_slider
         entity: "[[[ return entity.entity_id ]]]"
+        label: >-
+          [[[  
+            if (entity.state !='unavailable'){
+              if (entity.state =='off'){
+                return variables.ulm_off;  
+              } else if (entity.state == 'on'){
+                if (entity.attributes.brightness != null){
+                  var bri = Math.round(entity.attributes.brightness / 2.55);
+                  return (bri ? bri : '0') + '%';
+                } else {
+                  return variables.ulm_on
+                } 
+              }
+            } else {
+              return variables.ulm_unavailable;
+            }
+          ]]]
         name: "[[[ return variables.ulm_card_light_slider_horizontal_name ]]]"
         styles:
           card:
             - box-shadow: none
-            - border-radius: var(--border-radius) var(--border-radius) 0px 0px
+            - border-radius: var(--border-radius) var(--border-radius) var(--border-radius) var(--border-radius)
             - padding: 0px
     item2:
       card:
@@ -1505,6 +1575,20 @@ yellow:
         card:
           - background-color: 'rgba(var(--color-background-yellow),var(--opacity-bg))'
       value: 'on'
+yellow_slider:
+  state:
+    - styles:
+        icon:
+          - color: 'rgba(var(--color-yellow),1)'
+        label:
+          - color: 'rgba(var(--color-yellow-text),1)'
+        name:
+          - color: 'rgba(var(--color-yellow-text),1)'
+        img_cell:
+          - background-color: 'rgba(var(--color-yellow), 0.2)'
+        card:
+          - background-color: 'rgba(0,0,0,0)'
+      value: 'on'
 ### LEGACY TEMPLATES ###
 ###### CHIPS ###
 chips_icon:
@@ -1566,4 +1650,4 @@ scene:
 scene_blue:
   template: vertical_buttons_blue
 scene_green:
-  template: vertical_buttons_green
+  template: vertical_buttons_green