[FR] Load all module yamls in /local/bubble

[StaleLoafOfBread]

Today (v2.5.0-beta.5) it only loads bubble-modules.yaml in /local/bubble. This will lead to a bloated yaml file which is difficult to manage as the number of modules increases.

I think this is the line that needs updating

Bubble-Card/src/tools/style-utils.js

Lines 14 to 18 in ada9f29

	stylesYAML = loadYAML([
	"/local/bubble/bubble-modules.yaml",
	"/hacsfiles/Bubble-Card/bubble-modules.yaml",
	"/local/community/Bubble-Card/bubble-modules.yaml",
	]);

[Clooos]

Hi! I personally fold my lines for better readability, but this could be an additional option for anyone who want to classify these differently.

Thank you for the idea! I will try to implement that for the next (and hopefully last) beta 🤞

[StaleLoafOfBread]

I can make a separate post, possibly a bug report is most appropriate but thought I'd mention it here as this is about modules being loaded. The default module only gets loaded if the modules property is missing or if default is listed in it. I think it should have its own enable_default_module bool that assumes true if not defined. I keep forgetting to add default when defining via yaml (well js because custom strategy).

I am also curious, it seems module code is applied after the card's local styles. Is that the intended behavior? I would assume that a card's local settings would get applied last (and therefore take priority as far as CSS is concerned) because you are purposely customizing this specific card.

Happy to turn both of these in bug reports for tracking purposes if you'd like.

[Clooos]

Thank you for the feedback. I've just added support for this in the bubble-modules.yaml:

default:
    !include default.yaml

This will import the config from /local/bubble/default.yaml. This is probably the best approach, and that match the Home Assistant YAML possibilities.

For the folder name, HACS can't write folders/files directly in the local path, so I'm not concerned about a conflict possibility, I will let it this way to not add a breaking change for the beta users.

Edit: And for the default key, there is no good way to add a global boolean into custom cards, I really think that my approach is the best one.

And all custom styles/templates/modules are handled in a separate style element at a higher level, I'm not sure to understand what you mean by that.

[StaleLoafOfBread]

And all custom styles/templates/modules are handled in a separate style element at a higher level, I'm not sure to understand what you mean by that.

In the below example, I would expect that the icons be

• white (nothing special applied)
• red (due to module)
• blue (due to card's styles attribute overriding the module)
• blue (due to card's styles attribute)

But instead it is:

• white (nothing special applied)
• red (due to module)
• red(due to module overriding card's styles attribute)
• blue (due to card's styles attribute)

In css if a style is redefined (assuming same selector criteria) then the last definition is used. So in this case, the card must be applying the definitions from the styles attribute and then appending on the modules. I would expect that any styles placed into a card would override any modules because that code was written specifically for that card as opposed to a generically written module. I can see a use case where a module is nearly what someone wants then uses styles to tweak it into perfection.

Checking in the HTML, I can see the styles are in the styles from the card then module

Apologies if my terminology is off, I do not often use CSS.

Module Code:

default:
  name: Default
  description: Empty and enabled by default. Move your styles/templates here to apply them to all cards.
  code: |
    ha-icon,
    .icon {
        color: red;
    }

Dashboard Code:

type: grid
cards:
  - type: custom:bubble-card
    card_type: separator
    modules: []
    button_type: name
    name: No modules nor styles
    icon: mdi:home-assistant
  - type: custom:bubble-card
    card_type: separator
    modules:
      - default
    button_type: name
    name: Only has "default" module
    icon: mdi:home-assistant
  - type: custom:bubble-card
    card_type: separator
    modules:
      - default
    button_type: name
    name: Has default module and card specific style
    icon: mdi:home-assistant
    styles: |2
          ha-icon,
          .icon {
              color: blue;
          }
  - type: custom:bubble-card
    card_type: separator
    modules: []
    button_type: name
    name: Only has card specific style
    icon: mdi:home-assistant
    styles: |2
          ha-icon,
          .icon {
              color: blue;
          }

Though this is getting away from the original request of this discussion. Happy to create a new thread to track this if its a change you're open to.

[StaleLoafOfBread]

I also just tested if the order in which the modules are listed matter. They apply as I would expect, aligned with how CSS works, such that the last definition takes priority.

type: grid
cards:
  - type: custom:bubble-card
    card_type: separator
    modules:
      - yellow
      - purple
    button_type: name
    name: Yellow then purple
    icon: mdi:home-assistant
  - type: custom:bubble-card
    card_type: separator
    modules:
      - purple
      - yellow
    button_type: name
    name: Purple then yellow
    icon: mdi:home-assistant

yellow:
  name: yellow
  description: yellow
  code: |
    ha-icon,
    .icon {
        color: yellow;
    }

purple:
  name: purple
  description: purple
  code: |
    ha-icon,
    .icon {
        color: purple;
    }

[StaleLoafOfBread]

Actually, I made a PR for this. Lets discuss there :) #1290

[Clooos]

Hi! I've created a new branch with the !include support, but also with the new structure I'm currently working on, give it a try 😄

https://github.com/Clooos/Bubble-Card/tree/v2.5.0-beta

[StaleLoafOfBread]

I just tested it again and it works. Not sure what I did wrong when I was testing it before... Sorry for the false report there.

I did however notice that in this branch you no longer apply the icon attribute to <ha-icon>. I did however find the fix for that.

Basically it was just adding:

• element.icon.setAttribute('icon', element.icon.icon ); to \src\components\sub-button\changes.js inside of updateSubButtons
• context.elements.icon.setAttribute('icon', newIcon); to \src\components\base-card\changes.js inside of changeIcon.
  • This one actually would be new behavior but something I'd appreciate.

I noticed this because I use those for some CSS files I'm working on.

Then again, I notice the official tile icons don't populate it so perhaps this was intentional and I should figure out a better way to do this?

I'll make a PR for that sometime soon but wanted to comment on it now while it was fresh on my mind. Not sure right now if the base-card change is in the correct place or not and need to go to sleep.

[Clooos]

Hi! I remember there was a element.icon.icon somewhere in my previous code but I was unable to remember what it was for, and to be honest I still don't because all my custom icon templates are still working 😅 (the examples from the documentation). How are you using it?

And there is now a icon.js in tools, this would be a better place 😁 Edit: Or maybe not, since this need to be changed.

[StaleLoafOfBread]

IIRC there is still element.icon.icon but weirdly that doesn't seem to set the icon attribute. I'm not a front end guy so I can't comment more on that. Or perhaps I'm misremembering? I'll check later as I'm away from my computer right now.

I'm making a dashboard strategy that primarily uses bubble card. I did have a custom style to import a CSS file though I since switched to card_mod just for the CSS import so that I can support other cards if needed and is simpler (no need to track if it's already been added).

So in that CSS file match based on the icon attribute and color the icon accordingly. For example, all mdi:bluetooth is colored light blue. Is also will check the data-state attribute (I'm adding it via a module) to apply additional coloring or animations. For example, my robot vacuum will vacuum up it's icon area while on and my phone icons will shake while ringing.

I have to go run some errands but I will add a comment here with some visuals and code snippets. I also plan to eventually upload it to github in case anyone else would like to use the strategy. I haven't yet as the code is quiet a mess and there's some hard coding I need to remove to make it more generic.

Side note, the this.config variable has been a life saver. I set the icon via this now because at least in the latest beta, if you set it via setIcon technically the icon is swapping back and forth super quickly. To humans this doesn't make a difference but to CSS animations it makes a huge difference because the icon attribute is swapping around so the animation is constantly restarting.

[Clooos]

Indeed the this variable change everything a lot, I remember that I haven't added it because I thought it was useless to the users, how wrong I was 🫠

Don't hesitate to make a PR for the element.icon.icon, I'm still unsure to really understand how you use it.

Also, I'm making a lot of progress on the next beta, even if I'm probably doing a lot more changes/refactoring than I expected, but this long process just fixed the editor performance for good! This release will be day and night for many things! 🥳

[StaleLoafOfBread]

Hahaha to be fair, my use case is pretty specific and the problem that this solves probably doesn't apply to 99% of users.

#1329

In general, if I were to make more PRs, should they be against main or v2.5.0-beta. This one obviously will be against v2.5.0-beta.

Can't wait to try the new beta! I've seen some comments you've made here and there with different bug fixes being in it.

[octoTurnip]

Is there a better way to get bubble-card to actually see if there is an updated version/code of whatever is in the !include default.yaml? it seems to not update the card editor in a dashboard unless you update the file name.

[Clooos]

Clearing the browser/app cache should avoid that.

[octoTurnip]

I've done shift+F5 and even closed the browser then reopened it and still has the same result. I'm not a programmer, but is my machine not normal?

[Clooos]

I will have to try if it is different with !include, thank you for the feedback.