dinislage/PrestaShop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

// tree view product

Browse Source
This commit is contained in:
Kevin Granger
2013-09-09 18:12:31 +02:00
parent b5f6e8a1d8
commit 7774e46cb3
8 changed files with 138 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin-dev/themes/default/css/admin-theme.css
+2 -2
View File
File diff suppressed because one or more lines are too long
admin-dev/themes/default/css/admin-theme.sass
+82 -57
View File
@@ -1,5 +1,5 @@
$brand-primary: #1BA6E5
//$brand-primary: #1BA6E5
$brand-primary: #6992AF
//light
//$main-color: #F7F7F7
@@ -36,8 +36,8 @@ $main-color: #313A45 //gris bleu
//$secondary-color: #937976 //taupe clair
//$secondary-color: #60C276 //vert
//$secondary-color: #9DC44B //vert pomme
//$secondary-color: #6992AF //theme wordpress
$secondary-color: #8BC954 //vert PrestaShop
$secondary-color: #6992AF //theme wordpress
//$secondary-color: #8BC954 //vert PrestaShop
//some tests
//$secondary-color: #79C09D
@@ -1172,64 +1172,89 @@ fieldset > .row
$treeBackgroundHover: lighten(blue,30%)
$treeBackgroundSelect: blue
.tree
border: 1px solid #BBBBBB
+border-radius(4px)
overflow-y: auto
overflow-x: hidden
padding: 10px 15px 0 15px
position: relative
padding: 0 0 0 20px
list-style: none
input
margin-right: 4px
i
font-size: 1.3em
.tree-folder
width: 100%
min-height: 20px
cursor: pointer
margin-top: 1px
.tree-folder-header
position: relative
height: 20px
+border-radius(6px)
&:hover
background-color: $treeBackgroundHover
i
position: absolute
float: left
top: 1px
left: 5px
.tree-folder-name
padding-left: 29px
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
.tree-folder-content
margin-left: 23px
.tree-item
position: relative
width: 100%
height: 20px
cursor: pointer
margin-top: 1px
.tree-item-name, .tree-folder-name
padding: 0 5px
+border-radius(6px)
font-weight: normal
&:hover
background-color: $treeBackgroundHover
.tree-item-name
position: absolute
left: 29px
.tree-dot
position: absolute
top: 8px
left: 10px
display: block
width: 4px
height: 4px
background-color: #ccc
+border-radius(6px)
.icon-ok
position: absolute
top: 1px
left: 5px
background-color: #eee
cursor: pointer
.tree-selected
background-color: $treeBackgroundSelect
&:hover
background-color: $treeBackgroundSelect
background-color: lighten($brand-primary,30%)
i.tree-dot
background-color: $brand-primary
i.tree-dot
display: inline-block
position: relative
width: 6px
height: 6px
margin: 0 4px 0 6px
background-color: #ccc
+border-radius(6px)
// .tree
// padding: 0 0 0 18px
// .tree-folder
// width: 100%
// min-height: 20px
// cursor: pointer
// margin-top: 1px
// .tree-folder-header
// position: relative
// height: 20px
// +border-radius(6px)
// &:hover
// background-color: $treeBackgroundHover
// i
// position: absolute
// float: left
// top: 1px
// left: 5px
// .tree-folder-name
// padding-left: 29px
// white-space: nowrap
// overflow: hidden
// text-overflow: ellipsis
// .tree-folder-content
// margin-left: 23px
// .tree-item
// position: relative
// width: 100%
// height: 20px
// cursor: pointer
// margin-top: 1px
// &:hover
// background-color: $treeBackgroundHover
// .tree-item-name
// position: absolute
// left: 29px
// .tree-dot
// position: absolute
// top: 8px
// left: 10px
// display: block
// width: 4px
// height: 4px
// background-color: #ccc
// +border-radius(6px)
// .icon-ok
// position: absolute
// top: 1px
// left: 5px
// .tree-selected
// background-color: $treeBackgroundSelect
// &:hover
// background-color: $treeBackgroundSelect
#carrier_wizard.swMain
admin-dev/themes/default/js/tree.js
+22 -9
View File
@@ -14,17 +14,26 @@ Tree.prototype =
this.$element.find("label.tree-toggler").click(
function ()
{
if ($(this).parent().children("ul.tree").is(":visible"))
$(this).parent().children(".icon-folder-open")
if ($(this).parent().parent().children("ul.tree").is(":visible"))
{
$(this).parent().children(".icon-folder-open")
.removeClass("icon-folder-open")
.addClass("icon-folder-close");
}
else
{
$(this).parent().children(".icon-folder-close")
.removeClass("icon-folder-close")
.addClass("icon-folder-open");
$(this).parent().children("ul.tree").toggle(300);
$(this).parent().addClass('tree-selected');
}
$(this).parent().parent().children("ul.tree").toggle(300);
}
);
this.$element.find("li").click(
function ()
{
$('.tree-selected').removeClass("tree-selected");
$('li input:checked').parent().addClass("tree-selected");
}
);
},
@@ -37,7 +46,7 @@ Tree.prototype =
$(this).parent().children(".icon-folder-open")
.removeClass("icon-folder-open")
.addClass("icon-folder-close");
$(this).parent().children("ul.tree").hide($speed);
$(this).parent().parent().children("ul.tree").hide($speed);
}
);
},
@@ -50,7 +59,7 @@ Tree.prototype =
$(this).parent().children(".icon-folder-close")
.removeClass("icon-folder-close")
.addClass("icon-folder-open");
$(this).parent().children("ul.tree").show($speed);
$(this).parent().parent().children("ul.tree").show($speed);
}
);
},
@@ -66,8 +75,12 @@ $.fn.tree = function (option, value)
var data = $this.data('tree');
var options = typeof option === 'object' && option;
if (!data) $this.data('tree', (data = new Tree(this, options)));
if (typeof option === 'string') methodReturn = data[option](value);
if (!data){
$this.data('tree', (data = new Tree(this, options)));
}
if (typeof option === 'string') {
methodReturn = data[option](value);
}
}
);
admin-dev/themes/default/template/controllers/products/helpers/tree/tree.tpl
+3 -1
View File
@@ -25,6 +25,8 @@
<div class="panel">
{if $header}{$header}{/if}
{if $nodes}
<ul id="{$id}" class="nav nav-list tree">{$nodes}</ul>
<ul id="{$id}" class="tree">
{$nodes}
</ul>
{/if}
</div>
admin-dev/themes/default/template/controllers/products/helpers/tree/tree_header.tpl
+4 -1
View File
@@ -22,4 +22,7 @@
* @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)
* International Registered Trademark & Property of PrestaShop SA
*}
<div class="panel-heading">{l s=$title}{if $toolbar}{$toolbar}{/if}</div>
<div class="panel-heading">
<i class="icon-tag"></i>&nbsp;{l s=$title}
{if $toolbar}{$toolbar}{/if}
</div>
admin-dev/themes/default/template/controllers/products/helpers/tree/tree_node_folder.tpl
+8 -5
View File
@@ -22,11 +22,14 @@
* @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)
* International Registered Trademark & Property of PrestaShop SA
*}
<li>
<i class="icon-folder-open"></i>&nbsp;
<input type="radio" name="id-category" value="{$node['id_category']}" />&nbsp;
<label class="tree-toggler nav-header">{$name}</label>
<ul class="nav nav-list tree">
<li class="tree-folder">
<span class="tree-folder-name">
<input type="radio" name="id-category" value="{$node['id_category']}" />
<i class="icon-folder-close"></i>
<label class="tree-toggler ">{$name}</label>
</span>
<ul class="tree">
{$children}
</ul>
</li>
admin-dev/themes/default/template/controllers/products/helpers/tree/tree_node_folder_associations.tpl
+7 -4
View File
@@ -23,10 +23,13 @@
* International Registered Trademark & Property of PrestaShop SA
*}
<li>
<i class="icon-folder-open"></i>&nbsp;
<input type="checkbox" name="id-category[]" value="{$node['id_category']}" />&nbsp;
<label class="tree-toggler nav-header">{$name}</label>
<ul class="nav nav-list tree">
<i class="icon-folder-open"></i>
<input type="checkbox" name="id-category[]" value="{$node['id_category']}" />
<label class="tree-toggler tree-folder-name">{$name}</label>
<ul class="tree">
{$children}
</ul>
</li>
admin-dev/themes/default/template/controllers/products/helpers/tree/tree_node_item.tpl
+10 -1
View File
@@ -22,4 +22,13 @@
* @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)
* International Registered Trademark & Property of PrestaShop SA
*}
<li><input type="radio" name="id-category" value="{$node['id_category']}" />&nbsp;{$name}</li>
<li class="tree-item">
<label class="tree-item-name">
<input type="radio" name="id-category" value="{$node['id_category']}" />
<i class="tree-dot"></i>
{$name}
<label>
</li>