From 5848dc526f3f0b502e6952b2f74ea26c66509061 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20van=20der=20Essen?= Date: Wed, 21 Aug 2013 18:25:34 +0200 Subject: [PATCH] [IMP] website: basics of snippet system are now working and looking good bzr revid: fva@openerp.com-20130821162534-yr6nx292xoj2m2s2 --- addons/website/static/src/css/editor.css | 93 +++++++++++++++------- addons/website/static/src/css/editor.sass | 93 +++++++++++++++------- addons/website/static/src/js/website.js | 21 +++-- addons/website/views/views.xml | 96 ++++++++++++++++++++--- 4 files changed, 226 insertions(+), 77 deletions(-) diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css index 1416a4db2d8..d446d14f3bc 100644 --- a/addons/website/static/src/css/editor.css +++ b/addons/website/static/src/css/editor.css @@ -63,49 +63,84 @@ left: 0px; right: 0px; bottom: 0px; - height: 120px; - background: black; + max-height: 280px; + min-height: 140px; + background: #282828; + box-shadow: 0px 10px 10px -10px black inset; + overflow-y: auto; } -.oe_snippets .oe_snippet { - display: inline; -} -.oe_snippets .oe_snippet .oe_snippet_thumbnail { + +.oe_snippet { display: inline-block; - background: red; - width: 100px; - height: 100px; + vertical-align: top; + background: white; + width: 120px; + height: 120px; border-radius: 3px; margin: 10px; + margin-right: 0px; cursor: move; + position: relative; + box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2); + overflow: hidden; + -webkit-user-select: none; + user-select: none; } -.oe_snippets .oe_snippet .oe_snippet_body { +.oe_snippet .oe_snippet_thumbnail.oe_label { + text-align: center; + background: #747474; + background-image: radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4)); + height: 100%; + line-height: 120px; + color: white; + text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.95); +} +.oe_snippet .oe_snippet_body { display: none; } +.oe_snippet > * { + pointer-events: none; +} +.oe_snippet > *:first-child:not(.oe_snippet_thumbnail) { + display: block; + -webkit-transform-origin-x: 5px; + -webkit-transform-origin-y: 10px; + -webkit-transform: scale(0.095); +} .oe_drop_zone { display: block; - background: rgba(255, 0, 0, 0.25); - border: solid 1px rgba(255, 0, 0, 0.5); - height: 30px; + background: rgba(153, 0, 255, 0.17); + border-radius: 3px; + height: 32px; margin: -16px 0px; + -webkit-transition: margin 250ms linear; } -.oe_drop_zone.oe_inline { - display: inline; - height: auto; - width: 30px; - margin: 0px -16px; +.oe_drop_zone:first-child:not(:last-child) { + margin-top: -8px; + margin-bottom: -24px; } -.oe_drop_zone.oe_float_left { - float: left; -} -.oe_drop_zone.oe_float_right { - float: right; -} -.oe_drop_zone:hover { - background: rgba(255, 0, 0, 0.5); - border: solid 1px red; +.oe_drop_zone:last-child:not(:first-child) { + margin-top: -24px; + margin-bottom: -8px; } .oe_drop_zone.oe_hover { - background: rgba(0, 255, 0, 0.5); - border: solid 1px green; + background: rgba(0, 255, 133, 0.22); + z-index: 100000; +} +.oe_drop_zone:before { + content: ""; + display: block; + border-top: dashed 2px rgba(209, 178, 255, 0.72); + position: relative; + top: 16px; +} +.oe_drop_zone:first-child:not(:last-child):before { + top: 8px; +} +.oe_drop_zone:last-child:not(:first-child):before { + top: 24px; +} +.oe_drop_zone.oe_hover:before { + border-top: dashed 2px rgba(116, 255, 161, 0.72); } diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass index a11a83c7f90..f7ce999257e 100644 --- a/addons/website/static/src/css/editor.sass +++ b/addons/website/static/src/css/editor.sass @@ -56,43 +56,76 @@ left: 0px right: 0px bottom: 0px + max-height: 280px + min-height: 140px + background: rgb(40,40,40) + box-shadow: 0px 10px 10px -10px black inset + overflow-y: auto + +.oe_snippet + display: inline-block + vertical-align: top + background: white + width: 120px height: 120px - background: black + border-radius: 3px + margin: 10px + margin-right: 0px + cursor: move + position: relative + box-shadow: 0px 3px 10px rgba(0,0,0,0.2) + overflow: hidden + -webkit-user-select: none + user-select: none - .oe_snippet - display: inline - .oe_snippet_thumbnail - display: inline-block - background: red - width: 100px - height: 100px - border-radius: 3px - margin: 10px - cursor: move + .oe_snippet_thumbnail.oe_label + text-align: center + background: rgb(116, 116, 116) + background-image: radial-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.4)) + height: 100% + line-height: 120px + color: white + text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.95) - .oe_snippet_body - display: none + .oe_snippet_body + display: none + & > * + pointer-events: none + + & > *:first-child:not(.oe_snippet_thumbnail) + display: block + -webkit-transform-origin-x: 5px + -webkit-transform-origin-y: 10px + -webkit-transform: scale(0.095) + .oe_drop_zone display: block - background: rgba(255,0,0,0.25) - border: solid 1px rgba(255,0,0,0.5) - height: 30px + background: rgba(153, 0, 255, 0.17) + border-radius: 3px + height: 32px margin: -16px 0px - &.oe_inline - display: inline - height: auto - width: 30px - margin: 0px -16px - &.oe_float_left - float: left - &.oe_float_right - float: right - &:hover - background: rgba(255,0,0,0.5) - border: solid 1px red + -webkit-transition: margin 250ms linear + &:first-child:not(:last-child) + margin-top: -8px + margin-bottom: -24px + &:last-child:not(:first-child) + margin-top: -24px + margin-bottom: -8px &.oe_hover - background: rgba(0,255,0,0.5) - border: solid 1px green + background: rgba(0, 255, 133, 0.22) + z-index: 100000 + &:before + content: "" + display: block + border-top: dashed 2px rgba(209, 178, 255, 0.72) + position: relative + top: 16px + &:first-child:not(:last-child):before + top: 8px + &:last-child:not(:first-child):before + top: 24px + &.oe_hover:before + border-top: dashed 2px rgba(116, 255, 161, 0.72) diff --git a/addons/website/static/src/js/website.js b/addons/website/static/src/js/website.js index c3d8dd1e5f3..3f99df872f1 100644 --- a/addons/website/static/src/js/website.js +++ b/addons/website/static/src/js/website.js @@ -118,7 +118,7 @@ var $editables = $('[data-oe-model]') .not('link, script') // FIXME: propagation should make "meta" blocks non-editable in the first place... - .not('.oe_snippet_editor') + .not('.oe_snippets,.oe_snippet, .oe_snippet *') .prop('contentEditable', true) .addClass('oe_editable'); var $rte_ables = $editables.not('[data-oe-type]'); @@ -324,6 +324,7 @@ this.$('.oe_snippet').draggable({ helper: 'clone', + appendTo: 'body', start: function(){ var snippet = $(this); @@ -333,15 +334,25 @@ }); $('.oe_drop_zone').droppable({ - hoverClass: "oe_hover", - drop: function(event,ui){ - $(this).replaceWith(snippet.find('.oe_snippet_body').clone()); + over: function(){ + // FIXME: stupid hack to prevent multiple droppable to activate at once ... + // it's not even working properly but it's better than nothing. + $(".oe_drop_zone.oe_hover").removeClass("oe_hover"); + $(this).addClass("oe_hover"); + }, + out: function(){ + $(this).removeClass("oe_hover"); + }, + drop: function(){ + $(".oe_drop_zone.oe_hover") + .replaceWith(snippet.find('.oe_snippet_body').clone()) + .removeClass('oe_snippet_body'); }, }); }, stop: function(){ self.deactivate_drop_zones(); - } + }, }); }, // A generic drop zone generator. two css selectors can be provided diff --git a/addons/website/views/views.xml b/addons/website/views/views.xml index a2b42cf2f84..2c3ea14c4b0 100644 --- a/addons/website/views/views.xml +++ b/addons/website/views/views.xml @@ -401,22 +401,92 @@