diff --git a/addons/website/static/src/css/snippets.css b/addons/website/static/src/css/snippets.css new file mode 100644 index 00000000000..27c99b82df7 --- /dev/null +++ b/addons/website/static/src/css/snippets.css @@ -0,0 +1,163 @@ +.oe_snippet_demo .oe_page{ + margin-top: 50px; + margin-bottom: 300px; + padding-bottom: 10px; + +} +.oe_snippet_demo .oe_page .oe_container{ + min-height: 200px; +} +.oe_snippet_demo .oe_page *{ + outline: 1px solid transparent; + -webkit-transiton: all 150ms linear; +} +.oe_snippet_demo .oe_page .oe_selected{ + position: relative; + outline: 2px dashed rgba(151, 137, 255,0.5) !important; + cursor: pointer; +} +.oe_snippet_demo .oe_page .oe_selected:after{ + content:'Insert Snippet Here'; + position: absolute; + height:20px; left:-2px; right:-2px; bottom:-10px; + background: rgba(151, 137, 255, 1); + border-radius: 2px; + z-index: 800; + pointer-events :none; + color: white; + text-shadow: none; /* 0px 1px 3px black; */ + font-size: 14px; + line-height: 20px; + text-align: center; +} +.oe_snippet_demo.oe_new .oe_page .oe_selected:after{ + content:''; + height:100%; + top:0px; left:0px; right:0px; bottom:0px; + background: rgba(151, 137, 255, 0.2); +} + +.oe_snippet_editor{ + position: fixed; + z-index: 1000; + bottom: 0px; + left: 0px; + right: 0px; + height: 214px; + background: rgb(160,160,160); + box-shadow: 0px 1px 3px rgb(100,100,100) inset; + overflow-y: hidden; + overflow-x: scroll; +} +.oe_snippet_list{ + width: auto; + white-space: nowrap; + margin-left: 20px; +} +.oe_snippet_editor .oe_snippet{ + box-sizing: border-box; + display: inline-block; + width: 220px; + height: 160px; + border-radius: 3px; + background: white; + margin: 20px; + margin-left: 0px; + cursor: pointer; + border: 2px solid transparent; + box-shadow: 0px 1px 3px rgb(100,100,100); + position: relative; + top: 0px; + -webkit-transition: all 150ms linear; + overflow: hidden; + vertical-align: top; + user-select: none; + white-space: normal; +} +.oe_snippet_editor .oe_snippet:after{ + content: attr(name); /*attr('name');*/ + position: absolute; + bottom: 0px; + left: 0px; + right: 0px; + background: rgba(255,255,255,0.8); + text-align: center; + color: black; + padding: 8px; + +} +.oe_snippet_editor .oe_snippet.oe_selected{ + border: 2px solid rgb(151, 137, 255); + box-shadow: 0px 3px 17px rgba(99, 53, 150, 0.59); + +} +.oe_snippet_editor .oe_snippet > *{ + pointer-events: none; + margin-top: 16px; + line-height: 1em; + zoom: 0.6; +} +.oe_snippet_editor .oe_snippet > .oe_container{ + margin-top: 0px; + zoom: 0.23; + line-height: 0.999em; + line-height: 1em; +} +.oe_snippet_editor .oe_snippet > .oe_row{ + margin-top: 0px; + zoom: 0.23; + line-height: 0.999em; +} +.oe_snippet_editor .oe_snippet > .oe_span6{ + margin-top: 16px; + zoom: 0.47; +} +.oe_snippet_editor .oe_snippet > .oe_span12{ + margin-top: 16px; + zoom: 0.23; +} +.oe_snippet_editor .oe_snippet > p{ + position: absolute; + top: 0; + right: 0; + left: 0; + bottom: 0; + font-size: 20px; + padding: 16px; + zoom: 1; + margin: 0px; +} +.oe_snippet_editor .oe_snippet.oe_new{ + background: gray; + box-shadow: 0px 1px 3px rgb(90,90,90) inset; + border: 0px; +} +.oe_snippet_editor .oe_snippet.oe_new.oe_selected{ + box-shadow: 0px 2px 0px 0px rgb(151,137,255) inset, 0px 3px 17px rgba(99, 53, 150, 0.59) inset; +} +.oe_snippet_editor .oe_snippet.oe_new > *{ + zoom:1; + margin: 0; + line-height: 160px; + text-align: center; + color: white; + font-size: 48px; +} +.oe_snippet_editor .oe_snippet.oe_new:after{ + position: absolute; + left: 0px; + right: 0px; + top: 0px; + bottom: 0px; + background: transparent; + color: white; + text-shadow: 0px 1px 3px black; + line-height: 160px; + padding: 0px; +} +[class*="span"]{ + margin-left: 0px !important; +} + + + diff --git a/addons/website/static/src/js/snippets.js b/addons/website/static/src/js/snippets.js new file mode 100644 index 00000000000..10a66a4312c --- /dev/null +++ b/addons/website/static/src/js/snippets.js @@ -0,0 +1,81 @@ +$(function(){ + + var selected_snippet = null; + function snippet_click(event){ + if(selected_snippet){ + selected_snippet.removeClass('oe_selected'); + if(selected_snippet[0] === $(this)[0]){ + selected_snippet = null; + event.preventDefault(); + make_static(); + return; + } + } + $(this).addClass('oe_selected'); + selected_snippet = $(this); + make_editable(); + event.preventDefault(); + } + $('.oe_snippet').click(snippet_click); + + var hover_element = null; + + function make_editable( constraint_after, constraint_inside ){ + if(selected_snippet && selected_snippet.hasClass('oe_new')){ + $('.oe_snippet_demo').addClass('oe_new'); + }else{ + $('.oe_snippet_demo').removeClass('oe_new'); + } + + $('.oe_page *').off('mouseover'); + $('.oe_page *').off('mouseleave'); + $('.oe_page *').mouseover(function(event){ + console.log('hover:',this); + if(hover_element){ + hover_element.removeClass('oe_selected'); + hover_element.off('click'); + } + $(this).addClass('oe_selected'); + $(this).click(append_snippet); + hover_element = $(this); + event.stopPropagation(); + }); + $('.oe_page *').mouseleave(function(){ + if(hover_element && $(this) === hover_element){ + hover_element = null; + $(this).removeClass('oe_selected'); + } + }); + } + + function make_static(){ + $('.oe_snippet_demo').removeClass('oe_new'); + $('.oe_page *').off('mouseover'); + $('.oe_page *').off('mouseleave'); + $('.oe_page .oe_selected').removeClass('oe_selected'); + } + + + function append_snippet(event){ + console.log('click',this,event.button); + if(event.button === 0){ + if(selected_snippet){ + if(selected_snippet.hasClass('oe_new')){ + var new_snippet = $("
"); + new_snippet.append($(this).clone()); + new_snippet.click(snippet_click); + $('.oe_snippet.oe_selected').before(new_snippet); + }else{ + $(this).after($('.oe_snippet.oe_selected').contents().clone()); + } + selected_snippet.removeClass('oe_selected'); + selected_snippet = null; + make_static(); + } + }else if(event.button === 1){ + $(this).remove(); + } + event.preventDefault(); + } + +}); diff --git a/addons/website/static/src/snippets.html b/addons/website/static/src/snippets.html new file mode 100644 index 00000000000..a7399a931cc --- /dev/null +++ b/addons/website/static/src/snippets.html @@ -0,0 +1,126 @@ + + + OpenERP Snippet Editor + + + + + + + + + + +
+
+
+
+
+ + + +
+
+
+
+
+
+
+

A very friendly Point of Sale

+

Set up in a minute, Sell in seconds

+
+
+
+ + + +
+
+
+

+ OpenERP's Point of Sale introduces a super clean interface with no installation required + that runs online and offline on modern hardwares. +

+

+ It's full integration with the company inventory and accounting, gives you real time statistics and + consolidations amongst all shops without the hassle of integrating several applications. +

+
+ Start your free trial +
+
+
+
+
+
+
+ Start your free trial +
+
+
+
+
+
+

A very friendly Point of Sale

+

Set up in a minute, Sell in seconds

+
+
+

+ OpenERP's Point of Sale introduces a super clean interface with no installation required + that runs online and offline on modern hardwares. +

+

+ It's full integration with the company inventory and accounting, gives you real time statistics and + consolidations amongst all shops without the hassle of integrating several applications. +

+
+ Start your free trial +
+
+
+
+ + + +
+
+
+
+
+
+
+
+
+
+ +
+
+
+

A very friendly Point of Sale

+

Set up in a minute, Sell in seconds

+
+
+
+ + + +
+
+
+

+ OpenERP's Point of Sale introduces a super clean interface with no installation required + that runs online and offline on modern hardwares. +

+

+ It's full integration with the company inventory and accounting, gives you real time statistics and + consolidations amongst all shops without the hassle of integrating several applications. +

+
+ Start your free trial +
+
+
+
+
+ +