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.
Neovici · Jan 10, 2018 · d8787fe · d8787fe
1 parent 33e0018
commit d8787fe
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 38 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>