Guillaume (gdi)andqsm-odoo
194f73a9bb
*: web_editor, mass_mailing This commit changes the way the font size selector works. Before this commit, the font size selector applied a hardcoded font size using the style attribute of the selected element. The purpose of this commit is to change this to apply a class on the selected element, making it responsive and customizable. In all Odoo applications, the font size selector will now apply a class on the current selection. An exception is made for mass mailing where the class would not make much sense as not related to the custom heading sizes (probably needs to be refactored in the future to use the standard font-size classes) and fonts cannot be responsive in mails anyway (so there would be a difference between preview and sent mail). Those classes are: - `display-N-fs` with N in [1 => 4]. The sizes are stored in the `$display-font-sizes` map. - `hN-fs` with N in [1 => 6]. The sizes are stored in the `$hN-font-size` variables. - `small` for the small font size. The size is stored in the `$small-font-size` variable. The font size selector shows the value of the class (which is dynamic) that will be applied. In the website application, the value of each class is configurable thanks to a previous commit. The user can choose the size of each font size class in the website settings. Note that many alternatives were considered for this feature, this is the chosen compromise. For the record, here is a very short summary of the alternatives: - Doing nothing: voted as the worse idea. Users see a font-size selector they will use it one way or another. The font-size won't be responsive, breaking their mobile website. And there are real use cases you could not do: a big "promotion" paragraph on your product page? Not possible: you either break your mobile page (using the font size option) or possibly hurt your SEO (using the font-style option and turning your paragraph into an h1). - Removing the font-size selector: we did not want the loss of the feature as there are correct usecases to use it (as mentioned above). - Using the Bootstrap hN and display-N classes instead of making new ones. Closed to be the chosen idea but discarded because those classes comes with colors (that the user can configure) and it would feel weird to have the color change when changing the font-size. Also, in the end, we also did not want the line-height, margins, etc of those classes (only the font-size). - Instead of X new classes, have only one: o-fs, which would be applied alongside a bootstrap hN or display-N class, when chosen by the user, to cancel the unwanted style of those. It works but it forces us to always have an added `<span>` to apply the font-size, which we don't want in the future (mainly because of display-N classes, see next commit). It is actually very needed to be able to use proper line-height when reducing the font. - Using a combination of an inline `em` font-size + a class to clamp it on mobile. Was probably the best next idea but rejected for several reasons. The main one probably being the inconsistency when changing the whole size of a title/paragraph (not part of it) and later changing the related theme size later. E.g. have an `<h1>` followed by a `<p>`. The h1 is 40px, the paragraph is 20px. Force the title to 20px, because you want it smaller, same size as the paragraph. Real use case but also users could simply use the font-size controls by mistake. We would thus apply 0.5em to do that. Later, change the theme font-size of h1 to 36px (small change). The 0.5em one is now 18px, smaller than the following paragraph. Preventing that would require more checks which would "break" other things / possibilities. - Probably others that were forgotten. In the end, there was no good or bad answer. "Anything works", as long as the feature "I want this text smaller/bigger" is there. The surrounding features are always compromise (some users would expect some behavior, some users would expect others). This commit focused on solving the unresponsiveness of those custom font-sizes, which was a problem for many users. task-1958098 Part-of: odoo/odoo#129791 Co-authored-by: qsm-odoo <qsm@odoo.com>
Odoo Website Builder
Get an awesome and free website, easily customizable with the Odoo website builder.
Create enterprise grade website with our super easy builder. Use finely designed building blocks and edit everything inline.
Benefit from out-of-the-box business features; e-Commerce, events, blogs, jobs announces, customer references, call-to-actions, etc.
Edit Anything Inline
Create beautiful websites with no technical knowledge. Odoo's unique 'edit inline' approach makes website creation surprisingly easy. No more complex backend; just click anywhere to change any content.
"Want to change the price of a product? or put it in bold? Want to change a blog title?" Just click and change. What you see is what you get. Really.
Awesome. Astonishingly Beautiful.
Odoo's building blocks allow to design modern websites that are not possible with traditional WYSIWYG page editors.
Whether it's for products descriptions, blogs or static pages, you don't need to be a professional designer to create clean contents. Just drag and drop and customize predefined building blocks.
Enterprise-Ready, out-of-the-box
Activate ready-to-use enterprise features in just a click; e-commerce, call-to-actions, jobs announces, events, customer references, blogs, etc.
Traditional eCommerce and CMS have poorly designed backends as it's not their core focus. With the Odoo integration, you benefit from the best management software to follow-up on your orders, your jobs applicants, your leads, etc.
A Great Mobile Experience
Get a mobile friendly website thanks to our responsive design based on bootstrap. All your pages adapt automatically to the screen size. (mobile phones, tablets, desktop) You don't have to worry about mobile contents, it works by default.
SEO tools at your finger tips
The Promote tool suggests keywords according to Google most searched terms. Search Engine Optimization tools are ready to use, with no configuration required.
Google Analytics tracks your shopping cart events by default. Sitemap and structured content are created automatically for Google indexation.
Multi-Languages Made Easy
Get your website translated in multiple languages with no effort. Odoo proposes and propagates translations automatically across pages, following what you edit on the master page.
Designer-Friendly Templates
Templates are awesome and easy to design. You don't need to develop to create new pages, themes or building blocks. We use a clean HTML structure, a bootstrap CSS.
Customize every page on the fly with the integrated template editor. Distribute your work easily as an Odoo module.
Fluid Grid Layouting
Design perfect pages by drag and dropping building blocks. Move and scale them to fit the layout you are looking for.
Building blocks are based on a responsive, mobile friendly fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.
Professional Themes
Design a custom theme or reuse pre-defined themes to customize the look and feel of your website.
Test new color scheme easily; you can change your theme at any time in just a click.
Integrated With Odoo Apps
e-Commerce
Promote products, sell online, optimize visitors' shopping experience.
Blog
Write news, attract new visitors, build customer loyalty.
Online Events
Schedule, organize, promote or sell events online; conferences, trainings, webinars, etc.