Add Bootstrap style

wix-incubator · Jun 2, 2016 · 3292018 · 3292018
1 parent a9be1e0
commit 3292018
Show file tree

Hide file tree

Showing 3 changed files with 145 additions and 0 deletions.
diff --git a/css/tree-control-attribute.css b/css/tree-control-attribute.css
@@ -107,3 +107,51 @@
 [treecontrol].tree-dark {
     color: #ddd;
 }
+
+[treecontrol].tree-boot {
+    color: #428bca;
+    font-family: inherit;
+    font-size: inherit;
+}
+
+[treecontrol].tree-boot > ul > li {
+    padding: 0;
+}
+
+[treecontrol].tree-boot li > .tree-label {
+    display: block;
+    padding: 3px 0;
+    border-radius: 4px;
+}
+
+[treecontrol].tree-boot i.tree-branch-head,
+[treecontrol].tree-boot i.tree-leaf-head {
+    float: left;
+    height: 16px;
+    margin: 5px;
+}
+
+[treecontrol].tree-boot li.tree-expanded i.tree-branch-head {
+    padding: 1px 10px;
+    background: url("../images/folder.png") no-repeat;
+}
+
+[treecontrol].tree-boot li.tree-collapsed i.tree-branch-head {
+    padding: 1px 10px;
+    background: url("../images/folder-closed.png") no-repeat;
+}
+
+[treecontrol].tree-boot li.tree-leaf i.tree-leaf-head {
+    padding: 1px 10px;
+    background: url("../images/file.png") no-repeat;
+}
+
+[treecontrol].tree-boot .tree-label.tree-selected,
+[treecontrol].tree-boot .tree-label.tree-selected:hover {
+    color: #fff;
+    background-color: #428bca;
+}
+
+[treecontrol].tree-boot .tree-label:hover {
+    background-color: #eee;
+}
diff --git a/css/tree-control.css b/css/tree-control.css
@@ -120,3 +120,51 @@ treecontrol.tree-dark li .tree-unselectable {
 treecontrol.tree-dark {
     color: #ddd;
 }
+
+treecontrol.tree-boot {
+    color: #428bca;
+    font-family: inherit;
+    font-size: inherit;
+}
+
+treecontrol.tree-boot > ul > li {
+    padding: 0;
+}
+
+treecontrol.tree-boot li > .tree-label {
+    display: block;
+    padding: 3px 0;
+    border-radius: 4px;
+}
+
+treecontrol.tree-boot i.tree-branch-head,
+treecontrol.tree-boot i.tree-leaf-head {
+    float: left;
+    height: 16px;
+    margin: 5px;
+}
+
+treecontrol.tree-boot li.tree-expanded i.tree-branch-head {
+    padding: 1px 10px;
+    background: url("../images/folder.png") no-repeat;
+}
+
+treecontrol.tree-boot li.tree-collapsed i.tree-branch-head {
+    padding: 1px 10px;
+    background: url("../images/folder-closed.png") no-repeat;
+}
+
+treecontrol.tree-boot li.tree-leaf i.tree-leaf-head {
+    padding: 1px 10px;
+    background: url("../images/file.png") no-repeat;
+}
+
+treecontrol.tree-boot .tree-label.tree-selected,
+treecontrol.tree-boot .tree-label.tree-selected:hover {
+    color: #fff;
+    background-color: #428bca;
+}
+
+treecontrol.tree-boot .tree-label:hover {
+    background-color: #eee;
+}
diff --git a/index.html b/index.html
@@ -755,6 +755,55 @@ <h1>Dark Style <small>(Basic style, default configuration)</small></h1>
     </script>
 </section>
 
+<section id="boot" ng-controller="Boot">
+    <div class="page-header">
+        <h1>Bootstrap Style <small>(Basic style, default configuration)</small></h1>
+    </div>
+    <div class="row">
+        <div class="col-md-6 show-grid">
+            <div class="panel panel-default">
+                <div class="panel-body" style="background-color: #f5f5f5;">
+                    <div class="example-caption">EXAMPLE:</div>
+                    <div save-content="boot-html">
+                        <!-- Note that the tree does not set the background color. We inject it from the wrapper div. -->
+                        <div style="background-color: #f5f5f5;">
+                            <treecontrol class="tree-boot"
+                                         tree-model="treedata"
+                                         on-selection="showSelected(node)">
+                                label: {{node.label}} ({{node.id}})
+                            </treecontrol>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6">
+            <p>Bootstrap style of the tree control, set using the class <code>tree-boot</code>. The style does not include the background color, instead,
+                inject your own background color using a wrapper div element.</p>
+            <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>
+            <p>Selected node: <code>{{selectedNode?selectedNode.label:"N/A"}}</code></p>
+        </div>
+    </div>
+    <div class="row">
+        <tabset>
+            <tab heading="Markup" >
+                <pre class="code" apply-content="boot-html" highlight-lang="html"></pre>
+            </tab>
+            <tab heading="JavaScript">
+                <pre class="code" apply-content="boot-js" highlight-lang="js"></pre>
+            </tab>
+        </tabset>
+    </div>
+    <script save-content="boot-js">
+        function Boot($scope) {
+            $scope.treedata=createSubTree(3, 4, "");
+            $scope.showSelected = function(sel) {
+                $scope.selectedNode = sel;
+            };
+        }
+    </script>
+</section>
+
 <section id="file-style" ng-controller="FileStyle">
     <div class="page-header">
         <h1>File Style using Tree Label Templates <small>(Basic style, default configuration)</small></h1>