From 3aef63872a05978da519a0583e608bc5edda43c0 Mon Sep 17 00:00:00 2001 From: MrBearPresident Date: Wed, 27 Nov 2024 17:47:36 +0100 Subject: [PATCH 01/16] For large Layout: Calculate height with row height,size and gap --- src/cards/button/styles.ts | 2 +- src/cards/climate/styles.ts | 2 +- src/cards/cover/styles.ts | 4 ++-- src/cards/media-player/styles.ts | 2 +- src/cards/pop-up/styles.ts | 4 ++-- src/cards/select/styles.ts | 2 +- src/cards/separator/styles.ts | 2 +- 7 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/cards/button/styles.ts b/src/cards/button/styles.ts index 2786d120..9d376a78 100644 --- a/src/cards/button/styles.ts +++ b/src/cards/button/styles.ts @@ -151,7 +151,7 @@ export default ` } .large .bubble-button-card-container { - height: 56px; + height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )); border-radius: var(--bubble-button-border-radius, var(--bubble-border-radius, 32px)); } diff --git a/src/cards/climate/styles.ts b/src/cards/climate/styles.ts index fd492525..5e346447 100644 --- a/src/cards/climate/styles.ts +++ b/src/cards/climate/styles.ts @@ -219,7 +219,7 @@ export default ` } .large .bubble-climate-container { - height: 56px; + height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )); border-radius: var(--bubble-climate-border-radius, var(--bubble-border-radius, 32px)); } diff --git a/src/cards/cover/styles.ts b/src/cards/cover/styles.ts index 541e78a9..19d090e0 100644 --- a/src/cards/cover/styles.ts +++ b/src/cards/cover/styles.ts @@ -97,7 +97,7 @@ export default ` } .large .bubble-cover-card-container { - height: 56px; + height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )); display: flex; background: var(--bubble-cover-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color)))); border-radius: var(--bubble-cover-border-radius, var(--bubble-border-radius, 32px)); @@ -109,7 +109,7 @@ export default ` } .large .bubble-header-container { - height: 56px; + height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )); } .large .bubble-header { diff --git a/src/cards/media-player/styles.ts b/src/cards/media-player/styles.ts index 07ca2073..cc6b66c5 100644 --- a/src/cards/media-player/styles.ts +++ b/src/cards/media-player/styles.ts @@ -274,7 +274,7 @@ export default ` } .large .bubble-media-player-container { - height: 56px; + height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )); border-radius: var(--bubble-media-player-border-radius, var(--bubble-border-radius, 32px)); } diff --git a/src/cards/pop-up/styles.ts b/src/cards/pop-up/styles.ts index c29e16d9..08e32995 100644 --- a/src/cards/pop-up/styles.ts +++ b/src/cards/pop-up/styles.ts @@ -167,7 +167,7 @@ export default ` } .large .bubble-button-card-container { - height: 56px; + height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )); border-radius: var(--bubble-button-border-radius, var(--bubble-border-radius, 36px)); } .large .bubble-pop-up-container { @@ -180,7 +180,7 @@ export default ` margin-left: 8px; } .large .bubble-close-button { - height: 56px; + height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )); width: 56px; border: none; border-radius: var(--bubble-pop-up-border-radius, var(--bubble-border-radius, 42px)); diff --git a/src/cards/select/styles.ts b/src/cards/select/styles.ts index 9a15b578..7af1f801 100644 --- a/src/cards/select/styles.ts +++ b/src/cards/select/styles.ts @@ -195,7 +195,7 @@ export default ` } .large .bubble-select-card-container { - height: 56px; + height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )); border-radius: var(--bubble-select-border-radius, var(--bubble-border-radius, 32px)); } diff --git a/src/cards/separator/styles.ts b/src/cards/separator/styles.ts index dbd88a31..6407b7f7 100644 --- a/src/cards/separator/styles.ts +++ b/src/cards/separator/styles.ts @@ -36,7 +36,7 @@ export default ` } .large .bubble-separator { - height: 56px; + height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )); } .rows-2 .bubble-sub-button-container { From 6b19222bf77a51afb893e879a982a548b9f48d22 Mon Sep 17 00:00:00 2001 From: MrBearPresident Date: Thu, 28 Nov 2024 09:47:50 +0100 Subject: [PATCH 02/16] =?UTF-8?q?=20=E2=80=A2=20Stick=20icon=20an=20name/s?= =?UTF-8?q?tate=20to=20top=20=20=E2=80=A2=20Stick=20Subbuttons=20to=20bott?= =?UTF-8?q?om=20en=20wrap=20them=20arround?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/cards/button/styles.ts | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/src/cards/button/styles.ts b/src/cards/button/styles.ts index 9d376a78..679db17c 100644 --- a/src/cards/button/styles.ts +++ b/src/cards/button/styles.ts @@ -150,6 +150,11 @@ export default ` 100% {transform: translateX(100%); opacity: 0;} } + .large .bubble-button-card{ + --line-height: 18px; + align-items: normal; + } + .large .bubble-button-card-container { height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )); border-radius: var(--bubble-button-border-radius, var(--bubble-border-radius, 32px)); @@ -158,10 +163,25 @@ export default ` .large .bubble-icon-container { --mdc-icon-size: 24px; min-width: 42px !important; - min-height: 42px !important; + height: 42px !important; margin-left: 8px; } + .large .bubble-name-container { + justify-content: flex-start; + padding-top: calc(var(--row-height,56) / 2 - var(--line-height,18)); + } + + .large .bubble-sub-button-container { + position: absolute; + bottom: 0px; + padding-bottom: calc(var(--row-height,56) / 2 - var(--line-height,18)); + max-width: 100%; + max-height: 100%; + flex-wrap: wrap-reverse; + row-gap: 4px; + } + .rows-2 .bubble-sub-button-container { flex-direction: column; gap: 4px !important; From 2f5cab772af6838074e7989d3e609abf8fa7eb74 Mon Sep 17 00:00:00 2001 From: MrBearPresident Date: Fri, 29 Nov 2024 15:18:34 +0100 Subject: [PATCH 03/16] Add Extra container for multirow --- src/cards/climate/styles.ts | 21 ++++++++++++++- src/cards/cover/styles.ts | 19 ++++++++++++- src/cards/media-player/styles.ts | 22 ++++++++++++++- src/cards/select/styles.ts | 46 +++++++++++++++++++++++++++++++- src/tools/global-changes.ts | 31 +++++++++++++++++++++ 5 files changed, 135 insertions(+), 4 deletions(-) diff --git a/src/cards/climate/styles.ts b/src/cards/climate/styles.ts index 5e346447..16991abf 100644 --- a/src/cards/climate/styles.ts +++ b/src/cards/climate/styles.ts @@ -218,6 +218,10 @@ export default ` 100% {transform: translateX(100%); opacity: 0;} } + .large .bubble-climate-card{ + --line-height: 18px; + align-items: normal; + } .large .bubble-climate-container { height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )); border-radius: var(--bubble-climate-border-radius, var(--bubble-border-radius, 32px)); @@ -226,10 +230,25 @@ export default ` .large .bubble-icon-container { --mdc-icon-size: 24px; min-width: 42px !important; - min-height: 42px !important; + height: 42px !important; margin-left: 8px; } + .large .bubble-name-container { + justify-content: flex-start; + padding-top: calc(var(--row-height,56) / 2 - var(--line-height,18)); + } + + .large .bubble-sub-button-container { + position: absolute; + bottom: 0px; + padding-bottom: calc(var(--row-height,56) / 2 - var(--line-height,18)); + max-width: 100%; + max-height: 100%; + flex-wrap: wrap-reverse; + row-gap: 4px; + } + .rows-2 .bubble-sub-button-container { flex-direction: column; gap: 4px !important; diff --git a/src/cards/cover/styles.ts b/src/cards/cover/styles.ts index 19d090e0..920753a5 100644 --- a/src/cards/cover/styles.ts +++ b/src/cards/cover/styles.ts @@ -96,6 +96,11 @@ export default ` border: none; } + .large .bubble-cover-card{ + --line-height: 18px; + align-items: normal; + } + .large .bubble-cover-card-container { height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )); display: flex; @@ -119,12 +124,17 @@ export default ` .large .bubble-icon-container { --mdc-icon-size: 24px; min-width: 42px !important; - min-height: 42px !important; + height: 42px !important; align-content: center; border: none; margin: 8px 6px 8px 8px; } + .large .bubble-name-container { + justify-content: flex-start; + padding-top: calc(var(--row-height,56) / 2 - var(--line-height,18)); + } + .large .bubble-icon { align-items: center; } @@ -139,6 +149,13 @@ export default ` .large .bubble-sub-button-container { margin-right: 14px; + position: absolute; + bottom: 0px; + padding-bottom: calc(var(--row-height,56) / 2 - var(--line-height,18)); + max-width: 100%; + max-height: 100%; + flex-wrap: wrap-reverse; + row-gap: 4px; } .rows-2 .bubble-sub-button-container { diff --git a/src/cards/media-player/styles.ts b/src/cards/media-player/styles.ts index cc6b66c5..989c031e 100644 --- a/src/cards/media-player/styles.ts +++ b/src/cards/media-player/styles.ts @@ -273,6 +273,11 @@ export default ` 100% {transform: translateX(100%); opacity: 0;} } + .large .bubble-media-player-card{ + --line-height: 18px; + align-items: normal; + } + .large .bubble-media-player-container { height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )); border-radius: var(--bubble-media-player-border-radius, var(--bubble-border-radius, 32px)); @@ -281,7 +286,7 @@ export default ` .large .bubble-icon-container { --mdc-icon-size: 24px; min-width: 42px !important; - min-height: 42px !important; + height: 42px !important; margin-left: 8px; } @@ -309,6 +314,21 @@ export default ` .large .bubble-button-container { align-items: center; } + + .large .bubble-name-container { + justify-content: flex-start; + padding-top: calc(var(--row-height,56) / 2 - var(--line-height,18)); + } + + .large .bubble-sub-button-container { + position: absolute; + bottom: 0px; + padding-bottom: calc(var(--row-height,56) / 2 - var(--line-height,18)); + max-width: 100%; + max-height: 100%; + flex-wrap: wrap-reverse; + row-gap: 4px; + } .rows-2 .bubble-sub-button-container { flex-direction: column; diff --git a/src/cards/select/styles.ts b/src/cards/select/styles.ts index 7af1f801..46f652dc 100644 --- a/src/cards/select/styles.ts +++ b/src/cards/select/styles.ts @@ -194,6 +194,19 @@ export default ` 100% {transform: translateX(100%); opacity: 0;} } + .large .bubble-select-card{ + --line-height: 18px; + display: grid; + grid-template-areas: + 'i n c a' 'b b b b' !important; + grid-template-columns: var(--row-height,56px) auto 1fr 42px; + grid-template-rows: var(--row-height,56px) 1fr; + justify-self: start; + justify-items: start; + align-self: center; + align-items: center; + } + .large .bubble-select-card-container { height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )); border-radius: var(--bubble-select-border-radius, var(--bubble-border-radius, 32px)); @@ -202,9 +215,40 @@ export default ` .large .bubble-icon-container { --mdc-icon-size: 24px; min-width: 42px !important; - min-height: 42px !important; + max-height: 42px !important; + grid-area: i; margin-left: 6px; } + + .large .bubble-dropdown-container{ + grid-area: a; + } + + .large .bubble-name-container { + justify-content: flex-start; + grid-area: n; + overflow: hidden; + } + + .large .bubble-sub-button-container { + grid-area: c !important; + overflow: hidden !important; + max-height: calc(100% - 14px) !important; + align-content: end !important; + max-width: 100%; + flex-wrap: wrap-reverse; + row-gap: 4px; + } + + .multirow .large .bubble-sub-button-container { + grid-area: b !important; + } + .multirow .large .bubble-sub-button-container.expansion { + grid-area: c !important; + } + + + .rows-2 .bubble-sub-button-container { flex-direction: column; diff --git a/src/tools/global-changes.ts b/src/tools/global-changes.ts index b17c8446..c05b6f2e 100644 --- a/src/tools/global-changes.ts +++ b/src/tools/global-changes.ts @@ -143,6 +143,7 @@ const stateStyles = ` export function changeSubButtonState(context, container = context.content, appendTo = container.firstChild.firstChild, before = false) { const subButtons = context.config.sub_button; + const largeFormat = context.row > 1 &&(context.card_layout === 'Large' || context.card_layout === 'large-2-rows') if (!subButtons) return; // Initialize previousValues and elements if not already done @@ -165,6 +166,24 @@ export function changeSubButtonState(context, container = context.content, appen } context.elements.subButtonContainer = subButtonContainer; } + const subButtonContainer2 = context.elements.subButtonContainer2 ?? createElement('div', 'bubble-sub-button-container expansion'); + + if (largeFormat){ + if (!context.elements.subButtonContainer2 && context.config.sub_button) { + const style = createElement('style'); + style.innerText = subButtonsStyles; + subButtonContainer2.appendChild(style); + + // Append or prepend subButtonContainer + if (before) { + appendTo.prepend(subButtonContainer2); + } else { + appendTo.appendChild(subButtonContainer2); + } + context.elements.subButtonContainer2 = subButtonContainer2; + } + appendTo.classList.add("multirow"); + } // Process each subButton subButtons.forEach((subButton, i) => { @@ -376,6 +395,18 @@ export function changeSubButtonState(context, container = context.content, appen // Update context.previousValues with current subButtons context.previousValues.subButtons = subButtons.slice(); + // Move subbuttons when large + if (largeFormat){ + let overflow = subButtonContainer.scrollHeight > subButtonContainer.clientHeight || subButtonContainer.scrollWidth > subButtonContainer.clientWidth; + + while(overflow){ + let firstChild = subButtonContainer.lastChild + firstChild.remove() + subButtonContainer2.appendChild(firstChild); + overflow = subButtonContainer.scrollHeight > subButtonContainer.clientHeight || subButtonContainer.scrollWidth > subButtonContainer.clientWidth; + } + } + // Clean up extra elements not needed for (let i = previousSubButtons.length; i > 0; i--) { if (i > subButtons.length) { From 9451f16b6645005c3ed26f0f46686511fe5c16f9 Mon Sep 17 00:00:00 2001 From: MrBearPresident Date: Wed, 4 Dec 2024 20:26:15 +0100 Subject: [PATCH 04/16] Adjust Large sizes --- src/cards/button/styles.ts | 75 +++++++++++++++++------- src/cards/climate/styles.ts | 87 ++++++++++++++++++++-------- src/cards/cover/styles.ts | 77 +++++++++++++------------ src/cards/media-player/styles.ts | 97 +++++++++++++++++++++++--------- src/cards/select/styles.ts | 55 +++++++++++------- src/tools/global-changes.ts | 42 ++++++++++---- 6 files changed, 297 insertions(+), 136 deletions(-) diff --git a/src/cards/button/styles.ts b/src/cards/button/styles.ts index 679db17c..eb6c59a9 100644 --- a/src/cards/button/styles.ts +++ b/src/cards/button/styles.ts @@ -80,7 +80,7 @@ export default ` margin: 6px; border-radius: var(--bubble-button-icon-border-radius, var(--bubble-icon-border-radius, var(--bubble-border-radius, 50%))); background-color: var(--bubble-button-icon-background-color, var(--bubble-icon-background-color, var(--bubble-secondary-background-color, var(--card-background-color, var(--ha-card-background))))); - overflow: hidden; + #overflow: hidden; #have to disable for subbutton functions. position: relative; cursor: pointer; } @@ -151,38 +151,71 @@ export default ` } .large .bubble-button-card{ - --line-height: 18px; - align-items: normal; + --line-height: 18px; + --name-container-width: calc(100% - var(--row-height,56px) * 1 - var(--row-height,56px) * var(--number-subButtons,1)); + display: grid; + grid-template-areas: + 'i n c' 'b b b' !important; + grid-template-columns: var(--row-height,56px) 1fr auto auto; + grid-template-rows: var(--row-height,56px) 1fr; + justify-self: start; + justify-items: start; + align-self: center; + align-items: center; } + + .large .bubble-button-card-container { height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )); border-radius: var(--bubble-button-border-radius, var(--bubble-border-radius, 32px)); } - .large .bubble-icon-container { + .large .bubble-button-card .bubble-icon-container { --mdc-icon-size: 24px; min-width: 42px !important; - height: 42px !important; - margin-left: 8px; + max-height: 42px !important; + grid-area: i; + margin-left: 6px; } - - .large .bubble-name-container { - justify-content: flex-start; - padding-top: calc(var(--row-height,56) / 2 - var(--line-height,18)); + + .large .bubble-button-card .bubble-sub-button .bubble-dropdown-container{ + display: flex !important; } - - .large .bubble-sub-button-container { - position: absolute; - bottom: 0px; - padding-bottom: calc(var(--row-height,56) / 2 - var(--line-height,18)); - max-width: 100%; - max-height: 100%; - flex-wrap: wrap-reverse; - row-gap: 4px; + + .large .bubble-button-card .bubble-name-container { + justify-content: flex-start; + grid-area: n; + overflow: hidden; + max-width: 100% !important; + #padding-top: calc(var(--row-height,56) / 2 - var(--line-height,18)); + } + + .large .bubble-button-card .bubble-sub-button-container { + grid-area: c; + max-width: 100%; + height: 36px; + flex-wrap: wrap-reverse; + row-gap: 4px; + align-content: end; + justify-self: end; + } + + .large .bubble-button-card .bubble-sub-button-container.expanded { + max-height: calc(100%); + height: auto !important; + grid-area: b; + overflow: hidden; + flex-wrap: wrap; + align-content: start; + align-self: end; + justify-items: center; + justify-content: end; + justify-self: center; + padding-bottom: 7px; } - .rows-2 .bubble-sub-button-container { + .rows-2 .bubble-button-card .bubble-sub-button-container { flex-direction: column; gap: 4px !important; display: grid !important; @@ -193,7 +226,7 @@ export default ` padding-right: 14px; } - .rows-2 .bubble-sub-button { + .rows-2 .bubble-button-card .bubble-sub-button { height: 20px !important; } `; \ No newline at end of file diff --git a/src/cards/climate/styles.ts b/src/cards/climate/styles.ts index 16991abf..5dbd1e04 100644 --- a/src/cards/climate/styles.ts +++ b/src/cards/climate/styles.ts @@ -218,38 +218,81 @@ export default ` 100% {transform: translateX(100%); opacity: 0;} } - .large .bubble-climate-card{ - --line-height: 18px; - align-items: normal; + .large .bubble-climate{ + --line-height: 18px; + --name-container-width: calc(100% - var(--row-height,56px) - 114px - 42px * var(--number-subButtons,1)); + display: grid; + grid-template-areas: + 'i n c a' 'b b b b' !important; + grid-template-columns: var(--row-height,56px) 1fr auto auto; + grid-template-rows: var(--row-height,56px) 1fr; + justify-self: start; + justify-items: start; + align-self: center; + align-items: center; } + .large .bubble-climate-container { - height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )); - border-radius: var(--bubble-climate-border-radius, var(--bubble-border-radius, 32px)); + height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * (var(--row-size) - 1 )); + border-radius: var(--bubble-select-border-radius, var(--bubble-border-radius, 32px)); } - .large .bubble-icon-container { + .large .bubble-climate .bubble-icon-container { --mdc-icon-size: 24px; min-width: 42px !important; - height: 42px !important; - margin-left: 8px; + max-height: 42px !important; + grid-area: i; + margin-left: 6px; + } + + .large .bubble-climate .bubble-button-container{ + grid-area: a; + display: contents !important; + } + + .large .bubble-climate .bubble-temperature-container{ + grid-area: a; + height: calc(100% - 20px); + width: calc(100% - 14px); + justify-self: center; + } + + .large .bubble-climate .bubble-sub-button .bubble-dropdown-container{ + display: flex !important; + } + + .large .bubble-climate .bubble-name-container { + justify-content: flex-start; + grid-area: n; + overflow: hidden; + max-width: 100% !important; } - .large .bubble-name-container { - justify-content: flex-start; - padding-top: calc(var(--row-height,56) / 2 - var(--line-height,18)); + .large .bubble-climate .bubble-sub-button-container { + grid-area: c; + max-width: 100%; + height: 36px; + flex-wrap: wrap-reverse; + row-gap: 4px; + align-content: end; + justify-self: end; } - .large .bubble-sub-button-container { - position: absolute; - bottom: 0px; - padding-bottom: calc(var(--row-height,56) / 2 - var(--line-height,18)); - max-width: 100%; - max-height: 100%; - flex-wrap: wrap-reverse; - row-gap: 4px; + .large .bubble-climate .bubble-sub-button-container.expanded { + max-height: calc(100%); + height: auto !important; + grid-area: b; + #overflow: hidden; #have to disable for subbutton functions. + flex-wrap: wrap; + align-content: start; + align-self: end; + justify-items: center; + justify-content: end; + justify-self: center; + padding-bottom: 7px; } - - .rows-2 .bubble-sub-button-container { + + .rows-2 .bubble-climate .bubble-sub-button-container { flex-direction: column; gap: 4px !important; display: grid !important; @@ -259,7 +302,7 @@ export default ` width: auto; } - .rows-2 .bubble-sub-button { + .rows-2 .bubble-climate .bubble-sub-button { height: 20px !important; } `; diff --git a/src/cards/cover/styles.ts b/src/cards/cover/styles.ts index 920753a5..564913b8 100644 --- a/src/cards/cover/styles.ts +++ b/src/cards/cover/styles.ts @@ -94,71 +94,78 @@ export default ` justify-content: center; cursor: pointer; border: none; - } - - .large .bubble-cover-card{ - --line-height: 18px; - align-items: normal; - } - + } + .large .bubble-cover-card-container { height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )); - display: flex; background: var(--bubble-cover-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color)))); border-radius: var(--bubble-cover-border-radius, var(--bubble-border-radius, 32px)); + display: grid; + grid-template-areas: + 'i n c a' 'b b b b' !important; + grid-template-columns: var(--row-height,56px) 1fr auto auto; + grid-template-rows: var(--row-height,56px) 1fr; } - .large .bubble-buttons .bubble-icon { + .large .bubble-cover-card-container .bubble-buttons .bubble-icon { color: var(--primary-text-color) !important; opacity: 1; } - - .large .bubble-header-container { - height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )); + + .large .bubble-cover-card-container .bubble-header { + display: contents; + height: var(--row-height,56); + width: 100%; } - .large .bubble-header { - width: 100%; - } - - .large .bubble-icon-container { + .large .bubble-cover-card-container .bubble-header .bubble-icon-container { --mdc-icon-size: 24px; min-width: 42px !important; - height: 42px !important; + min-height: 42px !important; align-content: center; border: none; margin: 8px 6px 8px 8px; + grid-area: i; } - .large .bubble-name-container { - justify-content: flex-start; - padding-top: calc(var(--row-height,56) / 2 - var(--line-height,18)); + .large .bubble-cover-card-container .bubble-name-container { + grid-area: n; + align-self: center; } + - .large .bubble-icon { + .large .bubble-cover-card-container .bubble-icon { align-items: center; } - .large .bubble-buttons { + .large .bubble-cover-card-container .bubble-buttons { display: flex; position: relative; right: 18px; align-self: center; grid-gap: 18px; + grid-area: a; } - .large .bubble-sub-button-container { - margin-right: 14px; - position: absolute; - bottom: 0px; - padding-bottom: calc(var(--row-height,56) / 2 - var(--line-height,18)); - max-width: 100%; - max-height: 100%; + .large .bubble-cover-card-container .bubble-sub-button-container { + margin-right: 7px; + grid-area: c; flex-wrap: wrap-reverse; - row-gap: 4px; + align-content: center; + align-self: center; } - - .rows-2 .bubble-sub-button-container { + + .large.bubble-multi-row .bubble-cover-card-container .bubble-sub-button-container { + grid-area: b; + justify-content: center; + + } + + .large .bubble-cover-card-container .bubble-sub-button .bubble-dropdown-container{ + display: flex !important; + } + + .rows-2 .bubble-cover-card-container .bubble-sub-button-container { flex-direction: column; gap: 4px !important; display: grid !important; @@ -166,10 +173,10 @@ export default ` grid-template-rows: repeat(2, 1fr); grid-auto-flow: column; width: auto; - padding-right: 14px; + padding-right: 7px; } - .rows-2 .bubble-sub-button { + .rows-2 .bubble-cover-card-container .bubble-sub-button { height: 20px !important; } ` \ No newline at end of file diff --git a/src/cards/media-player/styles.ts b/src/cards/media-player/styles.ts index 989c031e..e42dbbfb 100644 --- a/src/cards/media-player/styles.ts +++ b/src/cards/media-player/styles.ts @@ -272,65 +272,108 @@ export default ` 64% {transform: translateX(0); opacity: 0.1;} 100% {transform: translateX(100%); opacity: 0;} } - - .large .bubble-media-player-card{ - --line-height: 18px; - align-items: normal; + .large .bubble-media-player-container{ + display: flex; } - - .large .bubble-media-player-container { + + .large .bubble-media-player-container{ height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )); + } + + .large .bubble-media-player{ + --line-height: 18px; + display: grid; + grid-template-areas: + 'i n c a1 a2 a3 a4 a5' 'b b b b b b b b' !important; + grid-template-columns: var(--row-height,56px) 1fr auto auto auto auto auto auto; + grid-template-rows: var(--row-height,56px) 1fr; border-radius: var(--bubble-media-player-border-radius, var(--bubble-border-radius, 32px)); + justify-self: start; + justify-items: start; + align-self: center; + align-items: center; + gap: 4px; } - .large .bubble-icon-container { + .large .bubble-media-player-container .bubble-icon-container { --mdc-icon-size: 24px; min-width: 42px !important; height: 42px !important; + grid-area: i; margin-left: 8px; } - .large .bubble-play-pause-button { + .large .bubble-media-player-container .bubble-button-container{ + grid-area: a1; + align-items: center; + gap: 4; + display: contents !important; + } + + .large .bubble-media-player-container .bubble-power-button{ + grid-area: a1; + } + + .large .bubble-media-player-container .bubble-previous-button{ + grid-area: a2; + } + + .large .bubble-media-player-container .bubble-next-button{ + grid-area: a3; + } + + .large .bubble-media-player-container .bubble-volume-button{ + grid-area: a4 !important; + } + + .large .bubble-media-player-container .bubble-play-pause-button { display: flex; height: 42px; width: 42px; padding: 0; align-items: center; + grid-area: a5; justify-content: center; } - .large .bubble-volume-slider { - height: 42px; + .large .bubble-media-player-container .bubble-volume-slider { + height: 80%; border-radius: var(--bubble-media-player-border-radius, var(--bubble-border-radius, 32px)); - left: 60px; - width: calc(100% - 168px); + position: relative; + left: 0px; + width: calc(100%); + grid-column-start: 2; + grid-column-end: 7; + grid-row-start: 1; + grid-row-end: 1; + } - .large .bubble-range-value { + .large .bubble-media-player-container .bubble-range-value { place-items: center; height: 42px; } - - .large .bubble-button-container { - align-items: center; - } - .large .bubble-name-container { + .large .bubble-media-player-container .bubble-name-container { + grid-area: n; justify-content: flex-start; - padding-top: calc(var(--row-height,56) / 2 - var(--line-height,18)); + margin-left: 0px; + } - .large .bubble-sub-button-container { - position: absolute; - bottom: 0px; - padding-bottom: calc(var(--row-height,56) / 2 - var(--line-height,18)); - max-width: 100%; - max-height: 100%; + .large .bubble-media-player-container .bubble-sub-button-container { + grid-area: c; flex-wrap: wrap-reverse; row-gap: 4px; } - .rows-2 .bubble-sub-button-container { + .large.bubble-multi-row .bubble-media-player-container .bubble-sub-button-container { + grid-area: b; + justify-content: center; + justify-self: center; + } + + .rows-2 .bubble-media-player-container .bubble-sub-button-container { flex-direction: column; gap: 4px !important; display: grid !important; @@ -340,7 +383,7 @@ export default ` width: auto; } - .rows-2 .bubble-sub-button { + .rows-2 .bubble-media-player-container .bubble-sub-button-container .bubble-sub-button { height: 20px !important; } `; \ No newline at end of file diff --git a/src/cards/select/styles.ts b/src/cards/select/styles.ts index 46f652dc..f569c3cc 100644 --- a/src/cards/select/styles.ts +++ b/src/cards/select/styles.ts @@ -196,10 +196,12 @@ export default ` .large .bubble-select-card{ --line-height: 18px; + --name-container-width: calc(100% - var(--row-height,56px) * 2 - var(--row-height,56px) * var(--number-subButtons,1)); display: grid; + gap: 4px; grid-template-areas: 'i n c a' 'b b b b' !important; - grid-template-columns: var(--row-height,56px) auto 1fr 42px; + grid-template-columns: var(--row-height,56px) 1fr auto auto; grid-template-rows: var(--row-height,56px) 1fr; justify-self: start; justify-items: start; @@ -212,7 +214,7 @@ export default ` border-radius: var(--bubble-select-border-radius, var(--bubble-border-radius, 32px)); } - .large .bubble-icon-container { + .large .bubble-select-card .bubble-icon-container { --mdc-icon-size: 24px; min-width: 42px !important; max-height: 42px !important; @@ -220,37 +222,52 @@ export default ` margin-left: 6px; } - .large .bubble-dropdown-container{ + .large .bubble-select-card .bubble-dropdown-container{ grid-area: a; + display: contents !important; } - .large .bubble-name-container { + .large .bubble-select-card .bubble-dropdown-arrow{ + grid-area: a; + } + + .large .bubble-select-card .bubble-sub-button .bubble-dropdown-container{ + display: flex; + } + + .large .bubble-select-card .bubble-name-container { justify-content: flex-start; grid-area: n; overflow: hidden; + max-width: 100% !important; } - .large .bubble-sub-button-container { - grid-area: c !important; - overflow: hidden !important; - max-height: calc(100% - 14px) !important; - align-content: end !important; + .large .bubble-select-card .bubble-sub-button-container { + grid-area: c; max-width: 100%; + height: 36px; flex-wrap: wrap-reverse; row-gap: 4px; + align-content: end; + justify-self: end; + right: 0px; } - .multirow .large .bubble-sub-button-container { - grid-area: b !important; - } - .multirow .large .bubble-sub-button-container.expansion { - grid-area: c !important; + .large .bubble-select-card .bubble-sub-button-container.expanded { + max-height: calc(100%); + height: auto !important; + grid-area: b; + #overflow: hidden; #have to disable for subbutton functions. + flex-wrap: wrap; + align-content: start; + align-self: end; + justify-items: center; + justify-content: end; + justify-self: center; + padding-bottom: 7px; } - - - - .rows-2 .bubble-sub-button-container { + .rows-2 .bubble-select-card .bubble-sub-button-container { flex-direction: column; gap: 4px !important; display: grid !important; @@ -260,7 +277,7 @@ export default ` width: auto; } - .rows-2 .bubble-sub-button { + .rows-2 .bubble-select-card .bubble-sub-button { height: 20px !important; } `; \ No newline at end of file diff --git a/src/tools/global-changes.ts b/src/tools/global-changes.ts index c05b6f2e..1f63106c 100644 --- a/src/tools/global-changes.ts +++ b/src/tools/global-changes.ts @@ -15,6 +15,8 @@ import { getIconColor, isColorLight } from './utils.ts'; +//import {validateConditionalConfig} from '../tools/validate-condition.ts' + export function changeState(context) { const state = context._hass.states[context.config.entity]; @@ -143,9 +145,11 @@ const stateStyles = ` export function changeSubButtonState(context, container = context.content, appendTo = container.firstChild.firstChild, before = false) { const subButtons = context.config.sub_button; - const largeFormat = context.row > 1 &&(context.card_layout === 'Large' || context.card_layout === 'large-2-rows') + const numberOfRows = !context.config.grid_options ? 1 :context.config.grid_options.rows; + const largeFormat = numberOfRows> 1 &&(context.config.card_layout === 'large' || context.config.card_layout === 'large-2-rows') if (!subButtons) return; - + let number_of_subButtons = subButtons.length; + // Initialize previousValues and elements if not already done context.previousValues = context.previousValues || {}; let previousSubButtons = [...(context.previousValues.subButtons || [])]; @@ -166,6 +170,7 @@ export function changeSubButtonState(context, container = context.content, appen } context.elements.subButtonContainer = subButtonContainer; } + const subButtonContainer2 = context.elements.subButtonContainer2 ?? createElement('div', 'bubble-sub-button-container expansion'); if (largeFormat){ @@ -182,7 +187,8 @@ export function changeSubButtonState(context, container = context.content, appen } context.elements.subButtonContainer2 = subButtonContainer2; } - appendTo.classList.add("multirow"); + subButtonContainer.classList.add("expanded"); + container.classList.add("bubble-multi-row") } // Process each subButton @@ -390,23 +396,33 @@ export function changeSubButtonState(context, container = context.content, appen subButtonElement.dropdownArrow.classList.remove('no-icon-select-arrow'); } } + }); // Update context.previousValues with current subButtons context.previousValues.subButtons = subButtons.slice(); - // Move subbuttons when large - if (largeFormat){ - let overflow = subButtonContainer.scrollHeight > subButtonContainer.clientHeight || subButtonContainer.scrollWidth > subButtonContainer.clientWidth; + if(context.config.card_layout === 'large-2-rows') number_of_subButtons = Math.ceil(number_of_subButtons/2,); - while(overflow){ - let firstChild = subButtonContainer.lastChild - firstChild.remove() - subButtonContainer2.appendChild(firstChild); - overflow = subButtonContainer.scrollHeight > subButtonContainer.clientHeight || subButtonContainer.scrollWidth > subButtonContainer.clientWidth; - } + // Move subbuttons when large format to expansion-container WIP + if (largeFormat){ + // const total_number_of_subButtons = number_of_subButtons; + // const rowheight = Number(getComputedStyle(context).getPropertyValue('--row-height').replace(/\D/g,'')); + // //let overflow = context.clientWidth - total_number_of_subButtons * 40 0 + // let overflow = subButtonContainer.scrollHeight > subButtonContainer.clientHeight || subButtonContainer.scrollWidth > subButtonContainer.clientWidth; + number_of_subButtons = 0; + // while(overflow){ + // let firstChild = subButtonContainer.lastChild; + // firstChild.remove(); + // subButtonContainer2.appendChild(firstChild); + // overflow = subButtonContainer.scrollHeight > subButtonContainer.clientHeight || subButtonContainer.scrollWidth > subButtonContainer.clientWidth; + // number_of_subButtons++; + // } } + + context.style.setProperty('--number-subButtons', number_of_subButtons) + // Clean up extra elements not needed for (let i = previousSubButtons.length; i > 0; i--) { if (i > subButtons.length) { @@ -419,6 +435,8 @@ export function changeSubButtonState(context, container = context.content, appen } } + + const subButtonsStyles = ` .bubble-sub-button-container { position: relative; From 65f4ab0ac60927c0dd02f6ac80c8ac5901df19b5 Mon Sep 17 00:00:00 2001 From: MrBearPresident Date: Sun, 8 Dec 2024 21:22:59 +0100 Subject: [PATCH 05/16] Clean-up + harmonize the different cards --- src/cards/button/styles.ts | 30 ++++++++------- src/cards/climate/styles.ts | 30 +++++++++------ src/cards/cover/styles.ts | 64 +++++++++++++++++++++----------- src/cards/media-player/styles.ts | 46 +++++++++++++++-------- src/cards/select/styles.ts | 29 +++++++++------ 5 files changed, 126 insertions(+), 73 deletions(-) diff --git a/src/cards/button/styles.ts b/src/cards/button/styles.ts index 0534ed92..8daa512b 100644 --- a/src/cards/button/styles.ts +++ b/src/cards/button/styles.ts @@ -151,10 +151,10 @@ export default ` .large .bubble-button-card{ --line-height: 18px; - --name-container-width: calc(100% - var(--row-height,56px) * 1 - var(--row-height,56px) * var(--number-subButtons,1)); + --gap-to-edge: 7px; display: grid; grid-template-areas: - 'i n c' 'b b b' !important; + 'i n c a' 'b b b b' !important; grid-template-columns: var(--row-height,56px) 1fr auto auto; grid-template-rows: var(--row-height,56px) 1fr; justify-self: start; @@ -162,6 +162,10 @@ export default ` align-self: center; align-items: center; } + .large.bubble-empty-sub-buttons .bubble-button-card{ + grid-template-rows: 1fr 0; + align-content: center; + } @@ -186,8 +190,8 @@ export default ` justify-content: flex-start; grid-area: n; overflow: hidden; - max-width: 100% !important; - #padding-top: calc(var(--row-height,56) / 2 - var(--line-height,18)); + margin: 0px; + max-width: calc(100% - 2 * var(--gap-to-edge,7px)); } .large .bubble-button-card .bubble-sub-button-container { @@ -196,21 +200,20 @@ export default ` height: 36px; flex-wrap: wrap-reverse; row-gap: 4px; - align-content: end; - justify-self: end; + align-self: center; + align-content: center; } .large .bubble-button-card .bubble-sub-button-container.expanded { - max-height: calc(100%); - height: auto !important; + max-height: 100%; + height: auto; grid-area: b; - overflow: hidden; flex-wrap: wrap; + justify-self: center; + align-self: center; + justify-content: center; align-content: start; - align-self: end; justify-items: center; - justify-content: end; - justify-self: center; padding-bottom: 7px; } @@ -221,8 +224,9 @@ export default ` grid-template-columns: repeat(2, min-content); grid-template-rows: repeat(2, 1fr); grid-auto-flow: column; + align-self: center; width: auto; - padding-right: 14px; + padding-right: 7px; } .rows-2 .bubble-button-card .bubble-sub-button { diff --git a/src/cards/climate/styles.ts b/src/cards/climate/styles.ts index 5dbd1e04..b66918e2 100644 --- a/src/cards/climate/styles.ts +++ b/src/cards/climate/styles.ts @@ -220,8 +220,9 @@ export default ` .large .bubble-climate{ --line-height: 18px; - --name-container-width: calc(100% - var(--row-height,56px) - 114px - 42px * var(--number-subButtons,1)); + --gap-to-edge: 7px; display: grid; + gap: 4px; grid-template-areas: 'i n c a' 'b b b b' !important; grid-template-columns: var(--row-height,56px) 1fr auto auto; @@ -231,6 +232,10 @@ export default ` align-self: center; align-items: center; } + .large.bubble-empty-sub-buttons .bubble-media-player{ + grid-template-rows: 1fr 0; + align-content: center; + } .large .bubble-climate-container { height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * (var(--row-size) - 1 )); @@ -253,19 +258,20 @@ export default ` .large .bubble-climate .bubble-temperature-container{ grid-area: a; height: calc(100% - 20px); - width: calc(100% - 14px); + width: calc(100% - 2 * var(--gap-to-edge,7)); justify-self: center; } .large .bubble-climate .bubble-sub-button .bubble-dropdown-container{ - display: flex !important; + display: flex; } .large .bubble-climate .bubble-name-container { justify-content: flex-start; grid-area: n; overflow: hidden; - max-width: 100% !important; + margin: 0px; + max-width: calc(100% - 2 * var(--gap-to-edge,7px)); } .large .bubble-climate .bubble-sub-button-container { @@ -274,21 +280,20 @@ export default ` height: 36px; flex-wrap: wrap-reverse; row-gap: 4px; - align-content: end; - justify-self: end; + align-self: center; + align-content: center; } .large .bubble-climate .bubble-sub-button-container.expanded { - max-height: calc(100%); - height: auto !important; + max-height: 100%; + height: auto; grid-area: b; - #overflow: hidden; #have to disable for subbutton functions. flex-wrap: wrap; + justify-self: center; + align-self: center; + justify-content: center; align-content: start; - align-self: end; justify-items: center; - justify-content: end; - justify-self: center; padding-bottom: 7px; } @@ -299,6 +304,7 @@ export default ` grid-template-columns: repeat(2, min-content); grid-template-rows: repeat(2, 1fr); grid-auto-flow: column; + align-self: center; width: auto; } diff --git a/src/cards/cover/styles.ts b/src/cards/cover/styles.ts index 564913b8..052107af 100644 --- a/src/cards/cover/styles.ts +++ b/src/cards/cover/styles.ts @@ -100,11 +100,24 @@ export default ` height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )); background: var(--bubble-cover-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color)))); border-radius: var(--bubble-cover-border-radius, var(--bubble-border-radius, 32px)); + + + --line-height: 18px; + --gap-to-edge: 7px; display: grid; + gap: 4px; grid-template-areas: 'i n c a' 'b b b b' !important; grid-template-columns: var(--row-height,56px) 1fr auto auto; grid-template-rows: var(--row-height,56px) 1fr; + justify-self: start; + justify-items: start; + align-self: center; + align-items: center; + } + .large.bubble-empty-sub-buttons .bubble-cover-card-container{ + grid-template-rows: 1fr 0; + align-content: center; } .large .bubble-cover-card-container .bubble-buttons .bubble-icon { @@ -122,43 +135,49 @@ export default ` --mdc-icon-size: 24px; min-width: 42px !important; min-height: 42px !important; - align-content: center; - border: none; - margin: 8px 6px 8px 8px; grid-area: i; - } - - .large .bubble-cover-card-container .bubble-name-container { - grid-area: n; - align-self: center; - } - - - .large .bubble-cover-card-container .bubble-icon { - align-items: center; + margin-left: 6px; } .large .bubble-cover-card-container .bubble-buttons { display: flex; position: relative; - right: 18px; align-self: center; - grid-gap: 18px; + padding-right: var(--line-height,18px); + grid-gap: var(--line-height,18px); grid-area: a; } + .large .bubble-cover-card-container .bubble-name-container { + justify-content: flex-start; + grid-area: n; + overflow: hidden; + margin: 0px; + max-width: calc(100% - 2 * var(--gap-to-edge,7px)); + } + + .large .bubble-cover-card-container .bubble-sub-button-container { - margin-right: 7px; grid-area: c; - flex-wrap: wrap-reverse; - align-content: center; - align-self: center; + max-width: 100%; + height: 36px; + flex-wrap: wrap-reverse; + row-gap: 4px; + align-self: center; + align-content: center; } .large.bubble-multi-row .bubble-cover-card-container .bubble-sub-button-container { - grid-area: b; - justify-content: center; - + max-height: 100%; + height: auto; + grid-area: b; + flex-wrap: wrap; + justify-self: center; + align-self: center; + justify-content: center; + align-content: start; + justify-items: center; + padding-bottom: 7px; } .large .bubble-cover-card-container .bubble-sub-button .bubble-dropdown-container{ @@ -172,6 +191,7 @@ export default ` grid-template-columns: repeat(2, min-content); grid-template-rows: repeat(2, 1fr); grid-auto-flow: column; + align-self: center; width: auto; padding-right: 7px; } diff --git a/src/cards/media-player/styles.ts b/src/cards/media-player/styles.ts index e42dbbfb..2dda0490 100644 --- a/src/cards/media-player/styles.ts +++ b/src/cards/media-player/styles.ts @@ -272,17 +272,17 @@ export default ` 64% {transform: translateX(0); opacity: 0.1;} 100% {transform: translateX(100%); opacity: 0;} } + .large .bubble-media-player-container{ display: flex; - } - - .large .bubble-media-player-container{ height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )); } .large .bubble-media-player{ --line-height: 18px; + --gap-to-edge: 7px; display: grid; + gap: 4px; grid-template-areas: 'i n c a1 a2 a3 a4 a5' 'b b b b b b b b' !important; grid-template-columns: var(--row-height,56px) 1fr auto auto auto auto auto auto; @@ -292,7 +292,10 @@ export default ` justify-items: start; align-self: center; align-items: center; - gap: 4px; + } + .large.bubble-empty-sub-buttons .bubble-media-player{ + grid-template-rows: 1fr 0; + align-content: center; } .large .bubble-media-player-container .bubble-icon-container { @@ -300,14 +303,12 @@ export default ` min-width: 42px !important; height: 42px !important; grid-area: i; - margin-left: 8px; + margin-left: 6px; } .large .bubble-media-player-container .bubble-button-container{ grid-area: a1; - align-items: center; - gap: 4; - display: contents !important; + display: contents; } .large .bubble-media-player-container .bubble-power-button{ @@ -323,7 +324,7 @@ export default ` } .large .bubble-media-player-container .bubble-volume-button{ - grid-area: a4 !important; + grid-area: a4; } .large .bubble-media-player-container .bubble-play-pause-button { @@ -331,9 +332,10 @@ export default ` height: 42px; width: 42px; padding: 0; - align-items: center; grid-area: a5; + align-items: center; justify-content: center; + margin: var(--gap-to-edge,7px) var(--gap-to-edge,7px) var(--gap-to-edge,7px) 0; } .large .bubble-media-player-container .bubble-volume-slider { @@ -355,22 +357,35 @@ export default ` } .large .bubble-media-player-container .bubble-name-container { - grid-area: n; justify-content: flex-start; - margin-left: 0px; + grid-area: n; + overflow: hidden; + margin: 0px; + max-width: calc(100% - 2 * var(--gap-to-edge,7px)); } .large .bubble-media-player-container .bubble-sub-button-container { grid-area: c; + max-width: 100%; + height: 36px; flex-wrap: wrap-reverse; row-gap: 4px; + align-self: center; + align-content: center; } .large.bubble-multi-row .bubble-media-player-container .bubble-sub-button-container { - grid-area: b; - justify-content: center; - justify-self: center; + max-height: 100%; + height: auto; + grid-area: b; + flex-wrap: wrap; + justify-self: center; + align-self: center; + justify-content: center; + align-content: start; + justify-items: center; + padding-bottom: 7px; } .rows-2 .bubble-media-player-container .bubble-sub-button-container { @@ -380,6 +395,7 @@ export default ` grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, minmax(auto, max-content)); grid-auto-flow: column; + align-self: center; width: auto; } diff --git a/src/cards/select/styles.ts b/src/cards/select/styles.ts index f569c3cc..465d8191 100644 --- a/src/cards/select/styles.ts +++ b/src/cards/select/styles.ts @@ -196,7 +196,7 @@ export default ` .large .bubble-select-card{ --line-height: 18px; - --name-container-width: calc(100% - var(--row-height,56px) * 2 - var(--row-height,56px) * var(--number-subButtons,1)); + --gap-to-edge: 7px; display: grid; gap: 4px; grid-template-areas: @@ -208,6 +208,12 @@ export default ` align-self: center; align-items: center; } + .large.bubble-empty-sub-buttons .bubble-select-card{ + grid-template-rows: 1fr 0; + align-content: center; + } + + .large .bubble-select-card-container { height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )); @@ -239,7 +245,8 @@ export default ` justify-content: flex-start; grid-area: n; overflow: hidden; - max-width: 100% !important; + margin: 0px; + max-width: calc(100% - 2 * var(--gap-to-edge,7px)); } .large .bubble-select-card .bubble-sub-button-container { @@ -248,22 +255,21 @@ export default ` height: 36px; flex-wrap: wrap-reverse; row-gap: 4px; - align-content: end; - justify-self: end; - right: 0px; + align-self: center; + align-content: center; } + .large .bubble-select-card .bubble-sub-button-container.expanded { - max-height: calc(100%); - height: auto !important; + max-height: 100%; + height: auto; grid-area: b; - #overflow: hidden; #have to disable for subbutton functions. flex-wrap: wrap; + justify-self: center; + align-self: center; + justify-content: center; align-content: start; - align-self: end; justify-items: center; - justify-content: end; - justify-self: center; padding-bottom: 7px; } @@ -274,6 +280,7 @@ export default ` grid-template-columns: repeat(2, min-content); grid-template-rows: repeat(2, 1fr); grid-auto-flow: column; + align-self: center; width: auto; } From 632442d2822922969fa31694b3e0b0d95e3e31fa Mon Sep 17 00:00:00 2001 From: MrBearPresident Date: Sun, 8 Dec 2024 21:23:31 +0100 Subject: [PATCH 06/16] Add extra class to the card when there are no-sub-buttons --- src/tools/global-changes.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/tools/global-changes.ts b/src/tools/global-changes.ts index a5caef06..4268ad87 100644 --- a/src/tools/global-changes.ts +++ b/src/tools/global-changes.ts @@ -147,6 +147,7 @@ export function changeSubButtonState(context, container = context.content, appen const subButtons = context.config.sub_button; const numberOfRows = !context.config.grid_options ? 1 :context.config.grid_options.rows; const largeFormat = numberOfRows> 1 &&(context.config.card_layout === 'large' || context.config.card_layout === 'large-2-rows') + if (!subButtons || subButtons.length < 1) container.classList.add("bubble-empty-sub-buttons"); if (!subButtons) return; let number_of_subButtons = subButtons.length; From 5f6e457ecb1daf4aceac46eb6ea91a6d62099318 Mon Sep 17 00:00:00 2001 From: MrBearPresident Date: Sun, 8 Dec 2024 21:30:48 +0100 Subject: [PATCH 07/16] Limit width in multi-row mode --- src/cards/button/styles.ts | 1 + src/cards/climate/styles.ts | 1 + src/cards/cover/styles.ts | 1 + src/cards/media-player/styles.ts | 1 + src/cards/select/styles.ts | 1 + 5 files changed, 5 insertions(+) diff --git a/src/cards/button/styles.ts b/src/cards/button/styles.ts index 8daa512b..399a11c1 100644 --- a/src/cards/button/styles.ts +++ b/src/cards/button/styles.ts @@ -207,6 +207,7 @@ export default ` .large .bubble-button-card .bubble-sub-button-container.expanded { max-height: 100%; height: auto; + max-width: calc(100% - 2 * var(--gap-to-edge,7px)); grid-area: b; flex-wrap: wrap; justify-self: center; diff --git a/src/cards/climate/styles.ts b/src/cards/climate/styles.ts index b66918e2..dbed25d8 100644 --- a/src/cards/climate/styles.ts +++ b/src/cards/climate/styles.ts @@ -287,6 +287,7 @@ export default ` .large .bubble-climate .bubble-sub-button-container.expanded { max-height: 100%; height: auto; + max-width: calc(100% - 2 * var(--gap-to-edge,7px)); grid-area: b; flex-wrap: wrap; justify-self: center; diff --git a/src/cards/cover/styles.ts b/src/cards/cover/styles.ts index 052107af..31607056 100644 --- a/src/cards/cover/styles.ts +++ b/src/cards/cover/styles.ts @@ -170,6 +170,7 @@ export default ` .large.bubble-multi-row .bubble-cover-card-container .bubble-sub-button-container { max-height: 100%; height: auto; + max-width: calc(100% - 2 * var(--gap-to-edge,7px)); grid-area: b; flex-wrap: wrap; justify-self: center; diff --git a/src/cards/media-player/styles.ts b/src/cards/media-player/styles.ts index 2dda0490..2b75d4e0 100644 --- a/src/cards/media-player/styles.ts +++ b/src/cards/media-player/styles.ts @@ -378,6 +378,7 @@ export default ` .large.bubble-multi-row .bubble-media-player-container .bubble-sub-button-container { max-height: 100%; height: auto; + max-width: calc(100% - 2 * var(--gap-to-edge,7px)); grid-area: b; flex-wrap: wrap; justify-self: center; diff --git a/src/cards/select/styles.ts b/src/cards/select/styles.ts index 465d8191..0e43ab33 100644 --- a/src/cards/select/styles.ts +++ b/src/cards/select/styles.ts @@ -263,6 +263,7 @@ export default ` .large .bubble-select-card .bubble-sub-button-container.expanded { max-height: 100%; height: auto; + max-width: calc(100% - 2 * var(--gap-to-edge,7px)); grid-area: b; flex-wrap: wrap; justify-self: center; From 8f8e878e31fcd35f021c6eb9404ee513e8e4f9f7 Mon Sep 17 00:00:00 2001 From: MrBearPresident Date: Sun, 8 Dec 2024 21:43:44 +0100 Subject: [PATCH 08/16] Resolve issue with the dropdown containers for sub-buttons --- src/cards/button/styles.ts | 4 ---- src/cards/climate/styles.ts | 4 ---- src/cards/cover/styles.ts | 4 ---- src/cards/select/styles.ts | 6 +----- 4 files changed, 1 insertion(+), 17 deletions(-) diff --git a/src/cards/button/styles.ts b/src/cards/button/styles.ts index 399a11c1..59f7dae1 100644 --- a/src/cards/button/styles.ts +++ b/src/cards/button/styles.ts @@ -182,10 +182,6 @@ export default ` margin-left: 6px; } - .large .bubble-button-card .bubble-sub-button .bubble-dropdown-container{ - display: flex !important; - } - .large .bubble-button-card .bubble-name-container { justify-content: flex-start; grid-area: n; diff --git a/src/cards/climate/styles.ts b/src/cards/climate/styles.ts index dbed25d8..d04937fe 100644 --- a/src/cards/climate/styles.ts +++ b/src/cards/climate/styles.ts @@ -262,10 +262,6 @@ export default ` justify-self: center; } - .large .bubble-climate .bubble-sub-button .bubble-dropdown-container{ - display: flex; - } - .large .bubble-climate .bubble-name-container { justify-content: flex-start; grid-area: n; diff --git a/src/cards/cover/styles.ts b/src/cards/cover/styles.ts index 31607056..a3c358f7 100644 --- a/src/cards/cover/styles.ts +++ b/src/cards/cover/styles.ts @@ -181,10 +181,6 @@ export default ` padding-bottom: 7px; } - .large .bubble-cover-card-container .bubble-sub-button .bubble-dropdown-container{ - display: flex !important; - } - .rows-2 .bubble-cover-card-container .bubble-sub-button-container { flex-direction: column; gap: 4px !important; diff --git a/src/cards/select/styles.ts b/src/cards/select/styles.ts index 0e43ab33..43bf6c54 100644 --- a/src/cards/select/styles.ts +++ b/src/cards/select/styles.ts @@ -228,7 +228,7 @@ export default ` margin-left: 6px; } - .large .bubble-select-card .bubble-dropdown-container{ + .large .bubble-select-card > .bubble-dropdown-container{ grid-area: a; display: contents !important; } @@ -237,10 +237,6 @@ export default ` grid-area: a; } - .large .bubble-select-card .bubble-sub-button .bubble-dropdown-container{ - display: flex; - } - .large .bubble-select-card .bubble-name-container { justify-content: flex-start; grid-area: n; From 2d5be41f480e326660ff09c4de6750f25799d3e3 Mon Sep 17 00:00:00 2001 From: MrBearPresident Date: Tue, 10 Dec 2024 04:21:48 +0100 Subject: [PATCH 09/16] Fix height problem for non-section view --- src/cards/button/styles.ts | 2 +- src/cards/climate/styles.ts | 2 +- src/cards/cover/styles.ts | 2 +- src/cards/media-player/styles.ts | 2 +- src/cards/pop-up/styles.ts | 2 +- src/cards/select/styles.ts | 2 +- src/cards/separator/styles.ts | 2 +- 7 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/cards/button/styles.ts b/src/cards/button/styles.ts index 59f7dae1..fa305010 100644 --- a/src/cards/button/styles.ts +++ b/src/cards/button/styles.ts @@ -170,7 +170,7 @@ export default ` .large .bubble-button-card-container { - height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )); + height: calc( var(--row-height,56px) * var(--row-size,1) + var(--row-gap,8px) * ( var(--row-size,1) - 1 )); border-radius: var(--bubble-button-border-radius, var(--bubble-border-radius, 32px)); } diff --git a/src/cards/climate/styles.ts b/src/cards/climate/styles.ts index d04937fe..2022e4a8 100644 --- a/src/cards/climate/styles.ts +++ b/src/cards/climate/styles.ts @@ -238,7 +238,7 @@ export default ` } .large .bubble-climate-container { - height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * (var(--row-size) - 1 )); + height: calc( var(--row-height,56px) * var(--row-size,1) + var(--row-gap,8px) * ( var(--row-size,1) - 1 )); border-radius: var(--bubble-select-border-radius, var(--bubble-border-radius, 32px)); } diff --git a/src/cards/cover/styles.ts b/src/cards/cover/styles.ts index a3c358f7..ba0aa91d 100644 --- a/src/cards/cover/styles.ts +++ b/src/cards/cover/styles.ts @@ -97,7 +97,7 @@ export default ` } .large .bubble-cover-card-container { - height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )); + height: calc( var(--row-height,56px) * var(--row-size,1) + var(--row-gap,8px) * ( var(--row-size,1) - 1 )); background: var(--bubble-cover-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color)))); border-radius: var(--bubble-cover-border-radius, var(--bubble-border-radius, 32px)); diff --git a/src/cards/media-player/styles.ts b/src/cards/media-player/styles.ts index 2b75d4e0..a28c169f 100644 --- a/src/cards/media-player/styles.ts +++ b/src/cards/media-player/styles.ts @@ -275,7 +275,7 @@ export default ` .large .bubble-media-player-container{ display: flex; - height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )); + height: calc( var(--row-height,56px) * var(--row-size,1) + var(--row-gap,8px) * ( var(--row-size,1) - 1 )); } .large .bubble-media-player{ diff --git a/src/cards/pop-up/styles.ts b/src/cards/pop-up/styles.ts index e646466e..2435b833 100644 --- a/src/cards/pop-up/styles.ts +++ b/src/cards/pop-up/styles.ts @@ -180,7 +180,7 @@ export default ` margin-left: 8px; } .large .bubble-close-button { - height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )); + height: calc( var(--row-height,56px) * var(--row-size,1) + var(--row-gap,8px) * ( var(--row-size,1) - 1 )); width: 56px; border: none; border-radius: var(--bubble-pop-up-border-radius, var(--bubble-border-radius, 42px)); diff --git a/src/cards/select/styles.ts b/src/cards/select/styles.ts index 43bf6c54..15badd13 100644 --- a/src/cards/select/styles.ts +++ b/src/cards/select/styles.ts @@ -216,7 +216,7 @@ export default ` .large .bubble-select-card-container { - height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )); + height: calc( var(--row-height,56px) * var(--row-size,1) + var(--row-gap,8px) * ( var(--row-size,1) - 1 )); border-radius: var(--bubble-select-border-radius, var(--bubble-border-radius, 32px)); } diff --git a/src/cards/separator/styles.ts b/src/cards/separator/styles.ts index 6407b7f7..1fc98d0c 100644 --- a/src/cards/separator/styles.ts +++ b/src/cards/separator/styles.ts @@ -36,7 +36,7 @@ export default ` } .large .bubble-separator { - height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )); + height: calc( var(--row-height,56px) * var(--row-size,1) + var(--row-gap,8px) * ( var(--row-size,1) - 1 )); } .rows-2 .bubble-sub-button-container { From f1c0ae5b8f4226e5b0616c237ad9d41cc5c7f965 Mon Sep 17 00:00:00 2001 From: MrBearPresident Date: Wed, 11 Dec 2024 09:18:09 +0100 Subject: [PATCH 10/16] Fix rounded corners -> Border radius now correlated to row-heigh/2 --- src/cards/button/styles.ts | 7 +++---- src/cards/climate/styles.ts | 7 +++---- src/cards/cover/styles.ts | 1 - src/cards/media-player/styles.ts | 10 ++++------ src/cards/select/styles.ts | 5 ++--- 5 files changed, 12 insertions(+), 18 deletions(-) diff --git a/src/cards/button/styles.ts b/src/cards/button/styles.ts index fa305010..5555e133 100644 --- a/src/cards/button/styles.ts +++ b/src/cards/button/styles.ts @@ -21,7 +21,7 @@ export default ` width: 100%; height: 50px; background-color: var(--bubble-button-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color)))); - border-radius: var(--bubble-button-border-radius, var(--bubble-border-radius, 32px)); + border-radius: var(--bubble-button-border-radius, var(--bubble-border-radius, calc(var(--row-height,56px)/2))); overflow: scroll; touch-action: pan-y; } @@ -40,7 +40,7 @@ export default ` .bubble-button-background { background-color: var(--bubble-button-background-color); opacity: .5; - border-radius: var(--bubble-button-border-radius, var(--bubble-border-radius, 32px)); + border-radius: inherit; } .bubble-range-fill { position: absolute; @@ -64,7 +64,7 @@ export default ` } .bubble-range-slider { cursor: ew-resize; - border-radius: var(--bubble-button-border-radius, var(--bubble-border-radius, 32px)); + border-radius: inherit); overflow: hidden; mask-image: radial-gradient(white, black); -webkit-mask-image: -webkit-radial-gradient(white, black); @@ -171,7 +171,6 @@ export default ` .large .bubble-button-card-container { height: calc( var(--row-height,56px) * var(--row-size,1) + var(--row-gap,8px) * ( var(--row-size,1) - 1 )); - border-radius: var(--bubble-button-border-radius, var(--bubble-border-radius, 32px)); } .large .bubble-button-card .bubble-icon-container { diff --git a/src/cards/climate/styles.ts b/src/cards/climate/styles.ts index 2022e4a8..d7270358 100644 --- a/src/cards/climate/styles.ts +++ b/src/cards/climate/styles.ts @@ -17,7 +17,7 @@ export default ` width: 100%; height: 50px; background-color: var(--bubble-climate-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color)))); - border-radius: var(--bubble-climate-border-radius, var(--bubble-border-radius, 32px)); + border-radius: var(--bubble-button-border-radius, var(--bubble-border-radius, calc(var(--row-height,56px)/2))); overflow: visible; touch-action: pan-y; } @@ -96,7 +96,7 @@ export default ` width: 100%; height: 100%; position: absolute; - border-radius: var(--bubble-sub-button-border-radius, var(--bubble-border-radius, 32px)); + border-radius: var(--bubble-sub-button-border-radius, var(--bubble-border-radius, 50%)); overflow: hidden; pointer-events: none; } @@ -117,7 +117,7 @@ export default ` width: 100%; height: 100%; position: absolute; - border-radius: var(--bubble-climate-border-radius, var(--bubble-border-radius, 32px)); + border-radius: inherit; opacity: 0.7; transition: background-color 2s ease; } @@ -239,7 +239,6 @@ export default ` .large .bubble-climate-container { height: calc( var(--row-height,56px) * var(--row-size,1) + var(--row-gap,8px) * ( var(--row-size,1) - 1 )); - border-radius: var(--bubble-select-border-radius, var(--bubble-border-radius, 32px)); } .large .bubble-climate .bubble-icon-container { diff --git a/src/cards/cover/styles.ts b/src/cards/cover/styles.ts index ba0aa91d..deca0f68 100644 --- a/src/cards/cover/styles.ts +++ b/src/cards/cover/styles.ts @@ -99,7 +99,6 @@ export default ` .large .bubble-cover-card-container { height: calc( var(--row-height,56px) * var(--row-size,1) + var(--row-gap,8px) * ( var(--row-size,1) - 1 )); background: var(--bubble-cover-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color)))); - border-radius: var(--bubble-cover-border-radius, var(--bubble-border-radius, 32px)); --line-height: 18px; diff --git a/src/cards/media-player/styles.ts b/src/cards/media-player/styles.ts index a28c169f..7666a76a 100644 --- a/src/cards/media-player/styles.ts +++ b/src/cards/media-player/styles.ts @@ -19,7 +19,7 @@ export default ` height: 50px; background-color: var(--bubble-media-player-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color)))); touch-action: pan-y; - border-radius: var(--bubble-media-player-border-radius, var(--bubble-border-radius, 32px)); + border-radius: var(--bubble-button-border-radius, var(--bubble-border-radius, calc(var(--row-height,56px)/2))); } .bubble-media-player { @@ -49,7 +49,7 @@ export default ` background: none; border: none; cursor: pointer; - border-radius: var(--bubble-media-player-buttons-border-radius, var(--bubble-border-radius, 32px)); + border-radius: var(--bubble-media-player-buttons-border-radius, var(--bubble-border-radius, 50%)); padding: 6px; height: 24px; width: 24px; @@ -67,7 +67,7 @@ export default ` height: 38px; left: 50px; overflow: hidden; - border-radius: var(--bubble-media-player-border-radius, var(--bubble-border-radius, 32px)); + border-radius: var(--bubble-media-player-border-radius, var(--bubble-border-radius, 50%)); z-index: 1; background-color: var(--bubble-media-player-slider-background-color, var(--bubble-icon-background-color, var(--bubble-secondary-background-color, var(--card-background-color, var(--ha-card-background))))); opacity: 1; @@ -234,7 +234,7 @@ export default ` position: absolute; height: 100%; width: 100%; - border-radius: var(--bubble-media-player-border-radius, var(--bubble-border-radius, 32px)); + border-radius: inherit; overflow: hidden; } @@ -287,7 +287,6 @@ export default ` 'i n c a1 a2 a3 a4 a5' 'b b b b b b b b' !important; grid-template-columns: var(--row-height,56px) 1fr auto auto auto auto auto auto; grid-template-rows: var(--row-height,56px) 1fr; - border-radius: var(--bubble-media-player-border-radius, var(--bubble-border-radius, 32px)); justify-self: start; justify-items: start; align-self: center; @@ -340,7 +339,6 @@ export default ` .large .bubble-media-player-container .bubble-volume-slider { height: 80%; - border-radius: var(--bubble-media-player-border-radius, var(--bubble-border-radius, 32px)); position: relative; left: 0px; width: calc(100%); diff --git a/src/cards/select/styles.ts b/src/cards/select/styles.ts index 15badd13..75bcd3fa 100644 --- a/src/cards/select/styles.ts +++ b/src/cards/select/styles.ts @@ -81,7 +81,7 @@ export default ` width: 100%; height: 50px; background-color: var(--bubble-select-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color)))); - border-radius: var(--bubble-select-border-radius, var(--bubble-border-radius, 32px)); + border-radius: var(--bubble-button-border-radius, var(--bubble-border-radius, calc(var(--row-height,56px)/2))); touch-action: pan-y; box-sizing: border-box; border: solid 2px transparent; @@ -102,7 +102,7 @@ export default ` background-color: var(--bubble-select-background-color); opacity: .5; overflow: hidden !important; - border-radius: var(--bubble-select-border-radius, var(--bubble-border-radius, 32px)); + border-radius: inherit; } .is-unavailable .bubble-select-card { cursor: not-allowed; @@ -217,7 +217,6 @@ export default ` .large .bubble-select-card-container { height: calc( var(--row-height,56px) * var(--row-size,1) + var(--row-gap,8px) * ( var(--row-size,1) - 1 )); - border-radius: var(--bubble-select-border-radius, var(--bubble-border-radius, 32px)); } .large .bubble-select-card .bubble-icon-container { From 94ed9ecdcb1e8cdceb0b3610426959771113b21b Mon Sep 17 00:00:00 2001 From: MrBearPresident Date: Wed, 11 Dec 2024 09:54:35 +0100 Subject: [PATCH 11/16] Fix roundness of icons --- src/cards/button/styles.ts | 9 +++++---- src/cards/climate/styles.ts | 6 +++--- src/cards/cover/styles.ts | 6 +++--- src/cards/media-player/styles.ts | 6 +++--- src/cards/select/styles.ts | 8 ++++---- 5 files changed, 18 insertions(+), 17 deletions(-) diff --git a/src/cards/button/styles.ts b/src/cards/button/styles.ts index 5555e133..bdf4e79d 100644 --- a/src/cards/button/styles.ts +++ b/src/cards/button/styles.ts @@ -25,6 +25,7 @@ export default ` overflow: scroll; touch-action: pan-y; } + .bubble-button-card, .bubble-range-slider, @@ -79,7 +80,7 @@ export default ` margin: 6px; border-radius: var(--bubble-button-icon-border-radius, var(--bubble-icon-border-radius, var(--bubble-border-radius, 50%))); background-color: var(--bubble-button-icon-background-color, var(--bubble-icon-background-color, var(--bubble-secondary-background-color, var(--card-background-color, var(--ha-card-background))))); - #overflow: hidden; #have to disable for subbutton functions. + overflow: hidden; position: relative; cursor: pointer; } @@ -175,10 +176,10 @@ export default ` .large .bubble-button-card .bubble-icon-container { --mdc-icon-size: 24px; - min-width: 42px !important; - max-height: 42px !important; + width: calc(var(--row-height,56px) - 14px); + height: calc(var(--row-height,56px) - 14px); grid-area: i; - margin-left: 6px; + margin: 7px; } .large .bubble-button-card .bubble-name-container { diff --git a/src/cards/climate/styles.ts b/src/cards/climate/styles.ts index d7270358..b41b8827 100644 --- a/src/cards/climate/styles.ts +++ b/src/cards/climate/styles.ts @@ -243,10 +243,10 @@ export default ` .large .bubble-climate .bubble-icon-container { --mdc-icon-size: 24px; - min-width: 42px !important; - max-height: 42px !important; + width: calc(var(--row-height,56px) - 14px); + height: calc(var(--row-height,56px) - 14px); grid-area: i; - margin-left: 6px; + margin: 7px; } .large .bubble-climate .bubble-button-container{ diff --git a/src/cards/cover/styles.ts b/src/cards/cover/styles.ts index deca0f68..734483fa 100644 --- a/src/cards/cover/styles.ts +++ b/src/cards/cover/styles.ts @@ -132,10 +132,10 @@ export default ` .large .bubble-cover-card-container .bubble-header .bubble-icon-container { --mdc-icon-size: 24px; - min-width: 42px !important; - min-height: 42px !important; + width: calc(var(--row-height,56px) - 14px); + height: calc(var(--row-height,56px) - 14px); grid-area: i; - margin-left: 6px; + margin: 7px; } .large .bubble-cover-card-container .bubble-buttons { diff --git a/src/cards/media-player/styles.ts b/src/cards/media-player/styles.ts index 7666a76a..b9f822e1 100644 --- a/src/cards/media-player/styles.ts +++ b/src/cards/media-player/styles.ts @@ -299,10 +299,10 @@ export default ` .large .bubble-media-player-container .bubble-icon-container { --mdc-icon-size: 24px; - min-width: 42px !important; - height: 42px !important; + width: calc(var(--row-height,56px) - 14px); + height: calc(var(--row-height,56px) - 14px); grid-area: i; - margin-left: 6px; + margin: 7px; } .large .bubble-media-player-container .bubble-button-container{ diff --git a/src/cards/select/styles.ts b/src/cards/select/styles.ts index 75bcd3fa..b54feb3c 100644 --- a/src/cards/select/styles.ts +++ b/src/cards/select/styles.ts @@ -202,7 +202,7 @@ export default ` grid-template-areas: 'i n c a' 'b b b b' !important; grid-template-columns: var(--row-height,56px) 1fr auto auto; - grid-template-rows: var(--row-height,56px) 1fr; + grid-template-rows: calc(var(--row-height,56px) - 4px) 1fr; # -4px for border thickness justify-self: start; justify-items: start; align-self: center; @@ -221,10 +221,10 @@ export default ` .large .bubble-select-card .bubble-icon-container { --mdc-icon-size: 24px; - min-width: 42px !important; - max-height: 42px !important; + width: calc(var(--row-height,56px) - 2 * var(--gap-to-edge,7px)); + height: calc(var(--row-height,56px) - 2 * var(--gap-to-edge,7px)); grid-area: i; - margin-left: 6px; + margin: calc(var(--gap-to-edge,7px) - 2px); } .large .bubble-select-card > .bubble-dropdown-container{ From 5f8b83d1d2e273cba933496adfa29afc948c2e7e Mon Sep 17 00:00:00 2001 From: MrBearPresident Date: Wed, 11 Dec 2024 21:41:45 +0100 Subject: [PATCH 12/16] Fix bubble-cover-card border-radius missing --- src/cards/cover/styles.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/cards/cover/styles.ts b/src/cards/cover/styles.ts index 734483fa..f98d02a6 100644 --- a/src/cards/cover/styles.ts +++ b/src/cards/cover/styles.ts @@ -11,6 +11,7 @@ export default ` display: grid; gap: 10px; overflow: hidden; + border-radius: var(--bubble-button-border-radius, var(--bubble-border-radius, calc(var(--row-height,56px)/2))); } .bubble-header { From 0aed22b7c23867cbc84e13eb5b260e4b7630fc36 Mon Sep 17 00:00:00 2001 From: MrBearPresident Date: Wed, 11 Dec 2024 23:24:47 +0100 Subject: [PATCH 13/16] create alternative layout for medie-player and climate card --- src/cards/climate/styles.ts | 29 ++++++++++++++++++++++++++--- src/cards/media-player/changes.ts | 9 +++++---- src/cards/media-player/styles.ts | 23 ++++++++++++++++++++++- src/editor/bubble-card-editor.ts | 14 ++++++++++++++ src/tools/global-changes.ts | 7 +++++-- src/tools/utils.ts | 4 ++++ 6 files changed, 76 insertions(+), 10 deletions(-) diff --git a/src/cards/climate/styles.ts b/src/cards/climate/styles.ts index b41b8827..fabd09b6 100644 --- a/src/cards/climate/styles.ts +++ b/src/cards/climate/styles.ts @@ -253,12 +253,30 @@ export default ` grid-area: a; display: contents !important; } + + + .large.AlternativeLayout.bubble-multi-row .bubble-climate .bubble-button-container { + grid-area: b; + height: calc(100% - 7px); + width: 100%; + display: flex !important; + row-gap: 4px; + flex-wrap: wrap; + align-self: center; + justify-self: center; + justify-content: center; + align-items: center; + justify-items: center; + padding-bottom: 7px; + overflow: hidden; + } .large .bubble-climate .bubble-temperature-container{ grid-area: a; - height: calc(100% - 20px); - width: calc(100% - 2 * var(--gap-to-edge,7)); + height: calc(var(--row-height,56px) - 20px); + width: auto; justify-self: center; + } .large .bubble-climate .bubble-name-container { @@ -266,7 +284,7 @@ export default ` grid-area: n; overflow: hidden; margin: 0px; - max-width: calc(100% - 2 * var(--gap-to-edge,7px)); + max-width: 100%; } .large .bubble-climate .bubble-sub-button-container { @@ -293,6 +311,11 @@ export default ` padding-bottom: 7px; } + .large.AlternativeLayout.bubble-multi-row .bubble-climate .bubble-sub-button-container{ + padding-bottom: 0px; + display: contents; + } + .rows-2 .bubble-climate .bubble-sub-button-container { flex-direction: column; gap: 4px !important; diff --git a/src/cards/media-player/changes.ts b/src/cards/media-player/changes.ts index 55c78156..34a2c43a 100644 --- a/src/cards/media-player/changes.ts +++ b/src/cards/media-player/changes.ts @@ -168,10 +168,11 @@ export function changeVolumeIcon(context) { context.elements.volumeButton.setAttribute("icon", newIcon); context.elements.mediaInfoContainer.style.opacity = newOpacity; context.elements.nameContainer.style.opacity = newOpacity; - if(context.elements.subButtonContainer)context.elements.subButtonContainer.style.opacity = newOpacity; - context.elements.previousButton.style.opacity = newOpacity; - context.elements.nextButton.style.opacity = newOpacity; - context.elements.powerButton.style.opacity = newOpacity; + console.log('yey'); + if(context.elements.subButtonContainer && !context.content.classList.contains('bubble-multi-row'))context.elements.subButtonContainer.style.opacity = newOpacity; + if(!context.content.classList.contains('AlternativeLayout') || !context.content.classList.contains('bubble-multi-row'))context.elements.previousButton.style.opacity = newOpacity; + if(!context.content.classList.contains('AlternativeLayout') || !context.content.classList.contains('bubble-multi-row'))context.elements.nextButton.style.opacity = newOpacity; + if(!context.content.classList.contains('AlternativeLayout') || !context.content.classList.contains('bubble-multi-row'))context.elements.powerButton.style.opacity = newOpacity; context.elements.volumeButton.isHidden = !isHidden; } diff --git a/src/cards/media-player/styles.ts b/src/cards/media-player/styles.ts index b9f822e1..b10ea200 100644 --- a/src/cards/media-player/styles.ts +++ b/src/cards/media-player/styles.ts @@ -67,7 +67,7 @@ export default ` height: 38px; left: 50px; overflow: hidden; - border-radius: var(--bubble-media-player-border-radius, var(--bubble-border-radius, 50%)); + border-radius: var(--bubble-media-player-border-radius, calc(var(--row-height,56px)/2)); z-index: 1; background-color: var(--bubble-media-player-slider-background-color, var(--bubble-icon-background-color, var(--bubble-secondary-background-color, var(--card-background-color, var(--ha-card-background))))); opacity: 1; @@ -309,6 +309,22 @@ export default ` grid-area: a1; display: contents; } + + .large.AlternativeLayout.bubble-multi-row .bubble-media-player-container .bubble-button-container { + grid-area: b; + height: calc(100% - 7px); + width: 100%; + display: flex !important; + row-gap: 4px; + flex-wrap: wrap; + align-self: center; + justify-self: center; + justify-content: center; + align-items: center; + justify-items: center; + padding-bottom: 7px; + overflow: hidden; + } .large .bubble-media-player-container .bubble-power-button{ grid-area: a1; @@ -385,6 +401,11 @@ export default ` align-content: start; justify-items: center; padding-bottom: 7px; + } + + .large.AlternativeLayout.bubble-multi-row .bubble-media-player-container .bubble-sub-button-container{ + padding-bottom: 0px; + display: contents; } .rows-2 .bubble-media-player-container .bubble-sub-button-container { diff --git a/src/editor/bubble-card-editor.ts b/src/editor/bubble-card-editor.ts index 08351ab9..feeb2844 100644 --- a/src/editor/bubble-card-editor.ts +++ b/src/editor/bubble-card-editor.ts @@ -1388,6 +1388,20 @@ export function createBubbleCardEditor() { .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}" > + + + +
+ +
+ +

diff --git a/src/tools/global-changes.ts b/src/tools/global-changes.ts index 880a93f1..25edffec 100644 --- a/src/tools/global-changes.ts +++ b/src/tools/global-changes.ts @@ -146,7 +146,11 @@ export function changeSubButtonState(context, container = context.content, appen const subButtons = context.config.sub_button; const numberOfRows = !context.config.grid_options ? 1 :context.config.grid_options.rows; const largeFormat = numberOfRows> 1 &&(context.config.card_layout === 'large' || context.config.card_layout === 'large-2-rows') - if (!subButtons || subButtons.length < 1) container.classList.add("bubble-empty-sub-buttons"); + if ((!subButtons || subButtons.length < 1) && (context.config.AlternativeLayout ?? false) && context.config.card_type != 'climate' && context.config.card_type != 'media-player' ) { + container.classList.add("bubble-empty-sub-buttons"); + } + if(largeFormat) container.classList.add("bubble-multi-row"); + if (!subButtons) return; let number_of_subButtons = subButtons.length; @@ -188,7 +192,6 @@ export function changeSubButtonState(context, container = context.content, appen context.elements.subButtonContainer2 = subButtonContainer2; } subButtonContainer.classList.add("expanded"); - container.classList.add("bubble-multi-row") } // Process each subButton diff --git a/src/tools/utils.ts b/src/tools/utils.ts index 09cbfd76..98f3bccd 100644 --- a/src/tools/utils.ts +++ b/src/tools/utils.ts @@ -631,6 +631,7 @@ export function setLayout(context) { const layoutClass = context.config.card_layout; const needsLarge = layoutClass === 'large' || layoutClass === 'large-2-rows'; const needsRows2 = layoutClass === 'large-2-rows'; + const needAlternativeLayout = (context.config.AlternativeLayout ?? false) && needsLarge; if (needsLarge !== context.content.classList.contains('large')) { context.content.classList.toggle('large', needsLarge); @@ -638,6 +639,9 @@ export function setLayout(context) { if (needsRows2 !== context.content.classList.contains('rows-2')) { context.content.classList.toggle('rows-2', needsRows2); } + if (needAlternativeLayout !== context.content.classList.contains('AlternativeLayout')) { + context.content.classList.toggle('AlternativeLayout', needAlternativeLayout); + } } export function throttle(mainFunction, delay = 300) { From 2e9aacecdc9c1ffc5ec5371642bfcce74a0842f2 Mon Sep 17 00:00:00 2001 From: MrBearPresident Date: Thu, 12 Dec 2024 09:10:18 +0100 Subject: [PATCH 14/16] =?UTF-8?q?=E2=80=A2=20Add=20margin=20to=20right=20o?= =?UTF-8?q?f=20the=20temperature-button=20=E2=80=A2=20Solve=20Centring=20w?= =?UTF-8?q?hen=20no=20sub-buttons=20are=20involved=20=E2=80=A2=20Add=20wid?= =?UTF-8?q?th=20properties=20for=20alternative=20design=20that=20are=20cal?= =?UTF-8?q?culated=20=E2=80=A2=20Remove=20hidden=20overflow=20so=20select?= =?UTF-8?q?=20sub-buttons=20work.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/cards/climate/styles.ts | 11 +++++++---- src/cards/media-player/styles.ts | 4 ++-- src/tools/global-changes.ts | 2 +- 3 files changed, 10 insertions(+), 7 deletions(-) diff --git a/src/cards/climate/styles.ts b/src/cards/climate/styles.ts index fabd09b6..bcc91ec6 100644 --- a/src/cards/climate/styles.ts +++ b/src/cards/climate/styles.ts @@ -232,7 +232,7 @@ export default ` align-self: center; align-items: center; } - .large.bubble-empty-sub-buttons .bubble-media-player{ + .large.bubble-empty-sub-buttons .bubble-climate{ grid-template-rows: 1fr 0; align-content: center; } @@ -258,7 +258,7 @@ export default ` .large.AlternativeLayout.bubble-multi-row .bubble-climate .bubble-button-container { grid-area: b; height: calc(100% - 7px); - width: 100%; + width: calc(100% - 2 * var(--gap-to-edge,7px)); display: flex !important; row-gap: 4px; flex-wrap: wrap; @@ -268,7 +268,7 @@ export default ` align-items: center; justify-items: center; padding-bottom: 7px; - overflow: hidden; + margin-right: 0px; } .large .bubble-climate .bubble-temperature-container{ @@ -276,7 +276,10 @@ export default ` height: calc(var(--row-height,56px) - 20px); width: auto; justify-self: center; - + margin-right: var(--gap-to-edge,7px); + } + .large.AlternativeLayout .bubble-climate .bubble-temperature-container{ + margin-right: 0px; } .large .bubble-climate .bubble-name-container { diff --git a/src/cards/media-player/styles.ts b/src/cards/media-player/styles.ts index b10ea200..99b20a26 100644 --- a/src/cards/media-player/styles.ts +++ b/src/cards/media-player/styles.ts @@ -313,7 +313,7 @@ export default ` .large.AlternativeLayout.bubble-multi-row .bubble-media-player-container .bubble-button-container { grid-area: b; height: calc(100% - 7px); - width: 100%; + width: calc(100% - 2 * var(--gap-to-edge,7px)); display: flex !important; row-gap: 4px; flex-wrap: wrap; @@ -323,7 +323,7 @@ export default ` align-items: center; justify-items: center; padding-bottom: 7px; - overflow: hidden; + margin-right: 0px; } .large .bubble-media-player-container .bubble-power-button{ diff --git a/src/tools/global-changes.ts b/src/tools/global-changes.ts index 25edffec..5740286d 100644 --- a/src/tools/global-changes.ts +++ b/src/tools/global-changes.ts @@ -146,7 +146,7 @@ export function changeSubButtonState(context, container = context.content, appen const subButtons = context.config.sub_button; const numberOfRows = !context.config.grid_options ? 1 :context.config.grid_options.rows; const largeFormat = numberOfRows> 1 &&(context.config.card_layout === 'large' || context.config.card_layout === 'large-2-rows') - if ((!subButtons || subButtons.length < 1) && (context.config.AlternativeLayout ?? false) && context.config.card_type != 'climate' && context.config.card_type != 'media-player' ) { + if ((!subButtons || subButtons.length < 1) && (!(context.config.AlternativeLayout ?? false) || (context.config.card_type != 'climate' && context.config.card_type != 'media-player'))) { container.classList.add("bubble-empty-sub-buttons"); } if(largeFormat) container.classList.add("bubble-multi-row"); From daa7f1c18ff29176339a0c241dbc940f2c8f1ec8 Mon Sep 17 00:00:00 2001 From: MrBearPresident Date: Thu, 12 Dec 2024 11:51:30 +0100 Subject: [PATCH 15/16] Fix bubble-media-info-container not displaying correctly --- src/cards/media-player/styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/cards/media-player/styles.ts b/src/cards/media-player/styles.ts index 99b20a26..06fff737 100644 --- a/src/cards/media-player/styles.ts +++ b/src/cards/media-player/styles.ts @@ -370,7 +370,7 @@ export default ` height: 42px; } - .large .bubble-media-player-container .bubble-name-container { + .large .bubble-media-player-container .bubble-name-container,.bubble-media-info-container { justify-content: flex-start; grid-area: n; overflow: hidden; From 11bf244bdabc1b6a388e0bfbb2843e9f4c45ce56 Mon Sep 17 00:00:00 2001 From: MrBearPresident Date: Wed, 15 Jan 2025 10:55:42 +0100 Subject: [PATCH 16/16] Fix what was broken with the merge from main. --- src/tools/global-changes.ts | 74 +++++++++++-------------------------- 1 file changed, 22 insertions(+), 52 deletions(-) diff --git a/src/tools/global-changes.ts b/src/tools/global-changes.ts index b4cf7f3a..4fbf5af7 100644 --- a/src/tools/global-changes.ts +++ b/src/tools/global-changes.ts @@ -179,48 +179,18 @@ export function changeSubButtonState(context, container = context.content, appen subButtons.forEach((subButton, i) => { if (!subButton) return; - const index = i + 1; - const entity = subButton.entity ?? context.config.entity; - const state = context._hass.states[entity]; - const name = subButton.name ?? getAttribute(context, "friendly_name", entity) ?? ''; - const attributeType = subButton.attribute ?? ''; - const attribute = getAttribute(context, attributeType, entity); - const isOn = isStateOn(context, entity); - - if (attributeType === 'fan_modes' && attribute == null) { - const subButtonElement = context.elements[index] || createElement('div', 'bubble-sub-button bubble-sub-button-' + index); - subButtonElement.classList.add('hidden'); - return; - } - - const showName = subButton.show_name ?? false; - const showState = subButton.show_state ?? false; - const showAttribute = subButton.show_attribute ?? false; - const showLastChanged = (subButton.show_last_changed || subButton.show_last_updated) ?? false; - const showIcon = subButton.show_icon ?? true; - const showBackground = subButton.show_background ?? true; - const stateBackground = subButton.state_background ?? true; - const lightBackground = subButton.light_background ?? true; - const showArrow = subButton.show_arrow ?? true; - - const isSelect = entity?.startsWith("input_select") || entity?.startsWith("select") || subButton.select_attribute; - const icon = getIcon(context, subButton.entity, subButton.icon ?? ''); - - // Initialize or reuse subButtonElement - let subButtonElement = context.elements[index]; - - if (!subButtonElement || (isSelect && !subButtonElement.dropdownContainer)) { - // Store the current position of the subButtonElement - let positionIndex = -1; - if (subButtonElement) positionIndex = Array.prototype.indexOf.call(subButtonContainer.children, subButtonElement); - - if (subButtonElement) { - if (isSelect && !subButtonElement.dropdownContainer) { - if (subButtonContainer.contains(subButtonElement)) { - subButtonContainer.removeChild(subButtonElement); - subButtonElement = null; - } - } + const index = i + 1; + const entity = subButton.entity ?? context.config.entity; + const state = context._hass.states[entity]; + const name = subButton.name ?? getAttribute(context, "friendly_name", entity) ?? ''; + const attributeType = subButton.attribute ?? ''; + const attribute = getAttribute(context, attributeType, entity); + const isOn = isStateOn(context, entity); + + if (attributeType === 'fan_modes' && attribute == null) { + const subButtonElement = context.elements[index] || createElement('div', 'bubble-sub-button bubble-sub-button-' + index); + subButtonElement.classList.add('hidden'); + return; } const showName = subButton.show_name ?? false; @@ -423,19 +393,19 @@ export function changeSubButtonState(context, container = context.content, appen } } }); + } + context.previousValues.subButtons = subButtons.slice(); - context.previousValues.subButtons = subButtons.slice(); - - for (let i = previousSubButtons.length; i > 0; i--) { - if (i > subButtons.length) { - const element = context.elements[i]; - if (element) { - subButtonContainer.removeChild(element); - delete context.elements[i]; - } + for (let i = previousSubButtons.length; i > 0; i--) { + if (i > subButtons.length) { + const element = context.elements[i]; + if (element) { + subButtonContainer.removeChild(element); + delete context.elements[i]; } } - }); + } + // Update context.previousValues with current subButtons context.previousValues.subButtons = subButtons.slice();