status-im/consul
2
0
Fork 0
mirror of https://github.com/status-im/consul.git synced 2025-01-10 22:06:20 +00:00
Code Issues Projects Releases Wiki Activity

ui: kv styling and active states

Browse Source
This commit is contained in:
Jack Pearkes 2014-04-29 16:32:38 -04:00
parent 52dfc8fde3
commit 7df7c41d0c
3 changed files with 36 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
ui/index.html
View File

@ -64,7 +64,7 @@
<script type="text/x-handlebars" data-template-name="kv/show"> <script type="text/x-handlebars" data-template-name="kv/show">
<div class="row"> <div class="row">
<h5><a href="" {{action 'linkToKey' topModel.grandParentKey }}>{{topModel.parentKey}}</a></h5> <h5><a class="subtle" href="" {{action 'linkToKey' topModel.grandParentKey }}>{{topModel.parentKey}}</a></h5>
</div> </div>
<div class="row"> <div class="row">
@ -72,48 +72,50 @@
<div class="row"> <div class="row">
{{#each item in model }} {{#each item in model }}
<div {{action 'linkToKey' item.key }} class="panel panel-link panel-short">
{{#link-to item.linkToRoute item.urlSafeKey href=false tagName="div" class="panel panel-link panel-short"}}
<div {{bind-attr class=":panel-bar item.isFolder:bg-gray:bg-light-gray" }}></div> <div {{bind-attr class=":panel-bar item.isFolder:bg-gray:bg-light-gray" }}></div>
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title"> <h3 class="panel-title">
{{item.key}} {{item.key}}
</h3> </h3>
</div> </div>
</div> {{/link-to}}
{{/each}} {{/each}}
</div> </div>
</div> </div>
<div class="col-md-5 col-md-offset-1"> <div class="col-md-6 col-md-offset-1">
</div> </div>
</div> </div>
</script> </script>
<script type="text/x-handlebars" data-template-name="kv/edit"> <script type="text/x-handlebars" data-template-name="kv/edit">
<div class="row"> <div class="row">
<h5><a href="" {{action 'linkToKey' model.grandParentKey }}>{{model.parentKey}}</a></h5> <h5><a class="subtle" href="" {{action 'linkToKey' model.grandParentKey }}>{{model.parentKey}}</a></h5>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-5"> <div class="col-md-5">
<div class="row"> <div class="row">
{{#each item in siblings }} {{#each item in siblings }}
<div {{action 'linkToKey' item.key }} class="panel panel-link panel-short"> {{#link-to item.linkToRoute item.urlSafeKey href=false tagName="div" class="panel panel-link panel-short"}}
<div {{bind-attr class=":panel-bar item.isFolder:bg-gray:bg-light-gray" }}></div> <div {{bind-attr class=":panel-bar item.isFolder:bg-gray:bg-light-gray" }}></div>
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title"> <h3 class="panel-title">
{{item.key}} {{item.key}}
</h3> </h3>
</div> </div>
</div> {{/link-to}}
{{/each}} {{/each}}
</div> </div>
</div> </div>
<div class="col-md-5 col-md-offset-1"> <div class="col-md-6 col-md-offset-1">
<div class="panel"> <div class="panel">
<div {{ bind-attr class=":panel-bar isLoading:bg-orange:bg-green" }}></div> <div {{ bind-attr class=":panel-bar isLoading:bg-orange:bg-green" }}></div>
<div class="panel-heading"> <div class="panel-heading">

14
ui/javascripts/app/models.js
View File

@ -85,6 +85,20 @@ App.Key = Ember.Object.extend({
return (this.get('key').slice(-1) == "/") return (this.get('key').slice(-1) == "/")
}.property('key'), }.property('key'),
urlSafeKey: function() {
return this.get('key').replace(/\//g, "-")
}.property('key'),
linkToRoute: function() {
var key = this.get('urlSafeKey')
if (key.slice(-1) === "-") {
return 'kv.show'
} else {
return 'kv.edit'
}
}.property('key'),
keyParts: function() { keyParts: function() {
var key = this.get('key'); var key = this.get('key');

14
ui/styles/_panels.scss
View File

@ -41,8 +41,6 @@
.panel-bar { .panel-bar {
width: 100%; width: 100%;
height: 20px; height: 20px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
} }
&.panel-link { &.panel-link {
@ -57,4 +55,16 @@
cursor: pointer; cursor: pointer;
background-color: lighten($gray-background, 8%); background-color: lighten($gray-background, 8%);
} }
&.active {
>.panel-heading {
border-color: $purple;
}
border-color: $purple;
.panel-bar {
background-color: $purple;
}
}
} }