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%;
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;
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;
+/* 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;
}
-[data-publish='off'] {
- opacity: 0.5;
+.oe_black {
+ background-color: rgba(0, 0, 0, 0.9);
+ background-image: none !important;
}
-/* ---- END of PUBLISH ---- */
-::selection {
- background: rgba(150, 150, 220, 0.3);
+.oe_green {
+ background-color: rgba(0, 128, 0, 0.8);
+ background-image: none !important;
}
-.logo-img {
- width: 220px;
+.oe_red {
+ background-color: rgba(255, 0, 0, 0.8);
+ background-image: none !important;
}
-.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%;
}
// .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%
&.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 */
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%
events: {
'hidden.bs.modal': 'destroy',
'click button.save': 'save',
+ 'click button[data-dismiss="modal"]': 'cancel',
},
init: function (editor) {
this._super();
save: function () {
this.close();
},
+ cancel: function () {
+ },
close: function () {
this.$el.modal('hide');
},
});
return this._super();
},
+ cancel: function () {
+ this.trigger('cancel');
+ },
/**
* Sets the provided image url as the dialog's value-to-save and
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);
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();
},
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');
}
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");
+
+ 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);
+ }
});
- $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);
- }
- var _class = "oe_snippet_" + snipped_id + " " + ($li.data("class") || "");
- if (active) {
- this.$target.removeClass(_class);
- } else {
- this.$target.addClass(_class);
+
+ 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();
+ }
}
- $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 () {
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");
}
});
+ 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
<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">
<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">
</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>
</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">
</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>
</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>
</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>
<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">
<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">
<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">
<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">
<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">
<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">
<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">
</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">
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">
<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">
</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">
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">
</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">
</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">
</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">
</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">