From bb6c46180d97cc105a915bcf1053c784f66a94bc Mon Sep 17 00:00:00 2001
From: NovapaX <maarten@oosterwijkbrandpreventie.nl>
Date: Wed, 28 Feb 2018 21:56:18 +0100
Subject: [PATCH] Hide the date-clear icon and style vaadin-date-input like a
 paper input (#956)

* 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
---
 panels/history/ha-panel-history.html    |  6 +-
 panels/logbook/ha-panel-logbook.html    |  2 +
 src/resources/ha-date-picker-style.html | 94 +++++++++++++++++++++++++
 3 files changed, 98 insertions(+), 4 deletions(-)
 create mode 100644 src/resources/ha-date-picker-style.html

diff --git a/panels/history/ha-panel-history.html b/panels/history/ha-panel-history.html
index 7d38b24828..9f074eb30f 100644
--- a/panels/history/ha-panel-history.html
+++ b/panels/history/ha-panel-history.html
@@ -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
diff --git a/panels/logbook/ha-panel-logbook.html b/panels/logbook/ha-panel-logbook.html
index 7c008e157d..16c6aa9bd9 100644
--- a/panels/logbook/ha-panel-logbook.html
+++ b/panels/logbook/ha-panel-logbook.html
@@ -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>
diff --git a/src/resources/ha-date-picker-style.html b/src/resources/ha-date-picker-style.html
new file mode 100644
index 0000000000..9a1233a37d
--- /dev/null
+++ b/src/resources/ha-date-picker-style.html
@@ -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>