Skip to content

Commit 287e841

Browse files
ClooosClooos
authored
Fixed various issues from v2.5.0-beta.8 + More
- [x] CHANGE: To avoid too many custom style breaks, I’ve made the reordering of the sub-buttons in a card with at least 2 rows optional, this is why there is now a new card layout named « Large with sub-buttons in a grid (Layout: min. 2 rows) ». This change should really improve compatibility with older custom styles and modules. #1350 - [x] Fixed an issue in the « Get state/attribute from other entities » module, now empty state/attributes are correctly removed. - [x] Fixed an issue where opening a pop-up was forcing the page to go back to the top - [x] Removed: Sub-button’s icon and label color is now changing based on the background color for better contrast and readability (will be re-added in a future release if needed) #1343 - [x] Fixed sub-buttons on a slider with « tap to slide » no longer work. #1358 - [x] Added the vibration feedback on all elements #1354 - [x] Added a visual feedback when the main icon is clicked or tapped - [x] Fixed slider tap actions that were not always triggered #1348 - [x] Improved slider responsiveness - [x] Sliders now show the correct value with the correct unit or measurement in all cases when sliding - [x] Fixed an issue where sub-buttons were not aligned correctly in a media player card when all buttons are hidden #1347 - [x] Fixed an issue where the dropdown was not always in front of some elements #1344 #1349 - [x] Icon not changing anymore in a select sub-button with a list containing icons (like for the climate card) #1339 - [x] Fixed the button’s editor that was broken in v2.5.0-beta.8 #1342 - [x] Fixed the size of the play button in a media player card when the card layout is « Normal »
1 parent ee8d890 commit 287e841

File tree

18 files changed

+473
-264
lines changed

18 files changed

+473
-264
lines changed

‎dist/bubble-card.js

+5-5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/bubble-card.js.gz

706 Bytes
Binary file not shown.

‎dist/bubble-modules.yaml

+3-2
Original file line numberDiff line numberDiff line change
@@ -191,7 +191,7 @@ get_state_attribute:
191191

192192
# Some informations about your module (this is shown in the editor)
193193
name: "Advanced example: Get state/attribute from other entities"
194-
version: "v1.1"
194+
version: "v1.2"
195195
creator: "Clooos"
196196
link: "https://github.com/Clooos/Bubble-Card"
197197

@@ -237,7 +237,8 @@ get_state_attribute:
237237
}
238238
return null;
239239
})
240-
.filter(value => value !== null); // Remove null values
240+
// Remove null values and empty strings or strings with only spaces
241+
.filter(value => value !== null && value !== "" && value.trim() !== "");
241242
242243
// Update the DOM element with the class 'bubble-state'
243244
// displaying values separated by ' • '

‎src/cards/button/editor.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@ export function renderButtonEditor(editor){
143143
</div>
144144
</ha-formfield>
145145
<ha-alert alert-type="info">By default, sliders are updated only on release. You can toggle this option to enable live updates while sliding.</ha-alert>
146-
${editor._config.entity.startsWith("light") ? html`
146+
${editor._config.entity?.startsWith("light") ? html`
147147
<hr>
148148
<ha-formfield>
149149
<ha-switch

‎src/cards/climate/create.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { createBaseStructure } from "../../components/base-card/index.js";
2-
import { addActions, addFeedback } from "../../tools/tap-actions.js";
3-
import { createElement, toggleEntity, getState, getAttribute, isStateOn, forwardHaptic } from "../../tools/utils.js";
2+
import { addFeedback } from "../../tools/tap-actions.js";
3+
import { createElement, getAttribute, forwardHaptic } from "../../tools/utils.js";
44
import styles from "./styles.css";
55

66
export function createStructure(context) {

‎src/cards/cover/create.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { createBaseStructure } from "../../components/base-card/index.js";
2-
import { addActions, addFeedback } from "../../tools/tap-actions.js";
32
import { createElement, forwardHaptic } from "../../tools/utils.js";
43
import styles from "./styles.css";
54

@@ -37,6 +36,7 @@ export function createStructure(context) {
3736
);
3837

3938
elements.buttonOpen.addEventListener('click', () => {
39+
forwardHaptic("selection");
4040
const openCover = context.config.open_service ?? 'cover.open_cover';
4141
const [domain, action] = openCover.split('.');
4242
context._hass.callService(domain, action, {
@@ -45,6 +45,7 @@ export function createStructure(context) {
4545
});
4646

4747
elements.buttonStop.addEventListener('click', () => {
48+
forwardHaptic("selection");
4849
const stopCover = context.config.stop_service ?? 'cover.stop_cover';
4950
const [domain, action] = stopCover.split('.');
5051
context._hass.callService(domain, action, {
@@ -53,6 +54,7 @@ export function createStructure(context) {
5354
});
5455

5556
elements.buttonClose.addEventListener('click', () => {
57+
forwardHaptic("selection");
5658
const closeCover = context.config.close_service ?? 'cover.close_cover';
5759
const [domain, action] = closeCover.split('.');
5860
context._hass.callService(domain, action, {

‎src/cards/media-player/changes.js

+30-16
Original file line numberDiff line numberDiff line change
@@ -124,33 +124,47 @@ export function changeStyle(context) {
124124
const state = getState(context);
125125
const isOn = state !== "off" && state !== "unknown";
126126

127+
// Vérifier si tous les boutons sont configurés pour être cachés
128+
const allButtonsHidden = context.config.hide?.power_button &&
129+
context.config.hide?.previous_button &&
130+
context.config.hide?.next_button &&
131+
context.config.hide?.volume_button &&
132+
context.config.hide?.play_pause_button;
133+
134+
// Masquer ou afficher le conteneur de boutons
135+
if (allButtonsHidden && context.elements.buttonsContainer.style.display !== 'none') {
136+
context.elements.buttonsContainer.classList.add('hidden');
137+
} else if (!allButtonsHidden && context.elements.buttonsContainer.classList.contains('hidden')) {
138+
context.elements.buttonsContainer.classList.remove('hidden');
139+
}
140+
127141
if (context.config.hide?.power_button && context.elements.powerButton.style.display !== 'none') {
128-
context.elements.powerButton.style.display = 'none';
129-
} else if (!context.config.hide?.power_button && context.elements.powerButton.style.display === 'none') {
130-
context.elements.powerButton.style.display = '';
142+
context.elements.powerButton.classList.add('hidden');
143+
} else if (!context.config.hide?.power_button && context.elements.powerButton.classList.contains('hidden')) {
144+
context.elements.powerButton.classList.remove('hidden');
131145
}
132146

133147
if ((context.config.hide?.previous_button || (!context.editor && !isOn)) && context.elements.previousButton.style.display !== 'none') {
134-
context.elements.previousButton.style.display = 'none';
135-
} else if (!(context.config.hide?.previous_button || (!context.editor && !isOn)) && context.elements.previousButton.style.display === 'none') {
136-
context.elements.previousButton.style.display = '';
148+
context.elements.previousButton.classList.add('hidden');
149+
} else if (!(context.config.hide?.previous_button || (!context.editor && !isOn)) && context.elements.previousButton.classList.contains('hidden')) {
150+
context.elements.previousButton.classList.remove('hidden');
137151
}
138152

139153
if ((context.config.hide?.next_button || (!context.editor && !isOn)) && context.elements.nextButton.style.display !== 'none') {
140-
context.elements.nextButton.style.display = 'none';
141-
} else if (!(context.config.hide?.next_button || (!context.editor && !isOn)) && context.elements.nextButton.style.display === 'none') {
142-
context.elements.nextButton.style.display = '';
154+
context.elements.nextButton.classList.add('hidden');
155+
} else if (!(context.config.hide?.next_button || (!context.editor && !isOn)) && context.elements.nextButton.classList.contains('hidden')) {
156+
context.elements.nextButton.classList.remove('hidden');
143157
}
144158

145159
if ((context.config.hide?.volume_button || (!context.editor && !isOn)) && context.elements.volumeButton.style.display !== 'none') {
146-
context.elements.volumeButton.style.display = 'none';
147-
} else if (!(context.config.hide?.volume_button || (!context.editor && !isOn)) && context.elements.volumeButton.style.display === 'none') {
148-
context.elements.volumeButton.style.display = '';
160+
context.elements.volumeButton.classList.add('hidden');
161+
} else if (!(context.config.hide?.volume_button || (!context.editor && !isOn)) && context.elements.volumeButton.classList.contains('hidden')) {
162+
context.elements.volumeButton.classList.remove('hidden');
149163
}
150164

151-
if ((context.config.hide?.play_pause_button || (!context.editor && !isOn)) && context.elements.playPauseButton.style.display !== 'none') {
152-
context.elements.playPauseButton.style.display = 'none';
153-
} else if (!(context.config.hide?.play_pause_button || (!context.editor && !isOn)) && context.elements.playPauseButton.style.display === 'none') {
154-
context.elements.playPauseButton.style.display = '';
165+
if ((context.config.hide?.play_pause_button || (!context.editor && !isOn)) && context.elements.playPauseButton.classList.contains('hidden')) {
166+
context.elements.playPauseButton.classList.add('hidden');
167+
} else if (!(context.config.hide?.play_pause_button || (!context.editor && !isOn)) && context.elements.playPauseButton.classList.contains('hidden')) {
168+
context.elements.playPauseButton.classList.remove('hidden');
155169
}
156170
}

‎src/cards/media-player/styles.css

+5
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,11 @@
2121
background-color: var(--bubble-accent-color, var(--accent-color));
2222
}
2323

24+
.bubble-play-pause-button:not(.large) {
25+
height: 36px;
26+
width: 36px;
27+
}
28+
2429
.bubble-volume-slider {
2530
position: absolute;
2631
width: calc(100% - 150px);

‎src/cards/select/styles.css

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
.bubble-container {
22
border: solid 2px transparent;
3+
overflow: inherit;
34
}
45

56
.bubble-icon-container {

‎src/components/base-card/create.js

+10
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,16 @@ export function createBaseStructure(context, config = {}) {
109109
addActions(context.elements.iconContainer, context.config, context.config.entity, options.iconActions);
110110
}
111111

112+
if (options.iconActions &&options.iconActions?.tap_action?.action !== 'none') {
113+
context.elements.iconFeedbackContainer = createElement('div', 'bubble-icon-feedback-container bubble-feedback-container');
114+
context.elements.iconContainer.appendChild(context.elements.iconFeedbackContainer);
115+
context.elements.iconFeedback = createElement('div', 'bubble-icon-feedback bubble-feedback-element feedback-element');
116+
context.elements.iconFeedback.style.display = 'none';
117+
context.elements.iconFeedbackContainer.appendChild(context.elements.iconFeedback);
118+
context.elements.iconContainer.appendChild(context.elements.iconFeedbackContainer);
119+
addFeedback(context.elements.iconContainer, context.elements.iconFeedback);
120+
}
121+
112122
if (options.buttonActions === true) {
113123
addActions(context.elements.background, context.config.button_action, context.config.entity);
114124
} else if (options.buttonActions !== undefined && options.buttonActions !== false) {

‎src/components/base-card/styles.css

+6-1
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ ha-card {
5757
display: flex;
5858
margin-right: 8px;
5959
gap: 4px;
60-
z-index: 1;
60+
/* z-index: 1; */
6161
}
6262

6363
.bubble-background {
@@ -87,6 +87,11 @@ ha-card {
8787
transition: all 0.3s ease-in-out;
8888
}
8989

90+
.bubble-icon-feedback-container {
91+
border-radius: var(--bubble-card-type-icon-border-radius, var(--bubble-icon-border-radius, var(--bubble-border-radius, 50%)));
92+
overflow: hidden !important;
93+
}
94+
9095
.is-off .bubble-main-icon {
9196
opacity: 0.6;
9297
}

0 commit comments

Comments
 (0)