Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clear button element instead of iron-icon with class #117

Merged
merged 6 commits into from
Jan 10, 2018
Merged

Clear button element instead of iron-icon with class #117

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a17dbdd
Added clear button element
JaySunSyn Dec 29, 2017
ddc8731
clear button instead of iron-icon
JaySunSyn Dec 29, 2017
dae3d74
Merge remote-tracking branch 'upstream/master' into clear-button-element
JaySunSyn Jan 10, 2018
c1a703d
replaced on-tap with on-click
JaySunSyn Jan 10, 2018
5b9ad88
fixed icon position
JaySunSyn Jan 10, 2018
bbb3c5f
Merge branch 'master' into clear-button-element
plequang Jan 10, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions cosmoz-omnitable-column-amount.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -33,8 +35,7 @@ <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>
<cosmoz-clear-button on-tap="resetFilter" hidden$="[[ !hasFilter(filter.*) ]]"></cosmoz-clear-button>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can use click instead of tap event. See https://www.polymer-project.org/2.0/docs/devguide/gesture-events

</template>
</template>
<script type="text/javascript">
Expand Down
4 changes: 2 additions & 2 deletions cosmoz-omnitable-column-date.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -34,8 +35,7 @@ <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>
<cosmoz-clear-button on-tap="resetFilter" hidden$="[[ !hasFilter(filter.*) ]]"></cosmoz-clear-button>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Prefer click event

</template>
</template>
<script>
Expand Down
4 changes: 2 additions & 2 deletions cosmoz-omnitable-column-datetime.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -33,8 +34,7 @@ <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>
<cosmoz-clear-button on-tap="resetFilter" hidden$="[[ !hasFilter(filter.*) ]]"></cosmoz-clear-button>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Prefer click event

</template>
</template>
<script>
Expand Down
13 changes: 8 additions & 5 deletions cosmoz-omnitable-column-number.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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">
Expand All @@ -28,8 +32,7 @@ <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>
<cosmoz-clear-button on-tap="resetFilter" hidden$="[[ !hasFilter(filter.*) ]]"></cosmoz-clear-button>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Prefer click event

</template>
</template>
<script>
Expand Down
6 changes: 3 additions & 3 deletions cosmoz-omnitable-column-time.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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">

Expand Down Expand Up @@ -30,8 +31,7 @@ <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>
<cosmoz-clear-button on-tap="resetFilter" hidden$="[[ !hasFilter(filter.*) ]]"></cosmoz-clear-button>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Prefer click event

</template>

</template>
Expand Down
24 changes: 0 additions & 24 deletions cosmoz-omnitable-styles.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
41 changes: 41 additions & 0 deletions ui-helpers/cosmoz-clear-button.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<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 {
display: block;
}

iron-icon {
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;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

position:absolute specifiies position from the edges of the closest relative ancestor.
In the filter dialog context, this ancestor is the paper-dialog-scrollable element, so the clear icon will always be on the top right of the dialog.
I guess it should be fixed with something like:

:host {
   display: block;
   position: relative

top: 8px;
right: 2px;
padding: 2px;
box-sizing: border-box;
transition: background-color 0.25s, color 0.25s;
}

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>