Skip to content

Commit 4be9c01

Browse files
unbekannt3unbekannt3
committed
secondary entity color template, fixed card height
1 parent 600e1b1 commit 4be9c01

2 files changed

Lines changed: 50 additions & 127 deletions

File tree

‎src/room-card-minimalist-editor.js‎

Lines changed: 13 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,14 @@
11
import { LitElement, html } from 'lit-element';
22

3-
// UI-Lovelace-Minimalist kompatible Templates für Dropdown
3+
// UI-Lovelace-Minimalist styled template colors
44
const TEMPLATE_OPTIONS = [
5-
{ label: 'Blue No State', value: 'blue_no_state' },
6-
{ label: 'Red No State', value: 'red_no_state' },
7-
{ label: 'Green No State', value: 'green_no_state' },
8-
{ label: 'Yellow No State', value: 'yellow_no_state' },
9-
{ label: 'Purple No State', value: 'purple_no_state' },
10-
{ label: 'Orange No State', value: 'orange_no_state' },
11-
{ label: 'Pink No State', value: 'pink_no_state' },
12-
{ label: 'Red On', value: 'red_on' },
13-
{ label: 'Red Off', value: 'red_off' },
14-
{ label: 'Green On', value: 'green_on' },
15-
{ label: 'Green Off', value: 'green_off' },
16-
{ label: 'Blue On', value: 'blue_on' },
17-
{ label: 'Blue Off', value: 'blue_off' },
18-
{ label: 'Yellow On', value: 'yellow_on' },
19-
{ label: 'Yellow Off', value: 'yellow_off' },
20-
{ label: 'Purple On', value: 'purple_on' },
21-
{ label: 'Purple Off', value: 'purple_off' },
22-
{ label: 'Orange On', value: 'orange_on' },
23-
{ label: 'Orange Off', value: 'orange_off' },
24-
{ label: 'Pink On', value: 'pink_on' },
25-
{ label: 'Pink Off', value: 'pink_off' },
5+
{ label: 'Blue', value: 'blue_no_state' },
6+
{ label: 'Red', value: 'red_no_state' },
7+
{ label: 'Green', value: 'green_no_state' },
8+
{ label: 'Yellow', value: 'yellow_no_state' },
9+
{ label: 'Purple', value: 'purple_no_state' },
10+
{ label: 'Orange', value: 'orange_no_state' },
11+
{ label: 'Pink', value: 'pink_no_state' },
2612
];
2713

2814
class RoomCardEditor extends LitElement {
@@ -365,6 +351,11 @@ class RoomCardEditor extends LitElement {
365351
label: 'Secondary Info',
366352
selector: { template: {} },
367353
},
354+
{
355+
name: 'secondary_color',
356+
label: 'Secondary Info Color',
357+
selector: { template: {} },
358+
},
368359
{
369360
name: 'show_background_circle',
370361
label: 'Show Background Circle behind card icon',
@@ -375,11 +366,6 @@ class RoomCardEditor extends LitElement {
375366
label: 'Background Circle Color - empty for auto generation',
376367
selector: { template: {} },
377368
},
378-
{
379-
name: 'max_entities',
380-
label: 'Max Entities (1-4)',
381-
selector: { number: { min: 1, max: 4, step: 1 } },
382-
},
383369
]}
384370
.computeLabel=${(s) => s.label ?? s.name}
385371
@value-changed=${this._valueChanged}

‎src/room-card-minimalist.js‎

Lines changed: 37 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1,116 +1,43 @@
11
import { LitElement, html, css } from 'lit-element';
22
import packageInfo from '../package.json';
33

4-
// UI-Lovelace-Minimalist kompatible Templates
4+
// UI-Lovelace-Minimalist compatible template colors
55
const COLOR_TEMPLATES = {
6-
// Basic Templates
76
blue_no_state: {
8-
icon_color: 'rgba(var(--color-blue, 3, 155, 229),1)',
9-
background_color: 'rgba(var(--color-blue, 3, 155, 229), 0.2)',
10-
text_color: 'rgba(var(--color-blue-text, 3, 155, 229),1)',
7+
icon_color: 'rgba(var(--color-blue, 61, 90, 254),1)',
8+
background_color: 'rgba(var(--color-blue, 61, 90, 254), 0.2)',
9+
text_color: 'rgba(var(--color-blue-text, 61, 90, 254),1)',
1110
},
1211
red_no_state: {
13-
icon_color: 'rgba(var(--color-red, 244, 67, 54),1)',
14-
background_color: 'rgba(var(--color-red, 244, 67, 54), 0.2)',
15-
text_color: 'rgba(var(--color-red-text, 244, 67, 54),1)',
12+
icon_color: 'rgba(var(--color-red, 245, 68, 54),1)',
13+
background_color: 'rgba(var(--color-red, 245, 68, 54), 0.2)',
14+
text_color: 'rgba(var(--color-red-text, 245, 68, 54),1)',
1615
},
1716
green_no_state: {
18-
icon_color: 'rgba(var(--color-green, 76, 175, 80),1)',
19-
background_color: 'rgba(var(--color-green, 76, 175, 80), 0.2)',
20-
text_color: 'rgba(var(--color-green-text, 76, 175, 80),1)',
17+
icon_color: 'rgba(var(--color-green, 1, 200, 82),1)',
18+
background_color: 'rgba(var(--color-green, 1, 200, 82), 0.2)',
19+
text_color: 'rgba(var(--color-green-text, 1, 200, 82),1)',
2120
},
2221
yellow_no_state: {
23-
icon_color: 'rgba(var(--color-yellow, 255, 193, 7),1)',
24-
background_color: 'rgba(var(--color-yellow, 255, 193, 7), 0.2)',
25-
text_color: 'rgba(var(--color-yellow-text, 255, 193, 7),1)',
22+
icon_color: 'rgba(var(--color-yellow, 255, 145, 1),1)',
23+
background_color: 'rgba(var(--color-yellow, 255, 145, 1), 0.2)',
24+
text_color: 'rgba(var(--color-yellow-text, 255, 145, 1),1)',
2625
},
2726
purple_no_state: {
28-
icon_color: 'rgba(var(--color-purple, 156, 39, 176),1)',
29-
background_color: 'rgba(var(--color-purple, 156, 39, 176), 0.2)',
30-
text_color: 'rgba(var(--color-purple-text, 156, 39, 176),1)',
27+
icon_color: 'rgba(var(--color-purple, 102, 31, 255),1)',
28+
background_color: 'rgba(var(--color-purple, 102, 31, 255), 0.2)',
29+
text_color: 'rgba(var(--color-purple-text, 102, 31, 255),1)',
3130
},
3231
orange_no_state: {
33-
icon_color: 'rgba(var(--color-orange, 255, 152, 0),1)',
34-
background_color: 'rgba(var(--color-orange, 255, 152, 0), 0.2)',
35-
text_color: 'rgba(var(--color-orange-text, 255, 152, 0),1)',
32+
icon_color: 'rgba(var(--color-orange, 255, 145, 1),1)',
33+
background_color: 'rgba(var(--color-orange, 255, 145, 1), 0.2)',
34+
text_color: 'rgba(var(--color-orange-text, 255, 145, 1),1)',
3635
},
3736
pink_no_state: {
3837
icon_color: 'rgba(var(--color-pink, 233, 30, 99),1)',
3938
background_color: 'rgba(var(--color-pink, 233, 30, 99), 0.2)',
4039
text_color: 'rgba(var(--color-pink-text, 233, 30, 99),1)',
4140
},
42-
43-
// State-based Templates
44-
red_on: {
45-
icon_color: 'rgba(var(--color-red, 244, 67, 54),1)',
46-
background_color: 'rgba(var(--color-red, 244, 67, 54), 0.2)',
47-
text_color: 'rgba(var(--color-red-text, 244, 67, 54),1)',
48-
},
49-
red_off: {
50-
icon_color: 'rgba(var(--color-red, 244, 67, 54), 0.4)',
51-
background_color: 'rgba(var(--color-red, 244, 67, 54), 0.1)',
52-
text_color: 'rgba(var(--color-red-text, 244, 67, 54), 0.4)',
53-
},
54-
green_on: {
55-
icon_color: 'rgba(var(--color-green, 76, 175, 80),1)',
56-
background_color: 'rgba(var(--color-green, 76, 175, 80), 0.2)',
57-
text_color: 'rgba(var(--color-green-text, 76, 175, 80),1)',
58-
},
59-
green_off: {
60-
icon_color: 'rgba(var(--color-green, 76, 175, 80), 0.4)',
61-
background_color: 'rgba(var(--color-green, 76, 175, 80), 0.1)',
62-
text_color: 'rgba(var(--color-green-text, 76, 175, 80), 0.4)',
63-
},
64-
blue_on: {
65-
icon_color: 'rgba(var(--color-blue, 3, 155, 229),1)',
66-
background_color: 'rgba(var(--color-blue, 3, 155, 229), 0.2)',
67-
text_color: 'rgba(var(--color-blue-text, 3, 155, 229),1)',
68-
},
69-
blue_off: {
70-
icon_color: 'rgba(var(--color-blue, 3, 155, 229), 0.4)',
71-
background_color: 'rgba(var(--color-blue, 3, 155, 229), 0.1)',
72-
text_color: 'rgba(var(--color-blue-text, 3, 155, 229), 0.4)',
73-
},
74-
yellow_on: {
75-
icon_color: 'rgba(var(--color-yellow, 255, 193, 7),1)',
76-
background_color: 'rgba(var(--color-yellow, 255, 193, 7), 0.2)',
77-
text_color: 'rgba(var(--color-yellow-text, 255, 193, 7),1)',
78-
},
79-
yellow_off: {
80-
icon_color: 'rgba(var(--color-yellow, 255, 193, 7), 0.4)',
81-
background_color: 'rgba(var(--color-yellow, 255, 193, 7), 0.1)',
82-
text_color: 'rgba(var(--color-yellow-text, 255, 193, 7), 0.4)',
83-
},
84-
purple_on: {
85-
icon_color: 'rgba(var(--color-purple, 156, 39, 176),1)',
86-
background_color: 'rgba(var(--color-purple, 156, 39, 176), 0.2)',
87-
text_color: 'rgba(var(--color-purple-text, 156, 39, 176),1)',
88-
},
89-
purple_off: {
90-
icon_color: 'rgba(var(--color-purple, 156, 39, 176), 0.4)',
91-
background_color: 'rgba(var(--color-purple, 156, 39, 176), 0.1)',
92-
text_color: 'rgba(var(--color-purple-text, 156, 39, 176), 0.4)',
93-
},
94-
orange_on: {
95-
icon_color: 'rgba(var(--color-orange, 255, 152, 0),1)',
96-
background_color: 'rgba(var(--color-orange, 255, 152, 0), 0.2)',
97-
text_color: 'rgba(var(--color-orange-text, 255, 152, 0),1)',
98-
},
99-
orange_off: {
100-
icon_color: 'rgba(var(--color-orange, 255, 152, 0), 0.4)',
101-
background_color: 'rgba(var(--color-orange, 255, 152, 0), 0.1)',
102-
text_color: 'rgba(var(--color-orange-text, 255, 152, 0), 0.4)',
103-
},
104-
pink_on: {
105-
icon_color: 'rgba(var(--color-pink, 233, 30, 99),1)',
106-
background_color: 'rgba(var(--color-pink, 233, 30, 99), 0.2)',
107-
text_color: 'rgba(var(--color-pink-text, 233, 30, 99),1)',
108-
},
109-
pink_off: {
110-
icon_color: 'rgba(var(--color-pink, 233, 30, 99), 0.4)',
111-
background_color: 'rgba(var(--color-pink, 233, 30, 99), 0.1)',
112-
text_color: 'rgba(var(--color-pink-text, 233, 30, 99), 0.4)',
113-
},
11441
};
11542

11643
class RoomCard extends LitElement {
@@ -156,8 +83,8 @@ class RoomCard extends LitElement {
15683

15784
this._config = {
15885
secondary: '',
86+
secondary_color: 'var(--secondary-text-color)',
15987
entities: [],
160-
max_entities: 4,
16188
show_background_circle: true,
16289
background_circle_color: 'var(--accent-color)',
16390
...config,
@@ -214,8 +141,10 @@ class RoomCard extends LitElement {
214141
// replaced with the new values. Check https://lit.dev for more info.
215142
render() {
216143
const secondary = this._getValueRawOrTemplate(this._config.secondary);
217-
const maxEntities = this._config.max_entities || 4;
218-
const entitiesToShow = this._config.entities.slice(0, maxEntities);
144+
const secondaryColor = this._getValueRawOrTemplate(
145+
this._config.secondary_color
146+
);
147+
const entitiesToShow = this._config.entities.slice(0, 4); // Always show max 4 entities
219148

220149
const { background_circle_color, icon_color } = this._applyCardTemplate();
221150

@@ -229,7 +158,9 @@ class RoomCard extends LitElement {
229158
<div class="text-content">
230159
<span class="primary">${this._config.name}</span>
231160
${secondary
232-
? html`<span class="secondary">${secondary}</span>`
161+
? html`<span class="secondary" style="color: ${secondaryColor}"
162+
>${secondary}</span
163+
>`
233164
: ''}
234165
</div>
235166
@@ -725,7 +656,7 @@ class RoomCard extends LitElement {
725656
--card-primary-font-weight: 600;
726657
--card-primary-line-height: 1.3;
727658
--card-secondary-font-weight: 400;
728-
--card-secondary-font-size: 12px;
659+
--card-secondary-font-size: 14px;
729660
--card-secondary-line-height: 1.2;
730661
--spacing: 8px;
731662
--border-radius: 12px;
@@ -753,7 +684,7 @@ class RoomCard extends LitElement {
753684
align-items: stretch;
754685
justify-content: space-between;
755686
padding: 16px;
756-
min-height: 120px;
687+
min-height: 160px;
757688
position: relative;
758689
z-index: 2;
759690
}
@@ -821,7 +752,7 @@ class RoomCard extends LitElement {
821752
text-overflow: ellipsis;
822753
overflow: hidden;
823754
white-space: nowrap;
824-
margin-bottom: 2px;
755+
margin-bottom: 6px;
825756
}
826757
827758
.secondary {
@@ -845,6 +776,8 @@ class RoomCard extends LitElement {
845776
flex-direction: column;
846777
gap: 8px;
847778
align-items: center;
779+
min-height: 190px;
780+
justify-content: flex-start;
848781
}
849782
850783
.state-item {
@@ -901,7 +834,11 @@ class RoomCard extends LitElement {
901834
@media (max-width: 768px) {
902835
.container {
903836
padding: 12px;
904-
min-height: 100px;
837+
min-height: 130px;
838+
}
839+
840+
.states {
841+
min-height: 160px;
905842
}
906843
907844
:host {

0 commit comments

Comments
 (0)