NextERP/design-themes
2
0
Fork 0
mirror of https://github.com/odoo/design-themes.git synced 2025-10-07 01:18:52 +07:00
Code Issues Packages Projects Releases Wiki Activity

[IMP] theme_*: use minimal format for highlighted text content

Browse Source 
*: buzzy, clean, notes

A highlighted text has the following structure:

```
<span class="o_text_highlight o_text_highlight_[highlightId]"
    style="--text-highlight-width: ...; --text-highlight-color: ...;">
    <span class="o_text_highlight_item">
        text content (line 1) ...
        <svg.../>
    </span>
    [<br/>]
    <span class="o_text_highlight_item">
        text content (line 2) ...
        <svg.../>
    </span>
    ...
</span>
```

Which is saved in a minimal format that allows the JS code to rebuild
the SVGs when it's needed:

```
<span class="o_text_highlight o_text_highlight_[highlightId]"
    style="--text-highlight-width: ...; --text-highlight-color: ...;">
    text content ...
</span>
```

The goal of this commit is to use the simplified format for theme
customizations and adapt the code from the "Snippets Preview" and the
"New Page Templates Preview" to be able to build the highlights using
this format when provided in XML.

task-4215788

closes odoo/design-themes#964

X-original-commit: ab8f6a8fce
Related: odoo/odoo#182003
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
Mehdi Outagant (MOU)
2024-09-27 15:02:35 +00:00
committed by qsm-odoo
parent fc1382ce5a
commit 662c399420
11 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
theme_buzzy/views/snippets/s_accordion_image.xml
+1 -1
View File
@@ -6,7 +6,7 @@
<attribute name="class" remove="o_cc o_cc2" separator=" "/>
</xpath>
<xpath expr="//h2" position="replace" mode="inner">
Top <span class="o_text_highlight o_translate_inline o_text_highlight_scribble_4 o_text_highlight_fill" style="--text-highlight-width: 3px;"><span class="o_text_highlight_item">questions<svg fill="none" class="o_text_highlight_svg o_content_no_merge position-absolute overflow-visible top-0 start-0 w-100 h-100 pe-none"><path stroke-width="var(--text-highlight-width)" stroke="var(--text-highlight-color)" stroke-linecap="round" fill="var(--text-highlight-color)" transform="scale(0.6384375, 0.5737704918032787)" d="M96.414 17.157c1.34-2.173 2.462-4.075 3.649-5.944 2.117-3.335 5.528-4.302 9.372-2.694 3.962 1.651 4.89 3.575 3.908 8.073-.205.967-.388 1.934-.022 3.118 1.513-3.075 3.013-6.15 4.557-9.203 1.306-2.586 4.297-3.433 7.859-2.195 2.765.968 4.395 2.706 3.564 5.922-.529 2.054-1.005 4.118-.918 6.487.463-.859 1.015-1.685 1.371-2.586 1.447-3.673 3.002-7.324 4.2-11.083.896-2.792 2.192-3.955 5.323-3.564 4.772.598 7.049 3.412 5.84 7.986-.626 2.38-1.22 4.77-1.144 7.486.745-1.358 1.544-2.683 2.213-4.074a138.72 138.72 0 0 0 2.926-6.487c2.376-5.66 3.12-4.704 8.724-3.618 3.552.685 5.063 4.031 4.34 7.997-.616 3.423-1.166 6.856-1.749 10.29l.95.358c.993-2.151 2.062-4.27 2.958-6.454.594-1.456.886-3.042 1.403-4.53 2.43-6.911 2.43-6.813 9.566-5.542.928.163 2.656-.967 3.078-1.923.992-2.26 2.332-2.716 4.523-2.097 4.297 1.206 8.659 2.184 12.945 3.444 2.796.826 4.319 2.988 4.135 5.889-.173 2.684-.961 5.324-1.274 8.008-.734 6.4-1.361 12.799-2.019 19.21-.065.673.043 1.38-.097 2.031-.551 2.477-.41 5.465-3.476 6.421-2.311.717-6.489-2.194-7.644-5.03-.206-.5-.357-1.01-.918-2.63-1.22 3.27-2.073 5.629-2.991 7.965-2.095 5.345-3.66 5.954-8.874 3.705-.853-.37-2.354-.783-2.786-.359-3.163 3.075-5.971 1.217-8.853-.358-.378-.207-.81-.316-1.188-.457-5.851 7.65-12.502 4.596-15.061-3.944-1.543 3.042-2.883 5.726-4.265 8.399-3.357 6.53-7.783 6.975-12.47 1.25-.485-.587-.992-1.152-1.511-1.75-5.647 6.715-12.848 2.293-15.19-6.063-1.253 2.25-2.257 3.88-3.099 5.596-1.285 2.64-2.883 4.65-6.23 3.868-3.498-.826-6.532-4.085-6.65-7.225-.054-1.424 0-2.847-.475-4.433-1.393 2.879-2.71 5.802-4.19 8.637-3.228 6.204-6.067 6.824-11.67 2.912-.962-.673-2.57-.988-3.704-.728-3.681.837-6.272-.619-8.626-3.248-.691-.783-2.084-1.771-2.807-1.543-4.243 1.347-6.91-.641-9.166-3.836-.378-.543-.8-1.053-1.555-2.031-1.08 2.194-2.008 4.041-2.915 5.9-2.397 4.943-5.528 5.932-10.02 2.835-2.008-1.38-3.713-2.118-6.37-1.738-5.117.728-8.54-3.444-7.762-8.649.227-1.521.378-3.064-.086-4.9-.853 1.369-1.793 2.684-2.548 4.107-2.775 5.259-5.301 5.856-10.074 2.206-.971-.75-1.803-1.674-2.86-2.673-.67.271-1.598 1.043-2.257.858-2.71-.771-5.625-1.423-7.838-3.01-.842-.608-.378-3.683.108-5.465 2.008-7.41 4.232-14.755 6.413-22.11.572-1.945 1.166-3.901 1.943-5.77 1.89-4.52 5.02-5.454 9.145-2.89 1.144.706 2.408 1.217 3.552 1.923 2.364 1.456 4.696 2.988 7.439 4.737C32.423 7.14 37.444 6.64 42.82 10.41c2.602-2.107 1.803-7.17 6.748-6.323 3.369.587 6.478 1.217 7.439 4.878 2.289-2.281 4.221-5.693 6.877-6.42 2.624-.718 5.992 1.26 9.599 2.216-.044.054.636-.565.96-1.348 1.048-2.499 2.883-3.4 5.42-2.825 2.775.62 5.474 1.304 6.284 4.76.216.89 1.285 2.042 2.159 2.248 7.58 1.793 7.6 1.739 8.108 9.55v.012Z" class="o_text_highlight_path_scribble_4"></path></svg></span></span> answered
Top <span class="o_text_highlight o_translate_inline o_text_highlight_scribble_4 o_text_highlight_fill">questions</span> answered
</xpath>
<xpath expr="//img" position="attributes">
<attribute name="src">/web_editor/shape/theme_buzzy/s_accordion_image.svg?c1=o-color-2</attribute>
theme_buzzy/views/snippets/s_banner.xml
+1 -1
View File
@@ -18,7 +18,7 @@
<attribute name="style"/>
</xpath>
<xpath expr="//h1" position="replace" mode="inner">
Unleash your <strong class="o_default_snippet_text"><span class="o_text_highlight o_translate_inline o_text_highlight_scribble_3 o_text_highlight_fill" style="--text-highlight-width: 6px;"><span class="o_text_highlight_item">potential<svg fill="none" class="o_text_highlight_svg o_content_no_merge position-absolute overflow-visible top-0 start-0 w-100 h-100 pe-none"><path stroke-width="var(--text-highlight-width)" stroke="var(--text-highlight-color)" stroke-linecap="round" fill="var(--text-highlight-color)" transform="translate(0 64) scale(1.304140625, 0.75)" d="M133.953 15.961c7.87.502 15.751.975 23.611 1.522 2.027.141 4.055.44 5.999.79 4.118.727 7.202 4.977 2.53 6.707.606.293 1.181.564 1.902.908-8.477 2.069-17.267 2.65-26.203 2.818-19.023.361-38.056.603-57.068 1.088-13.807.355-27.572 1.06-41.369 1.545-3.23.113-6.532.096-9.73-.147-1.548-.118-3.492-.721-4.234-1.42-.93-.88-1.484-2.199-.93-3.1.397-.655 2.812-1.263 4.41-1.33 6.397-.277 12.825-.333 19.243-.474 26.976-.592 53.942-1.156 80.919-1.804 3.742-.09 7.452-.592 11.173-.908 0-.174-.01-.35-.021-.524-2.717-.197-5.435-.53-8.163-.575-21.865-.383-43.741-1.009-65.607-.936-11.34.04-22.65 1.432-34 2.047-6.898.377-13.88.732-20.779.569-7.044-.17-9.406-3.568-5.34-6.742 3.428-2.677 7.567-4.391 13.984-4.757 16.441-.93 32.798-2.26 49.219-3.27 14.162-.868 28.366-1.516 42.549-2.266.586-.034 1.15-.147 1.641-.45-5.006 0-10.023-.012-15.029.01-1.077 0-2.154.186-3.24.192-18.793.18-37.596.355-56.389.507-10.672.085-21.343.13-32.014.153a65.89 65.89 0 0 1-6.167-.277C1.787 5.555-.02 4.247 0 2.59 0 1.384.89.72 3.293.742c5.874.056 11.748.124 17.622.09C41.045.708 61.186.409 81.317.42c28.408.012 56.827.158 85.225.417 8.686.08 17.35.7 26.015 1.122 3.23.158 5.832.902 7.024 2.678 1.055 1.572.125 2.21-2.875 1.95a30.51 30.51 0 0 0-2.268-.107c-.397 0-.805.073-1.557.146.721.451 1.306.767 1.777 1.128 2.926 2.238 1.641 4.013-3.272 4.369-13.483.958-26.966 1.91-40.459 2.767-3.334.214-6.752 0-10.118.085-2.31.062-4.609.299-6.909.462l.042.519.011.005Z" class="o_text_highlight_path_scribble_3"></path></svg></span></span>.</strong>
Unleash your <strong class="o_default_snippet_text"><span class="o_text_highlight o_translate_inline o_text_highlight_scribble_3 o_text_highlight_fill">potential</span>.</strong>
</xpath>
<xpath expr="//div[hasclass('row')]//div[2]//img" position="attributes">
<attribute name="src">/web_editor/shape/theme_buzzy/s_banner_2.svg?c1=o-color-2</attribute>
theme_buzzy/views/snippets/s_key_benefits.xml
+1 -1
View File
@@ -11,7 +11,7 @@
<attribute name="class">display-4-fs</attribute>
</xpath>
<xpath expr="//h2" position="replace" mode="inner">
<span style="font-weight: normal;">Discover our</span><br/><span style="font-weight: normal;">main <span class="o_text_highlight o_translate_inline o_text_highlight_bold_2 o_text_highlight_fill" style="--text-highlight-width: 6px;"><span class="o_text_highlight_item">three benefits<svg fill="none" class="o_text_highlight_svg o_content_no_merge position-absolute overflow-visible top-0 start-0 w-100 h-100 pe-none"><path stroke-width="var(--text-highlight-width)" stroke="var(--text-highlight-color)" stroke-linecap="round" fill="var(--text-highlight-color)" transform="scale(2.043671875, 1.8604651162790697)" d="M193.221 20.193c.555 1.245.863 2.005 1.22 2.734 1.399 2.84 2.758 5.757 1.607 9.509-1.21 3.95-3.651 4.208-6.072 4.314-5.059.212-10.129.152-15.178.592-15.873 1.367-31.737 3.585-47.619 4.238-19.921.82-39.862.638-59.802.486-13.938-.106-27.887-.88-41.825-1.428-4.018-.151-8.046-.47-12.064-.896-2.758-.304-4.772-2.46-6.21-6.182-.645-1.656-1.756-2.993-2.798-4.177-2.768-3.13-5.06-6.38-3.899-12.502C.9 15.226.393 13.16.165 11.307c-.715-5.818.903-9.524 4.722-9.646 10.218-.35 20.437-.38 30.655-.577C51.236.78 66.94-.04 82.635.264c14.652.273 29.296 1.655 43.948 2.643 19.822 1.336 39.643 2.02 59.455-.426.923-.121 1.835-.5 2.758-.622 1.329-.183 2.688-.456 4.008-.274 3.829.501 7.073 5.666 7.192 11.21.09 4.466-1.418 6.213-6.775 7.428v-.03Z" class="o_text_highlight_path_bold_2"></path></svg></span></span></span>
<span style="font-weight: normal;">Discover our</span><br/><span style="font-weight: normal;">main <span class="o_text_highlight o_translate_inline o_text_highlight_bold_2 o_text_highlight_fill">three benefits</span></span>
</xpath>
<xpath expr="(//span[hasclass('display-3-fs')])[2]" position="attributes">
<attribute name="class" add="text-o-color-2" remove="text-o-color-1" separator=" "/>
theme_buzzy/views/snippets/s_showcase.xml
+1 -1
View File
@@ -6,7 +6,7 @@
<attribute name="src">/web_editor/shape/theme_buzzy/s_showcase.svg?c1=o-color-2</attribute>
</xpath>
<xpath expr="//h3" position="replace" mode="inner">
Features <span class="o_text_highlight o_translate_inline o_text_highlight_scribble_3 o_text_highlight_fill" style="--text-highlight-width: 3px;"><span class="o_text_highlight_item">showcase<svg fill="none" class="o_text_highlight_svg o_content_no_merge position-absolute overflow-visible top-0 start-0 w-100 h-100 pe-none"><path stroke-width="var(--text-highlight-width)" stroke="var(--text-highlight-color)" stroke-linecap="round" fill="var(--text-highlight-color)" transform="translate(0 32) scale(0.728046875, 0.375)" d="M133.953 15.961c7.87.502 15.751.975 23.611 1.522 2.027.141 4.055.44 5.999.79 4.118.727 7.202 4.977 2.53 6.707.606.293 1.181.564 1.902.908-8.477 2.069-17.267 2.65-26.203 2.818-19.023.361-38.056.603-57.068 1.088-13.807.355-27.572 1.06-41.369 1.545-3.23.113-6.532.096-9.73-.147-1.548-.118-3.492-.721-4.234-1.42-.93-.88-1.484-2.199-.93-3.1.397-.655 2.812-1.263 4.41-1.33 6.397-.277 12.825-.333 19.243-.474 26.976-.592 53.942-1.156 80.919-1.804 3.742-.09 7.452-.592 11.173-.908 0-.174-.01-.35-.021-.524-2.717-.197-5.435-.53-8.163-.575-21.865-.383-43.741-1.009-65.607-.936-11.34.04-22.65 1.432-34 2.047-6.898.377-13.88.732-20.779.569-7.044-.17-9.406-3.568-5.34-6.742 3.428-2.677 7.567-4.391 13.984-4.757 16.441-.93 32.798-2.26 49.219-3.27 14.162-.868 28.366-1.516 42.549-2.266.586-.034 1.15-.147 1.641-.45-5.006 0-10.023-.012-15.029.01-1.077 0-2.154.186-3.24.192-18.793.18-37.596.355-56.389.507-10.672.085-21.343.13-32.014.153a65.89 65.89 0 0 1-6.167-.277C1.787 5.555-.02 4.247 0 2.59 0 1.384.89.72 3.293.742c5.874.056 11.748.124 17.622.09C41.045.708 61.186.409 81.317.42c28.408.012 56.827.158 85.225.417 8.686.08 17.35.7 26.015 1.122 3.23.158 5.832.902 7.024 2.678 1.055 1.572.125 2.21-2.875 1.95a30.51 30.51 0 0 0-2.268-.107c-.397 0-.805.073-1.557.146.721.451 1.306.767 1.777 1.128 2.926 2.238 1.641 4.013-3.272 4.369-13.483.958-26.966 1.91-40.459 2.767-3.334.214-6.752 0-10.118.085-2.31.062-4.609.299-6.909.462l.042.519.011.005Z" class="o_text_highlight_path_scribble_3"></path></svg></span></span>
Features <span class="o_text_highlight o_translate_inline o_text_highlight_scribble_3 o_text_highlight_fill">showcase</span>
</xpath>
<xpath expr="(//div[hasclass('col-lg-6')])[2]" position="attributes">
<attribute name="class" add="col-lg-5 offset-lg-1" remove="col-lg-6" separator=" "/>