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> * @author Thomas Bruederli <bruederli@kolabsys.com>
* *
* Copyright (C) 2010, Lazlo Westerhof <hello@lazlo.me> * 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 * This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as * 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.recurrence_form', array($this, 'recurrence_form'));
$this->cal->register_handler('plugin.attachments_form', array($this, 'attachments_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.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_list', array($this, 'attendees_list'));
$this->cal->register_handler('plugin.attendees_form', array($this, 'attendees_form')); $this->cal->register_handler('plugin.attendees_form', array($this, 'attendees_form'));
$this->cal->register_handler('plugin.attendees_freebusy_table', array($this, 'attendees_freebusy_table')); $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 * Generate HTML element for attachments list
*/ */

View file

@ -326,7 +326,7 @@ a.miniColors-trigger {
} }
#edit-attachments { #edit-attachments {
margin-top: 0.6em; margin: 0.6em 0;
} }
#edit-attachments ul li { #edit-attachments ul li {
@ -344,13 +344,38 @@ a.miniColors-trigger {
} }
#edit-attachments-form { #edit-attachments-form {
padding-top: 1.2em; margin-top: 1em;
padding-top: 0.8em;
border-top: 2px solid #fafafa;
} }
#edit-attachments-form .buttons { #edit-attachments-form .buttons {
margin: 0.5em 0; 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 { #event-attachments .attachmentslist li {
float: left; float: left;
margin-right: 1em; margin-right: 1em;
@ -857,7 +882,7 @@ a.dropdown-link:after {
} }
#eventedit .ui-tabs-panel { #eventedit .ui-tabs-panel {
min-height: 20em; min-height: 24em;
} }
.alarm-item { .alarm-item {

View file

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