github
/
ha-frontend
mirror of https://github.com/home-assistant/frontend
1
Fork 0
Code Releases Activity

Add theme variables for grid section and sections view (#20099) 

* Fix variable

* Add section view theme variables

* Add grid section theme variables
This commit is contained in:
Paul Bottein 2024-03-25 15:53:21 +01:00 committed by GitHub
parent 01efb831b7
commit 6ee2bfed36
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 33 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/panels/lovelace/sections/hui-grid-section.ts
View File

@ -183,18 +183,20 @@ export class GridSection extends LitElement implements LovelaceSectionElement {
haStyle, haStyle,
css` css`
:host { :host {
--grid-gap: 8px; --column-count: 4;
--grid-row-height: 66px; --row-gap: var(--ha-section-grid-row-gap, 8px);
--column-gap: var(--ha-section-grid-column-gap, 8px);
--row-height: 66px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--grid-gap); gap: var(--row-gap);
} }
.container { .container {
--column-count: 4;
display: grid; display: grid;
grid-template-columns: repeat(var(--column-count), minmax(0, 1fr)); grid-template-columns: repeat(var(--column-count), minmax(0, 1fr));
grid-auto-rows: minmax(var(--grid-row-height), auto); grid-auto-rows: minmax(var(--row-height), auto);
gap: var(--grid-gap); row-gap: var(--row-gap);
column-gap: var(--column-gap);
padding: 0; padding: 0;
margin: 0 auto; margin: 0 auto;
} }
@ -203,7 +205,7 @@ export class GridSection extends LitElement implements LovelaceSectionElement {
padding: 8px; padding: 8px;
border-radius: var(--ha-card-border-radius, 12px); border-radius: var(--ha-card-border-radius, 12px);
border: 2px dashed var(--divider-color); border: 2px dashed var(--divider-color);
min-height: var(var(--grid-row-height)); min-height: var(--row-height);
} }
.title { .title {
@ -232,8 +234,8 @@ export class GridSection extends LitElement implements LovelaceSectionElement {
.card.fit-rows { .card.fit-rows {
height: calc( height: calc(
(var(--row-size, 1) * (var(--grid-row-height) + var(--grid-gap))) - var( (var(--row-size, 1) * (var(--row-height) + var(--row-gap))) - var(
--grid-gap --row-gap
) )
); );
} }
@ -254,7 +256,7 @@ export class GridSection extends LitElement implements LovelaceSectionElement {
cursor: pointer; cursor: pointer;
border-radius: var(--ha-card-border-radius, 12px); border-radius: var(--ha-card-border-radius, 12px);
border: 2px dashed var(--primary-color); border: 2px dashed var(--primary-color);
height: var(--grid-row-height); height: var(--row-height);
order: 1; order: 1;
} }
.add:focus { .add:focus {

41
src/panels/lovelace/views/hui-sections-view.ts
View File

@ -73,9 +73,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
<div <div
class="container" class="container"
style=${styleMap({ style=${styleMap({
"--section-count": String( "--total-count": String(sectionsConfig.length + (editMode ? 1 : 0)),
sectionsConfig.length + (editMode ? 1 : 0)
),
})} })}
> >
${repeat( ${repeat(
@ -234,22 +232,25 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return css` return css`
:host { :host {
--grid-gap: 32px; --max-column-count: 4;
--grid-max-section-count: 4; --row-gap: var(--ha-view-sections-row-gap, 8px);
--grid-section-min-width: 320px; --column-gap: var(--ha-view-sections-column-gap, 32px);
--grid-section-max-width: 500px; --column-min-width: var(--ha-view-sections-column-min-width, 320px);
--column-max-width: var(--ha-view-sections-column-max-width, 500px);
display: block; display: block;
} }
.badges { .badges {
margin: 12px 8px 4px 8px; margin: 4px 0;
padding: var(--row-gap) var(--column-gap);
padding-bottom: 0;
font-size: 85%; font-size: 85%;
text-align: center; text-align: center;
} }
.container > * { .container > * {
position: relative; position: relative;
max-width: var(--grid-section-max-width); max-width: var(--column-max-width);
width: 100%; width: 100%;
} }
@ -258,15 +259,15 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
} }
.container { .container {
--max-count: min(var(--section-count), var(--grid-max-section-count)); --max-count: min(var(--total-count), var(--max-column-count));
--max-width: min( --max-width: min(
calc( calc(
(var(--max-count) + 1) * var(--grid-section-min-width) + (var(--max-count) + 1) * var(--column-min-width) +
(var(--max-count) + 2) * var(--grid-gap) - 1px (var(--max-count) + 2) * var(--column-gap) - 1px
), ),
calc( calc(
var(--max-count) * var(--grid-section-max-width) + var(--max-count) * var(--column-max-width) + (var(--max-count) + 1) *
(var(--max-count) + 1) * var(--grid-gap) var(--column-gap)
) )
); );
display: grid; display: grid;
@ -274,10 +275,10 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
justify-items: center; justify-items: center;
grid-template-columns: repeat( grid-template-columns: repeat(
auto-fit, auto-fit,
minmax(min(var(--grid-section-min-width), 100%), 1fr) minmax(min(var(--column-min-width), 100%), 1fr)
); );
grid-gap: 8px var(--grid-gap); gap: var(--row-gap) var(--column-gap);
padding: 8px var(--grid-gap); padding: var(--row-gap) var(--column-gap);
box-sizing: border-box; box-sizing: border-box;
max-width: var(--max-width); max-width: var(--max-width);
margin: 0 auto; margin: 0 auto;
@ -285,7 +286,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
@media (max-width: 600px) { @media (max-width: 600px) {
.container { .container {
--grid-gap: 8px; --column-gap: var(--row-gap);
} }
} }
@ -314,14 +315,14 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
} }
.create { .create {
margin-top: calc(66px + 8px); margin-top: calc(66px + var(--row-gap));
outline: none; outline: none;
background: none; background: none;
cursor: pointer; cursor: pointer;
border-radius: var(--ha-card-border-radius, 12px); border-radius: var(--ha-card-border-radius, 12px);
border: 2px dashed var(--primary-color); border: 2px dashed var(--primary-color);
order: 1; order: 1;
height: calc(66px + (8px + 2px) * 2); height: calc(66px + 2 * (var(--row-gap) + 2px));
padding: 8px; padding: 8px;
box-sizing: border-box; box-sizing: border-box;
} }