github
/
consul
mirror of https://github.com/hashicorp/consul
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

ui: link-to for list items, active state

pull/98/head
Jack Pearkes 2014-04-25 12:45:55 -04:00
parent 05591e025a
commit 69ffb5e83a
4 changed files with 28 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
ui/index.html
View File

@ -61,7 +61,7 @@
{{#each service in services}} {{#each service in services}}
<div class="row"> <div class="row">
<div class="list-group-item"> {{#link-to 'service' controllers.application.getDc service.Name tagName="div" href=false class="list-group-item list-link" }}
<div {{bind-attr class="service.hasFailingChecks:bg-orange:bg-green :list-bar"}}></div> <div {{bind-attr class="service.hasFailingChecks:bg-orange:bg-green :list-bar"}}></div>
<h4 class="list-group-item-heading"> <h4 class="list-group-item-heading">
{{#link-to 'service' controllers.application.getDc service.Name class='subtle'}}{{service.Name}}{{/link-to}} {{#link-to 'service' controllers.application.getDc service.Name class='subtle'}}{{service.Name}}{{/link-to}}
@ -76,7 +76,7 @@
{{/each}} {{/each}}
</ul> </ul>
</div> </div>
</div> {{/link-to}}
{{/each}} {{/each}}
@ -127,7 +127,7 @@
{{#each node in nodes}} {{#each node in nodes}}
<div class="row"> <div class="row">
<div {{action 'linkTo' 'node' controllers.application.getDc node.Name}} class="list-group-item list-link"> {{#link-to 'node' controllers.application.getDc node.Name tagName="div" href=false class="list-group-item list-link" }}
<div {{bind-attr class="node.hasFailingChecks:bg-orange:bg-green :list-bar"}}></div> <div {{bind-attr class="node.hasFailingChecks:bg-orange:bg-green :list-bar"}}></div>
<h4 class="list-group-item-heading"> <h4 class="list-group-item-heading">
{{#link-to 'node' controllers.application.getDc node.Name class='subtle'}}{{node.Name}}{{/link-to}} {{#link-to 'node' controllers.application.getDc node.Name class='subtle'}}{{node.Name}}{{/link-to}}
@ -142,7 +142,7 @@
{{/each}} {{/each}}
</ul> </ul>
</div> </div>
</div> {{/link-to}}
{{/each}} {{/each}}
@ -186,7 +186,7 @@
{{#each service in model.Services }} {{#each service in model.Services }}
{{#link-to 'service' controllers.application.getDc service.Service }} {{#link-to 'service' controllers.application.getDc service.Service }}
<div class="panel panel-default panel-link"> <div class="panel panel-default panel-link panel-short">
<div class="panel-bar"></div> <div class="panel-bar"></div>
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title"> <h3 class="panel-title">
@ -208,7 +208,7 @@
<div class="col-md-8 col-md-offset-2 vertical-center"> <div class="col-md-8 col-md-offset-2 vertical-center">
{{#each item in model}} {{#each item in model}}
<a {{action 'selectDc' item}}> <a {{action 'selectDc' item}}>
<div class="panel panel-success panel-link"> <div class="panel panel-success panel-link panel-short">
<div class="panel-bar"></div> <div class="panel-bar"></div>
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title"> <h3 class="panel-title">

5
ui/javascripts/app.js
View File

@ -5,9 +5,10 @@ window.App = Ember.Application.create({
}); });
App.Router.map(function() { App.Router.map(function() {
this.resource("services", { path: "/:dc/services" }, function(){
this.resource("service", { path: "/:name" });
});
this.route("index", { path: "/" }); this.route("index", { path: "/" });
this.route("services", { path: "/:dc/services" });
this.route("service", { path: "/:dc/services/:name" });
this.route("nodes", { path: "/:dc/nodes" }); this.route("nodes", { path: "/:dc/nodes" });
this.route("node", { path: "/:dc/nodes/:name" }); this.route("node", { path: "/:dc/nodes/:name" });
this.route("kv", { path: "/:dc/kv" }); this.route("kv", { path: "/:dc/kv" });

19
ui/styles/_lists.scss
View File

@ -1,6 +1,7 @@
.list-group-item { .list-group-item {
padding: 0; padding: 0;
border-width: 2px; border-width: 2px;
border-bottom-width: 4px;
border-radius: 0px; border-radius: 0px;
margin-bottom: 15px; margin-bottom: 15px;
margin-top: 15px; margin-top: 15px;
@ -31,26 +32,28 @@
.list-bar { .list-bar {
width: 100%; width: 100%;
height: 20px; height: 20px;
} border-top-right-radius: 2px;
border-top-left-radius: 2px;
&:first-child {
border-top-right-radius: 0px;
border-top-left-radius: 0px;
} }
&.list-link:hover { &.list-link:hover {
cursor: pointer; cursor: pointer;
background-color: lighten($gray-background, 8%); background-color: lighten($gray-background, 8%);
} }
&.active {
background-color: $purple;
}
} }
ul.list-broken { ul.list-broken {
li { li {
border-bottom: 2px $gray-background solid; // border-top: 2px lighten($gray-background, 5%) solid;
} }
li:last-child { &:last-child {
border-width: 0px; // border-bottom: 2px lighten($gray-background, 5%) solid;
} }
} }

8
ui/styles/_panels.scss
View File

@ -69,6 +69,14 @@
} }
} }
&.panel-link {
border-bottom-width: 4px;
}
&.panel-short {
border-bottom-width: 2px;
}
&.panel-link:hover { &.panel-link:hover {
cursor: pointer; cursor: pointer;
background-color: lighten($gray-background, 8%); background-color: lighten($gray-background, 8%);