Drive/roundcubemail-plugins-kolab
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added folder creation form, other improvements/cleanups

Browse source
This commit is contained in:
Aleksander Machniak 2013-04-03 15:37:13 +02:00
parent daa307c6af
commit 00df84f76b
7 changed files with 140 additions and 130 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

116
plugins/kolab_files/kolab_files.js
View file

@ -93,6 +93,12 @@ window.rcmail && rcmail.addEventListener('init', function() {
}
});
/**********************************************************/
/********* Shared functionality **********/
/**********************************************************/
// Initializes API object
function kolab_files_init()
{
if (window.file_api)
@ -111,6 +117,7 @@ function kolab_files_init()
file_api.translations = rcmail.labels;
};
// returns API authorization token
function kolab_files_token()
{
// consider the token from parent window more reliable (fresher) than in framed window
@ -118,11 +125,7 @@ function kolab_files_token()
return (window.parent && parent.rcmail && parent.rcmail.env.files_token) || rcmail.env.files_token;
};
/**********************************************************/
/********* Plugin functionality in other tasks **********/
/**********************************************************/
// folder selection dialog
function kolab_directory_selector_dialog(id)
{
var dialog = $('#files-dialog'), buttons = {},
@ -157,10 +160,10 @@ function kolab_directory_selector_dialog(id)
}
rcmail.http_post('plugin.kolab_files', request, lock);
$('#files-dialog').dialog('destroy').hide();
dialog.dialog('destroy').hide();
};
buttons[rcmail.gettext('kolab_files.cancel')] = function () {
$('#files-dialog').dialog('destroy').hide();
dialog.dialog('destroy').hide();
};
// show dialog window
@ -183,6 +186,7 @@ function kolab_directory_selector_dialog(id)
}
};
// file selection dialog
function kolab_files_selector_dialog()
{
var dialog = $('#files-compose-dialog'), buttons = {};
@ -193,7 +197,7 @@ function kolab_files_selector_dialog()
list.push($(this).data('file'));
});
$('#files-compose-dialog').dialog('destroy').hide();
dialog.dialog('destroy').hide();
if (list.length) {
// display upload indicator and cancel button
@ -212,7 +216,7 @@ function kolab_files_selector_dialog()
}
};
buttons[rcmail.gettext('kolab_files.cancel')] = function () {
$('#files-compose-dialog').dialog('destroy').hide();
dialog.dialog('destroy').hide();
};
// show dialog window
@ -249,6 +253,94 @@ function kolab_files_attach_menu_open(p)
});
};
// folder creation dialog
function kolab_files_folder_create_dialog()
{
var dialog = $('#files-folder-create-dialog'),
buttons = {},
select = $('select[name="parent"]', dialog).html(''),
input = $('input[name="name"]', dialog).val('');
buttons[rcmail.gettext('kolab_files.create')] = function () {
var folder = '', name = input.val(), parent = select.val();
if (!name)
return;
if (parent)
folder = parent + file_api.env.directory_separator;
folder += name;
file_api.folder_create(folder);
dialog.dialog('destroy').hide();
};
buttons[rcmail.gettext('kolab_files.cancel')] = function () {
dialog.dialog('destroy').hide();
};
// show dialog window
dialog.dialog({
modal: true,
resizable: !bw.ie6,
closeOnEscape: (!bw.ie6 && !bw.ie7), // disable for performance reasons
title: rcmail.gettext('kolab_files.foldercreate'),
// close: function() { rcmail.dialog_close(); },
buttons: buttons,
minWidth: 400,
minHeight: 300,
width: 500,
height: 400
}).show();
// build parent selector
select.append($('<option>').val('').text('---'));
$.each(file_api.env.folders, function(i, f) {
var n, option = $('<option>'), name = escapeHTML(f.name);
for (n=0; n<f.depth; n++)
name = '&nbsp;&nbsp;&nbsp;' + name;
option.val(i).html(name).appendTo(select);
if (i == file_api.env.folder)
option.attr('selected', true);
});
};
// smart upload button
function kolab_files_upload_input(button)
{
var link = $(button),
file = $('<input>'),
offset = link.offset();
file.attr({name: 'file[]', type: 'file', multiple: 'multiple', size: 5})
.change(function() { rcmail.files_upload('#filesuploadform'); })
// opacity:0 does the trick, display/visibility doesn't work
.css({opacity: 0, cursor: 'pointer', outline: 'none', position: 'absolute', top: '10000px', left: '10000px'});
// In FF and IE we need to move the browser file-input's button under the cursor
// Thanks to the size attribute above we know the length of the input field
if (bw.mz || bw.ie)
file.css({marginLeft: '-80px'});
// Note: now, I observe problem with cursor style on FF < 4 only
link.css({overflow: 'hidden', cursor: 'pointer'})
// place button under the cursor
.mousemove(function(e) {
if (rcmail.commands['files-upload'])
file.css({top: (e.pageY - offset.top - 10) + 'px', left: (e.pageX - offset.left - 10) + 'px'});
// move the input away if button is disabled
else
$(this).mouseleave();
})
.mouseleave(function() { file.css({top: '10000px', left: '10000px'}); })
.attr('onclick', '') // remove default button action
.append(file);
};
/***********************************************************/
/********** Main functionality **********/
/***********************************************************/
@ -534,11 +626,11 @@ function kolab_files_ui()
row.addClass('virtual');
else
row.mouseenter(function() {
if (rcmail.file_list.drag_active)
if (rcmail.file_list && rcmail.file_list.drag_active)
$(this).addClass('droptarget');
})
.mouseleave(function() {
if (rcmail.file_list.drag_active)
if (rcmail.file_list && rcmail.file_list.drag_active)
$(this).removeClass('droptarget');
});
@ -658,7 +750,7 @@ function kolab_files_ui()
c = rcmail.env.coltypes[c];
if (c == 'name')
col = '<td class="name filename ' + file_api.file_type_class(data.type) + '">'
+ '<span>' + data.name + '</span></td>';
+ '<span>' + escapeHTML(data.name) + '</span></td>';
else if (c == 'mtime')
col = '<td class="mtime">' + data.mtime + '</td>';
else if (c == 'size')

30
plugins/kolab_files/lib/kolab_files_engine.php
View file

@ -91,14 +91,14 @@ class kolab_files_engine
$this->rc->output->set_env('files_url', $this->url . '/api/');
$this->rc->output->set_env('files_token', $this->get_api_token());
if ($this->rc->task != 'files') {
// register template objects for dialogs
// register template objects for dialogs (and main interface)
$this->rc->output->add_handlers(array(
'folder-create-form' => array($this, 'folder_create_form'),
'file-search-form' => array($this, 'file_search_form'),
'filelist' => array($this, 'file_list'),
));
if ($this->rc->task != 'files') {
// add dialog content at the end of page body
$this->rc->output->add_footer(
$this->rc->output->parse('kolab_files.' . $template, false, false));
@ -130,7 +130,7 @@ class kolab_files_engine
}
/**
* Template object for folder creation form in "Save as" dialog
* Template object for folder creation form
*/
public function folder_create_form($attrib)
{
@ -139,19 +139,23 @@ class kolab_files_engine
$attrib['id'] = 'folder-create-form';
}
$input_name = new html_inputfield(array('name' => 'folder_name'));
$out = $input_name->show();
$input_name = new html_inputfield(array('id' => 'folder-name', 'name' => 'name', 'size' => 30));
$select_parent = new html_select(array('id' => 'folder-parent', 'name' => 'parent'));
$table = new html_table(array('cols' => 2, 'class' => 'propform'));
// $input_parent = new html_checkbox(array('name' => 'folder_parent', 'checked' => true, 'value' => 1));
// $out .= html::label(null, $input_parent->show() . $this->plugin->gettext('assubfolder'));
$table->add('title', html::label('folder-name', Q($this->plugin->gettext('foldername'))));
$table->add(null, $input_name->show());
$table->add('title', html::label('folder-parent', Q($this->plugin->gettext('folderinside'))));
$table->add(null, $select_parent->show());
$out = $table->show();
// add form tag around text field
if (empty($attrib['form'])) {
$out = $this->rc->output->form_tag($attrib, $out);
}
$this->rc->output->add_label('kolab_files.foldercreating');
$this->rc->output->add_label('kolab_files.foldercreating', 'kolab_files.create');
$this->rc->output->add_gui_object('folder-create-form', $attrib['id']);
return $out;
@ -452,14 +456,6 @@ class kolab_files_engine
protected function action_index()
{
// register template objects
$this->rc->output->add_handlers(array(
// 'folderlist' => array($this, 'folder_list'),
'filelist' => array($this, 'file_list'),
'file-search-form' => array($this, 'file_search_form'),
));
$this->rc->output->add_label('deletefolderconfirm', 'kolab_files.folderdeleting',
'kolab_files.foldercreating', 'kolab_files.uploading', 'kolab_files.filedeleteconfirm',
'kolab_files.folderdeleteconfirm', 'kolab_files.filedeleting', 'kolab_files.filedeletenotice',

3
plugins/kolab_files/localization/en_US.inc
View file

@ -4,6 +4,7 @@ $labels['files'] = 'Files';
$labels['saveall'] = 'Save all to cloud...';
$labels['saveto'] = 'Save to cloud...';
$labels['saveas'] = 'Save as:';
$labels['create'] = 'Create';
$labels['save'] = 'Save';
$labels['cancel'] = 'Cancel';
$labels['fromcloud'] = 'From cloud...';
@ -13,6 +14,8 @@ $labels['foldercreate'] = 'Create folder';
$labels['folderrename'] = 'Rename folder';
$labels['folderdelete'] = 'Delete folder';
$labels['folderinside'] = 'Insert inside';
$labels['foldername'] = 'Folder name';
$labels['name'] = 'Name';
$labels['mtime'] = 'Modified';

16
plugins/kolab_files/skins/larry/style.css
View file

@ -188,7 +188,8 @@
/* plugin dialogs */
#files-dialog,
#files-compose-dialog {
#files-compose-dialog,
#files-folder-create-dialog {
display: none;
}
@ -222,19 +223,6 @@
box-shadow: none;
}
#files-folder-create {
background-color: white;
padding: 10px;
bottom: 10px;
left: 5px;
top: auto;
z-index: 1001; /* for use in modal dialog window */
}
#folder-create-form {
margin-bottom: 10px;
}
#files-compose-dialog #searchmenulink {
width: 15px;
}

11
plugins/kolab_files/skins/larry/templates/files.html
View file

@ -3,9 +3,6 @@
<head>
<title><roundcube:object name="pagetitle" /></title>
<roundcube:include file="/includes/links.html" />
<!--
<link rel="stylesheet" type="text/css" href="/settings.css" />
-->
<script src="plugins/kolab_files/skins/larry/ui.js" type="text/javascript"></script>
</head>
<body class="files noscroll">
@ -36,7 +33,7 @@
<div id="files-folder-list" class="scroller withfooter">
</div>
<div id="folderlist-footer" class="boxfooter">
<roundcube:button name="folder-create" type="link" title="kolab_files.foldercreate" class="listbutton add" classAct="listbutton add" innerClass="inner" content="+" onclick="kolab_files_folder_create()" /><roundcube:button name="folderoptions" id="folderoptionslink" type="link" title="moreactions" class="listbutton groupactions" onclick="UI.show_popup('folderoptions', undefined, {above: 1});return false" innerClass="inner" content="&#9881;" />
<roundcube:button name="folder-create" type="link" title="kolab_files.foldercreate" class="listbutton add" classAct="listbutton add" innerClass="inner" content="+" onclick="kolab_files_folder_create_dialog()" /><roundcube:button name="folderoptions" id="folderoptionslink" type="link" title="moreactions" class="listbutton groupactions" onclick="UI.show_popup('folderoptions', undefined, {above: 1});return false" innerClass="inner" content="&#9881;" />
</div>
</div>
@ -51,13 +48,19 @@
<div id="folderoptions" class="popupmenu">
<ul id="folderoptionsmenu" class="toolbarmenu">
<!--
<li><roundcube:button command="files-folder-edit" label="edit" classAct="active" /></li>
-->
<li><roundcube:button command="files-folder-delete" label="delete" classAct="active" /></li>
<li><roundcube:button command="folders" task="settings" type="link" label="managefolders" classAct="active" /></li>
<roundcube:container name="filesfolderoptions" id="folderoptionsmenu" />
</ul>
</div>
<div id="files-folder-create-dialog">
<roundcube:object name="folder-create-form" />
</div>
<div id="listoptions" class="propform popupdialog">
<roundcube:if condition="!in_array('kolab_files_list_cols', (array)config:dont_override)" />
<fieldset class="floating">

10
plugins/kolab_files/skins/larry/templates/message_plugin.html
View file

@ -6,13 +6,11 @@
<div id="folderlistbox" class="uibox listbox">
<div id="files-folder-list" class="scroller withfooter"></div>
<div id="folderlist-footer" class="boxfooter">
<roundcube:button name="foldercreatelink" id="foldercreatelink" type="link" onclick="kolab_files_folder_form()" title="createfolder" class="listbutton add" classAct="listbutton add" innerClass="inner" content="+" />
<roundcube:button name="foldercreatelink" id="foldercreatelink" type="link" onclick="kolab_files_folder_create_dialog()" title="createfolder" class="listbutton add" classAct="listbutton add" innerClass="inner" content="+" />
</div>
</div>
<div id="files-folder-create" class="popupmenu">
<roundcube:object name="folder-create-form" />
<input id="folder-create-save-button" onclick="kolab_directory_create()" type="button" class="button mainaction" value="<roundcube:label name="create" />">
<input id="folder-create-cancel-button" onclick="kolab_directory_cancel()" type="button" class="button" value="<roundcube:label name="cancel" />">
</div>
</div>
<div id="files-folder-create-dialog">
<roundcube:object name="folder-create-form" />
</div>
<script src="plugins/kolab_files/skins/larry/ui.js" type="text/javascript"></script>

70
plugins/kolab_files/skins/larry/ui.js
View file

@ -11,44 +11,6 @@ function kolab_files_ui_init()
kolab_files_upload_input('#filestoolbar a.upload');
};
function kolab_files_folder_form(link)
{
var form = $('#files-folder-create');
form.show();
$('form > input[name="folder_name"]', form).val('').focus();
};
function kolab_directory_create()
{
var folder = '',
form = $('#folder-create-form'),
name = $('input[name="folder_name"]', form).val(),
parent = file_api.env.folder;
// parent = $('input[name="folder_parent"]', form).is(':checked');
if (!name)
return;
if (parent && file_api.env.folder)
folder = file_api.env.folder + file_api.env.directory_separator;
folder += name;
kolab_directory_cancel();
file_api.folder_create(folder);
// todo: select created folder
};
function kolab_directory_cancel()
{
var form = $('#files-folder-create');
form.hide();
};
function kolab_files_show_listoptions()
{
var $dialog = $('#listoptions');
@ -92,35 +54,3 @@ function kolab_files_save_listoptions()
kolab_files_set_list_options(cols, sort, ord);
};
function kolab_files_upload_input(button)
{
var link = $(button),
file = $('<input>'),
offset = link.offset();
file.attr({name: 'file[]', type: 'file', multiple: 'multiple', size: 5})
.change(function() { rcmail.files_upload('#filesuploadform'); })
// opacity:0 does the trick, display/visibility doesn't work
.css({opacity: 0, cursor: 'pointer', outline: 'none', position: 'absolute', top: '10000px', left: '10000px'});
// In FF and IE we need to move the browser file-input's button under the cursor
// Thanks to the size attribute above we know the length of the input field
if (bw.mz || bw.ie)
file.css({marginLeft: '-80px'});
// Note: now, I observe problem with cursor style on FF < 4 only
link.css({overflow: 'hidden', cursor: 'pointer'})
// place button under the cursor
.mousemove(function(e) {
if (rcmail.commands['files-upload'])
file.css({top: (e.pageY - offset.top - 10) + 'px', left: (e.pageX - offset.left - 10) + 'px'});
// move the input away if button is disabled
else
$(this).mouseleave();
})
.mouseleave(function() { file.css({top: '10000px', left: '10000px'}); })
.attr('onclick', '') // remove default button action
.append(file);
};