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); + } } }