Implementation of popup cards

README.md

@@ -192,5 +192,9 @@ As this "theme" evolved, there were some major changes and re-writes in the code
 We provide a list of all legacy templates we support [here](https://ui-lovelace-minimalist.netlify.app/development/legacy_templates).
 
 And if you had installed one of the previous versions, we made a short write-up, on how you can move to the new format and be able to use this theme in the future with all it's features and without worrying about updates. Take a look [here](https://ui-lovelace-minimalist.netlify.app/installation/update#previous-version).
+
+## Popups
+Readme is available [here](README_popups.md).
+
 <br>
 <br>

README_popups.md

@@ -0,0 +1,96 @@
+# UI-Lovelace-Minimalist popups
+The basis for all these popups is `button-card` that allows for a great and individual styling. These popups are "responsive". That means the layout automatically fit the size of the screen.
+
+## Table of Content
+
+<details>
+<summary>Show table of content</summary>
+
+* [Credits](#credits)
+* [Power outlet popup](#power-outlet-popup)
+  * [Card compatibility](#card-compatibility)
+  * [Variables](#variables)
+  * [How to use](#how-to-use)
+* [Light popup](#light-popup)
+</details>
+
+## Credits
+* Designed by schumijo and bavo (special thanks to him for his help on this development)).
+
+## Power outlet popup
+
+<img src="./screenshots/popup_power_phone.png" height="400"> <img src="./screenshots/popup_power_tablet.png" height="400">
+
+### Card compatibility
+
+This popup is displayed using ``hold_action`` and it is compatible with the following cards/chips :
+* card_power_outlet
+
+### Variables
+<table>
+  <tr>
+    <th>Variable</th>
+    <th>Example</th>
+    <th>Required</th>
+    <th>Explanation</th>
+  </tr>
+  <tr>
+    <td>ulm_popup_power_outlet_sensor1</td>
+    <td>sensor.metered_power</td>
+    <td>yes</td>
+    <td>Sensor entity displayed on top left button</td>
+  </tr>
+  <tr>
+    <td>ulm_popup_power_outlet_sensor2</td>
+    <td>sensor.metered_electric_consumed</td>
+    <td>yes</td>
+    <td>Sensor entity displayed on top right button</td>
+  </tr>
+  <tr>
+    <td>ulm_popup_power_outlet_graph_sensor</td>
+    <td>sensor.metered_power</td>
+    <td>yes</td>
+    <td>Sensor entity displayed on graph</td>
+  </tr>
+</table>
+
+### How to use
+
+To enable this popup, you need to add the ``popup_power_outlet`` template on your card. And also the previously explained variables.
+
+For exemple :
+```yaml
+- type: "custom:button-card"
+  template:
+    - card_power_outlet
+    - popup_power_outlet
+  variables:
+    ulm_card_power_outlet_consumption_sensor: sensor.metered_wall_plug_switch_power_3
+    ulm_popup_power_outlet_sensor1: sensor.metered_wall_plug_switch_power_3
+    ulm_popup_power_outlet_sensor2: sensor.metered_wall_plug_switch_electric_consumed_kwh_2
+    ulm_popup_power_outlet_graph_sensor: sensor.metered_wall_plug_switch_power_3
+  entity: switch.metered_wall_plug_switch_2
+  name: Prise téléphone
+```
+
+## Light popup
+
+<img src="./screenshots/popup_light_phone.png" height="400"> <img src="./screenshots/popup_light_tablet.png" height="400">
+
+### Card compatibility
+
+This popup is displayed using ``hold_action`` and it is compatible with the following cards/chips :
+* card_light
+
+### How to use
+
+To enable this popup, you need to add the ``popup_light`` template on your card.
+
+For exemple :
+```yaml
+- type: "custom:button-card"
+  template:
+    - card_light
+    - popup_light
+  entity: light.cuisine
+```

config/minimalist-templates/EN.yaml

@@ -11,3 +11,10 @@ ulm_language_variables:
     ulm_currency: "$"
     ulm_heat: "Heating"
     ulm_cool: "Cooling"
+    ulm_popups_back: "Back"
+    ulm_popups_toggle: "Toggle"
+    ulm_popups_statistics: "Statistics"
+    ulm_popups_history: "History"
+    ulm_popups_brightness: "Brightness"
+    ulm_popups_color_temp: "Color temp"
+    ulm_popups_color: "Color"