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

[REF] web_editor: review user value widgets scss

Browse Source 
Part of https://github.com/odoo/odoo/pull/41402
This commit is contained in:
qsm-odoo
2019-12-06 10:05:55 +00:00
parent a41717bebf
commit 83fae16bb9
4 changed files with 184 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/js/libs/jquery.js
Vendored
+3
View File
@@ -17,6 +17,9 @@ $.extend($.expr[':'], {
containsExact: function (element, index, matches){
return $.trim(element.innerHTML) === matches[3];
},
containsExactText: function (element, index, matches) {
return element.innerText.trim() === matches[3].trim();
},
/**
* Note all escaped characters need to be double escaped inside of the
* expression, so "\(" needs to be "\\("
addons/web_editor/static/src/js/editor/snippets.options.js
+13 -19
View File
@@ -109,6 +109,7 @@ function createPropertyProxy(obj, propertyName, value) {
* user values.
*/
const UserValueWidget = Widget.extend({
className: 'o_we_user_value_widget',
custom_events: {
'user_value_change': '_onUserValueNotification',
'user_value_preview': '_onUserValueNotification',
@@ -132,6 +133,8 @@ const UserValueWidget = Widget.extend({
_makeDescriptive: function () {
const $el = this._super(...arguments);
_addTitleAndAllowedAttributes($el[0], this.title, this.options);
this.containerEl = document.createElement('div');
$el.append(this.containerEl);
return $el;
},
@@ -471,7 +474,7 @@ const ButtonUserValueWidget = UserValueWidget.extend({
*/
start: function (parent, title, options) {
if (this.options && this.options.childNodes) {
this.options.childNodes.forEach(node => this.el.appendChild(node));
this.options.childNodes.forEach(node => this.containerEl.appendChild(node));
}
return this._super(...arguments);
@@ -529,7 +532,7 @@ const CheckboxUserValueWidget = ButtonUserValueWidget.extend({
*/
start: function () {
const checkboxEl = document.createElement('we-checkbox');
this.el.appendChild(checkboxEl);
this.containerEl.appendChild(checkboxEl);
return this._super(...arguments);
},
@@ -546,17 +549,17 @@ const SelectUserValueWidget = UserValueWidget.extend({
*/
start: function () {
if (this.options && this.options.valueEl) {
this.el.appendChild(this.options.valueEl);
this.containerEl.appendChild(this.options.valueEl);
}
this.menuTogglerEl = document.createElement('we-toggler');
this.el.appendChild(this.menuTogglerEl);
this.containerEl.appendChild(this.menuTogglerEl);
this.menuEl = document.createElement('we-select-menu');
if (this.options && this.options.childNodes) {
this.options.childNodes.forEach(node => this.menuEl.appendChild(node));
}
this.el.appendChild(this.menuEl);
this.containerEl.appendChild(this.menuEl);
return this._super(...arguments);
},
@@ -661,11 +664,11 @@ const InputUserValueWidget = UserValueWidget.extend({
this.inputEl = document.createElement('input');
this.inputEl.setAttribute('type', 'text');
this.el.appendChild(this.inputEl);
this.containerEl.appendChild(this.inputEl);
var unitEl = document.createElement('span');
unitEl.textContent = unit;
this.el.appendChild(unitEl);
this.containerEl.appendChild(unitEl);
return this._super(...arguments);
},
@@ -825,7 +828,7 @@ const MultiUserValueWidget = UserValueWidget.extend({
* @override
*/
start: function () {
this.el.appendChild(_buildRowElement('', this.options));
this.containerEl.appendChild(_buildRowElement('', this.options));
return this._super(...arguments);
},
@@ -865,6 +868,7 @@ const MultiUserValueWidget = UserValueWidget.extend({
});
const ColorpickerUserValueWidget = SelectUserValueWidget.extend({
className: (ButtonUserValueWidget.prototype.className || '') + ' o_we_so_color_palette',
custom_events: {
'color_picked': '_onColorPicked',
'color_hover': '_onColorHovered',
@@ -872,15 +876,6 @@ const ColorpickerUserValueWidget = SelectUserValueWidget.extend({
'color_reset': '_onColorReset',
},
/**
* @override
*/
init: function () {
this._super(...arguments);
if (!this.title) {
this.title = ' ';
}
},
/**
* @override
*/
@@ -888,13 +883,12 @@ const ColorpickerUserValueWidget = SelectUserValueWidget.extend({
const _super = this._super.bind(this);
const args = arguments;
this.el.classList.add('o_we_so_color_palette');
// Pre-instanciate the color palette widget
await this._renderColorPalette();
// Build the select element with a custom span to hold the color preview
this.colorPreviewEl = document.createElement('span');
this.colorPreviewEl.classList.add('o_we_color_preview');
this.options.childNodes = [this.colorPalette.el];
this.options.valueEl = this.colorPreviewEl;
addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+167 -157
View File
@@ -176,6 +176,16 @@ body.editor_enable.editor_has_snippets {
> .o_we_customize_panel {
@mixin we-icon-button($icon, $color: null) {
@extend %we-icon-button;
padding-right: 0.5em + 1em + 0.5em;
&::after {
content: $icon;
color: $color;
}
}
we-button, we-toggler {
flex: 1 1 auto;
cursor: pointer;
@@ -216,32 +226,25 @@ body.editor_enable.editor_has_snippets {
}
}
}
we-title {
text-transform: capitalize;
we-toggler {
@include we-icon-button('\f107');
}
%we-icon-button {
position: relative;
&::after {
position: absolute;
@include o-position-absolute(50%, 0.5em);
transform: translateY(-50%);
width: 1em;
right: 0.5em;
text-align: center;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
}
@mixin we-icon-button($icon, $color: null) {
@extend %we-icon-button;
padding-right: 0.5em + 1em + 0.5em;
&::after {
content: $icon;
color: $color;
}
we-title {
display: block;
text-transform: capitalize;
}
we-customizeblock-options {
@@ -283,162 +286,112 @@ body.editor_enable.editor_has_snippets {
margin-top: 0.5em;
}
we-button {
&.active {
@include we-icon-button('\f00c', $o-we-color-success);
}
}
.o_we_checkbox_wrapper.active {
padding-right: 0;
&::after {
right: 0;
}
}
we-toggler {
@include we-icon-button('\f107');
}
we-select {
flex: 1 1 auto;
position: relative;
display: flex;
flex-flow: row wrap;
align-items: center;
we-toggler {
flex: 0 0 100%;
&.active {
background-color: transparent;
border-color: var(--o-we-color);
}
}
we-select-menu {
@include o-position-absolute(100%, 0, auto, 0);
display: none;
z-index: $zindex-dropdown;
border: 1px solid var(--o-we-color);
border-top-style: none;
background-color: var(--o-we-bg-color-dark);
}
}
we-toggler.active {
+ we-select-menu {
display: block;
}
}
.o_we_checkbox_wrapper {
display: flex;
align-items: center;
padding: 0;
border: none;
background-color: transparent;
color: inherit;
> we-title {
flex: 1 1 auto;
min-width: 0;
@include o-text-overflow(block);
}
> we-checkbox {
flex: 0 0 auto;
display: block;
width: 1em;
height: 1em;
margin-left: auto;
border: 1px solid var(--o-we-bg-color-dark);
border-radius: 0;
background-color: var(--o-we-bg-color-dark);
}
}
we-input {
flex: 1 1 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
> we-title {
min-width: 100%;
}
> input {
flex: 1 1 auto;
width: 0;
min-width: 1.5em;
margin: 0 2px 0 0;
padding: 0 2px;
border: none;
border-radius: 0;
background-color: var(--o-we-bg-color-dark);
color: var(--o-we-color);
text-align: right;
}
> span {
flex: 0 0 auto;
}
}
we-row {
position: relative;
display: block;
> div {
flex: 1 1 auto;
display: flex;
align-items: center;
> * + * {
margin-left: 0.5em;
}
}
we-select {
position: static;
}
}
.o_we_inline {
display: flex;
align-items: center;
> we-title {
min-width: 60%;
margin-right: 5%;
}
}
.dropdown-menu {
// FIXME temporary fix for m2o option for example
position: static !important;
}
}
// Specific options
.snippet-option-background {
[data-background=""] {
color: $o-we-color-danger;
}
[data-choose-image="true"] {
display: flex;
align-items: center;
//----------------------------------------------------------------------
// User Value Widgets
//----------------------------------------------------------------------
> span {
@include o-text-overflow();
}
> .fa, > .fas, > .fab, > .far {
margin-left: auto;
.o_we_user_value_widget {
flex: 1 1 auto;
display: block;
> div {
display: flex;
align-items: baseline;
}
}
// Buttons
we-button.o_we_user_value_widget.active {
@include we-icon-button('\f00c', $o-we-color-success);
}
// Checkboxes
.o_we_checkbox_wrapper.o_we_user_value_widget {
@extend .o_we_inline;
flex: 0 0 auto;
padding: 0;
border: none;
background-color: transparent;
color: inherit;
we-checkbox {
flex: 0 0 auto;
display: block;
width: 1em;
height: 1em;
margin-left: auto;
border: 1px solid var(--o-we-bg-color-dark);
border-radius: 0;
background-color: var(--o-we-bg-color-dark);
}
&.active {
padding-right: 0;
&::after {
right: 0;
}
}
}
.o_we_so_color_palette {
// Selects
we-select.o_we_user_value_widget {
position: relative;
we-toggler {
flex: 0 0 100%;
&.active {
background-color: transparent;
border-color: var(--o-we-color);
+ we-select-menu {
display: block;
}
}
}
we-select-menu {
@include o-position-absolute(100%, 0, auto, 0);
display: none;
z-index: $zindex-dropdown;
border: 1px solid var(--o-we-color);
border-top-style: none;
background-color: var(--o-we-bg-color-dark);
}
}
// Inputs
we-input.o_we_user_value_widget {
input {
flex: 1 1 auto;
width: 0;
min-width: 1.5em;
margin: 0 2px 0 0;
padding: 0 2px;
border: none;
border-radius: 0;
background-color: var(--o-we-bg-color-dark);
color: var(--o-we-color);
text-align: right;
}
span {
flex: 0 0 auto;
}
}
// Color Pickers
.o_we_so_color_palette.o_we_user_value_widget {
@extend .o_we_inline;
flex: 0 0 auto;
we-title + span {
.o_we_color_preview {
@include o-alpha-button-preview;
display: block;
flex: 0 0 auto;
@@ -454,6 +407,63 @@ body.editor_enable.editor_has_snippets {
border-top-style: solid;
}
}
//----------------------------------------------------------------------
// Layout Utils
//----------------------------------------------------------------------
we-row {
position: relative;
flex: 1 1 auto;
display: block;
> div {
display: flex;
align-items: center;
> * + * {
margin-left: 0.5em;
}
}
we-select.o_we_user_value_widget {
position: static;
}
}
.o_we_inline {
&, &.o_we_user_value_widget {
display: flex;
align-items: center;
> we-title {
@include o-text-overflow();
min-width: 60%;
margin-right: 5%;
}
> div {
flex: 1 1 auto;
}
}
}
//----------------------------------------------------------------------
// Specific Options
//----------------------------------------------------------------------
.snippet-option-background {
[data-background=""] {
color: $o-we-color-danger;
}
[data-choose-image="true"] {
span {
@include o-text-overflow();
}
.fa, .fas, .fab, .far {
margin-left: auto;
}
}
}
}
}
addons/website_blog/static/src/js/tours/website_blog.js
+1 -1
View File
@@ -23,7 +23,7 @@ odoo.define("website_blog.tour", function (require) {
position: "top",
run: "text",
}, {
trigger: "we-button:containsExact(" + _t("Change Cover") + "):visible",
trigger: "we-button:containsExactText(" + _t("Change Cover") + ")",
extra_trigger: "#wrap div[data-oe-expression=\"blog_post.name\"]:not(:containsExact(\"\"))",
content: _t("Set a blog post <b>cover</b>."),
position: "right",