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

[IMP] web_editor: make oe-toolbar design closer to right panel select

Browse Source 
The code of this commit is ugly: it only forces extra new rules to make
dropdowns in the right panel toolbar closer to the we-select design.
This should be refactored. Mass mailing should have the same visual,
CSS rules should be shared, etc etc.

task-1958098

Part-of: odoo/odoo#129791
This commit is contained in:
qsm-odoo
2023-10-19 19:08:11 +00:00
parent c91f5fdc47
commit da8fec249a
2 changed files with 39 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+27
View File
@@ -516,6 +516,33 @@
padding: ($o-we-sidebar-content-field-height * .12) ($o-we-sidebar-content-field-button-group-button-spacing - 2.5);
}
.dropdown-menu {
border-color: $o-we-sidebar-content-field-dropdown-border-color;
padding: 0;
> li ~ li {
border-top: $o-we-sidebar-content-field-dropdown-item-spacing solid transparent;
}
}
.dropdown-item {
@include we-icon-button('', $align: left); // Always a padding on the left
background-color: $o-we-sidebar-content-field-dropdown-item-bg;
color: $o-we-sidebar-content-field-dropdown-item-color;
border-radius: 0;
padding-top: 5px;
padding-bottom: 5px;
&:hover, &:focus {
background: $o-we-dropdown-item-bg-hover;
color: $o-we-dropdown-item-hover-color;
}
}
.o_we_font_size_badge {
opacity: 0.6;
}
#font-size > button {
&:focus-within {
@extend %we-generic-text-input;
addons/web_editor/static/src/xml/editor.xml
+12 -12
View File
@@ -101,18 +101,18 @@
</button>
<ul class="dropdown-menu">
<!-- See `FONT_SIZE_CLASSES` -->
<li><a class="dropdown-item d-flex justify-content-between align-items-center" data-dynamic-value="display-1-font-size" data-apply-class="display-1-fs" href="#">? <span class="d-none o_we_font_size_badge badge rounded-pill bg-light text-dark ms-2">Display 1</span></a></li>
<li><a class="dropdown-item d-flex justify-content-between align-items-center" data-dynamic-value="display-2-font-size" data-apply-class="display-2-fs" href="#">? <span class="d-none o_we_font_size_badge badge rounded-pill bg-light text-dark ms-2">Display 2</span></a></li>
<li><a class="dropdown-item d-flex justify-content-between align-items-center" data-dynamic-value="display-3-font-size" data-apply-class="display-3-fs" href="#">? <span class="d-none o_we_font_size_badge badge rounded-pill bg-light text-dark ms-2">Display 3</span></a></li>
<li><a class="dropdown-item d-flex justify-content-between align-items-center" data-dynamic-value="display-4-font-size" data-apply-class="display-4-fs" href="#">? <span class="d-none o_we_font_size_badge badge rounded-pill bg-light text-dark ms-2">Display 4</span></a></li>
<li><a class="dropdown-item d-flex justify-content-between align-items-center" data-dynamic-value="h1-font-size" data-apply-class="h1-fs" href="#">? <span class="d-none o_we_font_size_badge badge rounded-pill bg-light text-dark ms-2">Heading 1</span></a></li>
<li><a class="dropdown-item d-flex justify-content-between align-items-center" data-dynamic-value="h2-font-size" data-apply-class="h2-fs" href="#">? <span class="d-none o_we_font_size_badge badge rounded-pill bg-light text-dark ms-2">Heading 2</span></a></li>
<li><a class="dropdown-item d-flex justify-content-between align-items-center" data-dynamic-value="h3-font-size" data-apply-class="h3-fs" href="#">? <span class="d-none o_we_font_size_badge badge rounded-pill bg-light text-dark ms-2">Heading 3</span></a></li>
<li><a class="dropdown-item d-flex justify-content-between align-items-center" data-dynamic-value="h4-font-size" data-apply-class="h4-fs" href="#">? <span class="d-none o_we_font_size_badge badge rounded-pill bg-light text-dark ms-2">Heading 4</span></a></li>
<li><a class="dropdown-item d-flex justify-content-between align-items-center" data-dynamic-value="h5-font-size" data-apply-class="h5-fs" href="#">? <span class="d-none o_we_font_size_badge badge rounded-pill bg-light text-dark ms-2">Heading 5</span></a></li>
<li><a class="dropdown-item d-flex justify-content-between align-items-center" data-dynamic-value="h6-font-size" data-apply-class="h6-fs" href="#">? <span class="d-none o_we_font_size_badge badge rounded-pill bg-light text-dark ms-2">Heading 6</span></a></li>
<li><a class="dropdown-item d-flex justify-content-between align-items-center" data-dynamic-value="font-size-base" data-apply-class="base-fs" href="#">? <span class="d-none o_we_font_size_badge badge rounded-pill bg-light text-dark ms-2">Normal</span></a></li>
<li><a class="dropdown-item d-flex justify-content-between align-items-center" data-dynamic-value="small-font-size" data-apply-class="small" href="#">? <span class="d-none o_we_font_size_badge badge rounded-pill bg-light text-dark ms-2">Small</span></a></li>
<li><a class="dropdown-item d-flex justify-content-between align-items-center" data-dynamic-value="display-1-font-size" data-apply-class="display-1-fs" href="#">? <span class="d-none o_we_font_size_badge badge rounded-pill text-bg-dark ms-4">Display 1</span></a></li>
<li><a class="dropdown-item d-flex justify-content-between align-items-center" data-dynamic-value="display-2-font-size" data-apply-class="display-2-fs" href="#">? <span class="d-none o_we_font_size_badge badge rounded-pill text-bg-dark ms-4">Display 2</span></a></li>
<li><a class="dropdown-item d-flex justify-content-between align-items-center" data-dynamic-value="display-3-font-size" data-apply-class="display-3-fs" href="#">? <span class="d-none o_we_font_size_badge badge rounded-pill text-bg-dark ms-4">Display 3</span></a></li>
<li><a class="dropdown-item d-flex justify-content-between align-items-center" data-dynamic-value="display-4-font-size" data-apply-class="display-4-fs" href="#">? <span class="d-none o_we_font_size_badge badge rounded-pill text-bg-dark ms-4">Display 4</span></a></li>
<li><a class="dropdown-item d-flex justify-content-between align-items-center" data-dynamic-value="h1-font-size" data-apply-class="h1-fs" href="#">? <span class="d-none o_we_font_size_badge badge rounded-pill text-bg-dark ms-4">Heading 1</span></a></li>
<li><a class="dropdown-item d-flex justify-content-between align-items-center" data-dynamic-value="h2-font-size" data-apply-class="h2-fs" href="#">? <span class="d-none o_we_font_size_badge badge rounded-pill text-bg-dark ms-4">Heading 2</span></a></li>
<li><a class="dropdown-item d-flex justify-content-between align-items-center" data-dynamic-value="h3-font-size" data-apply-class="h3-fs" href="#">? <span class="d-none o_we_font_size_badge badge rounded-pill text-bg-dark ms-4">Heading 3</span></a></li>
<li><a class="dropdown-item d-flex justify-content-between align-items-center" data-dynamic-value="h4-font-size" data-apply-class="h4-fs" href="#">? <span class="d-none o_we_font_size_badge badge rounded-pill text-bg-dark ms-4">Heading 4</span></a></li>
<li><a class="dropdown-item d-flex justify-content-between align-items-center" data-dynamic-value="h5-font-size" data-apply-class="h5-fs" href="#">? <span class="d-none o_we_font_size_badge badge rounded-pill text-bg-dark ms-4">Heading 5</span></a></li>
<li><a class="dropdown-item d-flex justify-content-between align-items-center" data-dynamic-value="h6-font-size" data-apply-class="h6-fs" href="#">? <span class="d-none o_we_font_size_badge badge rounded-pill text-bg-dark ms-4">Heading 6</span></a></li>
<li><a class="dropdown-item d-flex justify-content-between align-items-center" data-dynamic-value="font-size-base" data-apply-class="base-fs" href="#">? <span class="d-none o_we_font_size_badge badge rounded-pill text-bg-dark ms-4">Normal</span></a></li>
<li><a class="dropdown-item d-flex justify-content-between align-items-center" data-dynamic-value="small-font-size" data-apply-class="small" href="#">? <span class="d-none o_we_font_size_badge badge rounded-pill text-bg-dark ms-4">Small</span></a></li>
</ul>
</div>
</t>