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

[IMP] web_editor, website, *: adjust general ui spacing/alignment

Browse Source 
*: website_form

Part of https://github.com/odoo/odoo/pull/55959
task-2157252
This commit is contained in:
stefanorigano (SRI)
2020-08-14 19:19:48 +00:00
committed by qsm-odoo
parent bc77998998
commit 374ce7759e
12 changed files with 129 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/editor/snippets.options.js
+5 -3
View File
@@ -1351,13 +1351,15 @@ const MediapickerUserValueWidget = UserValueWidget.extend({
*/
async start() {
await this._super(...arguments);
const iconEl = document.createElement('i');
if (this.options.dataAttributes.buttonStyle) {
const iconEl = document.createElement('i');
iconEl.classList.add('fa', 'fa-fw', 'fa-camera');
this.containerEl.appendChild(iconEl);
} else {
this.el.classList.add('fa', 'fa-fw', 'fa-edit');
iconEl.classList.add('fa', 'fa-fw', 'fa-refresh', 'mr-1');
this.el.classList.add('o_we_no_toggle');
this.containerEl.textContent = _t("Replace media");
}
$(this.containerEl).prepend(iconEl);
},
//--------------------------------------------------------------------------
addons/web_editor/static/src/scss/web_editor.variables.scss
+9 -8
View File
@@ -50,14 +50,14 @@ $o-we-translated-content-color: rgb(120, 215, 110) !default;
$o-we-toolbar-height: 32px !default;
$o-we-item-spacing: 7px !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: 1px !default;
$o-we-item-border-radius: 2px !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;
$o-we-item-pressed-bg: $o-we-bg-darker !default;
$o-we-item-pressed-bg: $o-we-bg-light !default;
$o-we-item-pressed-color: $o-we-fg-lighter !default;
$o-we-item-standup-color-light: $o-we-fg-lighter;
@@ -109,6 +109,7 @@ $o-we-sidebar-content-gutter-item-indent: 5px !default;
$o-we-sidebar-content-padding-base: 10px !default;
$o-we-sidebar-content-indent: $o-we-sidebar-content-gutter-item-indent + $o-we-sidebar-content-padding-base !default;
$o-we-sidebar-content-backdrop-bg: rgba(black, 0.2) !default;
$o-we-sidebar-content-available-room: $o-we-sidebar-width - $o-we-sidebar-content-padding-base - $o-we-sidebar-content-indent !default;
$o-we-sidebar-content-main-title-height: 32px !default;
$o-we-sidebar-content-main-title-color: $o-we-fg-lighter !default;
@@ -125,8 +126,9 @@ $o-we-sidebar-content-field-control-item-color: $o-we-fg-darker !default;
$o-we-sidebar-content-field-control-item-size: 1em !default;
$o-we-sidebar-content-field-control-item-spacing: 0.5em !default;
$o-we-sidebar-content-field-label-spacing: 6px !default;
$o-we-sidebar-content-field-label-width: $o-we-sidebar-content-field-label-spacing + 102px !default;
$o-we-sidebar-content-field-multi-spacing: $o-we-sidebar-content-field-label-spacing !default;
$o-we-sidebar-content-field-label-width: $o-we-sidebar-content-available-room * .4 !default;
$o-we-sidebar-content-field-multi-spacing: $o-we-sidebar-content-field-label-spacing * .5 !default;
$o-we-sidebar-content-field-height: 22px !default;
$o-we-sidebar-content-field-border-width: $o-we-item-border-width !default;
@@ -163,13 +165,12 @@ $o-we-sidebar-content-field-colorpicker-cc-width: 208px !default;
$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-darker !default;
$o-we-sidebar-content-field-input-bg: $o-we-bg-light !default;
$o-we-sidebar-content-field-input-font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$o-we-sidebar-content-field-input-unit-font-size: 11px !default;
$o-we-sidebar-content-field-input-border-color: $o-we-accent !default;
// This value allows 5 fa icons (fit one row exactly with this)
$o-we-sidebar-content-field-button-group-button-spacing: $o-we-sidebar-content-field-clickable-spacing * 1.2 !default;
$o-we-sidebar-content-field-button-group-button-spacing: $o-we-sidebar-content-field-clickable-spacing;
$o-we-sidebar-content-field-progress-height: 4px !default;
$o-we-sidebar-content-field-progress-control-height: 10px !default;
addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+61 -66
View File
@@ -116,6 +116,29 @@ body.editor_enable.editor_has_snippets {
&[disabled] {
opacity: .5;
}
&:not([disabled]) {
&.active:not(.o_we_no_toggle), &:hover {
color: $o-we-sidebar-content-field-pressed-color;
}
$-hover-colors: (
'success': $o-we-color-success,
'info': $o-we-color-info,
'warning': $o-we-color-warning,
'danger': $o-we-color-danger,
);
@each $name, $color in $-hover-colors {
&.o_we_text_#{$name} {
color: $color;
}
&.o_we_hover_#{$name}:hover {
color: $color;
}
}
}
}
%we-generic-link {
@@ -126,19 +149,6 @@ body.editor_enable.editor_has_snippets {
&:not([disabled]) {
&.active, &:hover {
@include we-svg-icon($o-we-sidebar-content-field-pressed-color, $subdle-opacity: .75);
color: $o-we-sidebar-content-field-pressed-color;
}
$-hover-colors: (
'success': $o-we-color-success,
'info': $o-we-color-info,
'warning': $o-we-color-warning,
'danger': $o-we-color-danger,
);
@each $name, $color in $-hover-colors {
&.o_we_hover_#{$name}:hover {
color: $color;
}
}
}
}
@@ -151,17 +161,15 @@ body.editor_enable.editor_has_snippets {
padding: 0 $o-we-sidebar-content-field-button-group-button-spacing;
border: $o-we-sidebar-content-field-border-width solid $o-we-sidebar-content-field-border-color;
border-radius: $o-we-sidebar-content-field-border-radius;
background: $o-we-sidebar-content-field-clickable-bg;
background-color: $o-we-sidebar-content-field-clickable-bg;
color: $o-we-sidebar-content-field-clickable-color;
&:not([disabled]):hover {
&:not([disabled]):hover, &.active:not(.o_we_no_toggle) {
@include we-svg-icon($o-we-sidebar-content-field-pressed-color, $subdle-opacity: .75);
color: $o-we-sidebar-content-field-pressed-color;
}
&.active {
background: $o-we-sidebar-content-field-pressed-bg;
color: $o-we-sidebar-content-field-pressed-color;
&.active:not(.o_we_no_toggle) {
background-color: $o-we-sidebar-content-field-pressed-bg;
}
}
@@ -171,7 +179,7 @@ body.editor_enable.editor_has_snippets {
flex: 1 1 auto;
justify-content: center;
border: none;
background: transparent;
background-color: transparent;
color: inherit;
font-weight: normal;
@@ -214,7 +222,7 @@ body.editor_enable.editor_has_snippets {
#snippets_menu {
flex: 0 0 auto;
display: flex;
background: $o-we-sidebar-tabs-bg;
background-color: $o-we-sidebar-tabs-bg;
box-shadow: $o-we-item-standup-top rgba($o-we-item-standup-color-light, .2);
color: $o-we-sidebar-tabs-color;
@@ -228,6 +236,7 @@ body.editor_enable.editor_has_snippets {
position: relative;
width: 100%;
padding: $o-we-sidebar-blocks-content-spacing;
background-color: $o-we-bg-lighter;
.o_snippet_search_filter_input {
width: 100%;
@@ -366,38 +375,24 @@ body.editor_enable.editor_has_snippets {
@mixin large-component() {
flex: 1 1 auto;
width: ($o-we-sidebar-width - $o-we-sidebar-content-padding-base - $o-we-sidebar-content-indent) * 0.5;
width: $o-we-sidebar-content-available-room * .6;
}
we-button, we-toggler {
@extend %we-generic-button;
text-align: left;
&.fa {
display: inline-block;
padding: 0;
border: none;
background: none;
text-align: center;
&.fa-times, &.fa-minus {
color: $o-we-color-danger;
}
&.fa-plus {
color: $o-we-color-success;
}
&.active {
padding: 0;
&::after {
display: none;
}
}
}
}
we-button.o_we_link {
@extend %we-generic-link;
margin-top: 0;
border: 0;
padding: 0;
background: 0;
}
we-toggler {
@include we-icon-button('\f0d7');
text-align: left;
+ * {
display: none !important;
@@ -407,7 +402,6 @@ body.editor_enable.editor_has_snippets {
}
&.active {
@include we-icon-button('\f0d8');
+ * {
display: block !important;
}
@@ -434,7 +428,7 @@ body.editor_enable.editor_has_snippets {
position: relative;
display: block;
padding: 0 $o-we-sidebar-content-padding-base $o-we-sidebar-content-block-spacing * 1.5 $o-we-sidebar-content-indent;
background: $o-we-bg-lighter;
background-color: $o-we-bg-lighter;
box-shadow: $o-we-item-standup-bottom rgba($o-we-item-standup-color-dark, 0.8);
> we-title {
@@ -442,7 +436,7 @@ body.editor_enable.editor_has_snippets {
align-items: center;
margin: 0 (-$o-we-sidebar-content-padding-base) 0 (-$o-we-sidebar-content-indent);
padding: $o-we-sidebar-content-block-spacing * .3 $o-we-sidebar-content-padding-base 0 $o-we-sidebar-content-indent;
background: $o-we-bg-light;
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;
@@ -453,7 +447,7 @@ body.editor_enable.editor_has_snippets {
> we-top-button-group {
flex: 0 0 auto;
display: block;
display: flex;
margin-left: auto;
font-size: .9em;
@@ -461,20 +455,13 @@ body.editor_enable.editor_has_snippets {
font-size: 1.2em;
}
> * {
we-button {
margin-left: $o-we-sidebar-content-field-multi-spacing;
}
> we-customizeblock-option {
&, .fa {
display: inline-block !important;
}
.fa {
margin: 0;
}
}
padding: 0 $o-we-sidebar-content-field-multi-spacing;
.fa {
@extend %we-generic-link;
&.fa {
margin-left: $o-we-sidebar-content-field-label-spacing;
}
}
}
}
@@ -548,7 +535,7 @@ body.editor_enable.editor_has_snippets {
}
// Checkboxes
.o_we_checkbox_wrapper.o_we_user_value_widget {
we-button.o_we_checkbox_wrapper.o_we_user_value_widget {
padding: 0;
border: none;
background: none;
@@ -621,6 +608,10 @@ body.editor_enable.editor_has_snippets {
border-right-width: ($o-we-item-spacing - 1px);
}
}
&:not(.o_we_so_color_palette) + we-button:not(:hover) {
background: none;
}
we-selection-items {
@include o-position-absolute(100%, 0, auto, 0);
z-index: $zindex-dropdown;
@@ -725,8 +716,8 @@ body.editor_enable.editor_has_snippets {
we-button {
display: flex;
justify-content: center;
flex: 0 1 percentage(1/3);
padding: 0 2px;
flex: 0 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;
}
}
@@ -744,6 +735,10 @@ body.editor_enable.editor_has_snippets {
&:focus-within {
border-color: $o-we-sidebar-content-field-input-border-color;
}
> we-button { // for input-group
border: none;
}
}
&.o_we_large_input > div {
@@ -862,7 +857,7 @@ body.editor_enable.editor_has_snippets {
input[type="range"] {
@include large-component();
height: $o-we-sidebar-content-field-height;
padding: 0;
padding: 0 $o-we-item-border-width 0 0;
background-color: transparent;
appearance: none;
addons/web_editor/static/src/xml/snippets.xml
+2 -2
View File
@@ -24,10 +24,10 @@
<we-title>
<span t-esc="name"/>
<we-top-button-group>
<we-button class="fa fa-fw fa-clone oe_snippet_clone o_we_hover_success"
<we-button class="fa fa-fw fa-clone oe_snippet_clone o_we_link o_we_hover_success"
title="Duplicate Container"
aria-label="Duplicate Container"/>
<we-button class="fa fa-fw fa-trash oe_snippet_remove o_we_hover_danger"
<we-button class="fa fa-fw fa-trash oe_snippet_remove o_we_link o_we_hover_danger"
title="Remove Block"
aria-label="Remove Block"/>
</we-top-button-group>
addons/web_editor/views/snippets.xml
+3 -2
View File
@@ -116,8 +116,9 @@
<we-button data-background-type="cover">Cover</we-button>
<we-button data-background-type="repeat-pattern" data-name="background_repeat_opt">Repeat pattern</we-button>
</we-select>
<we-button class="fa fa-fw fa-crosshairs" title="Background Position"
data-background-position-overlay="true" data-no-preview="true"/>
<we-button title="Background Position" data-background-position-overlay="true" data-no-preview="true">
<i class="fa fa-fw fa-crosshairs"/>
</we-button>
</we-row>
<we-multi data-css-property="background-size" data-dependencies="background_repeat_opt">
<!-- &emsp; -->
addons/website/static/src/js/editor/snippets.options.js
+4 -1
View File
@@ -30,8 +30,11 @@ const UrlPickerUserValueWidget = InputUserValueWidget.extend({
start: async function () {
await this._super(...arguments);
const linkButton = document.createElement('we-button');
linkButton.classList.add('o_we_redirect_to', 'fa', 'fa-fw', 'fa-external-link');
const icon = document.createElement('i');
icon.classList.add('fa', 'fa-fw', 'fa-external-link')
linkButton.classList.add('o_we_redirect_to');
linkButton.title = _t("Redirect to URL in a new tab");
linkButton.appendChild(icon);
this.containerEl.appendChild(linkButton);
this.el.classList.add('o_we_large_input');
this.inputEl.classList.add('text-left');
addons/website/static/src/snippets/s_chart/options.js
+1 -1
View File
@@ -201,7 +201,7 @@ options.registry.InnerChart = options.Class.extend({
*/
_makeDeleteButton: function (...classes) {
const rmbuttonEl = options.buildElement('we-button', null, {
classes: ['fa', 'fa-fw', 'fa-minus', ...classes],
classes: ['o_we_text_danger', 'o_we_link', 'fa', 'fa-fw', 'fa-minus', ...classes],
});
const newEl = document.createElement('td');
newEl.appendChild(rmbuttonEl);
addons/website/views/snippets/s_chart.xml
+2 -2
View File
@@ -48,10 +48,10 @@
<table>
<tr>
<th/>
<th><we-button class="fa fa-fw fa-plus add_column"/></th>
<th><we-button class="add_column fa fa-fw fa-plus o_we_link o_we_text_success d-inline-block"/></th>
</tr>
<tr>
<th><we-button class="fa fa-fw fa-plus add_row"/></th>
<th><we-button class="add_row fa fa-fw fa-plus o_we_link o_we_text_success d-inline-block"/></th>
</tr>
</table>
</we-matrix>
addons/website/views/snippets/s_rating.xml
+7 -3
View File
@@ -35,7 +35,9 @@
data-apply-to=".s_rating_active_icons"
data-css-property="color"
data-color-prefix="text-"/>
<we-button class="fa fa-fw fa-edit" data-custom-icon="true" data-custom-active-icon="true" data-no-preview="true"></we-button>
<we-button data-custom-icon="true" data-custom-active-icon="true" data-no-preview="true">
<i class="fa fa-fw fa-refresh mr-1"/> Replace Icon
</we-button>
</we-row>
<we-row string="⌙ Inactive">
<we-colorpicker
@@ -43,11 +45,13 @@
data-apply-to=".s_rating_inactive_icons"
data-css-property="color"
data-color-prefix="text-"/>
<we-button class="fa fa-fw fa-edit" data-custom-icon="true" data-custom-active-icon="false" data-no-preview="true"></we-button>
<we-button data-custom-icon="true" data-custom-active-icon="false" data-no-preview="true">
<i class="fa fa-fw fa-refresh mr-1"/> Replace Icon
</we-button>
</we-row>
<we-row string="Score">
<we-input data-active-icons-number="true" data-step="1"/>
<span>/</span>
<span class="mx-2">/</span>
<we-input data-total-icons-number="true" data-step="1"/>
</we-row>
<we-button-group string="Size" data-apply-to=".s_rating_icons">
addons/website/views/snippets/s_tabs.xml
+13 -9
View File
@@ -65,16 +65,20 @@
<xpath expr="." position="inside">
<div data-js="NavTabs" data-selector="section.s_tabs">
<we-button data-add-tab=""
data-no-preview="true"
class="fa fa-fw fa-plus"
title="Add Tab"
aria-label="Add Tab"/>
data-no-preview="true"
class="o_we_text_success ml-0"
title="Add Tab"
aria-label="Add Tab">
<i class="fa fa-fw fa-plus"/>
</we-button>
<we-button data-remove-tab=""
data-name="remove_tab_opt"
data-no-preview="true"
class="fa fa-fw fa-minus"
title="Remove Tab"
aria-label="Remove Tab"/>
data-name="remove_tab_opt"
data-no-preview="true"
class="o_we_text_danger mr-3"
title="Remove Tab"
aria-label="Remove Tab">
<i class="fa fa-fw fa-minus"/>
</we-button>
</div>
<div data-js="NavTabsStyle" data-selector="section" data-target=".s_tabs_main">
<we-select string="Style">
addons/website/views/snippets/snippets.xml
+14 -6
View File
@@ -383,10 +383,18 @@
<div data-js="CarouselItem"
data-selector=".s_carousel .carousel-item, .s_quotes_carousel .carousel-item">
<we-button data-slide="left" data-no-preview="true" class="fa fa-fw fa-angle-left"/>
<we-button data-slide="right" data-no-preview="true" class="fa fa-fw fa-angle-right"/>
<we-button data-add-slide="true" data-no-preview="true" class="fa fa-fw fa-plus"/>
<we-button data-remove-slide="true" data-no-preview="true" class="fa fa-fw fa-minus"/>
<we-button data-slide="left" data-no-preview="true">
<i class="fa fa-fw fa-angle-left"/>
</we-button>
<we-button data-slide="right" data-no-preview="true" class="mr-2">
<i class="fa fa-fw fa-angle-right"/>
</we-button>
<we-button data-add-slide="true" data-no-preview="true" class="o_we_text_success">
<i class="fa fa-fw fa-plus"/>
</we-button>
<we-button data-remove-slide="true" data-no-preview="true" class="o_we_text_danger">
<i class="fa fa-fw fa-minus"/>
</we-button>
</div>
<!-- Accordion -->
@@ -491,7 +499,7 @@
<div data-js="SnippetSave"
t-attf-data-selector="#{so_snippet_addition_selector}, #{so_content_addition_selector}">
<we-button class="fa fa-fw fa-save o_we_hover_warning"
<we-button class="fa fa-fw fa-save o_we_link o_we_hover_warning"
title="Save the block to use it elsewhere"
data-save-snippet=""
data-no-preview="true"/>
@@ -719,7 +727,7 @@
<div data-js="anchor"
data-selector=":not(p).oe_structure > *, :not(p)[data-oe-type=html] > *"
data-exclude=".modal *, .oe_structure .oe_structure *, [data-oe-type=html] .oe_structure *">
<we-button class="fa fa-fw fa-link"
<we-button class="fa fa-fw fa-link o_we_link"
title="Create a link to target this section"
data-no-preview="true"/>
</div>
addons/website_form/views/snippets/s_website_form.xml
+8 -4
View File
@@ -45,18 +45,22 @@
<!-- Add Field Form -->
<div data-js="AddFieldForm" data-selector=".s_website_form" data-target="form">
<we-button class="fa fa-fw fa-plus"
<we-button class="o_we_text_success"
title="Add a new field at the end"
data-add-field=""
data-no-preview="true"/>
data-no-preview="true">
<i class="fa fa-fw fa-plus"/>
</we-button>
</div>
<!-- Add Field -->
<div data-js="AddField" data-selector=".s_website_form_field" data-exclude=".s_website_form_dnone">
<we-button class="fa fa-fw fa-plus"
<we-button class="o_we_text_success"
title="Add a new field after this one"
data-add-field=""
data-no-preview="true"/>
data-no-preview="true">
<i class="fa fa-fw fa-plus"/>
</we-button>
</div>
<!-- Field -->