[IMP] web_editor: split website into web_editor (to use editor in backend for html field) and website

7 files changed, 1468 insertions, 0 deletions

diff --git a/addons/web_editor/static/src/css/backend.css b/addons/web_editor/static/src/css/backend.css
new file mode 100644
index 00000000000..decaed2d593
--- /dev/null
+++ b/addons/web_editor/static/src/css/backend.css
@@ -0,0 +1,73 @@
+.oe_form_field_html_text .note-editable {
+    min-height: 180px;
+    font: initial !important;
+    line-height: initial !important;
+    color: initial !important;
+}
+.oe_form_field_html_text .note-editable p {
+    margin: initial;
+}
+.oe_form_field_html_text .note-editable a, .oe_form_field_html_text .note-editable a:hover {
+    color: initial;
+}
+
+.oe_form_field_html iframe {
+    display: block;
+    width: 100%;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    min-height: 300px;
+    min-height: -webkit-calc(100vh - 170px);
+    min-height: calc(100vh - 170px);
+}
+.o_form_FieldTextHtml_fullscreen .oe_form_field_html.o_form_fullscreen_ancestor iframe {
+    position: absolute !important;
+    left: 0 !important;
+    right: 0 !important;
+    top: 0 !important;
+    bottom: 0 !important;
+    width: 100% !important;
+    min-height: 100% !important;
+    z-index: 1001 !important;
+    border: 0;
+}
+
+.o_form_FieldTextHtml_fullscreen * {
+    display: none;
+}
+.o_form_FieldTextHtml_fullscreen .o_form_fullscreen_ancestor {
+    display: block !important;
+    position: static !important;
+    top: 0 !important;
+    left: 0 !important;
+    overflow: visible !important;
+    width: auto !important;
+    overflow: hidden !important;
+}
+
+
+.openerp .oe_form .oe_form_field_html_translate textarea {
+    min-width: 60px;
+    width: 100%;
+    color: #4c4c4c;
+    font: normal 13px "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
+}
+.openerp .oe_form_readonly .oe_form .oe_form_field_html_translate textarea {
+    border:0;
+    background: #fff;
+}
+.openerp .oe_form_editable .oe_form .oe_form_field_html_translate > button {
+    float: right;
+    margin: -6px -3px 0 0;
+}
+.openerp .oe_form_editable .oe_form .oe_form_field_html_translate > .note-editable {
+    border: 1px solid #ccc;
+    min-height: 22px;
+    border-radius: 3px;
+}
+.openerp .oe_form_editable .oe_form .oe_form_field_html_translate .note-editable [contentEditable='true']:hover {
+    -moz-box-shadow: #DDCC33 0 0 5px 2px inset;
+    -webkit-box-shadow: #DDCC33 0 0 5px 2px inset;
+    box-shadow: #DDCC33 0 0 5px 2px inset;
+}
\ No newline at end of file
diff --git a/addons/web_editor/static/src/css/common.sass b/addons/web_editor/static/src/css/common.sass
new file mode 100644
index 00000000000..264f0166c49
--- /dev/null
+++ b/addons/web_editor/static/src/css/common.sass
@@ -0,0 +1,4 @@
+@import "compass/css3"
+@import "compass/css3/user-interface"
+@import "compass/css3/transition"
+@import "compass/support"
diff --git a/addons/web_editor/static/src/css/inline.css b/addons/web_editor/static/src/css/inline.css
new file mode 100644
index 00000000000..61e995fa3fa
--- /dev/null
+++ b/addons/web_editor/static/src/css/inline.css
@@ -0,0 +1,64 @@
+body {
+    background-color: #fff;
+}
+#editable_area p {
+    margin: initial;
+}
+#editable_area a {
+    color: inherit;
+}
+#editable_area a:hover {
+    color: inherit;
+}
+#editable_area {
+    margin-top: 0 !important;
+    font: inherit !important;
+    line-height: inherit !important;
+    color: inherit !important;
+}
+#oe_snippets ~ #wrapwrap #editable_area {
+    margin-bottom: 100px;
+}
+
+#wrapwrap > main > div:first-child {
+    max-width: 600px;
+    margin-left: auto;
+    margin-right: auto;
+    position: relative;
+}
+
+.editor_enable #wrapwrap > main > div:first-child {
+    border-top: 1px dashed #888;
+    margin-top: 50px;
+}
+
+.editor_enable #wrapwrap > main > div:first-child:before, #wrapwrap > main > div:first-child:after {
+    content: " ";
+    display: block;
+    height: 100%;
+    vertical-align: top;
+    position: fixed;
+    top: -4px;
+    overflow: hidden;
+    z-index: -1;
+    margin-top: 54px;
+}
+.editor_enable #wrapwrap > main > div:first-child[data-oe-placeholder]:empty:before {
+    content: " \00a0 " attr(data-oe-placeholder);
+}
+
+.editor_enable #wrapwrap > main > div:first-child:before {
+    border-left: 1px dashed #000;
+    opacity: 0.4;
+    margin-left: -5px;
+}
+.editor_enable #wrapwrap > main > div:first-child:after {
+    border-left: 1px dashed #000;
+    opacity: 0.4;
+    margin-left: 605px;
+    width: 0;
+}
+
+.note-color-palette .colorpicker {
+    display: none;
+}
diff --git a/addons/web_editor/static/src/css/snippets.css b/addons/web_editor/static/src/css/snippets.css
new file mode 100644
index 00000000000..ca2ba0c6deb
--- /dev/null
+++ b/addons/web_editor/static/src/css/snippets.css
@@ -0,0 +1,490 @@
+/* ---- SNIPPET EDITOR ---- {{{ */
+#oe_snippets #o_left_bar, #oe_snippets #o_arrow {
+  position: fixed;
+  top: 34px;
+  left: 0px;
+  bottom: 0;
+  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 {
+  z-index: 1009;
+  width: 24px;
+  opacity: 0.75;
+}
+#oe_snippets #o_arrow > * {
+  position: absolute;
+  color: white;
+}
+#oe_snippets #o_arrow div {
+  -moz-transform: translateX(-36%) rotate(-90deg);
+  -ms-transform: translateX(-36%) rotate(-90deg);
+  -webkit-transform: translateX(-36%) rotate(-90deg);
+  transform: translateX(-36%) rotate(-90deg);
+  top: 50%;
+  white-space: nowrap;
+}
+#oe_snippets #o_arrow .fa {
+  width: 100%;
+  left: 40%;
+}
+#oe_snippets #o_left_bar {
+  left: -228px;
+  z-index: 1010;
+  width: 208px;
+  -moz-transition: all 500ms ease;
+  -o-transition: all 500ms ease;
+  -webkit-transition: all 500ms ease;
+  transition: all 500ms ease;
+}
+#oe_snippets #o_left_bar ul {
+  text-align: center;
+  margin: 0;
+  padding: 6px 0;
+  list-style-type: none;
+}
+#oe_snippets #o_left_bar ul li {
+  display: inline-block;
+  padding: 0 3px;
+}
+#oe_snippets #o_left_bar ul li a {
+  color: #aaa;
+}
+#oe_snippets #o_left_bar ul li .fa-stack {
+  overflow: hidden;
+}
+#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.o_open #o_left_bar {
+  left: 0;
+}
+#oe_snippets .o_panel {
+  margin: 0;
+  border: 0;
+  width: 208px;
+}
+#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;
+  padding: 7px 3px;
+}
+#oe_snippets .o_panel_body > div {
+  background: black;
+}
+#oe_snippets .o_panel_body > div label {
+  width: 44px;
+  color: #fff;
+  padding-left: 10px;
+}
+#oe_snippets .o_panel_body > div label div {
+  width: 100px;
+  text-align: center;
+  -moz-transform: translate(-39px, 44px);
+  -webkit-transform: translate(-39px, 44px);
+  transform: translate(-39px, 44px);
+  -moz-transform-origin: 50% 50%;
+  -ms-transform-origin: 50% 50%;
+  -webkit-transform-origin: 50% 50%;
+  transform-origin: 50% 50%;
+}
+
+.oe_snippet {
+  display: inline-block;
+  vertical-align: top;
+  width: 93px;
+  margin-left: 3px;
+  margin-right: 3px;
+  margin-top: 1px;
+  position: relative;
+  overflow: hidden;
+  -moz-user-select: -moz-none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+  cursor: move;
+}
+.oe_snippet .oe_snippet_thumbnail {
+  text-align: center;
+  height: 100%;
+  background: transparent;
+  color: white;
+  position: relative;
+}
+.oe_snippet .oe_snippet_thumbnail:hover .oe_snippet_thumbnail_img {
+  -moz-transform: scale(0.95, 0.95);
+  -ms-transform: scale(0.95, 0.95);
+  -webkit-transform: scale(0.95, 0.95);
+  transform: scale(0.95, 0.95);
+}
+.oe_snippet .oe_snippet_thumbnail .oe_snippet_thumbnail_title {
+  font-size: 12px;
+  display: block;
+  text-shadow: 0 0 2px black;
+}
+.oe_snippet .oe_snippet_thumbnail .oe_snippet_thumbnail_img {
+  height: 74px;
+  width: 92px;
+  background-size: cover;
+  -moz-transform: scale(1, 1);
+  -ms-transform: scale(1, 1);
+  -webkit-transform: scale(1, 1);
+  transform: scale(1, 1);
+}
+.oe_snippet .oe_snippet_thumbnail span, .oe_snippet .oe_snippet_thumbnail div {
+  line-height: 18px;
+}
+.oe_snippet > :not(.oe_snippet_thumbnail) {
+  display: none !important;
+}
+.oe_snippet.disable .oe_snippet_thumbnail {
+  background-color: rgba(255, 0, 0, 0.75);
+}
+.oe_snippet.disable .oe_snippet_thumbnail_img {
+  opacity: 0.8;
+}
+
+#oe_snippets .oe_snippet_thumbnail {
+  background: #747474, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjI1Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuNCIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+  background: #747474, -moz-radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4));
+  background: #747474, -webkit-radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4));
+  background: #747474, radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4));
+}
+
+/* ---- SNIPPETS DROP ZONES ---- {{{ */
+.oe_drop_zone.oe_insert {
+  display: block;
+  height: 48px;
+  margin: 0px;
+  margin-top: -4px;
+  margin-bottom: -44px;
+  -moz-transition: margin 250ms linear;
+  -o-transition: margin 250ms linear;
+  -webkit-transition: margin 250ms linear;
+  transition: margin 250ms linear;
+  width: 100%;
+  position: absolute;
+  z-index: 1000;
+}
+.oe_drop_zone.oe_insert:not(.oe_vertical):before {
+  content: "";
+  display: block;
+  border-top: dashed 2px rgba(209, 178, 255, 0.72);
+  position: relative;
+  top: 0px;
+}
+.oe_drop_zone.oe_insert.oe_hover:before {
+  border-top: dashed 2px rgba(116, 255, 161, 0.72);
+}
+.oe_drop_zone.oe_insert.oe_vertical {
+  width: 48px;
+  float: left;
+  position: relative;
+  margin: 0px -24px !important;
+}
+.oe_drop_zone.oe_insert.oe_vertical_text {
+  width: 48px;
+  float: none;
+  display: inline-block;
+  position: relative;
+  margin: 0px -24px !important;
+}
+.oe_drop_zone.oe_insert.oe_overlay {
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  background: rgba(153, 0, 255, 0.5);
+}
+
+.oe_drop_zone, .oe_drop_zone_style {
+  border: none;
+  background: rgba(153, 0, 255, 0.3);
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
+}
+.oe_drop_zone.oe_hover, .oe_drop_zone_style.oe_hover {
+  background: rgba(0, 255, 133, 0.3);
+  z-index: 1001;
+}
+
+.oe_drop_zone_style {
+  color: white;
+  height: 48px;
+  margin-bottom: 32px;
+  padding-top: 12px;
+}
+
+/* ---- SNIPPET MANIPULATOR ----  {{{ */
+.resize_editor_busy {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+.oe_overlay {
+  display: none;
+  height: 0;
+  position: absolute;
+  background: transparent;
+  z-index: 1001;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  -moz-transition: opacity 100ms linear;
+  -o-transition: opacity 100ms linear;
+  -webkit-transition: opacity 100ms linear;
+  transition: opacity 100ms linear;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.oe_overlay.oe_active {
+  display: block;
+}
+.oe_overlay .oe_handle {
+  display: block !important;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 16px;
+  height: 16px;
+  margin: -2px;
+}
+.oe_overlay .oe_handle > div {
+  z-index: 1;
+  position: absolute;
+  border-style: dashed;
+  border-width: 1px;
+  border-color: #666666;
+  -moz-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.5), 0px 0px 0px 1px rgba(255, 255, 255, 0.5) inset;
+  -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.5), 0px 0px 0px 1px rgba(255, 255, 255, 0.5) inset;
+  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.5), 0px 0px 0px 1px rgba(255, 255, 255, 0.5) inset;
+}
+.oe_overlay .oe_handle.e:before, .oe_overlay .oe_handle.w:before, .oe_overlay .oe_handle.s:before, .oe_overlay .oe_handle.n:before, .oe_overlay .oe_handle.size .oe_handle_button {
+  z-index: 2;
+  position: relative;
+  top: 50%;
+  left: 50%;
+  display: block;
+  background: white;
+  border: solid 1px rgba(0, 0, 0, 0.2);
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+  width: 18px;
+  height: 18px;
+  margin: -9px;
+  padding-left: 1px;
+  font-size: 14px;
+  line-height: 14px;
+  font-family: FontAwesome;
+  color: rgba(0, 0, 0, 0.5);
+  -moz-transition: background 100ms linear;
+  -o-transition: background 100ms linear;
+  -webkit-transition: background 100ms linear;
+  transition: background 100ms linear;
+}
+.oe_overlay .oe_handle.e:hover:before, .oe_overlay .oe_handle.w:hover:before, .oe_overlay .oe_handle.s:hover:before, .oe_overlay .oe_handle.n:hover:before {
+  background: rgba(0, 0, 0, 0.5);
+  color: #fff;
+  -moz-box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
+  -webkit-box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
+  box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
+}
+.oe_overlay .oe_handle.e, .oe_overlay .oe_handle.w {
+  top: 4px;
+  height: 100%;
+}
+.oe_overlay .oe_handle.e:before, .oe_overlay .oe_handle.w:before {
+  content: "";
+  line-height: 16px;
+}
+.oe_overlay .oe_handle.e > div, .oe_overlay .oe_handle.w > div {
+  width: 0;
+  height: 100%;
+  top: 2px;
+  left: 8px;
+}
+.oe_overlay .oe_handle.e {
+  left: auto;
+  right: -6px;
+  cursor: w-resize;
+}
+.oe_overlay .oe_handle.w {
+  left: -6px;
+  cursor: e-resize;
+}
+.oe_overlay .oe_handle.s, .oe_overlay .oe_handle.n {
+  left: 2px;
+  width: 100%;
+}
+.oe_overlay .oe_handle.s:before, .oe_overlay .oe_handle.n:before {
+  content: "";
+  text-align: center;
+  padding: 1px;
+}
+.oe_overlay .oe_handle.s > div, .oe_overlay .oe_handle.n > div {
+  width: 100%;
+  height: 0;
+  top: 7px;
+  left: 1px;
+}
+.oe_overlay .oe_handle.s {
+  top: auto;
+  cursor: n-resize;
+}
+.oe_overlay .oe_handle.n {
+  cursor: s-resize;
+}
+.oe_overlay .oe_handle.n > div {
+  top: 5px;
+}
+.oe_overlay .oe_handle.size {
+  z-index: 3;
+  top: auto;
+  left: 50%;
+  bottom: -6px;
+  margin-left: -50px;
+}
+.oe_overlay .oe_handle.size .oe_handle_button {
+  position: relative;
+  z-index: 3;
+  text-align: center;
+  margin-left: -52px;
+  margin-top: -10px;
+  left: 0px;
+}
+.oe_overlay .oe_handle.size .oe_handle_button:hover {
+  background: rgba(30, 30, 30, 0.8);
+  color: #fff;
+  -moz-box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
+  -webkit-box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
+  box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
+}
+.oe_overlay .oe_handle.size .size {
+  position: absolute;
+  width: 64px;
+  cursor: row-resize;
+  top: 9px;
+  margin-left: 52px;
+  padding: 0 5px;
+}
+.oe_overlay .oe_handle.size .auto_size {
+  position: absolute;
+  width: 100px;
+  top: 9px;
+  cursor: pointer;
+}
+.oe_overlay .oe_handle.readonly {
+  cursor: auto !important;
+}
+.oe_overlay .oe_handle.readonly:before, .oe_overlay .oe_handle.readonly.size {
+  display: none !important;
+}
+.oe_overlay .icon.btn {
+  display: inline-block;
+}
+.oe_overlay .oe_overlay_options {
+  position: absolute;
+  left: 50% !important;
+  text-align: center;
+  top: -20px;
+  z-index: 1002;
+}
+.oe_overlay .oe_overlay_options > .btn-group {
+  left: -50%;
+  white-space: nowrap;
+}
+.oe_overlay .oe_overlay_options > .btn-group > a {
+  cursor: pointer;
+  display: inline-block;
+  float: none;
+  margin: 0 -3px;
+}
+.oe_overlay .oe_overlay_options > .btn-group > div {
+  float: left;
+}
+.oe_overlay .oe_overlay_options .btn, .oe_overlay .oe_overlay_options a {
+  cursor: pointer;
+}
+.oe_overlay .oe_overlay_options .dropdown {
+  display: inline-block;
+}
+.oe_overlay .oe_overlay_options .dropdown-menu {
+  text-align: left;
+  min-width: 180px;
+}
+.oe_overlay .oe_overlay_options .dropdown-menu select, .oe_overlay .oe_overlay_options .dropdown-menu input {
+  display: block;
+}
+.oe_overlay.block-w-left .w:before {
+  content: "" !important;
+}
+.oe_overlay.block-w-right .w:before {
+  content: "" !important;
+}
+.oe_overlay.block-w-left.block-w-right .w:before {
+  display: none !important;
+}
+.oe_overlay.block-e-left .e:before {
+  content: "" !important;
+}
+.oe_overlay.block-e-right .e:before {
+  content: "" !important;
+}
+.oe_overlay.block-e-left.block-e-right .e:before {
+  display: none !important;
+}
+.oe_overlay.block-s-top .s:before {
+  content: "" !important;
+}
+.oe_overlay.block-s-bottom .s:before {
+  content: "" !important;
+}
+.oe_overlay.block-n-top .n:before {
+  content: "" !important;
+}
+.oe_overlay.block-n-bottom .n:before {
+  content: "" !important;
+}
+.oe_overlay.o_keypress {
+  opacity: 0;
+  -webkit-transition: 0.8s;
+  -moz-transition: 0.8s;
+  -o-transition: 0.8s;
+  -transition: 0.8s;
+}
+
+.s-resize-important, .s-resize-important * {
+  cursor: s-resize !important;
+}
+
+.n-resize-important, .n-resize-important * {
+  cursor: n-resize !important;
+}
+
+.e-resize-important, .e-resize-important * {
+  cursor: e-resize !important;
+}
+
+.w-resize-important, .w-resize-important * {
+  cursor: w-resize !important;
+}
+
+.move-important, .move-important * {
+  cursor: move !important;
+}
\ No newline at end of file
diff --git a/addons/web_editor/static/src/css/snippets.sass b/addons/web_editor/static/src/css/snippets.sass
new file mode 100644
index 00000000000..752dabafc78
--- /dev/null
+++ b/addons/web_editor/static/src/css/snippets.sass
@@ -0,0 +1,376 @@
+@import "compass/css3"
+@import "compass/css3/user-interface"
+@import "compass/css3/transition"
+
+
+/* ---- SNIPPET EDITOR ---- {{{ */
+
+#oe_snippets
+    #o_left_bar, #o_arrow
+        position: fixed
+        top: 34px
+        left: 0px
+        bottom: 0
+        background: rgb(40,40,40)
+        +box-shadow(0px 10px 10px -10px black inset)
+    #o_arrow
+        z-index: 1009
+        width: 24px
+        opacity: 0.75
+        > *
+            position: absolute
+            color: white
+        div
+            @include transform( translateX(-36%) rotate(-90deg) )
+            top: 50%
+            white-space: nowrap
+        .fa
+            width: 100%
+            left: 40%
+    #o_left_bar
+        left:  -228px
+        z-index: 1010
+        width: 208px
+        @include transition(all 500ms ease)
+        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
+    .o_panel
+        margin: 0
+        border: 0
+        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
+        padding: 7px 3px
+        > div
+            background: rgb(0,0,0)
+            label
+                width: 44px
+                color: #fff
+                padding-left: 10px
+
+                div
+                    width: 100px
+                    text-align: center
+                    @include transform( translate(-39px, 44px) , rotate(-90deg) )
+                    @include transform-origin(50%)
+
+.oe_snippet
+    display: inline-block
+    vertical-align: top
+    width: 93px
+    margin-left: 3px
+    margin-right: 3px
+    margin-top: 1px
+    position: relative
+    overflow: hidden
+    +user-select(none)
+    cursor: move
+    .oe_snippet_thumbnail
+        text-align: center
+        height: 100%
+        background: transparent
+        color: white
+        position: relative
+        &:hover
+            .oe_snippet_thumbnail_img
+                @include transform( scale(.95,.95))
+        .oe_snippet_thumbnail_title
+            font-size: 12px
+            display: block
+            +text-shadow(0 0 2px rgb(0,0,0))
+        .oe_snippet_thumbnail_img
+            height: 74px
+            width: 92px
+            background-size: cover
+            @include transform( scale(1,1))
+        span, div
+            line-height: 18px
+    & > :not(.oe_snippet_thumbnail)
+        display: none !important
+    &.disable
+        .oe_snippet_thumbnail
+            background-color: rgba(255, 0, 0, 0.75)
+        .oe_snippet_thumbnail_img
+            opacity: 0.8
+#oe_snippets .oe_snippet_thumbnail
+    @include background(#747474, radial-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.4)))
+
+// }}}}
+
+/* ---- SNIPPETS DROP ZONES ---- {{{ */
+
+.oe_drop_zone.oe_insert
+    display: block
+    height: 48px
+    margin: 0px
+    margin-top: -4px
+    margin-bottom: -44px
+    @include transition(margin 250ms linear)
+    width: 100%
+    position: absolute
+    z-index: 1000
+    &:not(.oe_vertical):before
+        content: ""
+        display: block
+        border-top: dashed 2px rgba(209, 178, 255, 0.72)
+        position: relative
+        top: 0px
+    &.oe_hover:before
+        border-top: dashed 2px rgba(116, 255, 161, 0.72)
+    &.oe_vertical
+        width: 48px
+        float: left
+        position: relative
+        margin: 0px -24px !important
+    &.oe_vertical_text
+        width: 48px
+        float: none
+        display: inline-block
+        position: relative
+        margin: 0px -24px !important
+    &.oe_overlay
+        +border-radius(3px)
+        //@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.1) ,rgba(255,255,255,.1) 35px, rgba(0,0,0,.1) 35px, rgba(0,0,0,.1) 75px))
+        //background-size: 100px 100px
+        background: rgba(153, 0, 255,.5)
+
+.oe_drop_zone, .oe_drop_zone_style
+    border: none
+    //@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.1) ,rgba(255,255,255,.1) 35px, rgba(0,0,0,.1) 35px, rgba(0,0,0,.1) 75px))
+    //background-size: 100px 100px
+    background: rgba(153, 0, 255, .3)
+    +border-radius(4px)
+    &.oe_hover
+        background: rgba(0, 255, 133, .3)
+        z-index: 1001
+
+.oe_drop_zone_style
+    color: white
+    height: 48px
+    margin-bottom: 32px
+    padding-top: 12px
+
+// }}}
+
+/* ---- SNIPPET MANIPULATOR ----  {{{ */
+
+.resize_editor_busy
+    background-color: rgba(0,0,0,0.3)
+
+.oe_overlay
+    display: none
+    height: 0
+    position: absolute
+    background: transparent
+    z-index: 1001
+    //@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.02) ,rgba(255,255,255,.02) 35px, rgba(0,0,0,.02) 35px, rgba(0,0,0,.02) 75px))
+    +border-radius(3px)
+    @include transition(opacity 100ms linear)
+    +box-sizing(border-box)
+    &.oe_active
+        display: block
+    .oe_handle
+        display: block !important
+        position: absolute
+        top: 50%
+        left: 50%
+        +box-sizing(border-box)
+        width: 16px
+        height: 16px
+        margin: -2px
+        > div
+            z-index: 1
+            position: absolute
+            border-style: dashed
+            border-width: 1px
+            border-color: #666666
+            +box-shadow(0px 0px 0px 1px rgba(255,255,255,0.5), 0px 0px 0px 1px rgba(255,255,255,0.5) inset)
+        &.e:before, &.w:before, &.s:before, &.n:before, &.size .oe_handle_button
+            z-index: 2
+            position: relative
+            top: 50%
+            left: 50%
+            display: block
+            background: rgba(255, 255, 255, 1)
+            border: solid 1px rgba(0, 0, 0, .2)
+            +border-radius(5px)
+            width: 18px
+            height: 18px
+            margin: -9px
+            padding-left: 1px
+            font-size: 14px
+            line-height: 14px
+            font-family: FontAwesome
+            color: rgba(0,0,0,.5)
+            @include transition(background 100ms linear)
+        &.e, &.w, &.s, &.n
+            &:hover:before
+                background: rgba(0, 0, 0, .5)
+                color: #fff
+                +box-shadow(0 0 5px 3px rgba(255,255,255,.7))
+        &.e, &.w
+            top: 4px
+            height: 100%
+            &:before
+                content: "\f07e"
+                line-height: 16px
+            > div
+                width: 0
+                height: 100%
+                top: 2px
+                left: 8px
+        &.e
+            left: auto
+            right: -6px
+            cursor: w-resize
+        &.w
+            left: -6px
+            cursor: e-resize
+        &.s, &.n
+            left: 2px
+            width: 100%
+            &:before
+                content: "\f07d"
+                text-align: center
+                padding: 1px
+            > div
+                width: 100%
+                height: 0
+                top: 7px
+                left: 1px
+        &.s
+            top: auto
+            cursor: n-resize
+        &.n
+            cursor: s-resize
+            > div
+                top: 5px
+        &.size
+            z-index: 3
+            top: auto
+            left: 50%
+            bottom: -6px
+            margin-left: -50px
+            .oe_handle_button
+                position: relative
+                z-index: 3
+                text-align: center
+                margin-left: -52px
+                margin-top: -10px
+                left: 0px
+                &:hover
+                    background: rgba(30, 30, 30, .8)
+                    color: #fff
+                    +box-shadow(0 0 5px 3px rgba(255,255,255,.7))
+            .size
+                position: absolute
+                width: 64px
+                cursor: row-resize
+                top: 9px
+                margin-left: 52px
+                padding: 0 5px
+            .auto_size
+                position: absolute
+                width: 100px
+                top: 9px
+                cursor: pointer
+        &.readonly
+            cursor: auto !important
+            &:before, &.size
+                display: none !important
+
+    .icon.btn
+        display: inline-block
+
+    .oe_overlay_options
+        position: absolute
+        left: 50% !important
+        text-align: center
+        top: -20px
+        z-index: 1002
+        > .btn-group
+            left: -50%
+            white-space: nowrap
+            > a
+                cursor: pointer
+                display: inline-block
+                float: none
+                margin: 0 -3px
+            > div
+                float: left
+        .btn, a
+            cursor: pointer
+        .dropdown
+            display: inline-block
+        .dropdown-menu
+            text-align: left
+            min-width: 180px
+        .dropdown-menu select,.dropdown-menu input
+            display: block
+
+    &.block-w-left .w:before
+        content: "\F061" !important
+    &.block-w-right .w:before
+        content: "\F060" !important
+    &.block-w-left.block-w-right .w:before
+        display: none !important
+    &.block-e-left .e:before
+        content: "\F061" !important
+    &.block-e-right .e:before
+        content: "\F060" !important
+    &.block-e-left.block-e-right .e:before
+        display: none !important
+
+    &.block-s-top .s:before
+        content: "\F063" !important
+    &.block-s-bottom .s:before
+        content: "\f062" !important
+    &.block-n-top .n:before
+        content: "\F063" !important
+    &.block-n-bottom .n:before
+        content: "\f062" !important
+
+    &.o_keypress
+        opacity: 0
+        -webkit-transition: .8s
+        -moz-transition: .8s
+        -o-transition: .8s
+        -transition: .8s
+
+
+.s-resize-important, .s-resize-important *
+    cursor: s-resize !important
+.n-resize-important, .n-resize-important *
+    cursor: n-resize !important
+.e-resize-important, .e-resize-important *
+    cursor: e-resize !important
+.w-resize-important, .w-resize-important *
+    cursor: w-resize !important
+.move-important, .move-important *
+    cursor: move !important
+
+// }}}
diff --git a/addons/web_editor/static/src/css/web_editor.css b/addons/web_editor/static/src/css/web_editor.css
new file mode 100644
index 00000000000..e61e5244e40
--- /dev/null
+++ b/addons/web_editor/static/src/css/web_editor.css
@@ -0,0 +1,266 @@
+@charset "utf-8";
+/* ----- EDITOR ----- */
+.css_non_editable_mode_hidden {
+  display: none !important;
+}
+
+/* ----- Editor (for public user, like forum) ----- */
+.note-toolbar {
+  margin-left: 0 !important;
+}
+
+.note-popover .popover > .arrow {
+  display: none;
+}
+
+/* ----- GENERIC LAYOUTING HELPERS ---- */
+
+.hidden {
+  display: none !important;
+}
+
+/* table */
+table.table {
+  table-layout: fixed;
+}
+
+td {
+  min-width: 20px;
+}
+
+/* Vertical Spacing */
+.mt128 {
+  margin-top: 128px !important;
+}
+
+.mt92 {
+  margin-top: 92px !important;
+}
+
+.mt64 {
+  margin-top: 64px !important;
+}
+
+.mt48 {
+  margin-top: 48px !important;
+}
+
+.mt32 {
+  margin-top: 32px !important;
+}
+
+.mt16 {
+  margin-top: 16px !important;
+}
+
+.mt8 {
+  margin-top: 8px !important;
+}
+
+.mt4 {
+  margin-top: 4px !important;
+}
+
+.mt0 {
+  margin-top: 0px !important;
+}
+
+.mb128 {
+  margin-bottom: 128px !important;
+}
+
+.mb92 {
+  margin-bottom: 92px !important;
+}
+
+.mb64 {
+  margin-bottom: 64px !important;
+}
+
+.mb48 {
+  margin-bottom: 48px !important;
+}
+
+.mb32 {
+  margin-bottom: 32px !important;
+}
+
+.mb16 {
+  margin-bottom: 16px !important;
+}
+
+.mb8 {
+  margin-bottom: 8px !important;
+}
+
+.mb4 {
+  margin-bottom: 4px !important;
+}
+
+.mb0 {
+  margin-bottom: 0px !important;
+}
+
+.ml8 {
+  margin-left: 8px !important;
+}
+
+.ml4 {
+  margin-left: 4px !important;
+}
+
+.ml0 {
+  margin-left: 0px !important;
+}
+
+.mr8 {
+  margin-right: 8px !important;
+}
+
+.mr4 {
+  margin-right: 4px !important;
+}
+
+.mr0 {
+  margin-right: 0px !important;
+}
+
+/* Media */
+img.shadow {
+  -moz-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
+}
+
+img.padding-small, .img.padding-small, span.fa.padding-small, iframe.padding-small {
+  padding: 4px;
+}
+img.padding-medium, .img.padding-medium, span.fa.padding-medium, iframe.padding-medium {
+  padding: 8px;
+}
+img.padding-large, .img.padding-large, span.fa.padding-large, iframe.padding-large {
+  padding: 16px;
+}
+img.padding-xl, .img.padding-xl, span.fa.padding-xl, iframe.padding-xl {
+  padding: 32px;
+}
+
+div.media_iframe_video.padding-small iframe {
+  padding: 4px;
+}
+div.media_iframe_video.padding-medium iframe {
+  padding: 8px;
+}
+div.media_iframe_video.padding-large iframe {
+  padding: 16px;
+}
+div.media_iframe_video.padding-xl iframe {
+  padding: 32px;
+}
+
+/* font awsome */
+.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;
+}
+
+/* video */
+div.media_iframe_video {
+  margin: 0 auto;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+div.media_iframe_video iframe {
+  width: 100%;
+  height: 100%;
+  top: 0;
+  position: absolute;
+  margin: 0 auto;
+  margin-left: -50%;
+}
+div.media_iframe_video .media_iframe_video_size {
+  padding-bottom: 66.5%;
+  position: relative;
+  width: 100%;
+  height: 0;
+}
+div.media_iframe_video .css_editable_mode_display {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: none;
+  z-index: 2;
+}
+
+html[data-browser^="msie"] div.media_iframe_video iframe {
+  margin-left: 0;
+}
+
+/* Mobile view */
+@media (max-width: 768px) {
+  img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa {
+    -webkit-transform: none !important;
+    -moz-transform: none !important;
+    -ms-transform: none !important;
+    -o-transform: none !important;
+    transform: none !important;
+  }
+}
+/* ---- fields --- */
+address .fa.fa-mobile-phone {
+  margin: 0 3px 0 2px;
+}
+address .fa.fa-file-text-o {
+  margin-right: 1px;
+}
+
+span[data-oe-type="monetary"] {
+  white-space: nowrap;
+}
+
+/* ---- MENU ---- {{{ */
+div.oe_menu_buttons {
+  top: -8px;
+  right: -8px;
+}
+
+ul.oe_menu_editor .fa-home {
+  display: none;
+}
+ul.oe_menu_editor > li:first-child > div > span > .fa-home {
+  display: block;
+}
+ul.oe_menu_editor .oe_menu_placeholder {
+  outline: 1px dashed #4183C4;
+}
+ul.oe_menu_editor ul {
+  list-style: none;
+}
+ul.oe_menu_editor li div {
+  cursor: move;
+}
+ul.oe_menu_editor .disclose {
+  cursor: pointer;
+  width: 10px;
+  display: none;
+}
diff --git a/addons/web_editor/static/src/css/web_editor.sass b/addons/web_editor/static/src/css/web_editor.sass
new file mode 100644
index 00000000000..75b4ad6c781
--- /dev/null
+++ b/addons/web_editor/static/src/css/web_editor.sass
@@ -0,0 +1,195 @@
+@charset "utf-8"
+@import "common"
+
+/* ----- EDITOR ----- */
+
+.css_non_editable_mode_hidden
+    display: none !important
+
+/* ----- Editor (for public user, like forum) ----- */
+
+.note-toolbar
+    margin-left: 0 !important
+
+.note-popover .popover > .arrow
+    display: none
+
+/* ----- GENERIC LAYOUTING HELPERS ---- */
+
+.hidden
+    display: none !important
+
+/* table */
+
+table.table
+    table-layout: fixed
+
+td
+    min-width: 20px
+
+/* Vertical Spacing */
+
+.mt128
+    margin-top: 128px !important
+.mt92
+    margin-top: 92px !important
+.mt64
+    margin-top: 64px !important
+.mt48
+    margin-top: 48px !important
+.mt32
+    margin-top: 32px !important
+.mt16
+    margin-top: 16px !important
+.mt8
+    margin-top: 8px !important
+.mt4
+    margin-top: 4px !important
+.mt0
+    margin-top: 0px !important
+
+.mb128
+    margin-bottom: 128px !important
+.mb92
+    margin-bottom: 92px !important
+.mb64
+    margin-bottom: 64px !important
+.mb48
+    margin-bottom: 48px !important
+.mb32
+    margin-bottom: 32px !important
+.mb16
+    margin-bottom: 16px !important
+.mb8
+    margin-bottom: 8px !important
+.mb4
+    margin-bottom: 4px !important
+.mb0
+    margin-bottom: 0px !important
+
+.ml8
+    margin-left: 8px !important
+.ml4
+    margin-left: 4px !important
+.ml0
+    margin-left: 0px !important
+
+.mr8
+    margin-right: 8px !important
+.mr4
+    margin-right: 4px !important
+.mr0
+    margin-right: 0px !important
+
+/* Media */
+
+img.shadow
+    +box-shadow(0px 3px 8px rgba(0, 0, 0, 0.2))
+
+img, .img, span.fa, iframe
+    &.padding-small
+        padding: 4px
+    &.padding-medium
+        padding: 8px
+    &.padding-large
+        padding: 16px
+    &.padding-xl
+        padding: 32px
+div.media_iframe_video
+    &.padding-small iframe
+        padding: 4px
+    &.padding-medium iframe
+        padding: 8px
+    &.padding-large iframe
+        padding: 16px
+    &.padding-xl iframe
+        padding: 32px
+
+/* font awsome */
+
+.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
+
+/* video */
+
+div.media_iframe_video
+    margin: 0 auto
+    text-align: center
+    position: relative
+    overflow: hidden
+    iframe
+        width: 100%
+        height: 100%
+        top: 0
+        position: absolute
+        margin: 0 auto
+        margin-left: -50%
+    .media_iframe_video_size
+        padding-bottom: 66.5%
+        position: relative
+        width: 100%
+        height: 0
+    .css_editable_mode_display
+        position: absolute
+        width: 100%
+        height: 100%
+        display: none
+        z-index: 2
+
+html[data-browser^="msie"] div.media_iframe_video iframe
+    margin-left: 0
+
+/* Mobile view */
+
+@media (max-width: 768px)
+    img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa
+        -webkit-transform: none !important
+        -moz-transform: none !important
+        -ms-transform: none !important
+        -o-transform: none !important
+        transform: none !important
+
+/* ---- fields --- */
+
+address
+    .fa.fa-mobile-phone
+        margin: 0 3px 0 2px
+    .fa.fa-file-text-o
+        margin-right: 1px
+
+span[data-oe-type="monetary"]
+    white-space: nowrap
+
+/* ---- MENU ---- {{{ */
+
+div.oe_menu_buttons
+    top: -8px
+    right: -8px
+
+ul.oe_menu_editor
+    .fa-home
+        display: none
+    > li:first-child > div > span > .fa-home
+        display: block
+    .oe_menu_placeholder
+        outline: 1px dashed #4183C4
+    ul
+        list-style: none
+    li div
+        cursor: move
+    .disclose
+        cursor: pointer
+        width: 10px
+        display: none
+
+// }}}