Updates on search design
Henrique Dias
parent
a8a2b38017
commit
990cadd744
|
|
@ -1,15 +1,18 @@
|
|||
<template>
|
||||
<div id="search" v-on:mouseleave="hover = false" v-on:click="click" v-bind:class="{ active: focus || hover, ongoing }">
|
||||
<i class="material-icons" title="Search">search</i>
|
||||
<input type="text"
|
||||
v-model.trim="value"
|
||||
v-on:focus="focus = true"
|
||||
v-on:blur="focus = false"
|
||||
v-on:keyup="keyup"
|
||||
v-on:keyup.enter="submit"
|
||||
aria-label="Write here to search"
|
||||
:placeholder="placeholder()">
|
||||
<div v-on:mouseover="hover = true">
|
||||
<div id="search" @click="active = true" v-bind:class="{ active , ongoing }">
|
||||
<div id="input">
|
||||
<button v-if="active" class="action" @click="close" >
|
||||
<i class="material-icons">arrow_back</i>
|
||||
</button>
|
||||
<i v-else class="material-icons">search</i>
|
||||
<input type="text"
|
||||
v-model.trim="value"
|
||||
@keyup="keyup"
|
||||
@keyup.enter="submit"
|
||||
aria-label="Write here to search"
|
||||
:placeholder="placeholder()">
|
||||
</div>
|
||||
<div id="result">
|
||||
<div>
|
||||
<span v-if="search.length === 0 && commands.length === 0">{{ text() }}</span>
|
||||
<ul v-else-if="search.length > 0">
|
||||
|
|
@ -34,8 +37,7 @@ export default {
|
|||
data: function () {
|
||||
return {
|
||||
value: '',
|
||||
hover: false,
|
||||
focus: false,
|
||||
active: false,
|
||||
ongoing: false,
|
||||
scrollable: null,
|
||||
search: [],
|
||||
|
|
@ -44,9 +46,21 @@ export default {
|
|||
},
|
||||
computed: mapState(['user']),
|
||||
mounted: function () {
|
||||
this.scrollable = document.querySelector('#search > div')
|
||||
this.scrollable = document.querySelector('#search #result')
|
||||
|
||||
window.addEventListener('keydown', (event) => {
|
||||
// Esc!
|
||||
if (event.keyCode === 27) {
|
||||
this.active = false
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
close: function (event) {
|
||||
event.stopPropagation()
|
||||
event.preventDefault()
|
||||
this.active = false
|
||||
},
|
||||
placeholder: function () {
|
||||
if (this.user.allowCommands && this.user.commands.length > 0) {
|
||||
return 'Search or execute a command...'
|
||||
|
|
@ -55,6 +69,10 @@ export default {
|
|||
return 'Search...'
|
||||
},
|
||||
text: function () {
|
||||
if (this.ongoing) {
|
||||
return ''
|
||||
}
|
||||
|
||||
if (this.value.length === 0) {
|
||||
if (this.user.allowCommands && this.user.commands.length > 0) {
|
||||
return `Search or use one of your supported commands: ${this.user.commands.join(', ')}.`
|
||||
|
|
@ -69,7 +87,13 @@ export default {
|
|||
return 'Press enter to execute.'
|
||||
}
|
||||
},
|
||||
keyup: function () {
|
||||
keyup: function (event) {
|
||||
if (event.keyCode === 27) {
|
||||
this.active = false
|
||||
return
|
||||
}
|
||||
|
||||
this.active = true
|
||||
this.search.length = 0
|
||||
this.commands.length = 0
|
||||
},
|
||||
|
|
|
|||
|
|
@ -85,22 +85,40 @@ header > div:last-child {
|
|||
|
||||
#search {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding: 0.75em;
|
||||
vertical-align: middle;
|
||||
border-radius: 0.3em;
|
||||
background-color: #f5f5f5;
|
||||
transition: .1s ease all;
|
||||
width: 100%;
|
||||
max-width: 25em;
|
||||
}
|
||||
|
||||
#search.active {
|
||||
background-color: #fff;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .12);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
#search #input {
|
||||
background-color: #f5f5f5;
|
||||
display: flex;
|
||||
padding: 0.75em;
|
||||
border-radius: 0.3em;
|
||||
transition: .1s ease all;
|
||||
align-items: center;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#search.active #input {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.075);
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
||||
background-color: #fff;
|
||||
height: 4em;
|
||||
}
|
||||
|
||||
#search.active > div {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
#search.active i,
|
||||
|
|
@ -108,12 +126,8 @@ header > div:last-child {
|
|||
color: #212121;
|
||||
}
|
||||
|
||||
#search i,
|
||||
#search input {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#search i {
|
||||
#search #input > .action,
|
||||
#search #input > i {
|
||||
margin-right: 0.3em;
|
||||
user-select: none;
|
||||
}
|
||||
|
|
@ -125,85 +139,76 @@ header > div:last-child {
|
|||
background-color: transparent;
|
||||
}
|
||||
|
||||
#search.active div {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
top: 100%;
|
||||
#search #result {
|
||||
visibility: visible;
|
||||
max-height: none;
|
||||
background-color: #fff;
|
||||
text-align: left;
|
||||
color: #ccc;
|
||||
padding: 0;
|
||||
height: 0;
|
||||
transition: .1s ease height, .1s ease padding;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#search.active #result {
|
||||
padding: .5em;
|
||||
height: calc(100% - 4em);
|
||||
}
|
||||
|
||||
#search ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#search li {
|
||||
margin-bottom: .5em;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
#search>div {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
z-index: 999999;
|
||||
background-color: #fff;
|
||||
text-align: left;
|
||||
color: #ccc;
|
||||
box-shadow: 0 2px 3px rgba(0, 0, 0, .06), 0 2px 2px rgba(0, 0, 0, .12);
|
||||
padding: .5em;
|
||||
border-bottom-left-radius: .3em;
|
||||
border-bottom-right-radius: .3em;
|
||||
transition: .1s ease all;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
max-height: 50vh;
|
||||
#search #result div {
|
||||
white-space: pre-wrap;
|
||||
white-space: -moz-pre-wrap;
|
||||
white-space: -pre-wrap;
|
||||
white-space: -o-pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
#search>div div {
|
||||
white-space: pre-wrap;
|
||||
white-space: -moz-pre-wrap;
|
||||
white-space: -pre-wrap;
|
||||
white-space: -o-pre-wrap;
|
||||
word-wrap: break-word;
|
||||
#search #result p {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
display: none;
|
||||
margin: 0;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
#search>div p {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
display: none;
|
||||
margin: 0;
|
||||
max-width: none;
|
||||
#search.ongoing #result p {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#search.ongoing p {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#search.active div i,
|
||||
#sidebar #search.active div i {
|
||||
color: #ccc;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
display: table;
|
||||
#search.active #result i {
|
||||
color: #ccc;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
display: table;
|
||||
}
|
||||
|
||||
#search::-webkit-input-placeholder {
|
||||
color: rgba(255, 255, 255, .5);
|
||||
color: rgba(255, 255, 255, .5);
|
||||
}
|
||||
|
||||
#search:-moz-placeholder {
|
||||
opacity: 1;
|
||||
color: rgba(255, 255, 255, .5);
|
||||
opacity: 1;
|
||||
color: rgba(255, 255, 255, .5);
|
||||
}
|
||||
|
||||
#search::-moz-placeholder {
|
||||
opacity: 1;
|
||||
color: rgba(255, 255, 255, .5);
|
||||
opacity: 1;
|
||||
color: rgba(255, 255, 255, .5);
|
||||
}
|
||||
|
||||
#search:-ms-input-placeholder {
|
||||
color: rgba(255, 255, 255, .5);
|
||||
}
|
||||
color: rgba(255, 255, 255, .5);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue