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

[IMP] web_editor, website: reorganize non-floating toolbar buttons

Browse Source 
This rearranges the non-floating toolbar buttons so that the AI, animate
and highlight buttons are grouped together at the bottom and take up the
full width of the toolbar, and so that the options appear below them.

task-3572337

closes odoo/odoo#139857

Signed-off-by: Geelen Sébastien (sge) <sge@odoo.com>
This commit is contained in:
Antoine Guenet
2023-11-02 16:57:48 +00:00
parent ca824e547e
commit 9b06f097b8
5 changed files with 60 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
+1 -1
View File
@@ -1758,7 +1758,7 @@ export class Wysiwyg extends Component {
e.preventDefault();
e.stopImmediatePropagation();
e.stopPropagation();
switch (e.target.id) {
switch (e.currentTarget.id) {
case 'create-link':
this.toggleLinkTools();
break;
addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+34 -4
View File
@@ -499,9 +499,21 @@
background: transparent;
margin-top: $o-we-sidebar-content-field-spacing;
padding: 0 $o-we-sidebar-content-padding-base 0 $o-we-sidebar-content-indent;
grid-template-areas: "typo typo style colors" "size align list link" "options options options options" "options2 options2 options2 options2";
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: minmax($o-we-sidebar-content-field-height, auto) minmax($o-we-sidebar-content-field-height, auto) auto auto ;
grid-template-areas:
"typo typo style style colors"
"size align list list link"
"ai animate animate hilight hilight"
"options options options options options"
"options2 options2 options2 options2 options2"
"options3 options3 options3 options3 options3";
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows:
minmax($o-we-sidebar-content-field-height, auto)
minmax($o-we-sidebar-content-field-height, auto)
minmax($o-we-sidebar-content-field-height, auto)
auto
auto
auto;
row-gap: $o-we-sidebar-content-field-spacing;
column-gap: $o-we-sidebar-content-field-multi-spacing;
width: 100%;
@@ -626,8 +638,12 @@
}
}
& + we-customizeblock-option {
& ~ we-customizeblock-option {
grid-area: options2;
& ~ we-customizeblock-option {
grid-area: options3;
}
}
}
@@ -723,6 +739,20 @@
}
}
#chatgpt {
grid-area: ai;
span {
margin-left: 5px;
}
}
#animate {
grid-area: animate;
}
#highlight {
grid-area: hilight;
}
.dropdown-menu.colorpicker-menu {
min-width: 0;
max-height: none;
addons/web_editor/static/src/xml/editor.xml
+3 -1
View File
@@ -176,7 +176,9 @@
</div>
<div id="chatgpt" class="btn-group">
<div id="open-chatgpt" title="Generate or transform content with AI" class="fa fa-magic fa-fw btn editor-ignore"></div>
<div id="open-chatgpt" title="Generate or transform content with AI" class="btn editor-ignore">
<span class="fa fa-magic fa-fw"></span>
</div>
</div>
<div t-if="props.showImageShape" id="image-shape" class="btn-group">
addons/website/static/src/js/editor/snippets.editor.js
+2 -2
View File
@@ -616,7 +616,7 @@ const wSnippetMenu = weSnippetEditor.SnippetsMenu.extend({
* @param {Event} ev
*/
_onAnimateTextClick(ev) {
const target = ev.target;
const target = ev.currentTarget;
this._handleTextOptions(target, [
this._getOptionTextClass(target),
"o_animate",
@@ -636,7 +636,7 @@ const wSnippetMenu = weSnippetEditor.SnippetsMenu.extend({
* @param {Event} ev
*/
_onTextHighlightClick(ev) {
const target = ev.target;
const target = ev.currentTarget;
this._handleTextOptions(target, [
this._getOptionTextClass(target),
"o_text_highlight_underline",
addons/website/static/src/xml/web_editor.xml
+20 -9
View File
@@ -40,20 +40,31 @@
<xpath expr="//t[@t-if='this.isMobile()']//div[@id='list']" position="inside">
<div t-if="props.showAnimateText" title="Animate text" class="btn fa fa-play fa-fw o_we_animate_text" data-text-selector=".o_animated_text"/>
</xpath>
<xpath expr="//t[@t-else]//div[@id='list']" position="inside">
<div t-if="props.showAnimateText" title="Animate text" class="btn fa fa-play fa-fw o_we_animate_text" data-text-selector=".o_animated_text"/>
<xpath expr="//t[@t-else]//div[last()]" position="after">
<div t-if="props.showAnimateText" id="animate" class="btn-group">
<div title="Animate text" class="btn o_we_animate_text" data-text-selector=".o_animated_text">
<span class="fa fa-play fa-fw"></span>
<span>Animate</span>
</div>
</div>
</xpath>
<xpath expr="//div[@id='open-chatgpt']" position="inside">
<span>AI</span>
</xpath>
<xpath expr="//div[@id='strikethrough']" position="attributes">
<attribute name="t-if">!props.showTextHighlights</attribute>
</xpath>
<xpath expr="//div[@id='underline']" position="attributes">
<attribute name="t-if">!props.showTextHighlights</attribute>
</xpath>
<xpath expr="//div[@id='underline']" position="after">
<div t-if="props.showTextHighlights" title="Add Text Highlight Effects"
class="btn oi oi-text-effect oi-fw o_we_text_highlight"
data-text-selector=".o_text_highlight"/>
<xpath expr="//div[1]" position="inside">
<div t-if="props.showTextHighlights" id="highlight" class="btn-group">
<div title="Add Text Highlight Effects"
class="btn o_we_text_highlight"
data-text-selector=".o_text_highlight">
<span class="oi oi-text-effect oi-fw"></span>
<span>Highlight</span>
</div>
</div>
</xpath>
</t>
</templates>