// search field WIP

This commit is contained in:
Kevin Granger
2013-10-21 18:03:00 +02:00
parent 5f75439a6b
commit 2e13013657
7 changed files with 149 additions and 48 deletions
+48 -36
View File
@@ -7697,15 +7697,23 @@ html, body {
/* line 52, admin-theme/_admin-header.sass */ /* line 52, admin-theme/_admin-header.sass */
#header_search { #header_search {
width: 130px; width: 160px;
padding: 0 0 0 10px; } padding: 0 0 0 10px;
position: relative; }
@media (max-width: 768px) { @media (max-width: 768px) {
/* line 52, admin-theme/_admin-header.sass */ /* line 52, admin-theme/_admin-header.sass */
#header_search { #header_search {
width: 100%; } } width: 100%; } }
/* line 59, admin-theme/_admin-header.sass */ /* line 60, admin-theme/_admin-header.sass */
#header_search input, #header_search .form-group { #header_search input, #header_search .form-group {
margin: 0; } margin: 0; }
/* line 62, admin-theme/_admin-header.sass */
#header_search .form-group.focus-search {
position: absolute;
z-index: 900;
top: 0;
left: 10px;
width: 400px; }
/* line 1, admin-theme/_admin-footer.sass */ /* line 1, admin-theme/_admin-footer.sass */
#footer { #footer {
@@ -8205,15 +8213,18 @@ a.link-social:hover {
font-family: "Ubuntu", sans-serif; font-family: "Ubuntu", sans-serif;
text-transform: uppercase; text-transform: uppercase;
font-weight: 300; } font-weight: 300; }
/* line 41, admin-theme/_admin-commons.sass */ /* line 40, admin-theme/_admin-commons.sass */
.nav-tabs li a:hover {
background-color: white; }
/* line 43, admin-theme/_admin-commons.sass */
.nav-tabs li.active a, .nav-tabs li.active a:hover { .nav-tabs li.active a, .nav-tabs li.active a:hover {
background-color: white; } background-color: white; }
/* line 44, admin-theme/_admin-commons.sass */ /* line 46, admin-theme/_admin-commons.sass */
.alert.alert-danger, #carrier_wizard .wizard_error { .alert.alert-danger, #carrier_wizard .wizard_error {
padding-left: 60px; padding-left: 60px;
position: relative; } position: relative; }
/* line 47, admin-theme/_admin-commons.sass */ /* line 49, admin-theme/_admin-commons.sass */
.alert.alert-danger:before, #carrier_wizard .wizard_error:before { .alert.alert-danger:before, #carrier_wizard .wizard_error:before {
position: absolute; position: absolute;
top: 0; top: 0;
@@ -8229,11 +8240,11 @@ a.link-social:hover {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
content: "\f00d"; } content: "\f00d"; }
/* line 62, admin-theme/_admin-commons.sass */ /* line 64, admin-theme/_admin-commons.sass */
.alert.alert-success, #carrier_wizard .alert-success.wizard_error { .alert.alert-success, #carrier_wizard .alert-success.wizard_error {
padding-left: 60px; padding-left: 60px;
position: relative; } position: relative; }
/* line 65, admin-theme/_admin-commons.sass */ /* line 67, admin-theme/_admin-commons.sass */
.alert.alert-success:before, #carrier_wizard .alert-success.wizard_error:before { .alert.alert-success:before, #carrier_wizard .alert-success.wizard_error:before {
position: absolute; position: absolute;
top: 0; top: 0;
@@ -8249,11 +8260,11 @@ a.link-social:hover {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
content: "\f00c"; } content: "\f00c"; }
/* line 81, admin-theme/_admin-commons.sass */ /* line 83, admin-theme/_admin-commons.sass */
.panel .panel-footer, #header_notifs_icon_wrapper .notifs_panel .panel-footer, #dash_version .panel-footer, #header_notifs_icon_wrapper .notifs_panel .notifs_panel_footer { .panel .panel-footer, #header_notifs_icon_wrapper .notifs_panel .panel-footer, #dash_version .panel-footer, #header_notifs_icon_wrapper .notifs_panel .notifs_panel_footer {
margin: 0 -20px -20px; } margin: 0 -20px -20px; }
/* line 86, admin-theme/_admin-commons.sass */ /* line 88, admin-theme/_admin-commons.sass */
.overflow-y { .overflow-y {
height: 200px; height: 200px;
overflow-y: auto; } overflow-y: auto; }
@@ -8416,7 +8427,7 @@ label.control-label span.label-tooltip {
-o-border-radius: 3px; -o-border-radius: 3px;
border-radius: 3px; } border-radius: 3px; }
/* line 17, admin-theme/_admin-forms.sass */ /* line 16, admin-theme/_admin-forms.sass */
label.required:before { label.required:before {
content: "*"; content: "*";
color: red; color: red;
@@ -8424,37 +8435,38 @@ label.required:before {
position: relative; position: relative;
line-height: 12px; } line-height: 12px; }
/* line 24, admin-theme/_admin-forms.sass */ /* line 23, admin-theme/_admin-forms.sass */
.tooltip { .tooltip {
font-size: 12px; } font-size: 12px; }
/* line 27, admin-theme/_admin-forms.sass */ /* line 26, admin-theme/_admin-forms.sass */
select.input-tiny, input[type="text"].input-tiny, input[type="password"].input-tiny { select.input-tiny, input[type="text"].input-tiny, input[type="password"].input-tiny {
width: 80px; width: 80px;
float: left; } float: left; }
/* line 33, admin-theme/_admin-forms.sass */ /* line 32, admin-theme/_admin-forms.sass */
textarea { textarea {
resize: none; } resize: none; }
/* line 37, admin-theme/_admin-forms.sass */ /* line 36, admin-theme/_admin-forms.sass */
.btn { .btn {
text-transform: uppercase; } text-transform: uppercase; }
/* line 39, admin-theme/_admin-forms.sass */ /* line 38, admin-theme/_admin-forms.sass */
.btn .caret { .btn .caret {
border-top-color: #333333 !important; } border-top-color: #333333 !important; }
/* line 42, admin-theme/_admin-forms.sass */ /* line 41, admin-theme/_admin-forms.sass */
.btn:hover .caret, .btn:focus .caret { .btn:hover .caret, .btn:focus .caret {
border-top-color: white !important; } border-top-color: white !important; }
/* line 44, admin-theme/_admin-forms.sass */ /* line 43, admin-theme/_admin-forms.sass */
.btn.btn-default { .btn.btn-default {
-webkit-box-shadow: #e6e6e6 0 -2px 0 inset; -webkit-box-shadow: #e6e6e6 0 -2px 0 inset;
box-shadow: #e6e6e6 0 -2px 0 inset; } box-shadow: #e6e6e6 0 -2px 0 inset; }
/* line 47, admin-theme/_admin-forms.sass */ /* line 46, admin-theme/_admin-forms.sass */
.btn.btn-primary { .btn.btn-primary {
-webkit-box-shadow: #c7e6c7 0 -2px 0 inset; background-color: #1ba6e5;
box-shadow: #c7e6c7 0 -2px 0 inset; } color: white;
/* line 50, admin-theme/_admin-forms.sass */ border-color: #1585b8; }
/* line 52, admin-theme/_admin-forms.sass */
.btn.btn-default[disabled] { .btn.btn-default[disabled] {
border-color: #999999; border-color: #999999;
color: #999999; color: #999999;
@@ -8462,46 +8474,46 @@ textarea {
-webkit-box-shadow: #cccccc 0 -2px 0 inset; -webkit-box-shadow: #cccccc 0 -2px 0 inset;
box-shadow: #cccccc 0 -2px 0 inset; } box-shadow: #cccccc 0 -2px 0 inset; }
/* line 55, admin-theme/_admin-forms.sass */ /* line 57, admin-theme/_admin-forms.sass */
.dropdown-menu { .dropdown-menu {
text-align: left; } text-align: left; }
/* line 57, admin-theme/_admin-forms.sass */ /* line 59, admin-theme/_admin-forms.sass */
.btn-group-action { .btn-group-action {
float: right; } float: right; }
/* line 59, admin-theme/_admin-forms.sass */ /* line 61, admin-theme/_admin-forms.sass */
.btn-group-action a { .btn-group-action a {
text-decoration: none; } text-decoration: none; }
/* line 63, admin-theme/_admin-forms.sass */ /* line 65, admin-theme/_admin-forms.sass */
.tt-query { .tt-query {
border-bottom-right-radius: 3px !important; border-bottom-right-radius: 3px !important;
border-top-right-radius: 3px !important; } border-top-right-radius: 3px !important; }
/* line 65, admin-theme/_admin-forms.sass */ /* line 67, admin-theme/_admin-forms.sass */
.tt-dropdown-menu { .tt-dropdown-menu {
background-color: white; background-color: white;
border: solid 1px #cccccc; border: solid 1px #cccccc;
font-size: 0.9em; font-size: 0.9em;
text-transform: none; } text-transform: none; }
/* line 70, admin-theme/_admin-forms.sass */ /* line 72, admin-theme/_admin-forms.sass */
.tt-suggestions { .tt-suggestions {
padding: 0 6px; padding: 0 6px;
-webkit-box-shadow: rgba(0, 0, 0, 0.25) 0 1px 4px; -webkit-box-shadow: rgba(0, 0, 0, 0.25) 0 1px 4px;
box-shadow: rgba(0, 0, 0, 0.25) 0 1px 4px; } box-shadow: rgba(0, 0, 0, 0.25) 0 1px 4px; }
/* line 73, admin-theme/_admin-forms.sass */ /* line 75, admin-theme/_admin-forms.sass */
.tt-suggestion p { .tt-suggestion p {
border-bottom: solid 1px #cccccc; border-bottom: solid 1px #cccccc;
margin: 0 !important; margin: 0 !important;
padding: 0 !important; } padding: 0 !important; }
/* line 77, admin-theme/_admin-forms.sass */ /* line 79, admin-theme/_admin-forms.sass */
.tt-suggestion:last-child p { .tt-suggestion:last-child p {
border-bottom: none; } border-bottom: none; }
/* line 81, admin-theme/_admin-forms.sass */ /* line 83, admin-theme/_admin-forms.sass */
.tagify-container { .tagify-container {
background-color: white; background-color: white;
padding: 2px 6px; padding: 2px 6px;
@@ -8515,10 +8527,10 @@ textarea {
border: solid 1px #cccccc; border: solid 1px #cccccc;
-webkit-box-shadow: rgba(0, 0, 0, 0.075) 0 1px 1px inset; -webkit-box-shadow: rgba(0, 0, 0, 0.075) 0 1px 1px inset;
box-shadow: rgba(0, 0, 0, 0.075) 0 1px 1px inset; } box-shadow: rgba(0, 0, 0, 0.075) 0 1px 1px inset; }
/* line 89, admin-theme/_admin-forms.sass */ /* line 91, admin-theme/_admin-forms.sass */
.tagify-container span { .tagify-container span {
float: left; } float: left; }
/* line 91, admin-theme/_admin-forms.sass */ /* line 93, admin-theme/_admin-forms.sass */
.tagify-container > span { .tagify-container > span {
display: inline-block; display: inline-block;
padding: 3px 5px; padding: 3px 5px;
@@ -8527,20 +8539,20 @@ textarea {
border: 1px solid #1ba6e5; border: 1px solid #1ba6e5;
background-color: #60c1ed; background-color: #60c1ed;
color: white; } color: white; }
/* line 99, admin-theme/_admin-forms.sass */ /* line 101, admin-theme/_admin-forms.sass */
.tagify-container > span > a { .tagify-container > span > a {
padding-left: 5px; padding-left: 5px;
color: #1ba6e5; color: #1ba6e5;
text-decoration: none; text-decoration: none;
font-weight: bold; } font-weight: bold; }
/* line 104, admin-theme/_admin-forms.sass */ /* line 106, admin-theme/_admin-forms.sass */
.tagify-container > input { .tagify-container > input {
margin-top: 2px; margin-top: 2px;
border: 0 none; border: 0 none;
width: 100px; width: 100px;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; } box-shadow: none; }
/* line 109, admin-theme/_admin-forms.sass */ /* line 111, admin-theme/_admin-forms.sass */
.tagify-container > input:focus { .tagify-container > input:focus {
outline: 0; outline: 0;
-webkit-box-shadow: none; -webkit-box-shadow: none;
@@ -37,6 +37,8 @@
font-family: $headings-font-family font-family: $headings-font-family
text-transform: uppercase text-transform: uppercase
font-weight: 300 font-weight: 300
&:hover
background-color: white
li.active li.active
a, a:hover a, a:hover
background-color: white background-color: white
@@ -13,7 +13,6 @@ label.control-label span.label-tooltip
padding: 0 5px padding: 0 5px
@include border-radius(3px) @include border-radius(3px)
label.required:before label.required:before
content: '*' content: '*'
color: red color: red
@@ -45,7 +44,10 @@ textarea
@include box-shadow(darken($btn-default-bg,10%) 0 -2px 0 inset) @include box-shadow(darken($btn-default-bg,10%) 0 -2px 0 inset)
&.btn-primary &.btn-primary
@include box-shadow(lighten($brand-success,30%) 0 -2px 0 inset) background-color: $brand-primary
color: white
border-color: darken($brand-primary,10%)
//@include box-shadow(lighten($brand-success,30%) 0 -2px 0 inset)
&.btn-default[disabled] &.btn-default[disabled]
border-color: $gray-light border-color: $gray-light
@@ -52,12 +52,22 @@
#header_search #header_search
@extend .navbar-form @extend .navbar-form
@extend .navbar-left @extend .navbar-left
width: 130px width: 160px
padding: 0 0 0 10px padding: 0 0 0 10px
position: relative
@media (max-width: $screen-tablet) @media (max-width: $screen-tablet)
width: 100% width: 100%
input, .form-group input, .form-group
margin: 0 margin: 0
.form-group.focus-search
position: absolute
z-index: 900
top: 0
left: 10px
width: 400px
#header_quick #header_quick
@extend .nav @extend .nav
@extend .navbar-nav @extend .navbar-nav
+80 -5
View File
@@ -216,30 +216,105 @@
<div class="collapse navbar-collapse navbar-collapse-primary"> <div class="collapse navbar-collapse navbar-collapse-primary">
<form id="header_search" method="post" action="index.php?controller=AdminSearch&amp;token={getAdminToken tab='AdminSearch'}" role="search"> <form id="header_search" method="post" action="index.php?controller=AdminSearch&amp;token={getAdminToken tab='AdminSearch'}" role="search">
<div class="form-group"> <div class="form-group">
<input type="hidden" name="bo_search_type" id="bo_search_type" />
<div class="input-group"> <div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
<i id="search_type_icon" class="icon-reorder"></i>
<i class="icon-caret-down"></i>
</button>
<ul id="header_search_options" class="dropdown-menu">
<li class="search-all search-option active"><a href="#" data-value="0" data-placeholder="{l s='TODO'}"><i class="icon-search"></i> {l s='Everywhere'}</a></li>
<li class="divider"></li>
<li class="search-book search-option">
<a href="#" data-value="1" data-placeholder="{l s='TODO'}" data-icon="icon-book">
<i class="icon-book"></i> {l s='Catalog'}
</a>
</li>
<li class="search-customers-name search-option">
<a href="#" data-value="2" data-placeholder="{l s='TODO'}" data-icon="icon-group">
<i class="icon-group"></i> {l s='Customers'} {l s='by name'}
</a>
</li>
<li class="search-customers-addresses search-option">
<a href="#" data-value="6" data-placeholder="{l s='TODO'}" data-icon="icon-desktop">
<i class="icon-desktop"></i> {l s='Customers'} {l s='by ip address'}</a>
</li>
<li class="search-orders search-option">
<a href="#" data-value="3" data-placeholder="{l s='TODO'}" data-icon="icon-credit-card">
<i class="icon-credit-card"></i> {l s='Orders'}
</a>
</li>
<li class="search-invoices search-option">
<a href="#" data-value="4" data-placeholder="{l s='TODO'}" data-icon="icon-book">
<i class="icon-book"></i> {l s='Invoices'}
</a>
</li>
<li class="search-carts search-option">
<a href="#" data-value="5" data-placeholder="{l s='TODO'}" data-icon="icon-shopping-cart">
<i class="icon-shopping-cart"></i> {l s='Carts'}
</a>
</li>
<li class="search-modules search-option">
<a href="#" data-value="7" data-placeholder="{l s='TODO'}" data-icon="icon-puzzle-piece">
<i class="icon-puzzle-piece"></i> {l s='Modules'}
</a>
</li>
</ul>
</div>
<input type="text" class="form-control" name="bo_query" id="bo_query" value="{$bo_query}" placeholder="{l s='Search'}" />
<span class="input-group-btn"> <span class="input-group-btn">
<button type="submit" id="bo_search_submit" class="btn btn-default"> <button type="submit" id="bo_search_submit" class="btn btn-primary">
<i class="icon-search"></i> <i class="icon-search"></i>
</button> </button>
</span> </span>
<input type="text" class="form-control" name="bo_query" id="bo_query" value="{$bo_query}" placeholder="{l s='Search'}"/>
</div> </div>
</div> </div>
<!-- //todo Search in section
<script>
$('#bo_query').on('blur', function(){ $('#header_search .form-group').removeClass('focus-search'); });
$('#header_search *').on('focus', function(){ $('#header_search .form-group').addClass('focus-search'); });
$('#header_search_options').on('click','li a', function(e){
e.preventDefault();
$('#header_search_options .search-option').removeClass('active');
$('#bo_search_type').val($(this).data('value'));
$('#search_type_icon').removeAttr("class").addClass($(this).data('icon'));
$('#bo_query').attr("placeholder",$(this).data('placeholder'));
$('#bo_query').focus();
});
</script>
<!-- js
size up search field on focus
prevent blank search
dropdown menu as select
- fill input hidden field with data value from list item
- change icon in suffix
- set active on right list item
- focus input field
- change place holder
-->
<!-- //todo Search in section
<select name="bo_search_type" id="bo_search_type" class="chosen no-search"> <select name="bo_search_type" id="bo_search_type" class="chosen no-search">
<option value="0">{l s='everywhere'}</option> <option value="0">{l s='everywhere'}</option>
<option value="1" {if {$search_type} == 1} selected="selected" {/if}>{l s='catalog'}</option> <option value="1" {if {$search_type} == 1} selected="selected" {/if}>{l s='catalog'}</option>
<optgroup label="{l s='customers'}:"> <optgroup label="{l s='customers'}:">
<option value="2" {if {$search_type} == 2} selected="selected" {/if}>{l s='by name'}</option> <option value="2" {if {$search_type} == 2} selected="selected" {/if}>{l s='by name'}</option>
<option value="6" {if {$search_type} == 6} selected="selected" {/if}>{l s='by ip address'}</option> <option value="6" {if {$search_type} == 6} selected="selected" {/if}>{l s='by ip address'}</option>
</optgroup> </optgroup>
<option value="3" {if {$search_type} == 3} selected="selected" {/if}>{l s='orders'}</option> <option value="3" {if {$search_type} == 3} selected="selected" {/if}>{l s='orders'}</option>
<option value="4" {if {$search_type} == 4} selected="selected" {/if}>{l s='invoices'}</option> <option value="4" {if {$search_type} == 4} selected="selected" {/if}>{l s='invoices'}</option>
<option value="5" {if {$search_type} == 5} selected="selected" {/if}>{l s='carts'}</option> <option value="5" {if {$search_type} == 5} selected="selected" {/if}>{l s='carts'}</option>
<option value="7" {if {$search_type} == 7} selected="selected" {/if}>{l s='modules'}</option> <option value="7" {if {$search_type} == 7} selected="selected" {/if}>{l s='modules'}</option>
</select> -->
</select> -->
</form> </form>
{if count($quick_access) > 0} {if count($quick_access) > 0}
<ul id="header_quick"> <ul id="header_quick">
<li class="dropdown"> <li class="dropdown">
@@ -257,7 +332,7 @@
{if {$base_url}} {if {$base_url}}
<li> <li>
<a href="{$base_url}" id="header_foaccess" target="_blank" title="{l s='View my shop'}"> <a href="{$base_url}" id="header_foaccess" target="_blank" title="{l s='View my shop'}">
<i class="icon-eye-open"></i> {l s='View my shop'} <i class="icon-star"></i> {l s='View my shop'}
</a> </a>
</li> </li>
{/if} {/if}
+3 -3
View File
@@ -49,9 +49,9 @@ class AdminLoginControllerCore extends AdminController
$this->addJS(_PS_JS_DIR_.'vendor/spin.js'); $this->addJS(_PS_JS_DIR_.'vendor/spin.js');
$this->addJS(_PS_JS_DIR_.'vendor/ladda.js'); $this->addJS(_PS_JS_DIR_.'vendor/ladda.js');
$this->addJS(_PS_JS_DIR_.'login.js'); $this->addJS(_PS_JS_DIR_.'login.js');
$this->addJqueryUI('ui.widget'); //$this->addJqueryUI('ui.widget');
$this->addJqueryUI('effects.shake'); //$this->addJqueryUI('effects.shake');
$this->addJqueryUI('effects.slide'); //$this->addJqueryUI('effects.slide');
} }
public function initContent() public function initContent()
+1 -1
View File
@@ -132,9 +132,9 @@ function doAjaxLogin(redirect) {
l.start(); l.start();
}, },
success: function(jsonData) { success: function(jsonData) {
l.stop();
if (jsonData.hasErrors) if (jsonData.hasErrors)
displayErrors(jsonData.errors); displayErrors(jsonData.errors);
l.stop();
else else
window.location.assign(jsonData.redirect); window.location.assign(jsonData.redirect);
}, },