one toolbar for all, repanelize

This commit is contained in:
rlx 2016-01-12 18:45:15 +05:30
parent e3f0064157
commit 3213d8c102
10 changed files with 123 additions and 136 deletions

View File

@ -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;
};

View File

@ -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);
}
}
});

View File

@ -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;
};

View File

@ -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;
};

View File

@ -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);
}
}
});

View File

@ -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;
};

View File

@ -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
View 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
View 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;
};

View File

@ -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"
]