forked from Techsystech/web
[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.17.0
Carlos Lopez
parent
990d84e999
commit
a0996d3626
|
|
@ -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.
|
||||
|
|
@ -0,0 +1 @@
|
|||
from . import models
|
||||
|
|
@ -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",
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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 ""
|
||||
|
|
@ -0,0 +1 @@
|
|||
from . import web_editor_class
|
||||
|
|
@ -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")
|
||||
]
|
||||
|
|
@ -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.
|
||||
|
|
@ -0,0 +1 @@
|
|||
Add support to apply class to any element (currently, only `span` is supported)
|
||||
|
|
@ -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.
|
||||
|
|
@ -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
|
||||
|
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
|
|
@ -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);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue