ClipPanel: add menu
This commit is contained in:
parent
1c969a7c2f
commit
7aa2b95a56
1 changed files with 73 additions and 16 deletions
|
@ -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',
|
||||
|
|
Loading…
Reference in a new issue