From ed2773e381585ee3fd0c6b90e6f97f8f1237e6f4 Mon Sep 17 00:00:00 2001 From: sri-odoo Date: Fri, 14 Sep 2018 11:42:07 +0200 Subject: [PATCH] =?UTF-8?q?[REF]=20mail:=20activities=20list,=20=E2=80=98m?= =?UTF-8?q?ark=20as=20done=E2=80=99=20sliding=20panel?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Refactor ‘mark as done’ popup JS in order to use a sliding panel layout instead. Sliding panels are currently needed in kanban views, where activities are listed in a dropdown that can't handle popups because of CSS overflow and lack of space. Since this new system check for default bootstrap data-toggle attributes, it could be easily used elsewhere changing the buttons's data-toggle and providing the necessary container for the “mark as done” form. --- addons/mail/static/src/js/activity.js | 101 +++++++++++++----- .../mail/static/src/scss/mail_activity.scss | 77 ++++++------- .../static/src/xml/web_kanban_activity.xml | 77 +++++++------ addons/mail/static/tests/activity_tests.js | 8 +- addons/mail/static/tests/chatter_tests.js | 7 +- 5 files changed, 155 insertions(+), 115 deletions(-) diff --git a/addons/mail/static/src/js/activity.js b/addons/mail/static/src/js/activity.js index cabcd469b5c..65a4f0a6f2e 100644 --- a/addons/mail/static/src/js/activity.js +++ b/addons/mail/static/src/js/activity.js @@ -271,39 +271,55 @@ var BasicActivity = AbstractField.extend({ ev.stopPropagation(); ev.preventDefault(); var self = this; - var $popoverElement = $(ev.currentTarget); - var activityID = $popoverElement.data('activity-id'); - var previousActivityTypeID = $popoverElement.data('previous-activity-type-id'); - var forceNextActivity = $popoverElement.data('force-next-activity'); - if (!$popoverElement.data('bs.popover')) { - $popoverElement.popover({ + var $markDoneBtn = $(ev.currentTarget); + var activityID = $markDoneBtn.data('activity-id'); + var previousActivityTypeID = $markDoneBtn.data('previous-activity-type-id'); + var forceNextActivity = $markDoneBtn.data('force-next-activity'); + + if ($markDoneBtn.data('toggle') == 'collapse') { + var $actLi = $markDoneBtn.parents('.o_log_activity'); + var $panel = self.$('#o_activity_form_' + activityID); + + if (!$panel.data('bs.collapse')) { + var $form = $(QWeb.render('mail.activity_feedback_form', { previous_activity_type_id: previousActivityTypeID, force_next: forceNextActivity})); + $panel.append($form); + self._onMarkActivityDoneActions($markDoneBtn, $form, activityID); + + // Close and reset any other open panels + _.each($panel.siblings('.o_activity_form'), function (el) { + if ($(el).data('bs.collapse')) { + $(el).empty().collapse('dispose').removeClass('show'); + } + }); + + // Scroll to selected activity + $markDoneBtn.parents('.o_activity_log_container').scrollTo($actLi.position().top, 100); + } + + // Empty and reset panel on close + $panel.on('hidden.bs.collapse', function () { + if ($panel.data('bs.collapse')) { + $actLi.removeClass('o_activity_selected'); + $panel.collapse('dispose'); + $panel.empty(); + } + }); + + this.$('.o_activity_selected').removeClass('o_activity_selected'); + $actLi.toggleClass('o_activity_selected'); + $panel.collapse('toggle'); + + } else if (!$markDoneBtn.data('bs.popover')) { + $markDoneBtn.popover({ template: $(Popover.Default.template).addClass('o_mail_activity_feedback')[0].outerHTML, // Ugly but cannot find another way - container: $popoverElement, + container: $markDoneBtn, title : _t("Feedback"), html: true, trigger:'click', placement: 'right', // FIXME: this should work, maybe a bug in the popper lib content : function () { var $popover = $(QWeb.render('mail.activity_feedback_form', { previous_activity_type_id: previousActivityTypeID, force_next: forceNextActivity})); - $popover.find('#activity_feedback').val(self._draftFeedback[activityID]); - $popover.on('click', '.o_activity_popover_done', function (ev) { - ev.stopPropagation(); - self._markActivityDone({ - activityID: activityID, - feedback: _.escape($popover.find('#activity_feedback').val()), - }); - }); - $popover.on('click', '.o_activity_popover_done_next', function (ev) { - ev.stopPropagation(); - self._markActivityDoneAndScheduleNext({ - activityID: activityID, - feedback: _.escape($popover.find('#activity_feedback').val()), - }); - }); - $popover.on('click', '.o_activity_popover_discard', function (ev) { - ev.stopPropagation(); - $popoverElement.popover('hide'); - }); + self._onMarkActivityDoneActions($markDoneBtn, $popover, activityID); return $popover; }, }).on('shown.bs.popover', function () { @@ -315,6 +331,39 @@ var BasicActivity = AbstractField.extend({ }).popover('show'); } }, + /** + * Bind all necessary actions to the 'mark as done' form + * + * @private + * @param {Object} $form + * @param {integer} activityID + */ + _onMarkActivityDoneActions: function ($btn, $form, activityID) { + var self = this; + $form.find('#activity_feedback').val(self._draftFeedback[activityID]); + $form.on('click', '.o_activity_popover_done', function (ev) { + ev.stopPropagation(); + self._markActivityDone({ + activityID: activityID, + feedback: _.escape($form.find('#activity_feedback').val()), + }); + }); + $form.on('click', '.o_activity_popover_done_next', function (ev) { + ev.stopPropagation(); + self._markActivityDoneAndScheduleNext({ + activityID: activityID, + feedback: _.escape($form.find('#activity_feedback').val()), + }); + }); + $form.on('click', '.o_activity_popover_discard', function (ev) { + ev.stopPropagation(); + if ($btn.data('bs.popover')) { + $btn.popover('hide'); + } else if ($btn.data('toggle') == 'collapse') { + self.$('#o_activity_form_' + activityID).collapse('hide'); + } + }); + }, /** * @private * @param {MouseEvent} ev diff --git a/addons/mail/static/src/scss/mail_activity.scss b/addons/mail/static/src/scss/mail_activity.scss index cdd8bbe1cb5..16ad01a83b0 100644 --- a/addons/mail/static/src/scss/mail_activity.scss +++ b/addons/mail/static/src/scss/mail_activity.scss @@ -123,13 +123,13 @@ } .o_activity_color_planned { - color: theme-color('success'); + color: darken(theme-color('success'), 10%); } .o_activity_color_overdue { - color: theme-color('danger'); + color: darken(theme-color('danger'), 10%); } .o_activity_color_today { - color: theme-color('warning'); + color: darken(theme-color('warning'), 10%); } } @@ -160,62 +160,45 @@ } } - .o_activity_link_kanban { - visibility: hidden; - @include media-breakpoint-down(sm) { - visibility: visible; - } - } - - .o_activity_template_preview,.o_activity_template_send { - font-weight: bold; - color: $o-brand-primary; - cursor: pointer; - &:hover:not(.active) { - color: darken($o-brand-primary, 15%); - border-color: darken($o-brand-primary, 15%); - } - } - div.o_activity { min-width: 290px; padding: 0px 0px; - > :last-child { - background-color: $o-brand-lightsecondary; - line-height: 3em; - } - ul.o_activity_log { + .o_activity_log_container { max-height: 300px; overflow-y: auto; + } + + ul.o_activity_log { color: $body-color; li { - width: 100%; - display: inline-block; - - &.o_activity_label { - line-height: 2.5em; - padding: 0px 5px; - background-color: $o-brand-lightsecondary; + .o_activity_title_entry { + display: flex; + align-items: baseline; } - &.o_log_activity { - padding: 8px 10px 8px 0px; - vertical-align: middle; - &:hover { - background-color: theme-color('light'); - .o_activity_link_kanban { - visibility: visible; - } - } + .o_edit_button { + opacity: 0.5; + } - .o_activity_title { - width: 85%; - padding: 0px 5px 0px 10px; - white-space: nowrap; - text-overflow: ellipsis; - } + &:hover .o_edit_button{ + opacity: 1; + } + + .o_activity_link_kanban { + font-size: 1.5em; + @include o-hover-text-color($text-muted, theme-color('success')); + @include o-hover-opacity(0.5, 1); + } + + &.o_activity_selected { + border-bottom: 0; + } + + &.o_activity_form > div { + padding-top: 0.5em; + padding-bottom: 0.7em; } } } diff --git a/addons/mail/static/src/xml/web_kanban_activity.xml b/addons/mail/static/src/xml/web_kanban_activity.xml index 25d25c1d09b..eb71ba044c2 100644 --- a/addons/mail/static/src/xml/web_kanban_activity.xml +++ b/addons/mail/static/src/xml/web_kanban_activity.xml @@ -20,58 +20,65 @@ No activities planned. -
-