mirror of
https://github.com/OCA/web.git
synced 2025-02-22 13:21:25 +02:00
[ADD] web_editor_class_selector: new module to add custom CSS in HTML editor.
This module allows users to create custom CSS classes, which can then be selected and applied directly in the HTML editor.
This commit is contained in:
Carlos Lopez
86
web_editor_class_selector/README.rst
Normal file
86
web_editor_class_selector/README.rst
Normal file
@@ -0,0 +1,86 @@
|
||||
=========================
|
||||
Web editor class selector
|
||||
=========================
|
||||
|
||||
..
|
||||
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
||||
!! This file is generated by oca-gen-addon-readme !!
|
||||
!! changes will be overwritten. !!
|
||||
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
||||
!! source digest: sha256:0b173bde20d95cf982412df8921a0d22a3ba660d940a9ec53c846f5cfa2cbb0a
|
||||
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
||||
|
||||
.. |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/16.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-16-0/web-16-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=16.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:%2016.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.
|
||||
|
||||
This module is part of the `OCA/web <https://github.com/OCA/web/tree/16.0/web_editor_class_selector>`_ project on GitHub.
|
||||
|
||||
You are welcome to contribute. To learn how please visit https://odoo-community.org/page/Contribute.
|
||||
1
web_editor_class_selector/__init__.py
Normal file
1
web_editor_class_selector/__init__.py
Normal file
@@ -0,0 +1 @@
|
||||
from . import models
|
||||
32
web_editor_class_selector/__manifest__.py
Normal file
32
web_editor_class_selector/__manifest__.py
Normal file
@@ -0,0 +1,32 @@
|
||||
{
|
||||
"name": "Web editor class selector",
|
||||
"version": "16.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/backend/**/*",
|
||||
"web_editor_class_selector/static/src/xml/**/",
|
||||
],
|
||||
"web_editor.assets_wysiwyg": [
|
||||
"web_editor_class_selector/static/src/js/odoo-editor/**/*",
|
||||
"web_editor_class_selector/static/src/js/wysiwyg/**/*",
|
||||
"web_editor_class_selector/static/src/scss/demo_styles.scss",
|
||||
],
|
||||
},
|
||||
"installable": True,
|
||||
"auto_install": False,
|
||||
"license": "AGPL-3",
|
||||
}
|
||||
17
web_editor_class_selector/demo/web_editor_class_demo.xml
Normal file
17
web_editor_class_selector/demo/web_editor_class_demo.xml
Normal file
@@ -0,0 +1,17 @@
|
||||
<?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>
|
||||
110
web_editor_class_selector/i18n/web_editor_class_selector.pot
Normal file
110
web_editor_class_selector/i18n/web_editor_class_selector.pot
Normal 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 16.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____last_update
|
||||
msgid "Last Modified on"
|
||||
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_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 ""
|
||||
1
web_editor_class_selector/models/__init__.py
Normal file
1
web_editor_class_selector/models/__init__.py
Normal file
@@ -0,0 +1 @@
|
||||
from . import web_editor_class
|
||||
17
web_editor_class_selector/models/web_editor_class.py
Normal file
17
web_editor_class_selector/models/web_editor_class.py
Normal file
@@ -0,0 +1,17 @@
|
||||
from odoo import fields, models
|
||||
|
||||
|
||||
class WebEditorClass(models.Model):
|
||||
_name = "web.editor.class"
|
||||
_description = "Web editor class selector"
|
||||
|
||||
name = fields.Char(required=True)
|
||||
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")
|
||||
]
|
||||
2
web_editor_class_selector/readme/DESCRIPTION.rst
Normal file
2
web_editor_class_selector/readme/DESCRIPTION.rst
Normal file
@@ -0,0 +1,2 @@
|
||||
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.
|
||||
1
web_editor_class_selector/readme/ROADMAP.rst
Normal file
1
web_editor_class_selector/readme/ROADMAP.rst
Normal file
@@ -0,0 +1 @@
|
||||
Add support to apply class to any element (currently, only `span` is supported)
|
||||
5
web_editor_class_selector/readme/USAGE.rst
Normal file
5
web_editor_class_selector/readme/USAGE.rst
Normal file
@@ -0,0 +1,5 @@
|
||||
* 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.
|
||||
3
web_editor_class_selector/security/ir.model.access.csv
Normal file
3
web_editor_class_selector/security/ir.model.access.csv
Normal 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
|
||||
|
BIN
web_editor_class_selector/static/description/icon.png
Normal file
BIN
web_editor_class_selector/static/description/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
433
web_editor_class_selector/static/description/index.html
Normal file
433
web_editor_class_selector/static/description/index.html
Normal file
@@ -0,0 +1,433 @@
|
||||
<!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:0b173bde20d95cf982412df8921a0d22a3ba660d940a9ec53c846f5cfa2cbb0a
|
||||
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
|
||||
<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/16.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-16-0/web-16-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&target_branch=16.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 <cite>Settings</cite> > <cite>Technical</cite> > <cite>User Interface</cite> > <cite>Web editor Class</cite>.</li>
|
||||
<li>Create and name your custom CSS classes.</li>
|
||||
<li>Go to any model with an HTML field (e.g., <cite>Settings</cite> > <cite>Users</cite> > <cite>Preferences</cite> > <cite>Signature</cite>).</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 <cite>span</cite> 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:%2016.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>This module is part of the <a class="reference external" href="https://github.com/OCA/web/tree/16.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>
|
||||
@@ -0,0 +1,27 @@
|
||||
/** @odoo-module **/
|
||||
import {HtmlField} from "@web_editor/js/backend/html_field";
|
||||
import {patch} from "@web/core/utils/patch";
|
||||
import {useService} from "@web/core/utils/hooks";
|
||||
|
||||
const {onWillStart} = owl;
|
||||
|
||||
patch(HtmlField.prototype, "web_editor_class_selector.HtmlField", {
|
||||
setup() {
|
||||
this._super(...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"]
|
||||
);
|
||||
});
|
||||
},
|
||||
async startWysiwyg(wysiwyg) {
|
||||
// Provide the custom class css to the wysiwyg editor
|
||||
// to render the custom class css in the toolbar
|
||||
wysiwyg.options.custom_class_css = this.custom_class_css;
|
||||
return this._super(wysiwyg);
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,68 @@
|
||||
/** @odoo-module **/
|
||||
import {_t} from "web.core";
|
||||
import {patch} from "web.utils";
|
||||
import {
|
||||
closestElement,
|
||||
getSelectedNodes,
|
||||
isVisibleTextNode,
|
||||
} from "@web_editor/js/editor/odoo-editor/src/utils/utils";
|
||||
import {OdooEditor} from "@web_editor/js/editor/odoo-editor/src/OdooEditor";
|
||||
|
||||
patch(OdooEditor.prototype, "web_editor_class_selector.OdooEditor", {
|
||||
_updateToolbar(show) {
|
||||
const res = this._super(show);
|
||||
if (!this.toolbar) {
|
||||
return res;
|
||||
}
|
||||
const sel = this.document.getSelection();
|
||||
if (!this.isSelectionInEditable(sel)) {
|
||||
return res;
|
||||
}
|
||||
// Get selected nodes within td to handle non-p elements like h1, h2...
|
||||
// Targeting <br> to ensure span stays inside its corresponding block node.
|
||||
const selectedNodesInTds = [
|
||||
...this.editable.querySelectorAll(".o_selected_td"),
|
||||
].map((node) => closestElement(node).querySelector("br"));
|
||||
const selectedNodes = getSelectedNodes(this.editable).filter(
|
||||
(n) =>
|
||||
n.nodeType === Node.TEXT_NODE &&
|
||||
closestElement(n).isContentEditable &&
|
||||
isVisibleTextNode(n)
|
||||
);
|
||||
const selectedTextNodes = selectedNodes.length
|
||||
? selectedNodes
|
||||
: selectedNodesInTds;
|
||||
let activeLabel = "";
|
||||
for (const selectedTextNode of selectedTextNodes) {
|
||||
const parentNode = selectedTextNode.parentElement;
|
||||
for (const customCss of this.custom_class_css) {
|
||||
const button = this.toolbar.querySelector("#" + customCss.class_name);
|
||||
if (button) {
|
||||
const isActive = parentNode.classList.contains(
|
||||
customCss.class_name
|
||||
);
|
||||
button.classList.toggle("active", isActive);
|
||||
|
||||
if (isActive) {
|
||||
activeLabel = button.textContent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Show current class active in the toolbar
|
||||
// or remove active class if nothing is selected
|
||||
const styleSection = this.toolbar.querySelector("#custom_class");
|
||||
if (styleSection) {
|
||||
if (!activeLabel) {
|
||||
const css_selectors = this.toolbar.querySelectorAll(".css_selector");
|
||||
for (const node of css_selectors) {
|
||||
node.classList.toggle("active", false);
|
||||
}
|
||||
}
|
||||
styleSection.querySelector("button span").textContent = activeLabel
|
||||
? activeLabel
|
||||
: _t("Custom CSS");
|
||||
}
|
||||
return res;
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,12 @@
|
||||
/** @odoo-module **/
|
||||
import {editorCommands} from "@web_editor/js/editor/odoo-editor/src/commands/commands";
|
||||
import {formatSelection} from "@web_editor/js/editor/odoo-editor/src/utils/utils";
|
||||
|
||||
const newCommands = {
|
||||
setCustomCss: (editor, ...args) => {
|
||||
const selectedId = parseInt(args[0], 10);
|
||||
const record = editor.custom_class_css.find((item) => item.id === selectedId);
|
||||
formatSelection(editor, record.class_name);
|
||||
},
|
||||
};
|
||||
Object.assign(editorCommands, newCommands);
|
||||
@@ -0,0 +1,37 @@
|
||||
/** @odoo-module **/
|
||||
import {
|
||||
closestElement,
|
||||
formatsSpecs,
|
||||
} from "@web_editor/js/editor/odoo-editor/src/utils/utils";
|
||||
|
||||
// This function is called in the _configureToolbar 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);
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
/** @odoo-module **/
|
||||
import Wysiwyg from "web_editor.wysiwyg";
|
||||
import core from "web.core";
|
||||
import {createCustomCssFormats} from "../odoo-editor/utils.esm";
|
||||
|
||||
const Qweb = core.qweb;
|
||||
|
||||
Wysiwyg.include({
|
||||
_configureToolbar: function (options) {
|
||||
this._super(options);
|
||||
if (options.custom_class_css && options.custom_class_css.length > 0) {
|
||||
const $dialogContent = $(
|
||||
Qweb.render("web_editor_class_selector.custom_class_css", {
|
||||
custom_class_css: options.custom_class_css,
|
||||
})
|
||||
);
|
||||
$dialogContent.appendTo(this.toolbar.$el);
|
||||
// Binding the new commands to the editor
|
||||
// to react to the click on the new options
|
||||
this.odooEditor.bindExecCommand($dialogContent[0]);
|
||||
this.odooEditor.custom_class_css = options.custom_class_css;
|
||||
createCustomCssFormats(options.custom_class_css);
|
||||
}
|
||||
},
|
||||
});
|
||||
21
web_editor_class_selector/static/src/scss/demo_styles.scss
Normal file
21
web_editor_class_selector/static/src/scss/demo_styles.scss
Normal 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;
|
||||
}
|
||||
33
web_editor_class_selector/static/src/xml/web_editor.xml
Normal file
33
web_editor_class_selector/static/src/xml/web_editor.xml
Normal file
@@ -0,0 +1,33 @@
|
||||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<templates id="template" xml:space="preserve">
|
||||
<t t-name="web_editor_class_selector.custom_class_css">
|
||||
<t t-jquery="#decoration" t-operation="before">
|
||||
|
||||
<div id="custom_class" class="btn-group dropdown">
|
||||
<button
|
||||
type="button"
|
||||
class="btn dropdown-toggle"
|
||||
data-bs-toggle="dropdown"
|
||||
title="Custom CSS"
|
||||
tabindex="-1"
|
||||
data-bs-original-title="Custom CSS"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<span>Custom CSS</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li t-foreach="custom_class_css" t-as="line">
|
||||
<a
|
||||
class="dropdown-item css_selector"
|
||||
t-att-id="line.class_name"
|
||||
href="#"
|
||||
data-call="setCustomCss"
|
||||
t-att-data-arg1="line.id"
|
||||
><span t-att-class="line.class_name" t-out="line.name" /></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
</t>
|
||||
</templates>
|
||||
11
web_editor_class_selector/views/menus.xml
Normal file
11
web_editor_class_selector/views/menus.xml
Normal file
@@ -0,0 +1,11 @@
|
||||
<?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>
|
||||
60
web_editor_class_selector/views/web_editor_class_views.xml
Normal file
60
web_editor_class_selector/views/web_editor_class_views.xml
Normal 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.tree</field>
|
||||
<field name="model">web.editor.class</field>
|
||||
<field name="arch" type="xml">
|
||||
<tree>
|
||||
<field name="name" />
|
||||
<field name="class_name" />
|
||||
</tree>
|
||||
</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="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">tree,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>
|
||||
Reference in New Issue
Block a user