From 80098df3dddd65295988221477aea8a5dba7bc5c Mon Sep 17 00:00:00 2001 From: Elisabeth Dickinson Date: Tue, 9 May 2023 15:44:57 +0000 Subject: [PATCH] [FIX] *: fix ribbons position and size This commit fixes the ribbons used in `kanban` and `form` views. The SCSS uses the square root of the parent `div.ribbon` to calculate its diagonal width and applies that width to the child `span`. After changing the ribbon's transform-origin, we calculate the ribbon's position based on CSS variables of the view's top padding,the height of the ribbon and the shadow's size (to avoid it being cropped by overflow-hidden). By changing the values of a few of these variables in the kanban view, we were able to remove all the specific SCSS related to ribbons in the modules. Other changes were applied inside some of the modules to make this work: - `event`: padding corrections on the kanban's cards; - `hr_holidays: replaced `margin:0` in the SCSS with negative margin utility classes on the element to achieve the same visual result; - `discuss`: moved the ribbon to the parent element; - this was also done to `discuss`, `survey` and `helpdesk`; - `crm_team_view` in `sales_team`: the ribbon's height made it overflow from the kanban's card. We fixed this by changing the value of one of the CSS variables in the view's SCSS file; - the same thing was done in `survey` and `appointment`; - `website_event_exhibitor` had some SCSS that wasn't being used because it uses `.o_ribbon` instead of `.ribbon` task-2818586 Part-of: odoo/odoo#116641 --- addons/crm/static/src/scss/crm.scss | 21 ------- addons/event/static/src/scss/event.scss | 20 ------- .../event/views/event_registration_views.xml | 10 ++-- .../hr_holidays/static/src/scss/time_off.scss | 6 -- addons/hr_holidays/views/hr_leave_views.xml | 2 +- .../static/src/scss/hr_job.scss | 46 --------------- .../views/hr_applicant_views.xml | 2 +- addons/mail/static/src/scss/kanban_view.scss | 20 ------- addons/mail/views/discuss_channel_views.xml | 20 ++++--- .../static/src/scss/crm_team_views.scss | 18 +----- .../static/src/scss/survey_survey_views.scss | 52 ++-------------- addons/survey/views/survey_survey_views.xml | 8 +-- .../src/views/kanban/kanban_controller.scss | 11 ++++ .../src/views/widgets/ribbon/ribbon.scss | 59 +++++++++++-------- .../src/scss/event_templates_sponsor.scss | 28 --------- .../static/src/scss/slide_views.scss | 24 -------- .../base/static/src/scss/res_partner.scss | 22 ------- .../static/tests/tours/main_flow.js | 2 +- 18 files changed, 72 insertions(+), 299 deletions(-) diff --git a/addons/crm/static/src/scss/crm.scss b/addons/crm/static/src/scss/crm.scss index d8497d06dc6..5aede173ca7 100644 --- a/addons/crm/static/src/scss/crm.scss +++ b/addons/crm/static/src/scss/crm.scss @@ -7,27 +7,6 @@ } .o_opportunity_kanban .o_kanban_renderer { - .ribbon { - &::before, &::after { - display: none; - } - span { - padding: 5px; - font-size: small; - z-index: 0; - } - } - - .ribbon-top-right { - margin-top: -9px; - span { - left: 12px; - right: 30px; - height: 25px; - top: 18px; - } - } - .oe_kanban_card_ribbon { min-height: 105px; .o_kanban_record_title { diff --git a/addons/event/static/src/scss/event.scss b/addons/event/static/src/scss/event.scss index 5fc7356516e..86b383f6312 100644 --- a/addons/event/static/src/scss/event.scss +++ b/addons/event/static/src/scss/event.scss @@ -24,26 +24,6 @@ } } .oe_kanban_card_ribbon { - min-height: 95px; - .ribbon { - &::before, &::after { - display: none; - } - span { - padding: 5px; - font-size: small; - z-index: 0; - } - } - .ribbon-top-right { - margin-top: -1px; - span { - left: 7px; - right: 30px; - height: 25px; - top: 18px; - } - } // Used for "Group By" div.row { min-height: 95px; diff --git a/addons/event/views/event_registration_views.xml b/addons/event/views/event_registration_views.xml index 9861cb122ca..eecc9f6266e 100644 --- a/addons/event/views/event_registration_views.xml +++ b/addons/event/views/event_registration_views.xml @@ -141,14 +141,14 @@ -
+
Archived
-
-
+
+
-
+
Booked by @@ -162,7 +162,7 @@
-
+
diff --git a/addons/hr_holidays/static/src/scss/time_off.scss b/addons/hr_holidays/static/src/scss/time_off.scss index 7b656207d5e..1f0504b07f1 100644 --- a/addons/hr_holidays/static/src/scss/time_off.scss +++ b/addons/hr_holidays/static/src/scss/time_off.scss @@ -1,14 +1,8 @@ .o_hr_leave_form { .o_form_sheet { - padding: 0!important; overflow: hidden; - .ribbon-top-right { - top: 16px; - right: -8px; - } } .o_hr_leave_content { - margin: 0; .o_group { margin: 0; } diff --git a/addons/hr_holidays/views/hr_leave_views.xml b/addons/hr_holidays/views/hr_leave_views.xml index e7daf15443a..a1e1cc6c4ff 100644 --- a/addons/hr_holidays/views/hr_leave_views.xml +++ b/addons/hr_holidays/views/hr_leave_views.xml @@ -241,7 +241,7 @@ -
+
diff --git a/addons/hr_recruitment/static/src/scss/hr_job.scss b/addons/hr_recruitment/static/src/scss/hr_job.scss index a48c06f303d..c3b3a2385ef 100644 --- a/addons/hr_recruitment/static/src/scss/hr_job.scss +++ b/addons/hr_recruitment/static/src/scss/hr_job.scss @@ -7,27 +7,6 @@ } } - .ribbon { - &::before, &::after { - display: none; - } - - span { - padding: 5px; - font-size: small; - z-index: unset; - height: auto; - } - } - .ribbon-top-right { - margin-top: -$o-kanban-dashboard-vpadding; - - span { - left: 0px; - right: 30px; - } - } - .text_top_padding{ padding-top: 0.375rem; } @@ -62,31 +41,6 @@ } } -.o_kanban_applicant { - .o_kanban_renderer { - .ribbon { - &::before, &::after { - display: none; - } - - span { - padding: 5px; - font-size: x-small; - z-index: unset; - height: auto; - } - } - .ribbon-top-right { - margin-top: -$o-kanban-dashboard-vpadding; - - span { - top: 10px; - left: 20px; - } - } - } -} - .o_kanban_view { .oe_kanban_card { .o_kanban_state_with_padding { diff --git a/addons/hr_recruitment/views/hr_applicant_views.xml b/addons/hr_recruitment/views/hr_applicant_views.xml index 20c1e66d02f..c161489483d 100644 --- a/addons/hr_recruitment/views/hr_applicant_views.xml +++ b/addons/hr_recruitment/views/hr_applicant_views.xml @@ -331,7 +331,7 @@
-
+
Hired
Refused diff --git a/addons/mail/static/src/scss/kanban_view.scss b/addons/mail/static/src/scss/kanban_view.scss index 46ea5587104..2df6a5479e6 100644 --- a/addons/mail/static/src/scss/kanban_view.scss +++ b/addons/mail/static/src/scss/kanban_view.scss @@ -4,26 +4,6 @@ $o-kanban-attachement-image-size: 80px; .o_module_desc_short { max-width: 90%; } - .ribbon { - &::before, &::after { - display: none; - } - - span { - padding: 5px; - font-size: x-small; - z-index: unset; - height: auto; - } - } - .ribbon-top-right { - margin-top: 54px; - - span { - top: 15px; - left: 10px; - } - } } .o_kanban_renderer { diff --git a/addons/mail/views/discuss_channel_views.xml b/addons/mail/views/discuss_channel_views.xml index 9aaf53878ed..efb29bd74e5 100644 --- a/addons/mail/views/discuss_channel_views.xml +++ b/addons/mail/views/discuss_channel_views.xml @@ -20,18 +20,20 @@
-
+
Archived
- Channel -
-

#

-

- -

- - +
+ Channel +
+

#

+

+ +

+ + +
diff --git a/addons/sales_team/static/src/scss/crm_team_views.scss b/addons/sales_team/static/src/scss/crm_team_views.scss index 760712cd31e..73f55c96ba3 100644 --- a/addons/sales_team/static/src/scss/crm_team_views.scss +++ b/addons/sales_team/static/src/scss/crm_team_views.scss @@ -14,22 +14,6 @@ } } .ribbon { - &::before, &::after { - display: none; - } - - span { - padding: 5px; - font-size: small; - height: auto; - } - } - .ribbon-top-right { - margin-top: -$o-kanban-dashboard-vpadding; - - span { - left: 0px; - right: 30px; - } + --Ribbon-wrapper-width: 6rem; } } diff --git a/addons/survey/static/src/scss/survey_survey_views.scss b/addons/survey/static/src/scss/survey_survey_views.scss index 69f4ef5f166..3edfe258a75 100644 --- a/addons/survey/static/src/scss/survey_survey_views.scss +++ b/addons/survey/static/src/scss/survey_survey_views.scss @@ -31,7 +31,7 @@ width: 100%; margin: 0px; } - + .o_survey_kanban_card { border-top: 0px !important; } @@ -81,54 +81,10 @@ // Ungrouped specific .o_survey_kanban_card_ungrouped { .ribbon { - // Desktop: finishes on next kanban card line - height: 77px; - width: 130px; + --Ribbon-wrapper-width: 6rem; - // Mobile: is in a corner, takes more place @include media-breakpoint-down(md) { - height: 100px; - width: 100px; - } - - &-top-right { - margin-top: -$o-kanban-inside-vgutter; - right: 0; - - & span { - left: -8px; - top: 24px; - } - } - - & span { - font-size: 1rem; - width: 150px; - height: 32px; - } - } - } - // Grouped specific - .o_survey_kanban_card_grouped { - .ribbon { - height: 90px; - width: 98px; - - &-top-right { - margin-top: -$o-kanban-inside-vgutter; - right: 0; - - & span { - left: -8px; - top: 16px; - } - } - - & span { - font-size: 1rem; - width: 150px; - height: 32px; - padding: 0 8px; + --Ribbon-wrapper-width: 6.5rem; } } } @@ -140,7 +96,7 @@ background-color: var(--SurveyForm__section-background-color, #DDD); border-top: 1px solid #BBB; border-bottom: 1px solid #BBB; - + > td { background: transparent; } diff --git a/addons/survey/views/survey_survey_views.xml b/addons/survey/views/survey_survey_views.xml index 134172a974d..63c172584a5 100644 --- a/addons/survey/views/survey_survey_views.xml +++ b/addons/survey/views/survey_survey_views.xml @@ -241,6 +241,9 @@ o_survey_kanban_card #{record.certification.raw_value ? 'o_survey_kanban_card_certification' : ''}">
+
@@ -324,9 +327,6 @@ End Live Session
-
@@ -356,7 +356,7 @@ % Success - +
diff --git a/addons/web/static/src/views/kanban/kanban_controller.scss b/addons/web/static/src/views/kanban/kanban_controller.scss index c7551a43c59..be79f524f50 100644 --- a/addons/web/static/src/views/kanban/kanban_controller.scss +++ b/addons/web/static/src/views/kanban/kanban_controller.scss @@ -36,6 +36,17 @@ --KanbanColumn__highlight-border: #{$o-action}; --o-view-nocontent-zindex: 1; + + // ---------------------------------------------------------------------------- + // Inner components contextual adaptations + + --Ribbon-font-size: #{$font-size-sm}; + --Ribbon-gap-top: calc(var(--KanbanRecord-padding-v) * -1 - #{$border-width}); + --Ribbon-gap-right: 0; + --Ribbon-wrapper-width: 6.5rem; + --Ribbon-height: calc(var(--Ribbon-font-size) * 2); + --Ribbon-z-index: 0; + // ---------------------------------------------------------------------------- border-top: $border-width solid var(--Kanban-background); diff --git a/addons/web/static/src/views/widgets/ribbon/ribbon.scss b/addons/web/static/src/views/widgets/ribbon/ribbon.scss index c231abf7969..9a87bbc3461 100644 --- a/addons/web/static/src/views/widgets/ribbon/ribbon.scss +++ b/addons/web/static/src/views/widgets/ribbon/ribbon.scss @@ -1,50 +1,57 @@ .ribbon { - width: 150px; - height: 150px; + --Ribbon-wrapper-width-default: 10rem; + --Ribbon-wrapper-height: var(--Ribbon-wrapper-width, var(--Ribbon-wrapper-width-default)); + + width: var(--Ribbon-wrapper-width, var(--Ribbon-wrapper-width-default)); + height: var(--Ribbon-wrapper-height); overflow: hidden; position: absolute; & span { - z-index: 1; + --Ribbon-font-size-default: #{$font-size-lg}; + --Ribbon-height-default: calc(var(--Ribbon-font-size, var(--Ribbon-font-size-default)) * 2.5); + --Ribbon-shadow-distance: .25rem; + --Ribbon-shadow-blur: .5rem; + --Ribbon-z-index: 1; + + z-index: var( --Ribbon-z-index); position: absolute; - display: grid; - align-items: center; - width: 225px; - height: 48px; - padding: 0 44px; - box-shadow: 0 5px 10px rgba(0, 0, 0, .1); - color: #fff; - font: 700 18px/1 'Lato', sans-serif; + width: 141.421%; //Square root of 2 to get the diagonal of the parent + height: var(--Ribbon-height, var(--Ribbon-height-default)); + box-shadow: 0 var(--Ribbon-shadow-distance) var(--Ribbon-shadow-blur) rgba(0, 0, 0, .1); + color: $white; + font-size: var(--Ribbon-font-size, var(--Ribbon-font-size-default)); + line-height: var(--Ribbon-height, var(--Ribbon-height-default)); + font-weight: $font-weight-bolder; + font-family: 'Lato', sans-serif; text-shadow: 0 1px 1px rgba(0, 0, 0, .2); text-transform: uppercase; text-align: center; overflow: hidden; user-select: none; + transform-origin: left bottom; + pointer-events: none; &.o_small { - font-size: 12px; + font-size: $font-size-sm } &.o_medium { - font-size: 15px; + font-size: $font-size-base; } } &-top-right { - margin-top: -$o-sheet-vpadding; - right: 0; + --Ribbon-gap-top-default: calc(var(--formView-sheet-padding-y, 0) * -1 - #{$border-width}); + --Ribbon-gap-right-default: -#{$border-width}; - &::before { - top: 0; - left: 0; - } - - &::after { - bottom: 0; - right: 0; - } + margin-top: var(--Ribbon-gap-top, var(--Ribbon-gap-top-default)); + right: var(--Ribbon-gap-right, var(--Ribbon-gap-right-default)); & span { - left: -15px; - top: 30px; + --Ribbon-top-position-default: calc((var(--Ribbon-height-default) * -1)); + --Ribbon-left-position-default: calc(var(--Ribbon-shadow-distance) + var(--Ribbon-shadow-blur)); + + left: var(--Ribbon-left-position, var(--Ribbon-left-position-default)); + top: var(--Ribbon-top-position, var(--Ribbon-top-position-default)); transform: rotate(45deg); } } diff --git a/addons/website_event_exhibitor/static/src/scss/event_templates_sponsor.scss b/addons/website_event_exhibitor/static/src/scss/event_templates_sponsor.scss index 16a23a17848..daecd7900a7 100644 --- a/addons/website_event_exhibitor/static/src/scss/event_templates_sponsor.scss +++ b/addons/website_event_exhibitor/static/src/scss/event_templates_sponsor.scss @@ -57,34 +57,6 @@ margin: 0 -1px -1px 0; cursor: pointer; - .ribbon-wrapper { - width: 50px; - height: 50px; - } - - .ribbon { - font: bold 10px Sans-Serif; - padding: 2px 0; - top: 10px; - width: 70px; - background-image: none; // not needed if colors for ribbons (Gold,Silver,Bronze) is removed in website_event_track.css - - &.ribbon_Gold { - background-color: #e3aa24; - color:$white; - } - - &.ribbon_Silver { - background-color: #adb5bd; - color: $white; - } - - &.ribbon_Bronze { - background-color: #c7632a; - color: $white; - } - } - &:before { content: ""; display: block; diff --git a/addons/website_slides/static/src/scss/slide_views.scss b/addons/website_slides/static/src/scss/slide_views.scss index 174f5bc65b7..b75247d0fde 100644 --- a/addons/website_slides/static/src/scss/slide_views.scss +++ b/addons/website_slides/static/src/scss/slide_views.scss @@ -17,27 +17,3 @@ table.o_section_list_view tr.o_data_row.o_is_section { border-top: 1px solid #BBB; border-bottom: 1px solid #BBB; } - -// Ribbon specific style for channel and attendee kanban -.o_slide_channel_kanban .o_kanban_renderer { - .ribbon { - &::before, &::after { - display: none; - } - - span { - padding: 5px; - font-size: small; - z-index: unset; - height: auto; - } - } - .ribbon-top-right { - margin-top: -$o-kanban-dashboard-vpadding; - - span { - left: 0px; - right: 30px; - } - } -} diff --git a/odoo/addons/base/static/src/scss/res_partner.scss b/odoo/addons/base/static/src/scss/res_partner.scss index 0935e1de1ec..7115b9edcc3 100644 --- a/odoo/addons/base/static/src/scss/res_partner.scss +++ b/odoo/addons/base/static/src/scss/res_partner.scss @@ -1,26 +1,4 @@ .o_kanban_view .o_res_partner_kanban { - - .ribbon { - &::before, &::after { - display: none; - } - - span { - padding: 5px; - font-size: x-small; - z-index: unset; - height: auto; - } - } - .ribbon-top-right { - margin-top: -$o-kanban-dashboard-vpadding; - - span { - top: 15px; - left: 10px; - } - } - .oe_kanban_action_a:hover > .badge { background-color: $o-brand-primary; color: white; diff --git a/odoo/addons/test_main_flows/static/tests/tours/main_flow.js b/odoo/addons/test_main_flows/static/tests/tours/main_flow.js index 38ec766b6eb..1d76c1ef9bf 100644 --- a/odoo/addons/test_main_flows/static/tests/tours/main_flow.js +++ b/odoo/addons/test_main_flows/static/tests/tours/main_flow.js @@ -873,7 +873,7 @@ stepUtils.mobileModifier(stepUtils.autoExpandMoreButtons('.o_control_panel .brea }, { edition: "community", content: "wait for payment registration to succeed", - trigger: "span.bg-success:contains('Paid')", + trigger: "span.text-bg-success:contains('Paid')", auto: true, run() {} },{