status-im/consul
2
0
Fork 0
mirror of https://github.com/status-im/consul.git synced 2025-02-23 10:58:25 +00:00
Code Issues Projects Releases Wiki Activity

ui: add condensed node view

Browse Source
This commit is contained in:
Jack Pearkes 2014-05-30 14:26:11 -04:00
parent 179a74ea02
commit 92f4a3f466
6 changed files with 83 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
ui/index.html
View File

@ -318,27 +318,46 @@
<script type="text/x-handlebars" id="nodes">
<div class="col-md-5">
{{#each node in nodes}}
<div class="row">
{{#link-to 'nodes.show' node.Node tagName="div" href=false class="list-group-item list-link" }}
<div {{bind-attr class="node.hasFailingChecks:bg-orange:bg-green :list-bar"}}></div>
<h4 class="list-group-item-heading">
{{node.Node}}
<small>{{node.Address}}</small>
<div class="heading-helper">
<a class="subtle" href="#">{{node.checkMessage}}</a>
{{#if condensedView }}
{{#each node in nodes}}
<div class="row">
{{#link-to 'nodes.show' node.Node tagName="div" href=false class="list-group-item list-condensed-link" }}
<div {{bind-attr class="node.hasFailingChecks:bg-orange:bg-green :list-bar-horizontal"}}></div>
<div class="name">
{{node.Node}}
<small class="pull-right">
{{ node.Services.length }} services
</small>
</div>
</h4>
<ul class="list-inline">
{{#each service in node.Services }}
<li class="bold">{{service.Service}}</li>
{{/each}}
</ul>
</div>
{{/link-to}}
</div>
{{/link-to}}
{{/each}}
{{/each}}
{{else}}
{{#each node in nodes}}
<div class="row">
{{#link-to 'nodes.show' node.Node tagName="div" href=false class="list-group-item list-link" }}
<div {{bind-attr class="node.hasFailingChecks:bg-orange:bg-green :list-bar"}}></div>
<h4 class="list-group-item-heading">
{{node.Node}}
<small>{{node.Address}}</small>
<div class="heading-helper">
<a class="subtle" href="#">{{node.checkMessage}}</a>
</div>
</h4>
<ul class="list-inline">
{{#each service in node.Services }}
<li class="bold">{{service.Service}}</li>
{{/each}}
</ul>
</div>
{{/link-to}}
{{/each}}
{{/if}}
</div>
<div class="col-md-1">
@ -439,6 +458,7 @@
<script src="javascripts/app/views.js"></script>
<script src="javascripts/app/controllers.js"></script>
<script src="javascripts/app/helpers.js"></script>
<script src="javascripts/app/components.js"></script>
<!-- to activate the test runner, add the "?test" query string parameter -->
<script src="tests/runner.js"></script>
<!-- <script src="static/application.min.js"></script> -->

0
ui/javascripts/app/components.js Normal file
View File

4
ui/javascripts/app/controllers.js
View File

@ -216,3 +216,7 @@ App.KvEditController = KvBaseController.extend({
}
});
App.NodesController = Ember.ArrayController.extend({
condensedView: true
});

7
ui/javascripts/app/routes.js
View File

@ -246,6 +246,13 @@ App.NodesRoute = App.BaseRoute.extend({
objs = [];
data.map(function(obj){
objs.push(App.Node.create(obj));
objs.push(App.Node.create(obj));
objs.push(App.Node.create(obj));
objs.push(App.Node.create(obj));
objs.push(App.Node.create(obj));
objs.push(App.Node.create(obj));
objs.push(App.Node.create(obj));
objs.push(App.Node.create(obj));
});
return objs
});

1
ui/scripts/compile.rb
View File

@ -16,6 +16,7 @@ app = [
"javascripts/app/controllers.js",
"javascripts/app/views.js",
"javascripts/app/helpers.js",
"javascripts/app/components.js",
]
libs.each do |js_file|

34
ui/styles/_lists.scss
View File

@ -42,16 +42,48 @@
background-color: lighten($gray-background, 8%);
}
&.list-condensed-link:hover {
cursor: pointer;
background-color: lighten($gray-background, 8%);
}
&.active {
@include transition(border-color .1s linear);
border-color: $purple;
.list-bar {
.list-bar, .list-bar-horizontal {
@include transition(background-color .1s linear);
background-color: $purple;
}
}
&.list-condensed-link {
border-color: $gray-background;
margin-bottom: 4px;
margin-top: 4px;
height: 40px;
font-weight: 700;
.name {
font-size: 15px;
padding-top: 7px;
small {
padding-right: 8px;
padding-top: 1px;
font-size: 12px;
color: $gray-light;
}
}
}
.list-bar-horizontal {
width: 20px;
float: left;
height: 100%;
margin-right: 10px;
}
}
ul.list-broken {