From 99723a8a9ffa70f8e41806e92de32c52583fc2ad Mon Sep 17 00:00:00 2001 From: Fabien Pinckaers Date: Thu, 17 Oct 2013 16:19:59 +0200 Subject: [PATCH] [REVERT] snippets drop zone too complex bzr revid: fp@tinyerp.com-20131017141959-fpkds0a7e1m1sfrw --- addons/website/static/src/css/editor.css | 82 ++++---------- addons/website/static/src/css/editor.sass | 58 +++------- addons/website/static/src/css/snippets.css | 3 +- addons/website/static/src/css/website.css | 5 +- addons/website/static/src/css/website.sass | 4 +- .../website/static/src/js/website.snippets.js | 104 ++++++++---------- .../static/src/xml/website.snippets.xml | 23 +--- 7 files changed, 90 insertions(+), 189 deletions(-) diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css index dc9bb076e59..a009bf61f23 100644 --- a/addons/website/static/src/css/editor.css +++ b/addons/website/static/src/css/editor.css @@ -305,87 +305,53 @@ table.editorbar-panel td.selected { } /* ---- SNIPPETS DROP ZONES ---- */ -#dark_for_dropzone { - width: 100%; - position: absolute; - top: 0; - left: 0; - opacity: 0.4; - z-index: 1000; - pointer-events: none; -} -#dark_for_dropzone td { - background: black; -} -#dark_for_dropzone td.center.active { - background: transparent; -} - -.oe_drop_zone, .oe_drop_zone_style { - border: none; - background: rgba(100, 255, 255, 0.9); - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - -ms-border-radius: 4px; - -o-border-radius: 4px; - border-radius: 4px; -} -.oe_drop_zone div, .oe_drop_zone_style div { - margin: 0; - line-height: 48px; - text-align: center; - color: magenta; - font-weight: bold; - font-size: 24px; -} -.oe_drop_zone .oe_active, .oe_drop_zone_style .oe_active { - display: none; -} - -.oe_drop_zone_style div { - line-height: 24px; -} - -.oe_drop_zone { +.oe_drop_zone.oe_insert { display: block; height: 48px; margin: 0px; margin-top: -4px; margin-bottom: -44px; - z-index: 1002; + -webkit-transition: margin 250ms linear; + -moz-transition: margin 250ms linear; + -o-transition: margin 250ms linear; + transition: margin 250ms linear; width: 100%; position: absolute; + z-index: 1000; } -.oe_drop_zone:not(.oe_vertical):before { +.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_hover:before { +.oe_drop_zone.oe_insert.oe_hover:before { border-top: dashed 2px rgba(116, 255, 161, 0.72); } -.oe_drop_zone.oe_vertical { +.oe_drop_zone.oe_insert.oe_vertical { width: 48px; float: left; position: relative; - margin: 4px -24px !important; + margin: 0px -24px !important; } -.oe_drop_zone.oe_vertical div { - display: none; -} -.oe_drop_zone.oe_overlay { +.oe_drop_zone.oe_insert.oe_overlay { border-radius: 3px; + background: rgba(153, 0, 255, 0.5); } -.oe_drop_zone.oe_drop_active { - background: rgba(100, 255, 255, 0.3); + +.oe_drop_zone, .oe_drop_zone_style { + border: none; + background: rgba(153, 0, 255, 0.3); + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + -o-border-radius: 4px; + border-radius: 4px; } -.oe_drop_zone.oe_drop_active div { - display: none; -} -.oe_drop_zone.oe_drop_active .oe_active { - display: block; +.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 { diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass index bc8b238736e..461667d8e54 100644 --- a/addons/website/static/src/css/editor.sass +++ b/addons/website/static/src/css/editor.sass @@ -242,45 +242,16 @@ table.editorbar-panel /* ---- SNIPPETS DROP ZONES ---- */ -#dark_for_dropzone - width: 100% - position: absolute - top: 0 - left: 0 - opacity: 0.4 - z-index: 1000 - pointer-events: none - td - background: #000 - &.center.active - background: transparent - -.oe_drop_zone, .oe_drop_zone_style - border: none - background: rgba(100, 255, 255, .9) - +border-radius(4px) - div - margin: 0 - line-height: 48px - text-align: center - color: #FF00FF - font-weight: bold - font-size: 24px - .oe_active - display: none - -.oe_drop_zone_style div - line-height: 24px - -.oe_drop_zone +.oe_drop_zone.oe_insert display: block height: 48px margin: 0px margin-top: -4px margin-bottom: -44px - z-index: 1002 + @include transition(margin 250ms linear) width: 100% position: absolute + z-index: 1000 &:not(.oe_vertical):before content: "" display: block @@ -293,17 +264,22 @@ table.editorbar-panel width: 48px float: left position: relative - margin: 4px -24px !important - div - display: none + margin: 0px -24px !important &.oe_overlay border-radius: 3px - &.oe_drop_active - background: rgba(100, 255, 255, .3) - div - display: none - .oe_active - display: block + //@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 diff --git a/addons/website/static/src/css/snippets.css b/addons/website/static/src/css/snippets.css index c6bb24d04f0..63e8fbefa76 100644 --- a/addons/website/static/src/css/snippets.css +++ b/addons/website/static/src/css/snippets.css @@ -216,4 +216,5 @@ [data-snippet-id] { min-height: 10px; min-width: 10px; -} \ 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 c5b58815c67..ce87e592136 100644 --- a/addons/website/static/src/css/website.css +++ b/addons/website/static/src/css/website.css @@ -235,10 +235,7 @@ footer { } .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child { - position: relative; -} -.oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child div, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child div { - display: none; + position: static; } .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 { diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass index 2735dfe9fc8..5197653429c 100644 --- a/addons/website/static/src/css/website.sass +++ b/addons/website/static/src/css/website.sass @@ -161,9 +161,7 @@ footer height: 220px !important .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child - position: relative - div - display: none + position: static .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: 'Click Edit To Create Content' diff --git a/addons/website/static/src/js/website.snippets.js b/addons/website/static/src/js/website.snippets.js index 17dd829708f..35568e8336e 100644 --- a/addons/website/static/src/js/website.snippets.js +++ b/addons/website/static/src/js/website.snippets.js @@ -319,32 +319,17 @@ } - var $dark = $(openerp.qweb.render('website.snippet_dark_for_dropzone')) - .css('height', $("body")[0].scrollHeight + 'px'); - $("body").append($dark); - $('.oe_drop_zone').droppable({ over: function(){ if( action === 'insert'){ dropped = true; - $(this).first().addClass("oe_drop_active").after($toInsert); - $dark.find("td:first") - .css('height', $toInsert.offset().top+'px'); - $dark.find("tr:eq(1) td:first") - .css('width', $toInsert.offset().left+'px'); - $dark.find("td.center") - .addClass("active") - .css('height', $toInsert.outerHeight()+'px') - .css('width', $toInsert.outerWidth()+'px'); + $(this).first().after($toInsert); } }, out: function(){ if( action === 'insert'){ - $(this).removeClass("oe_drop_active"); dropped = false; $toInsert.detach(); - $dark.find("td.center").removeClass("active"); - $("body").scroll(); // trigger a scroll to reset position for jquery api } }, drop: function(){ @@ -353,8 +338,15 @@ }); }, stop: function(ev, ui){ + if (action === 'insert' && ! dropped) { + var el = $('.oe_drop_zone').nearest({x: ui.position.left, y: ui.position.top}).first() + if (el) { + el.after($toInsert) + dropped = true; + } + } + $('.oe_drop_zone').droppable('destroy').remove(); - $("#dark_for_dropzone").remove(); if (dropped) { var $target = false; if(action === 'insert'){ @@ -405,7 +397,7 @@ var sibling_selector = selector.siblings; var vertical_child_selector = selector.vertical_children; - var zone_template = openerp.qweb.render('website.snippet_drop_zone'); + var zone_template = "
"; if(child_selector){ self.dom_filter(child_selector).each(function (){ @@ -425,7 +417,7 @@ var temp_left = 0; $zone.find('> *:not(.oe_drop_zone):visible').each(function () { var $col = $(this); - $template.css('height', ($col.outerHeight() + parseInt($col.css("margin-top")) + parseInt($col.css("margin-bottom")) - 8)+'px'); + $template.css('height', ($col.outerHeight() + parseInt($col.css("margin-top")) + parseInt($col.css("margin-bottom")))+'px'); $lastinsert = $template.clone(); $(this).after($lastinsert); @@ -594,8 +586,7 @@ * Displayed into the overlay options on focus */ _readXMLData: function() { - var self = this; - this.$el = this.parent.$snippets.filter(function () { return $(this).data("snippet-id") == self.snippet_id; }).clone(); + this.$el = this.parent.$snippets.siblings("[data-snippet-id='"+this.snippet_id+"']").clone(); this.$editor = this.$el.find(".oe_snippet_options"); var $options = this.$overlay.find(".oe_overlay_options"); this.$editor.prependTo($options.find(".oe_options ul")); @@ -630,28 +621,18 @@ }); }, _drag_and_drop_after_insert_dropzone: function (){}, - _drag_and_drop_active_drop_zone: function (){ + _drag_and_drop_active_drop_zone: function ($zones){ var self = this; - var $dark = $("#dark_for_dropzone"); - $('.oe_drop_zone').droppable({ + $zones.droppable({ over: function(){ - $(this).first().addClass("oe_drop_active").after(self.$target); - $dark.find("td:first") - .css('height', self.$target.offset().top+'px'); - $dark.find("tr:eq(1) td:first") - .css('width', self.$target.offset().left+'px'); - $dark.find("td.center") - .addClass("active") - .css('height', self.$target.outerHeight()+'px') - .css('width', self.$target.outerWidth()+'px'); + $(".oe_drop_zone.hide").removeClass("hide"); + $(this).addClass("hide").first().after(self.$target); self.dropped = true; }, out: function(){ - $(this).removeClass("oe_drop_active"); - $dark.find("td.center").removeClass("active"); + $(this).removeClass("hide"); self.$target.detach(); self.dropped = false; - $("body").scroll(); // trigger a scroll to reset position for jquery api }, }); }, @@ -675,12 +656,8 @@ $("body").addClass('move-important'); - var $dark = $(openerp.qweb.render('website.snippet_dark_for_dropzone')) - .css('height', $("body")[0].scrollHeight + 'px'); - $("body").append($dark); - self._drag_and_drop_after_insert_dropzone(); - self._drag_and_drop_active_drop_zone(); + self._drag_and_drop_active_drop_zone($('.oe_drop_zone')); }, _drag_and_drop_stop: function (){ var self = this; @@ -690,7 +667,6 @@ self.$overlay.removeClass("hidden"); $("body").removeClass('move-important'); $('.oe_drop_zone').droppable('destroy').remove(); - $('#dark_for_dropzone').remove(); $(".oe_drop_clone, .oe_drop_to_remove").remove(); self.parent.editor_busy = false; self.get_parent_block(); @@ -988,25 +964,23 @@ _drag_and_drop_after_insert_dropzone: function(){ var self = this; - // commented for perf - - // var $zones = $(".row:has(> .oe_drop_zone)").each(function () { - // var $row = $(this); - // var width = $row.innerWidth(); - // var pos = 0; - // while (width > pos + self.size.width) { - // var $last = $row.find("> .oe_drop_zone:last"); - // $last.each(function () { - // pos = $(this).position().left; - // }); - // if (width > pos + self.size.width) { - // $row.append("
"); - // var $add_drop = $last.clone(); - // $row.append($add_drop); - // self._drag_and_drop_active_drop_zone($add_drop); - // } - // } - // }); + var $zones = $(".row:has(> .oe_drop_zone)").each(function () { + var $row = $(this); + var width = $row.innerWidth(); + var pos = 0; + while (width > pos + self.size.width) { + var $last = $row.find("> .oe_drop_zone:last"); + $last.each(function () { + pos = $(this).position().left; + }); + if (width > pos + self.size.width) { + $row.append("
"); + var $add_drop = $last.clone(); + $row.append($add_drop); + self._drag_and_drop_active_drop_zone($add_drop); + } + } + }); }, _drag_and_drop_start: function () { this._super(); @@ -1100,6 +1074,14 @@ self.$target.carousel(); }); + this.$target.on('dblclick', '.item.active .carousel-image img', function (event) { + var $img = $(event.currentTarget); + var editor = new website.editor.ImageDialog(); + editor.on('start', self, function (o) {o.url = $img.attr("src");}); + editor.on('save', self, function (o) {$img.attr("src", o.url);}); + editor.appendTo($('body')); + }); + this.rebind_event(); }, // rebind event to active carousel on edit mode diff --git a/addons/website/static/src/xml/website.snippets.xml b/addons/website/static/src/xml/website.snippets.xml index 6aaf256b523..e5dde368154 100644 --- a/addons/website/static/src/xml/website.snippets.xml +++ b/addons/website/static/src/xml/website.snippets.xml @@ -31,8 +31,8 @@ this one:

-
-
drop in this zone
+
+ drop in this zone
@@ -57,25 +57,6 @@
- -
-
Drag your block here (move your mouse in this zone)
-
Drop your block
-
- - - -
- - - - - - -
-
- -