Skip to content

Commit dd19a98

Browse files
yoavaayoavaa
committed
merge bootstrap style
2 parents e9efbca + b72b9c2 commit dd19a98

File tree

3 files changed

+145
-0
lines changed

3 files changed

+145
-0
lines changed

‎css/tree-control-attribute.css‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,3 +107,51 @@
107107
[treecontrol].tree-dark {
108108
color: #ddd;
109109
}
110+
111+
[treecontrol].tree-boot {
112+
color: #428bca;
113+
font-family: inherit;
114+
font-size: inherit;
115+
}
116+
117+
[treecontrol].tree-boot > ul > li {
118+
padding: 0;
119+
}
120+
121+
[treecontrol].tree-boot li > .tree-label {
122+
display: block;
123+
padding: 3px 0;
124+
border-radius: 4px;
125+
}
126+
127+
[treecontrol].tree-boot i.tree-branch-head,
128+
[treecontrol].tree-boot i.tree-leaf-head {
129+
float: left;
130+
height: 16px;
131+
margin: 5px;
132+
}
133+
134+
[treecontrol].tree-boot li.tree-expanded i.tree-branch-head {
135+
padding: 1px 10px;
136+
background: url("../images/folder.png") no-repeat;
137+
}
138+
139+
[treecontrol].tree-boot li.tree-collapsed i.tree-branch-head {
140+
padding: 1px 10px;
141+
background: url("../images/folder-closed.png") no-repeat;
142+
}
143+
144+
[treecontrol].tree-boot li.tree-leaf i.tree-leaf-head {
145+
padding: 1px 10px;
146+
background: url("../images/file.png") no-repeat;
147+
}
148+
149+
[treecontrol].tree-boot .tree-label.tree-selected,
150+
[treecontrol].tree-boot .tree-label.tree-selected:hover {
151+
color: #fff;
152+
background-color: #428bca;
153+
}
154+
155+
[treecontrol].tree-boot .tree-label:hover {
156+
background-color: #eee;
157+
}

‎css/tree-control.css‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,3 +120,51 @@ treecontrol.tree-dark li .tree-unselectable {
120120
treecontrol.tree-dark {
121121
color: #ddd;
122122
}
123+
124+
treecontrol.tree-boot {
125+
color: #428bca;
126+
font-family: inherit;
127+
font-size: inherit;
128+
}
129+
130+
treecontrol.tree-boot > ul > li {
131+
padding: 0;
132+
}
133+
134+
treecontrol.tree-boot li > .tree-label {
135+
display: block;
136+
padding: 3px 0;
137+
border-radius: 4px;
138+
}
139+
140+
treecontrol.tree-boot i.tree-branch-head,
141+
treecontrol.tree-boot i.tree-leaf-head {
142+
float: left;
143+
height: 16px;
144+
margin: 5px;
145+
}
146+
147+
treecontrol.tree-boot li.tree-expanded i.tree-branch-head {
148+
padding: 1px 10px;
149+
background: url("../images/folder.png") no-repeat;
150+
}
151+
152+
treecontrol.tree-boot li.tree-collapsed i.tree-branch-head {
153+
padding: 1px 10px;
154+
background: url("../images/folder-closed.png") no-repeat;
155+
}
156+
157+
treecontrol.tree-boot li.tree-leaf i.tree-leaf-head {
158+
padding: 1px 10px;
159+
background: url("../images/file.png") no-repeat;
160+
}
161+
162+
treecontrol.tree-boot .tree-label.tree-selected,
163+
treecontrol.tree-boot .tree-label.tree-selected:hover {
164+
color: #fff;
165+
background-color: #428bca;
166+
}
167+
168+
treecontrol.tree-boot .tree-label:hover {
169+
background-color: #eee;
170+
}

‎index.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -755,6 +755,55 @@ <h1>Dark Style <small>(Basic style, default configuration)</small></h1>
755755
</script>
756756
</section>
757757

758+
<section id="boot" ng-controller="Boot">
759+
<div class="page-header">
760+
<h1>Bootstrap Style <small>(Basic style, default configuration)</small></h1>
761+
</div>
762+
<div class="row">
763+
<div class="col-md-6 show-grid">
764+
<div class="panel panel-default">
765+
<div class="panel-body" style="background-color: #f5f5f5;">
766+
<div class="example-caption">EXAMPLE:</div>
767+
<div save-content="boot-html">
768+
<!-- Note that the tree does not set the background color. We inject it from the wrapper div. -->
769+
<div style="background-color: #f5f5f5;">
770+
<treecontrol class="tree-boot"
771+
tree-model="treedata"
772+
on-selection="showSelected(node)">
773+
label: {{node.label}} ({{node.id}})
774+
</treecontrol>
775+
</div>
776+
</div>
777+
</div>
778+
</div>
779+
</div>
780+
<div class="col-md-6">
781+
<p>Bootstrap style of the tree control, set using the class <code>tree-boot</code>. The style does not include the background color, instead,
782+
inject your own background color using a wrapper div element.</p>
783+
<p>Click on the folder icons to open and close the tree nodes. Click on the node label to select a node in the tree.</p>
784+
<p>Selected node: <code>{{selectedNode?selectedNode.label:"N/A"}}</code></p>
785+
</div>
786+
</div>
787+
<div class="row">
788+
<tabset>
789+
<tab heading="Markup" >
790+
<pre class="code" apply-content="boot-html" highlight-lang="html"></pre>
791+
</tab>
792+
<tab heading="JavaScript">
793+
<pre class="code" apply-content="boot-js" highlight-lang="js"></pre>
794+
</tab>
795+
</tabset>
796+
</div>
797+
<script save-content="boot-js">
798+
function Boot($scope) {
799+
$scope.treedata=createSubTree(3, 4, "");
800+
$scope.showSelected = function(sel) {
801+
$scope.selectedNode = sel;
802+
};
803+
}
804+
</script>
805+
</section>
806+
758807
<section id="file-style" ng-controller="FileStyle">
759808
<div class="page-header">
760809
<h1>File Style using Tree Label Templates <small>(Basic style, default configuration)</small></h1>

0 commit comments

Comments
 (0)