From 641477141f39ac02bcd933fb8b0a6f15cf1526de Mon Sep 17 00:00:00 2001 From: Christophe Matthieu Date: Wed, 16 Oct 2013 12:10:55 +0200 Subject: [PATCH] [IMP] website snippet: improve visibility of drop zone bzr revid: chm@openerp.com-20131016101055-p6vhiijvladtbn87 --- addons/website/static/src/css/editor.css | 99 +++++++++++++------ 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 | 96 +++++++++++------- .../static/src/xml/website.snippets.xml | 23 ++++- 7 files changed, 198 insertions(+), 90 deletions(-) diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css index ebcb7f43826..1b55eeacef5 100644 --- a/addons/website/static/src/css/editor.css +++ b/addons/website/static/src/css/editor.css @@ -1,3 +1,4 @@ +@charset "utf-8"; /* ---- CKEditor Minimal Reset ---- */ .navbar.navbar-inverse .cke_chrome { border: none; @@ -304,53 +305,87 @@ table.editorbar-panel td.selected { } /* ---- SNIPPETS DROP ZONES ---- */ -.oe_drop_zone.oe_insert { - display: block; - height: 48px; - margin: 0px; - margin-top: -4px; - margin-bottom: -44px; - -webkit-transition: margin 250ms linear; - -moz-transition: margin 250ms linear; - -o-transition: margin 250ms linear; - transition: margin 250ms linear; +#dark_for_dropzone { width: 100%; position: absolute; + top: 0; + left: 0; + opacity: 0.4; z-index: 1000; + pointer-events: none; } -.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; +#dark_for_dropzone td { + background: black; } -.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_overlay { - border-radius: 3px; - background: rgba(153, 0, 255, 0.5); +#dark_for_dropzone td.center.active { + background: transparent; } .oe_drop_zone, .oe_drop_zone_style { border: none; - background: rgba(153, 0, 255, 0.3); + 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.oe_hover, .oe_drop_zone_style.oe_hover { - background: rgba(0, 255, 133, 0.3); - z-index: 1001; +.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 { + display: block; + height: 48px; + margin: 0px; + margin-top: -4px; + margin-bottom: -44px; + z-index: 1002; + width: 100%; + position: absolute; +} +.oe_drop_zone: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 { + border-top: dashed 2px rgba(116, 255, 161, 0.72); +} +.oe_drop_zone.oe_vertical { + width: 48px; + float: left; + position: relative; + margin: 4px -24px !important; +} +.oe_drop_zone.oe_vertical div { + display: none; +} +.oe_drop_zone.oe_overlay { + border-radius: 3px; +} +.oe_drop_zone.oe_drop_active { + background: rgba(100, 255, 255, 0.3); +} +.oe_drop_zone.oe_drop_active div { + display: none; +} +.oe_drop_zone.oe_drop_active .oe_active { + display: block; } .oe_drop_zone_style { diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass index 1ef6d67bb49..becf7dc9ba0 100644 --- a/addons/website/static/src/css/editor.sass +++ b/addons/website/static/src/css/editor.sass @@ -242,16 +242,45 @@ table.editorbar-panel /* ---- SNIPPETS DROP ZONES ---- */ -.oe_drop_zone.oe_insert +#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 display: block height: 48px margin: 0px margin-top: -4px margin-bottom: -44px - @include transition(margin 250ms linear) + z-index: 1002 width: 100% position: absolute - z-index: 1000 &:not(.oe_vertical):before content: "" display: block @@ -264,22 +293,17 @@ table.editorbar-panel width: 48px float: left position: relative - margin: 0px -24px !important + margin: 4px -24px !important + div + display: none &.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_active + background: rgba(100, 255, 255, .3) + div + display: none + .oe_active + display: block .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 63e8fbefa76..c6bb24d04f0 100644 --- a/addons/website/static/src/css/snippets.css +++ b/addons/website/static/src/css/snippets.css @@ -216,5 +216,4 @@ [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 ce87e592136..c5b58815c67 100644 --- a/addons/website/static/src/css/website.css +++ b/addons/website/static/src/css/website.css @@ -235,7 +235,10 @@ footer { } .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child { - position: static; + 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; } .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 5197653429c..2735dfe9fc8 100644 --- a/addons/website/static/src/css/website.sass +++ b/addons/website/static/src/css/website.sass @@ -161,7 +161,9 @@ 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: static + position: relative + div + display: none .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 2181b8a650b..bbedd970d9b 100644 --- a/addons/website/static/src/js/website.snippets.js +++ b/addons/website/static/src/js/website.snippets.js @@ -308,17 +308,32 @@ } + 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().after($toInsert); + $(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'); } }, 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(){ @@ -327,15 +342,8 @@ }); }, 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'){ @@ -386,7 +394,7 @@ var sibling_selector = selector.siblings; var vertical_child_selector = selector.vertical_children; - var zone_template = "
"; + var zone_template = openerp.qweb.render('website.snippet_drop_zone'); if(child_selector){ self.dom_filter(child_selector).each(function (){ @@ -406,7 +414,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")))+'px'); + $template.css('height', ($col.outerHeight() + parseInt($col.css("margin-top")) + parseInt($col.css("margin-bottom")) - 8)+'px'); $lastinsert = $template.clone(); $(this).after($lastinsert); @@ -575,7 +583,8 @@ * Displayed into the overlay options on focus */ _readXMLData: function() { - this.$el = this.parent.$snippets.siblings("[data-snippet-id='"+this.snippet_id+"']").clone(); + var self = this; + this.$el = this.parent.$snippets.filter(function () { return $(this).data("snippet-id") == self.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")); @@ -610,18 +619,28 @@ }); }, _drag_and_drop_after_insert_dropzone: function (){}, - _drag_and_drop_active_drop_zone: function ($zones){ + _drag_and_drop_active_drop_zone: function (){ var self = this; - $zones.droppable({ + var $dark = $("#dark_for_dropzone"); + $('.oe_drop_zone').droppable({ over: function(){ - $(".oe_drop_zone.hide").removeClass("hide"); - $(this).addClass("hide").first().after(self.$target); + $(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'); self.dropped = true; }, out: function(){ - $(this).removeClass("hide"); + $(this).removeClass("oe_drop_active"); + $dark.find("td.center").removeClass("active"); self.$target.detach(); self.dropped = false; + $("body").scroll(); // trigger a scroll to reset position for jquery api }, }); }, @@ -645,8 +664,12 @@ $("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($('.oe_drop_zone')); + self._drag_and_drop_active_drop_zone(); }, _drag_and_drop_stop: function (){ var self = this; @@ -656,6 +679,7 @@ 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(); @@ -953,23 +977,25 @@ _drag_and_drop_after_insert_dropzone: function(){ var self = this; - 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); - } - } - }); + // 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); + // } + // } + // }); }, _drag_and_drop_start: function () { this._super(); diff --git a/addons/website/static/src/xml/website.snippets.xml b/addons/website/static/src/xml/website.snippets.xml index e5dde368154..6aaf256b523 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,6 +57,25 @@
+ +
+
Drag your block here (move your mouse in this zone)
+
Drop your block
+
+ + + +
+ + + + + + +
+
+ +