Frédéric van der Essen
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -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 = $("<div class='oe_snippet'></div>");
|
||||
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();
|
||||
}
|
||||
|
||||
});
|
||||
@@ -0,0 +1,126 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>OpenERP Snippet Editor</title>
|
||||
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
|
||||
<link href='//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="/web/webclient/css">
|
||||
<link rel="stylesheet" href="css/snippets.css">
|
||||
|
||||
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
|
||||
<script src='js/snippets.js'></script>
|
||||
</head>
|
||||
<body class='oe_styling_v8 oe_snippet_demo'>
|
||||
<div class='oe_snippet_editor'>
|
||||
<div class='oe_snippet_list'>
|
||||
<div class='oe_snippet' name='Screenshot' selafter='.oe_span6' selinside='.oe_row'>
|
||||
<div class="oe_span6">
|
||||
<div class="oe_demo oe_picture oe_screenshot">
|
||||
<a href="https://www.openerp.com/saas_master/demo?lang=en_US&module=point_of_sale">
|
||||
<img src="https://www.openerp.com/apps/point_of_sale/pos_sc_02.jpg">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='oe_snippet' name='Introduction' selafter='.oe_container'>
|
||||
<section class="oe_container">
|
||||
<div class="oe_row oe_spaced">
|
||||
<div class="oe_span12">
|
||||
<h2 class="oe_slogan">A very friendly Point of Sale</h2>
|
||||
<h3 class="oe_slogan">Set up in a minute, Sell in seconds</h3>
|
||||
</div>
|
||||
<div class="oe_span6">
|
||||
<div class="oe_demo oe_picture oe_screenshot">
|
||||
<a href="https://www.openerp.com/saas_master/demo?lang=en_US&module=point_of_sale">
|
||||
<img src="https://www.openerp.com/apps/point_of_sale/pos_sc_02.jpg">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="oe_span6">
|
||||
<p class='oe_mt32'>
|
||||
OpenERP's Point of Sale introduces a super clean interface with no installation required
|
||||
that runs online and offline on modern hardwares.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<div class="oe_centeralign oe_websiteonly">
|
||||
<a href="http://www.openerp.com/start" class="oe_button oe_big oe_tacky">Start your <span class="oe_emph">free</span> trial</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class='oe_snippet' name='Call To Action' selafter='p,h1,h2,h3,h4,h5,ul,ol' selinside='.oe_span6'>
|
||||
<div class="oe_centeralign oe_websiteonly">
|
||||
<a href="http://www.openerp.com/start" class="oe_button oe_big oe_tacky">Start your <span class="oe_emph">free</span> trial</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class='oe_snippet' name='Alternate Paragraph'selafter='.oe_container'>
|
||||
<section class="oe_container oe_dark">
|
||||
<div class="oe_row oe_spaced">
|
||||
<div class="oe_span12">
|
||||
<h2 class="oe_slogan">A very friendly Point of Sale</h2>
|
||||
<h3 class="oe_slogan">Set up in a minute, Sell in seconds</h3>
|
||||
</div>
|
||||
<div class="oe_span6">
|
||||
<p class='oe_mt32'>
|
||||
OpenERP's Point of Sale introduces a super clean interface with no installation required
|
||||
that runs online and offline on modern hardwares.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<div class="oe_centeralign oe_websiteonly">
|
||||
<a href="http://www.openerp.com/start" class="oe_button oe_big oe_tacky">Start your <span class="oe_emph">free</span> trial</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="oe_span6">
|
||||
<div class="oe_demo oe_picture oe_screenshot">
|
||||
<a href="https://www.openerp.com/saas_master/demo?lang=en_US&module=point_of_sale">
|
||||
<img src="https://www.openerp.com/apps/point_of_sale/pos_sc_02.jpg">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class='oe_snippet oe_new' name='New Snippet'>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='oe_page' contenteditable=true>
|
||||
|
||||
<section class="oe_container">
|
||||
<div class="oe_row oe_spaced">
|
||||
<div class="oe_span12">
|
||||
<h2 class="oe_slogan">A very friendly Point of Sale</h2>
|
||||
<h3 class="oe_slogan">Set up in a minute, Sell in seconds</h3>
|
||||
</div>
|
||||
<div class="oe_span6">
|
||||
<div class="oe_demo oe_picture oe_screenshot">
|
||||
<a href="https://www.openerp.com/saas_master/demo?lang=en_US&module=point_of_sale">
|
||||
<img src="https://www.openerp.com/apps/point_of_sale/pos_sc_02.jpg">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="oe_span6">
|
||||
<p class='oe_mt32'>
|
||||
OpenERP's Point of Sale introduces a super clean interface with no installation required
|
||||
that runs online and offline on modern hardwares.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<div class="oe_centeralign oe_websiteonly">
|
||||
<a href="http://www.openerp.com/start" class="oe_button oe_big oe_tacky">Start your <span class="oe_emph">free</span> trial</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user