search box

This commit is contained in:
nacho 2019-01-02 15:16:22 -07:00 committed by nachoparker
parent c0fc0b9b4c
commit 48a70477dd
5 changed files with 117 additions and 13 deletions

View File

@ -1113,7 +1113,7 @@ select {
flex: 0 0 auto;
}
#expand {
.expand {
position: relative;
display: flex;
align-items: center;
@ -1121,15 +1121,19 @@ select {
cursor: pointer;
}
#expand * {
.expand * {
cursor: pointer;
}
#expand:hover img,#expand:focus img,#expand:active img,#expand:hover #expandDisplayName,#expand:focus #expandDisplayName,#expand:active #expandDisplayName {
.expand:hover img,.expand:focus img,.expand:active img,.expand:hover .expandDisplayName,.expand:focus .expandDisplayName,.expand:active .expandDisplayName {
-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
opacity:1
}
.search-div {
padding-right: 0px;
}
.icon-power-white {
background-image: url('../img/poweroff.svg');
}
@ -1139,6 +1143,9 @@ select {
.icon-nc-info {
background-image: url('../img/info-white.svg');
}
.icon-search {
background-image: url('../img/search.svg');
}
.icon-config {
background-image: url('../img/settings-white.svg');
}
@ -1170,7 +1177,7 @@ select {
right: 1em;
}
#expand #expandDisplayName {
.expand .expandDisplayName {
padding: 8px;
opacity: 0.6;
}

View File

@ -128,6 +128,7 @@ function print_config_forms( $l /* translations l10n object */ )
$hidden = '';
$ret .= <<<HTML
<div id="$cfg[id]-config-box" class="$hidden">
<br/>
<h2 class="text-title">$cfg[description]</h2>
<div class="config-box-info-txt">$cfg[info]</div>
<a href="https://github.com/nextcloud/nextcloudpi/wiki/Configuration-Reference#$ncp_app" target="_blank">
@ -160,7 +161,7 @@ function print_sidebar( $l /* translations l10n object */, $ticks /* wether to c
$sections = array_diff(scandir($bin_dir), array('.', '..', 'l10n'));
foreach ($sections as $section)
{
$ret .= "<li id=\"$section\" class=\"nav-recent\"><span>{$l->__($section, $section)}</span>";
$ret .= "<li id=\"$section\"><span>{$l->__($section, $section)}</span>";
$scripts = array_diff(scandir($bin_dir . $section), array('.', '..', 'nc-wifi.sh', 'nc-info.sh'));
foreach ($scripts as $script)
@ -180,7 +181,7 @@ function print_sidebar( $l /* translations l10n object */, $ticks /* wether to c
$selected = "";
if (array_key_exists('app',$_GET) && $_GET['app'] == $ncp_app)
$selected = "active";
$ret .= "<ul id=\"$ncp_app\" class=\"nav-recent $selected\">";
$ret .= "<ul id=\"$ncp_app\" class=\"ncp-app-list-item $selected\">";
$ret .= "<a href=\"?app=$ncp_app\"> {$l->__($ncp_app, $ncp_app)}$active </a>";
$ret .= "</ul>";
}

68
ncp-web/img/search.svg Normal file
View File

@ -0,0 +1,68 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
viewBox="0 0 16 16"
height="16"
width="16"
id="svg8"
sodipodi:docname="search.svg"
inkscape:version="0.92.2 2405546, 2018-03-11">
<metadata
id="metadata14">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs12" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="722"
inkscape:window-height="480"
id="namedview10"
showgrid="false"
inkscape:zoom="14.75"
inkscape:cx="8"
inkscape:cy="7.5254237"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="0"
inkscape:current-layer="svg8" />
<g
stroke="#000"
stroke-width="2"
fill="none"
id="g6"
style="stroke:#fffff2;stroke-opacity:1">
<ellipse
rx="4"
ry="4"
cy="6"
cx="6"
id="ellipse2"
style="stroke:#fffff2;stroke-opacity:1" />
<path
d="m14.3 14.25-5.65-5.65"
id="path4"
style="stroke:#fffff2;stroke-opacity:1" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@ -142,39 +142,46 @@ HTML;
?>
</div>
<div id="header-right">
<div id="search-btn" title="<?php echo $l->__("Search"); ?>">
<div class="expand search-div">
<div class="icon-search"></div>
&nbsp; &nbsp;
<input type="text" id="search-box" placeholder="find ncp-app" size="40">
</div>
</div>
<a href="https://ownyourbits.com" id="nextcloud-btn" target="_blank" tabindex="1" title="<?php echo $l->__("Launch Nextcloud"); ?>">
<div id="nc-button">
<div id="expand">
<div class="expand">
<div class="icon-nc-white"></div>
</div>
</div>
</a>
<div id="dashboard-btn" title="<?php echo $l->__("View System Info"); ?>">
<div id="expand">
<div class="expand">
<div class="icon-dashboard"></div>
</div>
</div>
<div id="config-btn" title="<?php echo $l->__("Nextcloud Configuration"); ?>">
<div id="expand">
<div class="expand">
<div class="icon-config"></div>
</div>
</div>
<a href="wizard" title="<?php echo $l->__("NextCloudPi Wizard"); ?>">
<div class="wizard-btn">
<div id="expand">
<div class="expand">
<div class="icon-wizard-white"></div>
</div>
</div>
</a>
<a href="https://github.com/nextcloud/nextcloudpi/wiki" target="_blank" tabindex="1" title="<?php echo $l->__("NextCloudPi Wiki"); ?>">
<div id="nc-button">
<div id="expand">
<div class="expand">
<div class="icon-nc-info"></div>
</div>
</div>
</a>
<div id="poweroff" title="<?php echo $l->__("Power Off"); ?>">
<div id="expand">
<div class="expand">
<div class="icon-power-white"></div>
</div>
</div>

View File

@ -138,6 +138,9 @@ function reload_sidebar()
if ( ret.ret && ret.ret == '0' ) {
$('#ncp-options').ht( ret.output );
set_sidebar_click_handlers();
var ncp_app_list = $('.ncp-app-list-item');
filter_apps();
}
}).error( errorMsg );
}
@ -429,11 +432,29 @@ $(function()
if ( ret.ret && ret.ret == '0' ) // means that the process was launched
window.location.reload( true );
else
this.set( '.value', langold );
this.set('.value', langold);
}
).error( errorMsg )
} );
// search box
function filter_apps(e)
{
ncp_app_list.hide();
ncp_app_list.each( function(app){
if (app.id.indexOf(search_box.value) !== -1)
app.style.display = 'block';
}
);
}
var search_box = $$('#search-box');
var ncp_app_list = $('.ncp-app-list-item');
$('#search-box').on('|keyup', filter_apps );
search_box.value = '';
search_box.focus();
$('.icon-search').on('click', function(e) { search_box.focus(); });
// load dashboard info
print_dashboard();
} );