// 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 */
#header_search {
width: 130px;
padding: 0 0 0 10px; }
width: 160px;
padding: 0 0 0 10px;
position: relative; }
@media (max-width: 768px) {
/* line 52, admin-theme/_admin-header.sass */
#header_search {
width: 100%; } }
/* line 59, admin-theme/_admin-header.sass */
/* line 60, admin-theme/_admin-header.sass */
#header_search input, #header_search .form-group {
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 */
#footer {
@@ -8205,15 +8213,18 @@ a.link-social:hover {
font-family: "Ubuntu", sans-serif;
text-transform: uppercase;
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 {
background-color: white; }
/* line 44, admin-theme/_admin-commons.sass */
/* line 46, admin-theme/_admin-commons.sass */
.alert.alert-danger, #carrier_wizard .wizard_error {
padding-left: 60px;
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 {
position: absolute;
top: 0;
@@ -8229,11 +8240,11 @@ a.link-social:hover {
-webkit-font-smoothing: antialiased;
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 {
padding-left: 60px;
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 {
position: absolute;
top: 0;
@@ -8249,11 +8260,11 @@ a.link-social:hover {
-webkit-font-smoothing: antialiased;
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 {
margin: 0 -20px -20px; }
/* line 86, admin-theme/_admin-commons.sass */
/* line 88, admin-theme/_admin-commons.sass */
.overflow-y {
height: 200px;
overflow-y: auto; }
@@ -8416,7 +8427,7 @@ label.control-label span.label-tooltip {
-o-border-radius: 3px;
border-radius: 3px; }
/* line 17, admin-theme/_admin-forms.sass */
/* line 16, admin-theme/_admin-forms.sass */
label.required:before {
content: "*";
color: red;
@@ -8424,37 +8435,38 @@ label.required:before {
position: relative;
line-height: 12px; }
/* line 24, admin-theme/_admin-forms.sass */
/* line 23, admin-theme/_admin-forms.sass */
.tooltip {
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 {
width: 80px;
float: left; }
/* line 33, admin-theme/_admin-forms.sass */
/* line 32, admin-theme/_admin-forms.sass */
textarea {
resize: none; }
/* line 37, admin-theme/_admin-forms.sass */
/* line 36, admin-theme/_admin-forms.sass */
.btn {
text-transform: uppercase; }
/* line 39, admin-theme/_admin-forms.sass */
/* line 38, admin-theme/_admin-forms.sass */
.btn .caret {
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 {
border-top-color: white !important; }
/* line 44, admin-theme/_admin-forms.sass */
/* line 43, admin-theme/_admin-forms.sass */
.btn.btn-default {
-webkit-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 {
-webkit-box-shadow: #c7e6c7 0 -2px 0 inset;
box-shadow: #c7e6c7 0 -2px 0 inset; }
/* line 50, admin-theme/_admin-forms.sass */
background-color: #1ba6e5;
color: white;
border-color: #1585b8; }
/* line 52, admin-theme/_admin-forms.sass */
.btn.btn-default[disabled] {
border-color: #999999;
color: #999999;
@@ -8462,46 +8474,46 @@ textarea {
-webkit-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 {
text-align: left; }
/* line 57, admin-theme/_admin-forms.sass */
/* line 59, admin-theme/_admin-forms.sass */
.btn-group-action {
float: right; }
/* line 59, admin-theme/_admin-forms.sass */
/* line 61, admin-theme/_admin-forms.sass */
.btn-group-action a {
text-decoration: none; }
/* line 63, admin-theme/_admin-forms.sass */
/* line 65, admin-theme/_admin-forms.sass */
.tt-query {
border-bottom-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 {
background-color: white;
border: solid 1px #cccccc;
font-size: 0.9em;
text-transform: none; }
/* line 70, admin-theme/_admin-forms.sass */
/* line 72, admin-theme/_admin-forms.sass */
.tt-suggestions {
padding: 0 6px;
-webkit-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 {
border-bottom: solid 1px #cccccc;
margin: 0 !important;
padding: 0 !important; }
/* line 77, admin-theme/_admin-forms.sass */
/* line 79, admin-theme/_admin-forms.sass */
.tt-suggestion:last-child p {
border-bottom: none; }
/* line 81, admin-theme/_admin-forms.sass */
/* line 83, admin-theme/_admin-forms.sass */
.tagify-container {
background-color: white;
padding: 2px 6px;
@@ -8515,10 +8527,10 @@ textarea {
border: solid 1px #cccccc;
-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; }
/* line 89, admin-theme/_admin-forms.sass */
/* line 91, admin-theme/_admin-forms.sass */
.tagify-container span {
float: left; }
/* line 91, admin-theme/_admin-forms.sass */
/* line 93, admin-theme/_admin-forms.sass */
.tagify-container > span {
display: inline-block;
padding: 3px 5px;
@@ -8527,20 +8539,20 @@ textarea {
border: 1px solid #1ba6e5;
background-color: #60c1ed;
color: white; }
/* line 99, admin-theme/_admin-forms.sass */
/* line 101, admin-theme/_admin-forms.sass */
.tagify-container > span > a {
padding-left: 5px;
color: #1ba6e5;
text-decoration: none;
font-weight: bold; }
/* line 104, admin-theme/_admin-forms.sass */
/* line 106, admin-theme/_admin-forms.sass */
.tagify-container > input {
margin-top: 2px;
border: 0 none;
width: 100px;
-webkit-box-shadow: none;
box-shadow: none; }
/* line 109, admin-theme/_admin-forms.sass */
/* line 111, admin-theme/_admin-forms.sass */
.tagify-container > input:focus {
outline: 0;
-webkit-box-shadow: none;
@@ -37,6 +37,8 @@
font-family: $headings-font-family
text-transform: uppercase
font-weight: 300
&:hover
background-color: white
li.active
a, a:hover
background-color: white
@@ -13,7 +13,6 @@ label.control-label span.label-tooltip
padding: 0 5px
@include border-radius(3px)
label.required:before
content: '*'
color: red
@@ -45,7 +44,10 @@ textarea
@include box-shadow(darken($btn-default-bg,10%) 0 -2px 0 inset)
&.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]
border-color: $gray-light
@@ -52,12 +52,22 @@
#header_search
@extend .navbar-form
@extend .navbar-left
width: 130px
width: 160px
padding: 0 0 0 10px
position: relative
@media (max-width: $screen-tablet)
width: 100%
input, .form-group
margin: 0
.form-group.focus-search
position: absolute
z-index: 900
top: 0
left: 10px
width: 400px
#header_quick
@extend .nav
@extend .navbar-nav
+80 -5
View File
@@ -216,30 +216,105 @@
<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">
<div class="form-group">
<input type="hidden" name="bo_search_type" id="bo_search_type" />
<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">
<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>
</button>
</span>
<input type="text" class="form-control" name="bo_query" id="bo_query" value="{$bo_query}" placeholder="{l s='Search'}"/>
</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">
<option value="0">{l s='everywhere'}</option>
<option value="1" {if {$search_type} == 1} selected="selected" {/if}>{l s='catalog'}</option>
<optgroup label="{l s='customers'}:">
<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>
</optgroup>
<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="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>
</select> -->
</select> -->
</form>
{if count($quick_access) > 0}
<ul id="header_quick">
<li class="dropdown">
@@ -257,7 +332,7 @@
{if {$base_url}}
<li>
<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>
</li>
{/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/ladda.js');
$this->addJS(_PS_JS_DIR_.'login.js');
$this->addJqueryUI('ui.widget');
$this->addJqueryUI('effects.shake');
$this->addJqueryUI('effects.slide');
//$this->addJqueryUI('ui.widget');
//$this->addJqueryUI('effects.shake');
//$this->addJqueryUI('effects.slide');
}
public function initContent()
+1 -1
View File
@@ -132,9 +132,9 @@ function doAjaxLogin(redirect) {
l.start();
},
success: function(jsonData) {
l.stop();
if (jsonData.hasErrors)
displayErrors(jsonData.errors);
l.stop();
else
window.location.assign(jsonData.redirect);
},