From 2b07d2eb67d6b6ac1b41b25dbb85491f3115771f Mon Sep 17 00:00:00 2001 From: "stefanorigano (SRI)" Date: Fri, 1 Jul 2022 10:20:00 +0000 Subject: [PATCH] [IMP] website: `o_frontend_to_backend_nav` design adaptations As result of moving the "website into the backend" [1], a new floating nav has been introduced allowing the user to go to the apps_switcher or to edit the current page. This commit slightly refine the design and changes the animation behavior that it's now triggered on :hover rather than onClick. It also changes the "Edit" btn url that it's now pointing to the backend rather than to the editor. As positive side-effect, these changes improves mobile's UX, allowing to toggle-back the navbar by simply touching the outside area. Also, thanks to the use of SVG, it solves the annoying issue of .fa icons transformations forced to 'none' on mobile. note: as a preexisting FIXME note says, an xml template should be created for this component. This commit is intended to improve the behavior with the current temporary implementation. [1] https://github.com/odoo/odoo/commit/31cc10b91dc7762e23b4bde9b945be0c4ce3fe3b task-2898212 Part-of: odoo/odoo#95002 --- .../website/static/src/js/content/redirect.js | 41 ++++------ .../website/static/src/scss/website.ui.scss | 76 ++++--------------- 2 files changed, 30 insertions(+), 87 deletions(-) diff --git a/addons/website/static/src/js/content/redirect.js b/addons/website/static/src/js/content/redirect.js index 1a40e7cf711..0e78c8b3fef 100644 --- a/addons/website/static/src/js/content/redirect.js +++ b/addons/website/static/src/js/content/redirect.js @@ -15,8 +15,6 @@ document.addEventListener('DOMContentLoaded', () => { return; } - const editInBackendUserDropdownLinkEl = document.getElementById('o_edit_in_backend_user_dropdown_link'); - if (!window.frameElement) { const websiteId = document.documentElement.dataset.websiteId; const {pathname, search} = window.location; @@ -43,41 +41,36 @@ document.addEventListener('DOMContentLoaded', () => { } else { // FIXME this UI does not respect access rights yet but we will // probably end up doing it in XML instead of JS anyway. + const frontendToBackendBtnClasses = ['position-relative', 'd-flex', 'align-items-center', 'justify-content-center', 'text-decoration-none']; const frontendToBackendNavEl = document.createElement('div'); - frontendToBackendNavEl.classList.add('o_frontend_to_backend_nav'); - frontendToBackendNavEl.addEventListener('click', ev => { - frontendToBackendNavEl.classList.add('o_frontend_to_backend_nav_opened'); - setTimeout(() => { - // TODO find a better way? Useful so that hover effects work - // after the opening. - frontendToBackendNavEl.classList.add('o_frontend_to_backend_nav_fully_opened'); - }, 600); - }, { once: true }); + frontendToBackendNavEl.classList.add('o_frontend_to_backend_nav', 'position-fixed', 'd-flex'); - const loadingIconEl = document.createElement('i'); - loadingIconEl.classList.add('o_frontend_to_backend_icon', 'fa', 'fa-arrow-right'); + const loadingIconEl = document.createElementNS("http://www.w3.org/2000/svg", 'svg'); + loadingIconEl.classList.add('o_frontend_to_backend_icon', 'position-absolute'); + loadingIconEl.setAttribute('width', "24px"); + loadingIconEl.setAttribute('height', "24px"); + loadingIconEl.setAttribute('viewBox', "-7 -7 24 24"); + loadingIconEl.setAttribute('xmlns', "http://www.w3.org/2000/svg"); + loadingIconEl.setAttribute('preserveAspectRatio', "xMinYMin"); + loadingIconEl.innerHTML = ""; frontendToBackendNavEl.appendChild(loadingIconEl); const backendAppsButtonEl = document.createElement('a'); backendAppsButtonEl.href = '/web'; backendAppsButtonEl.title = _t("Go to your Odoo Apps"); - backendAppsButtonEl.classList.add('o_frontend_to_backend_apps_btn', 'fa', 'fa-th'); + backendAppsButtonEl.classList.add('o_frontend_to_backend_apps_btn', 'fa', 'fa-th', ...frontendToBackendBtnClasses); frontendToBackendNavEl.appendChild(backendAppsButtonEl); const backendEditButtonEl = document.createElement('a'); - backendEditButtonEl.href = `${backendPath}&enable_editor=1`; + backendEditButtonEl.href = backendPath; backendEditButtonEl.textContent = _t("Edit"); - backendEditButtonEl.title = _t("Edit your page content"); - backendEditButtonEl.classList.add('o_frontend_to_backend_edit_btn'); + backendEditButtonEl.title = _t("Edit this content"); + backendEditButtonEl.classList.add('o_frontend_to_backend_edit_btn', 'px-3', ...frontendToBackendBtnClasses); const backendEditButtonIconEl = document.createElement('i'); - backendEditButtonIconEl.classList.add('fa', 'fa-pencil'); + backendEditButtonIconEl.classList.add('fa', 'fa-pencil', 'mr-1'); backendEditButtonEl.prepend(backendEditButtonIconEl); frontendToBackendNavEl.appendChild(backendEditButtonEl); - if (editInBackendUserDropdownLinkEl) { - editInBackendUserDropdownLinkEl.href = backendPath; - } - document.body.appendChild(frontendToBackendNavEl); } } else { @@ -86,10 +79,6 @@ document.addEventListener('DOMContentLoaded', () => { backendUserDropdownLinkEl.classList.add('d-none'); backendUserDropdownLinkEl.classList.remove('d-flex'); } - if (editInBackendUserDropdownLinkEl) { - editInBackendUserDropdownLinkEl.classList.add('d-none'); - editInBackendUserDropdownLinkEl.classList.remove('d-flex'); - } // Multiple reasons to do this: // - It seems like DOMContentLoaded doesn't always trigger when diff --git a/addons/website/static/src/scss/website.ui.scss b/addons/website/static/src/scss/website.ui.scss index b77dee98527..4cde6dc5bcd 100644 --- a/addons/website/static/src/scss/website.ui.scss +++ b/addons/website/static/src/scss/website.ui.scss @@ -7,9 +7,7 @@ $-mini-nav-size: 40px; .o_frontend_to_backend_nav { @include o-position-absolute(0, auto, auto, 0); - position: fixed; z-index: $zindex-modal; - display: flex; font-size: $o-font-size-base * ($o-root-font-size / 16px); &::before { @@ -20,82 +18,38 @@ $-mini-nav-size: 40px; border-bottom: $-mini-nav-size/2 solid transparent; border-right: $-mini-nav-size/2 solid transparent; cursor: pointer; + } + &::before, .o_frontend_to_backend_icon, .o_frontend_to_backend_apps_btn, .o_frontend_to_backend_edit_btn { transform-origin: top left; transition: transform 400ms ease 0s; } - > * { - position: relative; + .o_frontend_to_backend_apps_btn, .o_frontend_to_backend_edit_btn { min-width: $-mini-nav-size; height: $-mini-nav-size; - padding: 0; - display: flex; - justify-content: center; - align-items: center; - cursor: pointer; - background-color: $o-enterprise-color; - color: transparent; - transform-origin: top left; - transform: translateX(-250%) scaleY(0.2); - transition: transform 400ms ease 0s, background-color 400ms ease 200ms, color 400ms ease 200ms; - - &:hover { - background-color: darken($o-enterprise-color, 5%); - color: white; - text-decoration: none; - } + color: #FFFFFF; + transform: translateX(-250%) scaleX(0.5); } - &:hover { - &::before { - transform: scale(1.3); - } - .o_frontend_to_backend_icon { - transform: rotateZ(45deg) translateX(#{-$-mini-nav-size / 4 * 0.3}); - } - } - - &.o_frontend_to_backend_nav_opened { - &::before { - transform: scaleX(1.3); - transition: transform 100ms ease 0s; - } - - > * { - color: white; - transform: translateX(-#{$-mini-nav-size}); - } - .o_frontend_to_backend_edit_btn { - background-color: $o-enterprise-primary-color; + @each $-name, $-color in ('edit': $o-enterprise-primary-color, 'apps': $o-enterprise-color) { + .o_frontend_to_backend_#{$-name}_btn { + background-color: $-color; &:hover { - background-color: darken($o-enterprise-primary-color, 5%); + background-color: darken($-color, 5%); } } - - &.o_frontend_to_backend_nav_fully_opened > * { - transition: none; - } } -} -.o_frontend_to_backend_icon { - border-radius: 50rem; - background-color: transparent; - color: white; - transform-origin: center center; - transform: rotateZ(45deg) translateX(#{-$-mini-nav-size/4}); - transition: transform 100ms ease 0s; &:hover { - background-color: transparent; - } -} -.o_frontend_to_backend_edit_btn { - padding: 0 12px; + &:before, .o_frontend_to_backend_icon { + transform: scale(.3); + } - > .fa { - margin-right: 8px; + .o_frontend_to_backend_apps_btn, .o_frontend_to_backend_edit_btn { + transform: translateX(0); + } } }