[*] BO : #PSFV-94 - adminProducts > informations, toolbar and css (starting new design integration (thanks to vuThe)

This commit is contained in:
mMarinetti
2011-10-27 14:38:58 +00:00
parent ec3b7738e8
commit c5c08b0e87
14 changed files with 302 additions and 165 deletions
+70 -18
View File
@@ -1,7 +1,20 @@
body{background:#EFEFEF}
body {font-family: Arial, Helvetica, sans-serif;}
h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif;}
ul li {list-style-type:none;}
#top_container{margin:0;padding:0}
#header_infos{float:left;font-size:10px;margin:10px 20px 4px 0;width:380px;height:40px}
#header_infos #header_shopname span{display:block;font-size:24px;height:28px;overflow:hidden;margin-bottom:-8px}
/*HEADER*/
#header { background-color: #3d3d3d; height:94px;}
#header_infos{float:left;font-size:10px;margin:10px 20px 4px 0;width:380px;}
#header_infos #header_shopname span{display:block;font-size:24px;height:28px;overflow:hidden;margin-bottom:-8px; color:#fff;}
#header_infos #header_logout{text-decoration:underline}
#header_infos #header_foaccess{text-decoration:none}
#header_search{float:right;height:39px;width:356px}
@@ -10,8 +23,9 @@ body{background:#EFEFEF}
#header_search #bo_search_submit{cursor:pointer;float:left;font-weight:700;margin:7px 0 0 2px;width:79px}
#header_quick{float:right;height:39px;margin-right:1px;width:175px}
#header_quick #quick_select{margin:8px 0 0 20px;vertical-align:middle;width:140px}
#header_shoplist{float: right;}
#header_shoplist{float: right;clear:right}
#header_myaccount{background:url(bg-lang.png) no-repeat;display:block;float:right;height:16px;margin:8px 1px 0 0;width:16px}
.path_bar {display:none;}
.button{background-color:#FFF6D3;border:1px solid #DFD5AF;border-left:1px solid #FFF6D3;border-top:1px solid #FFF6D3;color:#268CCD;padding:3px}
.button[disabled=disabled]{color:#8C8C8C}
input.button[disabled=disabled]:hover{background-color:#FFF6D3}
@@ -35,9 +49,11 @@ input.button[disabled=disabled]:hover{background-color:#FFF6D3}
.cat_bar a{font-weight:700}
fieldset{background:#FFFFF0;border:1px solid #DFD5C3;font-size:1.1em;margin:0;padding:1em}
legend{background:#FFF6D3;border:1px solid #DFD5C3;font-weight:700;margin:0;padding:.2em .5em;text-align:left}
#menu{float:left;height:30px;line-height:normal;margin:10px 0 0;*margin:7px 0 0;padding:0;width:100%;padding:0 1px}
#menu li.maintab{background:url(bg-tab.png) repeat-x 0 -2px;float:left;height:29px;list-style:none;margin:0 1px 0 0;list-style:none;display:block;border:1px solid #999999;-moz-border-radius-topright:6px;-moz-border-radius-topleft:6px;-webkit-border-top-right-radius:6px;-webkit-border-top-left-radius:6px}
#menu li.submenu_size .title{color:#000;display:block;height:20px;padding:8px 6px 4px 0;font-weight:bold;font-size:0.95em;}
/*MENU*/
#menu{ background-color: #f8f8f8; border-bottom:1px solid #e5e5e5; float:left;height:36px;line-height:normal;margin:10px 0;*margin:0;padding:0;width:100%;}
#menu li.maintab{float:left;height:29px;list-style:none;margin:0 1px 0 0;list-style:none;display:block; border-left:1px solid #fff; border-right:1px solid #ccc;}
#menu li.submenu_size .title{color:#000;display:block;height:20px;padding:8px 6px 4px 0;font-weight:normal;font-size:0.95em;}
#menu li.submenu_size .title{_display:inline;_padding:6px 5px 4px 0}
#menu li{_height:32px;_padding-top:3px}
#menu img{display:inline;padding:0 3px 0 6px;vertical-align:top;width:16px;height:16px}
@@ -47,15 +63,10 @@ legend{background:#FFF6D3;border:1px solid #DFD5C3;font-weight:700;margin:0;padd
.withLeftBorder{background:transparent url(separator_subnav.png) no-repeat 0 5px}
.submenu li{list-style:none;margin:0;padding-left:7px;padding-right:7px;margin-top:8px;float:left;height:16px;}
.submenu li a{text-decoration:underline}
.tab-row {height:24px;width:100px;margin-left:25px;border:1px solid #cccccc}
.tab-row .tab .selected {background:#FFF6D3;margin:1px -3px -3px 25px;top:-2px;background-color:#eeeeee}
.tab-row .tab {background:#EFEFEF;width:100px;}
.tab-row .tab-page.selected {background:#FFF6D3;font-weight:bold;margin:1px -3px -3px 0px;top:-2px;background-color:#eeeeee}
.tab-row .tab-page {background:#EFEFEF;width:100px;}
hr {height: 1px;color:#E0D0B1;background-color:#E0D0B1}
#footer {height:40px;background:#ECEADE url(footer-bg.png) repeat-x scroll left bottom;border:1px solid #999999;font-size:12px;clear:both;font-size:0.9em;color:#666666}
#content {background-color:#FFF;border-left:1px solid #999999;border-right:1px solid #999999; border-top:1px solid #999999}
input[type="text"],input[type="password"],input[type="file"],textarea {border:1px solid #E0D0B1}
#content {}
input[type="text"],input[type="password"],input[type="file"],textarea {border:1px solid #ccc;}
select {border: 1px solid #E0D0B1}
select[disabled="disabled"], input[disabled="disabled"],textarea[disabled="disabled"] {border: 1px solid #CCCCCC;color: #AAAAAA}
.header_module{background:url(header_module.png);padding-left: 0.5em;padding-top: 0.8em;height:20px;color: #812143;border:solid 1px #CCC;}
@@ -88,10 +99,51 @@ a.module_toggle_all{color: #268CCD;}
#header_infos .notifs_wrapper a {font-weight: bold;color: black;}
.notifs_wrapper p {font-size: 12px;padding-top:8px;margin:0;border-top: 2px solid #E0E0E0;}
.notifs_wrapper p.no_notifs {border: none;}
.productTabs ol{padding:0;}
.productTabs{background-color:#e0e0e0;border:1px solid #cccccc;position:absolute;top:100px;left:50px;}
/*toolbarBox*/
.toolbarBox { margin-bottom:10px;}
.toolbarBox .pageTitle { line-height:48px}
.toolbarBox .pageTitle h3 {font-size: 2em; font-weight: bold; line-height: 48px; margin: 0; padding: 0;}
.toolbarBox ul.cc_button {float:right;margin:0;padding:0;}
.toolbarBox ul.cc_button li {color: #666666; float: left; height: 48px; list-style: none outside none; padding: 1px 1px 3px 4px; text-align: center;}
.toolbarBox a.toolbar_btn { border-color: #cccccc #bbbbbb #a0a0a0; border-left: 1px solid #bbbbbb; border-radius: 3px 3px 3px 3px; border-right: 1px solid #bbbbbb; border-style: solid; border-width: 1px;font-size:11px;cursor: pointer; display: block; float: left; padding: 1px 5px; white-space: nowrap; text-shadow: 0 1px 0 #ffffff;
background: -moz-linear-gradient(center top , #ffffff, #eeeeee) repeat scroll 0 0 transparent;
background: -webkit-linear-gradient(center top , #ffffff, #eeeeee) repeat scroll 0 0 transparent;}
.toolbarBox a.toolbar_btn:hover {border-color:#939393;}
.toolbarBox .toolbar_btn span{ display: block;float: none;height: 32px;margin: 0 auto;width: 32px;}
.toolbarBox .process-icon-delete { background-image: url(process-icon-delete.png);}
.toolbarBox .process-icon-duplicate { background-image: url(process-icon-duplicate.png);}
.toolbarBox .process-icon-preview { background-image: url(process-icon-preview.png);}
.toolbarBox .process-icon-stats { background-image: url(process-icon-stats.png);}
.toolbarBox .process-icon-cancel { background-image: url(process-icon-cancel.png);}
.toolbarBox .process-icon-new{ background-image: url(process-icon-new.png);}
.toolbarBox .process-icon-save { background-image: url(process-icon-save.png);}
.toolbarBox .process-icon-save-and-stay { background-image: url(process-icon-save-and-stay.png);}
/*productBox*/
#productBox { position:relative; width:100%; float:left;}
/*tab-pane*/
form#product{ background-color:#ebedf4; border:1px solid #ccced7; min-height:300px; padding: 5px 10px 10px; margin-left:140px;}
form.defaultForm{ background-color:#ebedf4; border:1px solid #ccced7; min-height:300px; padding: 5px 10px 10px;}
.tab-row {}
.tab-row .tab {background:#EFEFEF;width:100px;}
.tab-row .tab-page.selected {}
.tab-row .tab-page {}
.productTabs{ background-color:#fafafa; border:1px solid #ccced7; border-right:none; float:left; width:140px;}
.productTabs ul{padding:0;}
.productTabs ul li.tab-row { border:none; }
.productTabs ul li.tab-row:first-child a {border-top:none;}
.productTabs ul li.tab-row a { display:block; font-weight:normal; color:#666;padding: 7px 10px; border-top:1px solid #CCCED7; border-right:1px solid #CCCED7;}
.productTabs ul li.tab-row a.selected { background-color:#EBEDF4;font-weight:bold;color:#000; border-right:none;}
.product-tab-content h4.tab { display:none;}
ul.cc_button {float:right;margin:0;padding:6px 0;}
ul.cc_button li {float:left;text-decoration: none;list-style: none;font-size:12px;padding:5px 0;}
.available_btn {border:2px outset black;display:block;height:50px;margin:2px;padding:3px 2px 1px 2px;width:60px;}
.available_btn span{font-size:small;margin-top:5px;text-align:center}
.toolbar_btn {border:2px outset black;display:block;height:50px;margin:2px;padding:3px 2px 1px 2px;width:60px;}
.toolbar_btn span{font-size:small;margin-top:5px;text-align:center}
Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

+29 -12
View File
@@ -4,15 +4,41 @@
<script src="../js/jquery/ui/jquery.ui.widget.min.js" type="text/javascript"></script>
<script src="../js/jquery/ui/jquery.ui.progressbar.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../js/admin.js"></script>
<div class="toolbarBox">
<ul class="cc_button">
{foreach from=$toolbar_btn item=btn key=k}
<li>
<a class="toolbar_btn action-{$k}" href="{$btn.href}" title="{$btn.desc}">
<span class="process-icon-{$k} {$btn.class|default:'' }" ></span>{$btn.short}
</a>
</li>
{/foreach}
</ul>
<script type="text/javascript">
$(document).ready(function(){
$("a.toolbar_btn").click(function(e){
e.preventDefault();
});
});
</script>
{if isset($product)}
<div class="pageTitle">
<h3>{l s='Current product:'}<span id="current_product" style="font-weight: normal;">&nbsp;</span></h3>
</div>
{/if}
</div>
<div id="productBox">
{if isset($product_tabs)}
<div class="productTabs">
<ol class="tab">
<ul class="tab">
{foreach $product_tabs key=numStep item=tab}
<li class="tab-row">
<a class="tab-page {if $tab.selected}selected{/if}" id="link-{$tab.id}" href="{$tab.href}">{$tab.name}</a>{*todo href when nojs*}
</li>
{/foreach}
</ol>
</ul>
</div>
<script type="text/javascript">
var toload = new Array();
@@ -182,18 +208,8 @@ $(document).ready(function(){
}
//]]>
</script>
<form action="{$form_action}" method="post" enctype="multipart/form-data" name="product" id="product">
{$draft_warning}
<ul class="cc_button">
{foreach from=$available_btn item=btn key=k}
<li>
<a class="available_btn" href="{$btn.href}" title="{$btn.desc}">
<span class="process-icon-{$k}">{$btn.short}</span>
</a>
</li>
{/foreach}
</ul>
<input type="hidden" name="id_product" value="{$id_product}" />
<input type="hidden" name="tabs" id="tabs" value="0" />
<div class="tab-pane" id="tabPane1">
@@ -210,6 +226,7 @@ $(document).ready(function(){
</div>
<input type="hidden" name="id_product_attribute" id="id_product_attribute" value="0" />
</form>
</div>
<br/>
<a href="{$link->getAdminLink('AdminCatalog')}"><img src="../img/admin/arrow2.gif" />{l s='Back to list'}</a><br/>
{else}
@@ -61,8 +61,7 @@
}
});
</script>
<b>{l s='Product global information'}</b>&nbsp;-&nbsp;
<h3>{l s='Current product:'}<span id="current_product" style="font-weight: normal;">{l s='no name'}</span></h3>
<h4>{l s='Product global information'}</h4>
<script type="text/javascript">
{$combinationImagesJs}
$(document).ready(function(){
@@ -82,7 +81,7 @@
$('#mvt_sign').show();
}
</script>
<div class="separation clear"></div>
<div class="separation"></div>
<br />
<table cellpadding="5" style="width: 50%; float: left; margin-right: 20px; border-right: 1px solid #E0D0B1;">
{* global information *}
@@ -139,7 +138,7 @@
{* status informations *}
<table cellpadding="5" style="width: 40%; float: left; margin-left: 10px;">
<tr>
<td style="vertical-align:top;text-align:right;padding-right:10px;font-weight:bold;">{l s='Status:' }</td>
<td class="col-left"><label>{l s='Status:' }</label></td>
<td style="padding-bottom:5px;">
<input style="float:left;" onclick="toggleDraftWarning(false);showOptions(true);" type="radio" name="active" id="active_on" value="1" {if $product->active}checked="checked" {/if} />
<label for="active_on" class="t"><img src="../img/admin/enabled.gif" alt="{l s='Enabled'}"
@@ -153,12 +152,12 @@
{if $feature_shop_active}
{* @todo use asso_shop from Helper *}
<tr id="shop_association">
<td style="vertical-align:top;text-align:right;padding-right:10px;font-weight:bold;">{l s='Shop association:'}</td>
<td class="col-left"><label>{l s='Shop association:' }</label></td>
<td style="padding-bottom:5px;">{$displayAssoShop}</td>
</tr>
{/if}
<tr id="product_options" {if !$product->active}style="display:none"{/if} >
<td style="vertical-align:top;text-align:right;padding-right:10px;font-weight:bold;">{l s='Options:' }</td>
<td class="col-left"><label>{l s='Options:' }</label></td>
<td style="padding-bottom:5px;">
<input style="float: left;" type="checkbox" name="available_for_order" id="available_for_order" value="1" {if $product->available_for_order}checked="checked"{/if} />
<script type="text/javascript">
@@ -187,7 +186,7 @@
</td>
</tr>
<tr>
<td style="vertical-align:top;text-align:right;padding-right:10px;font-weight:bold;">{l s='Condition:' }</td>
<td class="col-left"><label>{l s='Condition:' }</label></td>
<td style="padding-bottom:5px;">
<select name="condition" id="condition">
<option value="new" {if $product->condition == 'new'}selected="selected"{/if} >{l s='New'}</option>
@@ -197,7 +196,7 @@
</td>
</tr>
<tr>
<td style="vertical-align:top;text-align:right;padding-right:10px;font-weight:bold;">{l s='Manufacturer:' }</td>
<td class="col-left"><label>{l s='Manufacturer:' }</label></td>
<td style="padding-bottom:5px;">
<select name="id_manufacturer" id="id_manufacturer">
<option value="0">-- {l s='Choose (optional)'} --</option>
@@ -212,7 +211,7 @@
</td>
</tr>
<tr>
<td style="vertical-align:top;text-align:right;padding-right:10px;font-weight:bold;">{l s='Supplier:' }</td>
<td class="col-left"><label>{l s='Supplier:' }</label></td>
<td style="padding-bottom:5px;">
<select name="id_supplier" id="id_supplier">
<option value="0">-- {l s='Choose (optional)'} --</option>
@@ -573,6 +572,117 @@ $(document).ready(function(){
<tr>
<td colspan="2" style="padding-bottom:5px;"><div class="separation"></div></td>
</tr>
{* @todo : prices related has to be moved in price subtab *}
<tr>
<td class="col-left"><label>{l s='Pre-tax wholesale price:'}</label></td>
<td style="padding-bottom:5px;">
{$currency->prefix}<input size="11" maxlength="14" name="wholesale_price" type="text" value="{$product->wholesale_price}" onchange="this.value = this.value.replace(/,/g, '.');" />{$currency->suffix}
<span style="margin-left:10px">{l s='The wholesale price at which you bought this product'}</span>
</td>
</tr>
<tr>
<td class="col-left"><label>{l s='Pre-tax retail price:'}</label></td>
<td style="padding-bottom:5px;">
{$currency->prefix}<input size="11" maxlength="14" id="priceTE" name="price" type="text" value="{$product->price}" onchange="this.value = this.value.replace(/,/g, '.');" onkeyup="if (isArrowKey(event)) return; calcPriceTI();" />{$currency->suffix}<sup> *</sup>
<span style="margin-left:2px">{l s='The pre-tax retail price to sell this product'}</span>
</td>
</tr>
<tr>
<td class="col-left"><label>{l s='Tax rule:' }</label></td>
<td style="padding-bottom:5px;">
<script type="text/javascript">
noTax = {if $tax_exclude_taxe_option}true{else}false{/if};
taxesArray = new Array ();
taxesArray[0] = 0;
{foreach from=$tax_rules_groups item=tax_rules_group}
{if isset($tax_rules_group['id_tax_rules_group'][$taxesRatesByGroup])}
taxesArray[{$tax_rules_group.id_tax_rules_group}] = {$tax_rules_group.id_tax_rules_group[$taxesRatesByGroup]};
{else}
taxesArray[{$tax_rules_group.id_tax_rules_group}] = 0;
{/if}
{/foreach}
ecotaxTaxRate = {$ecotaxTaxRate / 100};
</script>
<span {if $tax_exclude_taxe_option}style="display:none;"{/if} >
<select onChange="javascript:calcPriceTI(); unitPriceWithTax('unit');" name="id_tax_rules_group" id="id_tax_rules_group" {if $tax_exclude_taxe_option}disabled="disabled"{/if} >
<option value="0">{l s='No Tax'}</option>
{foreach from=$tax_rules_groups item=tax_rules_group}
<option value="{$tax_rules_group.id_tax_rules_group}" {if $product->id_tax_rules_group == $tax_rules_group.id_tax_rules_group}selected="selected"{/if} >
{$tax_rules_group['name']|htmlentitiesUTF8}
</option>
{/foreach}
</select>
<a href="{$link->getAdminLink('AdminTaxRulesGroup')}&addtax_rules_group&id_product={$product->id}" onclick="return confirm('{l s='Are you sure you want to delete entered product information?'}'" >
<img src="../img/admin/add.gif" alt="{l s='Create'}" title="{l s='Create'}" /> <b>{l s='Create'}</b>
</a>
</span>
{if $tax_exclude_taxe_option}
<span style="margin-left:10px; color:red;">{l s='Taxes are currently disabled'}</span> (<b><a href="{$link->getAdminLink('AdminTaxes')}">{l s='Tax options'}</a></b>)
<input type="hidden" value="{$product->id_tax_rules_group}" name="id_tax_rules_group" />
{/if}
</td>
</tr>
{if $ps_use_ecotax}
<tr>
<td class="col-left"><label>{l s='Eco-tax (tax incl.):' }</label></td>
<td style="padding-bottom:5px;">
{$currency->prefix}<input size="11" maxlength="14" id="ecotax" name="ecotax" type="text" value="{$product->ecotax}" onkeyup="if (isArrowKey(event))return; calcPriceTE(); this.value = this.value.replace(/,/g, '.'); if (parseInt(this.value) > getE('priceTE').value) this.value = getE('priceTE').value; if (isNaN(this.value)) this.value = 0;" />{$currency->suffix}
<span style="margin-left:10px">({l s='already included in price'})</span>
</td>
</tr>
{/if}
<tr {if !$country_display_tax_label || $tax_exclude_taxe_option}style="display:none"{/if} >
<td class="col-left"><label>{l s='Retail price with tax:' }</label></td>
<td style="padding-bottom:5px;">
{$currency->prefix}<input size="11" maxlength="14" id="priceTI" type="text" value="" onchange="noComma('priceTI');" onkeyup="if (isArrowKey(event)) return; calcPriceTE();" />{$currency->suffix}
</td>
</tr>
<tr id="tr_unit_price">
<td class="col-left"><label>{l s='Unit price without tax:' }</label></td>
<td style="padding-bottom:5px;">
{$currency->prefix} <input size="11" maxlength="14" id="unit_price" name="unit_price" type="text" value="{$product->unit_price}"
onkeyup="if (isArrowKey(event)) return ;this.value = this.value.replace(/,/g, '.'); unitPriceWithTax('unit');"/>{$currency->suffix}
{l s='per'} <input size="6" maxlength="10" id="unity" name="unity" type="text" value="{$product->unity|htmlentitiesUTF8}" onkeyup="if (isArrowKey(event)) return ;unitySecond();" onchange="unitySecond();"/>
{if $ps_tax && $country_display_tax_label}
<span style="margin-left:15px">{l s='or'}
{$currency->prefix}<span id="unit_price_with_tax">0.00</span>{$currency->suffix}
{l s='per'} <span id="unity_second">{$product->unity}</span> {l s='with tax'}
</span>
{/if}
<p>{l s='Eg. $15 per Lb'}</p>
</td>
</tr>
<tr>
<td class="col-left"><label>&nbsp;</label></td>
<td style="padding-bottom:5px;">
<input type="checkbox" name="on_sale" id="on_sale" style="padding-top: 5px;" {if $product->on_sale}checked="checked"{/if} value="1" />&nbsp;<label for="on_sale" class="t">{l s='Display "on sale" icon on product page and text on product listing'}</label>
</td>
</tr>
<tr>
<td class="col-left"><label><b>{l s='Final retail price:'}</b></label></td>
<td style="padding-bottom:5px;">
<span {if !$country_display_tax_label}style="display:none"{/if} >
{$currency->prefix}<span id="finalPrice" style="font-weight: bold;"></span>{$currency->suffix}<span {if $ps_tax}style="display:none;"{/if}> ({l s='tax incl.'})</span>
</span>
<span {if $ps_tax}style="display:none;"{/if} >
{if $country_display_tax_label}
/
{/if}
{$currency->prefix}<span id="finalPriceWithoutTax" style="font-weight: bold;"></span>{$currency->suffix} {if $country_display_tax_label}({l s='tax excl.'}){/if}</span>
</td>
</tr>
<tr>
<td class="col-left"><label>&nbsp;</label></td>
<td>
<div class="hint clear" style="display: block;width: 70%;">{l s='You can define many discounts and specific price rules in the Prices tab'}</div>
</td>
</tr>
{* [end] prices *}
{$content}