forked from 0x2620/pandora
use svg
This commit is contained in:
parent
7e6a728280
commit
c53a1009e5
1 changed files with 84 additions and 53 deletions
|
@ -27,7 +27,6 @@
|
||||||
return key.find ? key : null;
|
return key.find ? key : null;
|
||||||
}),
|
}),
|
||||||
infoRatio: 16 / 9,
|
infoRatio: 16 / 9,
|
||||||
scrollbarSize: $.browser.mozilla ? 16 : 12,
|
|
||||||
sectionElement: 'buttons',
|
sectionElement: 'buttons',
|
||||||
sectionFolders: {
|
sectionFolders: {
|
||||||
site: $.merge([
|
site: $.merge([
|
||||||
|
@ -464,7 +463,7 @@
|
||||||
$bin.$content.append(
|
$bin.$content.append(
|
||||||
$('<div>').css({ height: '20px' }).append(
|
$('<div>').css({ height: '20px' }).append(
|
||||||
$('<div>').css({ float: 'left', width: '16px', height: '16px', margin: '1px'}).append(
|
$('<div>').css({ float: 'left', width: '16px', height: '16px', margin: '1px'}).append(
|
||||||
$('<img>').attr({ src: 'static/oxjs/build/png/ox.ui.modern/iconFind.png' }).css({ width: '16px', height: '16px', border: 0, background: 'rgb(64, 64, 64)', WebkitBorderRadius: '2px' })
|
$('<img>').attr({ src: Ox.UI.getImagePath('iconFind.svg') }).css({ width: '16px', height: '16px', border: 0, background: 'rgb(64, 64, 64)', WebkitBorderRadius: '2px' })
|
||||||
)
|
)
|
||||||
).append(
|
).append(
|
||||||
$('<div>').css({ float: 'left', width: '122px', height: '14px', margin: '2px' }).html('Foo')
|
$('<div>').css({ float: 'left', width: '122px', height: '14px', margin: '2px' }).html('Foo')
|
||||||
|
@ -604,7 +603,7 @@
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
that.update = function() {
|
that.update = function() {
|
||||||
app.$ui.contentPanel.replace(0, app.$ui.browser = ui.browser());
|
app.$ui.contentPanel.replaceElement(0, app.$ui.browser = ui.browser());
|
||||||
}
|
}
|
||||||
return that;
|
return that;
|
||||||
},
|
},
|
||||||
|
@ -627,7 +626,7 @@
|
||||||
collapsed: !app.user.ui.showMovies,
|
collapsed: !app.user.ui.showMovies,
|
||||||
collapsible: true,
|
collapsible: true,
|
||||||
element: app.$ui.browser = ui.browser(),
|
element: app.$ui.browser = ui.browser(),
|
||||||
size: 112 + app.ui.scrollbarSize
|
size: 112 + Ox.UI.SCROLLBAR_SIZE
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
element: app.$ui.item = ui.item(app.user.ui.item, app.user.ui.itemView)
|
element: app.$ui.item = ui.item(app.user.ui.item, app.user.ui.itemView)
|
||||||
|
@ -691,7 +690,7 @@
|
||||||
height: 264,
|
height: 264,
|
||||||
keys: {enter: 'save', escape: 'cancel'},
|
keys: {enter: 'save', escape: 'cancel'},
|
||||||
title: 'Advanced Find',
|
title: 'Advanced Find',
|
||||||
width: 616 + app.ui.scrollbarSize
|
width: 616 + Ox.UI.SCROLLBAR_SIZE
|
||||||
});
|
});
|
||||||
return that;
|
return that;
|
||||||
},
|
},
|
||||||
|
@ -864,7 +863,7 @@
|
||||||
});
|
});
|
||||||
app.$ui.findListInput = new Ox.Input({
|
app.$ui.findListInput = new Ox.Input({
|
||||||
placeholder: 'Find User',
|
placeholder: 'Find User',
|
||||||
width: 184 - app.ui.scrollbarSize
|
width: 184 - Ox.UI.SCROLLBAR_SIZE
|
||||||
})
|
})
|
||||||
.css({
|
.css({
|
||||||
margin: '4px',
|
margin: '4px',
|
||||||
|
@ -874,21 +873,28 @@
|
||||||
return that;
|
return that;
|
||||||
},
|
},
|
||||||
folderBrowserList: function(id) {
|
folderBrowserList: function(id) {
|
||||||
var columnWidth = (app.user.ui.sidebarSize - app.ui.scrollbarSize - 88) / 2,
|
var columnWidth = (app.user.ui.sidebarSize - Ox.UI.SCROLLBAR_SIZE - 88) / 2,
|
||||||
i = Ox.getPositionById(app.ui.sectionFolders[app.user.ui.section], id),
|
i = Ox.getPositionById(app.ui.sectionFolders[app.user.ui.section], id),
|
||||||
that = new Ox.TextList({
|
that = new Ox.TextList({
|
||||||
columns: [
|
columns: [
|
||||||
{
|
{
|
||||||
format: function() {
|
format: function() {
|
||||||
return $('<img>').attr({
|
return $('<img>')
|
||||||
src: 'static/oxjs/build/png/ox.ui/icon16.png'
|
.attr({
|
||||||
});
|
src: 'static/oxjs/build/png/ox.ui/icon16.png'
|
||||||
|
});
|
||||||
},
|
},
|
||||||
id: 'id',
|
id: 'id',
|
||||||
operator: '+',
|
operator: '+',
|
||||||
title: $('<img>').attr({
|
title: $('<img>')
|
||||||
src: 'static/oxjs/build/png/ox.ui/icon16.png'
|
.attr({
|
||||||
}),
|
src: 'static/oxjs/build/png/ox.ui/icon16.png'
|
||||||
|
})
|
||||||
|
.css({
|
||||||
|
width: '10px',
|
||||||
|
height: '10px',
|
||||||
|
padding: '3px 2px 1px 2px',
|
||||||
|
}),
|
||||||
unique: true,
|
unique: true,
|
||||||
visible: true,
|
visible: true,
|
||||||
width: 16
|
width: 16
|
||||||
|
@ -922,19 +928,26 @@
|
||||||
format: function(value) {
|
format: function(value) {
|
||||||
return $('<img>')
|
return $('<img>')
|
||||||
.attr({
|
.attr({
|
||||||
src: 'static/oxjs/build/png/ox.ui.' + Ox.theme() +
|
src: Ox.UI.getImagePath('symbolFind.svg')
|
||||||
'/symbolFind.png'
|
|
||||||
})
|
})
|
||||||
.css({
|
.css({
|
||||||
|
width: '10px',
|
||||||
|
height: '10px',
|
||||||
|
padding: '3px 2px 1px 2px', // fixme: strange
|
||||||
opacity: value == 'static' ? 0.1 : 1
|
opacity: value == 'static' ? 0.1 : 1
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
id: 'type',
|
id: 'type',
|
||||||
operator: '+',
|
operator: '+',
|
||||||
title: $('<img>').attr({
|
title: $('<img>')
|
||||||
src: 'static/oxjs/build/png/ox.ui.' +
|
.attr({
|
||||||
Ox.theme() + '/symbolFind.png'
|
src: Ox.UI.getImagePath('symbolFind.svg')
|
||||||
}),
|
})
|
||||||
|
.css({
|
||||||
|
width: '10px',
|
||||||
|
height: '10px',
|
||||||
|
padding: '3px 2px 1px 2px',
|
||||||
|
}),
|
||||||
visible: true,
|
visible: true,
|
||||||
width: 16
|
width: 16
|
||||||
},
|
},
|
||||||
|
@ -943,20 +956,31 @@
|
||||||
format: function(value) {
|
format: function(value) {
|
||||||
return $('<img>')
|
return $('<img>')
|
||||||
.attr({
|
.attr({
|
||||||
src: 'static/oxjs/build/png/ox.ui.' + Ox.theme() +
|
src: Ox.UI.getImagePath(
|
||||||
'/symbol' + (id == 'favorite' ? 'Check' : 'Star') + '.png'
|
'symbol' + (id == 'favorite' ? 'Check' : 'Star') + '.svg'
|
||||||
|
)
|
||||||
})
|
})
|
||||||
.css({
|
.css({
|
||||||
|
width: '10px',
|
||||||
|
height: '10px',
|
||||||
|
padding: '3px 2px 1px 2px',
|
||||||
opacity: id == 'favorite' ? (value ? 1 : 0.1) :
|
opacity: id == 'favorite' ? (value ? 1 : 0.1) :
|
||||||
(value == 'featured' ? 1 : 0.1)
|
(value == 'featured' ? 1 : 0.1)
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
id: id == 'favorite' ? 'subscribed' : 'status',
|
id: id == 'favorite' ? 'subscribed' : 'status',
|
||||||
operator: '+',
|
operator: '+',
|
||||||
title: $('<img>').attr({
|
title: $('<img>')
|
||||||
src: 'static/oxjs/build/png/ox.ui.' + Ox.theme() +
|
.attr({
|
||||||
'/symbol' + (id == 'favorite' ? 'Check' : 'Star') + '.png'
|
src: Ox.UI.getImagePath(
|
||||||
}),
|
'symbol' + (id == 'favorite' ? 'Check' : 'Star') + '.svg'
|
||||||
|
)
|
||||||
|
})
|
||||||
|
.css({
|
||||||
|
width: '10px',
|
||||||
|
height: '10px',
|
||||||
|
padding: '3px 2px 1px 2px'
|
||||||
|
}),
|
||||||
visible: true,
|
visible: true,
|
||||||
width: 16
|
width: 16
|
||||||
},
|
},
|
||||||
|
@ -1045,9 +1069,10 @@
|
||||||
columns: [
|
columns: [
|
||||||
{
|
{
|
||||||
format: function() {
|
format: function() {
|
||||||
return $('<img>').attr({
|
return $('<img>')
|
||||||
src: 'static/oxjs/build/png/ox.ui/icon16.png'
|
.attr({
|
||||||
});
|
src: 'static/oxjs/build/png/ox.ui/icon16.png'
|
||||||
|
})
|
||||||
},
|
},
|
||||||
id: 'id',
|
id: 'id',
|
||||||
operator: '+',
|
operator: '+',
|
||||||
|
@ -1134,10 +1159,12 @@
|
||||||
format: function(value) {
|
format: function(value) {
|
||||||
return $('<img>')
|
return $('<img>')
|
||||||
.attr({
|
.attr({
|
||||||
src: 'static/oxjs/build/png/ox.ui.' + Ox.theme() +
|
src: Ox.UI.getImagePath('symbolFind.svg')
|
||||||
'/symbolFind.png'
|
|
||||||
})
|
})
|
||||||
.css({
|
.css({
|
||||||
|
width: '10px',
|
||||||
|
height: '10px',
|
||||||
|
padding: '3px 2px 1px 2px',
|
||||||
opacity: value == 'static' ? 0.1 : 1
|
opacity: value == 'static' ? 0.1 : 1
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
@ -1152,10 +1179,14 @@
|
||||||
//var symbols = {private: 'Publish', public: 'Publish', featured: 'Star'};
|
//var symbols = {private: 'Publish', public: 'Publish', featured: 'Star'};
|
||||||
return $('<img>')
|
return $('<img>')
|
||||||
.attr({
|
.attr({
|
||||||
src: 'static/oxjs/build/png/ox.ui.' + Ox.theme() + '/symbol'
|
src: Ox.UI.getImagePath(
|
||||||
+ (value == 'featured' ? 'Star' : 'Publish') + '.png'
|
'symbol' + (value == 'featured' ? 'Star' : 'Publish') + '.svg'
|
||||||
|
)
|
||||||
})
|
})
|
||||||
.css({
|
.css({
|
||||||
|
width: '10px',
|
||||||
|
height: '10px',
|
||||||
|
padding: '3px 2px 1px 2px',
|
||||||
opacity: value == 'private' ? 0.1 : 1
|
opacity: value == 'private' ? 0.1 : 1
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
@ -1612,7 +1643,7 @@
|
||||||
function replaceGroup(i, id, query) {
|
function replaceGroup(i, id, query) {
|
||||||
// if query is passed, selected items will be derived from it
|
// if query is passed, selected items will be derived from it
|
||||||
var isOuter = i % 4 == 0;
|
var isOuter = i % 4 == 0;
|
||||||
app.$ui[isOuter ? 'browser' : 'groupsInnerPanel'].replace(
|
app.$ui[isOuter ? 'browser' : 'groupsInnerPanel'].replaceElement(
|
||||||
isOuter ? i / 2 : i - 1,
|
isOuter ? i / 2 : i - 1,
|
||||||
app.$ui.groups[i] = ui.group(id, query)
|
app.$ui.groups[i] = ui.group(id, query)
|
||||||
);
|
);
|
||||||
|
@ -1768,11 +1799,11 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}));
|
}));
|
||||||
app.$ui.contentPanel.replace(1, app.$ui.item = $edit);
|
app.$ui.contentPanel.replaceElement(1, app.$ui.item = $edit);
|
||||||
} else {
|
} else {
|
||||||
$.get('/static/html/itemInfo.html', {}, function(template) {
|
$.get('/static/html/itemInfo.html', {}, function(template) {
|
||||||
//Ox.print(template);
|
//Ox.print(template);
|
||||||
app.$ui.contentPanel.replace(1,
|
app.$ui.contentPanel.replaceElement(1,
|
||||||
app.$ui.item = new Ox.Element('div')
|
app.$ui.item = new Ox.Element('div')
|
||||||
.append($.tmpl(template, result.data.item))
|
.append($.tmpl(template, result.data.item))
|
||||||
);
|
);
|
||||||
|
@ -1786,7 +1817,7 @@
|
||||||
video.height = video.profiles[0]
|
video.height = video.profiles[0]
|
||||||
video.width = parseInt(video.height * video.aspectRatio / 2) * 2;
|
video.width = parseInt(video.height * video.aspectRatio / 2) * 2;
|
||||||
video.url = video.baseUrl + '/' + video.height + 'p.' + format;
|
video.url = video.baseUrl + '/' + video.height + 'p.' + format;
|
||||||
app.$ui.contentPanel.replace(1, app.$ui.player = new Ox.VideoPanelPlayer({
|
app.$ui.contentPanel.replaceElement(1, app.$ui.player = new Ox.VideoPanelPlayer({
|
||||||
annotationsSize: app.user.ui.annotationsSize,
|
annotationsSize: app.user.ui.annotationsSize,
|
||||||
duration: video.duration,
|
duration: video.duration,
|
||||||
height: app.$ui.contentPanel.size(1),
|
height: app.$ui.contentPanel.size(1),
|
||||||
|
@ -1827,7 +1858,7 @@
|
||||||
$.each(app.config.layers, function(i, layer) {
|
$.each(app.config.layers, function(i, layer) {
|
||||||
layers[i] = $.extend({}, layer, {items: result.data.item.layers[layer.id]});
|
layers[i] = $.extend({}, layer, {items: result.data.item.layers[layer.id]});
|
||||||
});
|
});
|
||||||
app.$ui.contentPanel.replace(1, app.$ui.editor = new Ox.VideoEditor({
|
app.$ui.contentPanel.replaceElement(1, app.$ui.editor = new Ox.VideoEditor({
|
||||||
annotationsSize: app.user.ui.annotationsSize,
|
annotationsSize: app.user.ui.annotationsSize,
|
||||||
cuts: cuts,
|
cuts: cuts,
|
||||||
duration: video.duration,
|
duration: video.duration,
|
||||||
|
@ -1895,7 +1926,7 @@
|
||||||
});
|
});
|
||||||
*/
|
*/
|
||||||
} else if (app.user.ui.itemView == 'files') {
|
} else if (app.user.ui.itemView == 'files') {
|
||||||
app.$ui.contentPanel.replace(1,
|
app.$ui.contentPanel.replaceElement(1,
|
||||||
app.$ui.item = new Ox.FilesView({
|
app.$ui.item = new Ox.FilesView({
|
||||||
id: result.data.item.id
|
id: result.data.item.id
|
||||||
})
|
})
|
||||||
|
@ -2376,7 +2407,7 @@
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
that.display = function() { // fixme: used?
|
that.display = function() { // fixme: used?
|
||||||
app.$ui.rightPanel.replace(1, app.$ui.contentPanel = ui.contentPanel());
|
app.$ui.rightPanel.replaceElement(1, app.$ui.contentPanel = ui.contentPanel());
|
||||||
};
|
};
|
||||||
return that;
|
return that;
|
||||||
},
|
},
|
||||||
|
@ -3228,7 +3259,7 @@
|
||||||
app.$ui.findElement = ui.findElement()
|
app.$ui.findElement = ui.findElement()
|
||||||
);
|
);
|
||||||
that.display = function() {
|
that.display = function() {
|
||||||
app.$ui.rightPanel.replace(0, app.$ui.toolbar = ui.toolbar()); // fixme: remove later
|
app.$ui.rightPanel.replaceElement(0, app.$ui.toolbar = ui.toolbar()); // fixme: remove later
|
||||||
}
|
}
|
||||||
return that;
|
return that;
|
||||||
},
|
},
|
||||||
|
@ -3262,7 +3293,7 @@
|
||||||
var id = data.selected[0].id;
|
var id = data.selected[0].id;
|
||||||
//UI.set({itemView: id});
|
//UI.set({itemView: id});
|
||||||
URL.set(app.user.ui.item + '/' + id);
|
URL.set(app.user.ui.item + '/' + id);
|
||||||
// app.$ui.contentPanel.replace(1, app.$ui.item = ui.item());
|
// app.$ui.contentPanel.replaceElement(1, app.$ui.item = ui.item());
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
return that;
|
return that;
|
||||||
|
@ -3323,7 +3354,7 @@
|
||||||
app.user.ui.showSidebar && app.$ui.mainPanel.size(0, 0);
|
app.user.ui.showSidebar && app.$ui.mainPanel.size(0, 0);
|
||||||
app.$ui.rightPanel.size(0, 0).size(2, 0);
|
app.$ui.rightPanel.size(0, 0).size(2, 0);
|
||||||
!app.user.ui.showMovies && app.$ui.contentPanel.css({
|
!app.user.ui.showMovies && app.$ui.contentPanel.css({
|
||||||
top: (-112 - app.ui.scrollbarSize) + 'px' // fixme: rightPanel.size(0, 0) doesn't preserve negative top of browser
|
top: (-112 - Ox.UI.SCROLLBAR_SIZE) + 'px' // fixme: rightPanel.size(0, 0) doesn't preserve negative top of browser
|
||||||
});
|
});
|
||||||
app.user.ui.showMovies && app.$ui.contentPanel.size(0, 0);
|
app.user.ui.showMovies && app.$ui.contentPanel.size(0, 0);
|
||||||
app.$ui.player.options({
|
app.$ui.player.options({
|
||||||
|
@ -3337,9 +3368,9 @@
|
||||||
app.user.ui.showSidebar && app.$ui.mainPanel.size(0, app.user.ui.sidebarSize);
|
app.user.ui.showSidebar && app.$ui.mainPanel.size(0, app.user.ui.sidebarSize);
|
||||||
app.$ui.rightPanel.size(0, 24).size(2, 16);
|
app.$ui.rightPanel.size(0, 24).size(2, 16);
|
||||||
!app.user.ui.showMovies && app.$ui.contentPanel.css({
|
!app.user.ui.showMovies && app.$ui.contentPanel.css({
|
||||||
top: 24 + (-112 - app.ui.scrollbarSize) + 'px' // fixme: rightPanel.size(0, 0) doesn't preserve negative top of browser
|
top: 24 + (-112 - Ox.UI.SCROLLBAR_SIZE) + 'px' // fixme: rightPanel.size(0, 0) doesn't preserve negative top of browser
|
||||||
});
|
});
|
||||||
app.user.ui.showMovies && app.$ui.contentPanel.size(0, 112 + app.ui.scrollbarSize);
|
app.user.ui.showMovies && app.$ui.contentPanel.size(0, 112 + Ox.UI.SCROLLBAR_SIZE);
|
||||||
}
|
}
|
||||||
|
|
||||||
function getListData() {
|
function getListData() {
|
||||||
|
@ -3378,7 +3409,7 @@
|
||||||
// fixme: don't use height(), look up in splitpanels
|
// fixme: don't use height(), look up in splitpanels
|
||||||
Ox.print(getFoldersHeight(), '>', app.$ui.leftPanel.height() - 24 - 1 - app.$ui.info.height())
|
Ox.print(getFoldersHeight(), '>', app.$ui.leftPanel.height() - 24 - 1 - app.$ui.info.height())
|
||||||
if (getFoldersHeight() > app.$ui.leftPanel.height() - 24 - 1 - app.$ui.info.height()) {
|
if (getFoldersHeight() > app.$ui.leftPanel.height() - 24 - 1 - app.$ui.info.height()) {
|
||||||
width -= app.ui.scrollbarSize;
|
width -= Ox.UI.SCROLLBAR_SIZE;
|
||||||
}
|
}
|
||||||
return width;
|
return width;
|
||||||
}
|
}
|
||||||
|
@ -3386,7 +3417,7 @@
|
||||||
function getGroupWidth(pos, panelWidth) { // fixme: don't pass panelWidth
|
function getGroupWidth(pos, panelWidth) { // fixme: don't pass panelWidth
|
||||||
var width = {};
|
var width = {};
|
||||||
width.list = Math.floor(panelWidth / 5) + (panelWidth % 5 > pos);
|
width.list = Math.floor(panelWidth / 5) + (panelWidth % 5 > pos);
|
||||||
width.column = width.list - 40 - app.ui.scrollbarSize;
|
width.column = width.list - 40 - Ox.UI.SCROLLBAR_SIZE;
|
||||||
return width;
|
return width;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -3879,15 +3910,15 @@
|
||||||
update: function() {
|
update: function() {
|
||||||
URL.parse();
|
URL.parse();
|
||||||
if (app.user.ui.section != old.user.ui.section) {
|
if (app.user.ui.section != old.user.ui.section) {
|
||||||
app.$ui.appPanel.replace(1, app.$ui.mainPanel = ui.mainPanel());
|
app.$ui.appPanel.replaceElement(1, app.$ui.mainPanel = ui.mainPanel());
|
||||||
} else if (app.user.ui.sitePage != old.user.ui.sitePage) {
|
} else if (app.user.ui.sitePage != old.user.ui.sitePage) {
|
||||||
app.$ui.mainPanel.replace(1, app.$ui.rightPanel = ui.rightPanel());
|
app.$ui.mainPanel.replaceElement(1, app.$ui.rightPanel = ui.rightPanel());
|
||||||
} else if (!app.user.ui.item || !old.user.ui.item) {
|
} else if (!app.user.ui.item || !old.user.ui.item) {
|
||||||
app.$ui.mainPanel.replace(1, app.$ui.rightPanel = ui.rightPanel());
|
app.$ui.mainPanel.replaceElement(1, app.$ui.rightPanel = ui.rightPanel());
|
||||||
app.$ui.leftPanel.replace(2, app.$ui.info = ui.info());
|
app.$ui.leftPanel.replaceElement(2, app.$ui.info = ui.info());
|
||||||
} else {
|
} else {
|
||||||
app.$ui.contentPanel.replace(1, ui.item());
|
app.$ui.contentPanel.replaceElement(1, ui.item());
|
||||||
app.$ui.leftPanel.replace(2, app.$ui.info = ui.info());
|
app.$ui.leftPanel.replaceElement(2, app.$ui.info = ui.info());
|
||||||
}
|
}
|
||||||
if (
|
if (
|
||||||
old.user.ui.item &&
|
old.user.ui.item &&
|
||||||
|
@ -3941,7 +3972,7 @@
|
||||||
});
|
});
|
||||||
if (!match) {
|
if (!match) {
|
||||||
Query.fromString(location.hash.substr(1));
|
Query.fromString(location.hash.substr(1));
|
||||||
app.$ui.rightPanel.replace(1, ui.contentPanel());
|
app.$ui.rightPanel.replaceElement(1, ui.contentPanel());
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue