Merge pull request #47 from migo-dev/patch-1

Update light-popup-card.ts
DBuit · Oct 22, 2020 · 3ae614e · 3ae614e
2 parents 08d9377 + 08455dc
commit 3ae614e
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -51,6 +51,8 @@ resources:
 | `sliderColoredByLight` | boolean | optional | false | Let the color of the slider change based on the light color, this overwrites the sliderColor setting |
 | `sliderThumbColor` | string | optional | "#ddd" | The color of the line that you use to slide the slider  |
 | `sliderTrackColor` | string | optional | "#ddd" | The color of the slider track |
+| `switchColor` | string | optional | "#FFF" | The color of the switch  |
+| `switchTrackColor` | string | optional | "#ddd" | The color of the switch track |
 | `settings` | boolean | optional | false | When it will add an settings button that displays the more-info content |
 | `settingsPosition` | string | optional | `bottom`  | set position of the settings button options: `top` or `bottom`. |
 | `displayType` | string | optional | `auto`  | set the type of the card to force display slider of switch options: `slider` or `switch`. |

diff --git a/src/light-popup-card.ts b/src/light-popup-card.ts
@@ -70,6 +70,8 @@ class LightPopupCard extends LitElement {
     var sliderColoredByLight = "sliderColoredByLight" in this.config ? this.config.sliderColoredByLight : false;
     var sliderThumbColor = "sliderThumbColor" in this.config ? this.config.sliderThumbColor : "#ddd";
     var sliderTrackColor = "sliderTrackColor" in this.config ? this.config.sliderTrackColor : "#ddd";
+    var switchColor = "switchColor" in this.config ? this.config.switchColor : "#FFF";
+    var switchTrackColor = "switchTrackColor" in this.config ? this.config.switchTrackColor : "#ddd";
     var actionRowCount = 0;   
     var displayType =  "displayType" in this.config ? this.config.displayType : "auto";
 
@@ -104,7 +106,7 @@ class LightPopupCard extends LitElement {
                 ` : html`
                     <h4>${computeStateDisplay(this.hass.localize, stateObj, this.hass.language)}</h4>
                     <div class="switch-holder" style="--switch-height: ${switchHeight};--switch-width: ${switchWidth};">
-                        <input type="range" style="--switch-width: ${switchWidth};--switch-height: ${switchHeight}; --slider-border-radius: ${borderRadius}" value="0" min="0" max="1" .value="${switchValue}" @change=${() => this._switch(stateObj)}>
+                        <input type="range" style="--switch-width: ${switchWidth};--switch-height: ${switchHeight}; --slider-border-radius: ${borderRadius}; --switch-color: ${switchColor}; --switch-track-color: ${switchTrackColor};" value="0" min="0" max="1" .value="${switchValue}" @change=${() => this._switch(stateObj)}>
                     </div>
                 `}
 
@@ -429,7 +431,7 @@ class LightPopupCard extends LitElement {
             -webkit-appearance: none;
             height: 80px;
             cursor: ew-resize;
-            background: #fff;
+            background: var(--slider-color);
             box-shadow: -350px 0 0 350px var(--slider-color), inset 0 0 0 80px var(--slider-thumb-color);
             border-radius: 0;
             transition: box-shadow 0.2s ease-in-out;
@@ -450,7 +452,7 @@ class LightPopupCard extends LitElement {
             border-bottom:20px solid var(--slider-color);
             height: calc(var(--slider-width)*.4);
             cursor: ew-resize;
-            background: #fff;
+            background: var(--slider-color);
             box-shadow: -350px 0 0 350px var(--slider-color), inset 0 0 0 80px var(--slider-thumb-color);
             border-radius: 0;
             transition: box-shadow 0.2s ease-in-out;
@@ -478,7 +480,7 @@ class LightPopupCard extends LitElement {
             overflow: hidden;
             height: calc(var(--switch-width) - 20px);
             -webkit-appearance: none;
-            background-color: #ddd;
+            background-color: var(--switch-track-color);
             padding: 10px;
             position: absolute;
             top: calc(50% - (var(--switch-width) / 2));
@@ -487,7 +489,7 @@ class LightPopupCard extends LitElement {
         .switch-holder input[type="range"]::-webkit-slider-runnable-track {
             height: calc(var(--switch-width) - 20px);
             -webkit-appearance: none;
-            color: #ddd;
+            color: var(--switch-track-color);
             margin-top: -1px;
             transition: box-shadow 0.2s ease-in-out;
         }
@@ -496,7 +498,7 @@ class LightPopupCard extends LitElement {
             -webkit-appearance: none;
             height: calc(var(--switch-width) - 20px);
             cursor: ew-resize;
-            background: #fff;
+            background: var(--switch-color);
             transition: box-shadow 0.2s ease-in-out;
             border: none;
             box-shadow: -1px 1px 20px 0px rgba(0,0,0,0.75);