Merge pull request #3249 from nextcloud/add-clear-search-button
Add clear search button
This commit is contained in:
commit
382e20f573
|
@ -138,6 +138,10 @@ img, object, video, button, textarea, input, select {
|
||||||
background-image: url('../img/actions/close.svg?v=1');
|
background-image: url('../img/actions/close.svg?v=1');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.icon-close-white {
|
||||||
|
background-image: url('../img/actions/close-white.svg?v=1');
|
||||||
|
}
|
||||||
|
|
||||||
.icon-comment {
|
.icon-comment {
|
||||||
background-image: url('../img/actions/comment.svg?v=1');
|
background-image: url('../img/actions/comment.svg?v=1');
|
||||||
}
|
}
|
||||||
|
|
|
@ -170,28 +170,49 @@ body {
|
||||||
|
|
||||||
/* Searchbox */
|
/* Searchbox */
|
||||||
|
|
||||||
.searchbox input[type='search'] {
|
.searchbox {
|
||||||
position: relative;
|
position: relative;
|
||||||
font-size: 1.2em;
|
input[type='search'] {
|
||||||
padding: 3px;
|
position: relative;
|
||||||
padding-left: 25px;
|
font-size: 1.2em;
|
||||||
background: transparent url('../img/actions/search-white.svg?v=1') no-repeat 6px center;
|
padding: 3px;
|
||||||
color: #fff;
|
padding-left: 25px;
|
||||||
border: 0;
|
background: transparent url('../img/actions/search-white.svg?v=1') no-repeat 6px center;
|
||||||
border-radius: 3px;
|
|
||||||
margin-top: 3px;
|
|
||||||
width: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
-webkit-transition: all 100ms;
|
|
||||||
transition: all 100ms;
|
|
||||||
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=70)';
|
|
||||||
opacity: .7;
|
|
||||||
&:focus, &:active, &:valid {
|
|
||||||
color: #fff;
|
color: #fff;
|
||||||
width: 155px;
|
border: 0;
|
||||||
cursor: text;
|
border-radius: 3px;
|
||||||
background-color: #0082c9 !important;
|
margin-top: 3px;
|
||||||
border: 1px solid rgba(255, 255, 255, 0.5) !important;
|
width: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-transition: all 100ms;
|
||||||
|
transition: all 100ms;
|
||||||
|
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=70)';
|
||||||
|
opacity: .7;
|
||||||
|
&:focus, &:active, &:valid {
|
||||||
|
color: #fff;
|
||||||
|
width: 155px;
|
||||||
|
cursor: text;
|
||||||
|
background-color: #0082c9 !important;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.5) !important;
|
||||||
|
}
|
||||||
|
& ~ .icon-close-white {
|
||||||
|
display: inline;
|
||||||
|
position: absolute;
|
||||||
|
width: 15px;
|
||||||
|
height: 32px;
|
||||||
|
right: 3px;
|
||||||
|
top: 0;
|
||||||
|
&, &:focus, &:active, &:hover {
|
||||||
|
border: none;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:not(:valid) ~ .icon-close-white {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
&::-webkit-search-cancel-button {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,4 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1">
|
||||||
|
<path fill="#fff" d="m12.95 11.536l-1.414 1.414-3.536-3.536-3.535 3.536-1.415-1.414 3.536-3.536-3.536-3.536 1.415-1.414 3.535 3.536 3.516-3.555 1.434 1.434-3.536 3.535z"/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 313 B |
|
@ -405,6 +405,10 @@ $(document).ready(function() {
|
||||||
OC.Search = new OCA.Search($('#searchbox'), $('#searchresults'));
|
OC.Search = new OCA.Search($('#searchbox'), $('#searchresults'));
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
$('#searchbox + .icon-close-white').click(function() {
|
||||||
|
OC.Search.clear();
|
||||||
|
$('#searchbox').focus();
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -69,6 +69,7 @@
|
||||||
<input id="searchbox" type="search" name="query"
|
<input id="searchbox" type="search" name="query"
|
||||||
value="" required
|
value="" required
|
||||||
autocomplete="off" tabindex="5">
|
autocomplete="off" tabindex="5">
|
||||||
|
<button class="icon-close-white" type="reset"></button>
|
||||||
</form>
|
</form>
|
||||||
<div id="settings">
|
<div id="settings">
|
||||||
<div id="expand" tabindex="6" role="link" class="menutoggle">
|
<div id="expand" tabindex="6" role="link" class="menutoggle">
|
||||||
|
|
Loading…
Reference in New Issue