From 6d33510beb8a0cb489044febffffb8ac26f68309 Mon Sep 17 00:00:00 2001 From: Florian Charlier Date: Tue, 12 Oct 2021 16:23:03 +0000 Subject: [PATCH] [IMP] website_slides: enable cover customization PURPOSE Before this commit, the headers for the eLearning module were fixed (Odoo purple gradient or images), and did not always fit with the color theme chosen by the users. This commit enables the customization of these website_slides headers for homepages as well as courses and lessons (on a per-course basis). SPECIFICATIONS This commit replaces the channel and lesson headers with `Cover` snippet, so that they are customizable (by channel) with the website editor. The customization includes background, additional filter, text alignment, and text alignment. The banners for categories of channels ("All courses", "Certifications", and "My courses") are now also customizable, and other website blocks can be added above and below them. Before this commit, the static header background for courses was updated to a different color palette for certification tracks (`website_slides_survey`). With this commit, the aspect of the header will no longer be different when a survey is added but keep the customization (or default value for courses). The `o_wslides_gradient` class is now obsolete and is renamed to different labels depending on its remaining local purpose. The default aspect of courses and lesson without images is therefore switched from the Odoo purple to the theme background color. LINKS Task-2516830 closes odoo/odoo#78257 Signed-off-by: Thibault Delavallee (tde) --- addons/website_slides/__manifest__.py | 2 +- addons/website_slides/models/slide_channel.py | 18 +++ .../static/src/scss/website_slides.scss | 32 ++++-- .../static/src/xml/slide_quiz.xml | 2 +- .../views/website_slides_templates_course.xml | 103 +++++++++--------- .../website_slides_templates_homepage.xml | 34 ++++-- .../views/website_slides_templates_lesson.xml | 64 ++++++----- .../website_slides_templates_profile.xml | 2 +- .../src/scss/website_slides_survey.scss | 4 - 9 files changed, 155 insertions(+), 106 deletions(-) diff --git a/addons/website_slides/__manifest__.py b/addons/website_slides/__manifest__.py index 00c4b7fdbd1..a0a58046f3f 100644 --- a/addons/website_slides/__manifest__.py +++ b/addons/website_slides/__manifest__.py @@ -1,7 +1,7 @@ # -*- coding: utf-8 -*- { 'name': 'eLearning', - 'version': '2.5', + 'version': '2.6', 'sequence': 125, 'summary': 'Manage and publish an eLearning platform', 'website': 'https://www.odoo.com/app/elearning', diff --git a/addons/website_slides/models/slide_channel.py b/addons/website_slides/models/slide_channel.py index e0ae74a9aec..fdda9b34b2d 100644 --- a/addons/website_slides/models/slide_channel.py +++ b/addons/website_slides/models/slide_channel.py @@ -137,12 +137,30 @@ class Channel(models.Model): 'mail.thread', 'rating.mixin', 'mail.activity.mixin', 'image.mixin', + 'website.cover_properties.mixin', 'website.seo.metadata', 'website.published.multi.mixin', 'website.searchable.mixin', ] _order = 'sequence, id' + def _default_cover_properties(self): + """ Cover properties defaults are overridden to keep a consistent look for the slides + channels headers across Odoo versions (pre-customization, with purple gradient fitting the + homepage images, etc). Furthermore, as adding padding to the cover would not look great, + its height is set to fit to content (snippet option to change this also disabled on the view).""" + res = super()._default_cover_properties() + res.update({ + "background_color_class": "o_cc3", + 'background_color_style': ( + 'background-color: rgba(0, 0, 0, 0); ' + 'background-image: linear-gradient(120deg, #875A7B, #78516F);' + ), + 'opacity': '0', + 'resize_class': 'cover_auto' + }) + return res + def _default_access_token(self): return str(uuid.uuid4()) diff --git a/addons/website_slides/static/src/scss/website_slides.scss b/addons/website_slides/static/src/scss/website_slides.scss index fb74c1d2377..2f9febde3f6 100644 --- a/addons/website_slides/static/src/scss/website_slides.scss +++ b/addons/website_slides/static/src/scss/website_slides.scss @@ -33,9 +33,6 @@ $truncate-limits: 2, 3, 10; // Common to new slides pages // ************************************************** -.o_wslides_gradient { - background-image: linear-gradient(120deg, #875A7B, darken(#875A7B, 10%)); -} .o_wslides_course_pict { @include size(100%); @@ -209,6 +206,10 @@ $truncate-limits: 2, 3, 10; } +.o_wslides_card_default_background { + background-color: $o-wslides-color-bg; // same as body +} + // New home page // ************************************************** .o_wslides_home_main { @@ -321,22 +322,26 @@ $truncate-limits: 2, 3, 10; .o_wslides_course_nav_search { border-width: 0 1px; + + button, button:hover, input, input::placeholder { + // Resolves into the color chosen for slide channel description through cover customization + color: inherit; + opacity: 0.8; + } } - .breadcrumb-item, .breadcrumb-item.active{ + .breadcrumb-item { --max-lines: 2; position: relative; max-height: calc(1.4rem * var(--max-lines)); overflow: hidden; text-overflow: ellipsis; - } - .breadcrumb-item.active a, .breadcrumb-item a:hover{ - color: white; - } - - .breadcrumb-item a, .breadcrumb-item + .breadcrumb-item::before, .o_wslides_course_nav_search input::placeholder { - color: rgba(white, 0.8); + a, a:hover, + .breadcrumb-item::before { + // Resolves into the color chosen for slide channel description through cover customization + color: inherit; + opacity: 0.8; + } } } @@ -345,6 +350,9 @@ $truncate-limits: 2, 3, 10; @include media-breakpoint-up(md) { @include o-wslides-header-bar(); } + .o_wslides_header_text { + color:inherit; + } } .o_wslides_course_doc_header { @@ -543,7 +551,7 @@ $truncate-limits: 2, 3, 10; right: 5px; } - .o_wslides_gradient { + .o_wslides_quiz_success_image { width: 42%; } } diff --git a/addons/website_slides/static/src/xml/slide_quiz.xml b/addons/website_slides/static/src/xml/slide_quiz.xml index 755668ac866..cb8c6c72cb1 100644 --- a/addons/website_slides/static/src/xml/slide_quiz.xml +++ b/addons/website_slides/static/src/xml/slide_quiz.xml @@ -125,7 +125,7 @@
-
+
diff --git a/addons/website_slides/views/website_slides_templates_course.xml b/addons/website_slides/views/website_slides_templates_course.xml index b5e5f72bce6..ee2c570be92 100644 --- a/addons/website_slides/views/website_slides_templates_course.xml +++ b/addons/website_slides/views/website_slides_templates_course.xml @@ -12,8 +12,8 @@
  • Courses
    • - -
  • + +
  • @@ -28,7 +28,7 @@
    • -
  • +
    • @@ -38,8 +38,8 @@ - - + + @@ -110,53 +110,58 @@
    -
    - - -
    -
    - -
    -
    -
    -
    - +
    + + + + +
    + +
    +
    + +
    +
    +
    +
    + +
    -
    - -
    -
    -

    -
    + +
    +
    +

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

    @@ -757,9 +762,9 @@ -
    +
    -
    +
    diff --git a/addons/website_slides/views/website_slides_templates_homepage.xml b/addons/website_slides/views/website_slides_templates_homepage.xml index 47215289af3..ec1d409048f 100644 --- a/addons/website_slides/views/website_slides_templates_homepage.xml +++ b/addons/website_slides/views/website_slides_templates_homepage.xml @@ -6,9 +6,10 @@
    -
    +
    +
    -
    +

    Reach new heights

    Start your online course today!

    @@ -19,6 +20,7 @@
    +