[FIX] web_editor: improve web_editor UI style preservation

stefanorigano · qsm-odoo · commit 39d74a7136b1 · 2016-10-13T17:01:04.000+02:00
* add and use preservation mixins to prevent undesired customizations
made by themes
* remove some style preservation code (and use the mixins instead)
* add UI states' colour variables
diff --git a/addons/web_editor/static/src/js/widgets.js b/addons/web_editor/static/src/js/widgets.js
@@ -1145,7 +1145,7 @@ var LinkDialog = Dialog.extend({
             $preview.attr("target", new_window ? '_blank' : "")
                 .attr("href", url && url.length ? url : "#")
                 .html((label && label.length ? label : url))
-                .attr("class", classes.replace(/pull-\w+/, ''));
+                .attr("class", classes.replace(/pull-\w+/, '') + " o_btn_preview");
         });
     }
 });
diff --git a/addons/web_editor/static/src/less/web_editor.variables.less b/addons/web_editor/static/src/less/web_editor.variables.less
@@ -9,6 +9,9 @@
 @o-we-color-text-normal: #999999;
 @o-we-color-text-light: #d4d5d7;
 @o-we-color-danger: #e6586c;
+@o-we-color-warning: #f0ad4e;
+@o-we-color-success: #40ad67;
+@o-we-color-info: #6999a8;
 
 @o-we-sidebar-width: 210px;
 
@@ -76,3 +79,119 @@
     from { background: @odoo-brand-optional; }
     to   { width: 0; background: transparent; }
 }
+
+
+// ============    Preservetion mixins    ===============
+// Used to preserve web_editor and website UI from themes customizations
+
+.o-w-preserve-base() {
+    font-family: @o-we-font-family;
+    line-height: 1.42857143;
+    color: @o-we-color-divider;
+
+    .text-muted {
+        color: @o-we-color-text-normal;
+    }
+}
+
+.o-w-preserve-headings() {
+    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+        font-family: @o-we-font-family;
+        line-height: 1.42857143;
+        color: @o-we-color-dark;
+        font-weight: bold;
+    }
+}
+
+.o-w-preserve-links() {
+    a:not(.o_btn_preview) {
+        color: @odoo-brand-optional;
+
+        &:focus, &:active, &:focus:active {
+            outline: none!important;
+        }
+    }
+}
+
+.o-w-preserve-forms() {
+    .form-control {
+        height: 34px;
+        padding: 6px 12px;
+        font-size: 14px;
+        line-height: 1.42857143;
+        border: 1px solid @o-we-color-text-light;
+        color: #555;
+        background-color: #fff;
+        border-radius: 0;
+    }
+}
+
+.o-w-preserve-modals() {
+    background: 0;
+
+    .modal-content {
+        border-radius: 0;
+        background-color: @o-we-color-paper;
+
+        .modal-body {
+            background-color: white;
+        }
+        .modal-footer {
+            text-align: left;
+        }
+    }
+}
+
+.o-w-preserve-btn() {
+    .btn:not(.o_btn_preview) {
+        border-width: 1px;
+        border-radius: 0;
+        font-weight: normal;
+        .button-size(6px; 12px; 14px; 1.42857143; 0);
+
+        &.btn-primary {
+            .button-variant(white, @odoo-brand-optional, darken(@odoo-brand-optional,5%));
+            text-transform: uppercase;
+        }
+        &.btn-default {
+            .button-variant(@odoo-brand-optional, white, @o-we-color-text-light);
+            text-transform: uppercase;
+        }
+        &.btn-link {
+            .button-variant(@odoo-brand-optional, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
+        }
+        &.btn-success {
+            .button-variant(white; @o-we-color-success; darken(@o-we-color-success, 5%));
+        }
+        &.btn-info {
+            .button-variant(white; @o-we-color-info; darken(@o-we-color-info, 5%));
+        }
+        &.btn-warning {
+            .button-variant(white; @o-we-color-warning; darken(@o-we-color-warning, 5%));
+        }
+        &.btn-danger {
+            .button-variant(white; @o-we-color-danger; darken(@o-we-color-danger, 5%));
+        }
+
+        &.btn-lg {
+            .button-size(10px; 16px; 18px; 1.3333333; 0);
+        }
+        &.btn-sm {
+            .button-size(5px; 10px; 12px; 1.5; 0);
+        }
+        &.btn-xs {
+            .button-size(1px; 5px; 12px; 1.5; 0);
+        }
+    }
+}
+
+.o-w-preserve-wells() {
+    .well {
+        padding: 19px;
+        margin-bottom: 20px;
+        background-color: @o-we-color-paper;
+        border: 1px solid darken(@o-we-color-paper,5%);
+        border-radius: 0;
+        .box-shadow(none);
+    }
+}
diff --git a/addons/web_editor/static/src/xml/editor.xml b/addons/web_editor/static/src/xml/editor.xml
@@ -251,31 +251,31 @@
                             <span class="caret"/></a>
                         <ul aria-labelledby="dLabel" class="dropdown-menu" role="menu">
                             <li>
-                                <label class="btn btn-link">Link
+                                <label class="btn btn-link o_btn_preview">Link
                                     <input checked="checked" class="link-style" name="link-style-type" type="radio" value=""/></label>
                             </li>
                             <li>
-                                <label class="btn btn-default">Basic
+                                <label class="btn btn-default o_btn_preview">Basic
                                     <input class="link-style" name="link-style-type" type="radio" value="btn-default"/></label>
                             </li>
                             <li>
-                                <label class="btn btn-success">Success
+                                <label class="btn btn-success o_btn_preview">Success
                                     <input class="link-style" name="link-style-type" type="radio" value="btn-success"/></label>
                             </li>
                             <li>
-                                <label class="btn btn-primary">Primary
+                                <label class="btn btn-primary o_btn_preview">Primary
                                     <input class="link-style" name="link-style-type" type="radio" value="btn-primary"/></label>
                             </li>
                             <li>
-                                <label class="btn btn-info">Info
+                                <label class="btn btn-info o_btn_preview">Info
                                     <input class="link-style" name="link-style-type" type="radio" value="btn-info"/></label>
                             </li>
                             <li>
-                                <label class="btn btn-warning">Warning
+                                <label class="btn btn-warning o_btn_preview">Warning
                                     <input class="link-style" name="link-style-type" type="radio" value="btn-warning"/></label>
                             </li>
                             <li>
-                                <label class="btn btn-danger">Danger
+                                <label class="btn btn-danger o_btn_preview">Danger
                                     <input class="link-style" name="link-style-type" type="radio" value="btn-danger"/></label>
                             </li>
                         </ul>
@@ -287,19 +287,19 @@
                             <span class="caret"/></a>
                         <ul aria-labelledby="dLabel" class="dropdown-menu" role="menu">
                             <li>
-                                <label class="btn btn-default btn-xs">Extra Small
+                                <label class="btn btn-default btn-xs o_btn_preview">Extra Small
                                     <input class="link-style" name="link-style-size" type="radio" value="btn-xs"/></label>
                             </li>
                             <li>
-                                <label class="btn btn-default btn-sm">Small
+                                <label class="btn btn-default btn-sm o_btn_preview">Small
                                     <input class="link-style" name="link-style-size" type="radio" value="btn-sm"/></label>
                             </li>
                             <li>
-                                <label class="btn btn-default">Default
+                                <label class="btn btn-default o_btn_preview">Default
                                     <input checked="checked" class="link-style" name="link-style-size" type="radio" value=""/></label>
                             </li>
                             <li>
-                                <label class="btn btn-default btn-lg">Large
+                                <label class="btn btn-default btn-lg o_btn_preview">Large
                                     <input class="link-style" name="link-style-size" type="radio" value="btn-lg"/></label>
                             </li>
                         </ul>
diff --git a/addons/website/static/src/less/website.ui.components.less b/addons/website/static/src/less/website.ui.components.less
@@ -1,52 +1,25 @@
 // MODALS
 body .modal {
-    a {
-        &:focus, &:active, &:focus:active {
-            outline: none!important;
-        }
-    }
 
     &.o_website_modal {
-        font-family: @o-we-font-family;
-
-        h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
-            font-family: @o-we-font-family;
-        }
+        .o-w-preserve-base();
+        .o-w-preserve-headings();
+        .o-w-preserve-forms();
+        .o-w-preserve-links();
+        .o-w-preserve-btn();
+        .o-w-preserve-wells();
+        .o-w-preserve-modals();
 
         .modal-content {
-            border-radius: 0;
-            color: initial!important;
-            background-color: @o-we-color-paper!important;
             .modal-header .o_subtitle {
                 margin-left: 10px;
             }
             .modal-body {
-                color: inherit!important;
-                background-color: transparent!important;
                 .o_modal_header {
                     .o-webclient-padding(@top: 10px, @bottom: 10px);
                     .clearfix();
                 }
             }
-            .modal-footer {
-                text-align: left;
-
-                .btn {
-                    border-radius: 0;
-
-                    &.btn-primary {
-                        .button-variant(white, @odoo-brand-optional, @odoo-brand-optional);
-                        text-transform: uppercase;
-                    }
-                    &.btn-default {
-                        .button-variant(@odoo-brand-optional, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
-                        text-transform: uppercase;
-                    }
-                    &.btn-link {
-                        .button-variant(@odoo-brand-optional, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
-                    }
-                }
-            }
         }
 
         @media (min-width: @screen-sm-min) {
@@ -89,7 +62,6 @@ body .modal {
 
             .modal-content {
                 background-color: black!important;
-                color: lightgray!important;
                 border: 3px outset gray;
                 border-radius: 20px;
 
@@ -99,6 +71,7 @@ body .modal {
                     font-family: @o-we-font-family;
 
                     h4 {
+                        color: lightgray;
                         font-family:inherit;
                         font-weight: normal;
 
@@ -109,6 +82,8 @@ body .modal {
                 }
 
                 .modal-body {
+                    background-color: inherit!important;
+                    border-radius: 20px;
                     padding: 15px;
 
                     @mobile-preview-width: 320px;
@@ -324,6 +299,10 @@ body .modal {
 
 // ACE EDITOR
 .o_ace_view_editor {
+    .o-w-preserve-base();
+    .o-w-preserve-btn();
+    .o-w-preserve-forms();
+
     .o-position-absolute(@odoo-navbar-height, 0, 0);
     position: fixed;
     z-index: 1001;

Original file line number	Diff line number	Diff line change
`@@ -1145,7 +1145,7 @@ var LinkDialog = Dialog.extend({`
`1145`	`1145`	`$preview.attr("target", new_window ? '_blank' : "")`
`1146`	`1146`	`.attr("href", url && url.length ? url : "#")`
`1147`	`1147`	`.html((label && label.length ? label : url))`
`1148`		`- .attr("class", classes.replace(/pull-\w+/, ''));`
	`1148`	`+ .attr("class", classes.replace(/pull-\w+/, '') + " o_btn_preview");`
`1149`	`1149`	`});`
`1150`	`1150`	`}`
`1151`	`1151`	`});`