jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-22 16:56:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Hide the date-clear icon and style vaadin-date-input like a paper input (#956)

Browse Source 
* styling the vaadin-date-input like a paper input.

* move date-picker styles to ha-style
so they get reused automatically

* move vaadin date-picker-styles to thier own file.

* only disable clear button on required field.
and some style changes
This commit is contained in:
NovapaX 2018-02-28 21:56:18 +01:00 committed by Paulus Schoutsen
parent 3ddb456970
commit bb6c46180d
3 changed files with 98 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
panels/history/ha-panel-history.html
View File

@ -14,6 +14,7 @@
<link rel="import" href="../../src/components/ha-menu-button.html">
<link rel="import" href="../../src/data/ha-state-history-data.html">
<link rel="import" href="../../src/resources/ha-style.html">
<link rel="import" href="../../src/resources/ha-date-picker-style.html">
<link rel='import' href='../../src/util/hass-mixins.html'>
<dom-module id="ha-panel-history">
@ -24,10 +25,6 @@
}
vaadin-date-picker {
--vaadin-date-picker-clear-icon: {
display: none;
}
margin-bottom: 24px;
margin-right: 16px;
max-width: 200px;
}
@ -64,6 +61,7 @@
value='{{_currentDate}}'
label="[[localize('ui.panel.history.showing_entries')]]"
disabled='[[isLoadingData]]'
required
></vaadin-date-picker>
<paper-dropdown-menu

2
panels/logbook/ha-panel-logbook.html
View File

@ -12,6 +12,7 @@
<link rel="import" href="../../src/components/ha-menu-button.html">
<link rel="import" href="../../src/resources/ha-style.html">
<link rel="import" href="../../src/resources/ha-date-picker-style.html">
<link rel='import' href='../../src/util/hass-mixins.html'>
<link rel="import" href="./ha-logbook.html">
@ -70,6 +71,7 @@
value='{{_currentDate}}'
label="[[localize('ui.panel.logbook.showing_entries')]]"
disabled='[[isLoading]]'
required
></vaadin-date-picker>
<ha-logbook hass='[[hass]]' entries="[[entries]]" hidden$='[[isLoading]]'></ha-logbook>

94
src/resources/ha-date-picker-style.html Normal file
View File

@ -0,0 +1,94 @@
<dom-module id="ha-date-picker-vaadin-date-picker-styles" theme-for="vaadin-date-picker">
<template>
<style>
:host([required]) [part~="clear-button"] {
display: none;
}
[part~="toggle-button"] {
color: var(--secondary-text-color);
font-size: var(--paper-font-subhead_-_font-size);
margin-right: 5px;
}
:host([opened]) [part~="toggle-button"] {
color: var(--primary-color);
}
</style>
</template>
</dom-module>
<dom-module id="ha-date-picker-text-field-styles" theme-for="vaadin-text-field">
<template>
<style>
:host {
padding: 8px 0;
}
[part~="label"] {
color: var(--paper-input-container-color, var(--secondary-text-color));
font-family: var(--paper-font-caption_-_font-family);
font-size: var(--paper-font-caption_-_font-size);
font-weight: var(--paper-font-caption_-_font-weight);
letter-spacing: var(--paper-font-caption_-_letter-spacing);
line-height: var(--paper-font-caption_-_line-height);
}
:host([focused]) [part~="label"] {
color: var(--paper-input-container-focus-color, var(--primary-color));
}
[part~="input-field"] {
padding-bottom: 1px;
border-bottom: 1px solid var(--paper-input-container-color, var(--secondary-text-color));
line-height: var(--paper-font-subhead_-_line-height);
}
:host([focused]) [part~="input-field"] {
padding-bottom: 0;
border-bottom: 2px solid var(--paper-input-container-focus-color, var(--primary-color));
}
[part~="value"]:focus {
outline: none;
}
[part~="value"] {
font-size: var(--paper-font-subhead_-_font-size);
font-family: inherit;
border: none;
background: transparent;
}
</style>
</template>
</dom-module>
<dom-module id="ha-date-picker-button-styles" theme-for="vaadin-button">
<template>
<style>
:host([part~="today-button"]) [part~="button"]::before {
content: "⦿";
color: var(--primary-color);
}
[part~="button"] {
font-family: inherit;
font-size: var(--paper-font-subhead_-_font-size);
border: none;
background: transparent;
cursor: pointer;
min-height: var(--paper-item-min-height, 48px);
padding: 0px 16px;
}
[part~="button"]:focus {
outline: none;
}
</style>
</template>
</dom-module>
<dom-module id="ha-date-picker-overlay-styles" theme-for="vaadin-date-picker-overlay">
<template>
<style include="vaadin-date-picker-overlay-default-theme">
[part~="toolbar"] {
padding: 0.3em;
}
</style>
</template>
</dom-module>