forked from 0x2620/pandora
use Ox.EditableContent for info in documents item view
This commit is contained in:
j
parent
fdbd17fdc1
commit
f52daaacbd
1 changed files with 160 additions and 105 deletions
|
|
@ -310,7 +310,7 @@ pandora.ui.documentsPanel = function(options) {
|
|||
|
||||
$preview,
|
||||
|
||||
$form,
|
||||
$data,
|
||||
|
||||
$itemStatusbar = Ox.Bar({size: 16})
|
||||
.css({textAlign: 'center'}),
|
||||
|
|
@ -492,13 +492,74 @@ pandora.ui.documentsPanel = function(options) {
|
|||
});
|
||||
}
|
||||
|
||||
function renderForm() {
|
||||
var item = $list.value($list.options('selected')[0]),
|
||||
function renderData() {
|
||||
var $title, $description,
|
||||
item = $list.value($list.options('selected')[0]),
|
||||
editable = item.user == pandora.user.username
|
||||
|| pandora.site.capabilities.canEditDocuments[pandora.user.level],
|
||||
inputWidth = ui.documentSize - 16 - Ox.UI.SCROLLBAR_SIZE,
|
||||
labelWidth = 80;
|
||||
return Ox.Form({
|
||||
labelWidth = 80,
|
||||
width = ui.documentSize - 16 - Ox.UI.SCROLLBAR_SIZE;
|
||||
return isItemView
|
||||
? Ox.Element()
|
||||
.append(
|
||||
Ox.$('<div>').css({height: '16px'})
|
||||
)
|
||||
.append(
|
||||
$title = Ox.EditableContent({
|
||||
editable: false,
|
||||
value: item.name,
|
||||
width: width
|
||||
})
|
||||
.css({
|
||||
margin: '0 4px',
|
||||
textAlign: 'center',
|
||||
fontWeight: 'bold'
|
||||
})
|
||||
.bindEvent({
|
||||
edit: function() {
|
||||
$title.options({
|
||||
width: that.width()
|
||||
});
|
||||
},
|
||||
submit: function() {
|
||||
// ...
|
||||
}
|
||||
})
|
||||
)
|
||||
.append(
|
||||
Ox.$('<div>').css({height: '8px'})
|
||||
)
|
||||
.append(
|
||||
$description = Ox.EditableContent({
|
||||
format: function(value) {
|
||||
return '<div class="OxLight" style="text-align: center">'
|
||||
+ value + '</div>';
|
||||
},
|
||||
height: width,
|
||||
placeholder: 'No description',
|
||||
type: 'textarea',
|
||||
value: item.description || '',
|
||||
width: width
|
||||
})
|
||||
.css({
|
||||
marginLeft: '8px',
|
||||
textAlign: 'center'
|
||||
})
|
||||
.bindEvent({
|
||||
submit: function(data) {
|
||||
pandora.api.editDocument({
|
||||
description: data.value,
|
||||
id: item.id,
|
||||
item: ui.item,
|
||||
}, function(result) {
|
||||
$description.options({value: result.data.description});
|
||||
Ox.Request.clearCache('findDocuments');
|
||||
$list.reloadList();
|
||||
});
|
||||
}
|
||||
})
|
||||
)
|
||||
: Ox.Form({
|
||||
items: [
|
||||
Ox.Input({
|
||||
disabled: !editable,
|
||||
|
|
@ -506,7 +567,7 @@ pandora.ui.documentsPanel = function(options) {
|
|||
label: Ox._('Name'),
|
||||
labelWidth: labelWidth,
|
||||
value: item.name,
|
||||
width: inputWidth
|
||||
width: width
|
||||
}),
|
||||
Ox.Input({
|
||||
disabled: true,
|
||||
|
|
@ -514,7 +575,7 @@ pandora.ui.documentsPanel = function(options) {
|
|||
label: Ox._('Extension'),
|
||||
labelWidth: labelWidth,
|
||||
value: item.extension,
|
||||
width: inputWidth
|
||||
width: width
|
||||
}),
|
||||
Ox.Input({
|
||||
disabled: true,
|
||||
|
|
@ -524,7 +585,7 @@ pandora.ui.documentsPanel = function(options) {
|
|||
value: Ox.isArray(item.dimensions)
|
||||
? Ox.formatDimensions(item.dimensions, 'px')
|
||||
: Ox.formatCount(item.dimensions, 'page'),
|
||||
width: inputWidth
|
||||
width: width
|
||||
}),
|
||||
Ox.Input({
|
||||
disabled: true,
|
||||
|
|
@ -532,7 +593,7 @@ pandora.ui.documentsPanel = function(options) {
|
|||
label: Ox._('Size'),
|
||||
labelWidth: labelWidth,
|
||||
value: Ox.formatValue(item.size, 'B'),
|
||||
width: inputWidth
|
||||
width: width
|
||||
}),
|
||||
Ox.Input({
|
||||
disabled: true,
|
||||
|
|
@ -540,7 +601,7 @@ pandora.ui.documentsPanel = function(options) {
|
|||
label: Ox._('Matches'),
|
||||
labelWidth: labelWidth,
|
||||
value: item.matches,
|
||||
width: inputWidth
|
||||
width: width
|
||||
}),
|
||||
Ox.Input({
|
||||
disabled: true,
|
||||
|
|
@ -548,7 +609,7 @@ pandora.ui.documentsPanel = function(options) {
|
|||
label: Ox._('Username'),
|
||||
labelWidth: labelWidth,
|
||||
value: item.user,
|
||||
width: inputWidth
|
||||
width: width
|
||||
}),
|
||||
Ox.Input({
|
||||
disabled: !editable,
|
||||
|
|
@ -556,7 +617,7 @@ pandora.ui.documentsPanel = function(options) {
|
|||
label: Ox._('Type'),
|
||||
labelWidth: labelWidth,
|
||||
value: item.type,
|
||||
width: inputWidth
|
||||
width: width
|
||||
}),
|
||||
Ox.Input({
|
||||
disabled: !editable,
|
||||
|
|
@ -565,7 +626,7 @@ pandora.ui.documentsPanel = function(options) {
|
|||
placeholder: Ox._('Description'),
|
||||
type: 'textarea',
|
||||
value: item.description,
|
||||
width: inputWidth
|
||||
width: width
|
||||
})
|
||||
],
|
||||
width: 240
|
||||
|
|
@ -678,14 +739,6 @@ pandora.ui.documentsPanel = function(options) {
|
|||
})
|
||||
.on({
|
||||
click: openDocuments
|
||||
// FIXME
|
||||
/*
|
||||
var item = $list.value(selected);
|
||||
window.open(
|
||||
'/documents/' + selected + '/' + item.name + '.' + item.extension,
|
||||
'_blank'
|
||||
);
|
||||
*/
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -698,10 +751,12 @@ pandora.ui.documentsPanel = function(options) {
|
|||
}).css({
|
||||
margin: size.margin
|
||||
});
|
||||
$form && $form.options('items').forEach(function($item) {
|
||||
if (!isItemView && $data) {
|
||||
$data.options('items').forEach(function($item) {
|
||||
$item.options({width: width});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function selectDocuments() {
|
||||
var selected = ui.documentsSelection[isItemView ? ui.item : ''] || [],
|
||||
|
|
@ -733,7 +788,7 @@ pandora.ui.documentsPanel = function(options) {
|
|||
$item.empty();
|
||||
if (selected.length) {
|
||||
$preview = renderPreview().appendTo($item);
|
||||
$form = renderForm().appendTo($item);
|
||||
$data = renderData().appendTo($item);
|
||||
}
|
||||
$itemStatus.html(
|
||||
selected.length
|
||||
|
|
|
|||
Loading…
Reference in a new issue