[MERGE] website: further work on the snippet editor
bzr revid: fva@openerp.com-20130821163052-8t7nqni7okn555mc
This commit is contained in:
Frédéric van der Essen
commit
d26b487b71
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -401,22 +401,92 @@
|
|||
|
||||
<template id="snippets">
|
||||
|
||||
<div class='oe_snippet' name='FooBar' data-selector-siblings='p,h1,h2,h3,h4,h5'>
|
||||
<div class='oe_snippet_thumbnail'>
|
||||
foobar
|
||||
</div>
|
||||
<div class='oe_snippet_body'>
|
||||
FOOBAR
|
||||
</div>
|
||||
<div class='oe_snippet' name='Spacer' data-selector-siblings='#wrap .container'>
|
||||
<div class='oe_snippet_thumbnail oe_label'>Spacer</div>
|
||||
<div class="oe_snippet_body container mt32"></div>
|
||||
</div>
|
||||
|
||||
<div class='oe_snippet' name='BarFoo' data-selector-childs='.container'>
|
||||
<div class='oe_snippet_thumbnail'>
|
||||
barfoo
|
||||
</div>
|
||||
<div class='oe_snippet_body'>
|
||||
BARFOO
|
||||
<div class='oe_snippet' name='FooBar' data-selector-siblings='#wrap .container'>
|
||||
<div class='oe_snippet_thumbnail oe_label'>
|
||||
Main Title
|
||||
</div>
|
||||
<section class="oe_snippet_body container">
|
||||
<div class="row">
|
||||
<div class="span12 text-center">
|
||||
<h1 class='mt64'>Welcome To Your New Homepage,</h1>
|
||||
<h2 class='mt32 subheader'>where <b><em>everything</em></b> can be customized </h2>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class='oe_snippet' name='BarFoo' data-selector-siblings='#wrap .container'>
|
||||
<section class="oe_snippet_body container">
|
||||
<div class="row">
|
||||
<div class="span12 text-center">
|
||||
<h2 class='mt48'>Ut enim ad minim veniam</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt32">
|
||||
<div class="span4">
|
||||
<img class='img-rounded' src="/website/static/src/img/china_thumb.jpg"/>
|
||||
<h4 class='mt16'>Cillum Dolore</h4>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
|
||||
sed do eiusmod tempor incididunt ut labore et dolore magna
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
|
||||
ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<img class='img-rounded' src="/website/static/src/img/desert_thumb.jpg"/>
|
||||
<h4 class='mt16'>Mollit Anim</h4>
|
||||
<p>
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit
|
||||
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
|
||||
occaecat cupidatat non proident, sunt in culpa qui officia
|
||||
deserunt mollit anim id est laborum
|
||||
</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<img class='img-rounded' src="/website/static/src/img/deers_thumb.jpg"/>
|
||||
<h4 class='mt16'>Nemo Enim Ipsam</h4>
|
||||
<p>
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
|
||||
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
|
||||
quae ab illo inventore veritatis et quasi architecto beatae vitae
|
||||
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class='oe_snippet' name='Header' data-selector-siblings='#wrap .container'>
|
||||
<section class="container oe_snippet_body">
|
||||
<div class="row">
|
||||
<div class="span5">
|
||||
<img class='img-rounded' src="/website/static/src/img/island.jpg"/>
|
||||
</div>
|
||||
<div class="span6 offset1">
|
||||
<p class='mt16'>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
|
||||
sed do eiusmod tempor incididunt ut labore et dolore magna
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
|
||||
ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</p>
|
||||
<p>
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit
|
||||
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
|
||||
occaecat cupidatat non proident, sunt in culpa qui officia
|
||||
deserunt mollit anim id est laborum
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<a href="http://www.openerp.com/start" class="btn mt16 btn-large btn-primary">Call To <em>Action</em></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue