[MERGE] forward port branch 10.0 up to 91a1448

2 files changed, 67 insertions, 5 deletions

diff --git a/addons/web_editor/static/src/less/web_editor.ui.components.less b/addons/web_editor/static/src/less/web_editor.ui.components.less
index 31d2ce07dac..7dd882ffbd0 100644
--- a/addons/web_editor/static/src/less/web_editor.ui.components.less
+++ b/addons/web_editor/static/src/less/web_editor.ui.components.less
@@ -119,6 +119,63 @@
     .o-animation(fadeInDownSmall, 700ms, @fill-mode: forwards);
 }
 
+// ACE EDITOR
+.o_ace_view_editor {
+    @o-ace-color: #2F3129;
+    background: @o-ace-color;
+    color: white;
+    .o-flex-display();
+    .o-flex-flow(column, nowrap);
+
+    .o_ace_view_editor_title {
+        .o-flex(0, 0, auto);
+        .o-flex-display();
+        .o-align-items(center);
+        .o-justify-content(space-between);
+        padding: @grid-gutter-width/4;
+
+        > * {
+            .o-flex(0, 0, auto);
+            margin: 0 @grid-gutter-width/4;
+
+            &.oe_include_bundles {
+                .o-flex-display();
+                .o-align-items(center);
+                font-size: 11px;
+
+                > .o_checkbox {
+                    margin-right: @grid-gutter-width/4;
+                }
+            }
+        }
+
+        > select {
+            .o-flex(0, 1, auto);
+            min-width: 60px;
+        }
+    }
+    #ace-view-id {
+        .o-flex(0, 0, auto);
+        padding: @grid-gutter-width/4 @grid-gutter-width/2;
+        background-color: lighten(@o-ace-color, 10%);
+    }
+    #ace-view-editor {
+        height: 70%; // in case flex is not supported
+        .o-flex(1, 1, auto);
+        .ace_gutter {
+            cursor: ew-resize;
+        }
+    }
+
+    &.oe_ace_open {
+        opacity: 0.97;
+    }
+    &.oe_ace_closed {
+        z-index: -1000;
+        opacity: 0;
+    }
+}
+
 // MODALS
 body .modal {
     // SELECT MEDIA
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 00b6414bd16..4f1eb7dc4be 100644
--- a/addons/web_editor/static/src/less/web_editor.ui.less
+++ b/addons/web_editor/static/src/less/web_editor.ui.less
@@ -70,12 +70,17 @@
     margin: 10px;
     padding: 4px;
 }
-html[lang] > body.editor_enable{
-    [data-oe-translation-state] {
-        background: rgba(255, 255, 90, 0.5) !important;
+html[lang] > body.editor_enable [data-oe-translation-state] {
+    @o-color-content-to-translate: rgb(255, 255, 90);
+    @o-color-translated-content: rgb(120, 215, 110);
+
+    background: fade(@o-color-content-to-translate, 50%)!important;
+
+    &[data-oe-translation-state="translated"] {
+        background: fade(@o-color-translated-content, 50%)!important;
     }
-    [data-oe-translation-state="translated"] {
-        background: rgba(120, 215, 110, 0.5) !important;
+    &.o_dirty {
+        background: fade(@o-color-translated-content, 25%)!important;
     }
 }