From 11ad89c586d289cf9a16c0d50d8a4647290fd29f Mon Sep 17 00:00:00 2001
From: Aleksander Machniak <machniak@kolabsys.com>
Date: Thu, 22 Mar 2018 12:38:43 +0000
Subject: [PATCH] Elastic: Task (and event) edit dialog

---
 plugins/calendar/calendar.php                 |   2 +-
 plugins/calendar/calendar_ui.js               |   4 +-
 plugins/calendar/lib/calendar_ui.php          |   4 +-
 .../skins/elastic/templates/eventedit.html    |   6 +-
 plugins/kolab_notes/kolab_notes.php           |   2 +-
 plugins/libcalendaring/libcalendaring.js      |  52 ++--
 plugins/libcalendaring/libcalendaring.php     |  87 +++---
 plugins/libcalendaring/localization/en_US.inc |   6 +-
 .../skins/elastic/include/calendar.less       |  18 ++
 .../skins/elastic/include/kolab_notes.less    |  14 +-
 .../skins/elastic/include/libcalendaring.less | 247 +++++++++++++++++-
 .../skins/elastic/include/tasklist.less       |  16 ++
 plugins/tasklist/localization/en_US.inc       |   4 +-
 .../skins/elastic/templates/dialog.html       |   7 +
 .../skins/elastic/templates/mainview.html     |   6 +-
 .../skins/elastic/templates/taskedit.html     |  15 +-
 plugins/tasklist/skins/larry/tasklist.css     |  16 +-
 .../skins/larry/templates/dialog.html         |  26 ++
 .../skins/larry/templates/taskedit.html       |   3 +-
 plugins/tasklist/tasklist.js                  |  93 ++++---
 plugins/tasklist/tasklist.php                 |  83 ++----
 plugins/tasklist/tasklist_base.js             |  85 +++---
 plugins/tasklist/tasklist_ui.php              |  20 +-
 23 files changed, 551 insertions(+), 265 deletions(-)
 create mode 100644 plugins/tasklist/skins/elastic/templates/dialog.html
 create mode 100644 plugins/tasklist/skins/larry/templates/dialog.html

diff --git a/plugins/calendar/calendar.php b/plugins/calendar/calendar.php
index 1f008023..f8d35e41 100644
--- a/plugins/calendar/calendar.php
+++ b/plugins/calendar/calendar.php
@@ -189,7 +189,7 @@ class calendar extends rcube_plugin
       }
 
       // add 'Create event' item to message menu
-      if ($this->api->output->type == 'html') {
+      if ($this->api->output->type == 'html' && $_GET['_rel'] != 'event') {
         $this->api->add_content(html::tag('li', null, 
           $this->api->output->button(array(
             'command'  => 'calendar-create-from-mail',
diff --git a/plugins/calendar/calendar_ui.js b/plugins/calendar/calendar_ui.js
index 966dc448..ee07ba8a 100644
--- a/plugins/calendar/calendar_ui.js
+++ b/plugins/calendar/calendar_ui.js
@@ -1860,8 +1860,8 @@ function rcube_calendar_ui(settings)
       select += '</select>';
 
       // delete icon
-      var icon = rcmail.env.deleteicon ? '<img src="' + rcmail.env.deleteicon + '" alt="" />' : rcmail.gettext('delete');
-      var dellink = '<a href="#delete" class="iconlink delete deletelink" title="' + Q(rcmail.gettext('delete')) + '">' + icon + '</a>';
+      var icon = rcmail.env.deleteicon ? '<img src="' + rcmail.env.deleteicon + '" alt="" />' : '<span class="inner">' + Q(rcmail.gettext('delete')) + '</span>';
+      var dellink = '<a href="#delete" class="iconlink icon button delete deletelink" title="' + Q(rcmail.gettext('delete')) + '">' + icon + '</a>';
       var tooltip = '', status = (data.status || '').toLowerCase(),
         status_label = rcmail.gettext('status' + status, 'libcalendaring');
 
diff --git a/plugins/calendar/lib/calendar_ui.php b/plugins/calendar/lib/calendar_ui.php
index 54e20a61..85357dd6 100644
--- a/plugins/calendar/lib/calendar_ui.php
+++ b/plugins/calendar/lib/calendar_ui.php
@@ -680,7 +680,7 @@ class calendar_ui
     $table->add_header('confirmstate', $this->cal->gettext('confirmstate'));
     if ($invitations) {
       $table->add_header(array('class' => 'invite', 'title' => $this->cal->gettext('sendinvitations')),
-        $invite->show(1) . html::label('edit-attendees-invite', $this->cal->gettext('sendinvitations')));
+        $invite->show(1) . html::label('edit-attendees-invite', html::span('inner', $this->cal->gettext('sendinvitations'))));
     }
     $table->add_header('options', '');
 
@@ -707,7 +707,7 @@ class calendar_ui
       html::div('form-searchbar', $input->show() . " " .
         html::tag('input', array('type' => 'button', 'class' => 'button', 'id' => 'edit-attendee-add', 'value' => $this->cal->gettext('addattendee'))) . " " .
         html::tag('input', array('type' => 'button', 'class' => 'button', 'id' => 'edit-attendee-schedule', 'value' => $this->cal->gettext('scheduletime').'...'))) .
-      html::p('attendees-commentbox', html::label(null, $this->cal->gettext('itipcomment') . $textarea->show()))
+      html::p('attendees-commentbox', html::label('edit-attendees-comment', $this->cal->gettext('itipcomment')) . $textarea->show())
     );
   }
 
diff --git a/plugins/calendar/skins/elastic/templates/eventedit.html b/plugins/calendar/skins/elastic/templates/eventedit.html
index 3b784bcf..4d6fb88d 100644
--- a/plugins/calendar/skins/elastic/templates/eventedit.html
+++ b/plugins/calendar/skins/elastic/templates/eventedit.html
@@ -32,12 +32,12 @@
 			</div>
 			<div class="form-group row" id="edit-alarms">
 				<label for="edit-alarm-item" class="col-sm-2 col-form-label"><roundcube:label name="calendar.alarms" /></label>
-				<div class="col-sm-10">
+				<div class="col-sm-10 alarms-input">
 					<div class="edit-alarm-item first">
 						<roundcube:object name="plugin.alarm_select" id="edit-alarm-item" />
 						<span class="edit-alarm-buttons">
-							<a href="#add" class="iconbutton add add-alarm"><roundcube:label name="libcalendaring.addalarm" /></a>
-							<a href="#delete" class="iconbutton remove delete-alarm"><roundcube:label name="libcalendaring.removealarm" /></a>
+							<a href="#add" class="icon button btn create add-alarm"><span class="inner"><roundcube:label name="libcalendaring.addalarm" /></span></a>
+							<a href="#delete" class="icon button btn delete delete-alarm"><span class="inner"><roundcube:label name="libcalendaring.removealarm" /></span></a>
 						</span>
 					</div>
 				</div>
diff --git a/plugins/kolab_notes/kolab_notes.php b/plugins/kolab_notes/kolab_notes.php
index 792dbc7b..3a7669af 100644
--- a/plugins/kolab_notes/kolab_notes.php
+++ b/plugins/kolab_notes/kolab_notes.php
@@ -1253,7 +1253,7 @@ class kolab_notes extends rcube_plugin
         // prepend note links to message body
         if ($html) {
             $this->load_ui();
-            $args['content'] = html::div('kolabmessagenotes boxinformation noicon', $html) . $args['content'];
+            $args['content'] = html::div('kolabmessagenotes boxinformation', $html) . $args['content'];
         }
 
         return $args;
diff --git a/plugins/libcalendaring/libcalendaring.js b/plugins/libcalendaring/libcalendaring.js
index 95e18bc4..48cba75d 100644
--- a/plugins/libcalendaring/libcalendaring.js
+++ b/plugins/libcalendaring/libcalendaring.js
@@ -399,13 +399,6 @@ function rcube_libcalendaring(settings)
         $(prefix+' .edit-alarm-date').removeClass('hasDatepicker').removeAttr('id').datepicker(datepicker_settings);
         this.init_time_autocomplete($(prefix+' .edit-alarm-time')[0], {});
 
-        $(prefix).on('click', 'a.delete-alarm', function(e){
-            if ($(this).closest('.edit-alarm-item').siblings().length > 0) {
-                $(this).closest('.edit-alarm-item').remove();
-            }
-            return false;
-        });
-
         // set a unique id attribute and set label reference accordingly
         if ((index || 0) > 0 && dom_id) {
             dom_id += ':' + (new Date().getTime());
@@ -413,16 +406,27 @@ function rcube_libcalendaring(settings)
             $(prefix+' label:first').attr('for', dom_id);
         }
 
-        $(prefix).on('click', 'a.add-alarm', function(e){
-            var i = $(this).closest('.edit-alarm-item').siblings().length + 1;
-            var item = $(this).closest('.edit-alarm-item').clone(false)
-              .removeClass('first')
-              .appendTo(prefix);
+        if (index)
+            return;
 
-              me.init_alarms_edit(prefix + ' .edit-alarm-item:eq(' + i + ')', i);
-              $('select.edit-alarm-type, select.edit-alarm-offset', item).change();
-              return false;
-        });
+        $(prefix)
+            .on('click', 'a.delete-alarm', function(e){
+                if ($(this).closest('.edit-alarm-item').siblings().length > 0) {
+                    $(this).closest('.edit-alarm-item').remove();
+                }
+                return false;
+            })
+            .on('click', 'a.add-alarm', function(e) {
+                var orig = $(this).closest('.edit-alarm-item'),
+                    i = orig.siblings().length + 1,
+                    item = orig.clone(false)
+                      .removeClass('first')
+                      .appendTo(orig.parent());
+
+                  me.init_alarms_edit(prefix + ' .edit-alarm-item:eq(' + i + ')', i);
+                  $('select.edit-alarm-type, select.edit-alarm-offset', item).change();
+                  return false;
+            });
     }
 
     this.set_alarms_edit = function(prefix, valarms)
@@ -942,10 +946,8 @@ function rcube_libcalendaring(settings)
             .html('<span>' + Q(this.format_datetime(date, 1)) + '</span>')
             .appendTo('#edit-recurrence-rdates');
 
-        $('<a>').attr('href', '#del')
-            .addClass('iconbutton delete')
-            .html(rcmail.get_label('delete', 'libcalendaring'))
-            .attr('title', rcmail.get_label('delete', 'libcalendaring'))
+        $('<a>').attr({href: '#del', 'class': 'iconbutton delete icon button', title: rcmail.get_label('delete', 'libcalendaring')})
+            .append($('<span class="inner">').text(rcmail.get_label('delete', 'libcalendaring')))
             .appendTo(li);
     };
 
@@ -1033,8 +1035,7 @@ function rcube_libcalendaring(settings)
             var li = $('<li>').addClass('link')
                 .addClass('message eml')
                 .append($('<a>')
-                    .attr('href', link.mailurl)
-                    .addClass('messagelink')
+                    .attr({href: link.mailurl, 'class': 'messagelink'})
                     .text(link.subject || link.uri)
                 )
                 .appendTo(ul);
@@ -1042,11 +1043,8 @@ function rcube_libcalendaring(settings)
             // add icon to remove the link
             if (edit) {
                 $('<a>')
-                    .attr('href', '#delete')
-                    .attr('title', rcmail.gettext('removelink', plugin))
-                    .attr('data-uri', link.uri)
-                    .addClass('delete')
-                    .text(rcmail.gettext('delete'))
+                    .attr({href: '#delete', title: rcmail.gettext('removelink', plugin), 'data-uri': link.uri, 'class': 'delete'})
+                    .append($('<span class="inner">').text(rcmail.gettext('delete')))
                     .appendTo(li);
             }
         });
diff --git a/plugins/libcalendaring/libcalendaring.php b/plugins/libcalendaring/libcalendaring.php
index b2297e00..8cce1f2d 100644
--- a/plugins/libcalendaring/libcalendaring.php
+++ b/plugins/libcalendaring/libcalendaring.php
@@ -344,9 +344,9 @@ class libcalendaring extends rcube_plugin
     {
         unset($attrib['name']);
 
-        $input_value = new html_inputfield(array('name' => 'alarmvalue[]', 'class' => 'edit-alarm-value form-control', 'size' => 3));
-        $input_date  = new html_inputfield(array('name' => 'alarmdate[]', 'class' => 'edit-alarm-date form-control', 'size' => 10));
-        $input_time  = new html_inputfield(array('name' => 'alarmtime[]', 'class' => 'edit-alarm-time form-control', 'size' => 6));
+        $input_value    = new html_inputfield(array('name' => 'alarmvalue[]', 'class' => 'edit-alarm-value form-control input-group-prepend', 'size' => 3));
+        $input_date     = new html_inputfield(array('name' => 'alarmdate[]', 'class' => 'edit-alarm-date form-control', 'size' => 10));
+        $input_time     = new html_inputfield(array('name' => 'alarmtime[]', 'class' => 'edit-alarm-time form-control', 'size' => 6));
         $select_type    = new html_select(array('name' => 'alarmtype[]', 'class' => 'edit-alarm-type form-control', 'id' => $attrib['id']));
         $select_offset  = new html_select(array('name' => 'alarmoffset[]', 'class' => 'edit-alarm-offset form-control'));
         $select_related = new html_select(array('name' => 'alarmrelated[]', 'class' => 'edit-alarm-related form-control'));
@@ -369,9 +369,10 @@ class libcalendaring extends rcube_plugin
         // pre-set with default values from user settings
         $preset = self::parse_alarm_value($this->rc->config->get('calendar_default_alarm_offset', '-15M'));
         $hidden = array('style' => 'display:none');
-        $html = html::span('edit-alarm-set',
+
+        return html::span('edit-alarm-set',
             $select_type->show($this->rc->config->get('calendar_default_alarm_type', '')) . ' ' .
-            html::span(array('class' => 'edit-alarm-values', 'style' => 'display:none'),
+            html::span(array('class' => 'edit-alarm-values input-group', 'style' => 'display:none'),
                 $input_value->show($preset[0]) . ' ' .
                 $select_offset->show($preset[1]) . ' ' .
                 $select_related->show() . ' ' .
@@ -379,12 +380,6 @@ class libcalendaring extends rcube_plugin
                 $input_time->show('', $hidden)
             )
         );
-
-        // TODO: support adding more alarms
-        #$html .= html::a(array('href' => '#', 'id' => 'edit-alam-add', 'title' => $this->gettext('addalarm')),
-        #  $attrib['addicon'] ? html::img(array('src' => $attrib['addicon'], 'alt' => 'add')) : '(+)');
-
-        return $html;
     }
 
     /**
@@ -869,15 +864,15 @@ class libcalendaring extends rcube_plugin
             // daily recurrence
             case 'daily':
                 $select = $this->interval_selector(array('name' => 'interval', 'class' => 'edit-recurrence-interval form-control', 'id' => 'edit-recurrence-interval-daily'));
-                $html = html::div($attrib, html::label(array('for' => 'edit-recurrence-interval-daily', 'class' => 'col-form-label col-sm-2'),
-                    $this->gettext('every')) . html::div('col-sm-10', $select->show(1) . html::span('label-after', $this->gettext('days'))));
+                $html = html::div($attrib, html::label(array('for' => 'edit-recurrence-interval-daily', 'class' => 'col-form-label col-sm-2'), $this->gettext('every'))
+                    . html::div('col-sm-10 input-group', $select->show(1) . html::span('label-after input-group-append', html::span('input-group-text', $this->gettext('days')))));
                 break;
 
             // weekly recurrence form
             case 'weekly':
                 $select = $this->interval_selector(array('name' => 'interval', 'class' => 'edit-recurrence-interval form-control', 'id' => 'edit-recurrence-interval-weekly'));
-                $html = html::div($attrib, html::label(array('for' => 'edit-recurrence-interval-weekly', 'class' => 'col-form-label col-sm-2'),
-                    $this->gettext('every')) . html::div('col-sm-10', $select->show(1) . html::span('label-after', $this->gettext('weeks'))));
+                $html = html::div($attrib, html::label(array('for' => 'edit-recurrence-interval-weekly', 'class' => 'col-form-label col-sm-2'), $this->gettext('every'))
+                    . html::div('col-sm-10 input-group', $select->show(1) . html::span('label-after input-group-append', html::span('input-group-text', $this->gettext('weeks')))));
 
                 // weekday selection
                 $daymap   = array('sun','mon','tue','wed','thu','fri','sat');
@@ -893,14 +888,14 @@ class libcalendaring extends rcube_plugin
                 }
 
                 $html .= html::div($attrib, html::label(array('class' => 'col-form-label col-sm-2'), $this->gettext('bydays'))
-                    . html::div('col-sm-10', $weekdays));
+                    . html::div('col-sm-10 form-control-plaintext', $weekdays));
                 break;
 
             // monthly recurrence form
             case 'monthly':
                 $select = $this->interval_selector(array('name' => 'interval', 'class' => 'edit-recurrence-interval form-control', 'id' => 'edit-recurrence-interval-monthly'));
                 $html = html::div($attrib, html::label(array('for' => 'edit-recurrence-interval-monthly', 'class' => 'col-form-label col-sm-2'), $this->gettext('every'))
-                    . html::div('col-sm-10', $select->show(1) . html::span('label-after', $this->gettext('months'))));
+                    . html::div('col-sm-10 input-group', $select->show(1) . html::span('label-after input-group-append', html::span('input-group-text', $this->gettext('months')))));
 
                 $checkbox = new html_checkbox(array('name' => 'bymonthday', 'class' => 'edit-recurrence-monthly-bymonthday'));
                 for ($monthdays = '', $d = 1; $d <= 31; $d++) {
@@ -913,17 +908,18 @@ class libcalendaring extends rcube_plugin
                 $table = new html_table(array('cols' => 2, 'border' => 0, 'cellpadding' => 0, 'class' => 'formtable'));
                 $table->add('label', html::label(null, $radio->show('BYMONTHDAY', array('value' => 'BYMONTHDAY')) . ' ' . $this->gettext('each')));
                 $table->add(null, $monthdays);
-                $table->add('label', html::label(null, $radio->show('', array('value' => 'BYDAY')) . ' ' . $this->gettext('onevery')));
-                $table->add(null, $this->rrule_selectors($attrib['part']));
+                $table->add('label', html::label(null, $radio->show('', array('value' => 'BYDAY')) . ' ' . $this->gettext('every')));
+                $table->add('recurrence-onevery', $this->rrule_selectors($attrib['part']));
 
-                $html .= html::div($attrib, $table->show());
+                $html .= html::div($attrib, html::label(array('class' => 'col-form-label col-sm-2'), $this->gettext('bydays'))
+                    . html::div('col-sm-10 form-control-plaintext', $table->show()));
                 break;
 
             // annually recurrence form
             case 'yearly':
                 $select = $this->interval_selector(array('name' => 'interval', 'class' => 'edit-recurrence-interval form-control', 'id' => 'edit-recurrence-interval-yearly'));
                 $html = html::div($attrib, html::label(array('for' => 'edit-recurrence-interval-yearly', 'class' => 'col-form-label col-sm-2'), $this->gettext('every'))
-                    . html::div('col-sm-10', $select->show(1) . html::span('label-after', $this->gettext('years'))));
+                    . html::div('col-sm-10 input-group', $select->show(1) . html::span('label-after input-group-append', html::span('input-group-text', $this->gettext('years')))));
 
                 // month selector
                 $monthmap = array('','jan','feb','mar','apr','may','jun','jul','aug','sep','oct','nov','dec');
@@ -934,11 +930,11 @@ class libcalendaring extends rcube_plugin
                     $months .= $m % 4 ? ' ' : html::br();
                 }
 
-                $html .= html::div($attrib + array('id' => 'edit-recurrence-yearly-bymonthblock'), $months);
-
-                // day rule selection
-                $html .= html::div($attrib, html::label(array('col-form-label col-sm-2'), $this->gettext('onevery'))
-                    . html::div('col-sm-10', $this->rrule_selectors($attrib['part'], '---')));
+                $html .= html::div($attrib, html::label(array('class' => 'col-form-label col-sm-2'), $this->gettext('bymonths'))
+                    . html::div('col-sm-10 form-control-plaintext',
+                        html::div(array('id' => 'edit-recurrence-yearly-bymonthblock'), $months)
+                        . html::div('recurrence-onevery', $this->rrule_selectors($attrib['part'], '---'))
+                    ));
                 break;
 
             // end of recurrence form
@@ -948,32 +944,45 @@ class libcalendaring extends rcube_plugin
                 $input  = new html_inputfield(array('name' => 'untildate', 'id' => 'edit-recurrence-enddate', 'size' => "10", 'class' => 'form-control'));
 
                 $html = html::div('line first',
-                    html::label(null, $radio->show('', array('value' => '', 'id' => 'edit-recurrence-repeat-forever')) . ' ' .
-                        $this->gettext('forever'))
+                    $radio->show('', array('value' => '', 'id' => 'edit-recurrence-repeat-forever'))
+                        . ' ' . html::label('edit-recurrence-repeat-forever', $this->gettext('forever'))
                 );
 
-                $forntimes = $this->gettext(array(
-                    'name' => 'forntimes',
-                    'vars' => array('nr' => '%s'))
-                );
+                $label = $this->gettext('ntimes');
+                if (strpos($label, '$') === 0) {
+                    $label = str_replace('$n', '', $label);
+                    $group  = $select->show(1)
+                        . html::span('input-group-append', html::span('input-group-text', rcube::Q($label)));
+                }
+                else {
+                    $label = str_replace('$n', '', $label);
+                    $group  = html::span('input-group-prepend', html::span('input-group-text', rcube::Q($label)))
+                        . $select->show(1);
+                }
+
                 $html .= html::div('line',
-                    $radio->show('', array('value' => 'count', 'id' => 'edit-recurrence-repeat-count', 'aria-label' => sprintf($forntimes, 'N'))) . ' ' .
-                        sprintf($forntimes, $select->show(1))
+                    $radio->show('', array('value' => 'count', 'id' => 'edit-recurrence-repeat-count'))
+                        . ' ' . html::label('edit-recurrence-repeat-count', $this->gettext('for'))
+                        . ' ' . html::span('input-group', $group)
                 );
 
                 $html .= html::div('line',
-                    $radio->show('', array('value' => 'until', 'id' => 'edit-recurrence-repeat-until', 'aria-label' => $this->gettext('untilenddate'))) . ' ' .
-                        $this->gettext('untildate') . ' ' . $input->show('', array('aria-label' => $this->gettext('untilenddate')))
+                    $radio->show('', array('value' => 'until', 'id' => 'edit-recurrence-repeat-until', 'aria-label' => $this->gettext('untilenddate')))
+                        . ' ' . html::label('edit-recurrence-repeat-until', $this->gettext('untildate'))
+                        . ' ' . $input->show('', array('aria-label' => $this->gettext('untilenddate')))
                 );
 
-                $html = html::div($attrib, html::label(array('class' => 'col-form-label col-sm-2'), ucfirst($this->gettext('recurrencend'))) . $html);
+                $html = html::div($attrib, html::label(array('class' => 'col-form-label col-sm-2'), ucfirst($this->gettext('recurrencend')))
+                    . html::div('col-sm-10', $html));
                 break;
 
             case 'rdate':
-                $ul     = html::tag('ul', array('id' => 'edit-recurrence-rdates'), '');
+                $ul     = html::tag('ul', array('id' => 'edit-recurrence-rdates', 'class' => 'recurrence-rdates'), '');
                 $input  = new html_inputfield(array('name' => 'rdate', 'id' => 'edit-recurrence-rdate-input', 'size' => "10", 'class' => 'form-control'));
                 $button = new html_inputfield(array('type' => 'button', 'class' => 'button add', 'value' => $this->gettext('addrdate')));
-                $html .= html::div($attrib, $ul . html::div('inputform', $input->show() . $button->show()));
+
+                $html = html::div($attrib, html::label(array('class' => 'col-form-label col-sm-2', 'for' => 'edit-recurrence-rdate-input'), $this->gettext('bydates'))
+                    . html::div('col-sm-10', $ul . html::div('inputform', $input->show() . $button->show())));
                 break;
         }
 
diff --git a/plugins/libcalendaring/localization/en_US.inc b/plugins/libcalendaring/localization/en_US.inc
index 8dfd340a..0cd7b5b4 100644
--- a/plugins/libcalendaring/localization/en_US.inc
+++ b/plugins/libcalendaring/localization/en_US.inc
@@ -70,7 +70,9 @@ $labels['days'] = 'day(s)';
 $labels['weeks'] = 'week(s)';
 $labels['months'] = 'month(s)';
 $labels['years'] = 'year(s)';
+$labels['bydates'] = 'On';
 $labels['bydays'] = 'On';
+$labels['bymonths'] = 'On';
 $labels['untildate'] = 'the';
 $labels['each'] = 'Each';
 $labels['onevery'] = 'On every';
@@ -78,7 +80,9 @@ $labels['onsamedate'] = 'On the same date';
 $labels['forever'] = 'forever';
 $labels['recurrencend'] = 'until';
 $labels['untilenddate'] = 'until date';
-$labels['forntimes'] = 'for $nr time(s)';
+$labels['forntimes'] = 'for $nr time(s)'; // old
+$labels['ntimes'] = '$n time(s)';
+$labels['for'] = 'for';
 $labels['first'] = 'first';
 $labels['second'] = 'second';
 $labels['third'] = 'third';
diff --git a/plugins/libkolab/skins/elastic/include/calendar.less b/plugins/libkolab/skins/elastic/include/calendar.less
index 4cd39f68..768d28ce 100644
--- a/plugins/libkolab/skins/elastic/include/calendar.less
+++ b/plugins/libkolab/skins/elastic/include/calendar.less
@@ -907,3 +907,21 @@ fieldset.categories .input-group {
         margin-bottom: 1rem;
     }
 }
+
+// fixes additional checkbox in Elastic's .datetime widget
+.datetime {
+    label {
+        margin-left: 1em;
+        line-height: 2.2;
+        text-align: right;
+        flex: 1;
+    }
+
+    input {
+        width: 10em !important;
+    }
+
+    input[type=checkbox] {
+        width: auto !important;
+    }
+}
diff --git a/plugins/libkolab/skins/elastic/include/kolab_notes.less b/plugins/libkolab/skins/elastic/include/kolab_notes.less
index a670310b..7f09a93c 100644
--- a/plugins/libkolab/skins/elastic/include/kolab_notes.less
+++ b/plugins/libkolab/skins/elastic/include/kolab_notes.less
@@ -84,22 +84,14 @@
 }
 
 .kolabmessagenotes {
-    display: block !important;
+    & > i.icon:before {
+        .font-icon-regular(@fa-var-sticky-note) !important;
+    }
 
     & > a {
         .overflow-ellipsis;
         white-space: nowrap;
         display: block;
         text-decoration: none;
-
-        &:before {
-            &:extend(.font-icon-class);
-            color: @color-message-information;
-            .font-icon-regular(@fa-var-sticky-note);
-            margin-right: .6rem;
-            width: 1em;
-            font-size: 1.5em !important;
-            line-height: 1;
-        }
     }
 }
diff --git a/plugins/libkolab/skins/elastic/include/libcalendaring.less b/plugins/libkolab/skins/elastic/include/libcalendaring.less
index 6171f4ca..19876c92 100644
--- a/plugins/libkolab/skins/elastic/include/libcalendaring.less
+++ b/plugins/libkolab/skins/elastic/include/libcalendaring.less
@@ -87,6 +87,7 @@
 
     .rsvp-status {
         margin: .5rem 0;
+        width: 100%;
 
         &.hint {
             color: #666;
@@ -196,14 +197,6 @@
     }
 }
 
-.form-searchbar {
-    display: flex;
-    margin-bottom: .5rem;
-
-    input[type=button] {
-        margin-left: .5em;
-    }
-}
 
 .attendees-comentbox {
     label {
@@ -214,3 +207,241 @@
 #edit-attendees-legend {
     margin-top: 1rem;
 }
+
+.edit-attendees-table {
+    th, td {
+        width: 1%;
+        text-align: center;
+    }
+
+    td {
+        border: 0;
+        padding-bottom: 0;
+    }
+
+    th {
+        border-bottom: 1px solid #eee !important;
+    }
+
+    th.name, td.name, th.role, td.role {
+        width: auto;
+        text-align: left;
+    }
+
+    th.invite {
+        label:before {
+            &:extend(.font-icon-class);
+            content: @fa-var-envelope;
+            display: inline;
+            float: none;
+            margin-left: .25rem;
+        }
+
+    }
+
+    td.name {
+        span {
+            line-height: 2.5;
+        }
+    }
+
+    td.availability,
+    td.confirmstate {
+        span {
+            margin: 0;
+        }
+
+        span:after,
+        span:before {
+            line-height: 2;
+            margin: 0;
+            font-size: 1.2em;
+            height: 2em;
+            width: 2em;
+        }
+    }
+
+    td.options {
+        a {
+            display: inline-block;
+            height: 2em;
+
+            &:before {
+                line-height: 2;
+                height: 2em;
+            }
+        }
+    }
+
+    .inner {
+        display: none;
+    }
+}
+
+.form-searchbar {
+    display: flex;
+    margin-bottom: .5rem;
+
+    input[type=button] {
+        margin-left: .5em;
+    }
+}
+
+.attachmentslist li.link {
+    &.message.eml:before {
+        content: @fa-var-envelope;
+    }
+
+    a.messagelink {
+        .overflow-ellipsis;
+        margin-right: .25rem;
+    }
+
+    a.delete .inner {
+        display: none;
+    }
+}
+
+.alarms-input {
+    .edit-alarm-item {
+        display: flex;
+
+        & + .edit-alarm-item {
+            margin-top: .25rem;
+        }
+    }
+
+    .edit-alarm-buttons {
+        width: 5em;
+
+        a {
+            line-height: 1.2;
+            display: block;
+            padding: .375em .25em;
+            float: left;
+            margin: 0 .25rem;
+
+            &:before {
+                margin: 0;
+                width: 1em;
+            }
+        }
+
+        .inner {
+            display: none;
+        }
+    }
+
+    .edit-alarm-item.first .delete-alarm {
+        display: none;
+    }
+
+    .edit-alarm-type {
+        flex: 1;
+    }
+
+    .edit-alarm-set {
+        display: flex;
+        flex: 1;
+    }
+
+    .edit-alarm-values {
+        margin-left: .25rem;
+        flex: 5;
+    }
+
+    .edit-alarm-offset {
+        flex: 5;
+    }
+
+    .edit-alarm-date,
+    .edit-alarm-time,
+    .edit-alarm-related {
+        flex: 3;
+    }
+}
+
+.recurrence-form {
+    .recurrence-rdates {
+        width: 100%;
+        padding: 0;
+        list-style-type: none;
+
+        &:empty {
+            margin: 0;
+        }
+
+        a.delete {
+            margin-left: 2em;
+            &:before {
+                display: inline-block;
+                float: none;
+            }
+        }
+
+        .inner {
+            display: none;
+        }
+    }
+
+    .recurrence-onevery {
+        select {
+            width: 35%;
+            display: inline;
+        }
+    }
+
+    .inputform {
+        display: flex;
+
+        input.button {
+            margin-left: .25rem;
+        }
+    }
+
+    div.line {
+        width: 100%;
+        display: flex;
+        margin-bottom: .25rem;
+
+        label {
+            margin-left: .5em;
+            min-width: 4em;
+            line-height: 2.5;
+        }
+    }
+
+    .month,
+    .monthday,
+    .weekday {
+        display: inline-block;
+        width: 3.5em;
+        margin-right: .5rem;
+
+        input {
+            margin-right: .25rem;
+        }
+    }
+
+    .monthday {
+        width: 2.75em;
+    }
+
+    .table td {
+        border: 0;
+        padding: 0;
+
+        &:first-child label {
+            line-height: 2.5;
+        }
+
+        & label.monthday:first-child {
+            margin-top: .5rem;
+        }
+    }
+
+    .input-group-append,
+    .input-group-prepend {
+        display: initial; // fixes buggy height of the element
+    }
+}
diff --git a/plugins/libkolab/skins/elastic/include/tasklist.less b/plugins/libkolab/skins/elastic/include/tasklist.less
index 8d70d6d7..d55d4869 100644
--- a/plugins/libkolab/skins/elastic/include/tasklist.less
+++ b/plugins/libkolab/skins/elastic/include/tasklist.less
@@ -252,3 +252,19 @@
     // fixes redundant scrolling and height issue on task edit form
     position: absolute;
 }
+
+.messagetasklinks {
+    & > i.icon:before {
+        content: @fa-var-tasks !important;
+    }
+
+    .tasklist {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    input {
+        height: auto !important;
+    }
+}
diff --git a/plugins/tasklist/localization/en_US.inc b/plugins/tasklist/localization/en_US.inc
index 31c55e37..9d6afa05 100644
--- a/plugins/tasklist/localization/en_US.inc
+++ b/plugins/tasklist/localization/en_US.inc
@@ -134,6 +134,8 @@ $labels['arialabelquicksearchbox'] = 'Task search input';
 $labels['arialabellistsearchform'] = 'Tasklists search form';
 $labels['arialabeltaskselector'] = 'List mode';
 $labels['arialabeltasklisting'] = 'Tasks listing';
+$labels['arialabelsortmenu'] = 'Tasks sorting options';
+$labels['arialabeltasklistform'] = 'Tasks list form';
 
 // attendees
 $labels['attendee'] = 'Assignee';
@@ -217,5 +219,3 @@ $labels['itipinvalidrequest'] = 'This invitation is no longer valid';
 $labels['sentresponseto'] = 'Successfully sent assignment response to $mailto';
 $labels['successremoval'] = 'The task has been deleted successfully.';
 $labels['invalidlistproperties'] = 'Invalid list properties! Please set a valid name.';
-$labels['arialabelsortmenu'] = 'Tasks sorting options';
-$labels['arialabeltasklistform'] = 'Tasks list form';
diff --git a/plugins/tasklist/skins/elastic/templates/dialog.html b/plugins/tasklist/skins/elastic/templates/dialog.html
new file mode 100644
index 00000000..b1c6459d
--- /dev/null
+++ b/plugins/tasklist/skins/elastic/templates/dialog.html
@@ -0,0 +1,7 @@
+<roundcube:include file="includes/layout.html" />
+
+<h1 class="voice"><roundcube:label name="tasklist.arialabeltaskform" /></h1>
+
+<roundcube:include file="/templates/taskedit.html" />
+
+<roundcube:include file="includes/footer.html" />
diff --git a/plugins/tasklist/skins/elastic/templates/mainview.html b/plugins/tasklist/skins/elastic/templates/mainview.html
index aa8efaa2..935d06c5 100644
--- a/plugins/tasklist/skins/elastic/templates/mainview.html
+++ b/plugins/tasklist/skins/elastic/templates/mainview.html
@@ -9,7 +9,7 @@
 		<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
 		<span id="aria-label-tasklists" class="header-title"><roundcube:label name="tasklist.lists" /></span>
 		<div id="tasklist-search" class="searchbar toolbar" role="search" aria-labelledby="aria-label-tasklistsearchform">
-			<h2 id="aria-label-label-tasklistsearchform" class="voice"><roundcube:label name="kolab_notes.arialabelfoldersearchform" /></h2>
+			<h2 id="aria-label-label-tasklistsearchform" class="voice"><roundcube:label name="tasklist.arialabelfoldersearchform" /></h2>
 			<form name="foldersearchform" onsubmit="return false">
 				<input id="tasklistsearch" type="text" name="q" placeholder="<roundcube:label name="searchplaceholder" />" />
 				<a class="button reset" href="#" onclick="return rcmail.command(\'reset-listsearch\',null,this,event)" title="<roundcube:label name="resetsearch" />" tabindex="0">
@@ -110,7 +110,7 @@
 		</div>
 	</div>
 	<!-- task content frame -->
-	<h2 id="aria-label-taskform" class="voice"><roundcube:label name="kolab_notes.arialabeltaskform" /></h2>
+	<h2 id="aria-label-taskform" class="voice"><roundcube:label name="tasklist.arialabeltaskform" /></h2>
 	<div class="content scroller watermark" role="main" aria-labelledby="aria-label-taskform">
 		<roundcube:include file="/templates/taskedit.html" />
 		<div id="taskshow" class="hidden formcontent propform text-only" data-nodialog="true">
@@ -159,7 +159,7 @@
 			</div>
 			<div id="task-links" class="form-group row">
 				<label class="col-sm-2 col-form-label"><roundcube:label name="tasklist.links" /></label>
-				<span class="task-text col-sm-10 form-control-plaintext"></span>
+				<span class="task-text col-sm-10"></span>
 			</div>
 			<div id="task-attachments" class="form-group row">
 				<label class="col-sm-2 col-form-label"><roundcube:label name="attachments" /></label>
diff --git a/plugins/tasklist/skins/elastic/templates/taskedit.html b/plugins/tasklist/skins/elastic/templates/taskedit.html
index d8ee9006..63bd7751 100644
--- a/plugins/tasklist/skins/elastic/templates/taskedit.html
+++ b/plugins/tasklist/skins/elastic/templates/taskedit.html
@@ -1,4 +1,4 @@
-<div id="taskedit" class="hidden formcontent" data-nodialog="true" data-notabs="true">
+<div id="taskedit" class="<roundcube:exp expression="env:framed ? '' : 'hidden '">formcontent" data-nodialog="true" data-notabs="true">
 	<form id="taskeditform" class="tabbed" action="#" method="post" enctype="multipart/form-data">
 		<!-- basic info -->
 		<fieldset id="taskedit-panel-main">
@@ -33,12 +33,12 @@
 			</div>
 			<div class="form-group row" id="taskedit-alarms">
 				<label for="edit-alarm-item" class="col-sm-2 col-form-label"><roundcube:label name="tasklist.alarms" /></label>
-				<div class="col-sm-10">
+				<div class="col-sm-10 alarms-input">
 					<div class="edit-alarm-item first">
 						<roundcube:object name="plugin.alarm_select" id="edit-alarm-item" />
 						<span class="edit-alarm-buttons">
-							<a href="#add" class="iconbutton add add-alarm"><roundcube:label name="libcalendaring.addalarm" /></a>
-							<a href="#delete" class="iconbutton remove delete-alarm"><roundcube:label name="libcalendaring.removealarm" /></a>
+							<a href="#add" class="icon btn button create add-alarm"><span class="inner"><roundcube:label name="libcalendaring.addalarm" /></span></a>
+							<a href="#delete" class="icon btn button delete delete-alarm"><span class="inner"><roundcube:label name="libcalendaring.removealarm" /></span></a>
 						</span>
 					</div>
 				</div>
@@ -97,14 +97,13 @@
 		<!-- attendees list (assignments) -->
 		<fieldset id="taskedit-panel-attendees">
 			<legend><roundcube:label name="tasklist.tabassignments" /></legend>
-			<div class="form-group" id="taskedit-organizer">
-				<label for="edit-identities-list"><roundcube:label name="tasklist.roleorganizer" /></label>
-				<roundcube:object name="plugin.identity_select" id="edit-identities-list" />
+			<div class="form-group row" id="taskedit-organizer">
+				<label for="edit-identities-list" class="col-form-label col-sm-2"><roundcube:label name="tasklist.roleorganizer" /></label>
+				<roundcube:object name="plugin.identity_select" id="edit-identities-list" class="col-sm-10 form-control" />
 			</div>
 			<h3 id="aria-label-attendeestable" class="voice"><roundcube:label name="tasklist.arialabeleventassignments" /></h3>
 			<roundcube:object name="plugin.attendees_list" id="edit-attendees-table" class="records-table edit-attendees-table no-img table-sm" coltitle="attendee" aria-labelledby="aria-label-attendeestable" />
 			<roundcube:object name="plugin.attendees_form" id="edit-attendees-form" />
-			<roundcube:include file="/templates/freebusylegend.html" />
 		</fieldset>
 		<!-- attachments list (with upload form) -->
 		<fieldset id="taskedit-panel-attachments">
diff --git a/plugins/tasklist/skins/larry/tasklist.css b/plugins/tasklist/skins/larry/tasklist.css
index 728c6bac..402cc149 100644
--- a/plugins/tasklist/skins/larry/tasklist.css
+++ b/plugins/tasklist/skins/larry/tasklist.css
@@ -778,6 +778,17 @@ ul.toolbarmenu .sortcol.by-auto a {
 	display: none;
 }
 
+body.taskdialog {
+	margin: 0;
+	overflow-y: auto;
+}
+
+body.taskdialog #taskedit {
+	display: block;
+	top: 0;
+	padding: 1em;
+}
+
 #taskedit {
 	position: relative;
 	top: -1.5em;
@@ -1108,10 +1119,13 @@ label.block {
 }
 
 #taskedit-links .task-text {
-	margin-left: 8em;
 	min-height: 22px;
 }
 
+#taskedit-links .attachmentslist li {
+	padding-right: 2em;
+}
+
 #taskedit-links .attachmentslist li a.delete {
 	top: 0;
 	background-position: -6px -378px;
diff --git a/plugins/tasklist/skins/larry/templates/dialog.html b/plugins/tasklist/skins/larry/templates/dialog.html
new file mode 100644
index 00000000..ebb7d243
--- /dev/null
+++ b/plugins/tasklist/skins/larry/templates/dialog.html
@@ -0,0 +1,26 @@
+<roundcube:object name="doctype" value="html5" />
+<html>
+<head>
+<title><roundcube:object name="pagetitle" /></title>
+<roundcube:include file="/includes/links.html" />
+</head>
+<body class="iframe taskdialog noscroll">
+
+<roundcube:include file="/templates/taskedit.html" />
+
+<script type="text/javascript">
+
+// UI startup
+var UI = new rcube_mail_ui();
+
+$(document).ready(function(e) {
+	rcmail.addEventListener('tasklist_editform_load', function(e){
+		if (rcmail.env.tasklist_driver == 'kolab')
+			UI.init_tabs($('#tasklistform > form').addClass('propform tabbed'));
+	});
+});
+
+</script>
+
+</body>
+</html>
diff --git a/plugins/tasklist/skins/larry/templates/taskedit.html b/plugins/tasklist/skins/larry/templates/taskedit.html
index 1c10ed4d..13d1aae3 100644
--- a/plugins/tasklist/skins/larry/templates/taskedit.html
+++ b/plugins/tasklist/skins/larry/templates/taskedit.html
@@ -1,4 +1,4 @@
-<div id="taskedit" class="uidialog uidialog-tabbed">
+<div id="taskedit" class="uidialog uidialog-tabbed"<roundcube:exp expression="env:framed ? 'data-nodialog=true' : ''">>
 	<form id="taskeditform" action="#" method="post" enctype="multipart/form-data">
 		<ul>
 			<li><a href="#taskedit-panel-main"><roundcube:label name="tasklist.tabsummary" /></a></li><li><a href="#taskedit-panel-recurrence"><roundcube:label name="tasklist.tabrecurrence" /></a></li><li id="edit-tab-attendees"><a href="#taskedit-panel-attendees"><roundcube:label name="tasklist.tabassignments" /></a></li><li id="taskedit-tab-attachments"><a href="#taskedit-panel-attachments"><roundcube:label name="tasklist.tabattachments" /></a></li>
@@ -93,7 +93,6 @@
 			<h3 id="aria-label-attendeestable" class="voice"><roundcube:label name="tasklist.arialabeleventassignments" /></h3>
 			<roundcube:object name="plugin.attendees_list" id="edit-attendees-table" class="records-table edit-attendees-table" coltitle="attendee" aria-labelledby="aria-label-attendeestable" />
 			<roundcube:object name="plugin.attendees_form" id="edit-attendees-form" />
-			<roundcube:include file="/templates/freebusylegend.html" />
 		</div>
 		<!-- attachments list (with upload form) -->
 		<div id="taskedit-panel-attachments">
diff --git a/plugins/tasklist/tasklist.js b/plugins/tasklist/tasklist.js
index cd2a917a..cc8baeef 100644
--- a/plugins/tasklist/tasklist.js
+++ b/plugins/tasklist/tasklist.js
@@ -144,6 +144,27 @@ function rcube_tasklist_ui(settings)
             return;
         }
 
+        if (rcmail.env.action == 'dialog-ui') {
+            task_edit_dialog(null, 'new', rcmail.env.task_prop);
+
+            rcmail.addEventListener('plugin.unlock_saving', function(status) {
+                unlock_saving();
+
+                if (status) {
+                    var rc = window.parent.rcmail,
+                        win = rc.env.contentframe ? rc.get_frame_window(rc.env.contentframe) : window.parent;
+
+                   if (win) {
+                        win.location.reload();
+                    }
+
+                    window.parent.kolab_task_dialog_element.dialog('destroy');
+                }
+            });
+
+            return;
+        }
+
         // initialize task list selectors
         for (var id in me.tasklists) {
             if (settings.selected_list && me.tasklists[settings.selected_list] && !me.tasklists[settings.selected_list].active) {
@@ -1800,7 +1821,7 @@ function rcube_tasklist_ui(settings)
                 success = true;
             }
             else {
-                alert(rcmail.gettext('noemailwarning'));
+                rcmail.alert_dialog(rcmail.gettext('noemailwarning'));
             }
         }
 
@@ -1824,8 +1845,8 @@ function rcube_tasklist_ui(settings)
             dispname = '<a href="mailto:' + data.email + '" title="' + Q(data.email) + '" class="mailtolink" data-cutype="' + data.cutype + '">' + dispname + '</a>';
 
         // delete icon
-        var icon = rcmail.env.deleteicon ? '<img src="' + rcmail.env.deleteicon + '" alt="" />' : rcmail.gettext('delete');
-        var dellink = '<a href="#delete" class="iconlink delete deletelink" title="' + Q(rcmail.gettext('delete')) + '">' + icon + '</a>';
+        var icon = rcmail.env.deleteicon ? '<img src="' + rcmail.env.deleteicon + '" alt="" />' : '<span class="inner">' + Q(rcmail.gettext('delete')) + '</span>';
+        var dellink = '<a href="#delete" class="iconlink icon button delete deletelink" title="' + Q(rcmail.gettext('delete')) + '">' + icon + '</a>';
         var tooltip, status = (data.status || '').toLowerCase(),
             status_label = rcmail.gettext('status' + status, 'libcalendaring');
 
@@ -1846,8 +1867,9 @@ function rcube_tasklist_ui(settings)
                 rcmail.gettext('expandattendeegroup','libcalendaring') + '</a>';
         }
 
+        var elastic = $(attendees_list).parents('.no-img').length > 0;
         var html = '<td class="name"><span class="attendee-name">' + dispname + '</span></td>' +
-            '<td class="confirmstate"><span class="' + status + '" title="' + Q(tooltip) + '">' + Q(status ? status_label : '') + '</span></td>' +
+            '<td class="confirmstate"><span class="attendee ' + status + '" title="' + Q(tooltip) + '">' + Q(status && !elastic ? status_label : '') + '</span></td>' +
             (data.cutype != 'RESOURCE' ? '<td class="invite">' + (readonly || !invbox ? '' : invbox) + '</td>' : '') +
             '<td class="options">' + (readonly ? '' : dellink) + '</td>';
 
@@ -2305,7 +2327,8 @@ function rcube_tasklist_ui(settings)
     function task_edit_dialog(id, action, presets)
     {
         var elastic = false, infodialog = $('#taskshow');
-        if (infodialog.data('nodialog')) {
+        if (infodialog.data('nodialog') || $('#taskedit').data('nodialog')) {
+
             elastic = true;
             infodialog.addClass('hidden').parent().addClass('watermark'); // Elastic
         }
@@ -2424,13 +2447,15 @@ function rcube_tasklist_ui(settings)
                 }
             });
 
-            $('#edit-tab-attendees').show();
+            $('#edit-tab-attendees').show(); // Larry
+            $('a[href="#taskedit-panel-attendees"]').parent().show(); // Elastic
             $('#edit-attendees-form')[(allow_invitations?'show':'hide')]();
             $('#edit-identities-list').val(identity_id);
             $('#taskedit-organizer')[(organizer ? 'show' : 'hide')]();
         }
         else {
-            $('#edit-tab-attendees').hide();
+            $('#edit-tab-attendees').hide(); // Larry
+            $('a[href="#taskedit-panel-attendees"]').parent().hide(); // Elastic
         }
 
         // attachments
@@ -2448,11 +2473,12 @@ function rcube_tasklist_ui(settings)
         }
 
         // show/hide tabs according to calendar's feature support
-        $('#taskedit-tab-attachments')[(list.attachments||rec.attachments?'show':'hide')]();
+        $('#taskedit-tab-attachments')[(list.attachments||rec.attachments?'show':'hide')](); // Larry
+        $('a[href="#taskedit-panel-attachments"]').parent()[(list.attachments||rec.attachments?'show':'hide')](); // Elastic
 
         // activate the first tab
         $('#taskedit:not([data-notabs])').tabs('option', 'active', 0); // Larry
-        if (elastic)
+        if (elastic && $.tab)
             $('#taskedit li.nav-item:first-child a').tab('show'); // Elastic
 
         // define dialog buttons
@@ -2481,16 +2507,16 @@ function rcube_tasklist_ui(settings)
                 var startdate = $.datepicker.parseDate(datepicker_settings.dateFormat, data.startdate, datepicker_settings);
                 var duedate = $.datepicker.parseDate(datepicker_settings.dateFormat, data.date, datepicker_settings);
                 if (startdate > duedate) {
-                    alert(rcmail.gettext('invalidstartduedates', 'tasklist'));
+                    rcmail.alert_dialog(rcmail.gettext('invalidstartduedates', 'tasklist'));
                     return false;
                 }
                 else if ((data.time == '') != (data.starttime == '')) {
-                    alert(rcmail.gettext('invalidstartduetimes', 'tasklist'));
+                    rcmail.alert_dialog(rcmail.gettext('invalidstartduetimes', 'tasklist'));
                     return false;
                 }
             }
             else if (data.recurrence && !data.startdate && !data.date) {
-                alert(rcmail.gettext('recurrencerequiresdate', 'tasklist'));
+                rcmail.alert_dialog(rcmail.gettext('recurrencerequiresdate', 'tasklist'));
                 return false;
             }
 
@@ -2547,7 +2573,7 @@ function rcube_tasklist_ui(settings)
                 delete data._notify;
             }
 
-            if (save_task(data, action))
+            if (save_task(data, action) && !elastic)
                 $dialog.dialog('close');
         };
 
@@ -3313,29 +3339,28 @@ function tasklist_options_menu(p)
 /* tasklist plugin UI initialization */
 var rctasks;
 window.rcmail && rcmail.addEventListener('init', function(evt) {
+    rctasks = new rcube_tasklist_ui($.extend(rcmail.env.tasklist_settings, rcmail.env.libcal_settings));
 
-  rctasks = new rcube_tasklist_ui($.extend(rcmail.env.tasklist_settings, rcmail.env.libcal_settings));
+    // register button commands
+    rcmail.register_command('newtask', function(){ rctasks.edit_task(null, 'new', {}); }, true);
+    rcmail.register_command('print', function(){ rctasks.print_tasks(); }, true);
+    rcmail.register_command('import', function(){ rctasks.import_tasks(rctasks.selected_list); }, true);
+    rcmail.register_command('edit-task', function(){ rctasks.edit_task(rctasks.selected_task.id, 'edit'); });
+    rcmail.register_command('delete-task', function(){ rctasks.delete_task(rctasks.selected_task.id); });
+    rcmail.register_command('add-child-task', function(){ rctasks.add_childtask(rctasks.selected_task.id); });
+    rcmail.register_command('save-task', function(){ rcmail.env.task_save_func(); });
 
-  // register button commands
-  rcmail.register_command('newtask', function(){ rctasks.edit_task(null, 'new', {}); }, true);
-  rcmail.register_command('print', function(){ rctasks.print_tasks(); }, true);
-  rcmail.register_command('import', function(){ rctasks.import_tasks(rctasks.selected_list); }, true);
-  rcmail.register_command('edit-task', function(){ rctasks.edit_task(rctasks.selected_task.id, 'edit'); });
-  rcmail.register_command('delete-task', function(){ rctasks.delete_task(rctasks.selected_task.id); });
-  rcmail.register_command('add-child-task', function(){ rctasks.add_childtask(rctasks.selected_task.id); });
-  rcmail.register_command('save-task', function(){ rcmail.env.task_save_func(); });
+    rcmail.register_command('list-create', function(){ rctasks.list_edit_dialog(null); }, true);
+    rcmail.register_command('list-edit', function(){ rctasks.list_edit_dialog(rctasks.selected_list); }, false);
+    rcmail.register_command('list-delete', function(){ rctasks.list_delete(rctasks.selected_list); }, false);
+    rcmail.register_command('list-remove', function(){ rctasks.list_remove(rctasks.selected_list); }, false);
+    rcmail.register_command('list-showurl', function(){ rctasks.list_showurl(rctasks.selected_list); }, false);
 
-  rcmail.register_command('list-create', function(){ rctasks.list_edit_dialog(null); }, true);
-  rcmail.register_command('list-edit', function(){ rctasks.list_edit_dialog(rctasks.selected_list); }, false);
-  rcmail.register_command('list-delete', function(){ rctasks.list_delete(rctasks.selected_list); }, false);
-  rcmail.register_command('list-remove', function(){ rctasks.list_remove(rctasks.selected_list); }, false);
-  rcmail.register_command('list-showurl', function(){ rctasks.list_showurl(rctasks.selected_list); }, false);
+    rcmail.register_command('export', function(){ rctasks.export_tasks(); }, true);
+    rcmail.register_command('search', function(){ rctasks.quicksearch(); }, true);
+    rcmail.register_command('reset-search', function(){ rctasks.reset_search(); }, true);
+    rcmail.register_command('expand-all', function(){ rctasks.expand_collapse(true); }, true);
+    rcmail.register_command('collapse-all', function(){ rctasks.expand_collapse(false); }, true);
 
-  rcmail.register_command('export', function(){ rctasks.export_tasks(); }, true);
-  rcmail.register_command('search', function(){ rctasks.quicksearch(); }, true);
-  rcmail.register_command('reset-search', function(){ rctasks.reset_search(); }, true);
-  rcmail.register_command('expand-all', function(){ rctasks.expand_collapse(true); }, true);
-  rcmail.register_command('collapse-all', function(){ rctasks.expand_collapse(false); }, true);
-
-  rctasks.init();
+    rctasks.init();
 });
diff --git a/plugins/tasklist/tasklist.php b/plugins/tasklist/tasklist.php
index 41d93948..770b0fd8 100644
--- a/plugins/tasklist/tasklist.php
+++ b/plugins/tasklist/tasklist.php
@@ -116,8 +116,7 @@ class tasklist extends rcube_plugin
             $this->register_action('counts', array($this, 'fetch_counts'));
             $this->register_action('fetch', array($this, 'fetch_tasks'));
             $this->register_action('print', array($this, 'print_tasks'));
-            $this->register_action('inlineui', array($this, 'get_inline_ui'));
-            $this->register_action('mail2task', array($this, 'mail_message2task'));
+            $this->register_action('dialog-ui', array($this, 'mail_message2task'));
             $this->register_action('get-attachment', array($this, 'attachment_get'));
             $this->register_action('upload', array($this, 'attachment_upload'));
             $this->register_action('import', array($this, 'import_tasks'));
@@ -141,7 +140,7 @@ class tasklist extends rcube_plugin
             }
 
             // add 'Create event' item to message menu
-            if ($this->api->output->type == 'html') {
+            if ($this->api->output->type == 'html' && $_GET['_rel'] != 'task') {
                 $this->api->add_content(html::tag('li', null, 
                     $this->api->output->button(array(
                         'command'  => 'tasklist-create-from-mail',
@@ -555,7 +554,7 @@ class tasklist extends rcube_plugin
         }
 
         // unlock client
-        $this->rc->output->command('plugin.unlock_saving');
+        $this->rc->output->command('plugin.unlock_saving', $success);
 
         if ($refresh) {
             if ($refresh['id']) {
@@ -1447,42 +1446,6 @@ class tasklist extends rcube_plugin
         $this->rc->output->send('tasklist.mainview');
     }
 
-
-    /**
-     *
-     */
-    public function get_inline_ui()
-    {
-        foreach (array('save','cancel','savingdata') as $label)
-            $texts['tasklist.'.$label] = $this->gettext($label);
-
-        $texts['tasklist.newtask'] = $this->gettext('createfrommail');
-
-
-        $this->ui->init_templates();
-        $this->ui->tasklists();
-
-        // collect env variables
-        $env = array(
-            'tasklists' => $this->rc->output->get_env('tasklists'),
-            'tasklist_settings' => $this->ui->load_settings(),
-        );
-
-        echo $this->api->output->parse('tasklist.taskedit', false, false);
-
-        $script_add = '';
-        foreach ($this->ui->get_gui_objects() as $obj => $id) {
-            $script_add .= rcmail_output::JS_OBJECT_NAME . ".gui_object('$obj', '$id');\n";
-        }
-
-        echo html::tag('script', array('type' => 'text/javascript'),
-            rcmail_output::JS_OBJECT_NAME . ".set_env(" . json_encode($env) . ");\n".
-            rcmail_output::JS_OBJECT_NAME . ".add_label(" . json_encode($texts) . ");\n".
-            $script_add
-        );
-        exit;
-    }
-
     /**
      * Handler for keep-alive requests
      * This will check for updated data in active lists and sync them to the client
@@ -1793,19 +1756,22 @@ class tasklist extends rcube_plugin
 
     public function mail_message2task()
     {
-        $uid  = rcube_utils::get_input_value('_uid', rcube_utils::INPUT_POST);
-        $mbox = rcube_utils::get_input_value('_mbox', rcube_utils::INPUT_POST);
+        $this->load_ui();
+        $this->ui->init();
+        $this->ui->init_templates();
+        $this->ui->tasklists();
+
+        $uid  = rcube_utils::get_input_value('_uid', rcube_utils::INPUT_GET);
+        $mbox = rcube_utils::get_input_value('_mbox', rcube_utils::INPUT_GET);
         $task = array();
 
-        // establish imap connection
-        $imap = $this->rc->get_storage();
-        $imap->set_folder($mbox);
-        $message = new rcube_message($uid);
+        $imap    = $this->rc->get_storage();
+        $message = new rcube_message($uid, $mbox);
 
         if ($message->headers) {
-            $task['title'] = trim($message->subject);
+            $task['title']       = trim($message->subject);
             $task['description'] = trim($message->first_text_part());
-            $task['id'] = -$uid;
+            $task['id']          = -$uid;
 
             $this->load_driver();
 
@@ -1816,18 +1782,19 @@ class tasklist extends rcube_plugin
             // copy mail attachments to task
             else if ($message->attachments && $this->driver->attachments) {
                 if (!is_array($_SESSION[self::SESSION_KEY]) || $_SESSION[self::SESSION_KEY]['id'] != $task['id']) {
-                    $_SESSION[self::SESSION_KEY] = array();
-                    $_SESSION[self::SESSION_KEY]['id'] = $task['id'];
-                    $_SESSION[self::SESSION_KEY]['attachments'] = array();
+                    $_SESSION[self::SESSION_KEY] = array(
+                        'id'          => $task['id'],
+                        'attachments' => array(),
+                    );
                 }
 
                 foreach ((array)$message->attachments as $part) {
                     $attachment = array(
-                        'data' => $imap->get_message_part($uid, $part->mime_id, $part),
-                        'size' => $part->size,
-                        'name' => $part->filename,
+                        'data'     => $imap->get_message_part($uid, $part->mime_id, $part),
+                        'size'     => $part->size,
+                        'name'     => $part->filename,
                         'mimetype' => $part->mimetype,
-                        'group' => $task['id'],
+                        'group'    => $task['id'],
                     );
 
                     $attachment = $this->rc->plugins->exec_hook('attachment_save', $attachment);
@@ -1846,13 +1813,13 @@ class tasklist extends rcube_plugin
                 }
             }
 
-            $this->rc->output->command('plugin.mail2taskdialog', $task);
+            $this->rc->output->set_env('task_prop', $task);
         }
         else {
             $this->rc->output->command('display_message', $this->gettext('messageopenerror'), 'error');
         }
 
-        $this->rc->output->send();
+        $this->rc->output->send('tasklist.dialog');
     }
 
     /**
@@ -1922,7 +1889,7 @@ class tasklist extends rcube_plugin
             );
         }
         if (count($links)) {
-            $html .= html::div('messagetasklinks', html::tag('ul', 'tasklist', join("\n", $links)));
+            $html .= html::div('messagetasklinks boxinformation', html::tag('ul', 'tasklist', join("\n", $links)));
         }
 
         // prepend iTip/relation boxes to message body
diff --git a/plugins/tasklist/tasklist_base.js b/plugins/tasklist/tasklist_base.js
index 1ecaa290..956bac2e 100644
--- a/plugins/tasklist/tasklist_base.js
+++ b/plugins/tasklist/tasklist_base.js
@@ -6,7 +6,7 @@
  * @licstart  The following is the entire license notice for the
  * JavaScript code in this file.
  *
- * Copyright (C) 2013, Kolab Systems AG <contact@kolabsys.com>
+ * Copyright (C) 2013-2018, 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
@@ -27,17 +27,8 @@
  
 function rcube_tasklist(settings)
 {
-    /* private vars */
-    var ui_loaded = false;
-    var me = this;
-    var mywin = window;
-
-    /*  public members  */
-    this.ui = null;
-
     /* public methods */
     this.create_from_mail = create_from_mail;
-    this.mail2taskdialog = mail2task_dialog;
     this.save_to_tasklist = save_to_tasklist;
 
 
@@ -46,51 +37,37 @@ function rcube_tasklist(settings)
      */
     function create_from_mail(uid)
     {
-        if (uid || (uid = rcmail.get_single_uid())) {
-            // load calendar UI (scripts and edit dialog template)
-            if (!ui_loaded) {
-                $.when(
-                    $.getScript(rcmail.assets_path('plugins/tasklist/tasklist.js')),
-                    $.get(rcmail.url('tasks/inlineui'), function(html) { $(document.body).append(html); }, 'html')
-                ).then(function() {
-                    // register attachments form
-                    // rcmail.gui_object('attachmentlist', 'attachmentlist');
-
-                    ui_loaded = true;
-                    me.ui = new rcube_tasklist_ui($.extend(rcmail.env.tasklist_settings, settings));
-                    create_from_mail(uid);  // start over
-                });
-
-                return;
-            }
-
-            // get message contents for task dialog
-            var lock = rcmail.set_busy(true, 'loading');
-            rcmail.http_post('tasks/mail2task', {
-                '_mbox': rcmail.env.mailbox,
-                '_uid': uid
-            }, lock);
+        if (!uid && !(uid = rcmail.get_single_uid())) {
+            return;
         }
-    }
 
-    /**
-     * Callback function to put the given task properties into the dialog
-     */
-    function mail2task_dialog(prop)
-    {
-        this.ui.edit_task(null, 'new', prop);
-        rcmail.addEventListener('responseaftertask', refresh_mailview);
-    }
+        var url = {_mbox: rcmail.env.mailbox, _uid: uid, _framed: 1},
+            buttons = {},
+            button_classes = ['mainaction save', 'cancel'],
+            title = rcmail.gettext('tasklist.createfrommail'),
+            dialog = $('<iframe>').attr({
+                id: 'kolabtasksinlinegui',
+                name: 'kolabtasksdialog',
+                src: rcmail.url('tasks/dialog-ui', url)
+            });
 
-    /**
-     * Reload the mail view/preview to update the tasks listing
-     */
-    function refresh_mailview(e)
-    {
-        var win = rcmail.env.contentframe ? rcmail.get_frame_window(rcmail.env.contentframe) : mywin;
-        if (win && e.response.action == 'task') {
-            win.location.reload();
-        }
+        // dialog buttons
+        buttons[rcmail.gettext('save')] = function() {
+            var frame = rcmail.get_frame_window('kolabtasksinlinegui');
+            frame.rcmail.command('save-task');
+        };
+
+        buttons[rcmail.gettext('cancel')] = function() {
+            dialog.dialog('destroy');
+        };
+
+        // open jquery UI dialog
+        window.kolab_task_dialog_element = dialog = rcmail.show_popup_dialog(dialog, title, buttons, {
+            button_classes: button_classes,
+            minWidth: 500,
+            width: 600,
+            height: 600
+        });
     }
 
     // handler for attachment-save-tasklist commands
@@ -108,7 +85,7 @@ function rcube_tasklist(settings)
     }
 
     // register event handlers on linked task items in message view
-    // the checkbox allows to mark a task as complete 
+    // the checkbox allows to mark a task as complete
     if (rcmail.env.action == 'show' || rcmail.env.action == 'preview') {
         $('div.messagetasklinks input.complete').click(function(e) {
             var $this = $(this);
@@ -130,8 +107,6 @@ window.rcmail && rcmail.env.task == 'mail' && rcmail.addEventListener('init', fu
 
     rcmail.register_command('tasklist-create-from-mail', function() { tasks.create_from_mail(); });
     rcmail.register_command('attachment-save-task', function() { tasks.save_to_tasklist(); });
-    rcmail.addEventListener('plugin.mail2taskdialog', function(p) { tasks.mail2taskdialog(p); });
-    rcmail.addEventListener('plugin.unlock_saving', function(p) { tasks.ui && tasks.ui.unlock_saving(); });
 
     if (rcmail.env.action != 'show')
         rcmail.env.message_commands.push('tasklist-create-from-mail');
diff --git a/plugins/tasklist/tasklist_ui.php b/plugins/tasklist/tasklist_ui.php
index 0d762b24..573461b3 100644
--- a/plugins/tasklist/tasklist_ui.php
+++ b/plugins/tasklist/tasklist_ui.php
@@ -158,7 +158,6 @@ class tasklist_ui
         kolab_attachments_handler::ui();
 
         $this->plugin->include_script('tasklist.js');
-        $this->rc->output->include_script('treelist.js');
         $this->plugin->api->include_script('libkolab/libkolab.js');
     }
 
@@ -197,6 +196,8 @@ class tasklist_ui
             }
         }
 
+        $this->rc->output->include_script('treelist.js');
+
         $this->rc->output->set_env('source', rcube_utils::get_input_value('source', rcube_utils::INPUT_GET));
         $this->rc->output->set_env('tasklists', $jsenv);
         $this->register_gui_object('tasklistslist', $attrib['id']);
@@ -379,7 +380,12 @@ class tasklist_ui
 
         $label = html::label(array('for' => 'quickaddinput', 'class' => 'voice'), $this->plugin->gettext('quickaddinput'));
         $input = new html_inputfield(array('name' => 'text', 'id' => 'quickaddinput'));
-        $button = html::tag('input', array('type' => 'submit', 'value' => '+', 'title' => $this->plugin->gettext('createtask'), 'class' => 'button mainaction'));
+        $button = html::tag('input', array(
+                'type'  => 'submit',
+                'value' => '+',
+                'title' => $this->plugin->gettext('createtask'),
+                'class' => 'button mainaction'
+        ));
 
         $this->register_gui_object('quickaddform', $attrib['id']);
         return html::tag('form', $attrib, $label . $input->show() . $button);
@@ -427,7 +433,7 @@ class tasklist_ui
         $table->add_header('confirmstate', $this->plugin->gettext('confirmstate'));
         if ($invitations) {
             $table->add_header(array('class' => 'invite', 'title' => $this->plugin->gettext('sendinvitations')),
-                $invite->show(1) . html::label('edit-attendees-invite', $this->plugin->gettext('sendinvitations')));
+                $invite->show(1) . html::label('edit-attendees-invite', html::span('inner', $this->plugin->gettext('sendinvitations'))));
         }
         $table->add_header('options', '');
 
@@ -446,16 +452,16 @@ class tasklist_ui
      */
     function attendees_form($attrib = array())
     {
-        $input    = new html_inputfield(array('name' => 'participant', 'id' => 'edit-attendee-name', 'size' => 30));
+        $input    = new html_inputfield(array('name' => 'participant', 'id' => 'edit-attendee-name', 'size' => 30, 'class' => 'form-control'));
         $textarea = new html_textarea(array('name' => 'comment', 'id' => 'edit-attendees-comment',
-            'rows' => 4, 'cols' => 55, 'title' => $this->plugin->gettext('itipcommenttitle')));
+            'rows' => 4, 'cols' => 55, 'title' => $this->plugin->gettext('itipcommenttitle'), 'class' => 'form-control'));
 
         return html::div($attrib,
-            html::div(null, $input->show() . " " .
+            html::div('form-searchbar', $input->show() . " " .
                 html::tag('input', array('type' => 'button', 'class' => 'button', 'id' => 'edit-attendee-add', 'value' => $this->plugin->gettext('addattendee')))
                 // . " " . html::tag('input', array('type' => 'button', 'class' => 'button', 'id' => 'edit-attendee-schedule', 'value' => $this->plugin->gettext('scheduletime').'...'))
                 ) .
-            html::p('attendees-commentbox', html::label(null, $this->plugin->gettext('itipcomment') . $textarea->show()))
+            html::p('attendees-commentbox', html::label('edit-attendees-comment', $this->plugin->gettext('itipcomment')) . $textarea->show())
         );
     }