Merge pull request #3249 from nextcloud/add-clear-search-button

Add clear search button

core/css/icons.scss

@@ -138,6 +138,10 @@ img, object, video, button, textarea, input, select {
 	background-image: url('../img/actions/close.svg?v=1');
 }
 
+.icon-close-white {
+	background-image: url('../img/actions/close-white.svg?v=1');
+}
+
 .icon-comment {
 	background-image: url('../img/actions/comment.svg?v=1');
 }

core/css/styles.scss

@@ -170,28 +170,49 @@ body {
 
 /* Searchbox */
 
-.searchbox input[type='search'] {
+.searchbox {
 	position: relative;
-	font-size: 1.2em;
-	padding: 3px;
-	padding-left: 25px;
-	background: transparent url('../img/actions/search-white.svg?v=1') no-repeat 6px center;
-	color: #fff;
-	border: 0;
-	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 {
+	input[type='search'] {
+		position: relative;
+		font-size: 1.2em;
+		padding: 3px;
+		padding-left: 25px;
+		background: transparent url('../img/actions/search-white.svg?v=1') no-repeat 6px center;
 		color: #fff;
-		width: 155px;
-		cursor: text;
-		background-color: #0082c9 !important;
-		border: 1px solid rgba(255, 255, 255, 0.5) !important;
+		border: 0;
+		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;
+			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;
+		}
 	}
 }
 

core/img/actions/close-white.svg

@@ -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>

core/search/js/search.js

@@ -405,6 +405,10 @@ $(document).ready(function() {
 			OC.Search = new OCA.Search($('#searchbox'), $('#searchresults'));
 		});
 	}
+	$('#searchbox + .icon-close-white').click(function() {
+		OC.Search.clear();
+		$('#searchbox').focus();
+	});
 });
 
 /**

core/templates/layout.user.php

@@ -69,6 +69,7 @@
 					<input id="searchbox" type="search" name="query"
 						value="" required
 						autocomplete="off" tabindex="5">
+					<button class="icon-close-white" type="reset"></button>
 				</form>
 				<div id="settings">
 					<div id="expand" tabindex="6" role="link" class="menutoggle">