From 3b6c5b7bfdbf3a9188e6059f2b6585c1bf1d0487 Mon Sep 17 00:00:00 2001 From: Aleksander Machniak Date: Sun, 25 Mar 2018 13:15:30 +0000 Subject: [PATCH] Elastic: Mobile mode for tasks --- plugins/kolab_tags/kolab_tags.js | 71 ++++++++--- plugins/libcalendaring/libcalendaring.php | 4 +- .../skins/elastic/include/libcalendaring.less | 13 +- .../skins/elastic/include/tasklist.less | 61 ++++++--- plugins/libkolab/skins/elastic/libkolab.less | 24 ++-- plugins/tasklist/localization/en_US.inc | 2 +- .../skins/elastic/templates/mainview.html | 60 ++++----- .../skins/elastic/templates/taskedit.html | 4 +- plugins/tasklist/tasklist.js | 119 ++++++++++++++---- 9 files changed, 246 insertions(+), 112 deletions(-) diff --git a/plugins/kolab_tags/kolab_tags.js b/plugins/kolab_tags/kolab_tags.js index c412cb2f..6d426ebc 100644 --- a/plugins/kolab_tags/kolab_tags.js +++ b/plugins/kolab_tags/kolab_tags.js @@ -1113,34 +1113,55 @@ function tag_draggable_helper() function tag_draggable_start(event, ui) { - // register notes list to receive drop events if (rcmail.gui_objects.noteslist) { + // register notes list to receive drop events $('tr', rcmail.gui_objects.noteslist).droppable({ addClasses: false, hoverClass: 'droptarget', accept: tag_droppable_accept, drop: tag_draggable_dropped }); - } - // allow to drop tags onto edit form title - $('body.task-notes .content.formcontainer,#notedetailstitle.boxtitle').droppable({ - addClasses: false, - accept: function() { return $(this).is('.formcontainer,.boxtitle'); }, - drop: function(event, ui) { - var tag = tag_find(ui.draggable.data('tag')); - $('#tagedit-input').val(tag.name).trigger('transformToTag'); - $('.tagline .placeholder', rcmail.gui_objects.noteviewtitle).hide(); - } - }).addClass('tag-droppable'); + // allow to drop tags onto note edit form + $('body.task-notes .content.formcontainer,#notedetailstitle.boxtitle').droppable({ + addClasses: false, + accept: function() { return $(this).is('.formcontainer,.boxtitle'); }, + drop: function(event, ui) { + var tag = tag_find(ui.draggable.data('tag')); + $('#tagedit-input').val(tag.name).trigger('transformToTag'); + $('.tagline .placeholder', rcmail.gui_objects.noteviewtitle).hide(); + } + }).addClass('tag-droppable'); + } + else if (rcmail.task == 'tasks' && rcmail.gui_objects.resultlist) { + + $('div.taskhead', rcmail.gui_objects.resultlist).droppable({ + addClasses: false, + hoverClass: 'droptarget', + accept: tag_droppable_accept, + drop: tag_draggable_dropped + }); + + + // allow to drop tags onto task edit form + $('body.task-tasks .content.formcontainer').droppable({ + addClasses: false, + accept: function() { return $(this).is('.formcontainer') && $('#taskedit').is(':visible'); }, + drop: function(event, ui) { + var tag = tag_find(ui.draggable.data('tag')); + $('#tagedit-input').val(tag.name).trigger('transformToTag'); + } + }).addClass('tag-droppable'); + } } function tag_draggable_dropped(event, ui) { - var drop_id = $(this).attr('id').replace(/^rcmrow/, ''), - tag = tag_find(ui.draggable.data('tag')); + var drop_id = tag_draggable_target_id(this), + tag = tag_find(ui.draggable.data('tag')), + list = $(this).parent(); - rcmail.triggerEvent('kolab-tags-drop', {id: drop_id, tag: tag.name, list: $(this).parent()}); + rcmail.triggerEvent('kolab-tags-drop', {id: drop_id, tag: tag.name, list: list}); } function tag_droppable_accept(draggable) @@ -1149,18 +1170,32 @@ function tag_droppable_accept(draggable) return false; } - var tag = tag_find(draggable.data('tag')), - drop_id = $(this).attr('id').replace(/^rcmrow/, ''), + var drop_id = tag_draggable_target_id(this), + tag = tag_find(draggable.data('tag')), data = rcmail.triggerEvent('kolab-tags-drop-data', {id: drop_id}); // target already has this tag assigned - if (!data || (data.tags && $.inArray(tag.name, data.tags) >= 0)) { + if (!data || !tag || (data.tags && $.inArray(tag.name, data.tags) >= 0)) { return false; } return true; } +function tag_draggable_target_id(elem) +{ + var id = $(elem).attr('id'); + + if (id) { + id = id.replace(/^rcmrow/, ''); // Notes + } + else { + id = $(elem).parent().attr('rel'); // Tasks + } + + return id; +} + // Convert list of tag names into "blocks" and add to the specified element function kolab_tags_text_block(tags, element, del_btn) { diff --git a/plugins/libcalendaring/libcalendaring.php b/plugins/libcalendaring/libcalendaring.php index 8cce1f2d..a3cf48d2 100644 --- a/plugins/libcalendaring/libcalendaring.php +++ b/plugins/libcalendaring/libcalendaring.php @@ -941,7 +941,7 @@ class libcalendaring extends rcube_plugin case 'until': $radio = new html_radiobutton(array('name' => 'repeat', 'class' => 'edit-recurrence-until')); $select = $this->interval_selector(array('name' => 'times', 'id' => 'edit-recurrence-repeat-times', 'class' => 'form-control')); - $input = new html_inputfield(array('name' => 'untildate', 'id' => 'edit-recurrence-enddate', 'size' => "10", 'class' => 'form-control')); + $input = new html_inputfield(array('name' => 'untildate', 'id' => 'edit-recurrence-enddate', 'size' => '10', 'class' => 'form-control datepicker')); $html = html::div('line first', $radio->show('', array('value' => '', 'id' => 'edit-recurrence-repeat-forever')) @@ -978,7 +978,7 @@ class libcalendaring extends rcube_plugin case 'rdate': $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')); + $input = new html_inputfield(array('name' => 'rdate', 'id' => 'edit-recurrence-rdate-input', 'size' => "10", 'class' => 'form-control datepicker')); $button = new html_inputfield(array('type' => 'button', 'class' => 'button add', 'value' => $this->gettext('addrdate'))); $html = html::div($attrib, html::label(array('class' => 'col-form-label col-sm-2', 'for' => 'edit-recurrence-rdate-input'), $this->gettext('bydates')) diff --git a/plugins/libkolab/skins/elastic/include/libcalendaring.less b/plugins/libkolab/skins/elastic/include/libcalendaring.less index 0d08d620..c5b211d3 100644 --- a/plugins/libkolab/skins/elastic/include/libcalendaring.less +++ b/plugins/libkolab/skins/elastic/include/libcalendaring.less @@ -158,7 +158,8 @@ display: inline; float: none; font-size: 1em; - margin-left: .2rem; + margin-left: .3rem; + color: @color-black-shade-text; } &.req-participant:after { @@ -362,13 +363,9 @@ } .edit-alarm-buttons { - width: 5em; - a { - line-height: 1.2; - display: block; + line-height: 1; padding: .375em .25em; - float: left; margin: 0 .25rem; &:before { @@ -386,6 +383,10 @@ display: none; } + .edit-alarm-item:not(.first) .add-alarm { + display: none; + } + .edit-alarm-type { flex: 1; } diff --git a/plugins/libkolab/skins/elastic/include/tasklist.less b/plugins/libkolab/skins/elastic/include/tasklist.less index 9e021ebf..8345e094 100644 --- a/plugins/libkolab/skins/elastic/include/tasklist.less +++ b/plugins/libkolab/skins/elastic/include/tasklist.less @@ -170,13 +170,17 @@ } span.date { - font-size: 90%; - line-height: 1.8em; - color: @color-list-secondary; + position: absolute; padding-left: .2em; + font-size: 90%; + line-height: 2.5; + color: @color-list-secondary; + cursor: pointer; input { - // TODO + line-height: 1; + padding: 0; + margin-top: -2px; } } @@ -239,6 +243,26 @@ } } +html.touch #tasklist { + li { + font-size: 1rem; + } + + span.flagged, + input[type=checkbox], + .icon-checkbox + label { + display: none; + } + + span.title { + margin-right: .5rem; + } + + span.tags { + right: .5rem; + } +} + #taskshow { & + .formbuttons { button.disabled { @@ -272,10 +296,6 @@ font-size: .9em; } - &.status-cancelled { - // TODO - } - .attachmentslist li { margin-right: 1em; } @@ -302,18 +322,6 @@ } } -.taskitem-draghelper { - .overflow-ellipsis; -} - -.quickview-active { - // TODO -} - -#rootdroppable { - // TODO ? -} - #print-layout { #tasklist { padding: 0; @@ -339,3 +347,16 @@ } } } + +.taskitem-draghelper { + .overflow-ellipsis; +} + +.quickview-active { + // TODO ? +} + +#rootdroppable { + // TODO ? +} + diff --git a/plugins/libkolab/skins/elastic/libkolab.less b/plugins/libkolab/skins/elastic/libkolab.less index b00e9ad3..0222ef18 100644 --- a/plugins/libkolab/skins/elastic/libkolab.less +++ b/plugins/libkolab/skins/elastic/libkolab.less @@ -91,14 +91,16 @@ } } - a.quickview:before { - content: @fa-var-eye; - opacity: .2; - color: @color-link; - } + a.quickview { + &:before { + content: @fa-var-eye; + opacity: .2; + color: @color-link; + } - a.quickview:after { - display: none !important; + &:after { + display: none !important; + } } &.focusview { @@ -211,6 +213,7 @@ position: relative !important; margin: 0 .3em 0 -1em !important; right: 0 !important; + font-size: 1.15em; } } @@ -246,6 +249,13 @@ html.touch .listing { height: @listing-touch-line-height !important; } } + + .actions { + margin-left: .2rem; + a { + margin-right: .5rem; + } + } } } diff --git a/plugins/tasklist/localization/en_US.inc b/plugins/tasklist/localization/en_US.inc index bea6c5e0..b878f10b 100644 --- a/plugins/tasklist/localization/en_US.inc +++ b/plugins/tasklist/localization/en_US.inc @@ -75,7 +75,7 @@ $labels['removetag'] = 'Remove'; $labels['removelink'] = 'Remove email reference'; $labels['auto'] = 'Auto'; -$labels['taskdetails'] = 'Details'; +$labels['taskdetails'] = 'Task details'; $labels['newtask'] = 'New Task'; $labels['edittask'] = 'Edit Task'; $labels['save'] = 'Save'; diff --git a/plugins/tasklist/skins/elastic/templates/mainview.html b/plugins/tasklist/skins/elastic/templates/mainview.html index 0dd6ae91..33e9c2de 100644 --- a/plugins/tasklist/skins/elastic/templates/mainview.html +++ b/plugins/tasklist/skins/elastic/templates/mainview.html @@ -119,64 +119,64 @@

- - + +
- - + +
- - + +
- - + +
- - + +
- - + +
- - + +
- - + +
- - + +
- - + +
- -
+ +
- - + +
- - + +
- - + +