diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index 39694ff6391..e895b1209ce 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -224,9 +224,6 @@ table.editorbar-panel td.selected {
box-sizing: border-box;
pointer-events: none;
}
-.oe_overlay .oe_handle {
- display: none !important;
-}
.oe_overlay.oe_hover {
opacity: 1;
cursor: pointer;
@@ -241,6 +238,9 @@ table.editorbar-panel td.selected {
.oe_overlay.oe_selected {
border-color: rgba(0, 153, 255, 0.5);
}
+.oe_overlay .oe_handle {
+ display: none !important;
+}
.oe_overlay.oe_active {
border-color: rgba(153, 0, 255, 0.5);
}
@@ -248,35 +248,37 @@ table.editorbar-panel td.selected {
display: block !important;
pointer-events: auto;
}
+.oe_overlay .icon.btn {
+ display: inline-block;
+}
.oe_overlay .oe_overlay_options {
display: none;
z-index: 1002;
}
-.oe_overlay .oe_overlay_options .oe_option {
- top: 50%;
- left: 50%;
- pointer-events: auto;
+.oe_overlay .oe_overlay_options .oe_options, .oe_overlay .oe_overlay_options .oe_label, .oe_overlay .oe_overlay_options .oe_move {
position: absolute;
display: block;
z-index: 1002;
-}
-.oe_overlay .oe_overlay_options .oe_option.n {
top: -11px;
}
-.oe_overlay .oe_overlay_options .oe_option.e {
- left: auto;
- right: -6px;
+.oe_overlay .oe_overlay_options .oe_options {
+ pointer-events: auto;
+ left: -14px;
}
-.oe_overlay .oe_overlay_options .oe_option.s {
- top: auto;
- bottom: -10px;
+.oe_overlay .oe_overlay_options .oe_label {
+ top: -8px;
+ right: 6px;
+ background: white;
+ font-size: 75%;
+ color: rgba(153, 0, 255, 0.5);
+ padding: 0 5px;
}
-.oe_overlay .oe_overlay_options .oe_option.w {
- left: -6px;
+.oe_overlay .oe_overlay_options .oe_move {
+ pointer-events: auto;
+ left: 50%;
}
-.oe_overlay .oe_overlay_options .oe_option > a {
- text-decoration: none;
- font-size: 1.2em;
+.oe_overlay .oe_overlay_options .oe_move .js_box_move {
+ margin-left: -50%;
}
.oe_overlay.oe_active .oe_overlay_options {
display: block;
@@ -340,6 +342,10 @@ table.editorbar-panel td.selected {
cursor: w-resize !important;
}
+.move-important, .move-important * {
+ cursor: move !important;
+}
+
/* ---- MOBILE PREVIEW ---- */
.oe_mobile_preview.modal .modal-content {
height: 660px;
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index 059f9eedb45..96c77108ff6 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -202,8 +202,6 @@ table.editorbar-panel
transition: opacity 100ms linear
box-sizing: border-box
pointer-events: none
- .oe_handle
- display: none !important
&.oe_hover
opacity: 1
cursor: pointer
@@ -215,35 +213,39 @@ table.editorbar-panel
box-shadow: 0px 0px 0px 1px rgba(255,255,255,0.3), 0px 0px 0px 1px rgba(255,255,255,0.3) inset
&.oe_selected
border-color: rgba(0, 153, 255, 0.5)
+ .oe_handle
+ display: none !important
&.oe_active
border-color: rgba(153, 0, 255, 0.5)
.oe_handle
display: block !important
pointer-events: auto
+ .icon.btn
+ display: inline-block
.oe_overlay_options
display: none
z-index: 1002
- .oe_option
- top: 50%
- left: 50%
- pointer-events: auto
+ .oe_options,.oe_label,.oe_move
position: absolute
display: block
z-index: 1002
- &.n
- top: -11px
- &.e
- left: auto
- right: -6px
- &.s
- top: auto
- bottom: -10px
- &.w
- left: -6px
- > a
- text-decoration: none
- font-size: 1.2em
+ top: -11px
+ .oe_options
+ pointer-events: auto
+ left: -14px
+ .oe_label
+ top: -8px
+ right: 6px
+ background: #fff
+ font-size: 75%
+ color: rgba(153, 0, 255, 0.5)
+ padding: 0 5px
+ .oe_move
+ pointer-events: auto
+ left: 50%
+ .js_box_move
+ margin-left: -50%
&.oe_active .oe_overlay_options
display: block
@@ -289,6 +291,8 @@ table.editorbar-panel
cursor: e-resize !important
.w-resize-important, .w-resize-important *
cursor: w-resize !important
+.move-important, .move-important *
+ cursor: move !important
/* ---- MOBILE PREVIEW ---- */
diff --git a/addons/website/static/src/js/website.snippets.js b/addons/website/static/src/js/website.snippets.js
index a7f69a8fd19..58970b67dc6 100644
--- a/addons/website/static/src/js/website.snippets.js
+++ b/addons/website/static/src/js/website.snippets.js
@@ -197,6 +197,7 @@
helper: 'clone',
zIndex: '1000',
appendTo: 'body',
+ cursor: "move",
start: function(){
var action = $snippet.data('action');
if( action === 'insert'){
@@ -485,24 +486,74 @@
this.$editor = this.$el.find(".oe_snippet_options");
this.$thumbnail = this.$el.find(".oe_snippet_thumbnail");
this.$body = this.$el.find(".oe_snippet_body");
+
+ var $options = this.$overlay.find(".oe_overlay_options");
+ this.$editor.prependTo($options.find(".oe_options ul"));
+ $options.find(".oe_label").text(this.$el.find('.oe_snippet_thumbnail.oe_label, .oe_snippet_thumbnail .oe_label').text());
}
},
+
+ // activate drag and drop for the snippets in the snippet toolbar
+ _drag_and_drop: function(){
+ var self = this;
+ var drop = false;
+ this.$overlay.draggable({
+ appendTo: 'body',
+ cursor: "move",
+ cursorAt: {
+ top: self.$target.outerHeight()/2,
+ left: self.$target.outerWidth()/2 },
+ distance: 20,
+ handle: ".js_box_move",
+ start: function(){
+ self.parent.editor_busy = true;
+ self.parent.activate_insertion_zones({
+ siblings: self.$el ? self.$el.data('selector-siblings') : false,
+ childs: self.$el ? self.$el.data('selector-childs') : false,
+ });
+ self.$target.after("");
+ self.$target.detach();
+ $("body").addClass('move-important');
+ drop = false;
+ $('.oe_drop_zone').droppable({
+ hoverClass: "oe_hover",
+ drop: function(){
+ if (!$(".oe_drop_zone.oe_hover").length) {
+ return false;
+ }
+ $(".oe_drop_zone.oe_hover").after(self.$target);
+ drop = true;
+ },
+ });
+ },
+ stop: function(){
+ $("body").removeClass('move-important');
+ $('.oe_drop_zone').droppable('destroy').remove();
+ if (!drop) {
+ $('#oe_pointer_drag_and_drop').after(self.$target);
+ }
+ $('#oe_pointer_drag_and_drop').remove();
+ self.parent.editor_busy = false;
+ setTimeout(function () {self.parent.make_active(self.$target);},0);
+ },
+ });
+ },
+
+
/*
* start
* This method is called after init and _readXMLData
*/
start: function () {
var self = this;
- if(this.$editor) this.$editor.prependTo(this.$overlay.find(".oe_overlay_options .oe_option.n.w ul"));
- else this.$overlay.find(".oe_overlay_options .oe_option.n.w").hide();
this.$overlay.on('click', '.js_box_remove', function () {
self.$target.detach();
self.onBlur();
self.$target.remove();
return false;
});
-
+ this._drag_and_drop();
},
/*
@@ -547,6 +598,7 @@
website.snippet.editorRegistry.resize = website.snippet.Editor.extend({
+ template : "website.snippets.resize",
start: function () {
var self = this;
this._super();
@@ -663,6 +715,7 @@
});
website.snippet.editorRegistry.colmd = website.snippet.editorRegistry.resize.extend({
+ template : "website.snippets.colmd",
getSize: function () {
this.grid = this._super();
var width = this.$target.parents(".row:first").first().outerWidth();
diff --git a/addons/website/static/src/xml/website.snippets.xml b/addons/website/static/src/xml/website.snippets.xml
index 88ba194da95..f4c83c18fb3 100644
--- a/addons/website/static/src/xml/website.snippets.xml
+++ b/addons/website/static/src/xml/website.snippets.xml
@@ -24,17 +24,14 @@
+ Margin resize
+
+
+