From e5f08620d4bc285087704c9a018bd7fb0a28bdfb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Mon, 18 Jun 2018 13:12:03 +0200 Subject: [PATCH] Better design for core search, fixes and style to scss MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- apps/files/css/files.scss | 2 +- core/css/styles.scss | 47 ++++++----- core/search/css/results.css | 105 ------------------------ core/search/css/results.scss | 102 +++++++++++++++++++++++ core/search/js/search.js | 9 +- core/search/templates/part.results.html | 2 +- lib/private/legacy/template.php | 1 + 7 files changed, 134 insertions(+), 134 deletions(-) delete mode 100644 core/search/css/results.css create mode 100644 core/search/css/results.scss diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss index 38c74d242b..ca2915a903 100644 --- a/apps/files/css/files.scss +++ b/apps/files/css/files.scss @@ -603,7 +603,7 @@ table tr.summary td { padding-top: 20px; } .summary .info { - margin-left: 40px; + margin-left: 35px; /* td has padding of 15, col width is 50 */ } table.dragshadow { diff --git a/core/css/styles.scss b/core/css/styles.scss index 736713c3e7..5733368975 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -299,32 +299,35 @@ body { overflow-x: auto; } -#emptycontent, .emptycontent { +/* EMPTY CONTENT DISPLAY ------------------------------------------------------------ */ + +#emptycontent, +.emptycontent { color: nc-lighten($color-main-text, 53%); text-align: center; margin-top: 30vh; width: 100%; -} - -#app-sidebar #emptycontent, #app-sidebar .emptycontent { - margin-top: 10vh; -} - -#emptycontent.emptycontent-search, .emptycontent.emptycontent-search { - position: static; -} - -#emptycontent h2, .emptycontent h2 { - margin-bottom: 10px; - line-height: 150%; -} - -#emptycontent [class^='icon-'], .emptycontent [class^='icon-'], #emptycontent [class*=' icon-'], .emptycontent [class*=' icon-'] { - background-size: 64px; - height: 64px; - width: 64px; - margin: 0 auto 15px; - opacity: .4; + #app-sidebar & { + margin-top: 10vh; + } + .emptycontent-search { + position: static; + } + h2 { + margin-bottom: 10px; + line-height: 150%; + } + [class^='icon-'], + [class*='icon-'] { + background-size: 64px; + height: 64px; + width: 64px; + margin: 0 auto 15px; + &:not([class^='icon-loading']), + &:not([class*='icon-loading']) { + opacity: .4; + } + } } /* LOG IN & INSTALLATION ------------------------------------------------------------ */ diff --git a/core/search/css/results.css b/core/search/css/results.css deleted file mode 100644 index e2ccfe36ef..0000000000 --- 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 0000000000..0530d4ec85 --- /dev/null +++ b/core/search/css/results.scss @@ -0,0 +1,102 @@ +/* + * @copyright Copyright (c) 2018 Jan-Christoph Borchardt + * + * @author John Molakvoæ + * @author Jan-Christoph Borchardt + * + * @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 . + * + */ + +#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 b4175c49a3..8c30ce74f1 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')+''); + $status.addClass('status emptycontent'); + $status.html('

' + t('core', 'Searching other places') + '

'); // 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($('

').html(error.replace('{tag}', '').replace('{endtag}', ''))); } 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('' + n('core', '{count} search result in another folder', '{count} search results in other folders', count, {count:count}) + ''); } } function renderCurrent() { diff --git a/core/search/templates/part.results.html b/core/search/templates/part.results.html index 612d02c18f..6fad9f2cdd 100644 --- a/core/search/templates/part.results.html +++ b/core/search/templates/part.results.html @@ -1,4 +1,3 @@ -
@@ -11,3 +10,4 @@
+
\ No newline at end of file diff --git a/lib/private/legacy/template.php b/lib/private/legacy/template.php index a362b581fe..9d3b63139d 100644 --- a/lib/private/legacy/template.php +++ b/lib/private/legacy/template.php @@ -115,6 +115,7 @@ class OC_Template extends \OC\Template\Base { OC_Util::addVendorStyle('select2/select2', null, true); OC_Util::addStyle('jquery.ocdialog'); OC_Util::addTranslations("core", null, true); + OC_Util::addStyle('search', 'results'); OC_Util::addScript('search', 'search', true); OC_Util::addScript('merged-template-prepend', null, true); OC_Util::addScript('jquery-ui-fixes');