From 2303dcb2a9547c0a1cb2a176ff2fb398a9752b2d Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Tue, 31 Oct 2017 12:42:23 +0100 Subject: [IMP] web_editor, *: change height/margin system to padding system * web, website, mass_mailing Before this commit, the editor allowed defining the margin of some elements and the height of some elements. There were three main problems with this system: 1) When an user dragged the arrow, he often expected to change the size of the element while he was in fact changing the margin 2) When changing the margin, you increase the space between two elements but with a white space (while most users want a space with the same color of the block they are resizing = padding) 3) When changing the height, the user was able to hide snippet parts and the height was not consistent accross screen sizes Now, the only thing you can edit is padding. There is only one arrow for each direction, which allows increasing spacing and consistent dimension at the same time. The only feature that is lost with this change is the ability to control vertical alignement of colored columns. This is not a problem as colored columns are rare in our current snippets and there still have the possibility to add margin classes by hand if necessary (there are also plans to control vertical alignement another way). Note: margin classes are kept for compatibility. --- .../static/src/less/web_editor.common.less | 104 ++++++++++++--------- 1 file changed, 61 insertions(+), 43 deletions(-) (limited to 'addons/web_editor/static/src/less/web_editor.common.less') diff --git a/addons/web_editor/static/src/less/web_editor.common.less b/addons/web_editor/static/src/less/web_editor.common.less index cfa9f683198..99f6a474397 100644 --- a/addons/web_editor/static/src/less/web_editor.common.less +++ b/addons/web_editor/static/src/less/web_editor.common.less @@ -158,57 +158,75 @@ ul.oe_menu_editor { } } -// Generate all margins for all sizes -.o-margins-all(@factor: 1) { - // Unfortunately, the margins sizes are not - // mathematically related by a single function - .o-margins(128, @factor); - .o-margins(96, @factor); - .o-margins(92, @factor); - .o-margins(64, @factor); - .o-margins(48, @factor); - .o-margins(32, @factor); - .o-margins(24, @factor); - .o-margins(16, @factor); - .o-margins(8, @factor); - .o-margins(4, @factor); - .o-margins(0, @factor); +// Generate all spacings for all sizes +.o-spacing-all(@factor: 1) { + // Generate vertical margin/padding classes used by the editor + .o-generate-spacings(256/8); + .o-generate-spacings(@n, @i: 0) when (@i =< @n) { + .o-vspacing(@i * 8); + .o-generate-spacings(@n, @i + 1); + } + .o-vspacing(4, @factor); + + // 92px vertical margin is kept for compatibility + .o-vmargins(92, @factor); + + // Some horizontal margin classes defined for convenience + // (and compatibility) + .o-hmargins(0, @factor); + .o-hmargins(4, @factor); + .o-hmargins(8, @factor); + .o-hmargins(16, @factor); + .o-hmargins(32, @factor); + .o-hmargins(64, @factor); } -// Generate all margins for one size, scalled by a -// given factor (0 <= factor <= 1) -.o-margins(@name, @factor: 1) { - .o-margins-define(@name, @factor * @name); +// Generate all spacings for one size, scalled by a given factor +// (0 <= factor <= 1) +.o-vspacing(@name, @factor: 1) { + .o-vmargins(@name, @factor); + .o-vpaddings(@name, @factor); +} +.o-vmargins(@name, @factor: 1) { + .o-vmargins-define(@name, @factor * @name); +} +.o-vpaddings(@name, @factor: 1) { + .o-vpaddings-define(@name, @factor * @name); +} +.o-hspacing(@name, @factor: 1) { + .o-hmargins(@name, @factor); + .o-hpaddings(@name, @factor); +} +.o-hmargins(@name, @factor: 1) { + .o-hmargins-define(@name, @factor * @name); +} +.o-hpaddings(@name, @factor: 1) { + .o-hpaddings-define(@name, @factor * @name); } -// Generate all margins for one size, given -// the name of the margin and intended size -.o-margins-define(@name, @size: @name) { - .mt@{name} {margin-top: ~"@{size}px"!important;} - .mb@{name} {margin-bottom: ~"@{size}px"!important;} - .ml@{name} {margin-left: ~"@{size}px"!important;} - .mr@{name} {margin-right: ~"@{size}px"!important;} +// Generate all spacings for one size, given the name of the spacing and +// intended size +.o-vmargins-define(@name, @size: @name) { + .mt@{name} { margin-top: unit(@size, px)!important; } + .mb@{name} { margin-bottom: unit(@size, px)!important; } +} +.o-vpaddings-define(@name, @size: @name) { + .pt@{name} { padding-top: unit(@size, px)!important; } + .pb@{name} { padding-bottom: unit(@size, px)!important; } +} +.o-hmargins-define(@name, @size: @name) { + .ml@{name} { margin-left: unit(@size, px)!important; } + .mr@{name} { margin-right: unit(@size, px)!important; } +} +.o-hpaddings-define(@name, @size: @name) { + .pl@{name} { padding-left: unit(@size, px)!important; } + .pr@{name} { padding-right: unit(@size, px)!important; } } // Generate all margins -.o-margins-all(); - -// Possibility to change the margins ratio for small screen sizes, e.g.: -// @media (max-width: 768px) { -// .o-margins-all(0.75); -// } -// Possibility to only redefine single margins for small screen sizes, e.g.: -// @media (max-width: 768px) { -// .o-margins(64, 0.50); -// .o-margins(48, 0.50); -// } -// Possibility to directly redefine the size of single margins instead of refering to a factor for small screen sizes, e.g.: -// @media (max-width: 768px) { -// .o-margins-define(128, 48); -// .o-margins-define(96, 48); -// .o-margins-define(64, 48); -// } +.o-spacing-all(); +// Underline a.o_underline { text-decoration: underline; &:hover { -- cgit v1.2.3