From df6373970c50b6ef45aff5ecbd341d2181460a0b Mon Sep 17 00:00:00 2001 From: "stefanorigano (SRI)" Date: Mon, 3 Oct 2022 10:49:11 +0000 Subject: [PATCH] [IMP] mail: `topChatter`, review design task-3005130 Part-of: odoo/odoo#102528 --- .../components/activity_box/activity_box.scss | 8 +++ .../attachment_list/attachment_list.scss | 3 + .../static/src/components/chatter/chatter.xml | 2 +- .../chatter_container/chatter_container.scss | 8 ++- .../chatter_container/chatter_container.xml | 2 +- .../chatter_topbar/chatter_topbar.scss | 43 +++++++------- .../chatter_topbar/chatter_topbar.xml | 56 +++++++++---------- .../src/components/composer/composer.xml | 1 - .../follow_button/follow_button.xml | 6 +- .../follower_list_menu/follower_list_menu.xml | 4 +- .../src/components/message/message.scss | 4 ++ .../mail/static/src/models/chatter_topbar.js | 21 ++----- .../widgets/form_renderer/form_renderer.scss | 28 ++++++++-- .../components/chatter_topbar_tests.js | 40 ++----------- .../widgets/form_renderer_tests.js | 4 +- .../static/src/scss/secondary_variables.scss | 1 - .../search/control_panel/control_panel.scss | 5 +- .../form/control_panel/form_control_panel.xml | 4 +- .../src/views/form/form_controller.scss | 1 - 19 files changed, 114 insertions(+), 127 deletions(-) create mode 100644 addons/mail/static/src/components/attachment_list/attachment_list.scss diff --git a/addons/mail/static/src/components/activity_box/activity_box.scss b/addons/mail/static/src/components/activity_box/activity_box.scss index be4ed44a19c..859c17358cb 100644 --- a/addons/mail/static/src/components/activity_box/activity_box.scss +++ b/addons/mail/static/src/components/activity_box/activity_box.scss @@ -1,3 +1,11 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_ActivityBox_activityList { + max-width: var(--Chatter-max-width, none); +} + // ------------------------------------------------------------------ // Style // ------------------------------------------------------------------ diff --git a/addons/mail/static/src/components/attachment_list/attachment_list.scss b/addons/mail/static/src/components/attachment_list/attachment_list.scss new file mode 100644 index 00000000000..cf6f7960378 --- /dev/null +++ b/addons/mail/static/src/components/attachment_list/attachment_list.scss @@ -0,0 +1,3 @@ +.o_AttachmentList { + max-width: var(--Chatter-max-width, none); +} diff --git a/addons/mail/static/src/components/chatter/chatter.xml b/addons/mail/static/src/components/chatter/chatter.xml index bf8a1a8b851..a35a2f257c4 100644 --- a/addons/mail/static/src/components/chatter/chatter.xml +++ b/addons/mail/static/src/components/chatter/chatter.xml @@ -18,7 +18,7 @@ diff --git a/addons/mail/static/src/components/chatter_container/chatter_container.scss b/addons/mail/static/src/components/chatter_container/chatter_container.scss index 8ab3fd3e09b..7d5f460f6f2 100644 --- a/addons/mail/static/src/components/chatter_container/chatter_container.scss +++ b/addons/mail/static/src/components/chatter_container/chatter_container.scss @@ -1,3 +1,7 @@ -.o_ChatterContainer.o-isInFormSheetBg { - max-width: $o-form-view-sheet-max-width; +.o_ChatterContainer { + width: 100%; + + &.o-isInFormSheetBg { + max-width: $o-form-view-sheet-max-width; + } } diff --git a/addons/mail/static/src/components/chatter_container/chatter_container.xml b/addons/mail/static/src/components/chatter_container/chatter_container.xml index a19a5868d0a..5ab821d3e87 100644 --- a/addons/mail/static/src/components/chatter_container/chatter_container.xml +++ b/addons/mail/static/src/components/chatter_container/chatter_container.xml @@ -2,7 +2,7 @@ -
+
diff --git a/addons/mail/static/src/components/chatter_topbar/chatter_topbar.scss b/addons/mail/static/src/components/chatter_topbar/chatter_topbar.scss index dcb2fe4a220..97628dcc59e 100644 --- a/addons/mail/static/src/components/chatter_topbar/chatter_topbar.scss +++ b/addons/mail/static/src/components/chatter_topbar/chatter_topbar.scss @@ -3,34 +3,31 @@ // ------------------------------------------------------------------ .o_ChatterTopbar { - // We use min-height to allow multiples buttons lines on mobile. - min-height: $o-statusbar-height + $border-width; + min-height: $o-statusbar-height; + box-sizing: content-box; + + @include media-breakpoint-down(md) { + overflow-x: auto; + + &::-webkit-scrollbar { + display: none; + } + } +} + +.o_ChatterTopbar_controllers { + padding-left: var(--ChatterTopbar-padding-left, 0); +} + +.o_ChatterTopbar_tools { + padding-right: var(--ChatterTopbar-padding-right, 0); } .o_ChatterTopbar_button { - margin-bottom: -$border-width; /* Needed to allow "overriding" of the bottom border */ + margin-bottom: var(--ChatterTopbar-padding-v, 0); + margin-top: var(--ChatterTopbar-padding-v, 0); } .o_ChatterTopbar_buttonClose { width: $o-statusbar-height; } - -// ------------------------------------------------------------------ -// Style -// ------------------------------------------------------------------ - -.o_ChatterTopbar_button { - &:hover, &:focus { - background-color: $gray-200; - } - - &.o-active { - @include o-hover-text-color($o-brand-odoo, $link-hover-color); - border-radius: $nav-tabs-border-radius $nav-tabs-border-radius 0 0; - background-color: $gray-100; - - &:focus { - background-color: $gray-200; - } - } -} diff --git a/addons/mail/static/src/components/chatter_topbar/chatter_topbar.xml b/addons/mail/static/src/components/chatter_topbar/chatter_topbar.xml index 773c1144e82..838c38f79ce 100644 --- a/addons/mail/static/src/components/chatter_topbar/chatter_topbar.xml +++ b/addons/mail/static/src/components/chatter_topbar/chatter_topbar.xml @@ -4,14 +4,14 @@
-
- - - - - - - -
+
+
+ + + +
- - + -
+
- diff --git a/addons/mail/static/src/components/follower_list_menu/follower_list_menu.xml b/addons/mail/static/src/components/follower_list_menu/follower_list_menu.xml index 0084a37a085..12bbf073f8c 100644 --- a/addons/mail/static/src/components/follower_list_menu/follower_list_menu.xml +++ b/addons/mail/static/src/components/follower_list_menu/follower_list_menu.xml @@ -5,8 +5,8 @@
- diff --git a/addons/mail/static/src/components/message/message.scss b/addons/mail/static/src/components/message/message.scss index b2a1f6fa485..93f1933335c 100644 --- a/addons/mail/static/src/components/message/message.scss +++ b/addons/mail/static/src/components/message/message.scss @@ -2,6 +2,10 @@ // Layout // ------------------------------------------------------------------ +.o_Message { + max-width: var(--Chatter-max-width, none); +} + .o_Message_actionListContainer { z-index: 10; // Place the element in front of the Composer when they overlap } diff --git a/addons/mail/static/src/models/chatter_topbar.js b/addons/mail/static/src/models/chatter_topbar.js index 9a450dea529..b86e626d27d 100644 --- a/addons/mail/static/src/models/chatter_topbar.js +++ b/addons/mail/static/src/models/chatter_topbar.js @@ -2,8 +2,7 @@ import { registerModel } from '@mail/model/model_core'; import { attr, one } from '@mail/model/model_field'; - -import { sprintf } from '@web/core/utils/strings'; +import { clear } from '@mail/model/model_field_command'; registerModel({ name: 'ChatterTopbar', @@ -14,23 +13,15 @@ registerModel({ attachmentButtonText: attr({ compute() { if (!this.chatter || !this.chatter.thread) { - return; + return clear(); } const attachments = this.chatter.thread.allAttachments; - switch (attachments.length) { - case 0: - return this.env._t("Attach files"); - case 1: - return this.env._t("1 file"); - case 2: - return this.env._t("2 files"); - default: - return sprintf( - this.env._t("%(attachmentCount)s files"), - { attachmentCount: attachments.length } - ); + if (attachments.length === 0) { + return clear(); } + return attachments.length; }, + default: "", }), chatter: one('Chatter', { identifying: true, diff --git a/addons/mail/static/src/widgets/form_renderer/form_renderer.scss b/addons/mail/static/src/widgets/form_renderer/form_renderer.scss index dd11dfcc791..b00435586c3 100644 --- a/addons/mail/static/src/widgets/form_renderer/form_renderer.scss +++ b/addons/mail/static/src/widgets/form_renderer/form_renderer.scss @@ -3,16 +3,32 @@ // ------------------------------------------------------------------ .o_FormRenderer_chatterContainer { - flex: 1 0 auto; + --ChatterTopbar-padding-v: #{map-get($spacers, 2)}; + + @include media-breakpoint-down(md) { + --ChatterTopbar-padding-left: #{$o-horizontal-padding}; + --ChatterTopbar-padding-right: #{$o-horizontal-padding}; + } &.o-aside { + --Chatter-max-width: #{$o-chatter-min-width}; + --ChatterTopbar-padding-left: #{$o-horizontal-padding}; + --ChatterTopbar-padding-right: #{$o-horizontal-padding}; + + flex-shrink: 0; + flex-grow: 0; border-left: $border-width solid; padding: map-get($spacers, 0); - width: $o-chatter-min-width; + min-width: $o-chatter-min-width; + width: auto; .o_Message.o-not-discussion { border-width: $border-width 0; } + + .o_ChatterContainer { + width: auto; + } } &.o-isInFormSheetBg { @@ -21,11 +37,11 @@ border-top: 1px solid $border-color; } - .o_ChatterContainer { - @include make-container-max-widths(); + &:not(.o-aside) .o_ChatterContainer { + @include make-container-max-widths(); - margin-left: auto; - margin-right: auto; + margin-left: auto; + margin-right: auto; } } diff --git a/addons/mail/static/tests/qunit_suite_tests/components/chatter_topbar_tests.js b/addons/mail/static/tests/qunit_suite_tests/components/chatter_topbar_tests.js index 27b74f855e7..0fa4d4a1785 100644 --- a/addons/mail/static/tests/qunit_suite_tests/components/chatter_topbar_tests.js +++ b/addons/mail/static/tests/qunit_suite_tests/components/chatter_topbar_tests.js @@ -9,7 +9,7 @@ QUnit.module('components', {}, function () { QUnit.module('chatter_topbar_tests.js'); QUnit.test('base rendering', async function (assert) { - assert.expect(8); + assert.expect(7); const pyEnv = await startServer(); const resPartnerId1 = pyEnv['res.partner'].create({}); @@ -50,11 +50,6 @@ QUnit.test('base rendering', async function (assert) { 0, "attachments button should not have a loader" ); - assert.strictEqual( - document.querySelectorAll(`.o_ChatterTopbar_buttonAddAttachmentsText`).length, - 1, - "attachments button should have a text" - ); assert.strictEqual( document.querySelectorAll(`.o_ChatterTopbar_followerListMenu`).length, 1, @@ -63,7 +58,7 @@ QUnit.test('base rendering', async function (assert) { }); QUnit.test('base disabled rendering', async function (assert) { - assert.expect(8); + assert.expect(6); const { openView } = await start(); await openView({ @@ -96,16 +91,6 @@ QUnit.test('base disabled rendering', async function (assert) { 0, "attachments button should not have a loader" ); - assert.strictEqual( - document.querySelectorAll(`.o_ChatterTopbar_buttonAddAttachmentsText`).length, - 1, - "attachments button should have a text" - ); - assert.strictEqual( - document.querySelector(`.o_ChatterTopbar_buttonAddAttachmentsText`).textContent, - 'Attach files', - "Add attachments button content should be 'Attach files'" - ); }); QUnit.test('attachment loading is delayed', async function (assert) { @@ -193,7 +178,7 @@ QUnit.test('attachment counter while loading attachments', async function (asser }); QUnit.test('attachment counter transition when attachments become loaded)', async function (assert) { - assert.expect(7); + assert.expect(6); const pyEnv = await startServer(); const resPartnerId1 = pyEnv['res.partner'].create({}); @@ -243,15 +228,10 @@ QUnit.test('attachment counter transition when attachments become loaded)', asyn 0, "attachments button should not have a loader" ); - assert.strictEqual( - document.querySelectorAll(`.o_ChatterTopbar_buttonAddAttachmentsText`).length, - 1, - "attachments button should have a counter" - ); }); QUnit.test('attachment counter without attachments', async function (assert) { - assert.expect(4); + assert.expect(2); const pyEnv = await startServer(); const resPartnerId1 = pyEnv['res.partner'].create({}); @@ -272,16 +252,6 @@ QUnit.test('attachment counter without attachments', async function (assert) { 1, "should have an attachments button in chatter menu" ); - assert.strictEqual( - document.querySelectorAll(`.o_ChatterTopbar_buttonAddAttachmentsText`).length, - 1, - "attachments button should have a counter" - ); - assert.strictEqual( - document.querySelector(`.o_ChatterTopbar_buttonAddAttachmentsText`).textContent, - 'Attach files', - 'attachment counter content should contain "Attach files"' - ); }); QUnit.test('attachment counter with attachments', async function (assert) { @@ -327,7 +297,7 @@ QUnit.test('attachment counter with attachments', async function (assert) { ); assert.strictEqual( document.querySelector(`.o_ChatterTopbar_buttonAttachmentsCount`).textContent, - '2 files', + '2', 'attachment counter content should contain "2 files"' ); }); diff --git a/addons/mail/static/tests/qunit_suite_tests/widgets/form_renderer_tests.js b/addons/mail/static/tests/qunit_suite_tests/widgets/form_renderer_tests.js index 4d63990a93c..42406eec051 100644 --- a/addons/mail/static/tests/qunit_suite_tests/widgets/form_renderer_tests.js +++ b/addons/mail/static/tests/qunit_suite_tests/widgets/form_renderer_tests.js @@ -838,7 +838,7 @@ QUnit.test('Attachments that have been unlinked from server should be visually u ); assert.strictEqual( document.querySelector('.o_ChatterTopbar_buttonCount').textContent, - '2 files', + '2', "Partner1 should have 2 attachments initially" ); @@ -850,7 +850,7 @@ QUnit.test('Attachments that have been unlinked from server should be visually u await click('.o_pager_previous'); assert.strictEqual( document.querySelector('.o_ChatterTopbar_buttonCount').textContent, - '1 file', + '1', "Partner1 should now have 1 attachment after it has been unlinked from server" ); }); diff --git a/addons/web/static/src/scss/secondary_variables.scss b/addons/web/static/src/scss/secondary_variables.scss index fe6743f80e6..1bb16c83305 100644 --- a/addons/web/static/src/scss/secondary_variables.scss +++ b/addons/web/static/src/scss/secondary_variables.scss @@ -1,5 +1,4 @@ $o-webclient-background-color: $o-gray-100 !default; -$o-control-panel-background-color: $o-view-background-color !default; $o-list-footer-color: null !default; $o-list-group-header-color: lighten($o-brand-lightsecondary, 10%) !default; diff --git a/addons/web/static/src/search/control_panel/control_panel.scss b/addons/web/static/src/search/control_panel/control_panel.scss index 9f0dbcb85ba..b955613290f 100644 --- a/addons/web/static/src/search/control_panel/control_panel.scss +++ b/addons/web/static/src/search/control_panel/control_panel.scss @@ -1,12 +1,11 @@ .o_control_panel { border-bottom: 1px solid $border-color; - @include o-webclient-padding($top: 5px, $bottom: 5px); + @include o-webclient-padding($top: map-get($spacers, 2), $bottom: map-get($spacers, 2)); background-color: $o-control-panel-background-color; > div { display: flex; - min-height: 30px; - margin: 5px 0px; + min-height: $o-statusbar-height; } @include media-breakpoint-up(md) { diff --git a/addons/web/static/src/views/form/control_panel/form_control_panel.xml b/addons/web/static/src/views/form/control_panel/form_control_panel.xml index 165afc5c3c5..96a5ecc78a9 100644 --- a/addons/web/static/src/views/form/control_panel/form_control_panel.xml +++ b/addons/web/static/src/views/form/control_panel/form_control_panel.xml @@ -4,7 +4,7 @@
-
+
@@ -17,7 +17,7 @@
-
+