Skip to content

Commit 684d4c3

Browse files
committed
search-box added
1 parent 52c8671 commit 684d4c3

File tree

5 files changed

+105
-31
lines changed

5 files changed

+105
-31
lines changed

resources/css/dark_mode.css

Lines changed: 37 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,6 @@
1313
#sidebar {
1414
background: {{ setting_value('visiosoft.theme.defaultadmin::dark_primary_color') }} !important;
1515
}
16-
.breadcrumb {
17-
background: {{ setting_value('visiosoft.theme.defaultadmin::dark_secondary_color') }} !important;
18-
border-radius: 0 !important;
19-
}
2016
.nav.nav-sections.nav-stacked {
2117
background: {{ setting_value('visiosoft.theme.defaultadmin::dark_secondary_color') }} !important;
2218
}
@@ -377,4 +373,41 @@ border-color: {{ setting_value('visiosoft.theme.defaultadmin::dark_secondary_col
377373
.text-muted {
378374
color: {{ setting_value('visiosoft.theme.defaultadmin::dark_text_color') }} !important;
379375
filter: brightness(80%);
376+
}
377+
#search {
378+
border-bottom: 1px solid {{ setting_value('visiosoft.theme.defaultadmin::dark_background_color') }};
379+
padding-top: 8px;
380+
color: {{ setting_value('visiosoft.theme.defaultadmin::dark_background_color') }} !important;
381+
}
382+
.dropdown-item.active, .dropdown-item.active:focus, .dropdown-item.active:hover {
383+
background:{{ setting_value('visiosoft.theme.defaultadmin::dark_primary_color') }} !important;
384+
}
385+
.breadcrumb li.active {
386+
color: {{ setting_value('visiosoft.theme.defaultadmin::dark_text_color') }} !important;
387+
filter: color brightness(50%);
388+
}
389+
#search .search-bar {
390+
color: {{ setting_value('visiosoft.theme.defaultadmin::dark_text_color') }} !important;
391+
}
392+
#search .search-bar::placeholder {
393+
color: {{ setting_value('visiosoft.theme.defaultadmin::dark_background_color') }} !important;
394+
}
395+
.breadcrumb li.active {
396+
background-color: inherit !important;
397+
}
398+
.btn-search {
399+
display: inline-block;
400+
margin-left: auto;
401+
float: right;
402+
padding: 0 !important;
403+
margin-top: 5px;
404+
background-color: inherit;
405+
color: {{ setting_value('visiosoft.theme.defaultadmin::dark_background_color') }};
406+
}
407+
.breadcrumb {
408+
background: inherit !important;
409+
border-radius: 0 !important;
410+
}
411+
.nav.nav-sections {
412+
opacity: 0.95;
380413
}

resources/css/theme.css

Lines changed: 40 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -417,11 +417,30 @@ body.expand #topbar .topbar-left .logo span {
417417
width: 50% !important;
418418
}
419419
}
420+
#search {
421+
border-bottom: 1px solid {{ setting_value('visiosoft.theme.defaultadmin::background_color') }};
422+
padding-top: 8px;
423+
}
424+
.btn-search {
425+
display: inline-block;
426+
margin-left: auto;
427+
float: right;
428+
padding: 0 !important;
429+
margin-top: 5px;
430+
background-color: inherit;
431+
color: {{ setting_value('visiosoft.theme.defaultadmin::background_color') }};
432+
}
433+
.dropdown-menu {
434+
z-index: 9999;
435+
}
420436
#search .search-bar {
421-
height: 70px;
422-
color: #212121;
437+
width: 70%;
438+
color: {{ setting_value('visiosoft.theme.defaultadmin::primary_color') }};
423439
font-size: 14px;
440+
display: inline-block;
424441
border: none !important;
442+
border-left: none !important;
443+
border-right: none !important;
425444
box-shadow: none !important;
426445
background-color: transparent !important;
427446
}
@@ -462,9 +481,9 @@ box-shadow: 2px 0 0 rgba(66, 66, 66, 0.1);
462481

463482
.top-bar {
464483
background-color: {{ setting_value('visiosoft.theme.defaultadmin::block_background_color') }};
465-
width: 100%;
466484
height:70px;
467485
display: table;
486+
width:100%;
468487
}
469488
.topbar-breadcrumb {
470489
display: table-cell;
@@ -2693,9 +2712,7 @@ background-color: {{ setting_value('visiosoft.theme.defaultadmin::background_col
26932712
opacity: 1;
26942713
line-height: 18px;
26952714
}
2696-
.breadcrumb li.active {
2697-
background-color: {{ setting_value('visiosoft.theme.defaultadmin::block_background_color') }} !important;
2698-
}
2715+
26992716
.text-center {
27002717
text-align: center;
27012718
}
@@ -2709,16 +2726,6 @@ background-color: {{ setting_value('visiosoft.theme.defaultadmin::background_col
27092726
margin-bottom: 0;
27102727
line-height: 1.25;
27112728
}
2712-
2713-
.breadcrumb {
2714-
border-radius: 0 !important;
2715-
background: #fff;
2716-
font-size: 0.8rem;
2717-
}
2718-
.breadcrumb a {
2719-
color: #888888;
2720-
}
2721-
27222729
html,
27232730
body {
27242731
height: 100%;
@@ -2989,12 +2996,7 @@ color: {{ setting_value('visiosoft.theme.defaultadmin::secondary_color') }} !imp
29892996
margin-bottom: 1em;
29902997
background-color: #BFD3E9;
29912998
}
2992-
.breadcrumb {
2993-
margin-top: 0 !important;
2994-
margin-bottom: 0 !important;
2995-
padding-top: 0 !important;
2996-
padding-bottom: 0 !important;
2997-
}
2999+
29983000
.card {
29993001
margin-bottom: 0.5rem !important;
30003002
}
@@ -3226,7 +3228,7 @@ color: {{ setting_value('visiosoft.theme.defaultadmin::input_placeholder_color')
32263228
body {
32273229
background-color: {{ setting_value('visiosoft.theme.defaultadmin::background_color') }} !important;
32283230
}
3229-
.card-block, .card-body, #footer, .modal-dialog, .breadcrumb, .user-action-dropdown,
3231+
.card-block, .card-body, #footer, .modal-dialog, .user-action-dropdown,
32303232
.card.card-flex .card-block, .nav.nav-sections li.active,
32313233
.modal-content, .modal-header, .modal-body, .nav-pills, .dropdown-menu {
32323234
background-color: {{ setting_value('visiosoft.theme.defaultadmin::block_background_color') }} !important;
@@ -3316,3 +3318,18 @@ border-color: {{setting_value('visiosoft.theme.defaultadmin::input_focused_borde
33163318
.CodeMirror div {
33173319
color: white !important;
33183320
}
3321+
.breadcrumb {
3322+
border-radius: 0 !important;
3323+
background-color: {{ setting_value('visiosoft.theme.defaultadmin::background_color') }} !important;
3324+
font-size: 0.8rem;
3325+
margin-top: 15px !important;
3326+
margin-bottom: 0 !important;
3327+
padding-top: 0 !important;
3328+
padding-bottom: 0 !important;
3329+
}
3330+
.breadcrumb li.active {
3331+
background-color: inherit !important;
3332+
}
3333+
.breadcrumb a {
3334+
opacity: 0.5;
3335+
}

resources/views/layouts/default.twig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,10 @@
2020
{% include "visiosoft.theme.defaultadmin::partials/menu" %}
2121
<main id="main" style="min-height: 1500px;">
2222
{% include "visiosoft.theme.defaultadmin::partials/topbar" %}
23+
<div class="topbar-breadcrumb">{{ breadcrumb() }}</div>
2324
{% if trans('module::addon.info') != 'module::addon.info' %}
2425
<div class="page-info m-2 small text-white alert rounded">{{ trans('module::addon.info') }}</div>
2526
{% endif %}
26-
2727
<div class="container-fluid pt-1">
2828
{% include "theme::partials/messages" %}
2929
{% include "theme::partials/buttons" %}
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<form class="navbar-form dropdown" id="search">
2+
<input type="text" class="form-control search-bar" placeholder="{{ trans('visiosoft.theme.defaultadmin::control_panel.search_placeholder') }}...">
3+
<button type="submit" class="btn btn-search"><i class="fa fa-search"></i></button>
4+
<div class="dropdown-menu results">
5+
<h6 class="dropdown-header">Navigation</h6>
6+
{% for key, navigation in template.cp.navigation %}
7+
<a class="dropdown-item" {{ html_attributes(navigation.attributes) }} {{ navigation.class }}>
8+
<span class="title">{{ trans(navigation.title) }}</span>
9+
</a>
10+
{% endfor %}
11+
</div>
12+
</form>

resources/views/partials/topbar.twig

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,10 @@
66
{% set name = user().username %}
77
{% endif %}
88
<div class="top-bar">
9-
<div class="topbar-breadcrumb">{{ breadcrumb() }}</div>
109
<div class="topbar-useraction">
1110
<ul class="nav navbar-nav">
1211
{% for shortcut in template.cp.shortcuts %}
13-
<li class="nav-item shortcut {# dropdown #}">
12+
<li class="nav-item shortcut">
1413
<a {{ html_attributes(shortcut.attributes) }} {# data-toggle="dropdown" #}>
1514
{{ icon(shortcut.icon) }}
1615
</a>
@@ -39,9 +38,20 @@
3938
</li>
4039
</ul>
4140
</li>
41+
{% set helpColor = setting_value('visiosoft.theme.defaultadmin::primary_color') %}
42+
{% if setting_value('visiosoft.theme.defaultadmin::dark_mode') %}
43+
{% set helpColor = setting_value('visiosoft.theme.defaultadmin::dark_text_color') %}
44+
{% endif %}
4245
<li class="nav-item dropdown floatright" style="padding-top: 5px;">
4346
<a href="javascript:void(0);" data-toggle="dropdown">
44-
{{ img('theme::img/help.png').width('35').style("opacity: 0.3")|raw }}
47+
<svg xmlns="http://www.w3.org/2000/svg" width="31.676" height="31.676" viewBox="0 0 31.676 31.676">
48+
<g id="help" transform="translate(-1032 -18)">
49+
<g id="contact-support" transform="translate(1032 18)">
50+
<path fill="{{ helpColor }}" id="Path_20511" data-name="Path 20511" d="M22.542,29.757h2.376a11,11,0,1,0,0-22H18.758a11,11,0,0,0-11,11c0,7.093,4.044,11.334,8.3,13.89a27.614,27.614,0,0,0,5.91,2.62q.3.094.575.173Zm1.76,7.919s-.673-.113-1.76-.408C17.958,36.027,6,31.561,6,18.758A12.759,12.759,0,0,1,18.758,6h6.159a12.758,12.758,0,1,1,0,25.517H24.3Z" transform="translate(-6 -6)" fill-rule="evenodd"/>
51+
</g>
52+
<path fill="{{ helpColor }}" id="Path_20512" data-name="Path 20512" d="M6.234-3.138H4.117q-.008-.457-.008-.556a3.7,3.7,0,0,1,.34-1.693A5.163,5.163,0,0,1,5.811-6.881a10.191,10.191,0,0,0,1.22-1.087,1.454,1.454,0,0,0,.307-.9,1.511,1.511,0,0,0-.544-1.166,2.119,2.119,0,0,0-1.465-.486,2.219,2.219,0,0,0-1.486.506,2.7,2.7,0,0,0-.822,1.544L.88-8.732a3.554,3.554,0,0,1,1.266-2.523,4.486,4.486,0,0,1,3.084-1.038,4.649,4.649,0,0,1,3.2,1.05A3.179,3.179,0,0,1,9.612-8.8a2.688,2.688,0,0,1-.436,1.461A9.566,9.566,0,0,1,7.313-5.462a3.558,3.558,0,0,0-.917.988A3.313,3.313,0,0,0,6.234-3.138ZM4.117,0V-2.333H6.45V0Z" transform="translate(1042.676 37.676)"/>
53+
</g>
54+
</svg>
4555
</a>
4656
<ul class="dropdown-menu-right dropdown-menu">
4757
<li class="dropdown-item">
@@ -56,6 +66,8 @@
5666
</li>
5767
</ul>
5868
</li>
69+
<li class="nav-item dropdown float-left">
70+
{% include "theme::partials/search-box" %}
5971
</li>
6072
</ul>
6173
</div>

0 commit comments

Comments
 (0)