From d8787feef72f274624ab103f2615d20b404de59b Mon Sep 17 00:00:00 2001
From: Jalal Fathi <jfathi.mail@gmail.com>
Date: Wed, 10 Jan 2018 22:34:45 +0100
Subject: [PATCH] Clear button element instead of iron-icon with class (#117)

* Added clear button element
* Use clear button instead of iron-icon
Currently needed to display the clear button in the filters-dialog (PR #90) without having to include the styles into the template.
---
 cosmoz-omnitable-column-amount.html   |  5 ++--
 cosmoz-omnitable-column-date.html     |  4 +--
 cosmoz-omnitable-column-datetime.html |  4 +--
 cosmoz-omnitable-column-number.html   | 13 +++++----
 cosmoz-omnitable-column-time.html     |  6 ++--
 cosmoz-omnitable-styles.html          | 24 ---------------
 ui-helpers/cosmoz-clear-button.html   | 42 +++++++++++++++++++++++++++
 7 files changed, 60 insertions(+), 38 deletions(-)
 create mode 100644 ui-helpers/cosmoz-clear-button.html

diff --git a/cosmoz-omnitable-column-amount.html b/cosmoz-omnitable-column-amount.html
index 32fca917..8cf6335e 100644
--- a/cosmoz-omnitable-column-amount.html
+++ b/cosmoz-omnitable-column-amount.html
@@ -5,6 +5,8 @@
 
 <link rel="import" href="../cosmoz-i18next/cosmoz-i18next.html">
 
+<link rel="import" href="ui-helpers/cosmoz-clear-button.html">
+
 <dom-module id="cosmoz-omnitable-column-amount">
 	<template>
 		<template class="cell">
@@ -19,6 +21,7 @@
 		</template>
 
 		<template class="header">
+			<cosmoz-clear-button on-click="resetFilter" hidden$="[[ !hasFilter(filter.*) ]]"></cosmoz-clear-button>
 			<paper-dropdown-menu label="[[ title ]]" placeholder="[[ _filterText ]]" title="[[ _tooltip ]]"
 					horizontal-align="[[ preferredDropdownHorizontalAlign ]]" opened="{{ headerFocused }}">
 				<div class="dropdown-content" slot="dropdown-content" style="padding: 15px; min-width: 150px;">
@@ -33,8 +36,6 @@ <h3 style="margin: 0;">[[ title ]]</h3>
 					</paper-input>
 				</div>
 			</paper-dropdown-menu>
-			<iron-icon icon="clear" class="header-clear-filter"
-				on-tap="resetFilter" visible$="[[ hasFilter(filter.*) ]]"></iron-icon>
 		</template>
 	</template>
 	<script type="text/javascript">
diff --git a/cosmoz-omnitable-column-date.html b/cosmoz-omnitable-column-date.html
index ac50b8e9..12445a19 100644
--- a/cosmoz-omnitable-column-date.html
+++ b/cosmoz-omnitable-column-date.html
@@ -5,6 +5,7 @@
 
 <link rel="import" href="../cosmoz-i18next/cosmoz-i18next.html">
 
+<link rel="import" href="ui-helpers/cosmoz-clear-button.html">
 <link rel="import" href="cosmoz-omnitable-column-date-behavior.html">
 
 <dom-module id="cosmoz-omnitable-column-date">
@@ -20,6 +21,7 @@
 		</template>
 
 		<template class="header">
+			<cosmoz-clear-button on-click="resetFilter" hidden$="[[ !hasFilter(filter.*) ]]"></cosmoz-clear-button>
 			<paper-dropdown-menu label="[[ title ]]" placeholder="[[ _filterText ]]" title="[[ _tooltip ]]"
 					horizontal-align="[[ preferredDropdownHorizontalAlign ]]" opened="{{ headerFocused }}">
 				<div class="dropdown-content" slot="dropdown-content" style="padding: 15px; min-width: 100px;">
@@ -34,8 +36,6 @@ <h3 style="margin: 0;">[[ title ]]</h3>
 					</paper-input>
 				</div>
 			</paper-dropdown-menu>
-			<iron-icon icon="clear" class="header-clear-filter"
-				on-tap="resetFilter" visible$="[[ hasFilter(filter.*) ]]"></iron-icon>
 		</template>
 	</template>
 	<script>
diff --git a/cosmoz-omnitable-column-datetime.html b/cosmoz-omnitable-column-datetime.html
index ec1a12bf..8eef9637 100644
--- a/cosmoz-omnitable-column-datetime.html
+++ b/cosmoz-omnitable-column-datetime.html
@@ -4,6 +4,7 @@
 <link rel="import" href="../datetime-local/datetime-local.html">
 <link rel="import" href="../paper-dropdown-menu/paper-dropdown-menu.html">
 
+<link rel="import" href="ui-helpers/cosmoz-clear-button.html">
 <link rel="import" href="../cosmoz-i18next/cosmoz-i18next.html">
 
 <dom-module id="cosmoz-omnitable-column-datetime">
@@ -19,6 +20,7 @@
 		</template>
 
 		<template class="header">
+			<cosmoz-clear-button on-click="resetFilter" hidden$="[[ !hasFilter(filter.*) ]]"></cosmoz-clear-button>
 			<paper-dropdown-menu label="[[ title ]]" placeholder="[[ _filterText ]]" title="[[ _tooltip ]]"
 					horizontal-align="[[ preferredDropdownHorizontalAlign ]]" opened="{{ headerFocused }}">
 				<div class="dropdown-content" slot="dropdown-content" style="padding: 15px; min-width: 100px;">
@@ -33,8 +35,6 @@ <h3 style="margin: 0;">[[ title ]]</h3>
 					</datetime-local>
 				</div>
 			</paper-dropdown-menu>
-			<iron-icon icon="clear" class="header-clear-filter"
-				on-tap="resetFilter" visible$="[[ hasFilter(filter.*) ]]"></iron-icon>
 		</template>
 	</template>
 	<script>
diff --git a/cosmoz-omnitable-column-number.html b/cosmoz-omnitable-column-number.html
index ae222d5a..ddaeb643 100644
--- a/cosmoz-omnitable-column-number.html
+++ b/cosmoz-omnitable-column-number.html
@@ -1,10 +1,14 @@
-<link rel="import" href="cosmoz-omnitable-column-behavior.html">
-<link rel="import" href="cosmoz-omnitable-column-range-behavior.html">
-<link rel="import" href="../cosmoz-i18next/cosmoz-i18next.html">
 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
+
 <link rel="import" href="../paper-input/paper-input.html">
 <link rel="import" href="../paper-dropdown-menu/paper-dropdown-menu.html">
 
+<link rel="import" href="../cosmoz-i18next/cosmoz-i18next.html">
+
+<link rel="import" href="ui-helpers/cosmoz-clear-button.html">
+<link rel="import" href="cosmoz-omnitable-column-behavior.html">
+<link rel="import" href="cosmoz-omnitable-column-range-behavior.html">
+
 <dom-module id="cosmoz-omnitable-column-number">
 	<template>
 		<template class="cell">
@@ -16,6 +20,7 @@
 		</template>
 
 		<template class="header">
+			<cosmoz-clear-button on-click="resetFilter" hidden$="[[ !hasFilter(filter.*) ]]"></cosmoz-clear-button>
 			<paper-dropdown-menu label="[[ title ]]" placeholder="[[ _filterText ]]" title="[[ _tooltip ]]"
 					horizontal-align="[[ preferredDropdownHorizontalAlign ]]" opened="{{ headerFocused }}">
 				<div class="dropdown-content" slot="dropdown-content" style="padding: 15px; min-width: 100px;">
@@ -28,8 +33,6 @@ <h3 style="margin: 0;">[[ title ]]</h3>
 					</paper-input>
 				</div>
 			</paper-dropdown-menu>
-			<iron-icon icon="clear" class="header-clear-filter"
-				on-tap="resetFilter" visible$="[[ hasFilter(filter.*) ]]"></iron-icon>
 		</template>
 	</template>
 	<script>
diff --git a/cosmoz-omnitable-column-time.html b/cosmoz-omnitable-column-time.html
index c55fe17e..3ca6a91a 100644
--- a/cosmoz-omnitable-column-time.html
+++ b/cosmoz-omnitable-column-time.html
@@ -1,7 +1,8 @@
-<link rel="import" href="cosmoz-omnitable-column-behavior.html">
 <link rel="import" href="../paper-dropdown-menu/paper-dropdown-menu.html">
 <link rel="import" href="../paper-input/paper-input.html">
 
+<link rel="import" href="ui-helpers/cosmoz-clear-button.html">
+<link rel="import" href="cosmoz-omnitable-column-behavior.html">
 <link rel="import" href="../cosmoz-i18next/cosmoz-i18next.html">
 <link rel="import" href="cosmoz-omnitable-column-date-behavior.html">
 
@@ -18,6 +19,7 @@
 		</template>
 
 		<template class="header">
+			<cosmoz-clear-button on-click="resetFilter" hidden$="[[ !hasFilter(filter.*) ]]"></cosmoz-clear-button>
 			<paper-dropdown-menu label="[[ title ]]" placeholder="[[ _filterText ]]" title="[[ _tooltip ]]"
 					horizontal-align="[[ preferredDropdownHorizontalAlign ]]" opened="{{ headerFocused }}">
 				<div class="dropdown-content" slot="dropdown-content" style="padding: 15px; min-width: 100px;">
@@ -30,8 +32,6 @@ <h3 style="margin: 0;">[[ title ]]</h3>
 					</paper-input>
 				</div>
 			</paper-dropdown-menu>
-			<iron-icon icon="clear" class="header-clear-filter"
-				on-tap="resetFilter" visible$="[[ hasFilter(filter.*) ]]"></iron-icon>
 		</template>
 
 	</template>
diff --git a/cosmoz-omnitable-styles.html b/cosmoz-omnitable-styles.html
index 175cdc89..62750d1e 100644
--- a/cosmoz-omnitable-styles.html
+++ b/cosmoz-omnitable-styles.html
@@ -51,30 +51,6 @@
 			.number-header-cell {
 				position: relative;
 			}
-			.header-clear-filter {
-				margin: 2px 4px;
-				color: #cdcdcd;
-				background-color: #a6a6a6;
-				border-radius: 500px;
-				cursor: pointer;
-				min-width: 16px;
-				width: 16px !important;
-				min-height: 16px;
-				height: 16px;
-				position: absolute;
-				top: 8px;
-				right: 2px;
-				padding: 2px;
-				box-sizing: border-box;
-				transition: background-color 0.25s, color 0.25s;
-			}
-			.header-clear-filter:not([visible]){
-				display: none !important;
-			}
-			.header-clear-filter:hover {
-				background-color: #b0b0b0;
-				color: #dfdfdf;
-			}
 
 			.tableContent {
 				overflow-y: auto;
diff --git a/ui-helpers/cosmoz-clear-button.html b/ui-helpers/cosmoz-clear-button.html
new file mode 100644
index 00000000..c8a9428c
--- /dev/null
+++ b/ui-helpers/cosmoz-clear-button.html
@@ -0,0 +1,42 @@
+<link rel="import" href="../../iron-icon/iron-icon.html">
+<link rel="import" href="../../iron-icons/iron-icons.html">
+
+<dom-module id="cosmoz-clear-button">
+    <template>
+        <style is="custom-style">
+            :host {
+                position: absolute;
+                right: 0;
+                z-index: +1;
+            }
+
+            iron-icon {
+                top: 10px;
+                margin: 2px 7px;
+                color: #cdcdcd;
+                background-color: #a6a6a6;
+                border-radius: 500px;
+                cursor: pointer;
+                min-width: 16px;
+                width: 16px !important;
+                min-height: 16px;
+                height: 16px;
+                padding: 2px;
+                box-sizing: border-box;
+                transition: background-color 0.25s, color 0.25s;
+                float: right;
+            }
+
+			iron-icon:hover {
+				background-color: #b0b0b0;
+				color: #dfdfdf;
+			}
+        </style>
+        <iron-icon icon="clear"></iron-icon>
+    </template>
+    <script type="text/javascript">
+        Polymer({
+        	is: 'cosmoz-clear-button'
+        });
+    </script>
+</dom-module>