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

[FIX] web_editor: fix colorpicker buttons design

Browse Source 
This commit fixes an issue related to the colorpicker component, present
in both back-end and front-end. They use the same XML template but they
have two different selectors within our SCSS files.

Some months ago, commit[1] removed some `@extend` rules related
to button design within the `web_editor`, and replaced them
with a `.btn` BS class. This affected both colorpicker and causes layout
issues on the "front-end web editor", which was not the expected output.

The issue was fixed directly with commit[2], but by removing the `.btn`
class from the template, it removed the whole styling on the back-end
color picker, making it use the user agent button styling.

== After ==
Since the colorpicker already has some CSS variables to handle its design
depending on the context, we make use of the CSS variables to customize
the design of the component when it is inside the backend, and make it
look as it was before it lost its `.btn` class.

[1]: ee38c69503
[2]: 711fc86368

task-3693078

closes odoo/odoo#150157

Signed-off-by: Geelen Sébastien (sge) <sge@odoo.com>
This commit is contained in:
Chrysanthe (chgo)
2024-01-31 13:47:09 +00:00
parent ed76c3700c
commit b5db4c2661
1 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/scss/wysiwyg.scss
+9 -3
View File
@@ -344,11 +344,17 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
.o_we_colorpicker_switch_panel button {
margin-bottom: -1px;
border: 0;
padding: $btn-padding-y-sm $btn-padding-x-sm;
background: transparent;
color: var(--o-we-toolbar-color-clickable, #{$o-we-toolbar-color-clickable});
&:hover {
color: var(--o-we-toolbar-color-clickable-active, #{$o-we-toolbar-color-clickable-active});
}
&.active {
border-bottom: 1px solid var(--o-we-toolbar-color-accent, #{$o-we-toolbar-color-accent});
background: none;
box-shadow: none;
box-shadow: inset 0 ($border-width * -1) 0 var(--o-we-toolbar-color-accent, #{$o-we-toolbar-color-accent});
color: var(--o-we-toolbar-color-clickable-active, #{$o-we-toolbar-color-clickable-active});
}