pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] website: o_frontend_to_backend_nav design adaptations

Browse Source 
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
This commit is contained in:
stefanorigano (SRI)
2022-07-04 14:07:41 +02:00
parent 9b66ee66cd
commit 2b07d2eb67
2 changed files with 30 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/js/content/redirect.js
+15 -26
View File
@@ -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 = "<path fill='#FFF' d='M8 8V1a1 1 0 1 1 2 0v8a1 1 0 0 1-1 1H1a1 1 0 1 1 0-2h7z'/>";
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
addons/website/static/src/scss/website.ui.scss
+15 -61
View File
@@ -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);
}
}
}