odoo
/
odoo
2
0
Fork 0
Code Pull Requests Releases Activity

[IMP] website: layout options 

bzr revid: chm@openerp.com-20130912145302-39eme37759sjm3rv
This commit is contained in:
Christophe Matthieu 2013-09-12 16:53:02 +02:00
parent a086a2eb4d
commit e45e3c22f6
5 changed files with 146 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
addons/website/static/src/css/editor.css
View File

@ -1,3 +1,4 @@
@charset "utf-8";
/* ---- CKEditor Minimal Reset ---- */
.navbar.navbar-inverse .cke_chrome {
border: none;
@ -24,7 +25,7 @@
width: 100%;
padding: 2px;
margin: 0;
z-index: 10000;
z-index: 20000;
background-color: #414141;
background: -webkit-linear-gradient(#646060, #262626);
box-sizing: border-box;
@ -118,7 +119,7 @@ table.editorbar-panel td.selected {
background: #282828;
box-shadow: 0px 10px 10px -10px black inset;
overflow-y: auto;
z-index: 100;
z-index: 20000;
}
#oe_snippets .nav-pills {
padding: 3px 8px;
@ -217,7 +218,7 @@ table.editorbar-panel td.selected {
}
.oe_drop_zone.oe_hover {
background: rgba(0, 255, 133, 0.22);
z-index: 97;
z-index: 1001;
}
/* ---- SNIPPET MANIPULATOR ---- */
@ -257,23 +258,33 @@ table.editorbar-panel td.selected {
}
.oe_overlay .oe_overlay_options {
display: none;
z-index: 99;
z-index: 1002;
}
.oe_overlay .oe_overlay_options .oe_option {
top: 50%;
left: 50%;
pointer-events: auto;
position: absolute;
display: block;
z-index: 1002;
}
.oe_overlay .oe_overlay_options .oe_option.n {
top: 0px;
top: -11px;
}
.oe_overlay .oe_overlay_options .oe_option.e {
right: 0px;
left: auto;
right: -6px;
}
.oe_overlay .oe_overlay_options .oe_option.s {
bottom: 0px;
top: auto;
bottom: -10px;
}
.oe_overlay .oe_overlay_options .oe_option.w {
left: 0px;
left: -6px;
}
.oe_overlay .oe_overlay_options .oe_option > a {
text-decoration: none;
font-size: 1.2em;
}
.oe_overlay.oe_active .oe_overlay_options {
display: block;

25
addons/website/static/src/css/editor.sass
View File

@ -25,7 +25,7 @@
width: 100%
padding: 2px
margin: 0
z-index: 10000
z-index: 20000
background-color: #414141
background: -webkit-linear-gradient(#646060, #262626)
box-sizing: border-box
@ -109,7 +109,7 @@ table.editorbar-panel
background: rgb(40,40,40)
box-shadow: 0px 10px 10px -10px black inset
overflow-y: auto
z-index: 100
z-index: 20000
.nav-pills
padding: 3px 8px
background: #444444
@ -195,7 +195,7 @@ table.editorbar-panel
border-radius: 3px
&.oe_hover
background: rgba(0, 255, 133, 0.22)
z-index: 97
z-index: 1001
/* ---- SNIPPET MANIPULATOR ---- */
@ -229,18 +229,27 @@ table.editorbar-panel
.oe_overlay_options
display: none
z-index: 99
z-index: 1002
.oe_option
top: 50%
left: 50%
pointer-events: auto
position: absolute
display: block
z-index: 1002
&.n
top: 0px
top: -11px
&.e
right: 0px
left: auto
right: -6px
&.s
bottom: 0px
top: auto
bottom: -10px
&.w
left: 0px
left: -6px
> a
text-decoration: none
font-size: 1.2em
&.oe_active .oe_overlay_options
display: block

35
addons/website/static/src/js/website.snippets.js
View File

@ -165,19 +165,18 @@
if (!self.active) {
return;
}
if (self.editor_busy) {
if($selected_target){
$selected_target.data('overlay').removeClass('oe_selected');
}
}
var $target = $(event.srcElement).parents("[data-snippet-id]:first");
if($target.length && $selected_target != $target){
if($selected_target){
$selected_target.data('overlay').removeClass('oe_selected');
if($target.length && !self.editor_busy) {
if($selected_target != $target){
if($selected_target){
$selected_target.data('overlay').removeClass('oe_selected');
}
$selected_target = $target;
self.create_overlay($target);
$target.data('overlay').addClass('oe_selected');
}
$selected_target = $target;
self.create_overlay($target);
$target.data('overlay').addClass('oe_selected');
} else if($selected_target) {
$selected_target.data('overlay').removeClass('oe_selected');
}
});
},
@ -373,14 +372,7 @@
$targets.each(function () {
var $target = $(this);
if (!$target.data('overlay')) {
var $zone = $(
'<div class="oe_overlay">'+
' <div class="oe_overlay_options">'+
' <ul class="oe_option n w"></ul>'+
' <ul class="oe_option n"></ul>'+
' <ul class="oe_option n e"></ul>'+
' </div>'+
'</div>');
var $zone = $(openerp.qweb.render('website.snippet_overlay'));
$zone.appendTo('#oe_manipulators');
$zone.data('target',$target);
$target.data('overlay',$zone);
@ -489,7 +481,8 @@
* This method is called after init and _readXMLData
*/
start: function () {
if(this.$editor) this.$editor.prependTo(this.$overlay.find(".oe_overlay_options .oe_option.n.w"));
if(this.$editor) this.$editor.prependTo(this.$overlay.find(".oe_overlay_options .oe_option.n.w ul"));
else this.$overlay.find(".oe_overlay_options .oe_option.n.w").hide();
},
/*
@ -548,7 +541,7 @@
this.$overlay.append($box.find(".oe_handles").html());
var $editor = $box.find(".oe_snippet_options");
$editor.prependTo(this.$overlay.find(".oe_overlay_options .oe_option.n.w"));
$editor.prependTo(this.$overlay.find(".oe_overlay_options .oe_option.n.w ul"));
$editor.on('click', '.js_box_remove', function () {
self.$target.detach();

41
addons/website/static/src/xml/website.snippets.xml
View File

@ -21,6 +21,24 @@
</div>
</t>
<t t-name="website.snippet_overlay">
<div class="oe_overlay">
<div class="oe_overlay_options">
<div class="dropdown oe_option n w">
<a data-toggle="dropdown" href="#"><i class="icon icon-cog"></i></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"></ul>
</div>
<div class="oe_option n"><a href="#" class="js_box_move"><i class="icon icon-move"></i></a></div>
<div class="dropdown oe_option n e">
<a data-toggle="dropdown" href="#"><i class="icon icon-remove"></i></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href="#" class="button js_box_remove">Remove this snippet</a></li>
</ul>
</div>
</div>
</div>
</t>
<t t-name="website.snippet_manipulator">
<div class='oe_snippet_manipulator'></div>
</t>
@ -28,15 +46,6 @@
<!-- Snippets -->
<div t-name="website.snippets.resize" data-snippet-id='resize'>
<!-- editor bar to display inside the top edit bar -->
<li class='oe_snippet_options'>
<a href="#" class="button js_box_move"><i class='icon icon-move'></i></a>
</li>
<li class='oe_snippet_options'>
<a href="#" class="button js_box_remove"><i class="icon icon-remove"></i></a>
</li>
<!-- custom data for the widget -->
<div class='oe_handles'>
<div class='oe_handle n'></div>
@ -50,10 +59,18 @@
<!-- editor bar to display inside the top edit bar -->
<li class='oe_snippet_options'>
<a href="#" class="button js_add"><i class="icon icon-plus-sign"></i></a>
<a href="#" class="button js_add">Add layer</a>
</li>
<li class='oe_snippet_options'>
<a href="#" class="button js_remove"><i class="icon icon-minus-sign"></i></a>
<a href="#" class="button js_remove">Remove current layer</a>
</li>
<li>
<div class="dropdown">
<a data-toggle="dropdown" href="#">test</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li>inside</li>
</ul>
</div>
</li>
<li class='oe_snippet_options'>
<select name="carousel-background">
@ -112,7 +129,7 @@
<div class='oe_snippet_thumbnail oe_label' style='background-image:radial-gradient(red,orange,yellow,green,blue);'>Surprise!</div>
</div>
<div t-name="website.snippets.spacer" data-snippet-id='spacer' data-category='structure' data-action='insert' data-selector-siblings='.container'>
<div t-name="website.snippets.spacer" data-snippet-id='resize' data-category='structure' data-action='insert' data-selector-siblings='.container'>
<div class='oe_snippet_thumbnail oe_label'>Spacer</div>
<div class="oe_snippet_body container mt32"></div>
</div>

138
addons/website/views/views.xml
View File

@ -163,99 +163,95 @@
<template id="homepage" page="True">
<t t-call="website.layout">
<section>
<div id="myCarousel" data-snippet-id="carousel" class="carousel slide" data-interval="1000000">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active" style="background-image: url(/website/static/src/img/greenfields.jpg); background-size: cover;">
<div class="container">
<div class="content" style="padding-top: 90px; padding-bottom:45px;">
<h1>Create Awesome Websites</h1>
<h3>Super easy, fully flexible</h3>
<a href="/page/website.contactus" class="btn btn-success btn-large mt16">Contact us</a>
</div>
<div id="myCarousel" data-snippet-id="carousel" class="carousel slide" data-interval="1000000">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active" style="background-image: url(/website/static/src/img/greenfields.jpg); background-size: cover;">
<div class="container">
<div class="content" style="padding-top: 90px; padding-bottom:45px;">
<h1>Create Awesome Websites</h1>
<h3>Super easy, fully flexible</h3>
<a href="/page/website.contactus" class="btn btn-success btn-large mt16">Contact us</a>
</div>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev"></a>
<a class="carousel-control right" href="#myCarousel" data-slide="next"></a>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev"></a>
<a class="carousel-control right" href="#myCarousel" data-slide="next"></a>
</div>
<section class="container" data-snippet-id="resize">
<div class="row">
<div class="col-md-12 text-center" data-snippet-id="colmd">
<h1>Welcome To Your New Homepage,</h1>
<h2>where <b>everything</b> can be <em>customized</em></h2>
</div>
</div>
</section>
<div>
<section class="container" data-snippet-id="resize">
<div class="dark mt64">
<section class="dark container" data-snippet-id="resize">
<div class="row">
<div class="col-md-12 text-center" data-snippet-id="colmd">
<h1>Welcome To Your New Homepage,</h1>
<h2>where <b>everything</b> can be <em>customized</em></h2>
<div class="col-md-5" data-snippet-id="colmd">
<img class="img-rounded img-responsive" src="/website/static/src/img/island.jpg" />
</div>
</div>
</section>
<div class="dark mt64">
<section class="container" data-snippet-id="resize">
<div class="row">
<div class="col-md-5" data-snippet-id="colmd">
<img class="img-rounded img-responsive" src="/website/static/src/img/island.jpg" />
</div>
<div class="col-md-6 col-lg-offset-1" data-snippet-id="colmd">
<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-lg btn-primary">Call To <em>Action</em></a></div>
</div>
</div>
</section>
</div>
<section class="container" data-snippet-id="resize">
<div class="row">
<div class="col-md-12 text-center" data-snippet-id="colmd">
<h2 class="mt48">Ut enim ad minim veniam</h2>
</div>
</div>
<div class="row mt32">
<div class="col-md-4" data-snippet-id="colmd">
<img class="img-rounded img-responsive" src="/website/static/src/img/china_thumb.jpg" />
<h4 class="mt16">Cillum Dolore</h4>
<p>
<div class="col-md-6 col-lg-offset-1" data-snippet-id="colmd">
<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>
</div>
<div class="col-md-4" data-snippet-id="colmd">
<img class="img-rounded img-responsive" 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="col-md-4" data-snippet-id="colmd">
<img class="img-rounded img-responsive" 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 class="text-center"> <a href="http://www.openerp.com/start" class="btn mt16 btn-lg btn-primary">Call To <em>Action</em></a></div>
</div>
</div>
</section>
</div>
<section class="container" data-snippet-id="resize">
<div class="row">
<div class="col-md-12 text-center" data-snippet-id="colmd">
<h2 class="mt48">Ut enim ad minim veniam</h2>
</div>
</div>
<div class="row mt32">
<div class="col-md-4" data-snippet-id="colmd">
<img class="img-rounded img-responsive" 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="col-md-4" data-snippet-id="colmd">
<img class="img-rounded img-responsive" 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="col-md-4" data-snippet-id="colmd">
<img class="img-rounded img-responsive" 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>
</t>
</template>