Merge PR #3161 into 18.0

Signed-off-by CarlosRoca13
pull/2975/merge
OCA-git-bot 2025-04-23 05:56:46 +00:00
commit 642a674bd0
24 changed files with 1133 additions and 0 deletions

View File

@ -0,0 +1,98 @@
=========================
Web editor class selector
=========================
..
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!! This file is generated by oca-gen-addon-readme !!
!! changes will be overwritten. !!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!! source digest: sha256:53a338e09db97f68da45d08f963625f60a4069424d8d2f75bcca9887a201824b
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
.. |badge1| image:: https://img.shields.io/badge/maturity-Beta-yellow.png
:target: https://odoo-community.org/page/development-status
:alt: Beta
.. |badge2| image:: https://img.shields.io/badge/licence-AGPL--3-blue.png
:target: http://www.gnu.org/licenses/agpl-3.0-standalone.html
:alt: License: AGPL-3
.. |badge3| image:: https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github
:target: https://github.com/OCA/web/tree/18.0/web_editor_class_selector
:alt: OCA/web
.. |badge4| image:: https://img.shields.io/badge/weblate-Translate%20me-F47D42.png
:target: https://translation.odoo-community.org/projects/web-18-0/web-18-0-web_editor_class_selector
:alt: Translate me on Weblate
.. |badge5| image:: https://img.shields.io/badge/runboat-Try%20me-875A7B.png
:target: https://runboat.odoo-community.org/builds?repo=OCA/web&target_branch=18.0
:alt: Try me on Runboat
|badge1| |badge2| |badge3| |badge4| |badge5|
This module allows users to create custom CSS class records, which can
then be selected and applied directly in the HTML editor. Note: The
actual CSS file containing the class definitions is not provided by this
module and must be loaded in a custom module.
**Table of contents**
.. contents::
:local:
Usage
=====
- Go to Settings > Technical > User Interface > Web editor Class.
- Create and name your custom CSS classes.
- Go to any model with an HTML field (e.g., Settings > Users >
Preferences > Signature).
- In the HTML editor, select any content block.
- Choose from the available CSS classes to apply the desired styling.
Known issues / Roadmap
======================
Add support to apply class to any element (currently, only span is
supported)
Bug Tracker
===========
Bugs are tracked on `GitHub Issues <https://github.com/OCA/web/issues>`_.
In case of trouble, please check there if your issue has already been reported.
If you spotted it first, help us to smash it by providing a detailed and welcomed
`feedback <https://github.com/OCA/web/issues/new?body=module:%20web_editor_class_selector%0Aversion:%2018.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**>`_.
Do not contact contributors directly about support or help with technical issues.
Credits
=======
Authors
-------
* Tecnativa
Maintainers
-----------
This module is maintained by the OCA.
.. image:: https://odoo-community.org/logo.png
:alt: Odoo Community Association
:target: https://odoo-community.org
OCA, or the Odoo Community Association, is a nonprofit organization whose
mission is to support the collaborative development of Odoo features and
promote its widespread use.
.. |maintainer-carlos-lopez-tecnativa| image:: https://github.com/carlos-lopez-tecnativa.png?size=40px
:target: https://github.com/carlos-lopez-tecnativa
:alt: carlos-lopez-tecnativa
Current `maintainer <https://odoo-community.org/page/maintainer-role>`__:
|maintainer-carlos-lopez-tecnativa|
This module is part of the `OCA/web <https://github.com/OCA/web/tree/18.0/web_editor_class_selector>`_ project on GitHub.
You are welcome to contribute. To learn how please visit https://odoo-community.org/page/Contribute.

View File

@ -0,0 +1 @@
from . import models

View File

@ -0,0 +1,31 @@
{
"name": "Web editor class selector",
"version": "18.0.1.0.0",
"summary": "",
"author": "Tecnativa, Odoo Community Association (OCA)",
"website": "https://github.com/OCA/web",
"depends": [
"web_editor",
],
"data": [
"security/ir.model.access.csv",
"views/web_editor_class_views.xml",
"views/menus.xml",
],
"demo": [
"demo/web_editor_class_demo.xml",
],
"assets": {
"web.assets_backend": [
"web_editor_class_selector/static/src/js/css_selector/**/*",
"web_editor_class_selector/static/src/scss/demo_styles.scss",
"web_editor_class_selector/static/src/js/fields/**/*",
"web_editor_class_selector/static/src/js/utils/**/*",
"web_editor_class_selector/static/src/js/wysiwyg/**/*",
],
},
"maintainers": ["carlos-lopez-tecnativa"],
"installable": True,
"auto_install": False,
"license": "AGPL-3",
}

View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8" ?>
<odoo>
<record id="class_button" model="web.editor.class">
<field name="name">Button</field>
<field name="class_name">demo_button</field>
</record>
<record id="class_menu" model="web.editor.class">
<field name="name">Menu</field>
<field name="class_name">demo_menu</field>
</record>
<record id="class_field" model="web.editor.class">
<field name="name">Field</field>
<field name="class_name">demo_field</field>
</record>
</odoo>

View File

@ -0,0 +1,116 @@
# Translation of Odoo Server.
# This file contains the translation of the following modules:
# * web_editor_class_selector
#
msgid ""
msgstr ""
"Project-Id-Version: Odoo Server 16.0\n"
"Report-Msgid-Bugs-To: \n"
"PO-Revision-Date: 2025-02-20 11:07+0000\n"
"Last-Translator: mymage <stefano.consolaro@mymage.it>\n"
"Language-Team: none\n"
"Language: it\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: \n"
"Plural-Forms: nplurals=2; plural=n != 1;\n"
"X-Generator: Weblate 5.6.2\n"
#. module: web_editor_class_selector
#: model:ir.model.fields,field_description:web_editor_class_selector.field_web_editor_class__active
msgid "Active"
msgstr "Attiva"
#. module: web_editor_class_selector
#: model:ir.model.fields,field_description:web_editor_class_selector.field_web_editor_class__class_name
msgid "Class Name"
msgstr "Nome classe"
#. module: web_editor_class_selector
#: model:ir.model.constraint,message:web_editor_class_selector.constraint_web_editor_class_class_name_uniq
msgid "Class name must be unique"
msgstr "Il nome della classe deve essere univoco"
#. module: web_editor_class_selector
#: model_terms:ir.actions.act_window,help:web_editor_class_selector.action_web_editor_class
msgid "Click here to add new Web Editor Class."
msgstr "Fare clic qui per aggiungere una nuova classe editor web."
#. module: web_editor_class_selector
#: model:ir.model.fields,field_description:web_editor_class_selector.field_web_editor_class__create_uid
msgid "Created by"
msgstr "Creato da"
#. module: web_editor_class_selector
#: model:ir.model.fields,field_description:web_editor_class_selector.field_web_editor_class__create_date
msgid "Created on"
msgstr "Creato il"
#. module: web_editor_class_selector
#. odoo-javascript
#: code:addons/web_editor_class_selector/static/src/js/odoo-editor/OdooEditor.esm.js:0
#: code:addons/web_editor_class_selector/static/src/xml/web_editor.xml:0
#, python-format
msgid "Custom CSS"
msgstr "CSS personalizzato"
#. module: web_editor_class_selector
#: model:ir.model.fields,field_description:web_editor_class_selector.field_web_editor_class__display_name
msgid "Display Name"
msgstr "Nome visualizzato"
#. module: web_editor_class_selector
#: model:ir.model.fields,field_description:web_editor_class_selector.field_web_editor_class__id
msgid "ID"
msgstr "ID"
#. module: web_editor_class_selector
#: model:ir.model.fields,field_description:web_editor_class_selector.field_web_editor_class__write_uid
msgid "Last Updated by"
msgstr "Ultimo aggiornamento di"
#. module: web_editor_class_selector
#: model:ir.model.fields,field_description:web_editor_class_selector.field_web_editor_class__write_date
msgid "Last Updated on"
msgstr "Ultimo aggiornamento il"
#. module: web_editor_class_selector
#: model:ir.model.fields,field_description:web_editor_class_selector.field_web_editor_class__name
msgid "Name"
msgstr "Nome"
#. module: web_editor_class_selector
#: model_terms:ir.ui.view,arch_db:web_editor_class_selector.view_web_editor_class_form
msgid "Name..."
msgstr "Nome..."
#. module: web_editor_class_selector
#: model:ir.model.fields,field_description:web_editor_class_selector.field_web_editor_class__sequence
msgid "Sequence"
msgstr "Sequenza"
#. module: web_editor_class_selector
#: model_terms:ir.ui.view,arch_db:web_editor_class_selector.view_web_editor_class_form
msgid "Some CSS class"
msgstr "Qualche classe CSS"
#. module: web_editor_class_selector
#: model:ir.model.fields,help:web_editor_class_selector.field_web_editor_class__class_name
msgid ""
"The class name to be added to the tag. It must be created in the CSS file."
msgstr ""
"Il nome della classe da aggiungere al tag. Deve essere creata nel file CSS."
#. module: web_editor_class_selector
#: model:ir.actions.act_window,name:web_editor_class_selector.action_web_editor_class
#: model:ir.ui.menu,name:web_editor_class_selector.web_editor_class_menu
msgid "Web Editor Class"
msgstr "Classe editor web"
#. module: web_editor_class_selector
#: model:ir.model,name:web_editor_class_selector.model_web_editor_class
msgid "Web editor class selector"
msgstr "Selettore classe editore web"
#~ msgid "Last Modified on"
#~ msgstr "Ultima modifica il"

View File

@ -0,0 +1,110 @@
# Translation of Odoo Server.
# This file contains the translation of the following modules:
# * web_editor_class_selector
#
msgid ""
msgstr ""
"Project-Id-Version: Odoo Server 17.0\n"
"Report-Msgid-Bugs-To: \n"
"Last-Translator: \n"
"Language-Team: \n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: \n"
"Plural-Forms: \n"
#. module: web_editor_class_selector
#: model:ir.model.fields,field_description:web_editor_class_selector.field_web_editor_class__active
msgid "Active"
msgstr ""
#. module: web_editor_class_selector
#: model:ir.model.fields,field_description:web_editor_class_selector.field_web_editor_class__class_name
msgid "Class Name"
msgstr ""
#. module: web_editor_class_selector
#: model:ir.model.constraint,message:web_editor_class_selector.constraint_web_editor_class_class_name_uniq
msgid "Class name must be unique"
msgstr ""
#. module: web_editor_class_selector
#: model_terms:ir.actions.act_window,help:web_editor_class_selector.action_web_editor_class
msgid "Click here to add new Web Editor Class."
msgstr ""
#. module: web_editor_class_selector
#: model:ir.model.fields,field_description:web_editor_class_selector.field_web_editor_class__create_uid
msgid "Created by"
msgstr ""
#. module: web_editor_class_selector
#: model:ir.model.fields,field_description:web_editor_class_selector.field_web_editor_class__create_date
msgid "Created on"
msgstr ""
#. module: web_editor_class_selector
#. odoo-javascript
#: code:addons/web_editor_class_selector/static/src/js/odoo-editor/OdooEditor.esm.js:0
#: code:addons/web_editor_class_selector/static/src/xml/web_editor.xml:0
#: code:addons/web_editor_class_selector/static/src/xml/web_editor.xml:0
#, python-format
msgid "Custom CSS"
msgstr ""
#. module: web_editor_class_selector
#: model:ir.model.fields,field_description:web_editor_class_selector.field_web_editor_class__display_name
msgid "Display Name"
msgstr ""
#. module: web_editor_class_selector
#: model:ir.model.fields,field_description:web_editor_class_selector.field_web_editor_class__id
msgid "ID"
msgstr ""
#. module: web_editor_class_selector
#: model:ir.model.fields,field_description:web_editor_class_selector.field_web_editor_class__write_uid
msgid "Last Updated by"
msgstr ""
#. module: web_editor_class_selector
#: model:ir.model.fields,field_description:web_editor_class_selector.field_web_editor_class__write_date
msgid "Last Updated on"
msgstr ""
#. module: web_editor_class_selector
#: model:ir.model.fields,field_description:web_editor_class_selector.field_web_editor_class__name
msgid "Name"
msgstr ""
#. module: web_editor_class_selector
#: model_terms:ir.ui.view,arch_db:web_editor_class_selector.view_web_editor_class_form
msgid "Name..."
msgstr ""
#. module: web_editor_class_selector
#: model:ir.model.fields,field_description:web_editor_class_selector.field_web_editor_class__sequence
msgid "Sequence"
msgstr ""
#. module: web_editor_class_selector
#: model_terms:ir.ui.view,arch_db:web_editor_class_selector.view_web_editor_class_form
msgid "Some CSS class"
msgstr ""
#. module: web_editor_class_selector
#: model:ir.model.fields,help:web_editor_class_selector.field_web_editor_class__class_name
msgid ""
"The class name to be added to the tag. It must be created in the CSS file."
msgstr ""
#. module: web_editor_class_selector
#: model:ir.actions.act_window,name:web_editor_class_selector.action_web_editor_class
#: model:ir.ui.menu,name:web_editor_class_selector.web_editor_class_menu
msgid "Web Editor Class"
msgstr ""
#. module: web_editor_class_selector
#: model:ir.model,name:web_editor_class_selector.model_web_editor_class
msgid "Web editor class selector"
msgstr ""

View File

@ -0,0 +1 @@
from . import web_editor_class

View File

@ -0,0 +1,20 @@
from odoo import fields, models
class WebEditorClass(models.Model):
_name = "web.editor.class"
_description = "Web editor class selector"
_order = "sequence,id"
name = fields.Char(required=True)
sequence = fields.Integer(default=10)
class_name = fields.Char(
required=True,
help="The class name to be added to the tag. "
"It must be created in the CSS file.",
)
active = fields.Boolean(default=True)
_sql_constraints = [
("class_name_uniq", "unique(class_name)", "Class name must be unique")
]

View File

@ -0,0 +1,3 @@
[build-system]
requires = ["whool"]
build-backend = "whool.buildapi"

View File

@ -0,0 +1,4 @@
This module allows users to create custom CSS class records, which can
then be selected and applied directly in the HTML editor. Note: The
actual CSS file containing the class definitions is not provided by this
module and must be loaded in a custom module.

View File

@ -0,0 +1,2 @@
Add support to apply class to any element (currently, only span is
supported)

View File

@ -0,0 +1,6 @@
- Go to Settings \> Technical \> User Interface \> Web editor Class.
- Create and name your custom CSS classes.
- Go to any model with an HTML field (e.g., Settings \> Users \>
Preferences \> Signature).
- In the HTML editor, select any content block.
- Choose from the available CSS classes to apply the desired styling.

View File

@ -0,0 +1,3 @@
id,name,model_id/id,group_id/id,perm_read,perm_write,perm_create,perm_unlink
access_web_editor_class_group_user,access_web_editor_class_group_user,model_web_editor_class,base.group_user,1,0,0,0
access_web_editor_class_group_no_one,access_web_editor_class_group_no_one,model_web_editor_class,base.group_no_one,1,1,1,1
1 id name model_id/id group_id/id perm_read perm_write perm_create perm_unlink
2 access_web_editor_class_group_user access_web_editor_class_group_user model_web_editor_class base.group_user 1 0 0 0
3 access_web_editor_class_group_no_one access_web_editor_class_group_no_one model_web_editor_class base.group_no_one 1 1 1 1

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.2 KiB

View File

@ -0,0 +1,439 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="Docutils: https://docutils.sourceforge.io/" />
<title>Web editor class selector</title>
<style type="text/css">
/*
:Author: David Goodger (goodger@python.org)
:Id: $Id: html4css1.css 9511 2024-01-13 09:50:07Z milde $
:Copyright: This stylesheet has been placed in the public domain.
Default cascading style sheet for the HTML output of Docutils.
Despite the name, some widely supported CSS2 features are used.
See https://docutils.sourceforge.io/docs/howto/html-stylesheets.html for how to
customize this style sheet.
*/
/* used to remove borders from tables and images */
.borderless, table.borderless td, table.borderless th {
border: 0 }
table.borderless td, table.borderless th {
/* Override padding for "table.docutils td" with "! important".
The right padding separates the table cells. */
padding: 0 0.5em 0 0 ! important }
.first {
/* Override more specific margin styles with "! important". */
margin-top: 0 ! important }
.last, .with-subtitle {
margin-bottom: 0 ! important }
.hidden {
display: none }
.subscript {
vertical-align: sub;
font-size: smaller }
.superscript {
vertical-align: super;
font-size: smaller }
a.toc-backref {
text-decoration: none ;
color: black }
blockquote.epigraph {
margin: 2em 5em ; }
dl.docutils dd {
margin-bottom: 0.5em }
object[type="image/svg+xml"], object[type="application/x-shockwave-flash"] {
overflow: hidden;
}
/* Uncomment (and remove this text!) to get bold-faced definition list terms
dl.docutils dt {
font-weight: bold }
*/
div.abstract {
margin: 2em 5em }
div.abstract p.topic-title {
font-weight: bold ;
text-align: center }
div.admonition, div.attention, div.caution, div.danger, div.error,
div.hint, div.important, div.note, div.tip, div.warning {
margin: 2em ;
border: medium outset ;
padding: 1em }
div.admonition p.admonition-title, div.hint p.admonition-title,
div.important p.admonition-title, div.note p.admonition-title,
div.tip p.admonition-title {
font-weight: bold ;
font-family: sans-serif }
div.attention p.admonition-title, div.caution p.admonition-title,
div.danger p.admonition-title, div.error p.admonition-title,
div.warning p.admonition-title, .code .error {
color: red ;
font-weight: bold ;
font-family: sans-serif }
/* Uncomment (and remove this text!) to get reduced vertical space in
compound paragraphs.
div.compound .compound-first, div.compound .compound-middle {
margin-bottom: 0.5em }
div.compound .compound-last, div.compound .compound-middle {
margin-top: 0.5em }
*/
div.dedication {
margin: 2em 5em ;
text-align: center ;
font-style: italic }
div.dedication p.topic-title {
font-weight: bold ;
font-style: normal }
div.figure {
margin-left: 2em ;
margin-right: 2em }
div.footer, div.header {
clear: both;
font-size: smaller }
div.line-block {
display: block ;
margin-top: 1em ;
margin-bottom: 1em }
div.line-block div.line-block {
margin-top: 0 ;
margin-bottom: 0 ;
margin-left: 1.5em }
div.sidebar {
margin: 0 0 0.5em 1em ;
border: medium outset ;
padding: 1em ;
background-color: #ffffee ;
width: 40% ;
float: right ;
clear: right }
div.sidebar p.rubric {
font-family: sans-serif ;
font-size: medium }
div.system-messages {
margin: 5em }
div.system-messages h1 {
color: red }
div.system-message {
border: medium outset ;
padding: 1em }
div.system-message p.system-message-title {
color: red ;
font-weight: bold }
div.topic {
margin: 2em }
h1.section-subtitle, h2.section-subtitle, h3.section-subtitle,
h4.section-subtitle, h5.section-subtitle, h6.section-subtitle {
margin-top: 0.4em }
h1.title {
text-align: center }
h2.subtitle {
text-align: center }
hr.docutils {
width: 75% }
img.align-left, .figure.align-left, object.align-left, table.align-left {
clear: left ;
float: left ;
margin-right: 1em }
img.align-right, .figure.align-right, object.align-right, table.align-right {
clear: right ;
float: right ;
margin-left: 1em }
img.align-center, .figure.align-center, object.align-center {
display: block;
margin-left: auto;
margin-right: auto;
}
table.align-center {
margin-left: auto;
margin-right: auto;
}
.align-left {
text-align: left }
.align-center {
clear: both ;
text-align: center }
.align-right {
text-align: right }
/* reset inner alignment in figures */
div.align-right {
text-align: inherit }
/* div.align-center * { */
/* text-align: left } */
.align-top {
vertical-align: top }
.align-middle {
vertical-align: middle }
.align-bottom {
vertical-align: bottom }
ol.simple, ul.simple {
margin-bottom: 1em }
ol.arabic {
list-style: decimal }
ol.loweralpha {
list-style: lower-alpha }
ol.upperalpha {
list-style: upper-alpha }
ol.lowerroman {
list-style: lower-roman }
ol.upperroman {
list-style: upper-roman }
p.attribution {
text-align: right ;
margin-left: 50% }
p.caption {
font-style: italic }
p.credits {
font-style: italic ;
font-size: smaller }
p.label {
white-space: nowrap }
p.rubric {
font-weight: bold ;
font-size: larger ;
color: maroon ;
text-align: center }
p.sidebar-title {
font-family: sans-serif ;
font-weight: bold ;
font-size: larger }
p.sidebar-subtitle {
font-family: sans-serif ;
font-weight: bold }
p.topic-title {
font-weight: bold }
pre.address {
margin-bottom: 0 ;
margin-top: 0 ;
font: inherit }
pre.literal-block, pre.doctest-block, pre.math, pre.code {
margin-left: 2em ;
margin-right: 2em }
pre.code .ln { color: gray; } /* line numbers */
pre.code, code { background-color: #eeeeee }
pre.code .comment, code .comment { color: #5C6576 }
pre.code .keyword, code .keyword { color: #3B0D06; font-weight: bold }
pre.code .literal.string, code .literal.string { color: #0C5404 }
pre.code .name.builtin, code .name.builtin { color: #352B84 }
pre.code .deleted, code .deleted { background-color: #DEB0A1}
pre.code .inserted, code .inserted { background-color: #A3D289}
span.classifier {
font-family: sans-serif ;
font-style: oblique }
span.classifier-delimiter {
font-family: sans-serif ;
font-weight: bold }
span.interpreted {
font-family: sans-serif }
span.option {
white-space: nowrap }
span.pre {
white-space: pre }
span.problematic, pre.problematic {
color: red }
span.section-subtitle {
/* font-size relative to parent (h1..h6 element) */
font-size: 80% }
table.citation {
border-left: solid 1px gray;
margin-left: 1px }
table.docinfo {
margin: 2em 4em }
table.docutils {
margin-top: 0.5em ;
margin-bottom: 0.5em }
table.footnote {
border-left: solid 1px black;
margin-left: 1px }
table.docutils td, table.docutils th,
table.docinfo td, table.docinfo th {
padding-left: 0.5em ;
padding-right: 0.5em ;
vertical-align: top }
table.docutils th.field-name, table.docinfo th.docinfo-name {
font-weight: bold ;
text-align: left ;
white-space: nowrap ;
padding-left: 0 }
/* "booktabs" style (no vertical lines) */
table.docutils.booktabs {
border: 0px;
border-top: 2px solid;
border-bottom: 2px solid;
border-collapse: collapse;
}
table.docutils.booktabs * {
border: 0px;
}
table.docutils.booktabs th {
border-bottom: thin solid;
text-align: left;
}
h1 tt.docutils, h2 tt.docutils, h3 tt.docutils,
h4 tt.docutils, h5 tt.docutils, h6 tt.docutils {
font-size: 100% }
ul.auto-toc {
list-style-type: none }
</style>
</head>
<body>
<div class="document" id="web-editor-class-selector">
<h1 class="title">Web editor class selector</h1>
<!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!! This file is generated by oca-gen-addon-readme !!
!! changes will be overwritten. !!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!! source digest: sha256:53a338e09db97f68da45d08f963625f60a4069424d8d2f75bcca9887a201824b
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
<p><a class="reference external image-reference" href="https://odoo-community.org/page/development-status"><img alt="Beta" src="https://img.shields.io/badge/maturity-Beta-yellow.png" /></a> <a class="reference external image-reference" href="http://www.gnu.org/licenses/agpl-3.0-standalone.html"><img alt="License: AGPL-3" src="https://img.shields.io/badge/licence-AGPL--3-blue.png" /></a> <a class="reference external image-reference" href="https://github.com/OCA/web/tree/18.0/web_editor_class_selector"><img alt="OCA/web" src="https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github" /></a> <a class="reference external image-reference" href="https://translation.odoo-community.org/projects/web-18-0/web-18-0-web_editor_class_selector"><img alt="Translate me on Weblate" src="https://img.shields.io/badge/weblate-Translate%20me-F47D42.png" /></a> <a class="reference external image-reference" href="https://runboat.odoo-community.org/builds?repo=OCA/web&amp;target_branch=18.0"><img alt="Try me on Runboat" src="https://img.shields.io/badge/runboat-Try%20me-875A7B.png" /></a></p>
<p>This module allows users to create custom CSS class records, which can
then be selected and applied directly in the HTML editor. Note: The
actual CSS file containing the class definitions is not provided by this
module and must be loaded in a custom module.</p>
<p><strong>Table of contents</strong></p>
<div class="contents local topic" id="contents">
<ul class="simple">
<li><a class="reference internal" href="#usage" id="toc-entry-1">Usage</a></li>
<li><a class="reference internal" href="#known-issues-roadmap" id="toc-entry-2">Known issues / Roadmap</a></li>
<li><a class="reference internal" href="#bug-tracker" id="toc-entry-3">Bug Tracker</a></li>
<li><a class="reference internal" href="#credits" id="toc-entry-4">Credits</a><ul>
<li><a class="reference internal" href="#authors" id="toc-entry-5">Authors</a></li>
<li><a class="reference internal" href="#maintainers" id="toc-entry-6">Maintainers</a></li>
</ul>
</li>
</ul>
</div>
<div class="section" id="usage">
<h1><a class="toc-backref" href="#toc-entry-1">Usage</a></h1>
<ul class="simple">
<li>Go to Settings &gt; Technical &gt; User Interface &gt; Web editor Class.</li>
<li>Create and name your custom CSS classes.</li>
<li>Go to any model with an HTML field (e.g., Settings &gt; Users &gt;
Preferences &gt; Signature).</li>
<li>In the HTML editor, select any content block.</li>
<li>Choose from the available CSS classes to apply the desired styling.</li>
</ul>
</div>
<div class="section" id="known-issues-roadmap">
<h1><a class="toc-backref" href="#toc-entry-2">Known issues / Roadmap</a></h1>
<p>Add support to apply class to any element (currently, only span is
supported)</p>
</div>
<div class="section" id="bug-tracker">
<h1><a class="toc-backref" href="#toc-entry-3">Bug Tracker</a></h1>
<p>Bugs are tracked on <a class="reference external" href="https://github.com/OCA/web/issues">GitHub Issues</a>.
In case of trouble, please check there if your issue has already been reported.
If you spotted it first, help us to smash it by providing a detailed and welcomed
<a class="reference external" href="https://github.com/OCA/web/issues/new?body=module:%20web_editor_class_selector%0Aversion:%2018.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**">feedback</a>.</p>
<p>Do not contact contributors directly about support or help with technical issues.</p>
</div>
<div class="section" id="credits">
<h1><a class="toc-backref" href="#toc-entry-4">Credits</a></h1>
<div class="section" id="authors">
<h2><a class="toc-backref" href="#toc-entry-5">Authors</a></h2>
<ul class="simple">
<li>Tecnativa</li>
</ul>
</div>
<div class="section" id="maintainers">
<h2><a class="toc-backref" href="#toc-entry-6">Maintainers</a></h2>
<p>This module is maintained by the OCA.</p>
<a class="reference external image-reference" href="https://odoo-community.org">
<img alt="Odoo Community Association" src="https://odoo-community.org/logo.png" />
</a>
<p>OCA, or the Odoo Community Association, is a nonprofit organization whose
mission is to support the collaborative development of Odoo features and
promote its widespread use.</p>
<p>Current <a class="reference external" href="https://odoo-community.org/page/maintainer-role">maintainer</a>:</p>
<p><a class="reference external image-reference" href="https://github.com/carlos-lopez-tecnativa"><img alt="carlos-lopez-tecnativa" src="https://github.com/carlos-lopez-tecnativa.png?size=40px" /></a></p>
<p>This module is part of the <a class="reference external" href="https://github.com/OCA/web/tree/18.0/web_editor_class_selector">OCA/web</a> project on GitHub.</p>
<p>You are welcome to contribute. To learn how please visit <a class="reference external" href="https://odoo-community.org/page/Contribute">https://odoo-community.org/page/Contribute</a>.</p>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,24 @@
import {Component, useState} from "@odoo/owl";
import {Dropdown} from "@web/core/dropdown/dropdown";
import {DropdownItem} from "@web/core/dropdown/dropdown_item";
import {toolbarButtonProps} from "@html_editor/main/toolbar/toolbar";
export class CssSelector extends Component {
static template = "web_editor_class_selector.CssSelector";
static props = {
getItems: Function,
getDisplay: Function,
onSelected: Function,
...toolbarButtonProps,
};
static components = {Dropdown, DropdownItem};
setup() {
this.items = this.props.getItems();
this.state = useState(this.props.getDisplay());
}
onSelected(item) {
this.props.onSelected(item);
}
}

View File

@ -0,0 +1,20 @@
<templates xml:space="preserve">
<t t-name="web_editor_class_selector.CssSelector">
<Dropdown>
<button class="btn btn-light" t-att-title="props.title">
<span class="px-1" t-esc="state.displayName" />
</button>
<t t-set-slot="content">
<t t-foreach="items" t-as="item" t-key="item_index">
<DropdownItem
class="item.class_name"
onSelected="() => this.onSelected(item)"
t-on-pointerdown.prevent="() => {}"
>
<t t-esc="item.name" />
</DropdownItem>
</t>
</t>
</Dropdown>
</t>
</templates>

View File

@ -0,0 +1,71 @@
import {CssSelector} from "./css_selector.esm";
import {Plugin} from "@html_editor/plugin";
import {_t} from "@web/core/l10n/translation";
import {reactive} from "@odoo/owl";
import {closestElement} from "@html_editor/utils/dom_traversal";
import {isVisibleTextNode} from "@html_editor/utils/dom_info";
import {withSequence} from "@html_editor/utils/resource";
export class CssSelectorPlugin extends Plugin {
static id = "css_selector_plugin";
static dependencies = ["selection", "format"];
resources = {
toolbar_groups: [withSequence(60, {id: "css-selector"})],
toolbar_items: [
{
id: "css-selector",
groupId: "css-selector",
title: _t("Custom CSS"),
Component: CssSelector,
props: {
getItems: () => this.custom_class_css,
getDisplay: () => this.custom_css,
onSelected: (item) => {
this.dependencies.format.formatSelection(item.class_name, {
formatProps: {className: item.class_name},
applyStyle: true,
});
this.updateCustomCssSelectorParams();
},
},
},
],
/** Handlers */
selectionchange_handlers: [this.updateCustomCssSelectorParams.bind(this)],
post_undo_handlers: [this.updateCustomCssSelectorParams.bind(this)],
post_redo_handlers: [this.updateCustomCssSelectorParams.bind(this)],
};
setup() {
this.custom_css = reactive({displayName: this.defaultCustomCssName});
this.custom_class_css = this.config.custom_class_css;
}
updateCustomCssSelectorParams() {
this.custom_css.displayName = this.customCssName;
}
get defaultCustomCssName() {
return _t("Custom CSS");
}
get customCssName() {
const selectedNodes = this.dependencies.selection
.getSelectedNodes()
.filter(
(n) =>
n.nodeType === Node.TEXT_NODE &&
closestElement(n).isContentEditable &&
isVisibleTextNode(n)
);
let activeLabel = this.defaultCustomCssName;
for (const selectedTextNode of selectedNodes) {
const parentNode = selectedTextNode.parentElement;
for (const customCss of this.custom_class_css) {
const isActive = parentNode.classList.contains(customCss.class_name);
if (isActive) {
activeLabel = customCss.name;
break;
}
}
}
return activeLabel;
}
}

View File

@ -0,0 +1,29 @@
import {CssSelectorPlugin} from "../css_selector/css_selector_plugin.esm";
import {HtmlField} from "@html_editor/fields/html_field";
import {patch} from "@web/core/utils/patch";
import {useService} from "@web/core/utils/hooks";
const {onWillStart} = owl;
patch(HtmlField.prototype, {
setup() {
super.setup(...arguments);
this.orm = useService("orm");
this.custom_class_css = [];
onWillStart(async () => {
this.custom_class_css = await this.orm.searchRead(
"web.editor.class",
[],
["name", "class_name"]
);
});
},
getConfig() {
// Add the new Plugin to the list of plugins.
// Provide the custom_class_css to the toolbar.
const config = super.getConfig(...arguments);
config.Plugins.push(CssSelectorPlugin);
config.custom_class_css = this.custom_class_css;
return config;
},
});

View File

@ -0,0 +1,34 @@
import {closestElement} from "@html_editor/utils/dom_traversal";
import {formatsSpecs} from "@html_editor/utils/formatting";
// This function is called in the getEditorConfig method of the Wysiwyg class
// It generates the new formatsSpecs object with the custom CSS class
export function createCustomCssFormats(custom_class_css) {
const newformatsSpecs = {};
const class_names = custom_class_css.map((customCss) => customCss.class_name);
const removeCustomClass = (node) => {
for (const class_name of class_names) {
node.classList.remove(class_name);
if (node.parentElement) {
node.parentElement.classList.remove(class_name);
}
}
};
for (const customCss of custom_class_css) {
const className = customCss.class_name;
newformatsSpecs[className] = {
tagName: "span",
isFormatted: (node) => closestElement(node).classList.contains(className),
isTag: (node) =>
["SPAN"].includes(node.tagName) && node.classList.contains(className),
hasStyle: (node) => closestElement(node).classList.contains(className),
addStyle: (node) => {
removeCustomClass(node);
node.classList.add(className);
},
addNeutralStyle: (node) => removeCustomClass(node),
removeStyle: (node) => removeCustomClass(node),
};
}
Object.assign(formatsSpecs, newformatsSpecs);
}

View File

@ -0,0 +1,16 @@
import {Wysiwyg} from "@html_editor/wysiwyg";
import {createCustomCssFormats} from "../utils/utils.esm";
import {patch} from "@web/core/utils/patch";
patch(Wysiwyg.prototype, {
getEditorConfig() {
const res = super.getEditorConfig(...arguments);
if (
this.props.config.custom_class_css &&
this.props.config.custom_class_css.length > 0
) {
createCustomCssFormats(this.props.config.custom_class_css);
}
return res;
},
});

View File

@ -0,0 +1,21 @@
.demo_menu {
font-weight: bold;
font-style: italic;
color: #714b67;
}
.demo_button {
border: 1px solid #71639e;
border-radius: 0.25rem;
padding: 0.25rem 0.7rem;
font-weight: bold;
color: #343a40;
background-color: #dee2e6;
border-color: #dee2e6 !important;
}
.demo_field {
border-top: 1px solid grey;
border-bottom: 1px solid grey;
font-weight: bold;
}

View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8" ?>
<odoo>
<menuitem
id="web_editor_class_menu"
action="action_web_editor_class"
parent="base.next_id_2"
sequence="50"
/>
</odoo>

View File

@ -0,0 +1,60 @@
<?xml version="1.0" encoding="utf-8" ?>
<odoo>
<record id="view_web_editor_class_tree" model="ir.ui.view">
<field name="name">view.web.editor.class.list</field>
<field name="model">web.editor.class</field>
<field name="arch" type="xml">
<list>
<field name="sequence" widget="handle" />
<field name="name" />
<field name="class_name" />
</list>
</field>
</record>
<record id="view_web_editor_class_form" model="ir.ui.view">
<field name="name">view.web.editor.class.form</field>
<field name="model">web.editor.class</field>
<field name="arch" type="xml">
<form>
<sheet>
<div class="oe_title">
<label for="name" />
<h1>
<field name="name" placeholder="Name..." />
</h1>
</div>
<group>
<field name="sequence" />
<field name="class_name" placeholder="Some CSS class" />
</group>
</sheet>
</form>
</field>
</record>
<record id="view_web_editor_class_search" model="ir.ui.view">
<field name="name">view.web.editor.class.search</field>
<field name="model">web.editor.class</field>
<field name="arch" type="xml">
<search>
<field
name="name"
filter_domain="['|', ('name', 'ilike', self), ('class_name', 'ilike', self)]"
/>
</search>
</field>
</record>
<record id="action_web_editor_class" model="ir.actions.act_window">
<field name="name">Web Editor Class</field>
<field name="type">ir.actions.act_window</field>
<field name="res_model">web.editor.class</field>
<field name="view_mode">list,form</field>
<field name="help" type="html">
<p class="o_view_nocontent_smiling_face">
Click here to add new Web Editor Class.
</p>
</field>
</record>
</odoo>