Option to customize icon and show when unlocked

New options locked_icon unlocked_icon
iantrich · Jun 26, 2020 · d89d771 · d89d771
1 parent 706a0b9
commit d89d771
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 16 deletions.
diff --git a/.devcontainer/configuration.yaml b/.devcontainer/configuration.yaml
@@ -61,4 +61,65 @@ frontend:
       table-row-background-color: '#000000'
       text-primary-color: 'var(--primary-text-color)'
       # restriction-lock-icon-size: '48px'
-      restriction-lock-icon-opacity: 1.0
+      restriction-lock-opacity: 1.0
+    day:
+      ### Main Interface Colors ###
+      primary-color: '#93abca'
+      light-primary-color: '#5F81B0'
+      primary-background-color: '#F0F5FF'
+      secondary-background-color: var(--primary-background-color)
+      secondary-background-color-alpha: 'rgba(220, 225, 235, 0.6)'
+      divider-color: '#D6DFEB'
+      ### Text ###
+      primary-text-color: '#395274'
+      secondary-text-color: '#5294E2'
+      text-primary-color: '#FFFFFF'
+      disabled-text-color: '#88A1C4'
+      ### Sidebar Menu ###
+      sidebar-icon-color: '#395274'
+      sidebar-text-color: var(--sidebar-icon-color)
+      sidebar-selected-background-color: var(--primary-background-color)
+      sidebar-selected-icon-color: '#FF6262'
+      sidebar-selected-text-color: var(--sidebar-selected-icon-color)
+      ### States and Badges ###
+      state-icon-color: '#395274'
+      state-icon-active-color: '#ebb307'
+      state-icon-unavailable-color: var(--disabled-text-color)
+      ### Sliders ###
+      paper-slider-knob-color: '#FF6262'
+      paper-slider-knob-start-color: var(--paper-slider-knob-color)
+      paper-slider-pin-color: var(--paper-slider-knob-color)
+      paper-slider-active-color: var(--paper-slider-knob-color)
+      paper-slider-secondary-color: var(--light-primary-color)
+      ### Labels ###
+      label-badge-background-color: '#FFFFFF'
+      label-badge-text-color: '#395274'
+      label-badge-red: '#FF8888'
+      ### Cards ###
+      paper-card-background-color: 'rgba(255, 255, 255, 0.4)'
+      paper-listbox-background-color: '#F0F1F3'
+      card-background-color: 'var(--primary-background-color)'
+
+      ha-card-border-radius: 10px
+      border-color: 'var(--primary-text-color)'
+      background-image: 'center / cover no-repeat url("/local/background/day.jpg") fixed'
+
+      ### Toggles ###
+      paper-toggle-button-checked-button-color: '#FF6262'
+      paper-toggle-button-checked-bar-color: '#FF6262'
+      paper-toggle-button-unchecked-button-color: '#395274'
+      paper-toggle-button-unchecked-bar-color: '#9CB2CE'
+      switch-checked-color: 'var(--paper-toggle-button-checked-button-color)'
+      switch-unchecked-button-color: 'var(--paper-toggle-button-unchecked-button-color)'
+      switch-unchecked-color: 'var(--paper-toggle-button-unchecked-bar-color)'
+      switch-unchecked-track-color: 'var(--paper-toggle-button-unchecked-bar-color)'
+      ### Table row ###
+      table-row-background-color: var(--primary-background-color)
+      table-row-alternative-background-color: var(--secondary-background-color)
+
+      restriction-regular-lock-color: '#e45e65'
+      restriction-lock-row-margin-left: 78%
+      restriction-lock-margin-left: 40%
+      restriction-lock-opacity: 0.9
+
+      sc-background-filter: none
diff --git a/.devcontainer/ui-lovelace.yaml b/.devcontainer/ui-lovelace.yaml
@@ -4,6 +4,8 @@ resources:
 views:
   - cards:
       - type: custom:restriction-card
+        unlocked_icon: mdi:lock-open-outline
+        locked_icon: mdi:update
         card:
           type: light
           entity: light.kitchen_lights

diff --git a/README.md b/README.md
@@ -38,16 +38,18 @@ resources:
 
 ## Options
 
-| Name         | Type    | Requirement  | Description                                                                                     |
-| ------------ | ------- | ------------ | ----------------------------------------------------------------------------------------------- |
-| type         | string  | **Required** | `custom:restriction-card`                                                                       |
-| card         | map     | **Required** | Card to render within `restriction-card`.                                                       |
-| restrictions | map     | **Optional** | Additional restrictions. See [Restrictions Options](#restrictions-options).                     |
-| exemptions   | list    | **Optional** | List of exemption objects. See [Exemption Options](#exemption-options).                         |
-| condition    | map     | **Optional** | Conditional object to make lock active. See [Condition Options](#condition-options).            |
-| row          | boolean | **Optional** | Set to true to give a default `margin:left: 24px`                                               |
-| duration     | number  | **Optional** | Duration of unlock in seconds. Default is `5`                                                   |
-| action       | string  | **Optional** | Action type to trigger the unlock. Options are `tap`, `double_tap`, or `hold`. Default is `tap` |
+| Name          | Type    | Requirement  | Description                                                                                     |
+| ------------- | ------- | ------------ | ----------------------------------------------------------------------------------------------- |
+| type          | string  | **Required** | `custom:restriction-card`                                                                       |
+| card          | map     | **Required** | Card to render within `restriction-card`.                                                       |
+| restrictions  | map     | **Optional** | Additional restrictions. See [Restrictions Options](#restrictions-options).                     |
+| exemptions    | list    | **Optional** | List of exemption objects. See [Exemption Options](#exemption-options).                         |
+| condition     | map     | **Optional** | Conditional object to make lock active. See [Condition Options](#condition-options).            |
+| row           | boolean | **Optional** | Set to true to give a default `margin:left: 24px`                                               |
+| duration      | number  | **Optional** | Duration of unlock in seconds. Default is `5`                                                   |
+| action        | string  | **Optional** | Action type to trigger the unlock. Options are `tap`, `double_tap`, or `hold`. Default is `tap` |
+| locked_icon   | string  | **Optional** | Icon to show when locked. Default is `mdi:lock-outline`                                         |
+| unlocked_icon | string  | **Optional** | Icon to show when unlocked instead of fading the icon away                                      |
 
 ## Restrictions Options
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "restriction-card",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "Lovelace restriction-card",
   "keywords": [
     "home-assistant",

diff --git a/src/const.ts b/src/const.ts
@@ -1 +1 @@
-export const CARD_VERSION = '1.2.3';
+export const CARD_VERSION = '1.2.4';
diff --git a/src/restriction-card.ts b/src/restriction-card.ts
@@ -19,6 +19,7 @@ class RestrictionCard extends LitElement implements LovelaceCard {
   @property() protected _config?: RestrictionCardConfig;
   @property() protected _hass?: HomeAssistant;
   @property() private _helpers?: any;
+  @property() private _unlocked = false;
   private _initialized = false;
   private _delay = false;
   private _maxed = false;
@@ -55,7 +56,12 @@ class RestrictionCard extends LitElement implements LovelaceCard {
       throw new Error('A pin code is required for pin restrictions');
     }
 
-    this._config = { duration: 5, action: 'tap', ...config };
+    this._config = {
+      duration: 5,
+      action: 'tap',
+      locked_icon: 'mdi:lock-outline',
+      ...config,
+    };
 
     this.loadCardHelpers();
   }
@@ -107,7 +113,7 @@ class RestrictionCard extends LitElement implements LovelaceCard {
                 })}"
               >
                 <ha-icon
-                  icon="mdi:lock-outline"
+                  icon="${this._unlocked ? this._config.unlocked_icon! : this._config.locked_icon!}"
                   id="lock"
                   class="${classMap({
                     row: Boolean(this._config.row),
@@ -241,9 +247,16 @@ class RestrictionCard extends LitElement implements LovelaceCard {
 
     const overlay = this.shadowRoot.getElementById('overlay') as LitElement;
     overlay.style.setProperty('pointer-events', 'none');
-    lock.classList.add('hidden');
+    if (this._config.unlocked_icon) {
+      this._unlocked = true;
+    } else {
+      lock.classList.add('hidden');
+    }
     window.setTimeout(() => {
       overlay.style.setProperty('pointer-events', '');
+      if (this._config?.unlocked_icon) {
+        this._unlocked = false;
+      }
       if (lock) {
         lock.classList.remove('hidden');
       }

diff --git a/src/types.ts b/src/types.ts
@@ -8,6 +8,8 @@ export interface RestrictionCardConfig extends LovelaceCardConfig {
   row?: boolean;
   delay?: number;
   action?: string;
+  locked_icon?: string;
+  unlocked_icon?: string;
 }
 
 export interface RestrictionsConfig {
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export const CARD_VERSION = '1.2.3';
		export const CARD_VERSION = '1.2.4';