From 3b49d2cf32d7628f1f3f0ce634edae4709b41291 Mon Sep 17 00:00:00 2001 From: ddm Date: Tue, 1 Oct 2013 18:01:14 +0200 Subject: [PATCH 01/13] [IMP] Editor basic tour bzr revid: ddm@openerp.com-20131001160114-d87oq16mxak3xslj --- addons/website/static/src/css/editor.css | 5 +++++ addons/website/static/src/css/editor.sass | 5 +++++ addons/website/views/views.xml | 3 +++ 3 files changed, 13 insertions(+) diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css index a808b9bab35..8a52aec47aa 100644 --- a/addons/website/static/src/css/editor.css +++ b/addons/website/static/src/css/editor.css @@ -575,3 +575,8 @@ table.editorbar-panel td.selected { width: 0; opacity: 0; } + +/* ---- EDITOR TOUR ---- */ +.popover.tour-tour { + z-index: 2010; +} diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass index 406b8feeb78..54c6b6576de 100644 --- a/addons/website/static/src/css/editor.sass +++ b/addons/website/static/src/css/editor.sass @@ -500,4 +500,9 @@ $navbar_height: 51px width: 0 opacity: 0 +/* ---- EDITOR TOUR ---- */ + +.popover.tour-tour + z-index: 2010 + // vim:tabstop=4:shiftwidth=4:softtabstop=4:fdm=marker: diff --git a/addons/website/views/views.xml b/addons/website/views/views.xml index 3854b54b936..43bbd918c83 100644 --- a/addons/website/views/views.xml +++ b/addons/website/views/views.xml @@ -28,6 +28,7 @@ + @@ -45,6 +46,7 @@ + @@ -55,6 +57,7 @@ + From 0c2d204bb16b08bba3e5e7a196b64606214752e4 Mon Sep 17 00:00:00 2001 From: ddm Date: Wed, 2 Oct 2013 10:50:18 +0200 Subject: [PATCH 02/13] [FIX] Add editor tour missing files bzr revid: ddm@openerp.com-20131002085018-af7yc5oyjx4opr9j --- .../lib/bootstrap-tour/bootstrap-tour.css | 43 ++ .../lib/bootstrap-tour/bootstrap-tour.js | 559 ++++++++++++++++++ addons/website/static/src/js/website.tour.js | 127 ++++ .../website/static/src/xml/website.tour.xml | 33 ++ 4 files changed, 762 insertions(+) create mode 100755 addons/website/static/lib/bootstrap-tour/bootstrap-tour.css create mode 100755 addons/website/static/lib/bootstrap-tour/bootstrap-tour.js create mode 100644 addons/website/static/src/js/website.tour.js create mode 100644 addons/website/static/src/xml/website.tour.xml diff --git a/addons/website/static/lib/bootstrap-tour/bootstrap-tour.css b/addons/website/static/lib/bootstrap-tour/bootstrap-tour.css new file mode 100755 index 00000000000..72c6e8cbab7 --- /dev/null +++ b/addons/website/static/lib/bootstrap-tour/bootstrap-tour.css @@ -0,0 +1,43 @@ +.tour-backdrop { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1009; + background-color: #000; + opacity: 0.8; +} +.tour-step-backdrop { + position: relative; + z-index: 1011; +} +.tour-step-background { + position: absolute; + z-index: 1010; + background: #fff; + border-radius: 6px; +} +.popover[class*="tour-"] .popover-navigation { + padding: 9px 14px; +} +.popover[class*="tour-"] .popover-navigation *[data-role=end] { + float: right; +} +.popover[class*="tour-"] .popover-navigation *[data-role=prev], +.popover[class*="tour-"] .popover-navigation *[data-role=next], +.popover[class*="tour-"] .popover-navigation *[data-role=end] { + cursor: pointer; +} +.popover[class*="tour-"] .popover-navigation *[data-role=prev].disabled, +.popover[class*="tour-"] .popover-navigation *[data-role=next].disabled, +.popover[class*="tour-"] .popover-navigation *[data-role=end].disabled { + cursor: default; +} +.popover[class*="tour-"].orphan { + position: fixed; + margin-top: 0; +} +.popover[class*="tour-"].orphan .arrow { + display: none; +} diff --git a/addons/website/static/lib/bootstrap-tour/bootstrap-tour.js b/addons/website/static/lib/bootstrap-tour/bootstrap-tour.js new file mode 100755 index 00000000000..8b45d6da9ee --- /dev/null +++ b/addons/website/static/lib/bootstrap-tour/bootstrap-tour.js @@ -0,0 +1,559 @@ +/* =========================================================== +# bootstrap-tour - v0.6.1 +# http://bootstraptour.com +# ============================================================== +# Copyright 2012-2013 Ulrich Sossou +# +# Licensed under the Apache License, Version 2.0 (the "License"); +# you may not use this file except in compliance with the License. +# You may obtain a copy of the License at +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. +*/ +(function() { + (function($, window) { + var Tour, document; + document = window.document; + Tour = (function() { + function Tour(options) { + this._options = $.extend({ + name: "tour", + container: "body", + keyboard: true, + storage: window.localStorage, + debug: false, + backdrop: false, + redirect: true, + orphan: false, + basePath: "", + template: "

", + afterSetState: function(key, value) {}, + afterGetState: function(key, value) {}, + afterRemoveState: function(key) {}, + onStart: function(tour) {}, + onEnd: function(tour) {}, + onShow: function(tour) {}, + onShown: function(tour) {}, + onHide: function(tour) {}, + onHidden: function(tour) {}, + onNext: function(tour) {}, + onPrev: function(tour) {} + }, options); + this._steps = []; + this.setCurrentStep(); + this.backdrop = { + overlay: null, + $element: null, + $background: null + }; + } + + Tour.prototype.setState = function(key, value) { + var keyName; + if (this._options.storage) { + keyName = "" + this._options.name + "_" + key; + this._options.storage.setItem(keyName, value); + return this._options.afterSetState(keyName, value); + } else { + if (this._state == null) { + this._state = {}; + } + return this._state[key] = value; + } + }; + + Tour.prototype.removeState = function(key) { + var keyName; + if (this._options.storage) { + keyName = "" + this._options.name + "_" + key; + this._options.storage.removeItem(keyName); + return this._options.afterRemoveState(keyName); + } else { + if (this._state != null) { + return delete this._state[key]; + } + } + }; + + Tour.prototype.getState = function(key) { + var keyName, value; + if (this._options.storage) { + keyName = "" + this._options.name + "_" + key; + value = this._options.storage.getItem(keyName); + } else { + if (this._state != null) { + value = this._state[key]; + } + } + if (value === void 0 || value === "null") { + value = null; + } + this._options.afterGetState(key, value); + return value; + }; + + Tour.prototype.addSteps = function(steps) { + var step, _i, _len, _results; + _results = []; + for (_i = 0, _len = steps.length; _i < _len; _i++) { + step = steps[_i]; + _results.push(this.addStep(step)); + } + return _results; + }; + + Tour.prototype.addStep = function(step) { + return this._steps.push(step); + }; + + Tour.prototype.getStep = function(i) { + if (this._steps[i] != null) { + return $.extend({ + id: "step-" + i, + path: "", + placement: "right", + title: "", + content: "

", + next: i === this._steps.length - 1 ? -1 : i + 1, + prev: i - 1, + animation: true, + container: this._options.container, + backdrop: this._options.backdrop, + redirect: this._options.redirect, + orphan: this._options.orphan, + template: this._options.template, + onShow: this._options.onShow, + onShown: this._options.onShown, + onHide: this._options.onHide, + onHidden: this._options.onHidden, + onNext: this._options.onNext, + onPrev: this._options.onPrev + }, this._steps[i]); + } + }; + + Tour.prototype.start = function(force) { + var promise, + _this = this; + if (force == null) { + force = false; + } + if (this.ended() && !force) { + return this._debug("Tour ended, start prevented."); + } + $(document).off("click.tour-" + this._options.name, ".popover.tour-" + this._options.name + " *[data-role=next]").on("click.tour-" + this._options.name, ".popover.tour-" + this._options.name + " *[data-role=next]:not(.disabled)", function(e) { + e.preventDefault(); + return _this.next(); + }); + $(document).off("click.tour-" + this._options.name, ".popover.tour-" + this._options.name + " *[data-role=prev]").on("click.tour-" + this._options.name, ".popover.tour-" + this._options.name + " *[data-role=prev]:not(.disabled)", function(e) { + e.preventDefault(); + return _this.prev(); + }); + $(document).off("click.tour-" + this._options.name, ".popover.tour-" + this._options.name + " *[data-role=end]").on("click.tour-" + this._options.name, ".popover.tour-" + this._options.name + " *[data-role=end]", function(e) { + e.preventDefault(); + return _this.end(); + }); + this._onResize(function() { + return _this.showStep(_this._current); + }); + this._setupKeyboardNavigation(); + promise = this._makePromise(this._options.onStart != null ? this._options.onStart(this) : void 0); + return this._callOnPromiseDone(promise, this.showStep, this._current); + }; + + Tour.prototype.next = function() { + var promise; + if (this.ended()) { + return this._debug("Tour ended, next prevented."); + } + promise = this.hideStep(this._current); + return this._callOnPromiseDone(promise, this._showNextStep); + }; + + Tour.prototype.prev = function() { + var promise; + if (this.ended()) { + return this._debug("Tour ended, prev prevented."); + } + promise = this.hideStep(this._current); + return this._callOnPromiseDone(promise, this._showPrevStep); + }; + + Tour.prototype.goto = function(i) { + var promise; + if (this.ended()) { + return this._debug("Tour ended, goto prevented."); + } + promise = this.hideStep(this._current); + return this._callOnPromiseDone(promise, this.showStep, i); + }; + + Tour.prototype.end = function() { + var endHelper, hidePromise, + _this = this; + endHelper = function(e) { + $(document).off("click.tour-" + _this._options.name); + $(document).off("keyup.tour-" + _this._options.name); + $(window).off("resize.tour-" + _this._options.name); + _this.setState("end", "yes"); + if (_this._options.onEnd != null) { + return _this._options.onEnd(_this); + } + }; + hidePromise = this.hideStep(this._current); + return this._callOnPromiseDone(hidePromise, endHelper); + }; + + Tour.prototype.ended = function() { + return !!this.getState("end"); + }; + + Tour.prototype.restart = function() { + this.removeState("current_step"); + this.removeState("end"); + this.setCurrentStep(0); + return this.start(); + }; + + Tour.prototype.hideStep = function(i) { + var hideStepHelper, promise, step, + _this = this; + step = this.getStep(i); + promise = this._makePromise(step.onHide != null ? step.onHide(this, i) : void 0); + hideStepHelper = function(e) { + var $element; + $element = _this._isOrphan(step) ? $("body") : $(step.element); + $element.popover("destroy"); + if (step.reflex) { + $element.css("cursor", "").off("click.tour-" + _this._options.name); + } + if (step.backdrop) { + _this._hideBackdrop(); + } + if (step.onHidden != null) { + return step.onHidden(_this); + } + }; + this._callOnPromiseDone(promise, hideStepHelper); + return promise; + }; + + Tour.prototype.showStep = function(i) { + var promise, showStepHelper, skipToPrevious, step, + _this = this; + step = this.getStep(i); + if (!step) { + return; + } + skipToPrevious = i < this._current; + promise = this._makePromise(step.onShow != null ? step.onShow(this, i) : void 0); + showStepHelper = function(e) { + var current_path, path; + _this.setCurrentStep(i); + path = $.isFunction(step.path) ? step.path.call() : _this._options.basePath + step.path; + current_path = [document.location.pathname, document.location.hash].join(""); + if (_this._isRedirect(path, current_path)) { + _this._redirect(step, path); + return; + } + if (_this._isOrphan(step)) { + if (!step.orphan) { + _this._debug("Skip the orphan step " + (_this._current + 1) + ". Orphan option is false and the element doesn't exist or is hidden."); + if (skipToPrevious) { + _this._showPrevStep(); + } else { + _this._showNextStep(); + } + return; + } + _this._debug("Show the orphan step " + (_this._current + 1) + ". Orphans option is true."); + } + if (step.backdrop) { + _this._showBackdrop(!_this._isOrphan(step) ? step.element : void 0); + } + _this._showPopover(step, i); + if (step.onShown != null) { + step.onShown(_this); + } + return _this._debug("Step " + (_this._current + 1) + " of " + _this._steps.length); + }; + return this._callOnPromiseDone(promise, showStepHelper); + }; + + Tour.prototype.setCurrentStep = function(value) { + if (value != null) { + this._current = value; + return this.setState("current_step", value); + } else { + this._current = this.getState("current_step"); + return this._current = this._current === null ? 0 : parseInt(this._current, 10); + } + }; + + Tour.prototype._showNextStep = function() { + var promise, showNextStepHelper, step, + _this = this; + step = this.getStep(this._current); + showNextStepHelper = function(e) { + return _this.showStep(step.next); + }; + promise = this._makePromise((step.onNext != null ? step.onNext(this) : void 0)); + return this._callOnPromiseDone(promise, showNextStepHelper); + }; + + Tour.prototype._showPrevStep = function() { + var promise, showPrevStepHelper, step, + _this = this; + step = this.getStep(this._current); + showPrevStepHelper = function(e) { + return _this.showStep(step.prev); + }; + promise = this._makePromise((step.onPrev != null ? step.onPrev(this) : void 0)); + return this._callOnPromiseDone(promise, showPrevStepHelper); + }; + + Tour.prototype._debug = function(text) { + if (this._options.debug) { + return window.console.log("Bootstrap Tour '" + this._options.name + "' | " + text); + } + }; + + Tour.prototype._isRedirect = function(path, currentPath) { + return (path != null) && path !== "" && path.replace(/\?.*$/, "").replace(/\/?$/, "") !== currentPath.replace(/\/?$/, ""); + }; + + Tour.prototype._redirect = function(step, path) { + if ($.isFunction(step.redirect)) { + return step.redirect.call(this, path); + } else if (step.redirect === true) { + this._debug("Redirect to " + path); + return document.location.href = path; + } + }; + + Tour.prototype._isOrphan = function(step) { + return (step.element == null) || !$(step.element).length || $(step.element).is(":hidden"); + }; + + Tour.prototype._showPopover = function(step, i) { + var $element, $navigation, $template, $tip, isOrphan, options, + _this = this; + options = $.extend({}, this._options); + $template = $.isFunction(step.template) ? $(step.template(i, step)) : $(step.template); + $navigation = $template.find(".popover-navigation"); + isOrphan = this._isOrphan(step); + if (isOrphan) { + step.element = "body"; + step.placement = "top"; + $template = $template.addClass("orphan"); + } + $element = $(step.element); + $template.addClass("tour-" + this._options.name); + if (step.options) { + $.extend(options, step.options); + } + if (step.reflex) { + $element.css("cursor", "pointer").on("click.tour-" + this._options.name, function(e) { + if (_this._current < _this._steps.length - 1) { + return _this.next(); + } else { + return _this.end(); + } + }); + } + if (step.prev < 0) { + $navigation.find("*[data-role=prev]").addClass("disabled"); + } + if (step.next < 0) { + $navigation.find("*[data-role=next]").addClass("disabled"); + } + step.template = $template.clone().wrap("
").parent().html(); + $element.popover({ + placement: step.placement, + trigger: "manual", + title: step.title, + content: step.content, + html: true, + animation: step.animation, + container: step.container, + template: step.template, + selector: step.element + }).popover("show"); + $tip = $element.data("bs.popover") ? $element.data("bs.popover").tip() : $element.data("popover").tip(); + $tip.attr("id", step.id); + this._scrollIntoView($tip); + this._reposition($tip, step); + if (isOrphan) { + return this._center($tip); + } + }; + + Tour.prototype._reposition = function($tip, step) { + var offsetBottom, offsetHeight, offsetRight, offsetWidth, originalLeft, originalTop, tipOffset; + offsetWidth = $tip[0].offsetWidth; + offsetHeight = $tip[0].offsetHeight; + tipOffset = $tip.offset(); + originalLeft = tipOffset.left; + originalTop = tipOffset.top; + offsetBottom = $(document).outerHeight() - tipOffset.top - $tip.outerHeight(); + if (offsetBottom < 0) { + tipOffset.top = tipOffset.top + offsetBottom; + } + offsetRight = $("html").outerWidth() - tipOffset.left - $tip.outerWidth(); + if (offsetRight < 0) { + tipOffset.left = tipOffset.left + offsetRight; + } + if (tipOffset.top < 0) { + tipOffset.top = 0; + } + if (tipOffset.left < 0) { + tipOffset.left = 0; + } + $tip.offset(tipOffset); + if (step.placement === "bottom" || step.placement === "top") { + if (originalLeft !== tipOffset.left) { + return this._replaceArrow($tip, (tipOffset.left - originalLeft) * 2, offsetWidth, "left"); + } + } else { + if (originalTop !== tipOffset.top) { + return this._replaceArrow($tip, (tipOffset.top - originalTop) * 2, offsetHeight, "top"); + } + } + }; + + Tour.prototype._center = function($tip) { + return $tip.css("top", $(window).outerHeight() / 2 - $tip.outerHeight() / 2); + }; + + Tour.prototype._replaceArrow = function($tip, delta, dimension, position) { + return $tip.find(".arrow").css(position, delta ? 50 * (1 - delta / dimension) + "%" : ""); + }; + + Tour.prototype._scrollIntoView = function(tip) { + return $("html, body").stop().animate({ + scrollTop: Math.ceil(tip.offset().top - ($(window).height() / 2)) + }); + }; + + Tour.prototype._onResize = function(callback, timeout) { + return $(window).on("resize.tour-" + this._options.name, function() { + clearTimeout(timeout); + return timeout = setTimeout(callback, 100); + }); + }; + + Tour.prototype._setupKeyboardNavigation = function() { + var _this = this; + if (this._options.keyboard) { + return $(document).on("keyup.tour-" + this._options.name, function(e) { + if (!e.which) { + return; + } + switch (e.which) { + case 39: + e.preventDefault(); + if (_this._current < _this._steps.length - 1) { + return _this.next(); + } else { + return _this.end(); + } + break; + case 37: + e.preventDefault(); + if (_this._current > 0) { + return _this.prev(); + } + break; + case 27: + e.preventDefault(); + return _this.end(); + } + }); + } + }; + + Tour.prototype._makePromise = function(result) { + if (result && $.isFunction(result.then)) { + return result; + } else { + return null; + } + }; + + Tour.prototype._callOnPromiseDone = function(promise, cb, arg) { + var _this = this; + if (promise) { + return promise.then(function(e) { + return cb.call(_this, arg); + }); + } else { + return cb.call(this, arg); + } + }; + + Tour.prototype._showBackdrop = function(element) { + if (this.backdrop.overlay !== null) { + return; + } + this._showOverlay(); + if (element != null) { + return this._showOverlayElement(element); + } + }; + + Tour.prototype._hideBackdrop = function() { + if (this.backdrop.overlay === null) { + return; + } + if (this.backdrop.$element) { + this._hideOverlayElement(); + } + return this._hideOverlay(); + }; + + Tour.prototype._showOverlay = function() { + this.backdrop = $("
", { + "class": "tour-backdrop" + }); + return $("body").append(this.backdrop); + }; + + Tour.prototype._hideOverlay = function() { + this.backdrop.remove(); + return this.backdrop.overlay = null; + }; + + Tour.prototype._showOverlayElement = function(element) { + var $background, $element, offset; + $element = $(element); + $background = $("
"); + offset = $element.offset(); + offset.top = offset.top; + offset.left = offset.left; + $background.width($element.innerWidth()).height($element.innerHeight()).addClass("tour-step-background").offset(offset); + $element.addClass("tour-step-backdrop"); + $("body").append($background); + this.backdrop.$element = $element; + return this.backdrop.$background = $background; + }; + + Tour.prototype._hideOverlayElement = function() { + this.backdrop.$element.removeClass("tour-step-backdrop"); + this.backdrop.$background.remove(); + this.backdrop.$element = null; + return this.backdrop.$background = null; + }; + + return Tour; + + })(); + return window.Tour = Tour; + })(jQuery, window); + +}).call(this); diff --git a/addons/website/static/src/js/website.tour.js b/addons/website/static/src/js/website.tour.js new file mode 100644 index 00000000000..f218572120b --- /dev/null +++ b/addons/website/static/src/js/website.tour.js @@ -0,0 +1,127 @@ +(function () { + 'use strict'; + + var website = openerp.website; + website.templates.push('/website/static/src/xml/website.tour.xml'); + + var tourStorage = window.sessionStorage; + + website.EditorTour = openerp.Class.extend({ + observers: [], + start: function () { + var self = this; + tourStorage.removeItem("tour_current_step"); + tourStorage.removeItem("tour_end"); + var tour = new Tour({ + storage: tourStorage, + }); + tour.addSteps([ + { + element: "button[data-action=edit]", + template: openerp.qweb.render("website.tour_simple"), + backdrop: true, + title: "Switch to edit mode", + content: "Press the 'Edit' button to start modifying the page", + }, + { + element: "#oe_rte_toolbar", + template: openerp.qweb.render("website.tour_confirm"), + placement: "bottom", + title: "Edit the page inline", + content: "Use rich text editing to make inline modifications to your page", + }, + { + element: "button[data-action=snippet]", + template: openerp.qweb.render("website.tour_simple"), + backdrop: true, + reflex: true, + title: "Add a snippet to your page", + content: "Click on the 'Insert Blocks' button to open the snippet collection", + }, + { + element: "[data-snippet-id=title]", + template: openerp.qweb.render("website.tour_simple"), + placement: "right", + title: "Choose a title for the page", + content: "Drag the 'Title' block to the body of the page and drop it on a purple zone", + onShown: function () { + $('[data-snippet-id=title]').on('mousedown', function () { + function goToNextStep () { + self.toEditTitle(); + $('body').off('mouseup', goToNextStep); + } + $('body').on('mouseup', goToNextStep); + }); + } + }, + { + element: "#wrap [data-snippet-id=title]", + template: openerp.qweb.render("website.tour_confirm"), + placement: "bottom", + backdrop: true, + title: "Modify the title", + content: "Click on the title and modify it to fit your needs", + }, + { + element: "button[data-action=save]", + template: openerp.qweb.render("website.tour_simple"), + backdrop: true, + title: "Save your modifications", + content: "Click on the 'Save' button to persist your changes to the CMS database", + reflex: true, + onNext: function () { + self.stop(); + } + }, + ]); + tour.start(true); + self.tour = tour; + self.tourStorage = tourStorage; + }, + toBuildingBlocks: function () { + $('#step-0').remove(); + this.tour.goto(1); + }, + toEditTitle: function () { + $('#step-3').remove(); + this.tour.goto(4); + }, + onDomMutation: function (selector, callback) { + var target = document.querySelector(selector); + var observer = new MutationObserver(function(mutations) { + _.each(mutations, function(mutation) { + callback(mutation) + }); + }); + var config = { + attributes: true, + childList: true, + characterData: true, + }; + observer.observe(target, config); + this.observers.push(observer); + }, + stop: function () { + this.tour.end(); + _.each(this.observers, function (observer) { + observer.disconnect(); + }); + tourStorage.setItem("tour_current_step", 0); + tourStorage.setItem("tour_end", "yes"); + }, + }); + + website.EditorBar.include({ + start: function () { + if (window.location.href.indexOf("tour=true") >= 0 && tourStorage.getItem("tour_end") !== "yes") { + var editorTour = new website.EditorTour(); + editorTour.start(); + this.on('rte:ready', this, function () { + editorTour.toBuildingBlocks() + }); + } + return this._super(); + }, + }); + +}()); \ No newline at end of file diff --git a/addons/website/static/src/xml/website.tour.xml b/addons/website/static/src/xml/website.tour.xml new file mode 100644 index 00000000000..13219b471ed --- /dev/null +++ b/addons/website/static/src/xml/website.tour.xml @@ -0,0 +1,33 @@ + + + +
+
+

+
+ + +
+ + +
+
+

+
+ +
+ + \ No newline at end of file From 74a74929a719bce6fd07cdb31bb4606e2dc8a865 Mon Sep 17 00:00:00 2001 From: ddm Date: Wed, 2 Oct 2013 11:16:34 +0200 Subject: [PATCH 03/13] [FIX] minor tour fixes bzr revid: ddm@openerp.com-20131002091634-o6swg2nk0nkjokdx --- addons/website/static/src/js/website.tour.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/addons/website/static/src/js/website.tour.js b/addons/website/static/src/js/website.tour.js index f218572120b..b3a13f6597a 100644 --- a/addons/website/static/src/js/website.tour.js +++ b/addons/website/static/src/js/website.tour.js @@ -106,14 +106,13 @@ _.each(this.observers, function (observer) { observer.disconnect(); }); - tourStorage.setItem("tour_current_step", 0); - tourStorage.setItem("tour_end", "yes"); }, }); website.EditorBar.include({ start: function () { - if (window.location.href.indexOf("tour=true") >= 0 && tourStorage.getItem("tour_end") !== "yes") { + if (window.location.hash.indexOf("tour") >= 0) { + window.location.hash = ""; var editorTour = new website.EditorTour(); editorTour.start(); this.on('rte:ready', this, function () { From 3492c4ce651c78dae1c7e311217434bca37ab966 Mon Sep 17 00:00:00 2001 From: ddm Date: Wed, 2 Oct 2013 15:57:23 +0200 Subject: [PATCH 04/13] [IMP] Basic first tour bzr revid: ddm@openerp.com-20131002135723-cxt0mhjeumr2bciq --- addons/website/static/src/js/website.tour.js | 199 ++++++++++-------- .../website/static/src/xml/website.tour.xml | 18 +- 2 files changed, 121 insertions(+), 96 deletions(-) diff --git a/addons/website/static/src/js/website.tour.js b/addons/website/static/src/js/website.tour.js index b3a13f6597a..c1e12279c65 100644 --- a/addons/website/static/src/js/website.tour.js +++ b/addons/website/static/src/js/website.tour.js @@ -4,93 +4,49 @@ var website = openerp.website; website.templates.push('/website/static/src/xml/website.tour.xml'); - var tourStorage = window.sessionStorage; - website.EditorTour = openerp.Class.extend({ + editor: undefined, + reset: true, observers: [], + steps: [], + tourStorage: window.localStorage, + init: function (editor) { + this.editor = editor; + if (this.reset) { + this.tourStorage.removeItem('tour_current_step'); + this.tourStorage.removeItem('tour_end'); + $('.popover.tour').remove(); + } + this.tour = new Tour({ + storage: this.tourStorage, + keyboard: false, + }); + }, start: function () { var self = this; - tourStorage.removeItem("tour_current_step"); - tourStorage.removeItem("tour_end"); - var tour = new Tour({ - storage: tourStorage, + self.tour.addSteps(_.map(self.steps, function (step) { + step.title = openerp.qweb.render ('website.tour_title', { title: step.title }); + return step; + })); + self.tour.start(self.reset); + }, + movetoStep: function (step_id) { + $('.popover.tour').remove(); + var index = -1; + _.each(this.steps, function (step, i) { + if (step.step_id === step_id) { + index = i; + } }); - tour.addSteps([ - { - element: "button[data-action=edit]", - template: openerp.qweb.render("website.tour_simple"), - backdrop: true, - title: "Switch to edit mode", - content: "Press the 'Edit' button to start modifying the page", - }, - { - element: "#oe_rte_toolbar", - template: openerp.qweb.render("website.tour_confirm"), - placement: "bottom", - title: "Edit the page inline", - content: "Use rich text editing to make inline modifications to your page", - }, - { - element: "button[data-action=snippet]", - template: openerp.qweb.render("website.tour_simple"), - backdrop: true, - reflex: true, - title: "Add a snippet to your page", - content: "Click on the 'Insert Blocks' button to open the snippet collection", - }, - { - element: "[data-snippet-id=title]", - template: openerp.qweb.render("website.tour_simple"), - placement: "right", - title: "Choose a title for the page", - content: "Drag the 'Title' block to the body of the page and drop it on a purple zone", - onShown: function () { - $('[data-snippet-id=title]').on('mousedown', function () { - function goToNextStep () { - self.toEditTitle(); - $('body').off('mouseup', goToNextStep); - } - $('body').on('mouseup', goToNextStep); - }); - } - }, - { - element: "#wrap [data-snippet-id=title]", - template: openerp.qweb.render("website.tour_confirm"), - placement: "bottom", - backdrop: true, - title: "Modify the title", - content: "Click on the title and modify it to fit your needs", - }, - { - element: "button[data-action=save]", - template: openerp.qweb.render("website.tour_simple"), - backdrop: true, - title: "Save your modifications", - content: "Click on the 'Save' button to persist your changes to the CMS database", - reflex: true, - onNext: function () { - self.stop(); - } - }, - ]); - tour.start(true); - self.tour = tour; - self.tourStorage = tourStorage; - }, - toBuildingBlocks: function () { - $('#step-0').remove(); - this.tour.goto(1); - }, - toEditTitle: function () { - $('#step-3').remove(); - this.tour.goto(4); + if (index > -1) { + this.tour.goto(index); + } }, onDomMutation: function (selector, callback) { var target = document.querySelector(selector); var observer = new MutationObserver(function(mutations) { _.each(mutations, function(mutation) { - callback(mutation) + callback(mutation); }); }); var config = { @@ -109,15 +65,94 @@ }, }); + website.EditorBasicTour = website.EditorTour.extend({ + start: function () { + var self = this; + self.steps = [ + { + step_id: 'welcome', + orphan: true, + backdrop: true, + title: "Welcome to your website!", + content: "This tutorial will guide you through the firsts steps to build your enterprise class website.", + template: openerp.qweb.render('website.tour_confirm', { confirm: "Ok, tell me more!" }), + }, + { + step_id: 'edit-page', + element: 'button[data-action=edit]', + placement: 'right', + reflex: true, + title: "Edit this page", + content: "Every page of your website can be edited. Click the Edit button to modify your homepage.", + template: openerp.qweb.render('website.tour_simple'), + }, + { + step_id: 'show-bar', + element: '#website-top-navbar', + placement: 'bottom', + title: "Editor bar", + content: "This is the Editor Bar, use it to modify your homepage.", + template: openerp.qweb.render('website.tour_confirm', { confirm: "Got it, now what?" }), + }, + { + step_id: 'add-block', + element: 'button[data-action=snippet]', + placement: 'right', + reflex: true, + title: "Add a block to your page", + content: "Click on the Insert Blocks button to open the block collection.", + template: openerp.qweb.render('website.tour_simple'), + }, + { + step_id: 'drag-banner', + element: '[data-snippet-id=carousel]', + placement: 'bottom', + title: "Add a banner to your page", + content: "Drag the Banner block to the body of the page and drop it on a purple zone.", + template: openerp.qweb.render('website.tour_simple'), + onShown: function () { + function beginDrag () { + $('.popover.tour').remove(); + $('body').off('mousedown', beginDrag); + function goToNextStep () { + self.movetoStep('edit-title'); + $('body').off('mouseup', goToNextStep); + } + $('body').on('mouseup', goToNextStep); + } + $('body').on('mousedown', beginDrag); + }, + }, + { + step_id: 'edit-title', + element: '#wrap [data-snippet-id=carousel] .carousel-caption', + placement: 'top', + title: "Change the title", + content: "Click on the title and modify it to fit your needs.", + template: openerp.qweb.render('website.tour_confirm', { confirm: "Ok, done!" }), + }, + { + step_id: 'save-changes', + element: 'button[data-action=save]', + placement: 'right', + reflex: true, + title: "Save your modifications", + content: "Click the Save button to apply modifications on your website.", + template: openerp.qweb.render('website.tour_simple'), + onNext: function () { + self.stop(); + }, + }, + ]; + return this._super(); + }, + }); + website.EditorBar.include({ start: function () { if (window.location.hash.indexOf("tour") >= 0) { window.location.hash = ""; - var editorTour = new website.EditorTour(); - editorTour.start(); - this.on('rte:ready', this, function () { - editorTour.toBuildingBlocks() - }); + new website.EditorBasicTour(this).start(); } return this._super(); }, diff --git a/addons/website/static/src/xml/website.tour.xml b/addons/website/static/src/xml/website.tour.xml index 13219b471ed..4651ac1046f 100644 --- a/addons/website/static/src/xml/website.tour.xml +++ b/addons/website/static/src/xml/website.tour.xml @@ -5,18 +5,6 @@

- -
@@ -25,9 +13,11 @@

+ + + \ No newline at end of file From 188c64e7a1e97b04f6117df09c6bf093b8f96deb Mon Sep 17 00:00:00 2001 From: ddm Date: Wed, 2 Oct 2013 18:08:07 +0200 Subject: [PATCH 05/13] [FIX] Tour: change banner background bzr revid: ddm@openerp.com-20131002160807-kpvqfwxlstzy3ud2 --- addons/website/static/src/js/website.tour.js | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/addons/website/static/src/js/website.tour.js b/addons/website/static/src/js/website.tour.js index c1e12279c65..d0dca64dd5d 100644 --- a/addons/website/static/src/js/website.tour.js +++ b/addons/website/static/src/js/website.tour.js @@ -75,7 +75,7 @@ backdrop: true, title: "Welcome to your website!", content: "This tutorial will guide you through the firsts steps to build your enterprise class website.", - template: openerp.qweb.render('website.tour_confirm', { confirm: "Ok, tell me more!" }), + template: openerp.qweb.render('website.tour_confirm', { confirm: "Tell me more!" }), }, { step_id: 'edit-page', @@ -129,7 +129,20 @@ placement: 'top', title: "Change the title", content: "Click on the title and modify it to fit your needs.", - template: openerp.qweb.render('website.tour_confirm', { confirm: "Ok, done!" }), + template: openerp.qweb.render('website.tour_confirm', { confirm: "Done!" }), + }, + { + step_id: 'customize-banner', + element: '.oe_overlay_options .oe_options', + placement: 'left', + title: "Customize the banner", + content: "Click on Customize and change the background of your banner.", + template: openerp.qweb.render('website.tour_simple'), + onShow: function () { + $('.dropdown-menu [name=carousel-background]').click(function () { + self.movetoStep('save-changes'); + }); + }, }, { step_id: 'save-changes', From 6ae48096bdc852b63310402daf42d766bf7cde9f Mon Sep 17 00:00:00 2001 From: ddm Date: Thu, 3 Oct 2013 12:25:03 +0200 Subject: [PATCH 06/13] [IMP] Tour refactoring bzr revid: ddm@openerp.com-20131003102503-c5k41nzn9h6xz0qc --- addons/website/static/src/js/website.tour.js | 108 +++++++++++-------- 1 file changed, 61 insertions(+), 47 deletions(-) diff --git a/addons/website/static/src/js/website.tour.js b/addons/website/static/src/js/website.tour.js index d0dca64dd5d..5a39112713a 100644 --- a/addons/website/static/src/js/website.tour.js +++ b/addons/website/static/src/js/website.tour.js @@ -4,68 +4,67 @@ var website = openerp.website; website.templates.push('/website/static/src/xml/website.tour.xml'); + function render (template, dict) { + return openerp.qweb.render(template, dict); + }; + website.EditorTour = openerp.Class.extend({ editor: undefined, - reset: true, - observers: [], steps: [], tourStorage: window.localStorage, init: function (editor) { this.editor = editor; - if (this.reset) { - this.tourStorage.removeItem('tour_current_step'); - this.tourStorage.removeItem('tour_end'); - $('.popover.tour').remove(); - } this.tour = new Tour({ storage: this.tourStorage, keyboard: false, }); }, + reset: function () { + this.tourStorage.removeItem('tour_current_step'); + this.tourStorage.removeItem('tour_end'); + $('.popover.tour').remove(); + }, start: function () { var self = this; self.tour.addSteps(_.map(self.steps, function (step) { - step.title = openerp.qweb.render ('website.tour_title', { title: step.title }); + step.title = render('website.tour_title', { title: step.title }); return step; })); - self.tour.start(self.reset); + if (self.doNotContinue()) { + self.tour.end(); + } else { + self.tour.start(); + } }, - movetoStep: function (step_id) { - $('.popover.tour').remove(); + doNotContinue: function () { + return this.currentStepIndex() > 0 || this.tour.ended(); + }, + currentStepIndex: function () { + return this.tourStorage.getItem('tour_current_step'); + }, + indexOfStep: function (step_id) { var index = -1; _.each(this.steps, function (step, i) { if (step.step_id === step_id) { index = i; } }); + return index; + }, + movetoStep: function (step_id) { + $('.popover.tour').remove(); + var index = this.indexOfStep(step_id); if (index > -1) { this.tour.goto(index); } }, - onDomMutation: function (selector, callback) { - var target = document.querySelector(selector); - var observer = new MutationObserver(function(mutations) { - _.each(mutations, function(mutation) { - callback(mutation); - }); - }); - var config = { - attributes: true, - childList: true, - characterData: true, - }; - observer.observe(target, config); - this.observers.push(observer); - }, stop: function () { this.tour.end(); - _.each(this.observers, function (observer) { - observer.disconnect(); - }); }, }); website.EditorBasicTour = website.EditorTour.extend({ + name: "Add a banner to your page", start: function () { var self = this; self.steps = [ @@ -75,7 +74,7 @@ backdrop: true, title: "Welcome to your website!", content: "This tutorial will guide you through the firsts steps to build your enterprise class website.", - template: openerp.qweb.render('website.tour_confirm', { confirm: "Tell me more!" }), + template: render('website.tour_confirm', { confirm: "Tell me more!" }), }, { step_id: 'edit-page', @@ -84,15 +83,15 @@ reflex: true, title: "Edit this page", content: "Every page of your website can be edited. Click the Edit button to modify your homepage.", - template: openerp.qweb.render('website.tour_simple'), + template: render('website.tour_simple'), }, { step_id: 'show-bar', element: '#website-top-navbar', placement: 'bottom', title: "Editor bar", - content: "This is the Editor Bar, use it to modify your homepage.", - template: openerp.qweb.render('website.tour_confirm', { confirm: "Got it, now what?" }), + content: "This is the Editor Bar, use it to modify your website's pages.", + template: render('website.tour_confirm', { confirm: "Got it, now what?" }), }, { step_id: 'add-block', @@ -101,15 +100,15 @@ reflex: true, title: "Add a block to your page", content: "Click on the Insert Blocks button to open the block collection.", - template: openerp.qweb.render('website.tour_simple'), + template: render('website.tour_simple'), }, { step_id: 'drag-banner', - element: '[data-snippet-id=carousel]', + element: '#website-top-navbar [data-snippet-id=carousel]', placement: 'bottom', title: "Add a banner to your page", content: "Drag the Banner block to the body of the page and drop it on a purple zone.", - template: openerp.qweb.render('website.tour_simple'), + template: render('website.tour_simple'), onShown: function () { function beginDrag () { $('.popover.tour').remove(); @@ -125,11 +124,17 @@ }, { step_id: 'edit-title', - element: '#wrap [data-snippet-id=carousel] .carousel-caption', + element: '#wrap [data-snippet-id=carousel]:first .carousel-caption', placement: 'top', title: "Change the title", content: "Click on the title and modify it to fit your needs.", - template: openerp.qweb.render('website.tour_confirm', { confirm: "Done!" }), + template: render('website.tour_confirm', { confirm: "Done!" }), + onHide: function () { + var $banner = $("#wrap [data-snippet-id=carousel]:first"); + if ($banner.length) { + $banner.click(); + } + }, }, { step_id: 'customize-banner', @@ -137,7 +142,7 @@ placement: 'left', title: "Customize the banner", content: "Click on Customize and change the background of your banner.", - template: openerp.qweb.render('website.tour_simple'), + template: render('website.tour_simple'), onShow: function () { $('.dropdown-menu [name=carousel-background]').click(function () { self.movetoStep('save-changes'); @@ -151,22 +156,31 @@ reflex: true, title: "Save your modifications", content: "Click the Save button to apply modifications on your website.", - template: openerp.qweb.render('website.tour_simple'), - onNext: function () { - self.stop(); - }, + template: render('website.tour_simple'), + }, + { + step_id: 'save-changes', + element: 'button[data-action=save]', + placement: 'right', + reflex: true, + title: "Save your modifications", + content: "Click the Save button to apply modifications on your website.", + template: render('website.tour_simple'), }, ]; return this._super(); }, + doNotContinue: function () { + return this.currentStepIndex() > 0; + } }); website.EditorBar.include({ start: function () { - if (window.location.hash.indexOf("tour") >= 0) { - window.location.hash = ""; - new website.EditorBasicTour(this).start(); - } + website.tutorials = { + basic: new website.EditorBasicTour(this), + }; + website.tutorials.basic.start(); return this._super(); }, }); From 797453cf0a48163f1117b06706f819f1b9a70cec Mon Sep 17 00:00:00 2001 From: ddm Date: Thu, 3 Oct 2013 12:36:05 +0200 Subject: [PATCH 07/13] [FIX] Hide block collection when necessary bzr revid: ddm@openerp.com-20131003103605-jobf1kaz22e0dfqx --- addons/website/static/src/js/website.tour.js | 1 + 1 file changed, 1 insertion(+) diff --git a/addons/website/static/src/js/website.tour.js b/addons/website/static/src/js/website.tour.js index 5a39112713a..3dd24e77a3b 100644 --- a/addons/website/static/src/js/website.tour.js +++ b/addons/website/static/src/js/website.tour.js @@ -114,6 +114,7 @@ $('.popover.tour').remove(); $('body').off('mousedown', beginDrag); function goToNextStep () { + $('#oe_snippets').hide(); self.movetoStep('edit-title'); $('body').off('mouseup', goToNextStep); } From c55ad6a02327652fcea8e48d37229a919561fcd4 Mon Sep 17 00:00:00 2001 From: ddm Date: Thu, 3 Oct 2013 16:51:40 +0200 Subject: [PATCH 08/13] [FIX] editor.css bzr revid: ddm@openerp.com-20131003145140-skp3ya6cgv018s8o --- addons/website/static/src/css/editor.css | 542 ++++++++++++++++++++--- 1 file changed, 487 insertions(+), 55 deletions(-) diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css index 3f6d971fa30..f350d45923e 100644 --- a/addons/website/static/src/css/editor.css +++ b/addons/website/static/src/css/editor.css @@ -1,57 +1,489 @@ -/* -Syntax error: File to import not found or unreadable: compass/css3. - Load path: /Users/dimitri/openerp/addons/website/static/src/css - on line 3 of /Users/dimitri/openerp/addons/website/static/src/css/editor.sass +@charset "utf-8"; +/* ---- CKEditor Minimal Reset ---- */ +.navbar.navbar-inverse .cke_chrome { + border: none; } -1: @charset "utf-8" -2: -3: @import "compass/css3" -4: @import "compass/css3/user-interface" -5: @import "compass/css3/transition" -6: -7: /* ---- CKEditor Minimal Reset ---- */ -8: +.navbar.navbar-inverse .cke_inner { + background: transparent; } -Backtrace: -/Users/dimitri/openerp/addons/website/static/src/css/editor.sass:3 -/Library/Ruby/Gems/1.8/gems/sass-3.2.1/bin/../lib/sass/../sass/tree/import_node.rb:64:in `import' -/Library/Ruby/Gems/1.8/gems/sass-3.2.1/bin/../lib/sass/../sass/tree/import_node.rb:25:in `imported_file' -/Library/Ruby/Gems/1.8/gems/sass-3.2.1/bin/../lib/sass/../sass/tree/visitors/perform.rb:227:in `visit_import' -/Library/Ruby/Gems/1.8/gems/sass-3.2.1/bin/../lib/sass/../sass/tree/visitors/base.rb:37:in `send' -/Library/Ruby/Gems/1.8/gems/sass-3.2.1/bin/../lib/sass/../sass/tree/visitors/base.rb:37:in `visit' -/Library/Ruby/Gems/1.8/gems/sass-3.2.1/bin/../lib/sass/../sass/tree/visitors/perform.rb:98:in `visit' -/Library/Ruby/Gems/1.8/gems/sass-3.2.1/bin/../lib/sass/../sass/tree/visitors/base.rb:53:in `visit_children' -/Library/Ruby/Gems/1.8/gems/sass-3.2.1/bin/../lib/sass/../sass/tree/visitors/base.rb:53:in `map' -/Library/Ruby/Gems/1.8/gems/sass-3.2.1/bin/../lib/sass/../sass/tree/visitors/base.rb:53:in `visit_children' -/Library/Ruby/Gems/1.8/gems/sass-3.2.1/bin/../lib/sass/../sass/tree/visitors/perform.rb:107:in `visit_children' -/Library/Ruby/Gems/1.8/gems/sass-3.2.1/bin/../lib/sass/../sass/tree/visitors/perform.rb:119:in `with_environment' -/Library/Ruby/Gems/1.8/gems/sass-3.2.1/bin/../lib/sass/../sass/tree/visitors/perform.rb:106:in `visit_children' -/Library/Ruby/Gems/1.8/gems/sass-3.2.1/bin/../lib/sass/../sass/tree/visitors/base.rb:37:in `visit' -/Library/Ruby/Gems/1.8/gems/sass-3.2.1/bin/../lib/sass/../sass/tree/visitors/perform.rb:126:in `visit_root' -/Library/Ruby/Gems/1.8/gems/sass-3.2.1/bin/../lib/sass/../sass/tree/visitors/base.rb:37:in `send' -/Library/Ruby/Gems/1.8/gems/sass-3.2.1/bin/../lib/sass/../sass/tree/visitors/base.rb:37:in `visit' -/Library/Ruby/Gems/1.8/gems/sass-3.2.1/bin/../lib/sass/../sass/tree/visitors/perform.rb:98:in `visit' -/Library/Ruby/Gems/1.8/gems/sass-3.2.1/bin/../lib/sass/../sass/tree/visitors/perform.rb:7:in `send' -/Library/Ruby/Gems/1.8/gems/sass-3.2.1/bin/../lib/sass/../sass/tree/visitors/perform.rb:7:in `visit' -/Library/Ruby/Gems/1.8/gems/sass-3.2.1/bin/../lib/sass/../sass/tree/root_node.rb:20:in `render' -/Library/Ruby/Gems/1.8/gems/sass-3.2.1/bin/../lib/sass/../sass/engine.rb:315:in `_render' -/Library/Ruby/Gems/1.8/gems/sass-3.2.1/bin/../lib/sass/../sass/engine.rb:262:in `render' -/Library/Ruby/Gems/1.8/gems/sass-3.2.1/bin/../lib/sass/../sass/plugin/compiler.rb:340:in `update_stylesheet' -/Library/Ruby/Gems/1.8/gems/sass-3.2.1/bin/../lib/sass/../sass/plugin/compiler.rb:202:in `update_stylesheets' -/Library/Ruby/Gems/1.8/gems/sass-3.2.1/bin/../lib/sass/../sass/plugin/compiler.rb:200:in `each' -/Library/Ruby/Gems/1.8/gems/sass-3.2.1/bin/../lib/sass/../sass/plugin/compiler.rb:200:in `update_stylesheets' -/Library/Ruby/Gems/1.8/gems/sass-3.2.1/bin/../lib/sass/../sass/plugin/compiler.rb:234:in `watch' -/Library/Ruby/Gems/1.8/gems/sass-3.2.1/bin/../lib/sass/../sass/plugin.rb:107:in `send' -/Library/Ruby/Gems/1.8/gems/sass-3.2.1/bin/../lib/sass/../sass/plugin.rb:107:in `method_missing' -/Library/Ruby/Gems/1.8/gems/sass-3.2.1/bin/../lib/sass/../sass/exec.rb:431:in `watch_or_update' -/Library/Ruby/Gems/1.8/gems/sass-3.2.1/bin/../lib/sass/../sass/exec.rb:302:in `process_result' -/Library/Ruby/Gems/1.8/gems/sass-3.2.1/bin/../lib/sass/../sass/exec.rb:41:in `parse' -/Library/Ruby/Gems/1.8/gems/sass-3.2.1/bin/../lib/sass/../sass/exec.rb:21:in `parse!' -/Library/Ruby/Gems/1.8/gems/sass-3.2.1/bin/sass:8 -/usr/bin/sass:19:in `load' -/usr/bin/sass:19 -*/ -body:before { - white-space: pre; - font-family: monospace; - content: "Syntax error: File to import not found or unreadable: compass/css3.\A Load path: /Users/dimitri/openerp/addons/website/static/src/css\A on line 3 of /Users/dimitri/openerp/addons/website/static/src/css/editor.sass\A \A 1: @charset \"utf-8\"\A 2: \A 3: @import \"compass/css3\"\A 4: @import \"compass/css3/user-interface\"\A 5: @import \"compass/css3/transition\"\A 6: \A 7: /* ---- CKEditor Minimal Reset ---- */\A 8: "; } +.navbar.navbar-inverse .cke_toolbar { + position: relative; + top: 1px; } +.navbar.navbar-inverse .cke_combo_button { + padding-top: 3px; + padding-bottom: 3px; } +.navbar.navbar-inverse .cke_button { + padding-top: 7px; + padding-bottom: 7px; } + +.navbar.navbar-inverse .cke_top { + background: transparent; + border: none; + box-shadow: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; } + +/* ---- OpenERP Style ---- */ +.oe_website_editorbar { + position: fixed; + top: 0; + right: 0; + display: block; + width: 100%; + padding: 2px; + margin: 0; + z-index: 20000; + background: #414141, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #646060), color-stop(100%, #262626)); + background: #414141, -webkit-linear-gradient(#646060, #262626); + background: #414141, -moz-linear-gradient(#646060, #262626); + background: #414141, -o-linear-gradient(#646060, #262626); + background: #414141, linear-gradient(#646060, #262626); + box-sizing: border-box; } + .oe_website_editorbar li { + display: inline; + color: #eeeeee; } + .oe_website_editorbar li:hover { + background: rgba(0, 0, 0, 0.2); + text-shadow: black 0px 0px 3px; + color: white; } + +.oe_website_editorbar .oe_rte_toolbar div.dropdown { + display: inline-block; } + .oe_website_editorbar .oe_rte_toolbar div.dropdown li { + display: list-item; } +.oe_website_editorbar .oe_rte_toolbar button { + font-family: FontAwesome; + font-weight: normal; + font-style: normal; + text-decoration: inherit; } + .oe_website_editorbar .oe_rte_toolbar button.oe_button_list { + padding-right: 3px; } + .oe_website_editorbar .oe_rte_toolbar button.oe_button_list:after { + content: "\F0D7"; + padding-left: 6px; } + +.oe_editable:focus { + outline: none !important; } + +.css_non_editable_mode_hidden { + display: none; } + +.oe_carousel_options { + cursor: pointer; + position: absolute; + white-space: nowrap; + z-index: 1; + display: none; } + .oe_carousel_options > * { + display: inline-block !important; + vertical-align: middle !important; + position: relative !important; + top: 2px; } + +/* ---- EDITOR BAR ---- */ +table.editorbar-panel { + cursor: pointer; + width: 100%; } + table.editorbar-panel td { + border: 1px solid #aaaaaa; } + table.editorbar-panel td.selected { + background-color: #b1c9d9; } + +.oe_translate_examples li { + margin: 10px; + padding: 4px; } + +.oe_translatable_text { + outline: 1px solid black; } + +.oe_translatable_field { + outline: 1px dashed black; } + +.oe_translatable_text.oe_dirty, .oe_translatable_field.oe_dirty { + outline-color: red; } + +.oe_translatable_text.oe_dirty:empty { + padding: 0 10px; } + +.oe_translatable_todo { + background: #ffffb6; } + +/* ---- RTE ---- */ +.oe_editable .btn { + -webkit-user-select: auto; + -moz-user-select: auto; + user-select: auto; } + +.modal-dialog.select-image { + width: 80%; } + +.modal .existing-attachments .pager { + margin: 0; } + +.modal .image-preview { + margin-bottom: 0.5em; } + +.cke_widget_drag_handler_container { + display: none !important; } + +/* ---- SNIPPET EDITOR ---- */ +#oe_snippets { + position: fixed; + left: 0px; + right: 0px; + top: 50px; + background: #282828; + box-shadow: 0px 10px 10px -10px black inset; + z-index: 1010; + overflow: hidden; } + #oe_snippets:hover { + height: auto; } + #oe_snippets .scroll { + white-space: nowrap; + overflow-y: auto; } + #oe_snippets .nav { + position: fixed; + z-index: 1; } + #oe_snippets .nav > li { + display: inline-block; + float: none; + font-size: 13px; } + #oe_snippets .nav > li > a { + padding: 2px 10px !important; + width: 100%; + display: block; } + #oe_snippets .pill-content { + margin-top: 24px; + display: inline-block; + white-space: nowrap; } + #oe_snippets .pill-content > div { + display: inline-block; + background: black; + padding: 5px; } + #oe_snippets .pill-content > div label { + width: 44px; + height: 100%; + color: white; + padding-left: 10px; } + #oe_snippets .pill-content > div label div { + width: 100px; + text-align: center; + -webkit-transform: translate(-39px, 44px); + -moz-transform: translate(-39px, 44px); + -ms-transform: translate(-39px, 44px); + -o-transform: translate(-39px, 44px); + transform: translate(-39px, 44px); + -webkit-transform-origin: 50% 50% 50%; + -moz-transform-origin: 50% 50% 50%; + -ms-transform-origin: 50% 50% 50%; + -o-transform-origin: 50% 50% 50%; + transform-origin: 50% 50% 50%; } + +.oe_snippet { + display: inline-block; + vertical-align: top; + width: 100px; + height: 100px; + margin: 1px; + margin-top: 0px; + position: relative; + overflow: hidden; + -webkit-user-select: none; + user-select: none; + cursor: move; + pointer-events: none; } + .oe_snippet .oe_snippet_thumbnail { + pointer-events: auto; + text-align: center; + height: 100%; + background: transparent; + color: white; + position: relative; } + .oe_snippet .oe_snippet_thumbnail .oe_snippet_thumbnail_title { + font-size: 12px; + display: block; } + .oe_snippet .oe_snippet_thumbnail .oe_snippet_thumbnail_img { + box-shadow: inset 0px 0px 0px 3px #333333; } + .oe_snippet .oe_snippet_thumbnail span, .oe_snippet .oe_snippet_thumbnail div { + line-height: 18px; } + .oe_snippet > :not(.oe_snippet_thumbnail) { + display: none !important; } + +#oe_snippets .oe_snippet_thumbnail { + background: #747474, -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, rgba(0, 0, 0, 0.25)), color-stop(100%, rgba(0, 0, 0, 0.4))); + background: #747474, -webkit-radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4)); + background: #747474, -moz-radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4)); + background: #747474, -o-radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4)); + background: #747474, radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4)); } + +/* ---- SNIPPETS DROP ZONES ---- */ +.oe_drop_zone.oe_insert { + display: block; + height: 48px; + margin: 0px; + margin-top: -4px; + margin-bottom: -44px; + -webkit-transition: margin 250ms linear; + -moz-transition: margin 250ms linear; + -o-transition: margin 250ms linear; + transition: margin 250ms linear; + width: 100%; + position: absolute; + z-index: 1000; } + .oe_drop_zone.oe_insert:not(.oe_vertical):before { + content: ""; + display: block; + border-top: dashed 2px rgba(209, 178, 255, 0.72); + position: relative; + top: 0px; } + .oe_drop_zone.oe_insert.oe_hover:before { + border-top: dashed 2px rgba(116, 255, 161, 0.72); } + .oe_drop_zone.oe_insert.oe_vertical { + width: 48px; + float: left; + position: relative; + margin: 0px -24px !important; } + .oe_drop_zone.oe_insert.oe_overlay { + background: rgba(153, 0, 255, 0.17); + border-radius: 3px; } + +.oe_drop_zone, .oe_drop_zone_style { + background: rgba(153, 0, 255, 0.17); + border-radius: 3px; } + .oe_drop_zone.oe_hover, .oe_drop_zone_style.oe_hover { + background: rgba(0, 255, 133, 0.22); + z-index: 1001; } + +.oe_drop_zone_style { + color: white; + height: 48px; + margin-bottom: 32px; } + +/* ---- SNIPPET MANIPULATOR ---- */ +.oe_overlay { + display: none; + position: absolute; + background: transparent; + border-radius: 3px; + -webkit-transition: opacity 100ms linear; + -moz-transition: opacity 100ms linear; + -o-transition: opacity 100ms linear; + transition: opacity 100ms linear; + box-sizing: border-box; + pointer-events: none; } + .oe_overlay.oe_active { + display: block; + border-style: dashed; + border-width: 1px; + box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset; + border-color: rgba(153, 0, 255, 0.5); } + .oe_overlay.oe_active .oe_handle { + display: block !important; + pointer-events: auto; } + .oe_overlay.oe_active .oe_handle:before { + position: relative; + top: 50%; + left: 50%; + display: block; + background: white; + border: solid 1px #9900ff; + border-radius: 8px; + width: 16px; + height: 16px; + margin: -8px; + padding-left: 1px; + font-size: 14px; + line-height: 14px; + color: #9900ff; + -webkit-transition: background 100ms linear; + -moz-transition: background 100ms linear; + -o-transition: background 100ms linear; + transition: background 100ms linear; } + .oe_overlay.oe_active .oe_handle:hover:before { + background: #9900ff; + color: white; } + .oe_overlay.oe_active .oe_handle.e:before { + content: "⇨"; } + .oe_overlay.oe_active .oe_handle.s:before { + content: "⇩"; } + .oe_overlay.oe_active .oe_handle.w:before { + content: "⇦"; } + .oe_overlay.oe_active .oe_handle.n:before { + content: "⇧"; } + .oe_overlay .icon.btn { + display: inline-block; } + .oe_overlay .oe_overlay_options { + position: absolute; + width: 100%; + text-align: center; + top: -11px; + z-index: 1002; } + .oe_overlay .oe_overlay_options .btn, .oe_overlay .oe_overlay_options a { + pointer-events: auto; + cursor: pointer; } + .oe_overlay .oe_overlay_options .dropdown { + display: inline-block; } + .oe_overlay .oe_overlay_options .dropdown-menu { + text-align: left; + min-width: 180px; } + .oe_overlay .oe_overlay_options .dropdown-menu select, .oe_overlay .oe_overlay_options .dropdown-menu input { + display: block; } + +.oe_handle { + pointer-events: auto; + position: absolute; + top: 50%; + left: 50%; + display: block; + box-sizing: border-box; + width: 8px; + height: 8px; + margin: -4px; } + +.oe_handle.n { + left: 2px; + width: 100%; + top: 0px; + cursor: s-resize; } + +.oe_handle.e { + left: auto; + top: 2px; + height: 100%; + right: 0px; + cursor: w-resize; } + +.oe_handle.s { + top: auto; + left: 2px; + width: 100%; + bottom: 0px; + cursor: n-resize; } + +.oe_handle.w { + top: 2px; + height: 100%; + left: 0px; + cursor: e-resize; } + +.s-resize-important, .s-resize-important * { + cursor: s-resize !important; } + +.n-resize-important, .n-resize-important * { + cursor: n-resize !important; } + +.e-resize-important, .e-resize-important * { + cursor: e-resize !important; } + +.w-resize-important, .w-resize-important * { + cursor: w-resize !important; } + +.move-important, .move-important * { + cursor: move !important; } + +/* ---- MOBILE PREVIEW ---- */ +.oe_mobile_preview.modal .modal-content { + height: 660px; + background-color: black; + border: 2px solid #1c1f1f; + border-radius: 10px; + margin: auto; + top: 0; + left: 0; + bottom: 0; + right: 0; + max-width: 330px; } + .oe_mobile_preview.modal .modal-content .modal-header { + background-color: black; + border-bottom: 0; + border-top-left-radius: 10px; + border-top-right-radius: 10px; } + .oe_mobile_preview.modal .modal-content .modal-header .modal-title { + color: #1c1f1f; } + .oe_mobile_preview.modal .modal-content .modal-header .close { + color: lightgrey; + opacity: 1; } + .oe_mobile_preview.modal .modal-content .modal-header .close:hover { + color: #e00101; + opacity: 1; } + .oe_mobile_preview.modal .modal-content .modal-body { + background-color: black; + max-height: 600px; + padding: 0; + margin: 0; } + .oe_mobile_preview.modal .modal-content .modal-body .oe_mobile_viewport { + width: 320px; + height: 568px; + padding: 5px; + border: none; } + .oe_mobile_preview.modal .modal-content .modal-footer { + background-color: black; } + +/* ---- SEO TOOLS ---- */ +.oe_seo_configuration .modal-dialog { + width: 80%; } +.oe_seo_configuration .oe_remove { + color: #e00101; } +.oe_seo_configuration .oe_seo_suggestion { + cursor: pointer; } +.oe_seo_configuration .oe_seo_keyword { + padding: 0.2em 0.4em 0.2em 0.5em; + border-radius: 0.4em; } +.oe_seo_configuration .keyword-in-title { + background-color: #5cb85c; + color: white; } +.oe_seo_configuration .keyword-in-description { + background-color: #428bca; + color: white; } +.oe_seo_configuration .keyword-in-body { + background-color: #5bc0de; + color: white; } + +/* ---- ACE EDITOR ---- */ +.oe_ace_view_editor { + -webkit-transition: all 0.2s ease-in; + -moz-transition: all 0.2s ease-in; + -o-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; + opacity: 0.3; + position: fixed; + top: 51px; + right: 0; + z-index: 1000; + height: 100%; } + .oe_ace_view_editor .oe_ace_view_editor_title { + width: 100%; + padding-top: 4px; + padding-left: 4px; + height: 40px; + background: #2f3129; } + .oe_ace_view_editor .oe_ace_view_editor_title .oe_view_list { + width: 50%; + height: 32px; + font-size: 14px; + font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace; + line-height: normal; } + .oe_ace_view_editor .oe_ace_view_editor_title .btn { + height: 32px; + padding: 0 4px 0 4px; + font-size: 14px; + font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace; + line-height: normal; } + .oe_ace_view_editor .ace_editor { + position: absolute; + top: 40px; + right: 0; + bottom: 51px; + left: 0; + width: 720px; } + .oe_ace_view_editor:hover { + opacity: 1; } + .oe_ace_view_editor.oe_ace_open { + width: 720px; } + .oe_ace_view_editor.oe_ace_closed { + width: 0; + opacity: 0; } + +/* ---- EDITOR TOUR ---- */ +.popover.tour-tour { + z-index: 2010; } From bc93c67c16851fff259c4fd19d453b647c487917 Mon Sep 17 00:00:00 2001 From: ddm Date: Thu, 3 Oct 2013 19:06:15 +0200 Subject: [PATCH 09/13] [IMP] Multi-step tour bzr revid: ddm@openerp.com-20131003170615-9na7692ql6464bnq --- addons/website/static/src/js/website.tour.js | 29 +++++++++++-------- .../website/static/src/xml/website.tour.xml | 10 +++++++ 2 files changed, 27 insertions(+), 12 deletions(-) diff --git a/addons/website/static/src/js/website.tour.js b/addons/website/static/src/js/website.tour.js index 3dd24e77a3b..641ceff786f 100644 --- a/addons/website/static/src/js/website.tour.js +++ b/addons/website/static/src/js/website.tour.js @@ -30,9 +30,7 @@ step.title = render('website.tour_title', { title: step.title }); return step; })); - if (self.doNotContinue()) { - self.tour.end(); - } else { + if (!self.doNotContinue()) { self.tour.start(); } }, @@ -40,7 +38,7 @@ return this.currentStepIndex() > 0 || this.tour.ended(); }, currentStepIndex: function () { - return this.tourStorage.getItem('tour_current_step'); + return parseInt(this.tourStorage.getItem('tour_current_step'), 10); }, indexOfStep: function (step_id) { var index = -1; @@ -58,6 +56,10 @@ this.tour.goto(index); } }, + saveStep: function (step_id) { + var index = this.indexOfStep(step_id); + this.tourStorage.setItem('tour_current_step', index); + }, stop: function () { this.tour.end(); }, @@ -158,21 +160,24 @@ title: "Save your modifications", content: "Click the Save button to apply modifications on your website.", template: render('website.tour_simple'), + onHide: function () { + self.saveStep('part-2'); + } }, { - step_id: 'save-changes', - element: 'button[data-action=save]', - placement: 'right', - reflex: true, - title: "Save your modifications", - content: "Click the Save button to apply modifications on your website.", - template: render('website.tour_simple'), + step_id: 'part-2', + orphan: true, + title: "Welcome to part 2", + content: "Congratulations on your first modifications.", + template: render('website.tour_end', { confirm: "Thanks :)" }), }, ]; return this._super(); }, doNotContinue: function () { - return this.currentStepIndex() > 0; + var currentStepIndex = this.currentStepIndex(); + var secondPartIndex = this.indexOfStep('part-2'); + return currentStepIndex > 0 && currentStepIndex !== secondPartIndex; } }); diff --git a/addons/website/static/src/xml/website.tour.xml b/addons/website/static/src/xml/website.tour.xml index 4651ac1046f..d0d6b7630c0 100644 --- a/addons/website/static/src/xml/website.tour.xml +++ b/addons/website/static/src/xml/website.tour.xml @@ -17,6 +17,16 @@
+ +
+
+

+
+ +
+ From b1c4741154caefbf9d75c38cab34e9589e5d486d Mon Sep 17 00:00:00 2001 From: ddm Date: Fri, 4 Oct 2013 11:37:40 +0200 Subject: [PATCH 10/13] [IMP] Support for multiple tutorials bzr revid: ddm@openerp.com-20131004093740-3dxcktks5x2xb4t2 --- addons/website/static/src/css/editor.css | 638 +++++++++++-------- addons/website/static/src/css/editor.sass | 4 +- addons/website/static/src/js/website.tour.js | 72 ++- addons/website/static/src/xml/website.xml | 8 +- 4 files changed, 427 insertions(+), 295 deletions(-) diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css index f350d45923e..e7dc70d055a 100644 --- a/addons/website/static/src/css/editor.css +++ b/addons/website/static/src/css/editor.css @@ -1,27 +1,33 @@ @charset "utf-8"; /* ---- CKEditor Minimal Reset ---- */ .navbar.navbar-inverse .cke_chrome { - border: none; } + border: none; +} .navbar.navbar-inverse .cke_inner { - background: transparent; } + background: transparent; +} .navbar.navbar-inverse .cke_toolbar { position: relative; - top: 1px; } + top: 1px; +} .navbar.navbar-inverse .cke_combo_button { padding-top: 3px; - padding-bottom: 3px; } + padding-bottom: 3px; +} .navbar.navbar-inverse .cke_button { padding-top: 7px; - padding-bottom: 7px; } + padding-bottom: 7px; +} .navbar.navbar-inverse .cke_top { background: transparent; border: none; box-shadow: none; -webkit-box-shadow: none; - -moz-box-shadow: none; } + -moz-box-shadow: none; +} /* ---- OpenERP Style ---- */ .oe_website_editorbar { @@ -38,93 +44,119 @@ background: #414141, -moz-linear-gradient(#646060, #262626); background: #414141, -o-linear-gradient(#646060, #262626); background: #414141, linear-gradient(#646060, #262626); - box-sizing: border-box; } - .oe_website_editorbar li { - display: inline; - color: #eeeeee; } - .oe_website_editorbar li:hover { - background: rgba(0, 0, 0, 0.2); - text-shadow: black 0px 0px 3px; - color: white; } + box-sizing: border-box; +} +.oe_website_editorbar li { + display: inline; + color: #eeeeee; +} +.oe_website_editorbar li:hover { + background: rgba(0, 0, 0, 0.2); + text-shadow: black 0px 0px 3px; + color: white; +} .oe_website_editorbar .oe_rte_toolbar div.dropdown { - display: inline-block; } - .oe_website_editorbar .oe_rte_toolbar div.dropdown li { - display: list-item; } + display: inline-block; +} +.oe_website_editorbar .oe_rte_toolbar div.dropdown li { + display: list-item; +} .oe_website_editorbar .oe_rte_toolbar button { font-family: FontAwesome; font-weight: normal; font-style: normal; - text-decoration: inherit; } - .oe_website_editorbar .oe_rte_toolbar button.oe_button_list { - padding-right: 3px; } - .oe_website_editorbar .oe_rte_toolbar button.oe_button_list:after { - content: "\F0D7"; - padding-left: 6px; } + text-decoration: inherit; +} +.oe_website_editorbar .oe_rte_toolbar button.oe_button_list { + padding-right: 3px; +} +.oe_website_editorbar .oe_rte_toolbar button.oe_button_list:after { + content: "\F0D7"; + padding-left: 6px; +} .oe_editable:focus { - outline: none !important; } + outline: none !important; +} .css_non_editable_mode_hidden { - display: none; } + display: none; +} .oe_carousel_options { cursor: pointer; position: absolute; white-space: nowrap; z-index: 1; - display: none; } - .oe_carousel_options > * { - display: inline-block !important; - vertical-align: middle !important; - position: relative !important; - top: 2px; } + display: none; +} +.oe_carousel_options > * { + display: inline-block !important; + vertical-align: middle !important; + position: relative !important; + top: 2px; +} /* ---- EDITOR BAR ---- */ table.editorbar-panel { cursor: pointer; - width: 100%; } - table.editorbar-panel td { - border: 1px solid #aaaaaa; } - table.editorbar-panel td.selected { - background-color: #b1c9d9; } + width: 100%; +} +table.editorbar-panel td { + border: 1px solid #aaaaaa; +} +table.editorbar-panel td.selected { + background-color: #b1c9d9; +} .oe_translate_examples li { margin: 10px; - padding: 4px; } + padding: 4px; +} .oe_translatable_text { - outline: 1px solid black; } + outline: 1px solid black; +} .oe_translatable_field { - outline: 1px dashed black; } + outline: 1px dashed black; +} .oe_translatable_text.oe_dirty, .oe_translatable_field.oe_dirty { - outline-color: red; } + outline-color: red; +} .oe_translatable_text.oe_dirty:empty { - padding: 0 10px; } + padding: 0 10px; +} .oe_translatable_todo { - background: #ffffb6; } + background: #ffffb6; +} /* ---- RTE ---- */ .oe_editable .btn { -webkit-user-select: auto; -moz-user-select: auto; - user-select: auto; } + user-select: auto; +} .modal-dialog.select-image { - width: 80%; } + width: 80%; +} .modal .existing-attachments .pager { - margin: 0; } + margin: 0; +} .modal .image-preview { - margin-bottom: 0.5em; } + margin-bottom: 0.5em; +} .cke_widget_drag_handler_container { - display: none !important; } + display: none !important; +} /* ---- SNIPPET EDITOR ---- */ #oe_snippets { @@ -135,49 +167,59 @@ table.editorbar-panel { background: #282828; box-shadow: 0px 10px 10px -10px black inset; z-index: 1010; - overflow: hidden; } - #oe_snippets:hover { - height: auto; } - #oe_snippets .scroll { - white-space: nowrap; - overflow-y: auto; } - #oe_snippets .nav { - position: fixed; - z-index: 1; } - #oe_snippets .nav > li { - display: inline-block; - float: none; - font-size: 13px; } - #oe_snippets .nav > li > a { - padding: 2px 10px !important; - width: 100%; - display: block; } - #oe_snippets .pill-content { - margin-top: 24px; - display: inline-block; - white-space: nowrap; } - #oe_snippets .pill-content > div { - display: inline-block; - background: black; - padding: 5px; } - #oe_snippets .pill-content > div label { - width: 44px; - height: 100%; - color: white; - padding-left: 10px; } - #oe_snippets .pill-content > div label div { - width: 100px; - text-align: center; - -webkit-transform: translate(-39px, 44px); - -moz-transform: translate(-39px, 44px); - -ms-transform: translate(-39px, 44px); - -o-transform: translate(-39px, 44px); - transform: translate(-39px, 44px); - -webkit-transform-origin: 50% 50% 50%; - -moz-transform-origin: 50% 50% 50%; - -ms-transform-origin: 50% 50% 50%; - -o-transform-origin: 50% 50% 50%; - transform-origin: 50% 50% 50%; } + overflow: hidden; +} +#oe_snippets:hover { + height: auto; +} +#oe_snippets .scroll { + white-space: nowrap; + overflow-y: auto; +} +#oe_snippets .nav { + position: fixed; + z-index: 1; +} +#oe_snippets .nav > li { + display: inline-block; + float: none; + font-size: 13px; +} +#oe_snippets .nav > li > a { + padding: 2px 10px !important; + width: 100%; + display: block; +} +#oe_snippets .pill-content { + margin-top: 24px; + display: inline-block; + white-space: nowrap; +} +#oe_snippets .pill-content > div { + display: inline-block; + background: black; + padding: 5px; +} +#oe_snippets .pill-content > div label { + width: 44px; + height: 100%; + color: white; + padding-left: 10px; +} +#oe_snippets .pill-content > div label div { + width: 100px; + text-align: center; + -webkit-transform: translate(-39px, 44px); + -moz-transform: translate(-39px, 44px); + -ms-transform: translate(-39px, 44px); + -o-transform: translate(-39px, 44px); + transform: translate(-39px, 44px); + -webkit-transform-origin: 50% 50% 50%; + -moz-transform-origin: 50% 50% 50%; + -ms-transform-origin: 50% 50% 50%; + -o-transform-origin: 50% 50% 50%; + transform-origin: 50% 50% 50%; +} .oe_snippet { display: inline-block; @@ -191,30 +233,37 @@ table.editorbar-panel { -webkit-user-select: none; user-select: none; cursor: move; - pointer-events: none; } - .oe_snippet .oe_snippet_thumbnail { - pointer-events: auto; - text-align: center; - height: 100%; - background: transparent; - color: white; - position: relative; } - .oe_snippet .oe_snippet_thumbnail .oe_snippet_thumbnail_title { - font-size: 12px; - display: block; } - .oe_snippet .oe_snippet_thumbnail .oe_snippet_thumbnail_img { - box-shadow: inset 0px 0px 0px 3px #333333; } - .oe_snippet .oe_snippet_thumbnail span, .oe_snippet .oe_snippet_thumbnail div { - line-height: 18px; } - .oe_snippet > :not(.oe_snippet_thumbnail) { - display: none !important; } + pointer-events: none; +} +.oe_snippet .oe_snippet_thumbnail { + pointer-events: auto; + text-align: center; + height: 100%; + background: transparent; + color: white; + position: relative; +} +.oe_snippet .oe_snippet_thumbnail .oe_snippet_thumbnail_title { + font-size: 12px; + display: block; +} +.oe_snippet .oe_snippet_thumbnail .oe_snippet_thumbnail_img { + box-shadow: inset 0px 0px 0px 3px #333333; +} +.oe_snippet .oe_snippet_thumbnail span, .oe_snippet .oe_snippet_thumbnail div { + line-height: 18px; +} +.oe_snippet > :not(.oe_snippet_thumbnail) { + display: none !important; +} #oe_snippets .oe_snippet_thumbnail { background: #747474, -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, rgba(0, 0, 0, 0.25)), color-stop(100%, rgba(0, 0, 0, 0.4))); background: #747474, -webkit-radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4)); background: #747474, -moz-radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4)); background: #747474, -o-radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4)); - background: #747474, radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4)); } + background: #747474, radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4)); +} /* ---- SNIPPETS DROP ZONES ---- */ .oe_drop_zone.oe_insert { @@ -229,35 +278,43 @@ table.editorbar-panel { transition: margin 250ms linear; width: 100%; position: absolute; - z-index: 1000; } - .oe_drop_zone.oe_insert:not(.oe_vertical):before { - content: ""; - display: block; - border-top: dashed 2px rgba(209, 178, 255, 0.72); - position: relative; - top: 0px; } - .oe_drop_zone.oe_insert.oe_hover:before { - border-top: dashed 2px rgba(116, 255, 161, 0.72); } - .oe_drop_zone.oe_insert.oe_vertical { - width: 48px; - float: left; - position: relative; - margin: 0px -24px !important; } - .oe_drop_zone.oe_insert.oe_overlay { - background: rgba(153, 0, 255, 0.17); - border-radius: 3px; } + z-index: 1000; +} +.oe_drop_zone.oe_insert:not(.oe_vertical):before { + content: ""; + display: block; + border-top: dashed 2px rgba(209, 178, 255, 0.72); + position: relative; + top: 0px; +} +.oe_drop_zone.oe_insert.oe_hover:before { + border-top: dashed 2px rgba(116, 255, 161, 0.72); +} +.oe_drop_zone.oe_insert.oe_vertical { + width: 48px; + float: left; + position: relative; + margin: 0px -24px !important; +} +.oe_drop_zone.oe_insert.oe_overlay { + background: rgba(153, 0, 255, 0.17); + border-radius: 3px; +} .oe_drop_zone, .oe_drop_zone_style { background: rgba(153, 0, 255, 0.17); - border-radius: 3px; } - .oe_drop_zone.oe_hover, .oe_drop_zone_style.oe_hover { - background: rgba(0, 255, 133, 0.22); - z-index: 1001; } + border-radius: 3px; +} +.oe_drop_zone.oe_hover, .oe_drop_zone_style.oe_hover { + background: rgba(0, 255, 133, 0.22); + z-index: 1001; +} .oe_drop_zone_style { color: white; height: 48px; - margin-bottom: 32px; } + margin-bottom: 32px; +} /* ---- SNIPPET MANIPULATOR ---- */ .oe_overlay { @@ -270,64 +327,79 @@ table.editorbar-panel { -o-transition: opacity 100ms linear; transition: opacity 100ms linear; box-sizing: border-box; - pointer-events: none; } - .oe_overlay.oe_active { - display: block; - border-style: dashed; - border-width: 1px; - box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset; - border-color: rgba(153, 0, 255, 0.5); } - .oe_overlay.oe_active .oe_handle { - display: block !important; - pointer-events: auto; } - .oe_overlay.oe_active .oe_handle:before { - position: relative; - top: 50%; - left: 50%; - display: block; - background: white; - border: solid 1px #9900ff; - border-radius: 8px; - width: 16px; - height: 16px; - margin: -8px; - padding-left: 1px; - font-size: 14px; - line-height: 14px; - color: #9900ff; - -webkit-transition: background 100ms linear; - -moz-transition: background 100ms linear; - -o-transition: background 100ms linear; - transition: background 100ms linear; } - .oe_overlay.oe_active .oe_handle:hover:before { - background: #9900ff; - color: white; } - .oe_overlay.oe_active .oe_handle.e:before { - content: "⇨"; } - .oe_overlay.oe_active .oe_handle.s:before { - content: "⇩"; } - .oe_overlay.oe_active .oe_handle.w:before { - content: "⇦"; } - .oe_overlay.oe_active .oe_handle.n:before { - content: "⇧"; } - .oe_overlay .icon.btn { - display: inline-block; } - .oe_overlay .oe_overlay_options { - position: absolute; - width: 100%; - text-align: center; - top: -11px; - z-index: 1002; } - .oe_overlay .oe_overlay_options .btn, .oe_overlay .oe_overlay_options a { - pointer-events: auto; - cursor: pointer; } - .oe_overlay .oe_overlay_options .dropdown { - display: inline-block; } - .oe_overlay .oe_overlay_options .dropdown-menu { - text-align: left; - min-width: 180px; } - .oe_overlay .oe_overlay_options .dropdown-menu select, .oe_overlay .oe_overlay_options .dropdown-menu input { - display: block; } + pointer-events: none; +} +.oe_overlay.oe_active { + display: block; + border-style: dashed; + border-width: 1px; + box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset; + border-color: rgba(153, 0, 255, 0.5); +} +.oe_overlay.oe_active .oe_handle { + display: block !important; + pointer-events: auto; +} +.oe_overlay.oe_active .oe_handle:before { + position: relative; + top: 50%; + left: 50%; + display: block; + background: white; + border: solid 1px #9900ff; + border-radius: 8px; + width: 16px; + height: 16px; + margin: -8px; + padding-left: 1px; + font-size: 14px; + line-height: 14px; + color: #9900ff; + -webkit-transition: background 100ms linear; + -moz-transition: background 100ms linear; + -o-transition: background 100ms linear; + transition: background 100ms linear; +} +.oe_overlay.oe_active .oe_handle:hover:before { + background: #9900ff; + color: white; +} +.oe_overlay.oe_active .oe_handle.e:before { + content: "⇨"; +} +.oe_overlay.oe_active .oe_handle.s:before { + content: "⇩"; +} +.oe_overlay.oe_active .oe_handle.w:before { + content: "⇦"; +} +.oe_overlay.oe_active .oe_handle.n:before { + content: "⇧"; +} +.oe_overlay .icon.btn { + display: inline-block; +} +.oe_overlay .oe_overlay_options { + position: absolute; + width: 100%; + text-align: center; + top: -11px; + z-index: 1002; +} +.oe_overlay .oe_overlay_options .btn, .oe_overlay .oe_overlay_options a { + pointer-events: auto; + cursor: pointer; +} +.oe_overlay .oe_overlay_options .dropdown { + display: inline-block; +} +.oe_overlay .oe_overlay_options .dropdown-menu { + text-align: left; + min-width: 180px; +} +.oe_overlay .oe_overlay_options .dropdown-menu select, .oe_overlay .oe_overlay_options .dropdown-menu input { + display: block; +} .oe_handle { pointer-events: auto; @@ -338,48 +410,58 @@ table.editorbar-panel { box-sizing: border-box; width: 8px; height: 8px; - margin: -4px; } + margin: -4px; +} .oe_handle.n { left: 2px; width: 100%; top: 0px; - cursor: s-resize; } + cursor: s-resize; +} .oe_handle.e { left: auto; top: 2px; height: 100%; right: 0px; - cursor: w-resize; } + cursor: w-resize; +} .oe_handle.s { top: auto; left: 2px; width: 100%; bottom: 0px; - cursor: n-resize; } + cursor: n-resize; +} .oe_handle.w { top: 2px; height: 100%; left: 0px; - cursor: e-resize; } + cursor: e-resize; +} .s-resize-important, .s-resize-important * { - cursor: s-resize !important; } + cursor: s-resize !important; +} .n-resize-important, .n-resize-important * { - cursor: n-resize !important; } + cursor: n-resize !important; +} .e-resize-important, .e-resize-important * { - cursor: e-resize !important; } + cursor: e-resize !important; +} .w-resize-important, .w-resize-important * { - cursor: w-resize !important; } + cursor: w-resize !important; +} .move-important, .move-important * { - cursor: move !important; } + cursor: move !important; +} /* ---- MOBILE PREVIEW ---- */ .oe_mobile_preview.modal .modal-content { @@ -392,52 +474,67 @@ table.editorbar-panel { left: 0; bottom: 0; right: 0; - max-width: 330px; } - .oe_mobile_preview.modal .modal-content .modal-header { - background-color: black; - border-bottom: 0; - border-top-left-radius: 10px; - border-top-right-radius: 10px; } - .oe_mobile_preview.modal .modal-content .modal-header .modal-title { - color: #1c1f1f; } - .oe_mobile_preview.modal .modal-content .modal-header .close { - color: lightgrey; - opacity: 1; } - .oe_mobile_preview.modal .modal-content .modal-header .close:hover { - color: #e00101; - opacity: 1; } - .oe_mobile_preview.modal .modal-content .modal-body { - background-color: black; - max-height: 600px; - padding: 0; - margin: 0; } - .oe_mobile_preview.modal .modal-content .modal-body .oe_mobile_viewport { - width: 320px; - height: 568px; - padding: 5px; - border: none; } - .oe_mobile_preview.modal .modal-content .modal-footer { - background-color: black; } + max-width: 330px; +} +.oe_mobile_preview.modal .modal-content .modal-header { + background-color: black; + border-bottom: 0; + border-top-left-radius: 10px; + border-top-right-radius: 10px; +} +.oe_mobile_preview.modal .modal-content .modal-header .modal-title { + color: #1c1f1f; +} +.oe_mobile_preview.modal .modal-content .modal-header .close { + color: lightgrey; + opacity: 1; +} +.oe_mobile_preview.modal .modal-content .modal-header .close:hover { + color: #e00101; + opacity: 1; +} +.oe_mobile_preview.modal .modal-content .modal-body { + background-color: black; + max-height: 600px; + padding: 0; + margin: 0; +} +.oe_mobile_preview.modal .modal-content .modal-body .oe_mobile_viewport { + width: 320px; + height: 568px; + padding: 5px; + border: none; +} +.oe_mobile_preview.modal .modal-content .modal-footer { + background-color: black; +} /* ---- SEO TOOLS ---- */ .oe_seo_configuration .modal-dialog { - width: 80%; } + width: 80%; +} .oe_seo_configuration .oe_remove { - color: #e00101; } + color: #e00101; +} .oe_seo_configuration .oe_seo_suggestion { - cursor: pointer; } + cursor: pointer; +} .oe_seo_configuration .oe_seo_keyword { padding: 0.2em 0.4em 0.2em 0.5em; - border-radius: 0.4em; } + border-radius: 0.4em; +} .oe_seo_configuration .keyword-in-title { background-color: #5cb85c; - color: white; } + color: white; +} .oe_seo_configuration .keyword-in-description { background-color: #428bca; - color: white; } + color: white; +} .oe_seo_configuration .keyword-in-body { background-color: #5bc0de; - color: white; } + color: white; +} /* ---- ACE EDITOR ---- */ .oe_ace_view_editor { @@ -450,40 +547,49 @@ table.editorbar-panel { top: 51px; right: 0; z-index: 1000; - height: 100%; } - .oe_ace_view_editor .oe_ace_view_editor_title { - width: 100%; - padding-top: 4px; - padding-left: 4px; - height: 40px; - background: #2f3129; } - .oe_ace_view_editor .oe_ace_view_editor_title .oe_view_list { - width: 50%; - height: 32px; - font-size: 14px; - font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace; - line-height: normal; } - .oe_ace_view_editor .oe_ace_view_editor_title .btn { - height: 32px; - padding: 0 4px 0 4px; - font-size: 14px; - font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace; - line-height: normal; } - .oe_ace_view_editor .ace_editor { - position: absolute; - top: 40px; - right: 0; - bottom: 51px; - left: 0; - width: 720px; } - .oe_ace_view_editor:hover { - opacity: 1; } - .oe_ace_view_editor.oe_ace_open { - width: 720px; } - .oe_ace_view_editor.oe_ace_closed { - width: 0; - opacity: 0; } + height: 100%; +} +.oe_ace_view_editor .oe_ace_view_editor_title { + width: 100%; + padding-top: 4px; + padding-left: 4px; + height: 40px; + background: #2f3129; +} +.oe_ace_view_editor .oe_ace_view_editor_title .oe_view_list { + width: 50%; + height: 32px; + font-size: 14px; + font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace; + line-height: normal; +} +.oe_ace_view_editor .oe_ace_view_editor_title .btn { + height: 32px; + padding: 0 4px 0 4px; + font-size: 14px; + font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace; + line-height: normal; +} +.oe_ace_view_editor .ace_editor { + position: absolute; + top: 40px; + right: 0; + bottom: 51px; + left: 0; + width: 720px; +} +.oe_ace_view_editor:hover { + opacity: 1; +} +.oe_ace_view_editor.oe_ace_open { + width: 720px; +} +.oe_ace_view_editor.oe_ace_closed { + width: 0; + opacity: 0; +} /* ---- EDITOR TOUR ---- */ -.popover.tour-tour { - z-index: 2010; } +.popover.tour { + z-index: 2010; +} diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass index f676b757ca8..c5e3f39b7c8 100644 --- a/addons/website/static/src/css/editor.sass +++ b/addons/website/static/src/css/editor.sass @@ -176,7 +176,7 @@ table.editorbar-panel div width: 100px text-align: center - @include transform( translate(-39px, 44px) , rotate(-90deg) ) + @include transform( translate(-39px, 44px) , rotate(-90deg) ) @include transform-origin(50% 50%) .oe_snippet @@ -486,7 +486,7 @@ $navbar_height: 51px /* ---- EDITOR TOUR ---- */ -.popover.tour-tour +.popover.tour z-index: 2010 // vim:tabstop=4:shiftwidth=4:softtabstop=4:fdm=marker: diff --git a/addons/website/static/src/js/website.tour.js b/addons/website/static/src/js/website.tour.js index 641ceff786f..2f13116d47c 100644 --- a/addons/website/static/src/js/website.tour.js +++ b/addons/website/static/src/js/website.tour.js @@ -6,26 +6,28 @@ function render (template, dict) { return openerp.qweb.render(template, dict); - }; + } website.EditorTour = openerp.Class.extend({ editor: undefined, + tour: undefined, steps: [], tourStorage: window.localStorage, init: function (editor) { this.editor = editor; - this.tour = new Tour({ - storage: this.tourStorage, - keyboard: false, - }); }, reset: function () { - this.tourStorage.removeItem('tour_current_step'); - this.tourStorage.removeItem('tour_end'); + this.tourStorage.removeItem(this.id+'_current_step'); + this.tourStorage.removeItem(this.id+'_end'); $('.popover.tour').remove(); }, start: function () { var self = this; + self.tour = new Tour({ + name: self.id, + storage: this.tourStorage, + keyboard: false, + }); self.tour.addSteps(_.map(self.steps, function (step) { step.title = render('website.tour_title', { title: step.title }); return step; @@ -38,27 +40,27 @@ return this.currentStepIndex() > 0 || this.tour.ended(); }, currentStepIndex: function () { - return parseInt(this.tourStorage.getItem('tour_current_step'), 10); + return parseInt(this.tourStorage.getItem(this.id+'_current_step'), 10); }, - indexOfStep: function (step_id) { + indexOfStep: function (stepId) { var index = -1; _.each(this.steps, function (step, i) { - if (step.step_id === step_id) { + if (step.stepId === stepId) { index = i; } }); return index; }, - movetoStep: function (step_id) { + movetoStep: function (stepId) { $('.popover.tour').remove(); - var index = this.indexOfStep(step_id); + var index = this.indexOfStep(stepId); if (index > -1) { this.tour.goto(index); } }, - saveStep: function (step_id) { - var index = this.indexOfStep(step_id); - this.tourStorage.setItem('tour_current_step', index); + saveStep: function (stepId) { + var index = this.indexOfStep(stepId); + this.tourStorage.setItem(this.id+'_current_step', index); }, stop: function () { this.tour.end(); @@ -66,12 +68,13 @@ }); website.EditorBasicTour = website.EditorTour.extend({ - name: "Add a banner to your page", + id: 'add_banner_tour', + name: "How to add a banner", start: function () { var self = this; self.steps = [ { - step_id: 'welcome', + stepId: 'welcome', orphan: true, backdrop: true, title: "Welcome to your website!", @@ -79,7 +82,7 @@ template: render('website.tour_confirm', { confirm: "Tell me more!" }), }, { - step_id: 'edit-page', + stepId: 'edit-page', element: 'button[data-action=edit]', placement: 'right', reflex: true, @@ -88,7 +91,7 @@ template: render('website.tour_simple'), }, { - step_id: 'show-bar', + stepId: 'show-bar', element: '#website-top-navbar', placement: 'bottom', title: "Editor bar", @@ -96,7 +99,7 @@ template: render('website.tour_confirm', { confirm: "Got it, now what?" }), }, { - step_id: 'add-block', + stepId: 'add-block', element: 'button[data-action=snippet]', placement: 'right', reflex: true, @@ -105,7 +108,7 @@ template: render('website.tour_simple'), }, { - step_id: 'drag-banner', + stepId: 'drag-banner', element: '#website-top-navbar [data-snippet-id=carousel]', placement: 'bottom', title: "Add a banner to your page", @@ -126,7 +129,7 @@ }, }, { - step_id: 'edit-title', + stepId: 'edit-title', element: '#wrap [data-snippet-id=carousel]:first .carousel-caption', placement: 'top', title: "Change the title", @@ -140,7 +143,7 @@ }, }, { - step_id: 'customize-banner', + stepId: 'customize-banner', element: '.oe_overlay_options .oe_options', placement: 'left', title: "Customize the banner", @@ -153,7 +156,7 @@ }, }, { - step_id: 'save-changes', + stepId: 'save-changes', element: 'button[data-action=save]', placement: 'right', reflex: true, @@ -165,11 +168,19 @@ } }, { - step_id: 'part-2', + stepId: 'part-2', orphan: true, title: "Welcome to part 2", content: "Congratulations on your first modifications.", - template: render('website.tour_end', { confirm: "Thanks :)" }), + template: render('website.tour_confirm', { confirm: "Thanks :)" }), + }, + { + stepId: 'show-tutorials', + element: '#help-menu-button', + placement: 'left', + title: "Help is always available", + content: "You can find more tutorials in the Help menu.", + template: render('website.tour_end', { confirm: "See you next time..." }), }, ]; return this._super(); @@ -186,6 +197,15 @@ website.tutorials = { basic: new website.EditorBasicTour(this), }; + var menu = $('#help-menu'); + _.each(website.tutorials, function (tutorial) { + var $menuItem = $($.parseHTML('
  • '+tutorial.name+'
    • ')); + $menuItem.click(function () { + tutorial.reset(); + tutorial.start(); + }) + menu.append($menuItem); + }); website.tutorials.basic.start(); return this._super(); }, diff --git a/addons/website/static/src/xml/website.xml b/addons/website/static/src/xml/website.xml index c2f7abe6ed2..a47449606bc 100644 --- a/addons/website/static/src/xml/website.xml +++ b/addons/website/static/src/xml/website.xml @@ -23,11 +23,17 @@
  • Promote
  • - Customize + Customize
    • +
  • + Help + +
  • Apps
    • From e76ce7da829cb5665fcd953ecb1697a50fa2e7f8 Mon Sep 17 00:00:00 2001 From: ddm Date: Fri, 4 Oct 2013 12:03:15 +0200 Subject: [PATCH 11/13] [IMP] Minor tutorial improvements bzr revid: ddm@openerp.com-20131004100315-hshfanxesnm478n3 --- addons/website/static/src/js/website.tour.js | 10 +++++----- addons/website/static/src/xml/website.xml | 4 ++-- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/addons/website/static/src/js/website.tour.js b/addons/website/static/src/js/website.tour.js index 2f13116d47c..464d72b2354 100644 --- a/addons/website/static/src/js/website.tour.js +++ b/addons/website/static/src/js/website.tour.js @@ -32,12 +32,12 @@ step.title = render('website.tour_title', { title: step.title }); return step; })); - if (!self.doNotContinue()) { + if (self.canResume()) { self.tour.start(); } }, - doNotContinue: function () { - return this.currentStepIndex() > 0 || this.tour.ended(); + canResume: function () { + return this.currentStepIndex() === 0 && !this.tour.ended(); }, currentStepIndex: function () { return parseInt(this.tourStorage.getItem(this.id+'_current_step'), 10); @@ -185,10 +185,10 @@ ]; return this._super(); }, - doNotContinue: function () { + canResume: function () { var currentStepIndex = this.currentStepIndex(); var secondPartIndex = this.indexOfStep('part-2'); - return currentStepIndex > 0 && currentStepIndex !== secondPartIndex; + return currentStepIndex === 0 || currentStepIndex === secondPartIndex; } }); diff --git a/addons/website/static/src/xml/website.xml b/addons/website/static/src/xml/website.xml index a47449606bc..b3e4cacd32a 100644 --- a/addons/website/static/src/xml/website.xml +++ b/addons/website/static/src/xml/website.xml @@ -23,13 +23,13 @@
  • Promote
  • - Customize + Customize
  • - Help + Help From 22299403ab72953e7f1ea63eda1dc3a7fb92f2bd Mon Sep 17 00:00:00 2001 From: Christophe Matthieu Date: Mon, 7 Oct 2013 13:36:20 +0200 Subject: [PATCH 12/13] [IMP] website snippet: add buttons on carousel and fix drop snippets bzr revid: chm@openerp.com-20131007113620-ai8k461jtuwut3bd --- .../website/static/src/js/website.snippets.js | 183 +++++++++++------- addons/website/views/snippets.xml | 10 +- 2 files changed, 122 insertions(+), 71 deletions(-) diff --git a/addons/website/static/src/js/website.snippets.js b/addons/website/static/src/js/website.snippets.js index d85b2a814eb..3877635a84d 100644 --- a/addons/website/static/src/js/website.snippets.js +++ b/addons/website/static/src/js/website.snippets.js @@ -243,12 +243,10 @@ // activate drag and drop for the snippets in the snippet toolbar make_snippet_draggable: function($snippets){ var self = this; - var $toInsert = false; var $tumb = $snippets.find(".oe_snippet_thumbnail:first"); var left = $tumb.outerWidth()/2; var top = $tumb.outerHeight()/2; - var dropped = false; - var $snippet = false; + var $toInsert, dropped, $snippet, action, snipped_id; $snippets.draggable({ greedy: true, @@ -265,8 +263,8 @@ self.hide(); dropped = false; $snippet = $(this); - var snipped_id = $snippet.data('snippet-id'); - var action = $snippet.find('.oe_snippet_body').size() ? 'insert' : 'mutate'; + snipped_id = $snippet.data('snippet-id'); + action = $snippet.find('.oe_snippet_body').size() ? 'insert' : 'mutate'; if( action === 'insert'){ if (!$snippet.data('selector-siblings') && !$snippet.data('selector-children') && !$snippet.data('selector-vertical-children')) { console.debug($snippet.data("snippet-id") + " have oe_snippet_body class and have not for insert action"+ @@ -312,38 +310,38 @@ }, drop: function(){ dropped = true; - - var $target = false; - if(action === 'insert'){ - $target = $toInsert; - - if (website.snippet.animationRegistry[snipped_id]) { - new website.snippet.animationRegistry[snipped_id]($target); - } - - self.create_overlay($target); - $target.data("snippet-editor").build_snippet($target); - - } else { - $target = $(this).data('target'); - - self.create_overlay($target); - if (website.snippet.editorRegistry[snipped_id]) { - var snippet = new website.snippet.editorRegistry[snipped_id](self, $target); - snippet.build_snippet($target); - } - } - - $('.oe_drop_zone').remove(); - - setTimeout(function () {self.make_active($target);},0); }, }); }, stop: function(){ $('.oe_drop_zone').droppable('destroy').remove(); - if (!dropped && self.$modal.find('input:not(:checked)').length) { - self.$modal.modal('toggle'); + if (dropped) { + var $target = false; + if(action === 'insert'){ + $target = $toInsert; + + if (website.snippet.animationRegistry[snipped_id]) { + new website.snippet.animationRegistry[snipped_id]($target); + } + + self.create_overlay($target); + $target.data("snippet-editor").build_snippet($target); + + } else { + $target = $(this).data('target'); + + self.create_overlay($target); + if (website.snippet.editorRegistry[snipped_id]) { + var snippet = new website.snippet.editorRegistry[snipped_id](self, $target); + snippet.build_snippet($target); + } + } + setTimeout(function () {self.make_active($target);},0); + } else { + $toInsert.remove(); + if (self.$modal.find('input:not(:checked)').length) { + self.$modal.modal('toggle'); + } } }, }); @@ -488,7 +486,6 @@ $zone.appendTo('#oe_manipulators'); $zone.data('target',$target); $target.data('overlay',$zone); - console.log($target[0], $zone); $target.on("DOMNodeInserted DOMNodeRemoved DOMSubtreeModified", function () { self.cover_target($zone, $target); @@ -746,16 +743,8 @@ change_background: function (bg, ul_options) { var self = this; + this.set_options_background(bg, ul_options); var $ul = this.$editor.find(ul_options); - var bg_value = (typeof bg === 'string' ? self.$target.find(bg) : $(bg)).css("background-image").replace(/url\(['"]*|['"]*\)/g, ""); - - // select in ul options - $ul.find("li").removeClass("active"); - var selected = $ul.find('[data-value="' + bg_value + '"], [data-value="' + bg_value.replace(/.*:\/\/[^\/]+/, '') + '"]'); - selected.addClass('active'); - if (!selected.length) { - $ul.find('.oe_custom_bg b').html(bg_value); - } // bind envent on options var $li = $ul.find("li"); @@ -787,6 +776,19 @@ $bg.css("background-image", "url(" + src + ")"); }); }, + + 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, ""); + + // select in ul options + $ul.find("li").removeClass("active"); + var selected = $ul.find('[data-value="' + bg_value + '"], [data-value="' + bg_value.replace(/.*:\/\/[^\/]+/, '') + '"]'); + selected.addClass('active'); + if (!selected.length) { + $ul.find('.oe_custom_bg b').html(bg_value); + } + }, }); @@ -974,50 +976,95 @@ }); website.snippet.editorRegistry.carousel = website.snippet.editorRegistry.resize.extend({ - build_snippet: function($target) { - var id = "myCarousel" + $("body .carousel").length; - $target.attr("id", id); - $target.find(".carousel-control").attr("href", "#"+id); + build_snippet: function() { + var id = 0; + $("body .carousel").each(function () { + var _id = +$(this).attr("id").replace(/^myCarousel/, ''); + if (id <= _id) { + id = _id + 1; + } + }); + this.$target.attr("id", "myCarousel" + id); + this.$target.find(".carousel-control").attr("href", "#myCarousel" + id); + this.$target.find("[data-target='#myCarousel']").attr("data-target", "#myCarousel" + id); + this.rebind_event(); + }, + onFocus: function () { + this._super(); + this.$target.carousel('pause'); + }, + onBlur: function () { + this._super(); + this.$target.carousel('cycle'); }, start : function () { this._super(); + this.id = this.$target.attr("id"); + + this.$inner = this.$target.find('.carousel-inner'); + this.$indicators = this.$target.find('.carousel-indicators'); + this.$editor.find(".js_add").on('click', _.bind(this.on_add, this)); this.$editor.find(".js_remove").on('click', _.bind(this.on_remove, this)); this.change_background(".item.active", 'ul[name="carousel-background"]'); this.change_style(); - this.set_options_style(); this.change_size(); + this.set_options_style(); + this.$target.carousel(); + + var self = this; + this.$target.on('slide.bs.carousel', function () { + self.set_options_style(); + self.set_options_background(".item.active", 'ul[name="carousel-background"]'); + self.$target.carousel(); + }); + + this.rebind_event(); + }, + // rebind event to active carousel on edit mode + rebind_event: function () { + var self = this; + this.$target.on('click', '.carousel-control', function () { + self.$target.carousel($(this).data('slide')); }); + this.$target.on('click', '.carousel-indicators [data-target]', function () { + self.$target.carousel(+$(this).data('slide-to')); }); }, on_add: function (e) { e.preventDefault(); - this.$target.find('.carousel-control').removeClass("hidden"); - var $inner = this.$target.find('.carousel-inner'); - var cycle = $inner.find('.item').length; - $inner.find('.item.active').clone().removeClass('active').appendTo($inner); - this.$target.carousel(cycle); - this.set_options_background(); - this.set_options_style(); + var cycle = this.$inner.find('.item').length; + var $active = this.$inner.find('.item.active'); + var index = $active.index(); + this.$target.find('.carousel-control, .carousel-indicators').removeClass("hidden"); + this.$indicators.append('
  • '); + $active.clone().removeClass('active').insertAfter($active); + this.$target.carousel().carousel(++index); }, on_remove: function (e) { e.preventDefault(); - var $inner = this.$target.find('.carousel-inner'); - var nb = $inner.find('.item').length; - if (nb > 1) { - $inner - .find('.item.active').remove().end() - .find('.item:first').addClass('active'); - this.$target.carousel(0); - this.set_options_style(); - } - if (nb <= 1) { - this.$target.find('.carousel-control').addClass("hidden"); + var self = this; + var new_index = 0; + var cycle = this.$inner.find('.item').length - 1; + var index = this.$inner.find('.item.active').index(); + if (cycle > 0) { + this.$inner.find('.item.active').fadeOut(1000, function () { + $(this).remove(); + self.$indicators.find('[data-target]:last').remove(); + self.$indicators.find("[data-slide-to]").removeClass("active"); + self.$indicators.find("[data-slide-to='" + new_index + "']").addClass("active"); + }); + setTimeout(function () { + new_index = index % cycle; + self.$target.carousel( new_index + 1 ); + }, 500); + } else { + this.$target.find('.carousel-control, .carousel-indicators').addClass("hidden"); } }, set_options_style: function () { var style = false; - var $el = this.$target.find('.carousel-inner .item.active'); + var $el = this.$inner.find('.item.active'); var $ul = this.$editor.find('ul[name="carousel-style"]'); var $li = $ul.find("li"); @@ -1040,12 +1087,12 @@ $(this).addClass("active"); }) .on('mouseover', function (event) { - var $el = self.$target.find('.carousel-inner .item.active'); + var $el = self.$inner.find('.item.active'); $el.removeClass('image_text text_image text_only'); $el.addClass($(event.currentTarget).data("value")); }) .on('mouseout', function (event) { - var $el = self.$target.find('.carousel-inner .item.active'); + var $el = self.$inner.find('.item.active'); $el.removeClass('image_text text_image text_only'); $el.addClass($ul.find('li.active').data("value")); }); diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml index 1a79d52d5cc..5e9bb5e623d 100644 --- a/addons/website/views/snippets.xml +++ b/addons/website/views/snippets.xml @@ -63,7 +63,11 @@ Banner -
    +
    + +
    @@ -80,8 +84,8 @@
    - - + +
    From 5a9d5f40ed48dd6ccc9bb118e792ed4d13e0368c Mon Sep 17 00:00:00 2001 From: ddm Date: Mon, 7 Oct 2013 14:07:43 +0200 Subject: [PATCH 13/13] [FIX] Start tour only when coming from admin bzr revid: ddm@openerp.com-20131007120743-yevkncvcw655mljh --- addons/website/static/src/css/editor.css | 637 ++++++++++++++++++ addons/website/static/src/js/website.tour.js | 72 +- .../website/static/src/xml/website.tour.xml | 15 +- 3 files changed, 691 insertions(+), 33 deletions(-) diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css index e69de29bb2d..7a0c6cace19 100644 --- a/addons/website/static/src/css/editor.css +++ b/addons/website/static/src/css/editor.css @@ -0,0 +1,637 @@ +@charset "utf-8"; +/* ---- CKEditor Minimal Reset ---- */ +.navbar.navbar-inverse .cke_chrome { + border: none; +} + +.navbar.navbar-inverse .cke_inner { + background: transparent; +} + +.navbar.navbar-inverse .cke_toolbar { + position: relative; + top: 1px; +} +.navbar.navbar-inverse .cke_combo_button { + padding-top: 3px; + padding-bottom: 3px; +} +.navbar.navbar-inverse .cke_button { + padding-top: 7px; + padding-bottom: 7px; +} + +.navbar.navbar-inverse .cke_top { + background: transparent; + border: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} + +/* ---- OpenERP Style ---- */ +.oe_website_editorbar { + position: fixed; + top: 0; + right: 0; + display: block; + width: 100%; + padding: 2px; + margin: 0; + z-index: 20000; + background: #414141, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #646060), color-stop(100%, #262626)); + background: #414141, -webkit-linear-gradient(#646060, #262626); + background: #414141, -moz-linear-gradient(#646060, #262626); + background: #414141, -o-linear-gradient(#646060, #262626); + background: #414141, linear-gradient(#646060, #262626); + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +.oe_website_editorbar li { + display: inline; + color: #eeeeee; +} +.oe_website_editorbar li:hover { + background: rgba(0, 0, 0, 0.2); + text-shadow: black 0px 0px 3px; + color: white; +} + +.oe_website_editorbar .oe_rte_toolbar div.dropdown { + display: inline-block; +} +.oe_website_editorbar .oe_rte_toolbar div.dropdown li { + display: list-item; +} +.oe_website_editorbar .oe_rte_toolbar button { + font-family: FontAwesome; + font-weight: normal; + font-style: normal; + text-decoration: inherit; +} +.oe_website_editorbar .oe_rte_toolbar button.oe_button_list { + padding-right: 3px; +} +.oe_website_editorbar .oe_rte_toolbar button.oe_button_list:after { + content: "\F0D7"; + padding-left: 6px; +} + +.oe_editable:focus { + outline: none !important; +} + +.css_non_editable_mode_hidden { + display: none; +} + +.oe_carousel_options { + cursor: pointer; + position: absolute; + white-space: nowrap; + z-index: 1; + display: none; +} +.oe_carousel_options > * { + display: inline-block !important; + vertical-align: middle !important; + position: relative !important; + top: 2px; +} + +/* ---- EDITOR BAR ---- */ +table.editorbar-panel { + cursor: pointer; + width: 100%; +} +table.editorbar-panel td { + border: 1px solid #aaaaaa; +} +table.editorbar-panel td.selected { + background-color: #b1c9d9; +} + +.oe_translate_examples li { + margin: 10px; + padding: 4px; +} + +.oe_translatable_text { + outline: 1px solid black; +} + +.oe_translatable_field { + outline: 1px dashed black; +} + +.oe_translatable_text.oe_dirty, .oe_translatable_field.oe_dirty { + outline-color: red; +} + +.oe_translatable_text.oe_dirty:empty { + padding: 0 10px; +} + +.oe_translatable_todo { + background: #ffffb6; +} + +/* ---- RTE ---- */ +.oe_editable .btn { + -webkit-user-select: auto; + -moz-user-select: auto; + user-select: auto; +} + +.modal-dialog.select-image { + width: 80%; +} + +.modal .existing-attachments .pager { + margin: 0; +} + +.modal .image-preview { + margin-bottom: 0.5em; +} + +.cke_widget_drag_handler_container { + display: none !important; +} + +/* ---- SNIPPET EDITOR ---- */ +#oe_snippets { + position: fixed; + left: 0px; + right: 0px; + top: 50px; + background: #282828; + -webkit-box-shadow: 0px 10px 10px -10px black inset; + -moz-box-shadow: 0px 10px 10px -10px black inset; + box-shadow: 0px 10px 10px -10px black inset; + z-index: 1010; + overflow: hidden; +} +#oe_snippets:hover { + height: auto; +} +#oe_snippets .scroll { + white-space: nowrap; + overflow-y: auto; +} +#oe_snippets .nav { + position: fixed; + z-index: 1; +} +#oe_snippets .nav > li { + display: inline-block; + float: none; + font-size: 13px; +} +#oe_snippets .nav > li > a { + padding: 2px 10px !important; + width: 100%; + display: block; +} +#oe_snippets .pill-content { + margin-top: 24px; + display: inline-block; + white-space: nowrap; +} +#oe_snippets .pill-content > div { + display: inline-block; + background: black; + padding: 5px; +} +#oe_snippets .pill-content > div label { + width: 44px; + height: 100%; + color: white; + padding-left: 10px; +} +#oe_snippets .pill-content > div label div { + width: 100px; + text-align: center; + -webkit-transform: translate(-39px, 44px); + -moz-transform: translate(-39px, 44px); + -ms-transform: translate(-39px, 44px); + -o-transform: translate(-39px, 44px); + transform: translate(-39px, 44px); + -webkit-transform-origin: 50% 50% 50%; + -moz-transform-origin: 50% 50% 50%; + -ms-transform-origin: 50% 50% 50%; + -o-transform-origin: 50% 50% 50%; + transform-origin: 50% 50% 50%; +} + +.oe_snippet { + display: inline-block; + vertical-align: top; + width: 100px; + height: 100px; + margin: 1px; + margin-top: 0px; + position: relative; + overflow: hidden; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + cursor: move; + pointer-events: none; +} +.oe_snippet .oe_snippet_thumbnail { + pointer-events: auto; + text-align: center; + height: 100%; + background: transparent; + color: white; + position: relative; +} +.oe_snippet .oe_snippet_thumbnail .oe_snippet_thumbnail_title { + font-size: 12px; + display: block; +} +.oe_snippet .oe_snippet_thumbnail .oe_snippet_thumbnail_img { + -webkit-box-shadow: inset 0px 0px 0px 3px #333333; + -moz-box-shadow: inset 0px 0px 0px 3px #333333; + box-shadow: inset 0px 0px 0px 3px #333333; +} +.oe_snippet .oe_snippet_thumbnail span, .oe_snippet .oe_snippet_thumbnail div { + line-height: 18px; +} +.oe_snippet > :not(.oe_snippet_thumbnail) { + display: none !important; +} + +#oe_snippets .oe_snippet_thumbnail { + background: #747474, -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, rgba(0, 0, 0, 0.25)), color-stop(100%, rgba(0, 0, 0, 0.4))); + background: #747474, -webkit-radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4)); + background: #747474, -moz-radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4)); + background: #747474, -o-radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4)); + background: #747474, radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4)); +} + +/* ---- SNIPPETS DROP ZONES ---- */ +.oe_drop_zone.oe_insert { + display: block; + height: 48px; + margin: 0px; + margin-top: -4px; + margin-bottom: -44px; + -webkit-transition: margin 250ms linear; + -moz-transition: margin 250ms linear; + -o-transition: margin 250ms linear; + transition: margin 250ms linear; + width: 100%; + position: absolute; + z-index: 1000; +} +.oe_drop_zone.oe_insert:not(.oe_vertical):before { + content: ""; + display: block; + border-top: dashed 2px rgba(209, 178, 255, 0.72); + position: relative; + top: 0px; +} +.oe_drop_zone.oe_insert.oe_hover:before { + border-top: dashed 2px rgba(116, 255, 161, 0.72); +} +.oe_drop_zone.oe_insert.oe_vertical { + width: 48px; + float: left; + position: relative; + margin: 0px -24px !important; +} +.oe_drop_zone.oe_insert.oe_overlay { + background: rgba(153, 0, 255, 0.17); + border-radius: 3px; +} + +.oe_drop_zone, .oe_drop_zone_style { + background: rgba(153, 0, 255, 0.17); + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + -ms-border-radius: 3px; + -o-border-radius: 3px; + border-radius: 3px; +} +.oe_drop_zone.oe_hover, .oe_drop_zone_style.oe_hover { + background: rgba(0, 255, 133, 0.22); + z-index: 1001; +} + +.oe_drop_zone_style { + color: white; + height: 48px; + margin-bottom: 32px; +} + +/* ---- SNIPPET MANIPULATOR ---- */ +.oe_overlay { + display: none; + position: absolute; + background: transparent; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + -ms-border-radius: 3px; + -o-border-radius: 3px; + border-radius: 3px; + -webkit-transition: opacity 100ms linear; + -moz-transition: opacity 100ms linear; + -o-transition: opacity 100ms linear; + transition: opacity 100ms linear; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + pointer-events: none; +} +.oe_overlay.oe_active { + display: block; + border-style: dashed; + border-width: 1px; + -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset; + -moz-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset; + box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset; + border-color: rgba(153, 0, 255, 0.5); +} +.oe_overlay.oe_active .oe_handle { + display: block !important; + pointer-events: auto; +} +.oe_overlay.oe_active .oe_handle:before { + position: relative; + top: 50%; + left: 50%; + display: block; + background: white; + border: solid 1px #9900ff; + -webkit-border-radius: 8px; + -moz-border-radius: 8px; + -ms-border-radius: 8px; + -o-border-radius: 8px; + border-radius: 8px; + width: 16px; + height: 16px; + margin: -8px; + padding-left: 1px; + font-size: 14px; + line-height: 14px; + color: #9900ff; + -webkit-transition: background 100ms linear; + -moz-transition: background 100ms linear; + -o-transition: background 100ms linear; + transition: background 100ms linear; +} +.oe_overlay.oe_active .oe_handle:hover:before { + background: #9900ff; + color: white; +} +.oe_overlay.oe_active .oe_handle.e:before { + content: "⇨"; +} +.oe_overlay.oe_active .oe_handle.s:before { + content: "⇩"; +} +.oe_overlay.oe_active .oe_handle.w:before { + content: "⇦"; +} +.oe_overlay.oe_active .oe_handle.n:before { + content: "⇧"; +} +.oe_overlay .icon.btn { + display: inline-block; +} +.oe_overlay .oe_overlay_options { + position: absolute; + width: 100%; + text-align: center; + top: -11px; + z-index: 1002; +} +.oe_overlay .oe_overlay_options .btn, .oe_overlay .oe_overlay_options a { + pointer-events: auto; + cursor: pointer; +} +.oe_overlay .oe_overlay_options .dropdown { + display: inline-block; +} +.oe_overlay .oe_overlay_options .dropdown-menu { + text-align: left; + min-width: 180px; +} +.oe_overlay .oe_overlay_options .dropdown-menu select, .oe_overlay .oe_overlay_options .dropdown-menu input { + display: block; +} + +.oe_handle { + pointer-events: auto; + position: absolute; + top: 50%; + left: 50%; + display: block; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + width: 8px; + height: 8px; + margin: -4px; +} + +.oe_handle.n { + left: 2px; + width: 100%; + top: 0px; + cursor: s-resize; +} + +.oe_handle.e { + left: auto; + top: 2px; + height: 100%; + right: 0px; + cursor: w-resize; +} + +.oe_handle.s { + top: auto; + left: 2px; + width: 100%; + bottom: 0px; + cursor: n-resize; +} + +.oe_handle.w { + top: 2px; + height: 100%; + left: 0px; + cursor: e-resize; +} + +.s-resize-important, .s-resize-important * { + cursor: s-resize !important; +} + +.n-resize-important, .n-resize-important * { + cursor: n-resize !important; +} + +.e-resize-important, .e-resize-important * { + cursor: e-resize !important; +} + +.w-resize-important, .w-resize-important * { + cursor: w-resize !important; +} + +.move-important, .move-important * { + cursor: move !important; +} + +/* ---- MOBILE PREVIEW ---- */ +.oe_mobile_preview.modal .modal-content { + height: 660px; + background-color: black; + border: 2px solid #1c1f1f; + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + -ms-border-radius: 10px; + -o-border-radius: 10px; + border-radius: 10px; + margin: auto; + top: 0; + left: 0; + bottom: 0; + right: 0; + max-width: 330px; +} +.oe_mobile_preview.modal .modal-content .modal-header { + background-color: black; + border-bottom: 0; + -moz-border-radius-topleft: 10px; + -webkit-border-top-left-radius: 10px; + border-top-left-radius: 10px; + -moz-border-radius-topright: 10px; + -webkit-border-top-right-radius: 10px; + border-top-right-radius: 10px; +} +.oe_mobile_preview.modal .modal-content .modal-header .modal-title { + color: #1c1f1f; +} +.oe_mobile_preview.modal .modal-content .modal-header .close { + color: lightgrey; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); + opacity: 1; +} +.oe_mobile_preview.modal .modal-content .modal-header .close:hover { + color: #e00101; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); + opacity: 1; +} +.oe_mobile_preview.modal .modal-content .modal-body { + background-color: black; + max-height: 600px; + padding: 0; + margin: 0; +} +.oe_mobile_preview.modal .modal-content .modal-body .oe_mobile_viewport { + width: 320px; + height: 568px; + padding: 5px; + border: none; +} +.oe_mobile_preview.modal .modal-content .modal-footer { + background-color: black; +} + +/* ---- SEO TOOLS ---- */ +.oe_seo_configuration .modal-dialog { + width: 80%; +} +.oe_seo_configuration .oe_remove { + color: #e00101; +} +.oe_seo_configuration .oe_seo_suggestion { + cursor: pointer; +} +.oe_seo_configuration .oe_seo_keyword { + padding: 0.2em 0.4em 0.2em 0.5em; + -webkit-border-radius: 0.4em; + -moz-border-radius: 0.4em; + -ms-border-radius: 0.4em; + -o-border-radius: 0.4em; + border-radius: 0.4em; +} +.oe_seo_configuration .keyword-in-title { + background-color: #5cb85cpointer; + color: white; +} +.oe_seo_configuration .keyword-in-description { + background-color: #428bca; + color: white; +} +.oe_seo_configuration .keyword-in-body { + background-color: #5bc0de; + color: white; +} + +/* ---- ACE EDITOR ---- */ +.oe_ace_view_editor { + -webkit-transition: all 0.2s ease-in; + -moz-transition: all 0.2s ease-in; + -o-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30); + opacity: 0.3; + position: fixed; + top: 51px; + right: 0; + z-index: 1000; + height: 100%; +} +.oe_ace_view_editor .oe_ace_view_editor_title { + width: 100%; + padding-top: 4px; + padding-left: 4px; + height: 40px; + background: #2f3129; +} +.oe_ace_view_editor .oe_ace_view_editor_title .oe_view_list { + width: 50%; + height: 32px; + font-size: 14px; + font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace; + line-height: normal; +} +.oe_ace_view_editor .oe_ace_view_editor_title .btn { + height: 32px; + padding: 0 4px 0 4px; + font-size: 14px; + font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace; + line-height: normal; +} +.oe_ace_view_editor .ace_editor { + position: absolute; + top: 40px; + right: 0; + bottom: 51px; + left: 0; + width: 720px; +} +.oe_ace_view_editor:hover { + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); + opacity: 1; +} +.oe_ace_view_editor.oe_ace_open { + width: 720px; +} +.oe_ace_view_editor.oe_ace_closed { + width: 0; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); + opacity: 0; +} + +/* ---- EDITOR TOUR ---- */ +.popover.tour { + z-index: 2010; +} diff --git a/addons/website/static/src/js/website.tour.js b/addons/website/static/src/js/website.tour.js index 464d72b2354..c19b24d4b49 100644 --- a/addons/website/static/src/js/website.tour.js +++ b/addons/website/static/src/js/website.tour.js @@ -9,12 +9,19 @@ } website.EditorTour = openerp.Class.extend({ - editor: undefined, tour: undefined, steps: [], tourStorage: window.localStorage, - init: function (editor) { - this.editor = editor; + init: function () { + this.tour = new Tour({ + name: this.id, + storage: this.tourStorage, + keyboard: false, + }); + this.tour.addSteps(_.map(this.steps, function (step) { + step.title = render('website.tour_title', { title: step.title }); + return step; + })); }, reset: function () { this.tourStorage.removeItem(this.id+'_current_step'); @@ -22,25 +29,16 @@ $('.popover.tour').remove(); }, start: function () { - var self = this; - self.tour = new Tour({ - name: self.id, - storage: this.tourStorage, - keyboard: false, - }); - self.tour.addSteps(_.map(self.steps, function (step) { - step.title = render('website.tour_title', { title: step.title }); - return step; - })); - if (self.canResume()) { - self.tour.start(); + if (this.canResume()) { + this.tour.start(); } }, canResume: function () { return this.currentStepIndex() === 0 && !this.tour.ended(); }, currentStepIndex: function () { - return parseInt(this.tourStorage.getItem(this.id+'_current_step'), 10); + var index = this.tourStorage.getItem(this.id+'_current_step') || 0; + return parseInt(index, 10); }, indexOfStep: function (stepId) { var index = -1; @@ -70,7 +68,7 @@ website.EditorBasicTour = website.EditorTour.extend({ id: 'add_banner_tour', name: "How to add a banner", - start: function () { + init: function () { var self = this; self.steps = [ { @@ -79,7 +77,7 @@ backdrop: true, title: "Welcome to your website!", content: "This tutorial will guide you through the firsts steps to build your enterprise class website.", - template: render('website.tour_confirm', { confirm: "Tell me more!" }), + template: render('website.tour_full', { next: "OK", end: "Close" }), }, { stepId: 'edit-page', @@ -96,7 +94,7 @@ placement: 'bottom', title: "Editor bar", content: "This is the Editor Bar, use it to modify your website's pages.", - template: render('website.tour_confirm', { confirm: "Got it, now what?" }), + template: render('website.tour_confirm', { next: "OK" }), }, { stepId: 'add-block', @@ -133,8 +131,8 @@ element: '#wrap [data-snippet-id=carousel]:first .carousel-caption', placement: 'top', title: "Change the title", - content: "Click on the title and modify it to fit your needs.", - template: render('website.tour_confirm', { confirm: "Done!" }), + content: "Click on the title and modify it to fit your needs then click Done.", + template: render('website.tour_confirm', { next: "Done" }), onHide: function () { var $banner = $("#wrap [data-snippet-id=carousel]:first"); if ($banner.length) { @@ -148,7 +146,7 @@ placement: 'left', title: "Customize the banner", content: "Click on Customize and change the background of your banner.", - template: render('website.tour_simple'), + template: render('website.tour_confirm', { next: "Not now" }), onShow: function () { $('.dropdown-menu [name=carousel-background]').click(function () { self.movetoStep('save-changes'); @@ -165,14 +163,15 @@ template: render('website.tour_simple'), onHide: function () { self.saveStep('part-2'); - } + }, + }, { stepId: 'part-2', orphan: true, - title: "Welcome to part 2", + title: "Congratutaltions!", content: "Congratulations on your first modifications.", - template: render('website.tour_confirm', { confirm: "Thanks :)" }), + template: render('website.tour_confirm', { next: "OK" }), }, { stepId: 'show-tutorials', @@ -180,22 +179,31 @@ placement: 'left', title: "Help is always available", content: "You can find more tutorials in the Help menu.", - template: render('website.tour_end', { confirm: "See you next time..." }), + template: render('website.tour_end', { end: "Close" }), }, ]; return this._super(); }, - canResume: function () { + startOfPart2: function () { var currentStepIndex = this.currentStepIndex(); var secondPartIndex = this.indexOfStep('part-2'); - return currentStepIndex === 0 || currentStepIndex === secondPartIndex; - } + return currentStepIndex === secondPartIndex && !this.tour.ended(); + }, + canResume: function () { + return this.startOfPart2() || this._super(); + }, }); + function refererPath () { + var anchor = document.createElement('a'); + anchor.href = document.referrer; + return anchor.pathname; + } + website.EditorBar.include({ start: function () { website.tutorials = { - basic: new website.EditorBasicTour(this), + basic: new website.EditorBasicTour(), }; var menu = $('#help-menu'); _.each(website.tutorials, function (tutorial) { @@ -206,7 +214,9 @@ }) menu.append($menuItem); }); - website.tutorials.basic.start(); + if (refererPath() === '/web' || website.tutorials.basic.startOfPart2()) { + website.tutorials.basic.start(); + } return this._super(); }, }); diff --git a/addons/website/static/src/xml/website.tour.xml b/addons/website/static/src/xml/website.tour.xml index d0d6b7630c0..6d2ef140610 100644 --- a/addons/website/static/src/xml/website.tour.xml +++ b/addons/website/static/src/xml/website.tour.xml @@ -13,7 +13,7 @@

    @@ -23,7 +23,18 @@

    + +     + +
    +
    +

    +
    +