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

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

@ -165,13 +165,9 @@
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($target.length && !self.editor_busy) {
if($selected_target != $target){
if($selected_target){
$selected_target.data('overlay').removeClass('oe_selected');
}
@ -179,6 +175,9 @@
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>

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

@ -163,7 +163,6 @@
<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">
@ -181,9 +180,7 @@
<a class="carousel-control left" href="#myCarousel" data-slide="prev"></a>
<a class="carousel-control right" href="#myCarousel" data-slide="next"></a>
</div>
</section>
<div>
<section class="container" data-snippet-id="resize">
<div class="row">
<div class="col-md-12 text-center" data-snippet-id="colmd">
@ -194,7 +191,7 @@
</section>
<div class="dark mt64">
<section class="container" data-snippet-id="resize">
<section class="dark 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" />
@ -255,7 +252,6 @@
</div>
</div>
</section>
</div>
</t>
</template>