pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] website snippet: background option for paralax and fix banner

Browse Source 
bzr revid: chm@openerp.com-20130927124116-o2244s5ufu18pvcx
This commit is contained in:
Christophe Matthieu
2013-09-27 14:41:16 +02:00
parent 03348a0a9f
commit 60e2a03700
6 changed files with 97 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/css/editor.css
+3 -2
View File
@@ -1,4 +1,4 @@
@charset "UTF-8";
@charset "utf-8";
/* ---- CKEditor Minimal Reset ---- */
.navbar.navbar-inverse .cke_chrome {
border: none;
@@ -268,7 +268,8 @@ table.editorbar-panel td.selected {
display: block;
height: 48px;
margin: 0px;
margin-bottom: -48px;
margin-top: -4px;
margin-bottom: -44px;
-webkit-transition: margin 250ms linear;
width: 100%;
position: absolute;
addons/website/static/src/css/editor.sass
+2 -1
View File
@@ -232,7 +232,8 @@ table.editorbar-panel
display: block
height: 48px
margin: 0px
margin-bottom: -48px
margin-top: -4px
margin-bottom: -44px
-webkit-transition: margin 250ms linear
width: 100%
position: absolute
addons/website/static/src/css/website.css
+12 -2
View File
@@ -339,10 +339,16 @@ footer {
/* Parallax Theme */
.parallax_full {
background: #eeeeee url(/website/static/src/img/parallax/parallax_bg.jpg) bottom center repeat fixed;
background: #eeeeee top left repeat;
min-height: 650px;
width: 100%;
z-index: -999;
overflow: hidden;
position: relative;
}
.parallax_full > img {
position: absolute;
top: 0;
left: 0;
}
/* -- Hack for removing double scrollbar from mobile preview -- */
@@ -388,3 +394,7 @@ ul.nav-stacked > li > a {
top: -10px;
display: none;
}
::selection {
background: rgba(150, 150, 220, 0.3);
}
addons/website/static/src/css/website.sass
+10 -2
View File
@@ -258,10 +258,15 @@ footer
/* Parallax Theme */
.parallax_full
background: #eee url(/website/static/src/img/parallax/parallax_bg.jpg) bottom center repeat fixed
background: #eee top left repeat
min-height: 650px
width: 100%
z-index: -999
overflow: hidden
position: relative
> img
position: absolute
top: 0
left: 0
/* -- Hack for removing double scrollbar from mobile preview -- */
div#mobile-preview.modal
@@ -296,3 +301,6 @@ ul.nav-stacked > li > a
display: none
/*&:hover .js_publish*/
/* display: block*/
::selection
background: rgba(150, 150, 220, 0.3)
addons/website/static/src/js/website.snippets.js
+52 -8
View File
@@ -710,7 +710,7 @@
load_style_options: function () {
var self = this;
var $styles = this.$overlay.find('.oe_options');
var $ul = $styles.find('ul');
var $ul = $styles.find('ul:first');
_.each(this.parent.style_templates, function (val, key) {
if (!self.parent.dom_filter(val.selector).is(self.$target)) {
return;
@@ -998,12 +998,6 @@
this.change_background();
this.change_style();
this.change_size();
// remove cke image seletor
this.$target.on('mousedown mouseup', '.carousel-inner .item > img', function (event) {
event.preventDefault();
return false;
});
},
on_add: function (e) {
e.preventDefault();
@@ -1043,7 +1037,7 @@
$ul.find("li").removeClass("active");
var selected = $ul.find('[data-value="' + bg + '"], [data-value="' + bg.replace(/.*:\/\/[^\/]+/, '') + '"]')
.addClass('active').length;
this.$editor.find('.oe_custom_bg b').val(selected ? "" : bg);
this.$editor.find('.oe_custom_bg b').html(selected ? "" : bg);
},
change_background: function () {
var self = this;
@@ -1131,6 +1125,56 @@
}
});
website.snippet.editorRegistry.parallax = website.snippet.editorRegistry.resize.extend({
start : function () {
this._super();
this.change_background();
},
onFocus: function () {
this.$imagebg = $("<img/>");
this.$imagebg.prependTo(this.$target);
this.set_options_background();
this._super();
},
onBlur : function () {
this._super();
this.$imagebg.remove();
},
set_options_background: function () {
var bg = this.$target.css("background-image").replace(/url\(|\)/g, "");
this.$imagebg.attr("src", bg);
var $ul = this.$editor.find('ul[name="parallax-background"]');
$ul.find("li").removeClass("active");
var selected = $ul.find('[data-value="' + bg + '"], [data-value="' + bg.replace(/.*:\/\/[^\/]+/, '') + '"]')
.addClass('active').length;
this.$editor.find('.oe_custom_bg b').html(selected ? "" : bg);
},
change_background: function () {
var self = this;
var $ul = this.$editor.find('ul[name="parallax-background"]');
var $li = $ul.find("li");
$li.on('click', function (event) {
$li.removeClass("active");
$(this).addClass("active");
self.$editor.find('input').val("");
})
.on('mouseover', function (event) {
if ($(this).data("value")) {
var src = $(this).data("value");
self.$imagebg.attr('src', src);
self.$target.css("background-image", "url(" + src + ")");
}
})
.on('mouseout', function (event) {
var src = $ul.find('li.active').data("value");
self.$imagebg.attr('src', src);
self.$target.css("background-image", "url(" + src + ")");
});
},
});
website.snippet.animationRegistry.vomify = website.snippet.Animation.extend({
start: function() {
this._super();
addons/website/static/src/xml/website.snippets.xml
+18 -1
View File
@@ -797,7 +797,24 @@
<div t-name="website.snippets.parallax" data-snippet-id='parallax' data-category='effect' data-selector-children='.oe_structure, [data-oe-type=html]'>
<div class='oe_snippet_thumbnail'>Parallax</div>
<section class="oe_snippet_body parallax_full oe_structure">
<li class="oe_snippet_options dropdown-submenu">
<a tabindex="-1" href="#">Background</a>
<ul class="dropdown-menu" name="parallax-background">
<li data-value="/website/static/src/img/parallax/parallax_bg.jpg"><a>Parallax</a></li>
<li data-value="/website/static/src/img/banner/aqua.jpg"><a>Aqua</a></li>
<li data-value="/website/static/src/img/banner/baby_blue.jpg"><a>Baby Blue</a></li>
<li data-value="/website/static/src/img/banner/black.jpg"><a>Black</a></li>
<li data-value="/website/static/src/img/banner/color_splash.jpg"><a>Color Splash</a></li>
<li data-value="/website/static/src/img/banner/greenfields.jpg"><a>Greenfields</a></li>
<li data-value="/website/static/src/img/banner/landscape.jpg"><a>Landscape</a></li>
<li data-value="/website/static/src/img/banner/mango.jpg"><a>Mango</a></li>
<li data-value="/website/static/src/img/banner/flower.jpg"><a>Purple</a></li>
<li class="oe_custom_bg"><b></b></li>
</ul>
</li>
<section class="oe_snippet_body parallax_full oe_structure" style="background-image: url(/website/static/src/img/parallax/parallax_bg.jpg)">
<div class="container">
<div class="row">
<div class="col-md-12 mt128 mb32">