From 1634cad46cb00efeabff7566438012e796e824ed Mon Sep 17 00:00:00 2001 From: stefanorigano Date: Fri, 26 Aug 2016 11:17:00 +0200 Subject: [PATCH] [REF] web_editor: editor UI style and stability improvements * Review style of some UI components * Rename some content * Define a font-family less variable to be used to avoid that themes customizations affect the UI. Note: theme should ideally not redefine the font family of the body but of the #wrapwrap element but this is done for safety. * Overwrite other theme's customisations * Minor style fixes --- .../static/src/less/web_editor.ui.less | 123 +++++++++++++++--- .../static/src/less/web_editor.variables.less | 1 + .../website/static/src/js/website.mobile.js | 2 +- .../src/less/website.ui.components.less | 19 ++- .../website/static/src/less/website.ui.less | 9 +- addons/website/views/snippets.xml | 4 +- 6 files changed, 126 insertions(+), 32 deletions(-) diff --git a/addons/web_editor/static/src/less/web_editor.ui.less b/addons/web_editor/static/src/less/web_editor.ui.less index d63402f8e0c..2a4b529b734 100644 --- a/addons/web_editor/static/src/less/web_editor.ui.less +++ b/addons/web_editor/static/src/less/web_editor.ui.less @@ -8,7 +8,7 @@ background-color: rgba(0,0,0,0); .o-transition(background-color, 400ms, @o-we-md-ease); - font-family: Roboto, @font-family-sans-serif; + font-family: @o-we-font-family; form.navbar-form { height: 100%; @@ -28,20 +28,30 @@ height: 100%; margin: 0; padding: 10px; - line-height: 1; - font-weight: bold; + line-height: 1.2; + font-size: 13px; + font-family: @o-we-font-family; .o-transition(all, 0.3s); border: none; border-radius: 0; + .fa { + margin-right: @grid-gutter-width/4; + &.fa-times { + color: @o-we-color-danger; + } + } + &.btn-primary { .button-variant(white, @odoo-brand-primary, @odoo-brand-primary); - text-transform: uppercase; } &.btn-default { .button-variant(white, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); - text-transform: uppercase; + + &:hover { + background: fade(black, 50%); + } } &:focus, &:active, &:focus:active { @@ -92,8 +102,10 @@ html[lang] > body.editor_enable{ padding: 0; background: @o-we-color-dark; text-align: center; - font-size: 20px; + font-weight: normal; + font-size: 17px; color: white; + font-family: @o-we-font-family; } #o_scroll { @@ -286,6 +298,7 @@ html[lang] > body.editor_enable{ // OVERLAY OPTIONS > .oe_overlay_options { + font-family: @o-we-font-family; .o-position-absolute(@bottom: 0, @left: 0); width: 250px; // the parent oe_overlay has a width equal to the snippet width, the 250px is there to force the options to stay on one line without overriding bootstrap .btn-group text-align: left; @@ -304,7 +317,7 @@ html[lang] > body.editor_enable{ line-height: @o-overlay-option-size; font-size: 11px; border-radius: 0; - font-weight: 600; + font-weight: normal; .o-transition(all, 400ms); color: @o-we-color-text-light; @@ -312,18 +325,32 @@ html[lang] > body.editor_enable{ &:hover { color: white; background-color: lighten(@o-we-color-dark, 10%); + + > .fa { + color: white; + } } &.oe_snippet_remove { color: white; background-color: @o-we-color-danger; border-color: darken(@o-we-color-danger, 20%); + + > .fa { + color: white; + } + &:hover { background-color: darken(@o-we-color-danger, 20%); } } &.oe_snippet_parent > i { .scaleX(-1); + font-size: 12px; + } + + > .fa { + color: @o-we-color-text-light; } } @@ -383,9 +410,9 @@ html[lang] > body.editor_enable{ background-color: @o-we-color-light; a { color: @o-we-color-text-light; - font-weight: 600; + font-weight: normal; font-size: 12px; - padding: 5px 20px; + padding: 5px 35px 5px 20px; } > li { @@ -410,7 +437,7 @@ html[lang] > body.editor_enable{ } &.divider { background-color: @o-we-color-divider; - margin: 0; + margin: 0 8px; } &.active > a { color: white; @@ -423,32 +450,52 @@ html[lang] > body.editor_enable{ } } &.dropdown-header { - color: wheat; + color: white; font-weight: bold; + font-size: 12px; + margin-top: 2px; &:hover { background-color: initial; } &.o_main_header { - padding-left: 4px; + padding-left: 8px; } &.o_parent_editor_header { + color: wheat; + font-weight: 400; + font-size: 10px; + margin: 7px 0 4px 4px; &::before { content: "\f148"; - .o-position-absolute(@top: 0, @left: 5px); + .o-position-absolute(@top: 2px, @left: 8px); font-family: FontAwesome; .scaleX(-1); } ~ li:not(.dropdown-header) { - padding-left: 16px; + a { + font-size: 11px; + padding: 4px 35px 4px 20px; + opacity: 0.8; + &:hover { + opacity: 1; + } + } } } } + &.separator { + display: block; + margin: 4px 35px 4px 20px; + height: 1px; + background: fade(@o-we-color-text-light, 10%); + } + > a > i { width: 16px; - margin-right: 4px; + margin-right: 8px; } } } @@ -679,6 +726,11 @@ html[lang] > body.editor_enable{ .popover-content { height: @odoo-navbar-height; white-space: nowrap; + font-family: @o-we-font-family; + + h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { + font-family: @o-we-font-family; + } .btn { height: @odoo-navbar-height; @@ -689,9 +741,18 @@ html[lang] > body.editor_enable{ color: @o-we-color-text-normal; border-top: 2px solid transparent; .o-transition(all, 0.3s); + + > .fa { + color: @o-we-color-text-normal; + } + &:hover { border-top: 2px solid @o-we-color-text-normal; - color: @o-we-color-text-normal; + color: @o-we-color-text-light; + + > .fa { + color: @o-we-color-text-light; + } } .o_image_alt { @@ -704,16 +765,26 @@ html[lang] > body.editor_enable{ background-color: @o-we-color-dark; color: @o-we-color-text-light; box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.5); + + > .fa { + color: @o-we-color-text-light; + } } } > .btn-group { margin-top: -2px; - &.open .dropdown-toggle { - border-top: 2px solid white; - background-color: @o-we-color-darker; - color: white; - box-shadow: none; + &.open, .btn-group.open { + .dropdown-toggle { + border-top: 2px solid white; + background-color: @o-we-color-darker; + color: white; + box-shadow: none; + + > .fa, > span { + color: white; + } + } } } .dropdown-menu { @@ -725,9 +796,17 @@ html[lang] > body.editor_enable{ width: 100%; color: @o-we-color-text-light; + > .fa { + color: @o-we-color-text-light; + } + &:hover { background-color: @o-we-tab-active-bg; color: white; + + > .fa { + color: white; + } } } } @@ -940,8 +1019,10 @@ table.colorpicker { padding: 5px 10px 0; .note-color-reset { font-size: 20px!important; + color: desaturate(fade(@o-we-color-danger, 60%), 40%); margin: 3px 0 0; padding: 0; + cursor: pointer; &:hover { background: transparent!important; color: @o-we-color-danger; diff --git a/addons/web_editor/static/src/less/web_editor.variables.less b/addons/web_editor/static/src/less/web_editor.variables.less index 043dd0f404e..9e0c7a2a014 100644 --- a/addons/web_editor/static/src/less/web_editor.variables.less +++ b/addons/web_editor/static/src/less/web_editor.variables.less @@ -1,3 +1,4 @@ +@o-we-font-family: Roboto, 'Montserrat', "Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; @o-we-color-dark: #2c2c36; @o-we-color-darker: darken(@o-we-color-dark, 2%); diff --git a/addons/website/static/src/js/website.mobile.js b/addons/website/static/src/js/website.mobile.js index d5c46a4a8f1..791775f57b8 100644 --- a/addons/website/static/src/js/website.mobile.js +++ b/addons/website/static/src/js/website.mobile.js @@ -39,7 +39,7 @@ website.TopBar.include({ var self = this; this.$el.on('click', 'a[data-action=show-mobile-preview]', function () { new MobilePreviewDialog(self, { - title: _t('Mobile preview') + " ", + title: _t('Mobile preview') + " ", }).open(); }); return this._super(); diff --git a/addons/website/static/src/less/website.ui.components.less b/addons/website/static/src/less/website.ui.components.less index 1379d8b6ee6..e9aae939eef 100644 --- a/addons/website/static/src/less/website.ui.components.less +++ b/addons/website/static/src/less/website.ui.components.less @@ -7,7 +7,11 @@ body .modal { } &.o_website_modal { - font-family: "Roboto", Roboto, sans-serif; + font-family: @o-we-font-family; + + h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { + font-family: @o-we-font-family; + } .modal-content { border-radius: 0; @@ -80,6 +84,7 @@ body .modal { color: lightgray; opacity: 1; font-size: 25px; + font-weight: normal; } .modal-content { @@ -91,6 +96,16 @@ body .modal { .modal-header { border: none; cursor: pointer; + font-family: @o-we-font-family; + + h4 { + font-family:inherit; + font-weight: normal; + + .fa { + margin-left: @grid-gutter-width/2; + } + } } .modal-body { @@ -125,6 +140,8 @@ body .modal { // ADD NEW PAGE MODAL &#o_website_add_page_modal { + font-family: @o-we-font-family; + &.in { .o-flex-display()!important; .o-justify-content(center); diff --git a/addons/website/static/src/less/website.ui.less b/addons/website/static/src/less/website.ui.less index 01d76905dd8..75cada7ddba 100644 --- a/addons/website/static/src/less/website.ui.less +++ b/addons/website/static/src/less/website.ui.less @@ -10,7 +10,7 @@ body.o_connected_user { position: fixed; z-index: 1001; - font-family: Roboto, @font-family-sans-serif; + font-family: @o-we-font-family; font-size: @odoo-font-size-base; a:hover, a:focus { text-decoration: none; @@ -25,12 +25,7 @@ body.o_connected_user { padding: 0 @grid-gutter-width/2; &[data-action="edit"], &[data-action="translate"] { - background-color: @odoo-brand-optional; - outline: 1px solid @odoo-brand-optional; - &:hover, &:focus { - background-color: darken(@odoo-brand-optional, 10%); - outline-color: darken(@odoo-brand-optional, 10%); - } + .button-variant(white, @odoo-brand-optional, @odoo-brand-optional); @media (max-width: @screen-xs-max) { &, &:hover, &:focus { diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml index e16dfa3da42..6e63ded4699 100644 --- a/addons/website/views/snippets.xml +++ b/addons/website/views/snippets.xml @@ -645,7 +645,7 @@
- Content + Inner content
@@ -658,7 +658,7 @@
- Feature + Feature