Add support for HTML5 drag & drop attachment uploads

This commit is contained in:
Thomas Bruederli 2012-06-14 08:33:07 +02:00
parent c7c608a455
commit ce61543b9d
3 changed files with 42 additions and 4 deletions

View file

@ -7,7 +7,7 @@
* @author Thomas Bruederli <bruederli@kolabsys.com>
*
* Copyright (C) 2010, Lazlo Westerhof <hello@lazlo.me>
* Copyright (C) 2011, Kolab Systems AG <contact@kolabsys.com>
* Copyright (C) 2012, Kolab Systems AG <contact@kolabsys.com>
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
@ -82,6 +82,7 @@ class calendar_ui
$this->cal->register_handler('plugin.recurrence_form', array($this, 'recurrence_form'));
$this->cal->register_handler('plugin.attachments_form', array($this, 'attachments_form'));
$this->cal->register_handler('plugin.attachments_list', array($this, 'attachments_list'));
$this->cal->register_handler('plugin.filedroparea', array($this, 'file_drop_area'));
$this->cal->register_handler('plugin.attendees_list', array($this, 'attendees_list'));
$this->cal->register_handler('plugin.attendees_form', array($this, 'attendees_form'));
$this->cal->register_handler('plugin.attendees_freebusy_table', array($this, 'attendees_freebusy_table'));
@ -628,6 +629,17 @@ class calendar_ui
);
}
/**
* Register UI object for HTML5 drag & drop file upload
*/
function file_drop_area($attrib = array())
{
if ($attrib['id']) {
$this->rc->output->add_gui_object('filedrop', $attrib['id']);
$this->rc->output->set_env('filedrop', array('action' => 'upload', 'fieldname' => '_attachments'));
}
}
/**
* Generate HTML element for attachments list
*/

View file

@ -326,7 +326,7 @@ a.miniColors-trigger {
}
#edit-attachments {
margin-top: 0.6em;
margin: 0.6em 0;
}
#edit-attachments ul li {
@ -344,13 +344,38 @@ a.miniColors-trigger {
}
#edit-attachments-form {
padding-top: 1.2em;
margin-top: 1em;
padding-top: 0.8em;
border-top: 2px solid #fafafa;
}
#edit-attachments-form .buttons {
margin: 0.5em 0;
}
#eventedit .droptarget {
background-image: url(../../../../skins/larry/images/filedrop.png) !important;
background-position: center bottom !important;
background-repeat: no-repeat !important;
}
#eventedit .droptarget.hover,
#eventedit .droptarget.active {
border-color: #019bc6;
box-shadow: 0 0 3px 2px rgba(71,135,177, 0.5);
-moz-box-shadow: 0 0 3px 2px rgba(71,135,177, 0.5);
-webkit-box-shadow: 0 0 3px 2px rgba(71,135,177, 0.5);
-o-box-shadow: 0 0 3px 2px rgba(71,135,177, 0.5);
}
#eventedit .droptarget.hover {
background-color: #d9ecf4;
box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
-moz-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
-webkit-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
-o-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
}
#event-attachments .attachmentslist li {
float: left;
margin-right: 1em;
@ -857,7 +882,7 @@ a.dropdown-link:after {
}
#eventedit .ui-tabs-panel {
min-height: 20em;
min-height: 24em;
}
.alarm-item {

View file

@ -91,6 +91,7 @@
<div id="edit-attachments-form">
<roundcube:object name="plugin.attachments_form" id="calendar-attachment-form" attachmentFieldSize="30" />
</div>
<roundcube:object name="plugin.filedroparea" id="event-tab-4" />
</div>
</form>