ui: default to condensed view, add secondary actions
This commit is contained in:
parent
54b6e1e049
commit
0e3c262e53
|
@ -50,15 +50,18 @@
|
|||
|
||||
<script type="text/x-handlebars" id="actionbar">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
{{ input type="text" value=filter class="form-control" placeholder="Filter by name"}}
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
{{input type="checkbox" name="condensedView" checked=condensedView}}
|
||||
Condensed
|
||||
</label>
|
||||
<div class="action-bar">
|
||||
<div class="col-md-5">
|
||||
{{ input type="text" value=filter class="form-control form-control-mini" placeholder="Filter by name"}}
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="btn-group">
|
||||
<button {{ bind-attr class=":btn :btn-mini condensedView:btn-default:btn-primary" }} {{action toggleCondensed }}>Expand</button>
|
||||
<button {{ bind-attr class=":btn :btn-mini true:btn-primary:btn-default" }} {{action }}>Action</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
{{view Ember.Select content=statuses value=filterStatus class="form-control form-control-mini"}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -221,7 +221,9 @@ ItemBaseController = Ember.ArrayController.extend({
|
|||
needs: ["dc"],
|
||||
dc: Ember.computed.alias("controllers.dc"),
|
||||
condensedView: true,
|
||||
filter: "",
|
||||
filter: "", // default
|
||||
filterStatus: "any status", // default
|
||||
statuses: ["passing", "warning", "critical", "any status"],
|
||||
|
||||
filteredContent: function() {
|
||||
var filter = this.get('filter');
|
||||
|
@ -230,6 +232,12 @@ ItemBaseController = Ember.ArrayController.extend({
|
|||
return item.get('filterKey').toLowerCase().match(filter.toLowerCase());
|
||||
});
|
||||
}.property('filter', 'items.@each'),
|
||||
|
||||
actions: {
|
||||
toggleCondensed: function() {
|
||||
this.set('condensedView', !this.get('condensedView'))
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
App.NodesController = ItemBaseController.extend({
|
||||
|
|
|
@ -108,7 +108,7 @@ App.Node = Ember.Object.extend({
|
|||
|
||||
filterKey: function() {
|
||||
return this.get('Node')
|
||||
}.property('Node')
|
||||
}.property('Node'),
|
||||
});
|
||||
|
||||
|
||||
|
|
|
@ -76,5 +76,9 @@
|
|||
|
||||
}
|
||||
|
||||
&.btn-mini {
|
||||
font-size: 10px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -3,6 +3,10 @@
|
|||
@include transition(border-color .2s ease-in-out);
|
||||
@include transition(box-shadow .2s ease-in-out);
|
||||
@include transition(border-color .2s ease-in-out);
|
||||
|
||||
&.form-control-mini {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&.valid {
|
||||
|
|
|
@ -103,3 +103,7 @@ a {
|
|||
.bg-light-gray {
|
||||
background-color: $gray-background;
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
height: 50px;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue