Feature/editor

[acesyde]

Description

Add editor to the vertical stack in card

Related Issue

123

Motivation and Context

• Use typescript
• Lint code
• Add vscode devcontainer
• Add Editor

How Has This Been Tested

Locally

Types of changes

• [ ] 🐛 Bug fix (non-breaking change which fixes an issue)
• [x] 🚀 New feature (non-breaking change which adds functionality)
• [x] 🌎 Translation (addition or update a translation)
• [ ] ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

Checklist

• [x] My code follows the code style of this project.
• [x] My change requires a change to the documentation.
• [ ] I have updated the documentation accordingly.
• [ ] I have tested the change locally.

Screenshots

[acesyde]

Hi @ofekashery

I have some problems with history-graph and humidifier I don't understand why these components keep their borders :(

Can you help me to finish ?

Sample

type: custom:vertical-stack-in-card
cards:
  - type: light
    entity: light.ceiling_lights
  - type: button
    tap_action:
      action: toggle
    entity: switch.decorative_lights
  - type: history-graph
    entities:
      - sun.sun
  - type: humidifier
    entity: humidifier.humidifier

Screenshot

[M4D1NG3R]

@acesyde I am not sure whether this is intended or not, but for me the updated card removes the ha-card-border-radius set in the theme. This issue had previously been solved: 81

[M4D1NG3R]

@acesyde removing ele.style.borderRadius = '0'; (line 102 & 124 in src/vertical-stack-in-card.ts) solved my issue and also removes the borders from history-graph and humidifier

Could you verify?

Please also check whether this bricks something else.

[acesyde]

Hi @M4D1NG3R

I removed these 2 lines of code (existing in current code)

But the borders are still here :(

[acesyde]

And I don"t know why the styles are not applied on these cards

[M4D1NG3R]

ok, I am sorry, I just rebuild it, but this time it also did not work for me. I might have had the original file in cache.

[M4D1NG3R]

Also, I get some weird behavior when using the mushroom chip card: on the one side the theme is applied, on the other it's not.

When comparing https://github.com/ofekashery/vertical-stack-in-card/commit/d0cb3bfcaa3f9a45f0b1b5f62cf9259d09deda23 which fixed https://github.com/ofekashery/vertical-stack-in-card/issues/81. Only a few lines changed one of them is the addition of:

line 39 card.style.overflow = 'hidden';

Unfortunately, I can't do anything with it, I'm too inexperienced for that. Does this help you?

[M4D1NG3R]

Ok, I may have the fix for my issue: adding overflow: hidden; after line 171 fixed my issue. this needs to be done additionally to removing ele.style.borderRadius = '0'; (line 102 & 124 in src/vertical-stack-in-card.ts)

[acesyde]

@M4D1NG3R ok I will add that after

But with the original card (js not ts) I have also the same problem with histroy-graph

[M4D1NG3R]

@acesyde Yeah, me too, do you have the same problem with stack-in-card?

[acesyde]

@acesyde Yeah, me too, do you have the same problem with stack-in-card?

I don't know, tomorrow I will try it

[acesyde]

It seems to works better with stack in card, thanks for the advice, so I need to investigate ;)

[M4D1NG3R]

@acesyde please try replacing line 69-77

    // Style cards
    this._cards.forEach((card) => {
      if ((card as any).updateComplete) {
        (card as any).updateComplete.then(() => this._cleanCardStyle(card));
      } else {
        this._cleanCardStyle(card);
      }
    });
  }

with:

    // Style cards
    this._cards.forEach((card) => {
      this._waitForUpdate(card);
      window.setTimeout(() => {
        this._waitForUpdate(card);
      }, 500);
    });
  }

  private _waitForUpdate(card: LovelaceCard): void {
    if ((card as any).updateComplete) {
      (card as any).updateComplete.then(() => this._cleanCardStyle(card));
    } else {
      this._cleanCardStyle(card);
    }
    this._cleanCardStyle(card);
  }

[acesyde]

Hey @M4D1NG3R it's better :) but the humidifier informations doesn't appear :\

[acesyde]

It works

[acesyde]

Works with mushroom but a little bug with chips :(

[acesyde]

@ofekashery what do you think about that ?

[ofekashery]

Fixed in #128.