Merge pull request #68 from mattieha/feat/compact-mode

feat: compact mode
mattieha · Jun 30, 2021 · c947565 · c947565
2 parents 9debe5f + 43e1c16
commit c947565
Show file tree

Hide file tree

Showing 10 changed files with 107 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -79,6 +79,7 @@ Slider Button Card supports Lovelace's Visual Editor.
 | name              | string  | **Optional** | Name                                   | `entity.friendly_name`       |
 | show_name        | boolean | **Optional** | Show name  | `true`             |
 | show_state        | boolean | **Optional** | Show state  | `true`             |
+| compact        | boolean | **Optional** | Compact mode, display name and state inline with icon. Useful for full width cards.   | `false`             |
 | icon        | object  | **Optional** |  [Icon options](#icon-options)                      |  |
 | slider        | object  | **Optional** | [Slider options](#slider-options)                      |  |
 | action_button        | object  | **Optional** | [Action button options](#action-button-options)                     |  |

diff --git a/dist/slider-button-card.js b/dist/slider-button-card.js
diff --git a/src/editor.ts b/src/editor.ts
@@ -62,6 +62,10 @@ export class SliderButtonCardEditor extends LitElement implements LovelaceCardEd
     return typeof this._config?.show_state === 'undefined' ? true : this._config?.show_state;
   }
 
+  get _compact(): boolean {
+    return typeof this._config?.compact !== 'boolean' ? false : this._config?.compact;
+  }
+
   get _entity(): string {
     return this._config?.entity || '';
   }
@@ -123,6 +127,13 @@ export class SliderButtonCardEditor extends LitElement implements LovelaceCardEd
                     @change=${this._valueChanged}
                   ></ha-switch>
                 </ha-formfield>
+                <ha-formfield .label=${localize('tabs.general.compact')}>
+                  <ha-switch
+                    .checked=${this._compact}
+                    .configValue=${'compact'}
+                    @change=${this._valueChanged}
+                  ></ha-switch>
+                </ha-formfield>
               </div>
             </div>
           </div>

diff --git a/src/localize/languages/en.json b/src/localize/languages/en.json
@@ -11,7 +11,8 @@
       "entity": "Entity (Required)",
       "name": "Name (Optional)",
       "show_name": "Show name?",
-      "show_state": "Show state?"
+      "show_state": "Show state?",
+      "compact": "Compact?"
     },
     "icon": {
       "title": "Icon",

diff --git a/src/localize/languages/he.json b/src/localize/languages/he.json
@@ -11,7 +11,8 @@
       "entity": "ישיות (נדרש)",
       "name": "שם (אופציונלי)",
       "show_name": "להציג שם?",
-      "show_state": "להציג מצב?"
+      "show_state": "להציג מצב?",
+      "compact": "קוֹמפָּקטִי?"
     },
     "icon": {
       "title": "סמליל",

diff --git a/src/localize/languages/nl.json b/src/localize/languages/nl.json
@@ -11,7 +11,8 @@
       "entity": "Entiteit (Verplicht)",
       "name": "Naam (Optioneel)",
       "show_name": "Toon naam?",
-      "show_state": "Toon status?"
+      "show_state": "Toon status?",
+      "compact": "Compact?"
     },
     "icon": {
       "title": "Icoon",

diff --git a/src/localize/languages/pl.json b/src/localize/languages/pl.json
@@ -11,7 +11,8 @@
       "entity": "Encja (Wymagana)",
       "name": "Nazwa (Opcjonalna)",
       "show_name": "Pokazać nazwę?",
-      "show_state": "Pokazać stan?"
+      "show_state": "Pokazać stan?",
+      "compact": "Kompaktowy?"
     },
     "icon": {
       "title": "Ikona",

diff --git a/src/localize/languages/ru.json b/src/localize/languages/ru.json
@@ -11,7 +11,8 @@
       "entity": "Объект (обязательно)",
       "name": "Имя (Опционально)",
       "show_name": "Отображать имя?",
-      "show_state": "Отображать статус?"
+      "show_state": "Отображать статус?",
+      "compact": "Компактный?"
     },
     "icon": {
       "title": "Иконка",

diff --git a/src/slider-button-card.ts b/src/slider-button-card.ts
@@ -62,6 +62,7 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {
       show_name: true,
       // eslint-disable-next-line @typescript-eslint/camelcase
       show_state: true,
+      compact: false,
       icon: copy(IconConfigDefault),
       // eslint-disable-next-line @typescript-eslint/camelcase
       action_button: copy(ActionButtonConfigDefault),
@@ -87,6 +88,7 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {
       show_name: true,
       // eslint-disable-next-line @typescript-eslint/camelcase
       show_state: true,
+      compact: false,
       // eslint-disable-next-line @typescript-eslint/camelcase
       action_button: copy(ActionButtonConfigDefault),
       debug: false,
@@ -141,7 +143,7 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {
       <ha-card
         tabindex="0"
         .label=${`SliderButton: ${this.config.entity || 'No Entity Defined'}`}
-        class="${classMap({ 'square': this.config.slider?.force_square || false })}"
+        class="${classMap({ 'square': this.config.slider?.force_square || false, 'hide-name': !this.config.show_name, 'hide-state': !this.config.show_state, 'hide-action': !this.config.action_button?.show , 'compact': this.config.compact === true })}"
       >
         <div class="button ${classMap({ off: this.ctrl.isOff, unavailable: this.ctrl.isUnavailable })}"
              style=${styleMap({
@@ -429,6 +431,9 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {
     ha-card.square {
       aspect-ratio: 1 / 1;
     }
+    ha-card.compact {
+      min-height: 3rem !important;
+    }    
     :host {
       --slider-bg-default-color: var(--primary-color, rgb(95, 124, 171));
       --slider-bg: var(--slider-color);
@@ -467,6 +472,9 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {
       transition: all 0.2s ease-in-out;
       touch-action: none;
     }
+    ha-card.compact .button {
+      min-height: 3rem !important;
+    }
     .button.off {
       background-color: var(--btn-bg-color-off);
     }
@@ -499,7 +507,9 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {
     .unavailable .icon ha-icon {
       color: var(--disabled-text-color);
     }
-
+    .compact .icon {
+      float: left;
+    }
 
     /* --- TEXT --- */
     
@@ -515,6 +525,20 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {
       max-width: calc(100% - 2em);
       /*text-shadow: rgb(255 255 255 / 10%) -1px -1px 1px, rgb(0 0 0 / 50%) 1px 1px 1px;*/
     }
+    .compact .text {
+      position: relative;
+      top: 0.5rem;
+      left: 0.5rem;
+      display: inline-block;
+      padding: 0;
+      height: 1.3rem;
+      width: 100%;
+      overflow: hidden;
+      max-width: calc(100% - 4em);
+    }
+    .compact.hide-action .text {         
+      max-width: calc(100% - 2em);      
+    }    
 
     /* --- LABEL --- */
     
@@ -532,6 +556,10 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {
     .unavailable .name {
       color: var(--disabled-text-color);
     }
+    .compact .name {
+      display: inline-block;   
+      max-width: calc(100% - 3.5em);
+    }    
     
     /* --- STATE --- */
     
@@ -551,6 +579,11 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {
     .unavailable .state {
       color: var(--disabled-text-color);
     }
+    .compact .state {
+      display: inline-block;
+      max-width: calc(100% - 0em);
+      overflow: hidden;
+    }
     
     
     /* --- SLIDER --- */    

diff --git a/src/types.ts b/src/types.ts
@@ -19,6 +19,7 @@ export interface SliderButtonCardConfig extends LovelaceCardConfig {
   slider?: SliderConfig;
   theme?: string;
   debug?: boolean;
+  compact?: boolean;
 }
 
 export interface ActionButtonConfig {