diff --git a/source/Ox.UI/js/Video/ClipPanel.js b/source/Ox.UI/js/Video/ClipPanel.js index 0c5ce95a..edce09bd 100644 --- a/source/Ox.UI/js/Video/ClipPanel.js +++ b/source/Ox.UI/js/Video/ClipPanel.js @@ -34,14 +34,20 @@ Ox.ClipPanel = function(options, self) { } }); - self.$viewElement = Ox.ButtonGroup({ - buttons: [ - {id: 'list', title: 'list', tooltip: Ox._('View as List')}, - {id: 'grid', title: 'grid', tooltip: Ox._('View as Grid')} + self.$menu = Ox.MenuButton({ + items: [ + {group: 'view', min: 1, max: 1, items: [ + {id: 'list', title: Ox._('View as List'), checked: self.options.view == 'list'}, + {id: 'grid', title: Ox._('View as Grid'), checked: self.options.view == 'grid'}, + ]}, + {}, + {id: 'split', title: 'Split Clip(s) at Cuts', disabled: true}, + {id: 'join', title: 'Join Clip(s) at Cuts', disabled: true}, + {id: 'dereference', title: 'Make Clip(s) Static', disabled: true} ], - selectable: true, - type: 'image', - value: self.options.view + title: 'set', + tooltip: Ox._('Options'), + type: 'image' }) .css({ float: 'left', @@ -49,24 +55,30 @@ Ox.ClipPanel = function(options, self) { }) .bindEvent({ change: function(data) { - Ox.print(data); + if (data.id == 'view') { + that.replaceElement(1, self.$list = getList()); + that.triggerEvent('view', {view: data.checked[0].id}); + } + }, + click: function(data) { + } }) - .appendTo(self.$menubar); + .appendTo(self.$menubar), self.$sortSelect = Ox.Select({ items: self.options.sortOptions, value: self.options.sort[0].key, - width: 84 + Ox.UI.SCROLLBAR_SIZE + width: 100 + Ox.UI.SCROLLBAR_SIZE }) .bindEvent({ change: function(data) { - that.triggerEvent('sort', { + that.triggerEvent('sort', [{ key: data.value, operator: Ox.getObjectById( self.options.sortOptions, data.value ).operator - }); + }]); } }); @@ -78,10 +90,10 @@ Ox.ClipPanel = function(options, self) { }) .bindEvent({ click: function() { - that.triggerEvent('sort', { + that.triggerEvent('sort', [{ key: self.options.sort[0].key, operator: self.options.sort[0].operator == '+' ? '-' : '+' - }); + }]); } }); @@ -95,8 +107,53 @@ Ox.ClipPanel = function(options, self) { }) .appendTo(self.$menubar); - if (self.options.view == 'list') { - self.$list = Ox.TableList({ + self.$list = getList(); + + self.$statusbar = Ox.Bar({ + size: 16 + }); + + that.setElement( + Ox.SplitPanel({ + elements: [ + { + element: self.$menubar, + size: 24 + }, + { + element: self.$list + }, + { + element: self.$statusbar, + size: 16 + } + ], + orientation: 'vertical' + }) + ); + + function cutClips() { + + } + + function editClip(data) { + var value = self.$list.value(data.id, data.key); + if (data.value != value && !(data.value === '' && value === null)) { + self.$list.value(data.id, data.key, data.value || null); + that.triggerEvent('edit', data); + } + } + + function getButtonTitle() { + return self.options.sort[0].operator == '+' ? 'up' : 'down'; + } + + function getButtonTooltip() { + return Ox._(self.options.sort[0].operator == '+' ? 'Ascending' : 'Descending'); + } + + function getList() { + var $list = self.options.view == 'list' ? Ox.TableList({ columns: [ { align: 'right',