Better design for core search, fixes and style to scss

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

4 files changed, 107 insertions, 111 deletions

diff --git a/core/search/css/results.css b/core/search/css/results.css
deleted file mode 100644
index e2ccfe36ef8..00000000000
--- a/core/search/css/results.css
+++ /dev/null
@@ -1,105 +0,0 @@
-/* Copyright (c) 2011, Jan-Christoph Borchardt, http://jancborchardt.net
- This file is licensed under the Affero General Public License version 3 or later.
- See the COPYING-README file. */
-
-#searchresults {
-	background-color: #fff;
-	overflow-x: hidden;
-	text-overflow: ellipsis;
-	padding-top: 65px;
-	box-sizing: border-box;
-	z-index: 75;
-	/* account for margin-bottom in files list */
-	margin-top: -250px;
-}
-#searchresults.filter-empty {
-	/* remove whitespace on bottom when no search results, to fix layout */
-	margin-top: 0 !important;
-}
-
-#searchresults.hidden {
-	display: none;
-}
-#searchresults * {
-	box-sizing: content-box;
-}
-
-#searchresults .status {
-	background-color: rgba(255, 255, 255, .85);
-	height: 12px;
-	padding: 28px 0 28px 56px;
-	font-size: 18px;
-}
-.has-selection:not(.hidden) ~ #searchresults .status {
-	padding-left: 105px;
-}
-#searchresults .status.fixed {
-	position: fixed;
-	bottom: 0;
-	width: 100%;
-	z-index: 10;
-}
-
-#searchresults .status .spinner {
-	height: 16px;
-	width: 16px;
-	vertical-align: middle;
-	margin-left: 10px;
-}
-#searchresults table {
-	border-spacing:0;
-	table-layout:fixed;
-	top:0;
-	width:100%;
-}
-
-#searchresults td {
-	padding: 5px 14px;
-	font-style: normal;
-	vertical-align: middle;
-	border-bottom: none;
-}
-#searchresults td.icon {
-	text-align: right;
-	width: 40px;
-	height: 40px;
-	padding: 5px 0;
-	background-position: right center;
-	background-repeat: no-repeat;
-}
-.has-selection:not(.hidden) ~ #searchresults td.icon {
-	width: 91px;
-	background-size: 32px;
-}
-
-#searchresults tr.template {
-	display: none;
-}
-
-#searchresults .name,
-#searchresults .text,
-#searchresults .path {
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-#searchresults .text {
-	white-space: normal;
-	color: #545454;
-}
-#searchresults .path {
-	opacity: .5;
-}
-#searchresults .text em {
-	color: #545454;
-	font-weight: bold;
-	opacity: 1;
-}
-
-#searchresults tr.result * {
-	cursor:pointer;
-}
-
-#searchresults tr.current {
-	background-color:#ddd;
-}
diff --git a/core/search/css/results.scss b/core/search/css/results.scss
new file mode 100644
index 00000000000..0530d4ec851
--- /dev/null
+++ b/core/search/css/results.scss
@@ -0,0 +1,102 @@
+/*
+ * @copyright Copyright (c) 2018 Jan-Christoph Borchardt <hey@jancborchardt.net>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ * @author Jan-Christoph Borchardt <hey@jancborchardt.net>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+#searchresults {
+	overflow-x: hidden;
+	text-overflow: ellipsis;
+	padding-top: 51px; /* table row is 51px height */
+	box-sizing: border-box;
+	z-index: 75;
+	/* account for margin-bottom in files list */
+	margin-top: -250px;
+	table {
+		border-spacing: 0;
+		table-layout: fixed;
+		top: 0;
+		width: 100%;
+	}
+	tr {
+		&.result {
+			border-bottom: 1px solid $color-border;
+			* {
+				cursor: pointer;
+			}
+		}
+		&.template {
+			display: none;
+		}
+		&:hover,
+		&.current {
+			background-color: nc-darken($color-main-background, 3%);
+		}
+		td {
+			padding: 5px 9px;
+			font-style: normal;
+			vertical-align: middle;
+			border-bottom: none;
+			&.icon {
+				text-align: right;
+				width: 40px;
+				height: 40px;
+				padding: 5px 0;
+				background-position: right center;
+				background-repeat: no-repeat;
+			}
+			.has-selection:not(.hidden) ~ &.icon {
+				width: 50px;
+				padding-left: 41px;
+				background-size: 32px;
+			}
+		}
+
+		.name,
+		.text,
+		.path {
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+		.text {
+			white-space: normal;
+			color: #545454;
+		}
+		.path {
+			opacity: 0.5;
+		}
+		.text em {
+			color: #545454;
+			font-weight: bold;
+			opacity: 1;
+		}
+	}
+	.hidden {
+		display: none;
+	}
+	&.filter-empty {
+		/* remove whitespace on bottom when no search results, to fix layout */
+		margin-top: 0 !important;
+	}
+	.status.summary .info {
+		margin-left: 100px;
+	}
+}
diff --git a/core/search/js/search.js b/core/search/js/search.js
index b4175c49a3e..8c30ce74f1c 100644
--- a/core/search/js/search.js
+++ b/core/search/js/search.js
@@ -100,7 +100,6 @@
 			 */
 			this.search = function(query, inApps, page, size) {
 				if (query) {
-					OC.addStyle('core/search','results');
 					if (typeof page !== 'number') {
 						page = 1;
 					}
@@ -128,8 +127,8 @@
 
 						//show spinner
 						$searchResults.removeClass('hidden');
-						$status.addClass('status');
-						$status.html(t('core', 'Searching other places')+'<img class="spinner" alt="search in progress" src="'+OC.webroot+'/core/img/loading.gif" />');
+						$status.addClass('status emptycontent');
+						$status.html('<div class="icon-loading"></div><h2>' + t('core', 'Searching other places') + '</h2>');
 
 						// do the actual search query
 						$.getJSON(OC.generateUrl('core/search'), {query:query, inApps:inApps, page:page, size:size }, function(results) {
@@ -220,8 +219,8 @@
 					var error = t('core', 'No search results in other folders for {tag}{filter}{endtag}', {filter:lastQuery});
 					$status.append($('<h2>').html(error.replace('{tag}', '<strong>').replace('{endtag}', '</strong>')));
 				} else {
-					$status.removeClass('emptycontent').addClass('status');
-					$status.text(n('core', '{count} search result in another folder', '{count} search results in other folders', count, {count:count}));
+					$status.removeClass('emptycontent').addClass('status summary');
+					$status.html('<span class="info">' + n('core', '{count} search result in another folder', '{count} search results in other folders', count, {count:count}) + '</span>');
 				}
 			}
 			function renderCurrent() {
diff --git a/core/search/templates/part.results.html b/core/search/templates/part.results.html
index 612d02c18f8..6fad9f2cdd8 100644
--- a/core/search/templates/part.results.html
+++ b/core/search/templates/part.results.html
@@ -1,4 +1,3 @@
-<div id="status"></div>
 <table>
 	<tbody>
 		<tr class="template">
@@ -11,3 +10,4 @@
 		</tr>
 	</tbody>
 </table>
+<div id="status"><span></span></div>
\ No newline at end of file