LT-275: Creating measure flow component layout and motion

2016-07-25 17:19:47 -03:00
1 parent 82e374b1e3
commit 7fdfbf1c1a
@@ -0,0 +1,72 @@
+<template name="selectTree">
+    {{#group (extend this
+        class=(concat
+            'select-tree '
+            (valueIf this.root '' 'select-tree-root ')
+            this.class
+        )
+        mixins=(concat 'selectTree ' this.mixins)
+    )}}
+        {{>UI.contentBlock}}
+        {{#let currentNode=this.currentNode.get}}
+            {{#if (and (not this.root) (ne this.search false))}}
+                {{>inputText
+                    label=this.label
+                    labelClass='tree-search'
+                    placeholder=(choose this.searchPlaceholder 'Search')
+                }}
+            {{/if}}
+            <div class="tree-options {{#if currentNode}}collapsed{{/if}}">
+                {{#if this.root}}
+                    {{>selectTreeBreadcrumb component=this.component}}
+                {{/if}}
+                {{#each item in (reactive this.items)}}
+                    {{>inputRadio
+                        class=this.radioClass
+                        name=this.key
+                        value=item.value
+                        label=item.label
+                        labelClass=(valueIf (isArray item.items) 'tree-node' 'tree-leaf')
+                        checked=(eq item.value (reactive this.value))
+                    }}
+                {{/each}}
+            </div>
+            {{#if (and currentNode (isArray currentNode.items))}}
+                {{>selectTree (clone this
+                    items=currentNode.items
+                    root=(choose this.root this.component)
+                    class='select-tree-node'
+                )}}
+            {{/if}}
+        {{/let}}
+    {{/group}}
+</template>
+
+<template name="selectTreeBreadcrumb">
+    <div class="tree-breadcrumb">
+        {{>selectTreeBreadcrumbParent
+            component=this.component.parent
+            index=1
+        }}
+        {{#let currentNode=this.component.parent.templateInstance.data.currentNode.get}}
+            <span class="tree-current-node">{{currentNode.label}}</span>
+        {{/let}}
+    </div>
+</template>
+
+<template name="selectTreeBreadcrumbParent">
+    {{#let parent=this.component.parent}}
+        {{#let parentNode=(reactive parent.templateInstance.data.currentNode)}}
+            {{#if parentNode}}
+                {{>selectTreeBreadcrumbParent
+                    component=parent
+                    index=(sum this.index 1)
+                }}
+                <a href="#" class="tree-back" data-index="{{this.index}}">{{parentNode.label}}</a>
+                <span>/</span>
+            {{else}}
+                <a href="#" class="tree-back" data-index="{{this.index}}"><i class="fa fa-fast-backward"></i></a>
+            {{/if}}
+        {{/let}}
+    {{/let}}
+</template>