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

[IMP] web_editor: floating bar and commandbar scss review

Browse Source 
Prior to this commit, there were functional issues for the floating toolbar
and design issues for the Powerbox in the web editor.

This commit fixes those issues, like alignement for the icons in the list
of the commandbar, box shadows, and the responsiveness of the floating
toolbar on mobile.

In commit [1], the toolbar dropdown had the display static added, but it
causes problems to the responsiveness.
This commit put the display back to dynamic on the dropdown and so, fixes
the dropdown not showing on mobile because of the overflow-x on auto.
The dynamic state also allows the dropdown to change direction (dropdown
to dropup) when there's not enough space for the content of the dropdown.

Would be nice to have : use display state on the all the editor
toolbars (frontend and backend) to modify the layout of the toolbar for
mobile, for a better behavior and design (ex: the different lists in a
dropdown).
For now, it's just a horizontal scroll.

[1]: 459d4e27a8

task-3087826

Part-of: odoo/odoo#110161
This commit is contained in:
Morgane (morm)
2023-02-24 18:16:04 +01:00
parent 1d846c36d9
commit f37e089c8a
6 changed files with 73 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/core/notebook/notebook.scss
+9
View File
@@ -74,4 +74,13 @@
}
}
}
@include media-breakpoint-down(lg) {
.o_notebook_content .oe-toolbar {
@include o-position-sticky($top: 0px);
margin-left: var(--notebook-margin-x, $o-horizontal-padding);
margin-right: var(--notebook-margin-x, $o-horizontal-padding);
width: auto;
}
}
}
addons/web_editor/static/src/js/editor/odoo-editor/src/powerbox/Powerbox.js
+7 -7
View File
@@ -42,11 +42,11 @@ export class Powerbox {
// Draw the powerbox.
this.el = document.createElement('div');
this.el.className = 'oe-powerbox-wrapper';
this.el.className = 'oe-powerbox-wrapper position-absolute overflow-hidden';
this.el.style.display = 'none';
document.body.append(this.el);
this._mainWrapperElement = document.createElement('div');
this._mainWrapperElement.className = 'oe-powerbox-mainWrapper';
this._mainWrapperElement.className = 'oe-powerbox-mainWrapper flex-skrink-1 overflow-auto py-2';
this.el.append(this._mainWrapperElement);
this.el.addEventListener('mousedown', ev => ev.stopPropagation());
@@ -175,19 +175,19 @@ export class Powerbox {
for (const [category, categoryCommands] of this._groupCommands(commands, categories)) {
const categoryWrapperEl = parser.parseFromString(`
<div class="oe-powerbox-categoryWrapper">
<div class="oe-powerbox-category"></div>
<div class="oe-powerbox-category mx-3 my-1 text-uppercase"></div>
</div>`, 'text/html').body.firstChild;
this._mainWrapperElement.append(categoryWrapperEl);
categoryWrapperEl.firstElementChild.innerText = category;
for (const command of categoryCommands) {
const commandElWrapper = document.createElement('div');
commandElWrapper.className = 'oe-powerbox-commandWrapper';
commandElWrapper.className = 'oe-powerbox-commandWrapper d-flex align-items-center px-3 py-2 cursor-pointer';
commandElWrapper.classList.toggle('active', this._context.selectedCommand === command);
commandElWrapper.replaceChildren(...parser.parseFromString(`
<div class="oe-powerbox-commandLeftCol">
<i class="oe-powerbox-commandImg fa"></i>
<div class="oe-powerbox-commandLeftCol border rounded">
<i class="oe-powerbox-commandImg d-flex align-items-center justify-content-center fa"></i>
</div>
<div class="oe-powerbox-commandRightCol">
<div class="oe-powerbox-commandRightCol ms-3">
<div class="oe-powerbox-commandName"></div>
<div class="oe-powerbox-commandDescription"></div>
</div>`, 'text/html').body.children);
addons/web_editor/static/src/js/editor/odoo-editor/src/style.scss
+21 -37
View File
@@ -105,7 +105,6 @@
padding-right: 5px;
background: #222222;
color: white;
border-radius: 8px;
.toolbar-bottom::before {
content: '';
@@ -264,35 +263,44 @@
.oe-tablepicker-size {
color: white;
}
@media only screen and (max-width: 767px) {
@include media-breakpoint-down(md) {
.oe-toolbar {
position: relative;
overflow-x: auto;
visibility: visible;
width: 100%;
width: auto;
height: auto;
border-bottom: 1px solid $border-color;
border-radius: 0;
background-color: white;
box-shadow: none;
.btn {
color: black;
padding: 3px 4px !important;
}
.dropdown-menu {
position: fixed !important;
}
}
}
@include media-breakpoint-up(md) {
.oe-toolbar.oe-floating{
box-shadow: $box-shadow;
}
}
/* Content styling */
.oe-powerbox-wrapper {
position: absolute;
z-index: $zindex-modal;
border: black;
background: var(--oePowerbox__wrapper-bg, $o-white);
color: $o-main-text-color;
max-height: 40vh;
box-sizing: border-box;
max-width: 100%;
box-shadow: 0px 3px 18px rgba(0, 0, 0, .23);
border-radius: 4px;
overflow: hidden;
display: flex;
box-shadow: $box-shadow;
::-webkit-scrollbar {
background: transparent;
@@ -308,45 +316,24 @@
background: var(--oePowerbox__ScrollbarTrack-background-color, #EDECE9);
}
}
.oe-powerbox-mainWrapper {
flex: 1 1 auto;
overflow: auto;
padding: 5px 0;
overscroll-behavior: contain;
}
.oe-powerbox-category, .oe-powerbox-noResult {
margin: 10px;
color: var(--oePowerbox__category-color, $o-gray-600);
font-size: 11px;
}
.oe-powerbox-category {
text-transform: uppercase;
margin: 5px 12px;
}
.oe-powerbox-noResult {
display: none;
}
.oe-powerbox-commandWrapper {
display: flex;
padding: 6px 12px;
cursor: pointer;
&.active {
background: var(--oePowerbox__commandName-bg, $o-gray-100);
}
}
i.oe-powerbox-commandImg {
display: flex;
height: 30px;
width: 30px;
align-items: center;
justify-content: center;
height: 35px;
width: 35px;
background: var(--oePowerbox__commandImg-bg, $o-gray-100);
color: var(--oePowerbox__commandImg-color, $o-gray-800);
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 7px;
font-size: 15px;
}
.oe-powerbox-commandName {
font-size: 13px;
@@ -356,9 +343,6 @@ i.oe-powerbox-commandImg {
color: var(--oePowerbox__commandDescription-color, $o-main-color-muted);
font-size: 12px;
}
.oe-powerbox-commandRightCol {
margin: 0 10px;
}
/* Command hints */
addons/web_editor/static/src/scss/wysiwyg.dark.scss
+8
View File
@@ -15,3 +15,11 @@
.o_link_dialog_preview {
--o-link-dialog-preview-border: #{$border-width} solid #{$border-color};
}
.o_colorpicker_sections, .o_we_color_btn {
--bg: #{$o-gray-200};
}
.o_custom_gradient_btn {
--o-we-toolbar-border: #{$o-gray-800};
}
addons/web_editor/static/src/scss/wysiwyg.scss
+24 -10
View File
@@ -133,6 +133,12 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
}
.o_colorpicker_section {
&.o_custom_gradient_editor{
.o_custom_gradient_btn{
border: 1px solid var(--o-we-toolbar-border);
}
}
&::after {
content: "";
display: table;
@@ -154,7 +160,8 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
// Toolbar - Generic rules shared among backend & frontend
.oe-toolbar {
display: grid;
display: flex;
align-items: center;
.btn {
display: flex;
@@ -182,16 +189,11 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
// Floating Toolbar
.oe-toolbar.oe-floating {
gap: 0 $o-we-sidebar-content-field-control-item-spacing * .7;
grid-auto-flow: column;
gap: $o-we-sidebar-content-field-control-item-spacing * .7;
align-items: stretch;
height: auto;
min-height: $o-we-toolbar-height;
max-width: none;
border-radius: $o-we-item-border-radius;
padding: 0 $o-we-sidebar-content-field-control-item-spacing;
background-color: var(--o-we-toolbar-bg, #{$o-we-toolbar-bg});
box-shadow: 0 0 4px rgba(#000, .1), 0 4px 18px rgba(#000, .25);
color: var(--o-we-toolbar-color-text, #{$o-we-toolbar-color-text});
font-family: $o-we-font-family;
@@ -276,7 +278,7 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
overflow: visible;
border-top: 1px solid var(--o-we-toolbar-border, #{$o-we-toolbar-border});
background-color: var(--o-we-toolbar-bg, #{$o-we-toolbar-bg});
box-shadow: 0 18px 18px rgba(#000, .23);
box-shadow: $box-shadow;
@include border-top-radius(0);
@include border-bottom-radius($o-we-item-border-radius);
@@ -375,7 +377,7 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
.colorpicker {
background: var(--o-we-toolbar-bg, #{$o-we-toolbar-bg});
box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.2);
box-shadow: $box-shadow;
}
.o_image_alt {
@@ -384,6 +386,12 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
}
}
// Toolbar in Sidebar (website editor, mass mailing)
#oe_snippets > .o_we_customize_panel .oe-toolbar {
display: grid;
align-items: stretch;
}
// Floating Table Picker
.oe-tablepicker-wrapper .oe-tablepicker {
.oe-tablepicker-cell {
@@ -403,7 +411,8 @@ body:not(.editor_has_snippets) {
z-index: 1056;
}
}
@media only screen and (max-width: 767px) {
@include media-breakpoint-down(md) {
.oe-toolbar {
background-color: white;
@@ -665,7 +674,12 @@ img.o_we_selected_image {
// Prevent the edited link from being deselected when clicking between
// buttons in the popover
user-select: none;
box-shadow: $box-shadow;
border-color: rgba(0,0,0,0.025);
.popover-arrow::before {
border-right-color: rgba(0, 0, 0, 0.05);
}
// As the popover is displayed both in the frontend and the backend,
// the font styles need to be uniformized.
font-size: 12px;
addons/web_editor/static/src/xml/editor.xml
+4 -3
View File
@@ -9,7 +9,7 @@
<div id="toolbar" class="oe-toolbar oe-floating">
<div id="style" class="btn-group dropdown">
<button type="button" class="btn dropdown-toggle"
data-bs-toggle="dropdown" tabindex="-1" data-bs-display="static" aria-expanded="false">
data-bs-toggle="dropdown" data-bs-original-title="Text style" tabindex="-1" aria-expanded="false">
<span title="Text style">Normal</span>
</button>
<ul class="dropdown-menu">
@@ -76,8 +76,9 @@
<div id="font-size" class="btn-group dropdown">
<button type="button" class="btn dropdown-toggle"
data-bs-toggle="dropdown" tabindex="-1" data-bs-display="static" aria-expanded="false">
data-bs-toggle="dropdown" tabindex="-1" data-bs-original-title="Font Size" aria-expanded="false">
<span id="fontSizeCurrentValue" title="Font size"></span>
<span id="fontSizeCurrentValue"></span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#" data-call="setFontSize">default</a></li>
@@ -98,7 +99,7 @@
<div id="justify" class="btn-group dropdown">
<button type="button" class="btn dropdown-toggle"
data-bs-toggle="dropdown" tabindex="-1" data-bs-display="static" aria-expanded="false">
data-bs-toggle="dropdown" tabindex="-1" data-bs-original-title="Paragraph" aria-expanded="false">
<i id="paragraphDropdownButton" class="fa fa-align-left fa-fw" title="Text align"></i>
</button>
<div class="dropdown-menu">