stefanorigano (SRI)
9337562cca
*: web, website This commit redesigns the editor toolbar improving its visual appearance and introducing substantial changes wherever it is rendered. == "Into-sidebar" design The grid layout has been refined, improving its components allocation. For the sake of visual simplification, "list-type" buttons have been unwrapped from their original dropdown. For the same reason the button to create a new table has been removed (users will have to use the command-bar to create a new table). Table's options have been moved to a section "ad-hoc", visible only when a table is selected. == Floating design (backend only) The toolbar is now white to match the command-bar design. In order to simplify frontend inheritance, the floating toolbar now uses grid layout. == Colorpicker The generic code necessary for each design has been moved from 'wysiwyg_snippets.scss' to 'wysiwyg.scss'. The style is now controlled by css variables allowing to customize critical design properties without the need of SCSS overrides. By default the design is white(-ish) to match the floating toolbar, while in 'wysiwyg_snippets.scss' the variables are customized to get the typical sidebar's dark feel. Note: despite the task main objective was just to improve/fix the design, this aimed to simplify design inheritance and reduce the css too. While inheritance has been improved reducing the amount of overrides, the attempt to reduce the css partially failed (in the final lines count must be considered that a new sidebar section has been created). The reason is that we currently suffer from a deep and complicated inheritance structure for this component. The xml template uses default bootstrap classes that are styled differently depending if loaded in a community or enterprise environment. This approach leads to overrides that must cover all the scenarios while further customization must be taken in account too 'cause the toolbar can be rendered into the sidebar with a totally different design. A possible solution would be to detach from bootstrap directly in the lib using custom classes names, and then @extend these classes differently according to the current environment but probably not a good idea as we want the toolbar to use bootstrap for in-website editors (so they can match the theme correctly) but this has to be reviewed as well anyway. To be checked. Part of https://github.com/odoo/odoo/pull/73565 task-2496339 closes odoo/odoo#73565 Signed-off-by: Antoine Guenet <Zinston@users.noreply.github.com>
Odoo editor
A fast wysiwyg editor targeting documents and website structures.
Key features
Unbreakable nodes
When editing some sections of a website, there is a possibility for a selection to start or end within a node that is contained in an unbreakable.
If the user deletes the content of the selection, the unbreakable node should not be merged with another one.
Demo
To open the demo page:
http://<host:port>/web_editor/static/lib/odoo-editor/demo/index.html
Tests
To open the test page, go to
http://<host:port>/web_editor/static/lib/odoo-editor/test/editor-test.html
Prettify
# install prettier
npm install -g prettier
# prettify
prettier --config '<odoo-path>/addons/web_editor/static/lib/odoo-editor/_prettierrc.js' --ignore-path='<odoo-path>/odoo/addons/web_editor/static/lib/odoo-editor/_prettierignore' '<odoo-path>/odoo/addons/web_editor/static/lib/odoo-editor/**/*.js' --write
Prettify with vscode
Install vscode extention esbenp.prettier-vscode.
Add the following configuration in your vscode user config or workspace config:
"prettier.requireConfig": true,
"prettier.configPath": "<odoo-path>/odoo/addons/web_editor/static/lib/odoo-editor/.prettierrc.js",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
Then you can use the command Format Document or use ctrl+h to format a file.