Skip to content

Commit

Permalink
// admin header - Add search
Browse files Browse the repository at this point in the history
  • Loading branch information
nihco2 committed Apr 27, 2016
1 parent 0cf1c00 commit 095946c
Show file tree
Hide file tree
Showing 5 changed files with 84 additions and 76 deletions.
2 changes: 1 addition & 1 deletion admin-dev/themes/new-theme/public/theme.css

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,22 @@
left: rem(8px);
right: rem(8px);
}
> .ps-dropdown {
> .ps-dropdown:not(.search) {
top: rem(-10px);
> .ps-dropdown-menu {
left: rem(17px);
}
}
> .search .ps-dropdown-menu{
left: rem(-28px);
.material-icons{
vertical-align: bottom;
margin-right: rem(5px);
}
}
> .bo_search_form{
margin-top: rem(5px);
}
}
> .component.-norightmargin {
margin-right: 0;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
{* Quick access *}
<div class="ps-dropdown dropdown">
<span type="button" id="quick-access" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="js-selected-item selected-item">{l s='Quick Access'}</span> <i class="material-icons arrow-down">keyboard_arrow_down</i>
<span class="selected-item">{l s='Quick Access'}</span> <i class="material-icons arrow-down">keyboard_arrow_down</i>
</span>
<div class="ps-dropdown-menu dropdown-menu" aria-labelledby="quick-access">
<ul class="items-list js-items-list">
<ul class="items-list">
{foreach $quick_access as $quick}
<li><a href="{$baseAdminUrl}{$quick.link|escape:'html':'UTF-8'}" class="dropdown-item" data-item="{$quick.name}">{$quick.name}</a></li>
{/foreach}
Expand All @@ -19,7 +19,7 @@
</li>
{/if}
<li {if isset($matchQuickLink)}class="hide"{/if}>
<a class="dropdown-item js-quick-link" data-rand="{1|rand:200}" data-quicklink-id="{$matchQuickLink}" data-icon="{$quick_access_current_link_icon}" data-method="add" data-url="{$link->getQuickLink($smarty.server['REQUEST_URI'])}" data-post-link="{$link->getAdminLink('AdminQuickAccesses')}" data-prompt-text="{l s='Please name this shortcut:' js=1}" data-link="{$quick_access_current_link_name|truncate:32}">
<a class="dropdown-item js-quick-link" data-rand="{1|rand:200}" data-icon="{$quick_access_current_link_icon}" data-method="add" data-url="{$link->getQuickLink($smarty.server['REQUEST_URI'])}" data-post-link="{$link->getAdminLink('AdminQuickAccesses')}" data-prompt-text="{l s='Please name this shortcut:' js=1}" data-link="{$quick_access_current_link_name|truncate:32}">
{l s='Add current page to QuickAccess'}
</a>
</li>
Expand Down
138 changes: 68 additions & 70 deletions admin-dev/themes/new-theme/template/components/layout/search_form.tpl
Original file line number Diff line number Diff line change
Expand Up @@ -22,74 +22,72 @@
* @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)
* International Registered Trademark & Property of PrestaShop SA
*}
<form id="{$id|escape:'html':'UTF-8'}" class="bo_search_form" method="post" action="{$baseAdminUrl}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-default dropdown-toggle" data-toggle="dropdown">
<i id="search_type_icon" class="icon-search"></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='What are you looking for?'}" data-icon="icon-search">
<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='Product name, SKU, reference...'}" 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='Email, name...'}" 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='123.45.67.89'}" 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='Order ID'}" 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='Invoice Number'}" 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='Cart ID'}" 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='Module name'}" data-icon="icon-puzzle-piece">
<i class="icon-puzzle-piece"></i> {l s='Modules'}
</a>
</li>
</ul>
</div>
{if isset($show_clear_btn) && $show_clear_btn}
<a href="#" class="clear_search hide"><i class="icon-remove"></i></a>
{/if}
<input id="bo_query" name="bo_query" type="text" class="form-control" value="{$bo_query}" placeholder="{l s='Search'}" />
<!-- <span class="input-group-btn">
<button type="submit" id="bo_search_submit" class="btn btn-primary">
<i class="icon-search"></i>
</button>
</span> -->
</div>
</div>

<script>
{if isset($search_type) && $search_type}
$(document).ready(function() {
$('.search-option a[data-value='+{$search_type|intval}+']').click();
});
{/if}
</script>
</form>

<form id="{$id|escape:'html':'UTF-8'}" class="bo_search_form pull-left" method="post" action="{$baseAdminUrl}index.php?controller=AdminSearch&amp;token={getAdminToken tab='AdminSearch'}" role="search">
<input type="hidden" name="bo_search_type" id="bo_search_type" />
{if isset($show_clear_btn) && $show_clear_btn}
<a href="#" class="clear_search hide"><i class="icon-remove"></i></a>
{/if}
<input type="search" class="form-control form-search">
</form>

<div class="ps-dropdown dropdown pull-left search m-l-1">
<span type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="js-selected-item">{l s='Search'}</span><i class="material-icons arrow-down">keyboard_arrow_down</i>
</span>
<div class="ps-dropdown-menu dropdown-menu js-dropdown-menu" aria-labelledby="dropdownMenu">
<ul class="items-list js-items-list">
<li class="search-all search-option active">
<a class="dropdown-item" data-item="{l s='Everywhere'}" href="#" data-value="0" data-placeholder="{l s='What are you looking for?'}" data-icon="icon-search">
<i class="material-icons">search</i> {l s='Everywhere'}</a>
</li>
<hr>
<li class="search-book search-option">
<a class="dropdown-item" data-item="{l s='Catalog'}" href="#" data-value="1" data-placeholder="{l s='Product name, SKU, reference...'}" data-icon="icon-book">
<i class="material-icons">library_books</i> {l s='Catalog'}
</a>
</li>
<li class="search-customers-name search-option">
<a class="dropdown-item" data-item="{l s='Customers'} {l s='by name'}" href="#" data-value="2" data-placeholder="{l s='Email, name...'}" data-icon="icon-group">
<i class="material-icons">group</i> {l s='Customers'} {l s='by name'}
</a>
</li>
<li class="search-customers-addresses search-option">
<a class="dropdown-item" data-item="{l s='Customers'} {l s='by ip address'}" href="#" data-value="6" data-placeholder="{l s='123.45.67.89'}" data-icon="icon-desktop">
<i class="material-icons">desktop_windows</i>{l s='Customers'} {l s='by ip address'}</a>
</li>
<li class="search-orders search-option">
<a class="dropdown-item" data-item="{l s='Orders'}" href="#" data-value="3" data-placeholder="{l s='Order ID'}" data-icon="icon-credit-card">
<i class="material-icons">credit_card</i> {l s='Orders'}
</a>
</li>
<li class="search-invoices search-option">
<a class="dropdown-item" data-item="{l s='Invoices'}" href="#" data-value="4" data-placeholder="{l s='Invoice Number'}" data-icon="icon-book">
<i class="material-icons">book</i></i> {l s='Invoices'}
</a>
</li>
<li class="search-carts search-option">
<a class="dropdown-item" data-item="{l s='Carts'}" href="#" data-value="5" data-placeholder="{l s='Cart ID'}" data-icon="icon-shopping-cart">
<i class="material-icons">shopping_cart</i> {l s='Carts'}
</a>
</li>
<li class="search-modules search-option">
<a class="dropdown-item" data-item="{l s='Modules'}" href="#" data-value="7" data-placeholder="{l s='Module name'}" data-icon="icon-puzzle-piece">
<i class="material-icons">view_module</i> {l s='Modules'}
</a>
</li>
</ul>
</div>
</div>

<script type="text/javascript">
$(document).ready(function(){
$('.js-items-list').on('click',function (e) {
$('.js-selected-item').html($(e.target).find('.material-icons').clone());
});
{if isset($search_type) && $search_type}
$('.search-option a[data-value='+{$search_type|intval}+']').click();
{/if}
});
</script>
2 changes: 1 addition & 1 deletion admin-dev/themes/new-theme/template/layout.tpl
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
<a class="logo" href="{$default_tab_link|escape:'html':'UTF-8'}"></a>

<div class="component">{include file="components/layout/quick_access.tpl"}</div>
{*<div class="component">{include file="components/layout/search_form.tpl"}</div>*}
<div class="component">{include file="components/layout/search_form.tpl"}</div>
<div class="component pull-md-right -norightmargin">{include file="components/layout/employee_dropdown.tpl"}</div>
<div class="component pull-md-right">{include file="components/layout/notifications_center.tpl"}</div>
<div class="component pull-md-right">{include file="components/layout/shop_list.tpl"}</div>
Expand Down

0 comments on commit 095946c

Please sign in to comment.