From ae1687c6ab89f15ef95c479ac42f71a714c62e98 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20van=20der=20Essen?= Date: Mon, 26 Aug 2013 16:39:21 +0200 Subject: [PATCH 01/74] [WIP] website: trying to make inpage snippet drag and drop work bzr revid: fva@openerp.com-20130826143921-myctckmddoexa1fv --- addons/website/static/src/js/website.js | 95 +++++++++++++++++-------- addons/website/views/views.xml | 4 +- 2 files changed, 66 insertions(+), 33 deletions(-) diff --git a/addons/website/static/src/js/website.js b/addons/website/static/src/js/website.js index c71126816c1..69797d44020 100644 --- a/addons/website/static/src/js/website.js +++ b/addons/website/static/src/js/website.js @@ -350,7 +350,9 @@ dataType: "text", success: function(snippets){ self.$el.html(snippets); - self.start_snippets(); + self.$('.oe_snippet').each(function(index,snippet){ + self.make_snippet_draggable($(snippet)); + }); }, }); @@ -364,26 +366,25 @@ return obj; }, - // setup widget and drag and drop - start_snippets: function(){ + // activate drag and drop for the snippets in the snippet toolbar + make_snippet_draggable: function($snippet){ var self = this; - - this.$('.oe_snippet').draggable({ + + $snippet.draggable({ helper: 'clone', zIndex: '1000', appendTo: 'body', start: function(){ - var snippet = $(this); - var action = snippet.data('action'); + var action = $snippet.data('action'); self.deactivate_snippet_manipulators(); if( action === 'insert'){ self.activate_insertion_zones({ - siblings: snippet.data('selector-siblings'), - childs: snippet.data('selector-childs') + siblings: $snippet.data('selector-siblings'), + childs: $snippet.data('selector-childs') }); }else if( action === 'mutate' ){ - self.activate_overlay_zones(snippet.data('selector')); + self.activate_overlay_zones($snippet.data('selector')); } $('.oe_drop_zone').droppable({ @@ -398,11 +399,13 @@ }, drop: function(){ if( action === 'insert' ){ - $(".oe_drop_zone.oe_hover") - .replaceWith(snippet.find('.oe_snippet_body').clone()) - .removeClass('oe_snippet_body'); + var $toInsert = $snippet.find('.oe_snippet_body').clone(); + $toInsert.removeClass('oe_snippet_body'); + $toInsert.addClass('oe_snippet_instance'); + $toInsert.data('snippet-id',$snippet.data('snippet-id')); + $(".oe_drop_zone.oe_hover").replaceWith($toInsert); }else if( action === 'mutate' ){ - self.path_eval(snippet.data('action-function'))( $(".oe_drop_zone.oe_hover").data('target') ); + self.path_eval($snippet.data('action-function'))( $(".oe_drop_zone.oe_hover").data('target') ); } }, }); @@ -412,8 +415,38 @@ self.activate_snippet_manipulators(); }, }); - }, + + // return the original snippet in the editor bar from a snippet id (string) + get_snippet_from_id: function(id){ + return $('.oe_snippet').filter(function(){ + return $(this).data('snippet-id') === id; + }).first(); + }, + // WIP + make_draggable_instance: function($instance){ + var self = this; + var $snippet = get_snippet_from_id($instance.data('snippet-id')); + + $instance.draggable({ + helper: 'clone', + zIndex: '1000', + appendTo: 'body', + start: function(){ + var action = $snippet.data('action'); + if(action === 'insert'){ + + self.deactivate_snippet_manipulators(); + self.activate_insertion_zones({ + siblings: $snippet.data('selector-siblings'), + child: $snippet.data('selector-childs') + }); + + } + } + }); + }, + // Create element insertion drop zones. two css selectors can be provided // selector.childs -> will insert drop zones as direct child of the selected elements // in case the selected elements have children themselves, dropzones will be interleaved @@ -490,6 +523,7 @@ $('.oe_drop_zone').remove(); }, + // generate drop zones covering the elements selected by the selector activate_overlay_zones: function(selector){ var $targets = $(selector); @@ -519,6 +553,8 @@ $zone.data('target',$target); } }, + + // puts $el at the same absolute position as $target cover_target: function($el, $target){ $el.css({ 'position': 'absolute', @@ -527,28 +563,25 @@ }); $el.css($target.offset()); }, + + // activates the manipulator boxes (with resizing handles) for all snippets activate_snippet_manipulators: function(){ var self = this; this.activate_overlay_zones('#wrap .container'); - var $snippets = $('.oe_drop_zone'); - - for(var i = 0, len = $snippets.length; i < len; i++){ - var $snippet = $snippets.eq(i); + + $('.oe_drop_zone').each(function(){; + + var $zone = $(this); + var $snippet = $zone.data('target'); var $manipulator = $(openerp.qweb.render('website.snippet_manipulator')); - $manipulator.css({ - 'top': $snippet.css('top'), - 'left': $snippet.css('left'), - 'width': $snippet.css('width'), - 'height': $snippet.css('height'), - }); - $manipulator.data('target',$snippet.data('target')); + + self.cover_target($manipulator, $zone); + $manipulator.data('target',$snippet); $manipulator.appendTo('body'); - $snippet.remove(); + $zone.remove(); $manipulator.find('.oe_handle').mousedown(function(event){ var $handle = $(this); - var $manipulator = $handle.parent(); - var $snippet = $manipulator.data('target'); var x = event.pageX; var y = event.pageY; @@ -568,11 +601,11 @@ $snippet.css('padding-top',pt-dy+'px'); self.cover_target($manipulator,$snippet); }else if($handle.hasClass('s') || $handle.hasClass('sw') || $handle.hasClass('se')){ - $snippet.css('padding-bottom',pb+dy+'px'); self.cover_target($manipulator,$snippet); } }); + $('body').mouseup(function(){ $('body').unbind('mousemove'); $('body').unbind('mouseup'); @@ -581,7 +614,7 @@ }); }); - } + }); }, deactivate_snippet_manipulators: function(){ $('.oe_snippet_manipulator').remove(); diff --git a/addons/website/views/views.xml b/addons/website/views/views.xml index b9cbe035d3d..41899b7ccfc 100644 --- a/addons/website/views/views.xml +++ b/addons/website/views/views.xml @@ -428,7 +428,7 @@ -
+
@@ -470,7 +470,7 @@
-
+
From c5fa23bffa8ccbc3db6a88be822c4f9209701ffc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20van=20der=20Essen?= Date: Mon, 2 Sep 2013 11:10:05 +0200 Subject: [PATCH 02/74] [IMP] website editor: allow click trough on snippet manipulators bzr revid: fva@openerp.com-20130902091005-pnhb05fxk29z5q0r --- addons/website/static/src/css/editor.css | 38 +++++++++++++++++++---- addons/website/static/src/css/editor.sass | 32 ++++++++++++++++--- addons/website/static/src/js/website.js | 38 +++++++++++++++++++++-- addons/website/static/src/xml/website.xml | 4 +++ 4 files changed, 99 insertions(+), 13 deletions(-) diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css index 8a20e94bec0..3e678efe612 100644 --- a/addons/website/static/src/css/editor.css +++ b/addons/website/static/src/css/editor.css @@ -96,6 +96,7 @@ line-height: 120px; color: white; text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.95); + box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.07) inset; } .oe_snippet .oe_snippet_body { display: none; @@ -161,31 +162,56 @@ .oe_snippet_manipulator { display: block; position: absolute; - background: rgba(153, 0, 255, 0.1); + background: transparent; border-radius: 3px; - border: solid 1px rgba(153, 0, 255, 0.5); opacity: 0; transition: opacity 100ms linear; + box-sizing: border-box; } .oe_snippet_manipulator > .oe_handle { display: none; } -.oe_snippet_manipulator:hover, .oe_snippet_manipulator.oe_hover { +.oe_snippet_manipulator.oe_hover { opacity: 1; + cursor: pointer; } -.oe_snippet_manipulator:hover > .oe_handle, .oe_snippet_manipulator.oe_hover > .oe_handle { +.oe_snippet_manipulator.oe_selected { + opacity: 1; + pointer-events: none; + background: transparent; + border: solid 1px rgba(153, 0, 255, 0.5); +} +.oe_snippet_manipulator.oe_selected > * { + pointer-events: auto; +} +.oe_snippet_manipulator.oe_selected > .oe_handle { display: block; } +.oe_snippet_manipulator .oe_buttons { + position: absolute; + right: 16px; + top: 16px; + background: #ad00ff; + color: white; + padding: 0px 2px; + border-radius: 3px; +} +.oe_snippet_manipulator .oe_buttons .oe_icon { + display: inline-block; + padding: 8px; + cursor: pointer; +} .oe_handle { + pointer-events: auto; position: absolute; top: 50%; left: 50%; display: block; background: white; - border: solid 1px rgba(153, 0, 255, 0.5); + border: solid 1px #9900ff; box-sizing: border-box; - border-radius: 2px; + border-radius: 8px; width: 16px; height: 16px; margin: -8px; diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass index 29621f95e4b..feb7432821c 100644 --- a/addons/website/static/src/css/editor.sass +++ b/addons/website/static/src/css/editor.sass @@ -89,6 +89,7 @@ line-height: 120px color: white text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.95) + box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.07) inset .oe_snippet_body display: none @@ -146,27 +147,48 @@ .oe_snippet_manipulator display: block position: absolute - background: rgba(153, 0, 255, 0.1) + background: transparent //rgba(153, 0, 255, 0.05) border-radius: 3px - border: solid 1px rgba(153, 0, 255, 0.5) opacity: 0 transition: opacity 100ms linear + box-sizing: border-box & > .oe_handle display: none - &:hover,&.oe_hover + &.oe_hover opacity: 1 + cursor: pointer + &.oe_selected + opacity: 1 + pointer-events: none + background: transparent + border: solid 1px rgba(153, 0, 255, 0.5) + & > * + pointer-events: auto & > .oe_handle display: block + .oe_buttons + position: absolute + right: 16px + top: 16px + background: rgb(173, 0, 255) + color: white + padding: 0px 2px + border-radius: 3px + .oe_icon + display: inline-block + padding: 8px + cursor: pointer .oe_handle + pointer-events: auto position: absolute top: 50% left: 50% display: block background: rgba(255, 255, 255, 1) - border: solid 1px rgba(153, 0, 255, 0.5) + border: solid 1px rgba(153, 0, 255, 1) box-sizing: border-box - border-radius: 2px + border-radius: 8px width: 16px height: 16px margin: -8px diff --git a/addons/website/static/src/js/website.js b/addons/website/static/src/js/website.js index 69797d44020..2969e52ff63 100644 --- a/addons/website/static/src/js/website.js +++ b/addons/website/static/src/js/website.js @@ -340,6 +340,9 @@ template: 'website.snippets', init: function () { this._super.apply(this, arguments); + if(!$('#oe_manipulators').length){ + $("
").appendTo('body'); + } }, start: function() { var self = this; @@ -549,7 +552,7 @@ var $target = $targets.eq(i); var $zone = $(zone_template); this.cover_target($zone,$target); - $zone.appendTo('body'); + $zone.appendTo('#oe_manipulators'); $zone.data('target',$target); } }, @@ -567,8 +570,13 @@ // activates the manipulator boxes (with resizing handles) for all snippets activate_snippet_manipulators: function(){ var self = this; + // we generate overlay drop zones only to get an idea of where the snippet are, the drop + // zones are replaced by manipulators this.activate_overlay_zones('#wrap .container'); + var $active_manipulator = null; + var locked = false; + $('.oe_drop_zone').each(function(){; var $zone = $(this); @@ -577,10 +585,35 @@ self.cover_target($manipulator, $zone); $manipulator.data('target',$snippet); - $manipulator.appendTo('body'); + $manipulator.appendTo('#oe_manipulators'); $zone.remove(); + $manipulator.mouseover(function(){ + if(!locked && $active_manipulator != $manipulator){ + if($active_manipulator){ + $active_manipulator.removeClass('oe_selected'); + } + $active_manipulator = $manipulator; + $manipulator.addClass('oe_selected'); + } + }); + /*$manipulator.mouseleave(function(){ + if(!locked && $active_manipulator){ + $active_manipulator.removeClass('oe_selected'); + $active_manipulator = null; + } + });*/ + /* + $manipulator.click(function(){ + if($active_manipulator === $manipulator){ + selected = !selected; + $manipulator.toggleClass('oe_selected',selected); + } + }); + */ + $manipulator.find('.oe_handle').mousedown(function(event){ + locked = true; var $handle = $(this); var x = event.pageX; var y = event.pageY; @@ -607,6 +640,7 @@ }); $('body').mouseup(function(){ + locked = false; $('body').unbind('mousemove'); $('body').unbind('mouseup'); self.deactivate_snippet_manipulators(); diff --git a/addons/website/static/src/xml/website.xml b/addons/website/static/src/xml/website.xml index 37a3bc453f3..ab2f622429c 100644 --- a/addons/website/static/src/xml/website.xml +++ b/addons/website/static/src/xml/website.xml @@ -69,6 +69,10 @@
+
+ + +
From 6f6c59ec1de1881a70e4bf728ea5d8b56bd609f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20van=20der=20Essen?= Date: Mon, 2 Sep 2013 11:20:38 +0200 Subject: [PATCH 03/74] [IMP] website: made widget manipulator visible on dark areas bzr revid: fva@openerp.com-20130902092038-2dpxy9fidznaeclz --- addons/website/static/src/css/editor.css | 3 ++- addons/website/static/src/css/editor.sass | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css index 3e678efe612..987b229d91a 100644 --- a/addons/website/static/src/css/editor.css +++ b/addons/website/static/src/css/editor.css @@ -179,7 +179,8 @@ opacity: 1; pointer-events: none; background: transparent; - border: solid 1px rgba(153, 0, 255, 0.5); + border: dashed 1px rgba(153, 0, 255, 0.5); + box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset; } .oe_snippet_manipulator.oe_selected > * { pointer-events: auto; diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass index feb7432821c..2f236c38aab 100644 --- a/addons/website/static/src/css/editor.sass +++ b/addons/website/static/src/css/editor.sass @@ -161,7 +161,8 @@ opacity: 1 pointer-events: none background: transparent - border: solid 1px rgba(153, 0, 255, 0.5) + border: dashed 1px rgba(153, 0, 255, 0.5) + box-shadow: 0px 0px 0px 1px rgba(255,255,255,0.3), 0px 0px 0px 1px rgba(255,255,255,0.3) inset & > * pointer-events: auto & > .oe_handle From a837eb1ba826e9a3aae4ec50932e49647e9ca80d Mon Sep 17 00:00:00 2001 From: Christophe Matthieu Date: Thu, 5 Sep 2013 10:04:07 +0200 Subject: [PATCH 04/74] [FIX] website_sale: add product; update product number in cart bzr revid: chm@openerp.com-20130905080407-4pwjvo1hxabf1a2r --- addons/website_sale/static/src/js/website_sale.js | 2 +- addons/website_sale/website_sale.py | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/addons/website_sale/static/src/js/website_sale.js b/addons/website_sale/static/src/js/website_sale.js index 9fa7642f149..9a40d56cf30 100644 --- a/addons/website_sale/static/src/js/website_sale.js +++ b/addons/website_sale/static/src/js/website_sale.js @@ -16,7 +16,7 @@ $(document).ready(function () { }); function set_my_cart_quantity(qty) { - $("#my_cart_quantity").html(qty.toString().indexOf(".") > -1 ? qty : qty + '.0'); + $("#my_cart_quantity").html(qty.toString().indexOf(".") > -1 ? qty : qty + '.0').removeClass("hidden"); } $(".oe_website_sale .oe_mycart input.js_quantity").change(function () { diff --git a/addons/website_sale/website_sale.py b/addons/website_sale/website_sale.py index 9db3798dfe3..45b42858c94 100644 --- a/addons/website_sale/website_sale.py +++ b/addons/website_sale/website_sale.py @@ -94,7 +94,7 @@ class sale_order_line(osv.osv): def _recalculate_product_values(self, cr, uid, ids, product_id=None, context=None): user_obj = self.pool.get('res.users') product_id = product_id or ids and self.browse(cr, uid, ids[0], context=context).product_id.id - return self.product_id_change(cr, uid, [], + return self.product_id_change(cr, SUPERUSER_ID, [], pricelist=context.pop('pricelist'), product=product_id, partner_id=user_obj.browse(cr, SUPERUSER_ID, uid).partner_id.id, From c68f584988f7ebf35f430b1b4d6e2f5e627343f1 Mon Sep 17 00:00:00 2001 From: Christophe Matthieu Date: Thu, 5 Sep 2013 10:20:42 +0200 Subject: [PATCH 05/74] [FIX] website: sass & css bzr revid: chm@openerp.com-20130905082042-6n359n6ot5wntk0k --- addons/website/static/src/css/editor.css | 5 ++--- addons/website/static/src/css/editor.sass | 4 ++-- addons/website/views/views.xml | 4 ++-- 3 files changed, 6 insertions(+), 7 deletions(-) diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css index bc776904891..785b4ffe1ea 100644 --- a/addons/website/static/src/css/editor.css +++ b/addons/website/static/src/css/editor.css @@ -66,7 +66,7 @@ } .css_non_editable_mode_hidden { - display: none + display: none; } .oe_carousel_options { @@ -76,12 +76,11 @@ z-index: 1; display: none; } - .oe_carousel_options > * { display: inline-block !important; vertical-align: middle !important; position: relative !important; - top: +2px; + top: 2px; } /* ---- SNIPPET EDITOR ---- */ diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass index e68ce289526..ec009b64ec2 100644 --- a/addons/website/static/src/css/editor.sass +++ b/addons/website/static/src/css/editor.sass @@ -58,7 +58,7 @@ .oe_editable:focus outline: none !important -.css_non_editable_mode_hidden: +.css_non_editable_mode_hidden display: none .oe_carousel_options @@ -71,7 +71,7 @@ display: inline-block !important vertical-align: middle !important position: relative !important - top: +2px; + top: +2px /* ---- SNIPPET EDITOR ---- */ diff --git a/addons/website/views/views.xml b/addons/website/views/views.xml index f3077d7ee6d..28c34a15bf1 100644 --- a/addons/website/views/views.xml +++ b/addons/website/views/views.xml @@ -96,12 +96,12 @@