[IMP] website: improve theme picker & theme preview

Previously, website's theme picker and theme preview pages suffered from
a dense layout.

With this update, we have transitioned to a more spacious and
user-friendly 4-column layout. Additionally, various UI issues that were
present on both the theme picker and theme preview pages have been
addressed and resolved, further enhancing the overall usability and
visual appeal.

task-3648576

closes odoo#149989

Related: odoo/design-themes#758
Signed-off-by: Soukéina Bojabza (sobo) <[email protected]>

Author: xlu-odoo

addons/theme_default/static/description/theme_default_screenshot.jpg

@@ -1,54 +1,77 @@
 <?xml version="1.0" encoding="utf-8"?>
 <templates id="template" xml:space="preserve">
+    <t t-name="website.ThemePreviewForm.ControlPanel.BreadCrumbs">
+        <t t-set="breadcrumb" t-value="breadcrumbs.slice(-1)[0] || {}"/>        
+        <div class="o_breadcrumb d-flex gap-1">
+            <div class="active d-flex flex-column">
+                <h4 class="mb-0"><t t-call="web.Breadcrumb.Name"/></h4>
+            </div>
+        </div>
+    </t>
+
     <t t-name="website.ThemePreviewForm.ControlPanel" t-inherit="web.ControlPanel" t-inherit-mode="primary">
+        <xpath expr="//*[hasclass('o_control_panel')]" position="attributes">
+            <attribute name="class" remove="pb-3" add="pb-2" separator=" "/>
+        </xpath>
+        <xpath expr="//*[hasclass('o_control_panel_main_buttons')]" position="inside">
+            <button class="o_switch_theme btn btn-secondary d-none d-md-inline-block me-1" t-on-click.stop="this.back">
+                <i class="oi oi-arrow-left" role="img" aria-label="Go Back"/>
+            </button>
+        </xpath>
+        <xpath expr="//*[hasclass('o_control_panel_actions')]" position="attributes">
+            <attribute name="class" remove="justify-content-lg-around" add="justify-content-sm-end flex-grow-1 flex-shrink-1 flex-basis-sm-0" separator=" "/>
+        </xpath>
         <xpath expr="//div[hasclass('o_control_panel_navigation')]" position="replace">
-        <div class="d-none d-md-flex align-items-end justify-content-end order-2 order-lg-1 w-100 gap-1" role="group">
-                <input class="btn-check" id="themeViewerDesktop" type="radio" name="viewer" data-mode='desktop' autocomplete="off" checked='checked'/>
-                <label class="btn btn-secondary" for="themeViewerDesktop" t-on-click="this.onDesktopClick">Desktop</label>
-                <input class="btn-check"  id="themeViewerMobile" type="radio" name="viewer" data-mode='mobile' autocomplete="off"/>
-                <label class="btn btn-secondary" for="themeViewerMobile" t-on-click="this.onMobileClick">Mobile</label>
+            <div class="o_control_panel_switch_device d-none d-lg-flex" role="group">
+                <div class="btn-group">
+                    <input class="btn-check" id="themeViewerDesktop" type="radio" name="viewer" data-mode='desktop' autocomplete="off" checked="checked"/>
+                    <label class="btn btn-secondary" for="themeViewerDesktop" t-on-click="this.onDesktopClick">
+                        <i class="fa fa-fw fa-desktop" role="img" aria-label="Desktop"/>
+                    </label>
+                    <input class="btn-check"  id="themeViewerMobile" type="radio" name="viewer" data-mode='mobile' autocomplete="off"/>
+                    <label class="btn btn-secondary" for="themeViewerMobile" t-on-click="this.onMobileClick">
+                        <i class="fa fa-fw fa-mobile" role="img" aria-label="Mobile"/>
+                    </label>
+                </div>
             </div>
         </xpath>
+        <xpath expr="//t[@t-else]/Breadcrumbs" position="replace">
+            <t t-call="website.ThemePreviewForm.ControlPanel.BreadCrumbs"/>
+        </xpath>
     </t>
 
     <t t-name="website.ThemePreviewFormController" t-inherit="web.FormView" t-inherit-mode="primary">
         <xpath expr="//Layout" position="inside">
             <t t-set-slot="layout-actions">
-                <div>
-                    <div class="o_form_buttons_view" role="toolbar" aria-label="Main actions">
-                        <ViewButton className="'btn btn-primary o_use_theme'"
-                                    clickParams="{type: 'object', name: 'button_choose_theme'}"
-                                    record="this.model.root">
-                            <t t-set-slot="contents">Start Now</t>
-                        </ViewButton>
-                        <button class="btn btn-link o_switch_theme" t-on-click.stop="this.back">
-                            Choose another theme
-                        </button>
-                    </div>
-                </div>
+                <ViewButton className="'btn btn-primary o_use_theme'"
+                            clickParams="{type: 'object', name: 'button_choose_theme'}"
+                            record="this.model.root">
+                    <t t-set-slot="contents">Use this theme</t>
+                </ViewButton>
             </t>
         </xpath>
     </t>
 
     <t t-name="website.ThemePreviewKanban.ControlPanel.BreadCrumbs">
             <div class="o_breadcrumb d-flex gap-1">
                 <div class="active d-flex flex-column">
-                    <div class="text-truncate">Pick a Theme</div>
+                    <div class="fw-bold text-truncate">Pick a Theme</div>
                     <div class="text-muted small">Don't worry, you can switch later.</div>
                 </div>
             </div>
     </t>
 
     <t t-name="website.ThemePreviewKanban.ControlPanel" t-inherit="web.ControlPanel" t-inherit-mode="primary">
+        <xpath expr="//*[hasclass('o_control_panel')]" position="attributes">
+            <attribute name="class" remove="pb-3" add="pb-2" separator=" "/>
+        </xpath>
         <xpath expr="//t[@t-else]/Breadcrumbs" position="replace">
             <t t-call="website.ThemePreviewKanban.ControlPanel.BreadCrumbs"/>
         </xpath>
         <xpath expr="//div[contains(@class,'o_control_panel_navigation')]" position="replace">
-            <div>
-                <a class="btn btn-secondary" t-on-click="this.close" aria-label="Close" data-tooltip="Close">
-                    <i class="fa fa-times" />
-                </a>
-            </div>
+            <a class="btn btn-secondary align-self-center" t-on-click="this.close" aria-label="Close" data-tooltip="Close">
+                <i class="fa fa-times" role="img" aria-label="close"/>
+            </a>
         </xpath>
     </t>
 </templates>

addons/website/static/src/components/views/theme_preview.xml

@@ -89,6 +89,12 @@ class ThemePreviewFormControlPanel extends ControlPanel {
     onDesktopClick() {
         this.env.bus.trigger('THEME_PREVIEW:SWITCH_MODE', {mode: 'desktop'});
     }
+    /**
+     * Handler called when user click on Go Back button.
+     */
+    back() {
+        this.env.config.historyBack();
+    }
 }
 
 const ThemePreviewFormView = {

addons/website/static/src/components/views/theme_preview_form.js

@@ -88,42 +88,43 @@
 
 .o_theme_preview_kanban_view .o_kanban_renderer {
     $o-theme-kanban-gray: #fcfcfc;
+    --KanbanRecord-width: 100%;
 
     /// Un-grouped Layout (default)
     &.o_kanban_ungrouped {
-        justify-content: space-between;
-        margin: 0 0 0 ($o-kanban-record-margin - 2 * $grid-gutter-width);
+        display: grid !important;
+        grid-template-columns: 1fr;
+        grid-row-gap: map-get($spacers, 3);
+        grid-column-gap: map-get($spacers, 3);
+        justify-items: center;
+        padding: map-get($spacers, 3);
+
+        @include media-breakpoint-up(sm) {
+            grid-template-columns: repeat(2, 1fr);
+        }
 
-        @include media-breakpoint-down(md) {
-            padding-left: $o-horizontal-padding - $o-kanban-record-margin;
-            padding-right: $o-horizontal-padding;
+        @include media-breakpoint-up(md) {
+            grid-template-columns: repeat(3, 1fr);
         }
 
-        .o_kanban_record {
-            flex: 1 0 220px;
+        @include media-breakpoint-up(xxl) {
+            grid-template-columns: repeat(4, 1fr);
         }
     }
 
     .o_kanban_record {
-        margin-left: $grid-gutter-width * 2;
-        margin-top: 16px;
-        margin-bottom: 16px;
+
+        &:has(.o_theme_installed) {
+            order: -1;
+        }
 
         .o_theme_preview {
-            box-shadow: none;
-            background: none;
-            border: none;
-            padding: 0;
             &.o_theme_installed .o_theme_preview_top {
                 @include o-we-active-wrapper($top: 7px, $right: 7px);
             }
         }
 
         .o_theme_preview_top {
-            position: relative;
-            border-radius: 2px;
-            transform-origin: center bottom;
-            transition: all .1s ease 0s;
 
             .o_theme_cover, .o_theme_logo, .o_theme_screenshot {
                 width: 100%;
@@ -142,41 +143,13 @@
             }
         }
 
-        .o_theme_preview_bottom {
-            h5, h6 {
-                line-height: 16px;
-            }
-        }
-
-        .o_button_area {
-            @include o-position-absolute(0, 0, 0, 0);
-            transition: opacity 100ms ease 0s;
-            display: flex;
-            flex-flow: column nowrap;
-            justify-content: center;
-            transform: translate3d(0,0,0);
-            background-image: linear-gradient(0deg, rgba(black, 0.6), rgba(black, 0.3));
-            padding: 10% 20%;
-            opacity: 0;
-            visibility: hidden;
-
-            > .btn {
-                padding: $btn-padding-y-lg $btn-padding-x-lg;
-            }
-
-            hr {
-                width: 100%;
-            }
-        }
-
         .o_theme_preview_top:hover {
-            transition: all .3s ease 0s;
-            transform: translateY(-10px);
-            border-color: darken($o-theme-kanban-gray, 26%);
-            box-shadow: 0 15px 12px -8px rgba(0, 0, 0, .4);
+            transform: scale(1.01);
+            transform-origin: center;
+            box-shadow: $box-shadow;
 
             .o_theme_screenshot {
-                animation: o_theme_screenshot_scroll 4s linear .25s infinite alternate;
+                animation: o_theme_screenshot_scroll 4s linear infinite alternate;
             }
             @keyframes o_theme_screenshot_scroll {
                 25% {
@@ -187,11 +160,6 @@
                 }
             }
 
-            .o_button_area {
-                opacity: 1;
-                visibility: visible;
-                transition: opacity 0.2s ease 0.1s;
-            }
         }
     }
 

addons/website/static/src/scss/website.backend.scss

@@ -245,31 +245,35 @@
                     <field name="display_name"/>
                     <field name="is_installed_on_current_website"/>
                     <templates>
-                        <div t-name="kanban-box" t-attf-class="o_theme_preview #{record.is_installed_on_current_website.raw_value? 'o_theme_installed' : ''}">
+                        <div t-name="kanban-box" t-attf-class="o_theme_preview border-0 p-0 bg-transparent #{record.is_installed_on_current_website.raw_value? 'o_theme_installed' : ''}">
                             <t t-set="has_image" t-value="record.image_ids.raw_value.length > 0"/>
                             <t t-set="has_screenshot" t-value="record.image_ids.raw_value.length > 1"/>
                             <t t-set="image_url" t-value="has_image ? '/web/image/' + record.image_ids.raw_value[0] : record.icon.value"/>
 
-                            <div class="o_theme_preview_top bg-white mb4 border">
-                                <div t-attf-class="bg-gray-lighter #{has_screenshot? 'o_theme_screenshot' : (has_image ? 'o_theme_cover' : 'o_theme_logo')}" t-attf-style="background-image: url(#{image_url});"/>
-                                <div t-if="record.is_installed_on_current_website.raw_value" class="o_button_area">
-                                    <button type="object" name="button_refresh_theme" class="btn btn-primary">Update theme</button>
-                                    <hr />
-                                    <button type="object" name="button_remove_theme" class="btn btn-secondary">Remove theme</button>
-                                </div>
-                                <div t-else="" class="o_button_area">
-                                    <button type="object" name="button_choose_theme" class="btn btn-primary">Use this theme</button>
-                                    <hr t-if="record.url.value"/>
-                                    <button role="button" type="edit" t-if="record.url.value" class="btn btn-secondary">Live Preview</button>
+                            <div class="o_theme_preview_top position-relative border rounded-3 transition-base">
+                                <div t-attf-class="bg-gray-lighter #{has_screenshot? 'o_theme_screenshot' : (has_image ? 'o_theme_cover' : 'o_theme_logo')} rounded-3" t-attf-style="background-image: url(#{image_url});"/>
+                                <div t-if="record.is_installed_on_current_website.raw_value or !record.url.value" class="o_button_area position-absolute top-50 start-50 translate-middle d-flex align-items-center justify-content-center w-100 h-100 bg-dark bg-opacity-50 rounded opacity-0 opacity-100-hover transition-fade">
+                                    <div class="d-flex flex-column gap-2 w-50">
+                                        <t t-if="record.is_installed_on_current_website.raw_value">
+                                            <button type="object" name="button_refresh_theme" class="btn btn-primary">Update theme</button>
+                                            <button type="object" name="button_remove_theme" class="btn btn-secondary">Remove theme</button>
+                                        </t>
+                                        <t t-else="">
+                                            <button type="object" name="button_choose_theme" class="btn btn-primary">Use default theme</button>
+                                        </t>
+                                    </div>
                                 </div>
+                                <t t-else="">
+                                    <button class="position-absolute top-0 start-0 h-100 w-100 opacity-0" role="button" type="edit" t-if="record.url.value"/>
+                                </t>
                             </div>
-                            <div class="o_theme_preview_bottom clearfix">
-                                <h5 t-if="record.summary.value" class="text-uppercase float-start">
+                            <div class="o_theme_preview_bottom mt-2 mb-3 px-2">
+                                <small t-if="record.summary.value" class="text-uppercase text-muted">
                                     <b><t t-esc="record.summary.value.split(',')[0]"/></b>
-                                </h5>
-                                <h6 t-if="record.display_name.value" class="text-muted float-end">
+                                </small>
+                                <h3 t-if="record.display_name.value">
                                     <b><t t-esc="record.display_name.value.replace('Theme', '').replace('theme', '')"/></b>
-                                </h6>
+                                </h3>
                             </div>
                         </div>
                     </templates>