one toolbar for all, repanelize
This commit is contained in:
parent
e3f0064157
commit
3213d8c102
10 changed files with 123 additions and 136 deletions
|
@ -1,25 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
oml.ui.itemOuterPanel = function() {
|
||||
|
||||
var ui = oml.user.ui,
|
||||
|
||||
that = Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
element: oml.$ui.itemToolbar = oml.ui.itemToolbar(),
|
||||
size: 24
|
||||
},
|
||||
{
|
||||
element: oml.$ui.itemInnerPanel = oml.ui.itemInnerPanel()
|
||||
}
|
||||
],
|
||||
orientation: 'vertical'
|
||||
})
|
||||
.bindEvent({
|
||||
// ...
|
||||
});
|
||||
|
||||
return that;
|
||||
|
||||
};
|
|
@ -1,6 +1,6 @@
|
|||
'use strict';
|
||||
|
||||
oml.ui.itemInnerPanel = function() {
|
||||
oml.ui.itemPanel = function() {
|
||||
|
||||
var ui = oml.user.ui,
|
||||
|
||||
|
@ -23,7 +23,9 @@ oml.ui.itemInnerPanel = function() {
|
|||
})
|
||||
.bindEvent({
|
||||
oml_showbrowser: function(data) {
|
||||
data.value == that.options('elements')[0].collapsed && that.toggleElement(0);
|
||||
if (data.value == that.options('elements')[0].collapsed) {
|
||||
that.toggleElement(0);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
oml.ui.itemToolbar = function() {
|
||||
|
||||
var ui = oml.user.ui,
|
||||
|
||||
that = Ox.Bar({size: 24})
|
||||
.css({zIndex: 2})
|
||||
.append(
|
||||
oml.$ui.backButton = oml.ui.backButton()
|
||||
).append(
|
||||
oml.$ui.fullscreenButton = oml.ui.fullscreenButton()
|
||||
).append(
|
||||
oml.$ui.itemViewButtons = oml.ui.itemViewButtons()
|
||||
);
|
||||
|
||||
return that;
|
||||
|
||||
};
|
|
@ -1,25 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
oml.ui.listOuterPanel = function() {
|
||||
|
||||
var ui = oml.user.ui,
|
||||
|
||||
that = Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
element: oml.$ui.listToolbar = oml.ui.listToolbar(),
|
||||
size: 24
|
||||
},
|
||||
{
|
||||
element: oml.$ui.listInnerPanel = oml.ui.listInnerPanel()
|
||||
}
|
||||
],
|
||||
orientation: 'vertical'
|
||||
})
|
||||
.bindEvent({
|
||||
// ...
|
||||
});
|
||||
|
||||
return that;
|
||||
|
||||
};
|
|
@ -1,6 +1,6 @@
|
|||
'use strict';
|
||||
|
||||
oml.ui.listInnerPanel = function() {
|
||||
oml.ui.listPanel = function() {
|
||||
|
||||
var ui = oml.user.ui,
|
||||
|
||||
|
@ -31,7 +31,9 @@ oml.ui.listInnerPanel = function() {
|
|||
that.replaceElement(1, oml.$ui.list = oml.ui.list());
|
||||
},
|
||||
oml_showfilters: function(data) {
|
||||
data.value == that.options('elements')[0].collapsed && that.toggleElement(0);
|
||||
if (data.value == that.options('elements')[0].collapsed) {
|
||||
that.toggleElement(0);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
oml.ui.listToolbar = function() {
|
||||
|
||||
var ui = oml.user.ui,
|
||||
|
||||
that = Ox.Bar({size: 24})
|
||||
.css({zIndex: 2})
|
||||
.append(
|
||||
oml.$ui.openButton = oml.ui.openButton()
|
||||
).append(
|
||||
oml.$ui.previewButton = oml.ui.previewButton()
|
||||
).append(
|
||||
oml.$ui.listViewButtons = oml.ui.listViewButtons()
|
||||
).append(
|
||||
oml.$ui.sortElement = oml.ui.sortElement()
|
||||
).append(
|
||||
oml.$ui.findElement = oml.ui.findElement()
|
||||
)
|
||||
.bindEvent({
|
||||
doubleclick: function(event) {
|
||||
(
|
||||
ui.listView == 'list'
|
||||
? oml.$ui.list.$body
|
||||
: oml.$ui.list
|
||||
).animate({scrollTop: 0}, 250);
|
||||
}
|
||||
});
|
||||
|
||||
return that;
|
||||
|
||||
};
|
|
@ -2,45 +2,27 @@
|
|||
|
||||
oml.ui.rightPanel = function() {
|
||||
|
||||
var ui = oml.user.ui,
|
||||
|
||||
that = Ox.SlidePanel({
|
||||
var that = Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
id: 'list',
|
||||
element: oml.$ui.listOuterPanel = oml.ui.listOuterPanel()
|
||||
element: oml.$ui.toolbar = oml.ui.toolbar(),
|
||||
size: 24
|
||||
},
|
||||
{
|
||||
id: 'item',
|
||||
element: oml.$ui.itemOuterPanel = oml.ui.itemOuterPanel()
|
||||
element: oml.$ui.viewPanel = oml.ui.viewPanel()
|
||||
}
|
||||
],
|
||||
orientation: 'horizontal',
|
||||
selected: !ui.item ? 'list' : 'item',
|
||||
size: getSize()
|
||||
orientation: 'vertical'
|
||||
})
|
||||
.bindEvent({
|
||||
resize: function(data) {
|
||||
that.options({size: data.size});
|
||||
oml.$ui.viewPanel.options({size: data.size});
|
||||
oml.$ui.filtersOuterPanel.updateElement();
|
||||
oml.$ui.list.size();
|
||||
oml.$ui.itemViewPanel.options({size: data.size});
|
||||
},
|
||||
oml_item: function(data) {
|
||||
if (!!data.value != !!data.previousValue) {
|
||||
that.options({selected: !ui.item ? 'list' : 'item'});
|
||||
}
|
||||
oml.$ui.itemViewPanel.options({size: data.size})
|
||||
}
|
||||
});
|
||||
|
||||
function getSize() {
|
||||
return window.innerWidth - ui.showSidebar * ui.sidebarSize - 1;
|
||||
}
|
||||
|
||||
that.updateElement = function() {
|
||||
return that.triggerEvent('resize', {size: getSize()});
|
||||
};
|
||||
|
||||
return that;
|
||||
|
||||
};
|
58
static/js/toolbar.js
Normal file
58
static/js/toolbar.js
Normal file
|
@ -0,0 +1,58 @@
|
|||
'use strict';
|
||||
|
||||
oml.ui.toolbar = function() {
|
||||
|
||||
var ui = oml.user.ui,
|
||||
|
||||
buttons = {
|
||||
'list': ['openButton', 'previewButton', 'listViewButtons'],
|
||||
'item': ['backButton', 'fullscreenButton', 'itemViewButtons']
|
||||
},
|
||||
|
||||
view = getView(),
|
||||
|
||||
that = Ox.Bar({size: 24})
|
||||
.css({zIndex: 2})
|
||||
.bindEvent({
|
||||
doubleclick: function(event) {
|
||||
if (view == 'list') {
|
||||
(
|
||||
ui.listView == 'list'
|
||||
? oml.$ui.list.$body
|
||||
: oml.$ui.list
|
||||
).animate({scrollTop: 0}, 250);
|
||||
}
|
||||
},
|
||||
oml_item: function(data) {
|
||||
if (!!data.value != !!data.previousValue) {
|
||||
view = getView();
|
||||
var previousView = view == 'list' ? 'item' : 'list';
|
||||
buttons[previousView].forEach(
|
||||
function(previousButton, index) {
|
||||
var button = buttons[view][index];
|
||||
oml.$ui[previousButton].replaceWith(
|
||||
oml.$ui[button] = oml.ui[button]()
|
||||
)
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
buttons[view].forEach(function(button) {
|
||||
that.append(oml.$ui[button] = oml.ui[button]());
|
||||
});
|
||||
|
||||
that.append(
|
||||
oml.$ui.sortElement = oml.ui.sortElement()
|
||||
).append(
|
||||
oml.$ui.findElement = oml.ui.findElement()
|
||||
);
|
||||
|
||||
function getView() {
|
||||
return !ui.item ? 'list' : 'item';
|
||||
}
|
||||
|
||||
return that;
|
||||
|
||||
};
|
46
static/js/viewPanel.js
Normal file
46
static/js/viewPanel.js
Normal file
|
@ -0,0 +1,46 @@
|
|||
'use strict';
|
||||
|
||||
oml.ui.viewPanel = function() {
|
||||
|
||||
var ui = oml.user.ui,
|
||||
|
||||
that = Ox.SlidePanel({
|
||||
elements: [
|
||||
{
|
||||
id: 'list',
|
||||
element: oml.$ui.listOuterPanel = oml.ui.listPanel()
|
||||
},
|
||||
{
|
||||
id: 'item',
|
||||
element: oml.$ui.itemOuterPanel = oml.ui.itemPanel()
|
||||
}
|
||||
],
|
||||
orientation: 'horizontal',
|
||||
selected: !ui.item ? 'list' : 'item',
|
||||
size: getSize()
|
||||
})
|
||||
.bindEvent({
|
||||
resize: function(data) {
|
||||
that.options({size: data.size});
|
||||
oml.$ui.filtersOuterPanel.updateElement();
|
||||
oml.$ui.list.size();
|
||||
oml.$ui.itemViewPanel.options({size: data.size});
|
||||
},
|
||||
oml_item: function(data) {
|
||||
if (!!data.value != !!data.previousValue) {
|
||||
that.options({selected: !ui.item ? 'list' : 'item'});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function getSize() {
|
||||
return window.innerWidth - ui.showSidebar * ui.sidebarSize - 1;
|
||||
}
|
||||
|
||||
//that.updateElement = function() {
|
||||
// return that.triggerEvent('resize', {size: getSize()});
|
||||
//};
|
||||
|
||||
return that;
|
||||
|
||||
};
|
|
@ -33,18 +33,14 @@
|
|||
"importScreen.js",
|
||||
"info.js",
|
||||
"infoView.js",
|
||||
"itemInnerPanel.js",
|
||||
"itemMenu.js",
|
||||
"itemOuterPanel.js",
|
||||
"itemToolbar.js",
|
||||
"itemPanel.js",
|
||||
"itemViewButtons.js",
|
||||
"itemViewPanel.js",
|
||||
"leftPanel.js",
|
||||
"list.js",
|
||||
"listDialog.js",
|
||||
"listInnerPanel.js",
|
||||
"listOuterPanel.js",
|
||||
"listToolbar.js",
|
||||
"listPanel.js",
|
||||
"listView.js",
|
||||
"listViewButtons.js",
|
||||
"loadingIcon.js",
|
||||
|
@ -64,11 +60,13 @@
|
|||
"statusIcon.js",
|
||||
"statusbar.js",
|
||||
"titlesDialog.js",
|
||||
"toolbar.js",
|
||||
"transfersDialog.js",
|
||||
"updateButton.js",
|
||||
"userButton.js",
|
||||
"usersDialog.js",
|
||||
"utils.js",
|
||||
"viewPanel.js",
|
||||
"viewer.js",
|
||||
"welcomeDialog.js"
|
||||
]
|
Loading…
Reference in a new issue