* Improve style of top nav search input (#1392)

* * Improve style of top nav search input

* Implement clear input text on input

* ! Fix to only have top nav input to add new clear text box button

* * Update button design & fix accessibility flaw

* * Update spacing of new button

* * Update input box padding-left to use the same value as padding-right

* * Updating button padding
This commit is contained in:
PikachuEXE 2021-09-06 18:09:11 +08:00 committed by GitHub
parent 1fe733524c
commit be58077025
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 80 additions and 2 deletions

View File

@ -2,6 +2,47 @@
position: relative;
}
.clearInputTextButton {
position: absolute;
/* horizontal intentionally reduced to keep "I-beam pointer" visible */
padding: 10px 8px;
top: 5px;
left: 0;
cursor: pointer;
border-radius: 200px 200px 200px 200px;
color: var(--primary-text-color);
}
.clearInputTextButton:hover {
background-color: var(--side-nav-hover-color);
-moz-transition: background 0.2s ease-in;
-o-transition: background 0.2s ease-in;
transition: background 0.2s ease-in;
}
.forceTextColor .clearInputTextButton:hover {
background-color: var(--primary-color-hover);
}
.clearInputTextButton:active {
background-color: var(--tertiary-text-color);
-moz-transition: background 0.2s ease-in;
-o-transition: background 0.2s ease-in;
transition: background 0.2s ease-in;
}
.search .clearInputTextButton {
top: 12px;
}
.forceTextColor .clearInputTextButton {
color: #EEEEEE;
}
.forceTextColor .clearInputTextButton:active {
background-color: var(--primary-color-active);
}
.ft-input {
box-sizing: border-box;
-webkit-box-sizing: border-box;
@ -61,6 +102,14 @@
color: #EEEEEE;
}
.ft-input-component.showArrow .ft-input {
/*
With arrow present means
the text might get under the arrow with normal padding
*/
padding-right: 2em;
}
.inputAction:hover {
background-color: var(--side-nav-hover-color);
-moz-transition: background 0.2s ease-in;
@ -106,3 +155,7 @@
background-color: #ccc;
/* color: white; */
}
.showClearTextButton .ft-input {
padding-left: 2em;
}

View File

@ -19,6 +19,10 @@ export default Vue.extend({
type: Boolean,
default: true
},
showClearTextButton: {
type: Boolean,
default: false
},
showLabel: {
type: Boolean,
default: false
@ -97,6 +101,11 @@ export default Vue.extend({
this.$emit('input', this.inputData)
},
handleClearTextClick: function () {
this.inputData = ''
this.$emit('input', this.inputData)
},
addListener: function () {
const inputElement = document.getElementById(this.id)

View File

@ -3,7 +3,9 @@
class="ft-input-component"
:class="{
search: isSearch,
forceTextColor: forceTextColor
forceTextColor: forceTextColor,
showArrow: showArrow,
showClearTextButton: showClearTextButton
}"
>
<label
@ -18,6 +20,17 @@
:tooltip="tooltip"
/>
</label>
<font-awesome-icon
v-if="showClearTextButton"
icon="times-circle"
class="clearInputTextButton"
tabindex="0"
role="button"
title="$t('Search Bar.Clear Input')"
@click="handleClearTextClick"
@keydown.space.prevent="handleClearTextClick"
@keydown.enter.prevent="handleClearTextClick"
/>
<input
:id="id"
v-model="inputData"

View File

@ -70,6 +70,7 @@
:select-on-focus="true"
:data-list="searchSuggestionsDataList"
:spellcheck="false"
:show-clear-text-button="true"
@input="getSearchSuggestionsDebounce"
@click="goToSearch"
/>

View File

@ -38,6 +38,8 @@ A new blog is now available, $. Click to view more: A new blog is now available,
# Search Bar
Search / Go to URL: Search / Go to URL
Search Bar:
Clear Input: Clear Input
# In Filter Button
Search Filters:
Search Filters: Search Filters