luxolus/open-consul
2
0
Fork 0
Code Issues 1 Pull requests Packages Releases Wiki Activity

ui: default to condensed view, add secondary actions

Browse source
This commit is contained in:
Jack Pearkes 2014-06-02 11:49:01 -04:00
parent 54b6e1e049
commit 0e3c262e53
6 changed files with 34 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
ui/index.html
View file

@ -50,15 +50,18 @@
<script type="text/x-handlebars" id="actionbar"> <script type="text/x-handlebars" id="actionbar">
<div class="row"> <div class="row">
<div class="col-md-8"> <div class="action-bar">
{{ input type="text" value=filter class="form-control" placeholder="Filter by name"}} <div class="col-md-5">
</div> {{ input type="text" value=filter class="form-control form-control-mini" placeholder="Filter by name"}}
<div class="col-md-4"> </div>
<div class="checkbox"> <div class="col-md-4">
<label> <div class="btn-group">
{{input type="checkbox" name="condensedView" checked=condensedView}} <button {{ bind-attr class=":btn :btn-mini condensedView:btn-default:btn-primary" }} {{action toggleCondensed }}>Expand</button>
Condensed <button {{ bind-attr class=":btn :btn-mini true:btn-primary:btn-default" }} {{action }}>Action</button>
</label> </div>
</div>
<div class="col-md-3">
{{view Ember.Select content=statuses value=filterStatus class="form-control form-control-mini"}}
</div> </div>
</div> </div>
</div> </div>

10
ui/javascripts/app/controllers.js
View file

@ -221,7 +221,9 @@ ItemBaseController = Ember.ArrayController.extend({
needs: ["dc"], needs: ["dc"],
dc: Ember.computed.alias("controllers.dc"), dc: Ember.computed.alias("controllers.dc"),
condensedView: true, condensedView: true,
filter: "", filter: "", // default
filterStatus: "any status", // default
statuses: ["passing", "warning", "critical", "any status"],
filteredContent: function() { filteredContent: function() {
var filter = this.get('filter'); var filter = this.get('filter');
@ -230,6 +232,12 @@ ItemBaseController = Ember.ArrayController.extend({
return item.get('filterKey').toLowerCase().match(filter.toLowerCase()); return item.get('filterKey').toLowerCase().match(filter.toLowerCase());
}); });
}.property('filter', 'items.@each'), }.property('filter', 'items.@each'),
actions: {
toggleCondensed: function() {
this.set('condensedView', !this.get('condensedView'))
}
}
}); });
App.NodesController = ItemBaseController.extend({ App.NodesController = ItemBaseController.extend({

2
ui/javascripts/app/models.js
View file

@ -108,7 +108,7 @@ App.Node = Ember.Object.extend({
filterKey: function() { filterKey: function() {
return this.get('Node') return this.get('Node')
}.property('Node') }.property('Node'),
}); });

4
ui/styles/_buttons.scss
View file

@ -76,5 +76,9 @@
} }
&.btn-mini {
font-size: 10px;
padding: 8px;
}
} }

4
ui/styles/_forms.scss
View file

@ -3,6 +3,10 @@
@include transition(border-color .2s ease-in-out); @include transition(border-color .2s ease-in-out);
@include transition(box-shadow .2s ease-in-out); @include transition(box-shadow .2s ease-in-out);
@include transition(border-color .2s ease-in-out); @include transition(border-color .2s ease-in-out);
&.form-control-mini {
font-size: 10px;
}
} }
&.valid { &.valid {

4
ui/styles/base.scss
View file

@ -103,3 +103,7 @@ a {
.bg-light-gray { .bg-light-gray {
background-color: $gray-background; background-color: $gray-background;
} }
.action-bar {
height: 50px;
}