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

[IMP] website snippet: add group for styles snippets, add custom picture with style snippet, mouseover and mouseout preview, fix dark css class in demo data 

bzr revid: chm@openerp.com-20131120115250-etqv5ofqguze0zsj
This commit is contained in:
Christophe Matthieu 2013-11-20 12:52:50 +01:00
parent 00580f106e
commit 6b10be15b2
10 changed files with 318 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

151
addons/website/static/src/css/website.css
View File

@ -257,6 +257,73 @@ footer {
margin-bottom: 0px;
}
/* ---- HOMEPAGE THEME CUSTOMIZATION ---- */
.nav-hierarchy {
padding-left: 16px;
}
#themes-list .well {
padding: 0 0 20px 0;
}
/* -- Hack for removing double scrollbar from mobile preview -- */
div#mobile-preview.modal {
overflow: hidden;
overflow-y: hidden;
}
ul.nav-stacked > li > a {
padding: 2px 15px;
}
#customize-menu .dropdown-header {
text-transform: uppercase;
}
/* ---- PUBLISH ---- */
.css_unpublish, .css_publish {
display: none;
}
.css_published .css_unpublish, .css_unpublished .css_publish {
display: block;
}
[data-publish='off'] {
opacity: 0.5;
}
/* ---- END of PUBLISH ---- */
::selection {
background: rgba(150, 150, 220, 0.3);
}
.logo-img {
width: 220px;
}
.oe_demo {
position: relative;
}
.oe_demo img {
width: 100%;
}
.oe_demo div {
position: absolute;
left: 0;
background-color: rgba(0, 0, 0, 0.4);
opacity: 0.85;
bottom: 0px;
width: 100%;
padding: 7px;
color: white;
font-weight: bold;
}
.oe_demo div a {
color: white;
}
/* ---- SNIPPETS --- */
.carousel-inner .item {
height: 100%;
background-size: 100%;
@ -331,23 +398,6 @@ footer {
right: 10px;
}
/* ---- HOMEPAGE THEME CUSTOMIZATION ---- */
.dark {
background: #eff8f8;
background: rgba(100, 200, 200, 0.14);
-webkit-box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset;
-moz-box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset;
box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset;
}
.nav-hierarchy {
padding-left: 16px;
}
#themes-list .well {
padding: 0 0 20px 0;
}
/* Parallax Theme */
.parallax_quote {
background: url("/website/static/src/img/parallax/quote.png") center center no-repeat fixed;
@ -374,59 +424,32 @@ footer {
height: 450px;
}
/* -- Hack for removing double scrollbar from mobile preview -- */
div#mobile-preview.modal {
overflow: hidden;
overflow-y: hidden;
/* Background */
.oe_dark {
background: #eff8f8;
background: rgba(100, 200, 200, 0.14);
-webkit-box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset;
-moz-box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset;
box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset;
background-image: none !important;
}
ul.nav-stacked > li > a {
padding: 2px 15px;
.oe_black {
background-color: rgba(0, 0, 0, 0.9);
background-image: none !important;
}
#customize-menu .dropdown-header {
text-transform: uppercase;
.oe_green {
background-color: rgba(0, 128, 0, 0.8);
background-image: none !important;
}
/* ---- PUBLISH ---- */
.css_unpublish, .css_publish {
display: none;
.oe_red {
background-color: rgba(255, 0, 0, 0.8);
background-image: none !important;
}
.css_published .css_unpublish, .css_unpublished .css_publish {
display: block;
}
[data-publish='off'] {
opacity: 0.5;
}
/* ---- END of PUBLISH ---- */
::selection {
background: rgba(150, 150, 220, 0.3);
}
.logo-img {
width: 220px;
}
.oe_demo {
position: relative;
}
.oe_demo img {
width: 100%;
}
.oe_demo div {
position: absolute;
left: 0;
background-color: rgba(0, 0, 0, 0.4);
opacity: 0.85;
bottom: 0px;
width: 100%;
padding: 7px;
color: white;
font-weight: bold;
}
.oe_demo div a {
color: white;
.oe_custom_bg {
height: 100%;
background-size: 100%;
}

140
addons/website/static/src/css/website.sass
View File

@ -186,6 +186,65 @@ footer
// .nav > li a
// display: block
/* ---- HOMEPAGE THEME CUSTOMIZATION ---- */
.nav-hierarchy
padding-left: 16px
#themes-list .well
padding: 0 0 20px 0
/* -- Hack for removing double scrollbar from mobile preview -- */
div#mobile-preview.modal
overflow: hidden
overflow-y: hidden
ul.nav-stacked > li > a
padding: 2px 15px
#customize-menu .dropdown-header
text-transform: uppercase
/* ---- PUBLISH ---- */
.css_unpublish, .css_publish
display: none
.css_published .css_unpublish, .css_unpublished .css_publish
display: block
[data-publish='off']
opacity: 0.5
/* ---- END of PUBLISH ---- */
::selection
background: rgba(150, 150, 220, 0.3)
.logo-img
width: 220px
.oe_demo
position: relative
img
width: 100%
div
position: absolute
left: 0
background-color: rgba(0,0,0,0.4)
opacity: 0.85
bottom: 0px
width: 100%
padding: 7px
color: white
font-weight: bold
a
color: white
/* ---- SNIPPETS --- */
.carousel-inner .item
height: 100%
background-size: 100%
@ -249,20 +308,6 @@ footer
&.right span
right: 10px
/* ---- HOMEPAGE THEME CUSTOMIZATION ---- */
.dark
background: #eff8f8
background: rgba(100, 200, 200, 0.14)
-webkit-box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset
-moz-box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset
box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset
.nav-hierarchy
padding-left: 16px
#themes-list .well
padding: 0 0 20px 0
/* Parallax Theme */
@ -284,50 +329,25 @@ footer
height: 300px
&.oe_big
height: 450px
/* -- Hack for removing double scrollbar from mobile preview -- */
div#mobile-preview.modal
overflow: hidden
overflow-y: hidden
ul.nav-stacked > li > a
padding: 2px 15px
#customize-menu .dropdown-header
text-transform: uppercase
/* ---- PUBLISH ---- */
.css_unpublish, .css_publish
display: none
.css_published .css_unpublish, .css_unpublished .css_publish
display: block
[data-publish='off']
opacity: 0.5
/* ---- END of PUBLISH ---- */
::selection
background: rgba(150, 150, 220, 0.3)
.logo-img
width: 220px
.oe_demo
position: relative
img
width: 100%
div
position: absolute
left: 0
background-color: rgba(0,0,0,0.4)
opacity: 0.85
bottom: 0px
width: 100%
padding: 7px
color: white
font-weight: bold
a
color: white
/* Background */
.oe_dark
background: #eff8f8
background: rgba(100, 200, 200, 0.14)
-webkit-box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset
-moz-box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset
box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset
background-image: none !important
.oe_black
background-color: rgba(0, 0, 0, 0.9)
background-image: none !important
.oe_green
background-color: rgba(0, 128, 0, 0.8)
background-image: none !important
.oe_red
background-color: rgba(255, 0, 0, 0.8)
background-image: none !important
.oe_custom_bg
height: 100%
background-size: 100%

6
addons/website/static/src/js/website.editor.js
View File

@ -834,6 +834,7 @@
events: {
'hidden.bs.modal': 'destroy',
'click button.save': 'save',
'click button[data-dismiss="modal"]': 'cancel',
},
init: function (editor) {
this._super();
@ -847,6 +848,8 @@
save: function () {
this.close();
},
cancel: function () {
},
close: function () {
this.$el.modal('hide');
},
@ -1127,6 +1130,9 @@
});
return this._super();
},
cancel: function () {
this.trigger('cancel');
},
/**
* Sets the provided image url as the dialog's value-to-save and

130
addons/website/static/src/js/website.snippets.editor.js
View File

@ -151,11 +151,12 @@
self.style_templates[snipped_id] = {
'snipped-id' : snipped_id,
'selector': $style.data('selector'),
'class': $style.find(".oe_snippet_class").text(),
'label': $style.find(".oe_snippet_label").text()
'class': $style.data("class"),
'label': $style.find(".oe_snippet_label").text(),
'group': $style.find(".oe_snippet_group").text()
};
});
$styles.remove();
$styles.addClass("hidden");
self.$snippets = $html.find(".tab-content > div > div").addClass("oe_snippet");
self.$el.append($html);
@ -530,11 +531,11 @@
website.snippet.editorRegistry = {};
website.snippet.Editor = openerp.Class.extend({
init: function (parent, dom) {
init: function (parent, dom, force_snippet_id) {
this.parent = parent;
this.$target = $(dom);
this.$overlay = this.$target.data('overlay');
this.snippet_id = this.$target.data("snippet-id");
this.snippet_id = force_snippet_id || this.$target.data("snippet-id");
this._readXMLData();
this.load_style_options();
this.get_parent_block();
@ -651,6 +652,10 @@
},
load_style_options: function () {
if (this.$target.data('snippetStyles')) {
return;
}
var self = this;
var $styles = this.$overlay.find('.oe_options');
var $ul = $styles.find('ul:first');
@ -660,30 +665,77 @@
}
var $li = $("<li class='oe_style'/>").data(val);
$li.append($('<a/>').text(val.label));
$ul.append($li);
if (self.$target.hasClass( "oe_snippet_" + $li.data("snipped-id") )) {
if (self.$target.hasClass( val.class )) {
$li.addClass("active");
}
$styles.removeClass("hidden");
});
$styles.on('click', 'li.oe_style a', _.bind(this.change_style, this));
},
change_style: function (event) {
var $li = $(event.currentTarget).parent();
var snipped_id = $li.data("snipped-id");
var active = $li.hasClass("active");
if (website.snippet.editorRegistry[snipped_id]) {
var snippet = new website.snippet.editorRegistry[snipped_id](this, this.$target);
snippet.drop_and_build_snippet(this.$target);
if (val.group.length) {
var $group = $ul.find("li.dropdown-submenu").filter(function () {
return $("a:first", this).text() === val.group;
});
if (!$group.length) {
$group = $('<li class="dropdown-submenu"><a href="#" tabindex="-1"/><ul class="dropdown-menu"/></li>');
$group.find("a").text(val.group);
$ul.append($group);
}
$group.find("ul").append($li);
} else {
$ul.append($li);
}
});
if ($ul.find("li").length) {
$styles.removeClass("hidden");
// il they are only one group, display in flat mode
var $groups = $ul.find("li.dropdown-submenu");
if ($groups.length === 1) {
$ul.append($groups.find("ul li"));
$groups.remove();
}
}
var _class = "oe_snippet_" + snipped_id + " " + ($li.data("class") || "");
if (active) {
this.$target.removeClass(_class);
} else {
this.$target.addClass(_class);
}
$li.toggleClass("active");
this.$target.data('snippetStyles', $styles);
this.change_style();
},
change_style: function () {
var self = this;
this.$overlay.find('.oe_options li.oe_style a')
.on('click', function (event) {
var $li = $(event.currentTarget).parent();
var active = $li.hasClass("active");
if ($li.hasClass("active")) {
self.$target.removeClass($li.data('class'));
} else {
var $prev = $li.parent("ul").find("li.active").removeClass("active");
if ($prev.length) {
self.$target.removeClass($prev.data('class'));
// active snippet after remove class
if (website.snippet.editorRegistry[$prev.data("snipped-id")]) {
new website.snippet.editorRegistry[$prev.data("snipped-id")](self.parent, self.$target, $prev.data("snipped-id"))
.drop_and_build_snippet(self.$target);
}
}
self.$target.addClass($li.data('class'));
}
// active snippet after add or remove class
if (website.snippet.editorRegistry[$li.data("snipped-id")]) {
new website.snippet.editorRegistry[$li.data("snipped-id")](self.parent, self.$target, $li.data("snipped-id"))
.drop_and_build_snippet(self.$target);
}
$li.toggleClass("active");
})
.on('mouseover', function (event) {
self.$target.removeClass(self.$overlay.find('.oe_options li.oe_style.active').data('class') || "");
self.$target.addClass($(event.currentTarget).parent().data('class') || "");
})
.on('mouseout', function (event) {
self.$target.removeClass($(event.currentTarget).parent().data('class') || "");
self.$target.addClass(self.$overlay.find('.oe_options li.oe_style.active').data('class') || "");
});
},
get_parent_block: function () {
@ -792,7 +844,7 @@
set_options_background: function (bg, ul_options) {
var $ul = this.$editor.find(ul_options);
var bg_value = (typeof bg === 'string' ? this.$target.find(bg) : $(bg)).css("background-image").replace(/url\(['"]*|['"]*\)/g, "");
var bg_value = (typeof bg === 'string' ? this.$target.find(bg) : $(bg)).css("background-image").replace(/url\(['"]*|['"]*\)|^none$/g, "");
// select in ul options
$ul.find("li").removeClass("active");
@ -1231,6 +1283,32 @@
}
});
website.snippet.editorRegistry.custom_background = website.snippet.Editor.extend({
drop_and_build_snippet: function() {
var self = this;
var active = this.$target.hasClass(this.$el.data("class"));
if (active) {
var bg_value = this.$target.css("background-image").replace(/url\(['"]*|['"]*\)|^none$/g, "");
var editor = new website.editor.ImageDialog();
editor.on('start', self, function (o) {o.url = bg_value;});
editor.on('save', self, function (o) {
self.$target.css("background-image", "url(" + o.url + ")");
});
editor.on('cancel', self, function () {
if (bg_value === "") {
self.$target.data("snippetStyles").find(".oe_style").filter(function () {
return $(this).data('snipped-id') === 'custom_background';
}).removeClass('active');
self.$target.removeClass(self.$el.data("class"));
}
});
editor.appendTo($('body'));
} else {
this.$target.css("background-image", "");
}
}
});
/*
* data-snippet-id automatically setted
* Don't need to add data-snippet-id="..." into the views

28
addons/website/views/snippets.xml
View File

@ -236,7 +236,7 @@
<img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_big_picture.png"/>
<span class="oe_snippet_thumbnail_title">Big Picture</span>
</div>
<section class="oe_snippet_body dark mt16 mb16">
<section class="oe_snippet_body oe_dark mt16 mb16">
<div class="container">
<div class="row">
<div class="col-md-12 text-center mt32 mb32">
@ -555,7 +555,7 @@
<img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_button.png"/>
<span class="oe_snippet_thumbnail_title">Button</span>
</div>
<section class="oe_snippet_body oe_snippet_darken dark">
<section class="oe_snippet_body oe_snippet_darken oe_dark">
<div class="container">
<div class="row">
<div class="col-md-12 text-center mt16 mb16">
@ -792,12 +792,26 @@
</div>
<div id="snippet_styles" class="hidden">
<div data-snippet-id='darken' data-selector='section'>
<div class='oe_snippet_label'>Enlight Background</div>
<div class='oe_snippet_class'>dark</div>
<div data-snippet-id='darken' data-selector='section' data-class="oe_dark">
<div class='oe_snippet_label'>Darken</div>
<div class='oe_snippet_group'>Background</div>
</div>
<div data-snippet-id='green' data-selector='section' data-class="oe_green">
<div class='oe_snippet_label'>Green</div>
<div class='oe_snippet_group'>Background</div>
</div>
<div data-snippet-id='red' data-selector='section' data-class="oe_red">
<div class='oe_snippet_label'>Red</div>
<div class='oe_snippet_group'>Background</div>
</div>
<div data-snippet-id='black' data-selector='section' data-class="oe_black">
<div class='oe_snippet_label'>Black</div>
<div class='oe_snippet_group'>Background</div>
</div>
<div data-snippet-id='custom_background' data-selector='section' data-class="oe_custom_bg">
<div class='oe_snippet_label'>Custom Picture...</div>
<div class='oe_snippet_group'>Background</div>
</div>
</div>
</div>

2
addons/website_blog/data/website_blog_demo.xml
View File

@ -73,7 +73,7 @@
</div>
</div>
</section>
<section class="dark mt16 mb16" data-snippet-id='big-picture'>
<section class="oe_dark mt16 mb16" data-snippet-id='big-picture'>
<div class="container">
<div class="row">
<div class="col-md-12 text-center mt32 mb32">

6
addons/website_event/data/event_demo.xml
View File

@ -142,7 +142,7 @@
</div>
<div class="container dark">
<div class="container oe_dark">
<div class="row">
<div class="col-md-12" data-snippet-id="colmd">
<h1 class="text-center">A great content...</h1>
@ -305,7 +305,7 @@
</div>
<div class="container dark">
<div class="container oe_dark">
<div class="row">
<div class="col-md-12" data-snippet-id="colmd">
<h1 class="text-center">A great content...</h1>
@ -480,7 +480,7 @@
</div>
<div class="container dark">
<div class="container oe_dark">
<div class="row">
<div class="col-md-12" data-snippet-id="colmd">
<h1 class="text-center">A great content...</h1>

14
addons/website_hr_recruitment/data/website_hr_recruitment_demo.xml
View File

@ -5,7 +5,7 @@
<record id="hr.job_marketing" model="hr.job">
<field name="website_published">True</field>
<field name="website_description" type="html">
<section data-snippet-id="text-block" class="mt16 mb16 dark">
<section data-snippet-id="text-block" class="mt16 mb16 oe_dark">
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-10 mb16 mt16">
@ -137,7 +137,7 @@
<record id="hr.job_developer" model="hr.job">
<field name="website_published">True</field>
<field name="website_description" type="html">
<section data-snippet-id="text-block" class="mt16 mb16 dark">
<section data-snippet-id="text-block" class="mt16 mb16 oe_dark">
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-10 mb16 mt16">
@ -270,7 +270,7 @@
<record id="hr.job_consultant" model="hr.job">
<field name="website_published">True</field>
<field name="website_description" type="html">
<section data-snippet-id="text-block" class="mt16 mb16 dark">
<section data-snippet-id="text-block" class="mt16 mb16 oe_dark">
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-10 mb16 mt16">
@ -403,7 +403,7 @@
<record id="hr.job_ceo" model="hr.job">
<field name="website_description" type="html">
<section data-snippet-id="text-block" class="mt16 mb16 dark">
<section data-snippet-id="text-block" class="mt16 mb16 oe_dark">
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-10 mb16 mt16">
@ -532,7 +532,7 @@
<record id="hr.job_cto" model="hr.job">
<field name="website_description" type="html">
<section data-snippet-id="text-block" class="mt16 mb16 dark">
<section data-snippet-id="text-block" class="mt16 mb16 oe_dark">
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-10 mb16 mt16">
@ -660,7 +660,7 @@
<record id="hr.job_trainee" model="hr.job">
<field name="website_description" type="html">
<section data-snippet-id="text-block" class="mt16 mb16 dark">
<section data-snippet-id="text-block" class="mt16 mb16 oe_dark">
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-10 mb16 mt16">
@ -788,7 +788,7 @@
<record id="hr.job_hrm" model="hr.job">
<field name="website_description" type="html">
<section data-snippet-id="text-block" class="mt16 mb16 dark">
<section data-snippet-id="text-block" class="mt16 mb16 oe_dark">
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-10 mb16 mt16">

4
addons/website_hr_recruitment/views/website_hr_recruitment.xml
View File

@ -86,7 +86,7 @@
</div>
<div class="oe_structure">
<section data-snippet-id="cta" class="darken">
<section data-snippet-id="cta" class="oe_dark">
<div class="container">
<div class="row">
<div class="col-md-12 text-center mt16 mb16">
@ -220,7 +220,7 @@
we will get back to you soon.
</p>
</div>
<section data-snippet-id="cta" class="darken">
<section data-snippet-id="cta" class="oe_dark">
<div class="container">
<div class="row">
<div class="col-md-12 text-center mt16 mb16">

14
addons/website_sale/website_sale_demo.xml
View File

@ -13,7 +13,7 @@
<field name="website_sequence">5</field>
<field name="website_style_ids" eval="[(6,0,[ref('website_sale.image_full')])]"/>
<field name="website_description" type="html">
<section data-snippet-id="text-image" class="mt16 mb16 dark">
<section data-snippet-id="text-image" class="mt16 mb16 oe_dark">
<div class="container">
<div class="row">
<div class="col-md-5 col-md-offset-1 mt64">
@ -97,7 +97,7 @@
</div>
</div>
</section>
<section data-snippet-id="text-image" class="mt16 mb16 dark">
<section data-snippet-id="text-image" class="mt16 mb16 oe_dark">
<div class="container">
<div class="row">
<div class="col-md-5 col-md-offset-1 mt16">
@ -175,7 +175,7 @@ Ultrafast wireless
iOS7
</field>
<field name="website_description" type="html">
<section data-snippet-id="text-image" class="mt16 mb16 dark">
<section data-snippet-id="text-image" class="mt16 mb16 oe_dark">
<div class="container">
<div class="row">
<div class="col-md-5 col-md-offset-1 mt64">
@ -213,7 +213,7 @@ iOS7
</div>
</div>
</section>
<section data-snippet-id="text-image" class="mb16 dark">
<section data-snippet-id="text-image" class="mb16 oe_dark">
<div class="container">
<div class="row">
<div class="col-md-5 col-md-offset-1 mt32">
@ -251,7 +251,7 @@ iOS7
</div>
</div>
</section>
<section data-snippet-id="text-image" class="mt16 mb16 dark">
<section data-snippet-id="text-image" class="mt16 mb16 oe_dark">
<div class="container">
<div class="row">
<div class="col-md-5 col-md-offset-1 mt64">
@ -358,7 +358,7 @@ Weight: 0.4 ounce
</div>
</div>
</section>
<section data-snippet-id="text-image" class="mb16 dark">
<section data-snippet-id="text-image" class="mb16 oe_dark">
<div class="container">
<div class="row">
<div class="text-center col-md-8 col-md-offset-2 mt16">
@ -450,7 +450,7 @@ Weight: 1.1 ounces</field>
</div>
</div>
</section>
<section data-snippet-id="text-image" class="mt16 mb16 dark">
<section data-snippet-id="text-image" class="mt16 mb16 oe_dark">
<div class="container">
<div class="row">
<div class="col-md-5 col-md-offset-1 mt64">