diff options
| -rw-r--r-- | assets/css/sample-editor.css | 9 | ||||
| -rw-r--r-- | assets/js/views/sample.js | 5 | ||||
| -rw-r--r-- | index.html | 2 |
3 files changed, 15 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')){ @@ -43,6 +43,8 @@ <script type="text/html" id="sample-view-template"> <div class="edit-sample js-edit-sample"> + <div class="thumbnail js-thumbnail"></div> + <div class="progress-bar"> <div class="clip-line js-clip-line js-start-position"> <div class="drag-handle start-drag-handle js-drag-handle"> |