Add ability to specify the width, height of the button

Adds Savjee#29. New properties on the button `width`,`height`. By default the fields are set to 85px. Properties are on the actual button part of the card, not the card as a whole. Also, changed cursor to `pointer` when using a mouse. Slight tweaks to README
kenstone · May 29, 2020 · c7d2020 · c7d2020
1 parent ca7b2d8
commit c7d2020
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -20,6 +20,7 @@
 Custom, "neumorphism" card for Home Assistant with support for templating.
 
 # Table of contents
+
 * [Installation instructions](#installation-instructions)
 * [Configuration options](#configuration-options)
 * [Examples](#examples)
@@ -33,15 +34,16 @@ Custom, "neumorphism" card for Home Assistant with support for templating.
 
 1. Open [HACS](https://hacs.xyz/)
 2. Go to Plugins > Search for "Button Text Card"
-4. Install it
-5. Add to your Lovelace config:
+3. Install it
+4. Add to your Lovelace config:
 
 ```yaml
   - url: /hacsfiles/button-text-card/button-text-card.js
     type: module
 ```
 
 # Configuration options
+
 | Name             | Type    | Requirement | Description                                                                 | Default              | Template support? |
 |------------------|---------|-------------|-----------------------------------------------------------------------------|----------------------|-------------------|
 | type             | string  | required    | `custom:button-text-card`                                                   | n/a                  | No                |
@@ -56,7 +58,8 @@ Custom, "neumorphism" card for Home Assistant with support for templating.
 | background_color | string  | optional    | CSS color for the background of the badge                                   | Defined by theme     | Yes               |
 | hide_condition   | string  | optional    | Javascript template that defines if card should be hidden                   | `false`              | Yes               |
 | icon_animation   | string  | optional    | Possible values: 'spin'                                                     |                      | Yes               |
-
+| width            | string  | optional    | Width of the button (not the entire card) in px or %                        | '85px'               | No                |
+| height           | string  | optional    | Height of the button in px or %                                             | '85px'               | No                |
 
 # Examples
 
@@ -144,7 +147,8 @@ title: |
 subtitle: Support for templating!
 ```
 
-# Conditional hiding
+# Conditional Hiding
+
 You can use a Javascript template to dynamically hide a card. This can be useful to create contextual cards (eg: only show when the front door is open, when there are lights on, ...).
 
 To do so, write a Javascript template in the `hide_condition` attribute and return `true` if the card should be hidden.
@@ -177,7 +181,7 @@ Cool feature: when you go into edit mode, all hidden cards will appear with an o
     <img src="https://savjee.github.io/button-text-card/example-7.png">
 </div>
 
-```
+```yaml
 type: 'custom:button-text-card'
 large: true
 entity: binary_sensor.voordeur
@@ -190,9 +194,16 @@ hide_condition: |
 ```
 
 # TODO
+
 * Document tap_action support
 
 # License & contributions
+
 See [LICENSE](/LICENSE)
 
-Feel free to suggest improvements, flag issues, open pull requests, ...
+* Feel free to suggest improvements, flag issues, open pull requests, ...
+* Please open all Pull Requests against the `dev` branch.
+
+## Credits
+
+* [kenstone](https://github.com/kenstone) for general contributions
diff --git a/src/button-text-card.ts b/src/button-text-card.ts
@@ -54,7 +54,9 @@ export class BoilerplateCard extends LitElement {
       name: 'Button Text Card',
       title: '',
       subtitle: '',
+      height: '85px',
       large: false,
+      width: '85px',
       ...config,
     };
 
@@ -142,6 +144,9 @@ export class BoilerplateCard extends LitElement {
       this.style.setProperty('--mdc-icon-size', this._renderedConfig.icon_size + 'px');
     }
 
+    this.style.setProperty('--icon-width', this._renderedConfig.width);
+    this.style.setProperty('--icon-height', this._renderedConfig.height);
+
     this._configureIconColor();
 
     return html`
@@ -283,6 +288,7 @@ export class BoilerplateCard extends LitElement {
         box-shadow: 2px 2px rgba(0, 0, 0, 0);
         padding: 16px;
         outline: none;
+        cursor: pointer;
       }
 
       ha-card.edit-preview {
@@ -310,12 +316,12 @@ export class BoilerplateCard extends LitElement {
       }
 
       .icon-container {
-        width: 85px;
-        height: 85px;
-        display: flex;
         align-items: center;
+        display: flex;
+        height: var(--icon-height);
         justify-content: center;
         text-align: center;
+        width: var(--icon-width);
       }
 
       .text-container {

diff --git a/src/types.ts b/src/types.ts
@@ -13,14 +13,17 @@ export interface BoilerplateCardConfig {
   double_tap_action?: ActionConfig;
 
   // Specific for button-text-card
-  title: string;
+
+  background_color?: string;
+  font_color?: string;
+  height: string;
+  hide_condition: boolean;
   icon: string;
+  icon_animation?: 'spin';
   icon_color: string;
   icon_size: number;
-  subtitle: string;
-  hide_condition: boolean;
-  background_color?: string;
   large: boolean;
-  font_color?: string;
-  icon_animation?: 'spin';
+  title: string;
+  subtitle: string;
+  width: string;
 }