Better design for core search, fixes and style to scss
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
parent
7fdba6f607
commit
e5f08620d4
|
@ -603,7 +603,7 @@ table tr.summary td {
|
||||||
padding-top: 20px;
|
padding-top: 20px;
|
||||||
}
|
}
|
||||||
.summary .info {
|
.summary .info {
|
||||||
margin-left: 40px;
|
margin-left: 35px; /* td has padding of 15, col width is 50 */
|
||||||
}
|
}
|
||||||
|
|
||||||
table.dragshadow {
|
table.dragshadow {
|
||||||
|
|
|
@ -299,32 +299,35 @@ body {
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
#emptycontent, .emptycontent {
|
/* EMPTY CONTENT DISPLAY ------------------------------------------------------------ */
|
||||||
|
|
||||||
|
#emptycontent,
|
||||||
|
.emptycontent {
|
||||||
color: nc-lighten($color-main-text, 53%);
|
color: nc-lighten($color-main-text, 53%);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 30vh;
|
margin-top: 30vh;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
#app-sidebar & {
|
||||||
|
|
||||||
#app-sidebar #emptycontent, #app-sidebar .emptycontent {
|
|
||||||
margin-top: 10vh;
|
margin-top: 10vh;
|
||||||
}
|
}
|
||||||
|
.emptycontent-search {
|
||||||
#emptycontent.emptycontent-search, .emptycontent.emptycontent-search {
|
|
||||||
position: static;
|
position: static;
|
||||||
}
|
}
|
||||||
|
h2 {
|
||||||
#emptycontent h2, .emptycontent h2 {
|
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
line-height: 150%;
|
line-height: 150%;
|
||||||
}
|
}
|
||||||
|
[class^='icon-'],
|
||||||
#emptycontent [class^='icon-'], .emptycontent [class^='icon-'], #emptycontent [class*=' icon-'], .emptycontent [class*=' icon-'] {
|
[class*='icon-'] {
|
||||||
background-size: 64px;
|
background-size: 64px;
|
||||||
height: 64px;
|
height: 64px;
|
||||||
width: 64px;
|
width: 64px;
|
||||||
margin: 0 auto 15px;
|
margin: 0 auto 15px;
|
||||||
|
&:not([class^='icon-loading']),
|
||||||
|
&:not([class*='icon-loading']) {
|
||||||
opacity: .4;
|
opacity: .4;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* LOG IN & INSTALLATION ------------------------------------------------------------ */
|
/* LOG IN & INSTALLATION ------------------------------------------------------------ */
|
||||||
|
|
|
@ -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;
|
|
||||||
}
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -100,7 +100,6 @@
|
||||||
*/
|
*/
|
||||||
this.search = function(query, inApps, page, size) {
|
this.search = function(query, inApps, page, size) {
|
||||||
if (query) {
|
if (query) {
|
||||||
OC.addStyle('core/search','results');
|
|
||||||
if (typeof page !== 'number') {
|
if (typeof page !== 'number') {
|
||||||
page = 1;
|
page = 1;
|
||||||
}
|
}
|
||||||
|
@ -128,8 +127,8 @@
|
||||||
|
|
||||||
//show spinner
|
//show spinner
|
||||||
$searchResults.removeClass('hidden');
|
$searchResults.removeClass('hidden');
|
||||||
$status.addClass('status');
|
$status.addClass('status emptycontent');
|
||||||
$status.html(t('core', 'Searching other places')+'<img class="spinner" alt="search in progress" src="'+OC.webroot+'/core/img/loading.gif" />');
|
$status.html('<div class="icon-loading"></div><h2>' + t('core', 'Searching other places') + '</h2>');
|
||||||
|
|
||||||
// do the actual search query
|
// do the actual search query
|
||||||
$.getJSON(OC.generateUrl('core/search'), {query:query, inApps:inApps, page:page, size:size }, function(results) {
|
$.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});
|
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>')));
|
$status.append($('<h2>').html(error.replace('{tag}', '<strong>').replace('{endtag}', '</strong>')));
|
||||||
} else {
|
} else {
|
||||||
$status.removeClass('emptycontent').addClass('status');
|
$status.removeClass('emptycontent').addClass('status summary');
|
||||||
$status.text(n('core', '{count} search result in another folder', '{count} search results in other folders', count, {count:count}));
|
$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() {
|
function renderCurrent() {
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
<div id="status"></div>
|
|
||||||
<table>
|
<table>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr class="template">
|
<tr class="template">
|
||||||
|
@ -11,3 +10,4 @@
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
<div id="status"><span></span></div>
|
|
@ -115,6 +115,7 @@ class OC_Template extends \OC\Template\Base {
|
||||||
OC_Util::addVendorStyle('select2/select2', null, true);
|
OC_Util::addVendorStyle('select2/select2', null, true);
|
||||||
OC_Util::addStyle('jquery.ocdialog');
|
OC_Util::addStyle('jquery.ocdialog');
|
||||||
OC_Util::addTranslations("core", null, true);
|
OC_Util::addTranslations("core", null, true);
|
||||||
|
OC_Util::addStyle('search', 'results');
|
||||||
OC_Util::addScript('search', 'search', true);
|
OC_Util::addScript('search', 'search', true);
|
||||||
OC_Util::addScript('merged-template-prepend', null, true);
|
OC_Util::addScript('merged-template-prepend', null, true);
|
||||||
OC_Util::addScript('jquery-ui-fixes');
|
OC_Util::addScript('jquery-ui-fixes');
|
||||||
|
|
Loading…
Reference in New Issue