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

[IMP] web_editor, website: add minor design improvements to the editor

Browse Source 
This commit gives a small refresh to the web_editor UI. To do so we
remove the borders from the buttons and inputs. We also increase the
border radius to 4px instead of 2px. The nested menus such as in Themes
tab now have the same  background color than the rest of the UI.

The box shadows on the `we-title`, `we-customize-block-options` and the
checkbox switch have been removed.

All the buttons and select components are now taking the full available
width. The inputs fields remain unchanged except their font which is now
set to sans-serif.

Finally a `<div>` have been added to the replace media snippet to make
it consistent with the other buttons having an icon. Maybe in the future
we'll need a better way to define those.

task-3265187

closes odoo/odoo#119697

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
Mathieu (mano)
2023-04-28 16:04:35 +02:00
committed by qsm-odoo
parent 33b86b26e3
commit 3e683cc716
5 changed files with 55 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/editor/snippets.options.js
-6
View File
@@ -6562,12 +6562,6 @@ registry.BackgroundOptimize = ImageHandlerOption.extend({
name: 'add_size_indicator',
data: this.$weight,
});
// Hack to align on the right
this.$weight.css({
'width': '200px', // Make parent row grow by faking a width
'flex': '0 0 0', // But force no forced width
'margin-left': 'auto',
});
},
/**
* @override
addons/web_editor/static/src/scss/web_editor.variables.scss
+4 -5
View File
@@ -52,8 +52,8 @@ $o-we-toolbar-height: 40px !default;
$o-we-item-spacing: 8px !default;
$o-we-item-border-width: 1px !default;
$o-we-item-border-color: $o-we-bg-darkest !default;
$o-we-item-border-radius: 2px !default;
$o-we-item-border-color: transparent !default;
$o-we-item-border-radius: 4px !default;
$o-we-item-clickable-bg: $o-we-bg-lightest!default;
$o-we-item-clickable-color: $o-we-fg-light!default;
$o-we-item-clickable-hover-bg: $o-we-bg-dark!default;
@@ -144,7 +144,7 @@ $o-we-sidebar-content-main-title-font-size: 13px !default;
$o-we-sidebar-content-block-spacing: 10px !default;
$o-we-sidebar-content-fold-block-bg: $o-we-bg-light !default;
$o-we-sidebar-content-fold-block-bg: $o-we-bg-lighter !default;
$o-we-sidebar-content-field-spacing: $o-we-item-spacing !default;
$o-we-sidebar-content-field-color: $o-we-fg-darker !default;
@@ -194,7 +194,7 @@ $o-we-sidebar-content-field-colorpicker-cc-height: 26px !default;
$o-we-sidebar-content-field-input-max-width: 60px !default;
$o-we-sidebar-content-field-input-bg: $o-we-bg-light !default;
$o-we-sidebar-content-field-input-font-family: $o-font-family-monospace !default;
$o-we-sidebar-content-field-input-font-family: $o-we-font-family !default;
$o-we-sidebar-content-field-input-unit-font-size: 11px !default;
$o-we-sidebar-content-field-input-border-color: $o-we-accent !default;
@@ -212,7 +212,6 @@ $o-we-sidebar-content-field-toggle-active-bg: $o-we-accent !default;
$o-we-sidebar-content-field-toggle-control-width: 11px !default;
$o-we-sidebar-content-field-toggle-control-height: $o-we-sidebar-content-field-toggle-height - 2px !default;
$o-we-sidebar-content-field-toggle-control-bg: $o-we-fg-lighter !default;
$o-we-sidebar-content-field-toggle-control-shadow: 0 2px 3px 0 $o-we-bg-darkest !default;
$o-we-technical-modal-zindex: 2001;
addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+41 -10
View File
@@ -142,12 +142,13 @@
border-radius: $o-we-sidebar-content-field-border-radius;
background-color: $o-we-sidebar-content-field-clickable-bg;
color: $o-we-sidebar-content-field-clickable-color;
text-align: center;
&:not([disabled]):hover, &.active:not(.o_we_no_toggle) {
@include we-svg-icon($o-we-sidebar-content-field-pressed-color, $subdle-opacity: .75);
}
&.active:not(.o_we_no_toggle) {
&.active:not(.o_we_no_toggle, .o_we_collapse_toggler) {
background-color: $o-we-sidebar-content-field-pressed-bg;
}
}
@@ -731,6 +732,7 @@
we-title {
display: block;
text-transform: capitalize;
text-align: left;
}
we-customizeblock-options {
@@ -738,14 +740,12 @@
display: block;
padding: 0 0 ($o-we-sidebar-content-block-spacing * 1.5) 0;
background-color: $o-we-bg-lighter;
box-shadow: $o-we-item-standup-bottom rgba($o-we-item-standup-color-dark, 0.8);
> we-title {
display: flex;
align-items: center;
padding: $o-we-sidebar-content-block-spacing * .3 $o-we-sidebar-content-padding-base 0 $o-we-sidebar-content-indent;
background-color: $o-we-bg-light;
box-shadow: $o-we-item-standup-top rgba($o-we-item-standup-color-light, .2), $o-we-item-standup-bottom rgba($o-we-item-standup-color-dark, .5);
font-size: $o-we-sidebar-content-main-title-font-size;
> span {
@@ -919,7 +919,6 @@
height: $o-we-sidebar-content-field-toggle-control-height;
border-radius: 10rem;
background-color: $o-we-sidebar-content-field-toggle-control-bg;
box-shadow: $o-we-sidebar-content-field-toggle-control-shadow;
}
}
&.active we-checkbox {
@@ -935,6 +934,7 @@
we-selection-items {
.o_we_user_value_widget {
margin-top: 0;
flex-grow: 1;
}
}
@@ -1008,6 +1008,7 @@
background-color: $o-we-sidebar-content-field-dropdown-item-bg;
color: $o-we-sidebar-content-field-dropdown-item-color;
border-radius: 0;
text-align: left;
> we-title {
flex-grow: 1;
@@ -1098,6 +1099,10 @@
width: percentage(1 / 4);
padding: 0;
justify-content: center;
flex-grow: 0;
border-radius: 2px;
border: $o-we-item-border-width solid $o-we-bg-darkest;
img {
padding: $o-we-sidebar-content-field-spacing;
}
@@ -1124,6 +1129,7 @@
we-button-group.o_we_user_value_widget {
we-selection-items {
display: flex;
flex-grow: 1;
max-width: 100%;
we-button {
@@ -1149,9 +1155,8 @@
we-button {
display: flex;
justify-content: center;
flex: 0 1 percentage(1/4);
flex: 1 1 percentage(1/4);
padding: ($o-we-sidebar-content-field-button-group-button-spacing / 4) ($o-we-sidebar-content-field-button-group-button-spacing / 3);
text-align: center;
}
}
@@ -1183,6 +1188,22 @@
// Color Pickers
.o_we_so_color_palette.o_we_user_value_widget {
&:first-of-type {
margin-right: $o-we-sidebar-content-field-multi-spacing * 4;
}
+ .o_we_so_color_palette {
// Countering the margin of the first colorpicker and targeting
// the div to avoid misalignment of we-title (theme tab)
&:nth-of-type(2) {
> div {
margin-left: -$o-we-sidebar-content-field-multi-spacing * 4;
}
we-title + div {
margin-left: 0;
}
}
}
.o_we_color_preview {
@extend %o-preview-alpha-background;
@@ -1190,7 +1211,7 @@
display: block;
width: $o-we-sidebar-content-field-colorpicker-size;
height: $o-we-sidebar-content-field-colorpicker-size;
border: $o-we-sidebar-content-field-border-width solid $o-we-sidebar-content-field-border-color;
border: $o-we-sidebar-content-field-border-width solid $o-we-bg-darkest;
border-radius: 10rem;
cursor: pointer;
@@ -1582,15 +1603,23 @@
width: 100%;
}
> div {
flex: 0 1 auto;
flex: 1 1 auto;
min-width: 0;
margin-top: $o-we-sidebar-content-field-spacing;
svg {
margin: 0 auto;
}
}
&:not(.o_we_fw) {
flex-flow: row nowrap;
align-items: center;
&:not(we-input):not(.o_we_so_color_palette) {
flex-grow: 1;
}
> we-title {
flex: 0 0 auto;
@include o-text-overflow();
@@ -1649,7 +1678,6 @@
}
}
&.active {
box-shadow: $o-we-item-standup-top rgba($o-we-item-standup-color-dark, .5), $o-we-item-standup-bottom rgba($o-we-item-standup-color-light, .2);
we-collapse.active {
&, we-toggler.o_we_collapse_toggler {
background-color: $o-we-bg-lighter;
@@ -1686,6 +1714,10 @@
margin-left: $o-we-sidebar-content-field-label-spacing * 2;
}
we-button + .o_we_image_weight {
margin-left: $o-we-sidebar-content-field-label-spacing;
}
.o_we_tag {
background-color: $o-we-bg-darkest;
white-space: nowrap;
@@ -2146,7 +2178,6 @@
&.o_handle_start:after {
background-color: rgba($o-we-sidebar-content-field-clickable-bg, .6);
border-color: rgba($o-we-sidebar-content-field-border-color, .2);
}
&:hover,
addons/web_editor/views/snippets.xml
+6 -4
View File
@@ -396,10 +396,12 @@
data-exclude="[data-oe-xpath], a[href^='/website/social/'] > i.fa, a[class*='s_share_'] > i.fa">
<we-row string="Media">
<we-button class="o_we_bg_brand_primary" data-replace-media="true" data-no-preview="true">Replace</we-button>
<we-button class="fa fa-link"
data-name="media_link_opt"
data-set-link="true" data-no-preview="true"
title="Redirect the user elsewhere when he clicks on the media."/>
<div>
<we-button class="fa fa-link"
data-name="media_link_opt"
data-set-link="true" data-no-preview="true"
title="Redirect the user elsewhere when he clicks on the media."/>
</div>
</we-row>
<we-input string="Your URL"
class="o_we_sublevel_1 o_we_large"
addons/website/static/src/scss/website.wysiwyg.scss
+4 -10
View File
@@ -150,10 +150,7 @@ html[data-edit_translations="1"] {
display: none
}
.o_we_so_color_palette.o_we_user_value_widget {
+ .o_we_so_color_palette {
margin-left: $o-we-item-spacing * .5;
&:nth-child(4) {
margin-left: $o-we-item-spacing * 3;
}
@@ -171,10 +168,8 @@ html[data-edit_translations="1"] {
width: 100%;
}
we-select.o_we_theme_colors_select {
justify-content: flex-end;
margin-left: auto;
> div, we-toggler {
justify-content: flex-end;
height: 100%;
}
@@ -202,11 +197,10 @@ html[data-edit_translations="1"] {
// CC Edition
.o_we_cc_preview_wrapper {
// Use box-shadow rather than border-bottom in order to
// Use box-shadow rather than borders in order to
// avoid misalignments in the 'Options' tab.
border: 1px solid;
border-color: rgba($o-we-item-standup-color-light, .2) $o-we-sidebar-content-field-dropdown-border-color transparent;
box-shadow: 0 1px 0 $o-we-item-standup-color-dark;
border: $o-we-item-border-width solid $o-we-item-border-color;
box-shadow: 0 0 0 1px $o-we-sidebar-content-field-dropdown-border-color;
+ .o_we_collapse_toggler {
height: 35px; // FIXME hardcoded...