Fixed the last issues, click for more details

- [ ] V2 DOCUMENTATION - [x] Fixed the default icon template not working after beta.7 - [x] Fixed a pop-up issue with the position of dropdowns (like with the xiaomi-vacuum-map-card, probably Mushroom too) - [x] Pop-up header layouts - [x] You don’t need to refresh a section view anymore when leaving the editor on a view with pop-ups - [x] DOM changing for sub-button icons (memory leak) - [x] Sub-button CSS issue on the separator when there is no sub-buttons - [x] Fixed the cover card icons color when the large layout is added - [x] Fixed the separator 2 rows layout - [x] Fixed the « last changed » showed by default
Clooos · May 12, 2024 · aa7684a · aa7684a
1 parent d83716f
commit aa7684a
Show file tree

Hide file tree

Showing 12 changed files with 121 additions and 61 deletions.
diff --git a/dist/bubble-card.js b/dist/bubble-card.js
diff --git a/src/cards/button/changes.ts b/src/cards/button/changes.ts
@@ -125,7 +125,7 @@ export function changeStyle(context) {
 
     const customStyle = context.config.styles
         ? Function('hass', 'entityId', 'state', 'icon', 'subButtonIcon', 'getWeatherIcon', `return \`${context.config.styles}\`;`)
-          (context._hass, context.config.entity, state, context.elements.icon.icon, context.subButtonIcon, getWeatherIcon)
+          (context._hass, context.config.entity, state, context.elements.icon, context.subButtonIcon, getWeatherIcon)
         : '';
 
     context.elements.customStyle.innerText = customStyle;

diff --git a/src/cards/cover/styles.ts b/src/cards/cover/styles.ts
@@ -94,6 +94,11 @@ export default `
       border-radius: 32px;
     }
 
+    .large .bubble-buttons .bubble-icon {
+      color: var(--primary-text-color) !important;
+      opacity: 1;
+    }
+
     .large .bubble-header-container {
         height: 64px;
     }

diff --git a/src/cards/horizontal-buttons-stack/create.ts b/src/cards/horizontal-buttons-stack/create.ts
@@ -88,7 +88,7 @@ export function createStructure(context) {
     if (!context.config.hide_gradient) {
       context.card.classList.add('has-gradient');
     }
-    context.card.style.setProperty('--desktop-width', context.config.width_desktop ?? '500px');
+    context.card.style.setProperty('--desktop-width', context.config.width_desktop || '500px');
     context.elements.cardContainer.appendChild(context.elements.style);
     context.elements.cardContainer.appendChild(context.elements.customStyle);
     context.content.appendChild(context.elements.cardContainer);

diff --git a/src/cards/media-player/changes.ts b/src/cards/media-player/changes.ts
@@ -148,7 +148,7 @@ export function changeStyle(context) {
 
     const customStyle = context.config.styles
         ? Function('hass', 'entityId', 'state', 'icon', 'subButtonIcon', 'getWeatherIcon', `return \`${context.config.styles}\`;`)
-          (context._hass, context.config.entity, state, context.elements.icon.icon, context.subButtonIcon, getWeatherIcon)
+          (context._hass, context.config.entity, state, context.elements.icon, context.subButtonIcon, getWeatherIcon)
         : '';
 
     context.elements.customStyle.innerText = customStyle;

diff --git a/src/cards/pop-up/changes.ts b/src/cards/pop-up/changes.ts
@@ -5,35 +5,60 @@ import { addHash, onEditorChange, removeHash } from "./helpers.ts";
 import { initializesubButtonIcon } from '../../tools/global-changes.ts';
 
 export function changeEditor(context) {
-  const detectedEditor = context.verticalStack.host.closest('hui-card-preview');
+    const detectedEditor = context.verticalStack.host.closest('hui-card-preview');
 
-if (context.sectionRow.classList.contains('card')) {
-    // Fix the empty space caused by the pop-ups in the section view
-    if (!context.editor && context.sectionRow.style.position !== 'absolute') {
-        context.sectionRow.style.position = 'absolute';
-    } else if (context.editor && context.sectionRow.style.position !== '') {
-        context.sectionRow.style.position = '';
+    if (context.sectionRow.classList.contains('card')) {
+        // Fix the empty space caused by the pop-ups in the section view
+        if (!context.editor && context.sectionRow.style.position !== 'absolute') {
+            context.sectionRow.style.position = 'absolute';
+        } else if (context.editor && context.sectionRow.style.position !== '') {
+            context.sectionRow.style.position = '';
+        }
+
+        if (detectedEditor === null && !context.editor && context.sectionRow?.style.position !== 'absolute') {
+            context.sectionRow.style.position = 'absolute';
+        }
     }
-}
 
-  if (context.editor || detectedEditor !== null) {
-    context.popUp.classList.add('editor');
+    if (context.editor || detectedEditor !== null) {
+        context.popUp.classList.add('editor');
 
-    if (detectedEditor !== null) {
-        context.elements.popUpContainer.classList.remove('hidden');
+        if (detectedEditor !== null) {
+            context.elements.popUpContainer.classList.remove('hidden');
+        } else {
+            context.elements.popUpContainer.classList.add('hidden');
+        }
     } else {
-        context.elements.popUpContainer.classList.add('hidden');
+        context.popUp.classList.remove('editor');
+        context.elements.popUpContainer.classList.remove('hidden');
     }
-  } else {
-    context.popUp.classList.remove('editor');
-    context.elements.popUpContainer.classList.remove('hidden');
-  }
-  onEditorChange(context);
+    onEditorChange(context);
 }
 
 export function changeStyle(context) {
     initializesubButtonIcon(context);
 
+    const cardLayout = context.config.card_layout;
+
+    if (cardLayout === 'large') {
+        if (!context.popUp.classList.contains('large')) {
+            context.popUp.classList.add('large');
+        }
+        if (context.popUp.classList.contains('rows-2')) {
+            context.popUp.classList.remove('rows-2');
+        } 
+    } else if (cardLayout === 'large-2-rows') {
+        if (!context.popUp.classList.contains('large')) {
+            context.popUp.classList.add('large');
+        } 
+        if (!context.popUp.classList.contains('rows-2')) {
+            context.popUp.classList.add('rows-2');
+        } 
+    } else {
+        context.popUp.classList.remove('large');
+        context.popUp.classList.remove('rows-2');
+    }
+
     const state = getState(context);
     const { backdropCustomStyle } = getBackdrop(context);
 

diff --git a/src/cards/pop-up/styles.ts b/src/cards/pop-up/styles.ts
@@ -56,10 +56,10 @@ export default `
       overflow: visible;
   }
   .is-popup-opened {
-      transform: translateY(0);
       box-shadow: 0px 0px 50px rgba(0, 0, 0, var(--custom-shadow-opacity));
       backdrop-filter: var(--custom-popup-filter);
       -webkit-backdrop-filter: var(--custom-popup-filter);
+      overflow: auto;
   }
   .is-popup-closed { 
       transform: translateY(100%) !important;
@@ -139,6 +139,46 @@ export default `
       mask-image: none;
       -webkit-mask-image: none;      
   }
+
+  .large .bubble-button-card-container {
+    height: 64px;
+    border-radius: 32px;
+  }
+
+  .large .bubble-pop-up-container {
+      margin-top: -36px;
+  }
+
+  .large .bubble-icon-container {
+    --mdc-icon-size: 28px;
+    min-width: 48px !important;
+    min-height: 48px !important;
+    margin-left: 8px;
+  }
+
+  .large .bubble-close-button {
+      height: 64px;
+      width: 64px;
+      border: none;
+      border-radius: 50%;
+      z-index: 1;
+      --mdc-icon-size: 28px !important;
+  }
+
+  .rows-2 .bubble-sub-button-container {
+    flex-direction: column;
+    gap: 4px !important;
+    display: grid !important;
+    grid-template-columns: repeat(2, min-content);
+    grid-template-rows: repeat(2, 1fr);
+    grid-auto-flow: column;
+    width: auto;
+    padding-right: 14px;
+  }
+
+  .rows-2 .bubble-sub-button {
+    height: 20px !important;
+  }
 `;
 
 export const backdropStyles = `

diff --git a/src/cards/separator/changes.ts b/src/cards/separator/changes.ts
@@ -18,7 +18,7 @@ export function changeStyle(context) {
 
     const customStyle = context.config.styles
         ? Function('hass', 'entityId', 'state', 'icon', 'subButtonIcon', 'getWeatherIcon', `return \`${context.config.styles}\`;`)
-          (context._hass, context.config.entity, state, context.elements.icon.icon, context.subButtonIcon, getWeatherIcon)
+          (context._hass, context.config.entity, state, context.elements.icon, context.subButtonIcon, getWeatherIcon)
         : '';
 
     context.elements.customStyle.innerText = customStyle;

diff --git a/src/cards/separator/styles.ts b/src/cards/separator/styles.ts
@@ -27,9 +27,11 @@ export default `
         flex-grow: 1;
         height: 6px;
         background-color: var(--background-color, var(--secondary-background-color));
+        margin-right: 14px;
     }
     .bubble-sub-button-container {
-        margin-left: 24px;
+        margin: 0 8px;
+        right: 0 !important;
     }
 
     .large .bubble-separator {
@@ -40,12 +42,10 @@ export default `
       flex-direction: column;
       gap: 4px !important;
       display: grid !important;
-      grid-template-columns: repeat(2, 1fr);
-      grid-template-rows: repeat(2, minmax(auto, max-content));
-      grid-auto-rows: none;
+      grid-template-columns: repeat(2, min-content);
+      grid-template-rows: repeat(2, 1fr);
       grid-auto-flow: column;
       width: auto;
-      padding-right: 14px;
     }
 
     .rows-2 .bubble-sub-button {

diff --git a/src/editor/bubble-card-editor.ts b/src/editor/bubble-card-editor.ts
@@ -1012,12 +1012,11 @@ export function createBubbleCardEditor() {
         makeLayoutOptions() {
             return html`
                 <ha-combo-box
-                    label="Card layout"
+                    label="${this._config.card_type === "pop-up" ? 'Header card layout' : 'Card layout'}"
                     .value="${this._config.card_layout || 'normal'}"
                     .configValue="${"card_layout"}"
                     .items="${[{label: 'Normal', value: 'normal'}, {label: 'Large (Optimized for sections)', value: 'large'}, {label: 'Large with 2 sub-buttons rows (Optimized for sections)', value: 'large-2-rows'}]}"
                     @value-changed="${this._valueChanged}"
-                    style="display: ${this._config.card_type === "pop-up" ? 'none' : ''};"
                 ></ha-combo-box>
                 <ha-expansion-panel outlined>
                     <h4 slot="header">

diff --git a/src/tools/global-changes.ts b/src/tools/global-changes.ts
@@ -27,26 +27,8 @@ export function changeState(context) {
     let formattedAttribute;
     let formattedLastChanged;
 
-    if (showAttribute) {
-        if (!attribute) {
-            switch (buttonType) {
-                case "switch":
-                case "state":
-                    formattedLastChanged = state ? formatDateTime(state.last_changed, context._hass.locale.language) : '';
-                    break;
-                case "slider":
-                    const attributeKey = isEntityType(context, "cover") ? "current_subButton" :
-                                         isEntityType(context, "light") && state.state !== 'off' ? "brightness" :
-                                         isEntityType(context, "media_player") && state.state !== 'off' ? "volume_level" :
-                                         null;
-                    formattedAttribute = state && attributeKey ? context._hass.formatEntityAttributeValue(state, attributeKey) : '';
-                    break;
-                default:
-                    formattedAttribute = "";
-            }
-        } else {
-            formattedAttribute = state ? context._hass.formatEntityAttributeValue(state, attribute) : '';
-        }
+    if (showAttribute && attribute) {
+        formattedAttribute = state ? context._hass.formatEntityAttributeValue(state, attribute) : '';
     }
 
     if (showLastChanged) {
@@ -131,7 +113,7 @@ export function changeSubButtonState(context, container = context.content, appen
     context.elements = { ...context.elements };
 
     const subButtonContainer = context.elements.subButtonContainer || createElement('div', 'bubble-sub-button-container');
-    if (!context.elements.subButtonContainer) {
+    if (!context.elements.subButtonContainer && context.config.sub_button) {
         Object.assign(subButtonContainer.style, subButtonStyles.subButtonContainer);
         if (before) appendTo.prepend(subButtonContainer);
         else appendTo.appendChild(subButtonContainer);
@@ -172,12 +154,17 @@ export function changeSubButtonState(context, container = context.content, appen
         }
 
         if (showIcon && icon) {
-            let iconElement = subButtonElement.icon || createElement('ha-icon', 'bubble-sub-button-icon');
-            iconElement.setAttribute('icon', icon);
-            iconElement.style.display = 'flex';
-            iconElement.style.setProperty('--mdc-icon-size', '16px');
-            subButtonElement.appendChild(iconElement);
-            subButtonElement.icon = iconElement;
+            let iconElement = subButtonElement.icon;
+            if (!iconElement) {
+                iconElement = createElement('ha-icon', 'bubble-sub-button-icon');
+                iconElement.style.display = 'flex';
+                iconElement.style.setProperty('--mdc-icon-size', '16px');
+                subButtonElement.appendChild(iconElement);
+                subButtonElement.icon = iconElement;
+            }
+            if (iconElement.getAttribute('icon') !== icon) {
+                iconElement.setAttribute('icon', icon);
+            }
         } else if (subButtonElement.icon) {
             subButtonElement.icon.style.display = 'none';
         }
@@ -216,6 +203,11 @@ export function changeSubButtonState(context, container = context.content, appen
                 subButtonElement.icon.style.setProperty('--mdc-icon-size', displayedState ? '16px' : '20px');
             }
         }
+
+        // if (!context.config.sub_button) {
+        //     console.log('NONE')
+        //     context.elements.subButtonContainer.style.display = 'none';
+        // }
     });
 
     context.previousValues.subButtons = subButtons.slice();

diff --git a/src/var/version.ts b/src/var/version.ts
@@ -1 +1 @@
-export let version = 'v2.0.0-beta.7';
+export let version = 'v2.0.0-beta.8';