refactor dialog creation
This commit is contained in:
parent
4af5a8c483
commit
49fd7e9f1e
|
@ -356,6 +356,9 @@ table.dragshadow td.size {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 85px;
|
height: 85px;
|
||||||
}
|
}
|
||||||
|
.oc-dialog .fileexists .conflict.template {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
.oc-dialog .fileexists .conflict .filename {
|
.oc-dialog .fileexists .conflict .filename {
|
||||||
color:#777;
|
color:#777;
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
|
@ -377,11 +380,11 @@ table.dragshadow td.size {
|
||||||
float: left;
|
float: left;
|
||||||
width: 235px;
|
width: 235px;
|
||||||
}
|
}
|
||||||
.oc-dialog .fileexists .conflict-wrapper {
|
.oc-dialog .fileexists .conflicts {
|
||||||
overflow-y:scroll;
|
overflow-y:scroll;
|
||||||
max-height: 225px;
|
max-height: 225px;
|
||||||
}
|
}
|
||||||
.oc-dialog .fileexists .conflict-wrapper input[type='checkbox'] {
|
.oc-dialog .fileexists .conflict input[type='checkbox'] {
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -579,13 +579,14 @@ $(document).ready(function(){
|
||||||
currentUploads += 1;
|
currentUploads += 1;
|
||||||
uploadtext.attr('currentUploads', currentUploads);
|
uploadtext.attr('currentUploads', currentUploads);
|
||||||
|
|
||||||
|
var translatedText = n('files', 'Uploading %n file', 'Uploading %n files', currentUploads);
|
||||||
if(currentUploads === 1) {
|
if(currentUploads === 1) {
|
||||||
var img = OC.imagePath('core', 'loading.gif');
|
var img = OC.imagePath('core', 'loading.gif');
|
||||||
data.context.find('td.filename').attr('style','background-image:url('+img+')');
|
data.context.find('td.filename').attr('style','background-image:url('+img+')');
|
||||||
uploadtext.text(t('files', '1 file uploading'));
|
uploadtext.text(translatedText);
|
||||||
uploadtext.show();
|
uploadtext.show();
|
||||||
} else {
|
} else {
|
||||||
uploadtext.text(currentUploads + ' ' + t('files', 'files uploading'));
|
uploadtext.text(translatedText);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -652,8 +653,9 @@ $(document).ready(function(){
|
||||||
// update file data
|
// update file data
|
||||||
data.context.attr('data-mime',file.mime).attr('data-id',file.id);
|
data.context.attr('data-mime',file.mime).attr('data-id',file.id);
|
||||||
|
|
||||||
getMimeIcon(file.mime, function(path){
|
var path = getPathForPreview(file.name);
|
||||||
data.context.find('td.filename').attr('style','background-image:url('+path+')');
|
lazyLoadPreview(path, file.mime, function(previewpath){
|
||||||
|
data.context.find('td.filename').attr('style','background-image:url('+previewpath+')');
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,26 @@
|
||||||
|
<div id="{dialog_name}" title="{title}" class="fileexists">
|
||||||
|
<span class="why">{why}<!-- Which files do you want to keep --></span><br/>
|
||||||
|
<span class="what">{what}<!-- If you select both versions, the copied file will have a number added to its name. --></span><br/>
|
||||||
|
<br/>
|
||||||
|
<table>
|
||||||
|
<th><label><input class="allnewfiles" type="checkbox" />New Files<span class="count"></span></label></th>
|
||||||
|
<th><label><input class="allexistingfiles" type="checkbox" />Already existing files<span class="count"></span></label></th>
|
||||||
|
</table>
|
||||||
|
<div class="conflicts">
|
||||||
|
<div class="conflict template">
|
||||||
|
<div class="filename"></div>
|
||||||
|
<div class="replacement">
|
||||||
|
<input type="checkbox" />
|
||||||
|
<span class="svg icon"></span>
|
||||||
|
<div class="mtime"></div>
|
||||||
|
<div class="size"></div>
|
||||||
|
</div>
|
||||||
|
<div class="original">
|
||||||
|
<input type="checkbox" />
|
||||||
|
<span class="svg icon"></span>
|
||||||
|
<div class="mtime"></div>
|
||||||
|
<div class="size"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
|
@ -220,28 +220,24 @@ var OCdialogs = {
|
||||||
*/
|
*/
|
||||||
fileexists:function(data, original, replacement, controller) {
|
fileexists:function(data, original, replacement, controller) {
|
||||||
var self = this;
|
var self = this;
|
||||||
var selection = controller.getSelection(data.originalFiles);
|
var addConflict = function(conflicts, original, replacement) {
|
||||||
if (selection.defaultAction) {
|
|
||||||
controller[selection.defaultAction](data);
|
var conflict = conflicts.find('.conflict.template').clone();
|
||||||
} else {
|
|
||||||
var dialog_name = 'oc-dialog-fileexists-content';
|
conflict.find('.filename').text(original.name);
|
||||||
var dialog_id = '#' + dialog_name;
|
|
||||||
if (this._fileexistsshown) {
|
|
||||||
// add row
|
|
||||||
var conflict = $(dialog_id+ ' .conflict').last().clone();
|
|
||||||
conflict.find('.name').text(original.name);
|
|
||||||
conflict.find('.original .size').text(humanFileSize(original.size));
|
conflict.find('.original .size').text(humanFileSize(original.size));
|
||||||
conflict.find('.original .mtime').text(formatDate(original.mtime*1000));
|
conflict.find('.original .mtime').text(formatDate(original.mtime*1000));
|
||||||
conflict.find('.replacement .size').text(humanFileSize(replacement.size));
|
conflict.find('.replacement .size').text(humanFileSize(replacement.size));
|
||||||
conflict.find('.replacement .mtime').text(formatDate(replacement.lastModifiedDate));
|
conflict.find('.replacement .mtime').text(formatDate(replacement.lastModifiedDate));
|
||||||
getMimeIcon(original.type,function(path){
|
var path = getPathForPreview(original.name);
|
||||||
conflict.find('.original .icon').css('background-image','url('+path+')');
|
lazyLoadPreview(path, original.type, function(previewpath){
|
||||||
|
conflict.find('.original .icon').css('background-image','url('+previewpath+')');
|
||||||
});
|
});
|
||||||
getMimeIcon(replacement.type,function(path){
|
getMimeIcon(replacement.type,function(path){
|
||||||
conflict.find('.replacement .icon').css('background-image','url('+path+')');
|
conflict.find('.replacement .icon').css('background-image','url('+path+')');
|
||||||
});
|
});
|
||||||
$(dialog_id+' .conflict').last().after(conflict);
|
conflict.removeClass('template');
|
||||||
$(dialog_id).parent().children('.oc-dialog-title').text(t('files','{count} file conflicts',{count:$(dialog_id+ ' .conflict').length}));
|
conflicts.append(conflict);
|
||||||
|
|
||||||
//set more recent mtime bold
|
//set more recent mtime bold
|
||||||
if (replacement.lastModifiedDate.getTime() > original.mtime*1000) {
|
if (replacement.lastModifiedDate.getTime() > original.mtime*1000) {
|
||||||
|
@ -249,7 +245,7 @@ var OCdialogs = {
|
||||||
} else if (replacement.lastModifiedDate.getTime() < original.mtime*1000) {
|
} else if (replacement.lastModifiedDate.getTime() < original.mtime*1000) {
|
||||||
conflict.find('.original .mtime').css('font-weight', 'bold');
|
conflict.find('.original .mtime').css('font-weight', 'bold');
|
||||||
} else {
|
} else {
|
||||||
//TODO add to same mtime colletion?
|
//TODO add to same mtime collection?
|
||||||
}
|
}
|
||||||
|
|
||||||
// set bigger size bold
|
// set bigger size bold
|
||||||
|
@ -258,7 +254,7 @@ var OCdialogs = {
|
||||||
} else if (replacement.size < original.size) {
|
} else if (replacement.size < original.size) {
|
||||||
conflict.find('.original .size').css('font-weight', 'bold');
|
conflict.find('.original .size').css('font-weight', 'bold');
|
||||||
} else {
|
} else {
|
||||||
//TODO add to same size colletion?
|
//TODO add to same size collection?
|
||||||
}
|
}
|
||||||
|
|
||||||
//add checkbox toggling actions
|
//add checkbox toggling actions
|
||||||
|
@ -269,50 +265,42 @@ var OCdialogs = {
|
||||||
|
|
||||||
//TODO show skip action for files with same size and mtime
|
//TODO show skip action for files with same size and mtime
|
||||||
|
|
||||||
|
};
|
||||||
|
var selection = controller.getSelection(data.originalFiles);
|
||||||
|
if (selection.defaultAction) {
|
||||||
|
controller[selection.defaultAction](data);
|
||||||
|
} else {
|
||||||
|
var dialog_name = 'oc-dialog-fileexists-content';
|
||||||
|
var dialog_id = '#' + dialog_name;
|
||||||
|
if (this._fileexistsshown) {
|
||||||
|
// add conflict
|
||||||
|
|
||||||
|
var conflicts = $(dialog_id+ ' .conflicts');
|
||||||
|
addConflict(conflicts, original, replacement);
|
||||||
|
|
||||||
|
var title = t('files','{count} file conflicts',{count:$(dialog_id+ ' .conflict:not(.template)').length});
|
||||||
|
$(dialog_id).parent().children('.oc-dialog-title').text(title);
|
||||||
|
|
||||||
|
//recalculate dimensions
|
||||||
$(window).trigger('resize');
|
$(window).trigger('resize');
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
//create dialog
|
//create dialog
|
||||||
this._fileexistsshown = true;
|
this._fileexistsshown = true;
|
||||||
$.when(this._getFileExistsTemplate()).then(function($tmpl) {
|
$.when(this._getFileExistsTemplate()).then(function($tmpl) {
|
||||||
var title = t('files','One file conflict');
|
var title = t('files','One file conflict');
|
||||||
var original_size = humanFileSize(original.size);
|
|
||||||
var original_mtime = formatDate(original.mtime*1000);
|
|
||||||
var replacement_size= humanFileSize(replacement.size);
|
|
||||||
var replacement_mtime = formatDate(replacement.lastModifiedDate);
|
|
||||||
var $dlg = $tmpl.octemplate({
|
var $dlg = $tmpl.octemplate({
|
||||||
dialog_name: dialog_name,
|
dialog_name: dialog_name,
|
||||||
title: title,
|
title: title,
|
||||||
type: 'fileexists',
|
type: 'fileexists',
|
||||||
|
|
||||||
why: t('files','Which files do you want to keep?'),
|
why: t('files','Which files do you want to keep?'),
|
||||||
what: t('files','If you select both versions, the copied file will have a number added to its name.'),
|
what: t('files','If you select both versions, the copied file will have a number added to its name.')
|
||||||
filename: original.name,
|
|
||||||
|
|
||||||
original_size: original_size,
|
|
||||||
original_mtime: original_mtime,
|
|
||||||
|
|
||||||
replacement_size: replacement_size,
|
|
||||||
replacement_mtime: replacement_mtime
|
|
||||||
});
|
});
|
||||||
$('body').append($dlg);
|
$('body').append($dlg);
|
||||||
|
|
||||||
getMimeIcon(original.type,function(path){
|
var conflicts = $($dlg).find('.conflicts');
|
||||||
$(dialog_id + ' .original .icon').css('background-image','url('+path+')');
|
addConflict(conflicts, original, replacement);
|
||||||
});
|
|
||||||
getMimeIcon(replacement.type,function(path){
|
|
||||||
$(dialog_id + ' .replacement .icon').css('background-image','url('+path+')');
|
|
||||||
});
|
|
||||||
$(dialog_id + ' #newname').val(original.name);
|
|
||||||
|
|
||||||
$(dialog_id + ' #newname').on('keyup', function(e){
|
|
||||||
if ($(dialog_id + ' #newname').val() === original.name) {
|
|
||||||
$(dialog_id + ' + div .rename').removeClass('primary').hide();
|
|
||||||
$(dialog_id + ' + div .replace').addClass('primary').show();
|
|
||||||
} else {
|
|
||||||
$(dialog_id + ' + div .rename').addClass('primary').show();
|
|
||||||
$(dialog_id + ' + div .replace').removeClass('primary').hide();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
buttonlist = [{
|
buttonlist = [{
|
||||||
text: t('core', 'Cancel'),
|
text: t('core', 'Cancel'),
|
||||||
|
@ -346,57 +334,27 @@ var OCdialogs = {
|
||||||
closeButton: null
|
closeButton: null
|
||||||
});
|
});
|
||||||
|
|
||||||
$(dialog_id + ' + div .rename').hide();
|
|
||||||
$(dialog_id + ' #newname').hide();
|
|
||||||
|
|
||||||
$(dialog_id + ' #newnamecb').on('change', function(){
|
|
||||||
if ($(dialog_id + ' #newnamecb').prop('checked')) {
|
|
||||||
$(dialog_id + ' #newname').fadeIn();
|
|
||||||
} else {
|
|
||||||
$(dialog_id + ' #newname').fadeOut();
|
|
||||||
$(dialog_id + ' #newname').val(original.name);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
$(dialog_id).css('height','auto');
|
$(dialog_id).css('height','auto');
|
||||||
|
|
||||||
var conflict = $(dialog_id + ' .conflict').last();
|
|
||||||
//set more recent mtime bold
|
|
||||||
if (replacement.lastModifiedDate.getTime() > original.mtime*1000) {
|
|
||||||
conflict.find('.replacement .mtime').css('font-weight','bold');
|
|
||||||
} else if (replacement.lastModifiedDate.getTime() < original.mtime*1000) {
|
|
||||||
conflict.find('.original .mtime').css('font-weight','bold');
|
|
||||||
} else {
|
|
||||||
//TODO add to same mtime colletion?
|
|
||||||
}
|
|
||||||
|
|
||||||
// set bigger size bold
|
|
||||||
if (replacement.size > original.size) {
|
|
||||||
conflict.find('.replacement .size').css('font-weight','bold');
|
|
||||||
} else if (replacement.size < original.size) {
|
|
||||||
conflict.find('.original .size').css('font-weight','bold');
|
|
||||||
} else {
|
|
||||||
//TODO add to same size colletion?
|
|
||||||
}
|
|
||||||
|
|
||||||
//add checkbox toggling actions
|
|
||||||
//add checkbox toggling actions
|
//add checkbox toggling actions
|
||||||
$(dialog_id).find('.allnewfiles').on('click', function() {
|
$(dialog_id).find('.allnewfiles').on('click', function() {
|
||||||
var checkboxes = $(dialog_id).find('.replacement input[type="checkbox"]');
|
var checkboxes = $(dialog_id).find('.conflict:not(.template) .replacement input[type="checkbox"]');
|
||||||
checkboxes.prop('checked', $(this).prop('checked'));
|
checkboxes.prop('checked', $(this).prop('checked'));
|
||||||
});
|
});
|
||||||
$(dialog_id).find('.allexistingfiles').on('click', function() {
|
$(dialog_id).find('.allexistingfiles').on('click', function() {
|
||||||
var checkboxes = $(dialog_id).find('.original input[type="checkbox"]');
|
var checkboxes = $(dialog_id).find('.conflict:not(.template) .original input[type="checkbox"]');
|
||||||
checkboxes.prop('checked', $(this).prop('checked'));
|
checkboxes.prop('checked', $(this).prop('checked'));
|
||||||
});
|
});
|
||||||
conflict.find('.replacement,.original').on('click', function(){
|
|
||||||
|
$(dialog_id).find('.conflicts').on('click', '.replacement,.original', function() {
|
||||||
var checkbox = $(this).find('input[type="checkbox"]');
|
var checkbox = $(this).find('input[type="checkbox"]');
|
||||||
checkbox.prop('checked', !checkbox.prop('checked'));
|
checkbox.prop('checked', !checkbox.prop('checked'));
|
||||||
});
|
});
|
||||||
|
|
||||||
//update counters
|
//update counters
|
||||||
$(dialog_id).on('click', '.replacement,.allnewfiles', function() {
|
$(dialog_id).on('click', '.replacement,.allnewfiles', function() {
|
||||||
var count = $(dialog_id).find('.replacement input[type="checkbox"]:checked').length;
|
var count = $(dialog_id).find('.conflict:not(.template) .replacement input[type="checkbox"]:checked').length;
|
||||||
if (count === $(dialog_id+ ' .conflict').length) {
|
if (count === $(dialog_id+ ' .conflict:not(.template)').length) {
|
||||||
$(dialog_id).find('.allnewfiles').prop('checked', true);
|
$(dialog_id).find('.allnewfiles').prop('checked', true);
|
||||||
$(dialog_id).find('.allnewfiles + .count').text(t('files','(all selected)'));
|
$(dialog_id).find('.allnewfiles + .count').text(t('files','(all selected)'));
|
||||||
} else if (count > 0) {
|
} else if (count > 0) {
|
||||||
|
@ -408,8 +366,8 @@ var OCdialogs = {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
$(dialog_id).on('click', '.original,.allexistingfiles', function(){
|
$(dialog_id).on('click', '.original,.allexistingfiles', function(){
|
||||||
var count = $(dialog_id).find('.original input[type="checkbox"]:checked').length;
|
var count = $(dialog_id).find('.conflict:not(.template) .original input[type="checkbox"]:checked').length;
|
||||||
if (count === $(dialog_id+ ' .conflict').length) {
|
if (count === $(dialog_id+ ' .conflict:not(.template)').length) {
|
||||||
$(dialog_id).find('.allexistingfiles').prop('checked', true);
|
$(dialog_id).find('.allexistingfiles').prop('checked', true);
|
||||||
$(dialog_id).find('.allexistingfiles + .count').text(t('files','(all selected)'));
|
$(dialog_id).find('.allexistingfiles + .count').text(t('files','(all selected)'));
|
||||||
} else if (count > 0) {
|
} else if (count > 0) {
|
||||||
|
|
Loading…
Reference in New Issue