diff --git a/addons/website/static/src/css/common.css b/addons/website/static/src/css/common.css new file mode 100644 index 00000000000..e69de29bb2d diff --git a/addons/website/static/src/css/common.sass b/addons/website/static/src/css/common.sass new file mode 100644 index 00000000000..86e1f6655ef --- /dev/null +++ b/addons/website/static/src/css/common.sass @@ -0,0 +1,25 @@ +@import "compass/css3" +@import "compass/css3/user-interface" +@import "compass/css3/transition" + +//smartphones, iPhone, portrait 480x320 phones +$smart_phone: 320px +//portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide.*/ +$small-tablet: 481px +//portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones +$portrait-tablet: 641px +//tablet, landscape iPad, lo-res laptops ands desktops +$tablet: 961px +//big landscape tablets, laptops, and desktops +$desktop: 1025px + +@mixin editor-font + font-size: 14px + font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace + line-height: normal + +@mixin selection() + ::-moz-selection + @content + ::selection + @content diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css index 8aada166018..7a71740671b 100644 --- a/addons/website/static/src/css/editor.css +++ b/addons/website/static/src/css/editor.css @@ -1,4 +1,3 @@ -@charset "utf-8"; /* ---- CKEditor Minimal Reset ---- */ .navbar.navbar-inverse .cke_chrome { border: none; @@ -380,6 +379,10 @@ ul.oe_menu_editor .disclose { margin: 0px -24px !important; } .oe_drop_zone.oe_insert.oe_overlay { + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + -ms-border-radius: 3px; + -o-border-radius: 3px; border-radius: 3px; background: rgba(153, 0, 255, 0.5); } diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass index 3896ced8648..ea7bbb1480a 100644 --- a/addons/website/static/src/css/editor.sass +++ b/addons/website/static/src/css/editor.sass @@ -1,19 +1,6 @@ @charset "utf-8" -@import "compass/css3" -@import "compass/css3/user-interface" -@import "compass/css3/transition" - -//smartphones, iPhone, portrait 480x320 phones -$smart_phone: 320px -//portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide.*/ -$small-tablet: 481px -//portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones -$portrait-tablet: 641px -//tablet, landscape iPad, lo-res laptops ands desktops -$tablet: 961px -//big landscape tablets, laptops, and desktops -$desktop: 1025px +@import "common" /* ---- CKEditor Minimal Reset ---- */ @@ -303,7 +290,7 @@ ul.oe_menu_editor position: relative margin: 0px -24px !important &.oe_overlay - border-radius: 3px + +border-radius(3px) //@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.1) ,rgba(255,255,255,.1) 35px, rgba(0,0,0,.1) 35px, rgba(0,0,0,.1) 75px)) //background-size: 100px 100px background: rgba(153, 0, 255,.5) @@ -507,10 +494,6 @@ $editorbar_height: 30px // TODO Fix => might break with themes $navbar_height: 51px -@mixin editor-font - font-size: 14px - font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace - line-height: normal .oe_ace_view_editor position: fixed top: $navbar_height diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css index 99ba04e2a96..68e40e9118b 100644 --- a/addons/website/static/src/css/website.css +++ b/addons/website/static/src/css/website.css @@ -1,4 +1,3 @@ -@charset "utf-8"; /* THIS CSS FILE IS FOR WEBSITE THEMING CUSTOMIZATION ONLY * * css for editor buttons, openerp widget included in the website and other @@ -192,6 +191,8 @@ h1.text-muted, h2.text-muted, h3.text-muted { /* ----- BOOTSTRAP HACK FOR STICKY FOOTER ----- */ html, body, #wrapwrap { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; box-sizing: border-box; height: 100%; } @@ -257,6 +258,78 @@ 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'] { + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); + opacity: 0.5; +} + +/* ---- END of PUBLISH ---- */ +::-moz-selection { + background: rgba(150, 150, 220, 0.3); +} + +::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 +404,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 +430,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); + background-image: none !important; + -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; } -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%; } diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass index f947a163a28..ec992256d6e 100644 --- a/addons/website/static/src/css/website.sass +++ b/addons/website/static/src/css/website.sass @@ -1,5 +1,7 @@ @charset "utf-8" +@import "common" + /* * THIS CSS FILE IS FOR WEBSITE THEMING CUSTOMIZATION ONLY * @@ -103,14 +105,8 @@ /* Extra Styles */ img.shadow - -webkit-border-radius: 3px - -moz-border-radius: 3px - -ms-border-radius: 3px - -o-border-radius: 3px - border-radius: 3px - -webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2) - -moz-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2) - box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2) + +border-radius(3px) + +box-shadow(0px 3px 8px rgba(0, 0, 0, 0.2)) margin: 0 auto h1.text-muted, h2.text-muted, h3.text-muted @@ -124,7 +120,7 @@ h1.text-muted, h2.text-muted, h3.text-muted /* ----- BOOTSTRAP HACK FOR STICKY FOOTER ----- */ html,body, #wrapwrap - box-sizing: border-box + +box-sizing(border-box) height: 100% #wrapwrap @@ -186,6 +182,62 @@ 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 ---- */ + +@include 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 +301,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 +322,23 @@ 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) + background-image: none !important + +box-shadow(0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset) +.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% diff --git a/addons/website/static/src/js/website.editor.js b/addons/website/static/src/js/website.editor.js index 895bc8864c6..feb8e403c54 100644 --- a/addons/website/static/src/js/website.editor.js +++ b/addons/website/static/src/js/website.editor.js @@ -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 diff --git a/addons/website/static/src/js/website.snippets.editor.js b/addons/website/static/src/js/website.snippets.editor.js index 2523c53231f..7d7aade081f 100644 --- a/addons/website/static/src/js/website.snippets.editor.js +++ b/addons/website/static/src/js/website.snippets.editor.js @@ -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 = $("
  • ").data(val); $li.append($('').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 = $('