[IMP] website: create a new web editor in the backend to edit html field with the website builder

7 files changed, 217 insertions, 112 deletions

diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index fd61c5ed187..8ec49889863 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -178,11 +178,37 @@
 .oe_structure.oe_empty:empty, [data-oe-type=html]:empty, .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child {
   background-image: url("/website/static/src/img/edit_here.png") !important;
 }
-
 .oe_structure.oe_empty:empty:before, [data-oe-type=html]:empty:before, .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child:before, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child:before {
   content: "Press The Top-Left Edit Button" !important;
 }
 
+.o_editable.oe_structure.oe_empty > p:empty:only-child, .o_editable[data-oe-type=html] > p:empty:only-child {
+  color: #aaa;
+}
+.o_editable.oe_structure.oe_empty:empty, .o_editable[data-oe-type=html]:empty, .o_editable.oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, .o_editable[data-oe-type=html] > .oe_drop_zone.oe_insert:only-child, .o_editable.oe_structure.oe_empty > p:empty:only-child, .o_editable[data-oe-type=html] > p:empty:only-child {
+  background-image: none !important;
+}
+.o_editable.oe_structure.oe_empty:empty:before, .o_editable[data-oe-type=html]:empty:before, .o_editable.oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child:before, .o_editable[data-oe-type=html] > .oe_drop_zone.oe_insert:only-child:before, .o_editable.oe_structure.oe_empty > p:empty:only-child:before, .o_editable[data-oe-type=html] > p:empty:only-child:before {
+  content: "Write your text here" !important;
+}
+.o_editable.oe_structure.oe_empty:empty:focus:before, .o_editable[data-oe-type=html]:empty:focus:before, .o_editable.oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child:focus:before, .o_editable[data-oe-type=html] > .oe_drop_zone.oe_insert:only-child:focus:before, .o_editable.oe_structure.oe_empty > p:empty:only-child:focus:before, .o_editable[data-oe-type=html] > p:empty:only-child:focus:before {
+  display: none;
+}
+
+#oe_snippets ~ #wrapwrap .oe_structure.oe_empty:empty, #oe_snippets ~ #wrapwrap [data-oe-type=html]:empty, #oe_snippets ~ #wrapwrap .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, #oe_snippets ~ #wrapwrap [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child {
+  background-image: url("/website/static/src/img/drag_here.png") !important;
+}
+#oe_snippets ~ #wrapwrap .oe_structure.oe_empty:empty:before, #oe_snippets ~ #wrapwrap [data-oe-type=html]:empty:before, #oe_snippets ~ #wrapwrap .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child:before, #oe_snippets ~ #wrapwrap [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child:before {
+  content: "Drag Building Blocks Here" !important;
+}
+
+.oe_structure.oe_empty:empty, [data-oe-type=html]:empty, .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child {
+  background-image: none;
+  background-repeat: no-repeat;
+  background-position: center;
+  height: 220px !important;
+}
+
 [data-oe-type=html].oe_no_empty:empty:before {
   content: "" !important;
 }
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index 2ab71dbf5b7..9110b4454cd 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -148,12 +148,33 @@
 
 .o_editable .media_iframe_video .css_editable_mode_display
     display: block !important
-
+ 
 .oe_structure.oe_empty:empty, [data-oe-type=html]:empty, .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child
     background-image: url('/website/static/src/img/edit_here.png') !important
+    &:before
+        content: 'Press The Top-Left Edit Button' !important
+
+.o_editable
+    &.oe_structure.oe_empty > p:empty:only-child, &[data-oe-type=html] > p:empty:only-child
+        color: #aaa
+    &.oe_structure.oe_empty:empty, &[data-oe-type=html]:empty, &.oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, &[data-oe-type=html] > .oe_drop_zone.oe_insert:only-child, &.oe_structure.oe_empty > p:empty:only-child, &[data-oe-type=html] > p:empty:only-child
+        background-image: none !important
+        &:before
+            content: 'Write your text here' !important
+        &:focus:before
+            display: none
+
+#oe_snippets ~ #wrapwrap
+    .oe_structure.oe_empty:empty, [data-oe-type=html]:empty, .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child
+        background-image: url('/website/static/src/img/drag_here.png') !important
+        &:before
+            content: 'Drag Building Blocks Here' !important
 
-.oe_structure.oe_empty:empty:before, [data-oe-type=html]:empty:before, .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child:before, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child:before
-    content: 'Press The Top-Left Edit Button' !important
+.oe_structure.oe_empty:empty, [data-oe-type=html]:empty, .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child
+    background-image: none
+    background-repeat: no-repeat
+    background-position: center
+    height: 220px !important
 
 [data-oe-type=html].oe_no_empty:empty:before
     content: '' !important
diff --git a/addons/website/static/src/css/snippets.css b/addons/website/static/src/css/snippets.css
index ed1362ec439..4d3f2c6c5ff 100644
--- a/addons/website/static/src/css/snippets.css
+++ b/addons/website/static/src/css/snippets.css
@@ -1,25 +1,24 @@
 /* ---- SNIPPET EDITOR ---- {{{ */
-#oe_snippets .scroll, #oe_snippets .o_arrow {
+#oe_snippets #o_left_bar, #oe_snippets #o_arrow {
   position: fixed;
   top: 34px;
   left: 0px;
   bottom: 0;
-  padding-top: 10px;
   background: #282828;
   -moz-box-shadow: 0px 10px 10px -10px black inset;
   -webkit-box-shadow: 0px 10px 10px -10px black inset;
   box-shadow: 0px 10px 10px -10px black inset;
 }
-#oe_snippets .o_arrow {
+#oe_snippets #o_arrow {
   z-index: 1009;
   width: 24px;
   opacity: 0.75;
 }
-#oe_snippets .o_arrow > * {
+#oe_snippets #o_arrow > * {
   position: absolute;
   color: white;
 }
-#oe_snippets .o_arrow div {
+#oe_snippets #o_arrow div {
   -moz-transform: translateX(-36%) rotate(-90deg);
   -ms-transform: translateX(-36%) rotate(-90deg);
   -webkit-transform: translateX(-36%) rotate(-90deg);
@@ -27,61 +26,70 @@
   top: 50%;
   white-space: nowrap;
 }
-#oe_snippets .o_arrow .fa {
+#oe_snippets #o_arrow .fa {
   width: 100%;
   left: 40%;
 }
-#oe_snippets .scroll {
-  left: -220px;
+#oe_snippets #o_left_bar {
+  left: -228px;
   z-index: 1010;
-  width: 200px;
+  width: 208px;
   -moz-transition: all 500ms ease;
   -o-transition: all 500ms ease;
   -webkit-transition: all 500ms ease;
   transition: all 500ms ease;
 }
-#oe_snippets.o_open .scroll {
-  left: 0;
+#oe_snippets #o_left_bar ul {
+  text-align: center;
+  margin: 0;
+  padding: 6px 0;
+  list-style-type: none;
 }
-#oe_snippets .nav {
-  float: none;
-  border-bottom: none !important;
-  margin-bottom: 6px;
+#oe_snippets #o_left_bar ul li {
+  display: inline-block;
+  padding: 0 3px;
 }
-#oe_snippets .nav > li {
-  display: block;
-  float: none;
+#oe_snippets #o_left_bar ul li a {
+  color: #aaa;
 }
-#oe_snippets .nav > li.active {
-  background: black !important;
+#oe_snippets #o_left_bar ul li .fa-stack {
+  overflow: hidden;
 }
-#oe_snippets .nav > li > a {
-  padding: 2px 10px !important;
-  width: 100%;
-  display: block;
-  border-radius: 4px;
-  border: 0;
+#oe_snippets #o_left_bar ul li.active a.fa, #oe_snippets #o_left_bar ul li.active .fa-stack-1x {
+  color: #428bca;
 }
-#oe_snippets .nav > li span {
-  font-size: 0.8em;
+#oe_snippets.o_open #o_left_bar {
+  left: 0;
 }
-#oe_snippets .pill-content {
+#oe_snippets .o_panel {
+  margin: 0;
   border: 0;
+  width: 208px;
 }
-#oe_snippets .tab-content {
+#oe_snippets .o_panel_header {
+  background: #dff0d8;
+  padding: 1px 8px;
+  color: #414141;
+  text-align: center;
+}
+#oe_snippets .o_panel_header .fa-stack {
+  overflow: hidden;
+  font-size: 1em;
+}
+#oe_snippets .o_panel_body {
   white-space: normal;
   background: black;
-  margin-left: 3px;
+  padding: 7px 3px;
 }
-#oe_snippets .tab-content > div {
+#oe_snippets .o_panel_body > div {
   background: black;
 }
-#oe_snippets .tab-content > div label {
+#oe_snippets .o_panel_body > div label {
   width: 44px;
   color: #fff;
   padding-left: 10px;
 }
-#oe_snippets .tab-content > div label div {
+#oe_snippets .o_panel_body > div label div {
   width: 100px;
   text-align: center;
   -moz-transform: translate(-39px, 44px);
@@ -97,8 +105,9 @@
   display: inline-block;
   vertical-align: top;
   width: 93px;
-  margin-left: 1px;
-  margin-top: 0px;
+  margin-left: 3px;
+  margin-right: 3px;
+  margin-top: 1px;
   position: relative;
   overflow: hidden;
   -moz-user-select: -moz-none;
diff --git a/addons/website/static/src/css/snippets.sass b/addons/website/static/src/css/snippets.sass
index d4a71e34f6d..62a3040c19c 100644
--- a/addons/website/static/src/css/snippets.sass
+++ b/addons/website/static/src/css/snippets.sass
@@ -6,15 +6,14 @@
 /* ---- SNIPPET EDITOR ---- {{{ */
 
 #oe_snippets
-    .scroll, .o_arrow
+    #o_left_bar, #o_arrow
         position: fixed
         top: 34px
         left: 0px
         bottom: 0
-        padding-top: 10px
         background: rgb(40,40,40)
         +box-shadow(0px 10px 10px -10px black inset)
-    .o_arrow
+    #o_arrow
         z-index: 1009
         width: 24px
         opacity: 0.75
@@ -28,36 +27,44 @@
         .fa
             width: 100%
             left: 40%
-    .scroll
-        left:  -220px
+    #o_left_bar
+        left:  -228px
         z-index: 1010
-        width: 200px
+        width: 208px
         @include transition(all 500ms ease)
-    &.o_open .scroll
+        ul
+            text-align: center
+            margin: 0
+            padding: 6px 0
+            list-style-type: none
+            li
+                display: inline-block
+                padding: 0 3px
+                a
+                    color: #aaa
+                .fa-stack
+                    overflow: hidden
+            li.active a.fa, li.active .fa-stack-1x
+                color: #428bca
+
+    &.o_open #o_left_bar
         left: 0
-    .nav
-        float: none
-        border-bottom: none !important
-        margin-bottom: 6px
-        > li
-            display: block
-            float: none
-            &.active
-                background: black !important
-            > a
-                padding: 2px 10px !important
-                width: 100%
-                display: block
-                border-radius: 4px
-                border: 0
-            span
-                font-size: 0.8em
-    .pill-content
+    .o_panel
+        margin: 0
         border: 0
-    .tab-content
+        width: 208px
+    .o_panel_header
+        background: #dff0d8
+        padding: 1px 8px
+        color: #414141
+        text-align: center
+        .fa-stack
+            overflow: hidden
+            font-size: 1em
+    .o_panel_body
         white-space: normal
         background: black
-        margin-left: 3px
+        padding: 7px 3px
         > div
             background: rgb(0,0,0)
             label
@@ -75,8 +82,9 @@
     display: inline-block
     vertical-align: top
     width: 93px
-    margin-left: 1px
-    margin-top: 0px
+    margin-left: 3px
+    margin-right: 3px
+    margin-top: 1px
     position: relative
     overflow: hidden
     +user-select(none)
diff --git a/addons/website/static/src/css/website.backend.css b/addons/website/static/src/css/website.backend.css
index 926d66cf799..63870368a39 100644
--- a/addons/website/static/src/css/website.backend.css
+++ b/addons/website/static/src/css/website.backend.css
@@ -3,4 +3,32 @@
 }
 .oe_WidgetWebsiteButton.success .oe_unpublish {
     display: none;
+}
+.oe_form_field_html iframe {
+    display: block;
+    width: 100%;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    min-height: 300px;
+}
+.o_form_FieldTextHtml_fullscreen .oe_form_field_html iframe {
+    position: absolute !important;
+    left: 0 !important;
+    right: 0 !important;
+    top: 0px !important;
+    bottom: 0 !important;
+    width: 100% !important;
+    z-index: 1001 !important;
+    border: 0;
+}
+.o_form_FieldTextHtml_fullscreen .modal .oe_form_field_html iframe {
+    top: 0 !important;
+}
+.o_form_FieldTextHtml_fullscreen .oe_webclient *, .o_form_FieldTextHtml_fullscreen .modal * {
+    position: static !important;
+    top: 0 !important;
+    left: 0 !important;
+    overflow: visible !important;
+    width: auto !important;
 }
\ No newline at end of file
diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css
index f01a5fce09c..b04a3e13f4c 100644
--- a/addons/website/static/src/css/website.css
+++ b/addons/website/static/src/css/website.css
@@ -105,6 +105,30 @@ div.media_iframe_video.padding-xl iframe {
   padding: 32px;
 }
 
+.fa-6x {
+  font-size: 6em;
+}
+
+.fa-7x {
+  font-size: 7em;
+}
+
+.fa-8x {
+  font-size: 8em;
+}
+
+.fa-9x {
+  font-size: 9em;
+}
+
+.fa-10x {
+  font-size: 10em;
+}
+
+.fa.center-block {
+  text-align: center;
+}
+
 ul {
   list-style-type: disc;
 }
@@ -221,8 +245,8 @@ table.table {
   table-layout: fixed;
 }
 
-#wrapwrap p:empty:after {
-  content: "⁠";
+td {
+  min-width: 20px;
 }
 
 /* ----- Editor (for public user, like forum) ----- */
@@ -230,6 +254,10 @@ table.table {
   margin-left: 0 !important;
 }
 
+.note-popover .popover > .arrow {
+  display: none;
+}
+
 /* ----- Snippets Styles ----- */
 .para_large {
   font-size: 120%;
@@ -309,18 +337,7 @@ nav.navbar + #wrapwrap {
     width: 100%;
   }
 }
-/* ---- HACK FOR COVERING UP CK EDITOR BOGUS P INSERTION --- */
-.oe_structure.oe_editable.oe_empty:empty, .oe_editable[data-oe-type=html]:empty, .oe_structure.oe_editable.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child {
-  background-image: url("/website/static/src/img/drag_here.png") !important;
-}
-
-.oe_structure.oe_empty:empty, [data-oe-type=html]:empty, .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child {
-  background-image: none;
-  background-repeat: no-repeat;
-  background-position: center;
-  height: 220px !important;
-}
-
+/* ---- HACK FOR COVERING UP EDITOR BOGUS P INSERTION --- */
 .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child {
   position: static;
 }
@@ -329,21 +346,17 @@ nav.navbar + #wrapwrap {
   content: " ";
   text-align: center;
   display: block;
-  padding-top: 160px;
-  padding-bottom: 30px;
+  min-height: 1em;
   color: grey;
   font-size: 24px;
-}
-
-.oe_structure.oe_editable.oe_empty:empty:before, .oe_editable[data-oe-type=html]:empty:before, .oe_structure.oe_editable.oe_empty > .oe_drop_zone.oe_insert:only-child:before, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child:before {
-  content: "Drag Building Blocks Here" !important;
+  padding-top: 160px;
 }
 
 .css_editable_display {
   display: none;
 }
 
-/* ---- HACK FOR COVERING UP CK EDITOR BOGUS P INSERTION --- */
+/* ---- HACK FOR COVERING UP EDITOR BOGUS P INSERTION --- */
 .navbar .nav > li > p {
   margin-bottom: 0px;
 }
diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass
index ce880e0139b..1da84f5192d 100644
--- a/addons/website/static/src/css/website.sass
+++ b/addons/website/static/src/css/website.sass
@@ -70,6 +70,19 @@ div.media_iframe_video
     &.padding-xl iframe
         padding: 32px
 
+.fa-6x
+    font-size: 6em
+.fa-7x
+    font-size: 7em
+.fa-8x
+    font-size: 8em
+.fa-9x
+    font-size: 9em
+.fa-10x
+    font-size: 10em
+.fa.center-block
+    text-align: center
+
 ul
     list-style-type: disc
 li > ul
@@ -148,17 +161,17 @@ hr
 table.table
     table-layout: fixed
 
-// add {WORD JOINER} (equivalent to deprecated ZERO WIDTH NO-BREAK SPACE) at
-// the beginning of paragraphs so they don't "disappear" after saving when
-// used solely for spacing.
-#wrapwrap p:empty:after
-    content: '\2060'
+td
+    min-width: 20px
 
 /* ----- Editor (for public user, like forum) ----- */
 
 .note-toolbar
     margin-left: 0 !important
 
+.note-popover .popover > .arrow
+    display: none
+
 /* ----- Snippets Styles ----- */
 
 .para_large
@@ -227,17 +240,7 @@ nav.navbar + #wrapwrap
     .table .img-responsive
         width: 100%
 
-/* ---- HACK FOR COVERING UP CK EDITOR BOGUS P INSERTION --- */
-
-.oe_structure.oe_editable.oe_empty:empty, .oe_editable[data-oe-type=html]:empty, .oe_structure.oe_editable.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child
-    background-image: url('/website/static/src/img/drag_here.png') !important
-
-.oe_structure.oe_empty:empty, [data-oe-type=html]:empty, .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child
-    background-image: none
-    background-repeat: no-repeat
-    background-position: center
-    height: 220px !important
-
+/* ---- HACK FOR COVERING UP EDITOR BOGUS P INSERTION --- */
 .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child
     position: static
 
@@ -245,18 +248,15 @@ nav.navbar + #wrapwrap
     content: ' '
     text-align: center
     display: block
-    padding-top: 160px
-    padding-bottom: 30px
+    min-height: 1em
     color: grey
     font-size: 24px
-
-.oe_structure.oe_editable.oe_empty:empty:before, .oe_editable[data-oe-type=html]:empty:before, .oe_structure.oe_editable.oe_empty > .oe_drop_zone.oe_insert:only-child:before, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child:before
-    content: 'Drag Building Blocks Here' !important
+    padding-top: 160px
 
 .css_editable_display
     display: none
 
-/* ---- HACK FOR COVERING UP CK EDITOR BOGUS P INSERTION --- */
+/* ---- HACK FOR COVERING UP EDITOR BOGUS P INSERTION --- */
 
 .navbar .nav > li > p
     margin-bottom: 0px