diff options
| author | Teddy Wing | 2013-11-10 11:40:59 -0500 |
|---|---|---|
| committer | Teddy Wing | 2013-11-10 11:49:28 -0500 |
| commit | b5a05962d07325d31f37bedc38cc309980f91da7 (patch) | |
| tree | 09ee80de3018fb3f85f318ea6dcb05974f5d08e5 /assets | |
| parent | 07a2d8bd152fc1433fa7b5fc81b9fa36e7095e63 (diff) | |
| download | clip-play-b5a05962d07325d31f37bedc38cc309980f91da7.tar.bz2 | |
Add thumbnail to sample editor
Diffstat (limited to 'assets')
| -rw-r--r-- | assets/css/sample-editor.css | 9 | ||||
| -rw-r--r-- | assets/js/views/sample.js | 5 |
2 files changed, 13 insertions, 1 deletions
diff --git a/assets/css/sample-editor.css b/assets/css/sample-editor.css index 20ebd90..d905fb1 100644 --- a/assets/css/sample-editor.css +++ b/assets/css/sample-editor.css @@ -13,7 +13,7 @@ .progress-bar { border: 1px solid #b9b9b9; - width: 90%; + width: 80%; height: 3em; position: relative; background-color: #ddd; @@ -102,3 +102,10 @@ .edit-sample .key-input { margin-top: 0.1em; } + + +/* Thumbnail */ +.thumbnail-image { + height: 3em; + vertical-align: middle; +} diff --git a/assets/js/views/sample.js b/assets/js/views/sample.js index de9e967..3122641 100644 --- a/assets/js/views/sample.js +++ b/assets/js/views/sample.js @@ -10,6 +10,7 @@ ClipPlay.Views.Sample = Marionette.ItemView.extend({ this.listenTo(this.model, 'change:key', this.key_bind); this.key_bind(); + this.listenTo(this.model, 'change:thumbnail', this.render_thumbnail); }, onRender: function() { @@ -77,6 +78,10 @@ ClipPlay.Views.Sample = Marionette.ItemView.extend({ }); }, + render_thumbnail: function() { + this.$('.js-thumbnail').html('<img src="' + this.model.get('thumbnail') + '" alt="thumbnail" class="thumbnail-image" />'); + }, + on_keyboard_change: function(){ var keyval = this.$('.js-keyboard-key').val(); if (keyval != this.model.get('key')){ |