Commit fe641159 authored by Hellmich, Christoph's avatar Hellmich, Christoph
Browse files

Update tree appearance

parent 6a35b37b
......@@ -29,23 +29,33 @@ $icon-font-path: "../../bower_components/bootstrap-sass/assets/fonts/bootstrap/"
.angular-ui-tree-handle {
background-color: #ffffff;
border: 1px solid #dae2ea;
padding: 10px;
border-radius: 4px;
font-weight: 400;
padding: 6px 12px 6px 12px;
margin-right: 10px;
border: 1px solid #dae2ea;
margin: 4px 0px;
}
.angular-ui-tree-handle:hover {
background: #F5F5F5;
.tree-node:hover {
// background: #F5F5F5;
border-color: #dce2e8;
}
.angular-ui-tree-handle > span > .pull-right {
visibility: hidden;
opacity: 0.0;
.wizardEditorNewStep {
margin: 10px 0px 0px 0px;
}
.angular-ui-tree-handle:hover > span > .pull-right {
visibility: visible;
opacity: 1.0;
transition: all 0.5s ease-in 0.3s;
.tree-node .treeItemCommands {
position: absolute;
top: 7px;
right: 12px;
// visibility: hidden;
// opacity: 0.0;
}
// .tree-node:hover .treeItemCommands {
// visibility: visible;
// opacity: 1.0;
// transition: all 0.5s ease-in 0.3s;
// }
.tree-node .treeItemCommands a + a {
margin-right: 8px;
}
.angular-ui-tree-placeholder {
border-radius: 4px;
......
......@@ -52,37 +52,36 @@
<!-- tree -->
<!-- Nested node template -->
<script type="text/ng-template" id="nodes_renderer.html">
<div ui-tree-handle class="tree-node tree-node-content" ng-class="{ active: node.id === selectedStep.id }">
<a class="btn btn-default btn-xs" ng-if="node.nodes && node.nodes.length > 0" data-nodrag ng-click="toggle(this)">
<div ui-tree-handle="" class="tree-node tree-node-content" ng-class="{ active: node.id === selectedStep.id }">
<a class="btn btn-default btn-xs" ng-if="node.nodes && node.nodes.length > 0" data-nodrag="" ng-click="toggle(this)">
<span class="fa" ng-class="{ 'fa-chevron-right': collapsed, 'fa-chevron-down': !collapsed }"></span>
</a>
<a class="stepName" data-nodrag ui-sref="wizardEditor.selectStep({stepId:node.id})" ng-click="selectStep(this)">{{node.name}}</a>
<span style="position: absolute;top:10px;right:10px;">
<a class="pull-right btn btn-danger btn-xs" data-nodrag ui-sref="wizardEditor.deleteStep({stepId:node.id})">
<a class="stepName" data-nodrag="" ui-sref="wizardEditor.selectStep({stepId:node.id})" ng-click="selectStep(this)">{{node.name}}</a>
<span class="treeItemCommands" ng-if="node.id === selectedStep.id">
<a class="pull-right btn btn-danger btn-xs" data-nodrag="" ui-sref="wizardEditor.deleteStep({stepId:node.id})">
<span class="fa fa-trash"></span>
</a>
<a class="pull-right btn btn-default btn-xs" data-nodrag ui-sref="wizardEditor.editStep({stepId:node.id})" style="margin-right: 8px;">
<a class="pull-right btn btn-default btn-xs" data-nodrag="" ui-sref="wizardEditor.editStep({stepId:node.id})">
<span class="fa fa-wrench"></span>
</a>
<a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="addSubStep(this)" style="margin-right: 8px;">
<a class="pull-right btn btn-primary btn-xs" data-nodrag="" ng-click="addSubStep(this)">
<span class="glyphicon glyphicon-plus"></span>
</a>
</span>
</div>
<ol ui-tree-nodes="" ng-model="node.nodes" ng-class="{hidden: collapsed}">
<li ng-repeat="node in node.nodes" ui-tree-node ng-include="'nodes_renderer.html'"></li>
<li ng-repeat="node in node.nodes" ui-tree-node="" ng-include="'nodes_renderer.html'"></li>
</ol>
</script>
<div class="row">
<div class="col-md-12" ng-switch="tree.length !== 0" ng-if="selectedWizard.id">
<div ng-switch-when="false" style="margin: 10px 0px;">
<div class="wizardEditorNewStep" ng-switch-when="false">
<button type="button" class="btn btn-default btn-block" ui-sref="wizardEditor.newStep" ng-hide="isLoading">Add Step</button>
</div>
<div ui-tree="treeOptions" id="tree-root" ng-switch-when="true">
<ol ui-tree-nodes="" ng-model="tree">
<li ng-repeat="node in tree" ui-tree-node="" ng-include="'nodes_renderer.html'"></li>
<!-- <li ng-if="node.treeIndent == 1" ng-repeat="node in tree track by $index" ui-tree-node ng-include="'nodes_renderer.html'"></li> -->
</ol>
</div>
</div>
......@@ -91,14 +90,6 @@
</div>
<div class="col-md-9">
<!-- test tree -->
<!-- <div class="row">
<div class="info">
{{info}}
</div>
<pre class="code">{{ tree | json }}</pre>
</div> -->
<!-- /test tree -->
<div fg-tabs="" class="needs-some-more-space" ng-class="{'form-disable' : !selectedStep.name}">
<div class="form-overlay" ng-if="!selectedStep.name"></div>
......@@ -121,10 +112,6 @@
</form>
</div>
<!-- <div fg-tabs-pane="Form Schema">
<div jsonify="myForm"></div>
</div> -->
<div class="form-footer">
<button type="button" class="btn btn-default" ng-click="cancelForm()" ng-disabled="!formDirty">
<span class="glyphicon glyphicon-ban-circle"></span>&nbsp;<span>Cancel</span>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment