mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 09:46:36 +00:00
Reduce control select menu component size (#17657)
This commit is contained in:
Paul Bottein
GitHub
parent
98d1a55d35
commit
567bd9831f
@ -0,0 +1,3 @@
|
||||
---
|
||||
title: Control Select Menu
|
||||
---
|
||||
146
gallery/src/pages/components/ha-control-select-menu.ts
Normal file
146
gallery/src/pages/components/ha-control-select-menu.ts
Normal file
@ -0,0 +1,146 @@
|
||||
import { mdiFan, mdiFanSpeed1, mdiFanSpeed2, mdiFanSpeed3 } from "@mdi/js";
|
||||
import { LitElement, TemplateResult, css, html, nothing } from "lit";
|
||||
import { customElement } from "lit/decorators";
|
||||
import { repeat } from "lit/directives/repeat";
|
||||
import "../../../../src/components/ha-card";
|
||||
import "../../../../src/components/ha-control-select-menu";
|
||||
import "../../../../src/components/ha-list-item";
|
||||
import "../../../../src/components/ha-svg-icon";
|
||||
|
||||
type SelectMenuOptions = {
|
||||
label: string;
|
||||
value: string;
|
||||
icon?: string;
|
||||
};
|
||||
|
||||
type SelectMenu = {
|
||||
label: string;
|
||||
icon: string;
|
||||
class?: string;
|
||||
disabled?: boolean;
|
||||
options: SelectMenuOptions[];
|
||||
};
|
||||
|
||||
const selects: SelectMenu[] = [
|
||||
{
|
||||
label: "Basic select",
|
||||
icon: mdiFan,
|
||||
options: [
|
||||
{
|
||||
value: "low",
|
||||
label: "Low",
|
||||
},
|
||||
{
|
||||
value: "medium",
|
||||
label: "Medium",
|
||||
},
|
||||
{
|
||||
value: "high",
|
||||
label: "High",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Select with icons",
|
||||
icon: mdiFan,
|
||||
options: [
|
||||
{
|
||||
value: "low",
|
||||
label: "Low",
|
||||
icon: mdiFanSpeed1,
|
||||
},
|
||||
{
|
||||
value: "medium",
|
||||
label: "Medium",
|
||||
icon: mdiFanSpeed2,
|
||||
},
|
||||
{
|
||||
value: "high",
|
||||
label: "High",
|
||||
icon: mdiFanSpeed3,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Disabled select",
|
||||
icon: mdiFan,
|
||||
options: [],
|
||||
disabled: true,
|
||||
},
|
||||
];
|
||||
|
||||
@customElement("demo-components-ha-control-select-menu")
|
||||
export class DemoHaControlSelectMenu extends LitElement {
|
||||
protected render(): TemplateResult {
|
||||
return html`
|
||||
<ha-card>
|
||||
${repeat(
|
||||
selects,
|
||||
(select) => html`
|
||||
<div class="card-content">
|
||||
<ha-control-select-menu
|
||||
.label=${select.label}
|
||||
?disabled=${select.disabled}
|
||||
fixedMenuPosition
|
||||
naturalMenuWidth
|
||||
>
|
||||
<ha-svg-icon slot="icon" .path=${select.icon}></ha-svg-icon>
|
||||
${select.options.map(
|
||||
(option) => html`
|
||||
<ha-list-item
|
||||
.value=${option.value}
|
||||
.graphic=${option.icon ? "icon" : undefined}
|
||||
>
|
||||
${option.icon
|
||||
? html`
|
||||
<ha-svg-icon
|
||||
slot="graphic"
|
||||
.path=${option.icon}
|
||||
></ha-svg-icon>
|
||||
`
|
||||
: nothing}
|
||||
${option.label ?? option.value}
|
||||
</ha-list-item>
|
||||
`
|
||||
)}
|
||||
</ha-control-select-menu>
|
||||
</div>
|
||||
`
|
||||
)}
|
||||
</ha-card>
|
||||
`;
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return css`
|
||||
ha-card {
|
||||
max-width: 600px;
|
||||
margin: 24px auto;
|
||||
}
|
||||
pre {
|
||||
margin-top: 0;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
label {
|
||||
font-weight: 600;
|
||||
}
|
||||
.custom {
|
||||
--control-button-icon-color: var(--primary-color);
|
||||
--control-button-background-color: var(--primary-color);
|
||||
--control-button-background-opacity: 0.2;
|
||||
--control-button-border-radius: 18px;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"demo-components-ha-control-select-menu": DemoHaControlSelectMenu;
|
||||
}
|
||||
}
|
||||
@ -170,18 +170,18 @@ export class HaControlSelectMenu extends SelectBase {
|
||||
--control-select-menu-text-color: var(--primary-text-color);
|
||||
--control-select-menu-background-color: var(--disabled-color);
|
||||
--control-select-menu-background-opacity: 0.2;
|
||||
--control-select-menu-border-radius: 16px;
|
||||
--control-select-menu-border-radius: 14px;
|
||||
--control-select-menu-min-width: 120px;
|
||||
--control-select-menu-max-width: 200px;
|
||||
--control-select-menu-width: 100%;
|
||||
--mdc-icon-size: 24px;
|
||||
--mdc-icon-size: 20px;
|
||||
color: var(--primary-text-color);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.select-anchor {
|
||||
color: var(--control-select-menu-text-color);
|
||||
height: 56px;
|
||||
padding: 8px 12px;
|
||||
height: 48px;
|
||||
padding: 6px 10px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
@ -199,11 +199,16 @@ export class HaControlSelectMenu extends SelectBase {
|
||||
font-size: inherit;
|
||||
transition: color 180ms ease-in-out;
|
||||
color: var(--control-text-icon-color);
|
||||
gap: 12px;
|
||||
gap: 10px;
|
||||
min-width: var(--control-select-menu-min-width);
|
||||
max-width: var(--control-select-menu-max-width);
|
||||
width: var(--control-select-menu-width);
|
||||
user-select: none;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
letter-spacing: 0.25px;
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
@ -225,24 +230,14 @@ export class HaControlSelectMenu extends SelectBase {
|
||||
|
||||
.label {
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 16px;
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
|
||||
.select-no-value .label {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0.5px;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
letter-spacing: inherit;
|
||||
}
|
||||
|
||||
.select-anchor::before {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user