It is now possible to add very easily a font from Google Fonts under
Customize Theme > Fonts > Add Google Font.
Part of https://github.com/odoo/odoo/pull/33442
task-1974659
Co-authored-by: qsm-odoo <qsm@odoo.com>
The theme customize dialog implements its own system of widgets. For
example: data-widget="color" and data-widget="input". Now, a new type of
widget data-widget="auto" exists. The goal is the same as the
data-widget="input" but with a predefined value that the user cannot
choose.
Also, as "data-value" was badly chosen during its implementation, it
is now renamed to "data-variable" and "data-value" is now used with the
new widget.
Example of the new widget "auto":
<opt data-widget="auto" data-variable="logo-height" data-value="3rem"
string="Logo Height"/>
-> Allows to create a button forcing the logo height to 3rem.
Part of https://github.com/odoo/odoo/pull/33442
task-1974659
- End of list in image library
- Title add menu item
- Warning message in html/css/js editor
- Wording building block sections
Part of https://github.com/odoo/odoo/pull/30986
task-1939869
Replace the font selection UI by a dropdown. Make the system generic
so that a dropdown can be used for any set of options.
task-1942241
closesodoo/odoo#32437
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: qsm-odoo <qsm@odoo.com>
This removes the 'V' box and it now validates the entered value when the
user clicks outside the box.
task-1952964
closesodoo/odoo#32291
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
* portal, web
This commit introduces the first of many-to-come non-color website user
values: the logo height. Now, the user can choose it in the customize
dialog.
PR https://github.com/odoo/odoo/pull/29624
task-1904244
Before this commit, color options in the theme customize were treated
as big exception in the system. The whole color panel XML was defined
client-side and used custom design. Now, all colors are defined as
options in the "server-side" template, allowing for more customizations
and better maintenance.
This commit also makes the color saving system generic to allow for more
new options in the future (like customizing the logo height or the font
size, which is the next task).
PR https://github.com/odoo/odoo/pull/29624
task-1904244
- Make the controller part more readable and more efficient (O(1) ORM
operations instead of O(n)) and remove deprecated code.
- Add the possibility to have a toggle standalone option. This is
used as soon as an `<opt/>` is alone in its container (note that now,
the container can be any tag and will be ignored during rendering).
- If an option has no specified 'string' to attach to it, the name of
the first view it toggles will be used.
PR https://github.com/odoo/odoo/pull/29624
task-1904244
- Fix the position of 'Add to menu' toggle button in new page dialog
- Properly align tip icon in the welcome message
task-1895287
closesodoo/odoo#29403
* Creating a new structure by transforming all the plugins in the
library using the odoo inheritance system. Plugins are easier to
implement with the AbstractPlugin to add Odoo behaviors.
* From now on, the methods of the library (in this case Summernote) can
no longer be called by other modules or files. Only the wysiwyg
widgets can access it, to simplify the updating process. The wysiwyg
object serves as an interface.
* Depending on the options the snippets will be loaded or not, the
editor will be in an iframe or not... all of this is transparent from
the outside.
* Regarding iframes, all controllers related to editing have been
removed: the new API no longer needs them. This speeds up loading,
eases testing and removes complexity for the same
features.
PUBLIC FEATURES
There are several public methods on the Wysiwyg class:
* Wysiwyg.prepare (WidgetParent): returns a deferred resolved when the
library (xml, lazy, assets...) is loaded.
* Wysiwyg.getRange (DOM): returns the range (selection in the dom)
* Wysiwyg.setRange (startNode, startOffset, endNode, endOffset): creates
a range (selection in the dom)
* Wysiwyg.setRangeFromNode (DOM, options) that creates a range from an
element (option available to select all, start or end)
A jQuery selector was added: :o_editable, which indicates whether the
current element is editable. That is, if it is contained in a tag with
the attribute 'contentEditable = "true"' or in a tag with the class
o_editable.
Several methods are also present:
* focusIn: makes a focus and places the cursor at the beginning of the
element
* focusInEnd: makes a focus and places the cursor at the end of the
element
* selectContent: makes a focus and selects the content
HTML FIELD
The HTML field can receive different options:
* style-inline: {boolean} transforms a class into an inline style when
saving and vice versa when reading.
* no-attachment: {boolean} prevents the use of attachments (in media
dialog)
* cssEdit: {xml_id} to use a template containing the css to loaded in
an iframe when editing
* cssReadonly: {xml_id} to use a template containing the css to load
into an iframe when viewing in readonly
* snippets: {xml_id} snippets template (can be used with or without
cssEdit)
* wrapper: {template} qweb static template (containing a tag:
id = "wrapper") that will include the content during editing (removed
on save)
MASS MAILING
A widget was created for mass mailing. There are now two fields:
body_html and body_arch.
body_arch contains the code with the class without conversion into
inline style, useful when editing and one with the inline style that is
visible in readonly mode and sent by email.
Advantage: no spreading errors, able to update css/theme, able to do
more changes when converting to inline style so that a maximum of mail
clients have an impeccable rendering.
Co-authored-by: Antoine Guenet <age@odoo.com>
* portal, web_editor
Anchor Link:
- Some visual improvements of the link dialog.
- New 'Page Anchor' field.
- System by default: top and bottom.
- Shows existing anchors.
Creation of the anchor:
- New option 'Anchor Name' to be able to create an anchor.
task-1913458
closesodoo/odoo#29150
* web_editor, website_slides
Current system is styling all navbars with the user color. This was not
the expected behavior but it is in fact quite nice, so we decided to
keep it. There was however a problem: choosing the menu text color only
applied to the main navbar (as it was an xpath toggling the navbar-dark
class).
This commit solves the problem by forcing navbar-light to behave as
navbar-dark automatically if the menu background is dark, and this
without any JS or extra CSS rules. This allows to get rid of the menu
text color option.
This commit also reviews the light and dark colors which are used when
website is not installed.
Before this commit, the message was always displayed.
Now we only show into the default homepage the message "Follow all the tooltip"
when there at least 1 tooltip in the current page.
task-1878245
Make some changes which are needed for theme migration.
- Theme colors as user colors fallback only (not hard choice)
- Review option dependency system
* web, website
- Introduce gray color palettes (needed for themes migration)
- Synchronize BS4 color maps with individual variables (see comments
about this in the code).
- Review alpha/primary, beta/secondary matching:
Before this commit, we decided that the common way to define a color
palette was defining primary, secondary, gamma, delta and epsilon.
alpha and beta were then forced to primary and secondary without other
possibility.
The new system makes more sense:
1) define alpha, beta, gamma, delta and epsilon
2) primary and secondary will automatically be set to your alpha and
beta (allowing to style the default UI with BS4-independant
variables)
3) if you are not happy with (2), you can define primary / secondary
in your color palette so that they are not automatically set to
alpha / beta
This commit also changes what classes the editor uses. Background colors
and text colors will now use alpha/beta/gamma/delta/epsilon (not primary
and secondary anymore). For buttons, all the possibilities are suggested
but color duplicates are hidden (so if your primary and alpha are equal,
only one button color is suggested).
* web, web_editor, website, website_theme_install, portal,
theme_default, theme_bootswatch
The purpose of this task is to make the customize dialog as generic as
possible, that is theme-independant:
1) The design is now totally generic (Odoo visuals)
2) The XML definition is form-view like. This allows themes to extend
the dialog without any risk of breaking the style and also allows to
not care about lots of technical details.
3) New options have been included. Those were themes options that are
now generic and which themes can simply adapt without touching the
customize modal (navbar colors, footer color, navbar layout, fonts,
body background, ...).
The color palette can now also be customized with user colors.
Using sass functionnalities, color palettes and fonts integration is now
a lot better.
Thanks to @qha-odoo for the original design.
task-31677
The system completely changed. I also had to adapt classes to new
screen breakpoints.
hidden/hide -> d-none
show -> d-block
hidden-xs -> d-none d-md-(block/inline/...)
hidden-sm -> d-md-none d-lg-(block/inline/...)
hidden-md -> d-lg-none d-xl-(block/inline/...)
hidden-lg -> d-xl-none
visible-xs-* -> d-* d-md-none
visible-sm-* -> d-none d-md-* d-lg-none
visible-md-* -> d-none d-lg-* d-xl-none
visible-lg-* -> d-none d-xl-*
hidden-print -> d-print-none
visible-print-* -> d-none d-print-*
...
and all possible combination of those had to be handled too.
Specification
=============
- no boxes around fields
- use regular form style for input fields
- don't split page/URL into two fields, just do one URL field, with autocomplete
- Add alpha, beta, gamma, delta and epsilon color in color selection because they are used in mass mailing and themes also.
- Add a selection option with label "L" inside circle for link.
- Add Color selector for choosing button color
- Remov select2 page selector and used jquery autocomplete on same input
- Fix issue of page search in ir.http
Now, when clicking on a menu item while being in edit mode, a modal
opens asking if we want to go to that page, edit that page, edit the
menu or do nothing (it only allowed to edit the menu item before).
The welcome message was using the mt/mb classes to add some space on
top and bottom of it. This is fine when the background-color of the
website is white, but this is not the case with every theme.
To fix the problem, add padding in LESS instead. Also move the inline
style in LESS to prevent theme extension problems.
* __content__ can't be used in Python implementation because safe_eval, so use
``0`` from Python implementation instead
* remove postfix from t-call tests because due to implementation details all
whitespace crap following a t-name is added to rendered template in Python
impl, and don't want to normalize whitespace.
website.snippet: The methods described in javascript will be called automatically from the data-method_name = value on li snippets options. The methods are called in the order relative to children of xml (eg: <li data-method1=value1> ... <li data-method2=value2> ... </ li>, the method1 is then called method2). Methods receive two arguments: type (over, click, reset) and value. data-snippet-id-option becomes data-snippet-id. Several xml options can use the same data-snippet-id.
add a new gallery snippet
convert website_sale to the new option system
