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.

Sign up for GitHub

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

Jump to bottom

Visual changes #12

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

Visual changes #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
8f5701c
Bold the entity name
lizsugar Apr 9, 2022
458d26a
make slider track more pronounced
lizsugar Apr 14, 2022
1c5c315
initial attribute yaml config
lizsugar Apr 23, 2022
12246fd
Display user-defined attribute
lizsugar Apr 26, 2022
89bf928
minor visual changes and default attribute options by domain
lizsugar Apr 26, 2022
c068172
State and attribute are now displyed on a single line
lizsugar Apr 29, 2022
fc126c6
reduce height of cards a tad
lizsugar May 13, 2022
851fbce
visually more like google home
lizsugar May 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7,505 changes: 7,356 additions & 149 deletions dist/slider-button-card.js
View file
Open in desktop

Large diffs are not rendered by default.

7 changes: 7 additions & 0 deletions src/controllers/controller.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,13 @@ export abstract class Controller {
return `${this.targetValue}`;
}

get attributeLabel(): string {
if (this._config.attribute) {
return this.stateObj.attributes[this._config.attribute];
}
return '';
}

get hidden(): boolean {
return false;
}
Expand Down
22 changes: 22 additions & 0 deletions src/editor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,10 @@ export class SliderButtonCardEditor extends LitElement implements LovelaceCardEd
return typeof this._config?.show_state === 'undefined' ? true : this._config?.show_state;
}

get _show_attribute(): boolean {
return typeof this._config?.show_attribute === 'undefined' ? true : this._config?.show_attribute;
}

get _compact(): boolean {
return typeof this._config?.compact !== 'boolean' ? false : this._config?.compact;
}
Expand All @@ -70,6 +74,10 @@ export class SliderButtonCardEditor extends LitElement implements LovelaceCardEd
return this._config?.entity || '';
}

get _attribute(): string {
return this._config?.attribute || '';
}

get _icon(): IconConfig {
return this._config?.icon || IconConfigDefault;
}
Expand Down Expand Up @@ -112,6 +120,13 @@ export class SliderButtonCardEditor extends LitElement implements LovelaceCardEd
.configValue=${'name'}
@value-changed=${this._valueChanged}
></paper-input>
<paper-input
label="${localize('tabs.general.attribute')}"
.value=${this._attribute}
.placeholder=""
.configValue=${'attribute'}
@value-changed=${this._valueChanged}
></paper-input>
<div class="side-by-side">
<ha-formfield .label=${localize('tabs.general.show_name')}>
<ha-switch
Expand All @@ -127,6 +142,13 @@ export class SliderButtonCardEditor extends LitElement implements LovelaceCardEd
@change=${this._valueChanged}
></ha-switch>
</ha-formfield>
<ha-formfield .label=${localize('tabs.general.show_attribute')}>
<ha-switch
.checked=${this._show_attribute}
.configValue=${'show_attribute'}
@change=${this._valueChanged}
></ha-switch>
</ha-formfield>
<ha-formfield .label=${localize('tabs.general.compact')}>
<ha-switch
.checked=${this._compact}
Expand Down
2 changes: 2 additions & 0 deletions src/localize/languages/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,11 @@
"general": {
"title": "General",
"entity": "Entity (Required)",
"attribute": "Attribute (Optional)",
"name": "Name (Optional)",
"show_name": "Show name?",
"show_state": "Show state?",
"show_attribute": "Show attribute?",
"compact": "Compact?"
},
"icon": {
Expand Down
87 changes: 65 additions & 22 deletions src/slider-button-card.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {
}

private renderText(): TemplateResult {
if (!this.config.show_name && !this.config.show_state) {
if (!this.config.show_name && !this.config.show_state && !this.config.show_attribute) {
return html``;
}
return html`
Expand All @@ -189,19 +189,33 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {
? html`
<div class="name">${this.ctrl.name}</div>
`
: ''}
${this.config.show_state
? html`
<div class="state">
${this.ctrl.isUnavailable
? html`
${this.hass.localize('state.default.unavailable')}
` : html`
${this.ctrl.label}
`}
</div>
: ''}

<span class="oneliner">
${this.config.show_state
? html`
<span class="state">
${this.ctrl.isUnavailable
? html`
${this.hass.localize('state.default.unavailable')}
` : html`
${this.ctrl.label}
`}
</span>
`
: ''}

${this.config.show_attribute
? html`
<span class="attribute">
${this.config.show_state && this.ctrl.attributeLabel
? html ` · `
: ''}
${this.ctrl.attributeLabel}
</span>
`
: ''}
</span>
</div>
`;
}
Expand Down Expand Up @@ -420,7 +434,7 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {
box-sizing: border-box;
height: 100%;
width: 100%;
min-height: 7rem;
min-height: 6.25rem;
display: flex;
flex-direction: column;
justify-content: space-between;
Expand Down Expand Up @@ -465,7 +479,7 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {
padding: 0.8rem;
box-sizing: border-box;
height: 100%;
min-height: 7rem;
min-height: 6.25rem;
width: 100%;
display: block;
overflow: hidden;
Expand All @@ -482,7 +496,7 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {
/* --- ICON --- */

.icon {
position: relative;
position: absolute;
cursor: pointer;
width: var(--mdc-icon-size, 24px);
height: var(--mdc-icon-size, 24px);
Expand All @@ -491,6 +505,7 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {
outline: none;
animation: var(--icon-rotate-speed, 0s) linear 0s infinite normal both running rotate;
-webkit-tap-highlight-color: transparent;
bottom: 26px;
}
.icon ha-icon {
filter: var(--icon-filter, brightness(100%));
Expand All @@ -515,8 +530,8 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {

.text {
position: absolute;
bottom: 0;
left: 0;
bottom: 12px;
left: 36px;
padding: 0.8rem;
pointer-events: none;
user-select: none;
Expand All @@ -543,11 +558,12 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {
/* --- LABEL --- */

.name {
color: var(--label-color-on, var(--primary-text-color, white));
color: var(--label-color-on, var(--primary-text-color, white));
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
text-shadow: var(--label-text-shadow, none);
font-weight: 500;
}
.off .name {
color: var(--label-color-off, var(--primary-text-color, white));
Expand All @@ -564,7 +580,7 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {
/* --- STATE --- */

.state {
color: var(--state-color-on, var(--label-badge-text-color, white));
color: var(--state-color-on, var(--label-badge-text-color, white));
text-overflow: ellipsis;
white-space: nowrap;
text-shadow: var(--state-text-shadow);
Expand All @@ -585,7 +601,32 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {
overflow: hidden;
}


/* --- ATTRIBUTE --- */

.attribute {
/*
color: var(--state-color-on, var(--label-badge-text-color, white));
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
text-shadow: var(--state-text-shadow);
max-width: calc(50% -2em);
transition: font-size 0.1s ease-in-out;
border: 1px solid red;
*/
}

.oneliner {
color: var(--state-color-on, var(--label-badge-text-color, white));
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 20px;
width: 20px;
text-shadow: var(--state-text-shadow);
transition: font-size 0.1s ease-in-out;
/*border: 1px solid blue;*/
}
/* --- SLIDER --- */

.slider {
Expand Down Expand Up @@ -731,7 +772,7 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {
opacity: 1;
}
.slider[data-show-track="true"] .slider-thumb:after {
opacity: 0.9;
opacity: 0.675;
}
.off .slider[data-show-track="true"] .slider-thumb:after {
opacity: 1;
Expand All @@ -740,7 +781,9 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {
/* --- ACTION BUTTON --- */

.action {
position: relative;
position: absolute;
right: 10px;
bottom: 28px;
float: right;
width: var(--mdc-icon-size, 24px);
height: var(--mdc-icon-size, 24px);
Expand Down
11 changes: 11 additions & 0 deletions src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,11 @@ declare global {
export interface SliderButtonCardConfig extends LovelaceCardConfig {
type: string;
entity: string;
attribute?: string;
name?: string;
show_name?: boolean;
show_state?: boolean;
show_attribute?: boolean;
icon?: IconConfig;
action_button?: ActionButtonConfig;
slider?: SliderConfig;
Expand Down Expand Up @@ -119,6 +121,7 @@ export const SliderConfigDefaultDomain: Map<string, SliderConfig> = new Map([
show_track: false,
toggle_on_click: false,
force_square: false,
show_attribute: false,
}],
[Domain.FAN, {
direction: SliderDirections.LEFT_RIGHT,
Expand All @@ -128,6 +131,7 @@ export const SliderConfigDefaultDomain: Map<string, SliderConfig> = new Map([
show_track: false,
toggle_on_click: false,
force_square: false,
show_attribute: false,
}],
[Domain.SWITCH, {
direction: SliderDirections.LEFT_RIGHT,
Expand All @@ -137,6 +141,7 @@ export const SliderConfigDefaultDomain: Map<string, SliderConfig> = new Map([
show_track: false,
toggle_on_click: true,
force_square: false,
show_attribute: false,
}],
[Domain.COVER, {
direction: SliderDirections.TOP_BOTTOM,
Expand All @@ -147,6 +152,7 @@ export const SliderConfigDefaultDomain: Map<string, SliderConfig> = new Map([
show_track: false,
force_square: false,
invert: true,
show_attribute: false,
}],
[Domain.INPUT_BOOLEAN, {
direction: SliderDirections.LEFT_RIGHT,
Expand All @@ -156,6 +162,7 @@ export const SliderConfigDefaultDomain: Map<string, SliderConfig> = new Map([
show_track: false,
toggle_on_click: true,
force_square: false,
show_attribute: false,
}],
[Domain.MEDIA_PLAYER, {
direction: SliderDirections.LEFT_RIGHT,
Expand All @@ -165,6 +172,8 @@ export const SliderConfigDefaultDomain: Map<string, SliderConfig> = new Map([
show_track: true,
toggle_on_click: false,
force_square: false,
show_attribute: true,
attribute: "media_title",
}],
[Domain.LOCK, {
direction: SliderDirections.LEFT_RIGHT,
Expand All @@ -174,6 +183,7 @@ export const SliderConfigDefaultDomain: Map<string, SliderConfig> = new Map([
show_track: false,
toggle_on_click: true,
force_square: false,
show_attribute: false,
}],
[Domain.CLIMATE, {
direction: SliderDirections.LEFT_RIGHT,
Expand All @@ -183,6 +193,7 @@ export const SliderConfigDefaultDomain: Map<string, SliderConfig> = new Map([
show_track: true,
toggle_on_click: false,
force_square: false,
show_attribute: false,
}],
]);

Expand Down