Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(layout): add default, horizontal and vertical layout for all cards #132

Merged
merged 15 commits into from
Feb 17, 2022

Conversation

piitaya
Copy link
Owner

@piitaya piitaya commented Feb 17, 2022

Description

Add different layout for all card :

  • default
  • vertical
  • horizontal

The layout option replace the vertical option. A backward compatibility is added.

fix #34

Some examples

Light card

Capture d’écran 2022-02-17 à 19 11 18

Entity card

Capture d’écran 2022-02-17 à 19 13 10

Fan card

Capture d’écran 2022-02-17 à 19 11 11

Cover card

Capture d’écran 2022-02-17 à 19 11 02

Alarm card

Capture d’écran 2022-02-17 à 19 14 11

@piitaya piitaya requested a review from bemble February 17, 2022 18:15
@piitaya piitaya changed the title feat(layout): add card horizontal and vertical layout feat(layout): add default, horizontal and vertical layout for all cards Feb 17, 2022
@piitaya piitaya added the enhancement New feature or request label Feb 17, 2022
Comment on lines +31 to +49
<paper-dropdown-menu .label=${this.label}>
<paper-listbox
slot="dropdown-content"
attr-for-selected="value"
.selected=${this.value ?? ""}
.configValue=${this.configValue}
@iron-select=${this._selectChanged}
>
<paper-item value="">
${customLocalize("editor.form.layout_picker.values.default")}
</paper-item>
<paper-item .value=${"vertical"}>
${customLocalize("editor.form.layout_picker.values.vertical")}
</paper-item>
<paper-item .value=${"horizontal"}>
${customLocalize("editor.form.layout_picker.values.horizontal")}
</paper-item>
</paper-listbox>
</paper-dropdown-menu>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This will most likely not work with the next release of HA. The frontend has been striped of all Paper Drop downs and in place used mwc-select

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Issue created, #133 ;)

Copy link
Collaborator

@bemble bemble left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for that, little things to changed, mostly typo, and it's OK for me :)

src/shared/card.ts Outdated Show resolved Hide resolved
src/shared/card.ts Outdated Show resolved Hide resolved
protected render(): TemplateResult {
console.log(this.noCardStyle);
if (this.noCardStyle) {
return this.renderContent();
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So you handled #57 in the same time?

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nop, it's a workaround for the alarm card but we can use this property in the future

src/shared/chip.ts Outdated Show resolved Hide resolved
Comment on lines +31 to +49
<paper-dropdown-menu .label=${this.label}>
<paper-listbox
slot="dropdown-content"
attr-for-selected="value"
.selected=${this.value ?? ""}
.configValue=${this.configValue}
@iron-select=${this._selectChanged}
>
<paper-item value="">
${customLocalize("editor.form.layout_picker.values.default")}
</paper-item>
<paper-item .value=${"vertical"}>
${customLocalize("editor.form.layout_picker.values.vertical")}
</paper-item>
<paper-item .value=${"horizontal"}>
${customLocalize("editor.form.layout_picker.values.horizontal")}
</paper-item>
</paper-listbox>
</paper-dropdown-menu>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Issue created, #133 ;)

};
export function getLayoutFromConfig(config: ConfigWithLayout): Layout {
// Backward compatibility for vertical option
return config.layout ?? (Boolean(config.vertical) ? "vertical" : "default");
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice to thought about that :)

@piitaya piitaya merged commit 32f87d6 into main Feb 17, 2022
@piitaya piitaya deleted the feat/card_layout branch February 17, 2022 20:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Idea] Light brightness slider in one row
3 participants