From a403bc0318bc113e2d6801174d3e4164f0a53186 Mon Sep 17 00:00:00 2001 From: ddm Date: Mon, 21 Oct 2013 11:10:04 +0200 Subject: [PATCH 1/4] [IMP] Ace: remember editor width when resizing bzr revid: ddm@openerp.com-20131021091004-nchmsogl6349az8h --- addons/website/static/src/css/editor.css | 2 -- addons/website/static/src/css/editor.sass | 3 --- addons/website/static/src/js/website.ace.js | 9 +++++++++ 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css index 22c6f57ee8d..b939ec11b6d 100644 --- a/addons/website/static/src/css/editor.css +++ b/addons/website/static/src/css/editor.css @@ -608,7 +608,6 @@ table.editorbar-panel td.selected { right: 0; z-index: 1000; height: 100%; - width: 720px; } .oe_ace_view_editor .oe_ace_view_editor_title { width: 100%; @@ -637,7 +636,6 @@ table.editorbar-panel td.selected { right: 0; bottom: 51px; left: 0; - width: 720px; } .oe_ace_view_editor .ace_editor .ace_gutter { cursor: ew-resize; diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass index 0c247cbef5b..092194e9e10 100644 --- a/addons/website/static/src/css/editor.sass +++ b/addons/website/static/src/css/editor.sass @@ -466,7 +466,6 @@ $highlighted_text_color: #ffffff /* ---- ACE EDITOR ---- */ -$ace_width: 720px $editorbar_height: 30px // TODO Fix => might break with themes $navbar_height: 51px @@ -481,7 +480,6 @@ $navbar_height: 51px right: 0 z-index: 1000 height: 100% - width: $ace_width .oe_ace_view_editor_title width: 100% padding-top: 0 @@ -502,7 +500,6 @@ $navbar_height: 51px right: 0 bottom: $navbar_height left: 0 - width: $ace_width .ace_gutter cursor: ew-resize &.oe_ace_open diff --git a/addons/website/static/src/js/website.ace.js b/addons/website/static/src/js/website.ace.js index 1b94afd0cfc..66984731ac0 100644 --- a/addons/website/static/src/js/website.ace.js +++ b/addons/website/static/src/js/website.ace.js @@ -100,6 +100,13 @@ self.aceEditor.resize(); self.$el.width(width); } + function storeEditorWidth() { + window.localStorage.setItem('ace_editor_width', self.$el.width()); + } + function readEditorWidth() { + var width = window.localStorage.getItem('ace_editor_width'); + return parseInt(width || 720, 10); + } function startResizing (e) { self.refX = e.pageX; self.resizing = true; @@ -113,6 +120,7 @@ var width = self.$el.width() - offset; self.refX = e.pageX; resizeEditor(width); + storeEditorWidth(); } } document.body.addEventListener('mouseup', stopResizing, true); @@ -121,6 +129,7 @@ $('button[data-action=edit]').click(function () { self.close(); }); + resizeEditor(readEditorWidth()); }, loadViews: function (views) { var self = this; From 6ee4768a426b83f521921c9933859860f1c33096 Mon Sep 17 00:00:00 2001 From: ddm Date: Mon, 21 Oct 2013 11:39:59 +0200 Subject: [PATCH 2/4] [IMP] Tutorial: extract first tour to own style bzr revid: ddm@openerp.com-20131021093959-ojzaceh2lul0afja --- .../static/src/js/website.tour.basic.js | 161 +++++++++++++++++ addons/website/static/src/js/website.tour.js | 167 +----------------- addons/website/views/website_templates.xml | 1 + 3 files changed, 168 insertions(+), 161 deletions(-) create mode 100644 addons/website/static/src/js/website.tour.basic.js diff --git a/addons/website/static/src/js/website.tour.basic.js b/addons/website/static/src/js/website.tour.basic.js new file mode 100644 index 00000000000..82ad4790c25 --- /dev/null +++ b/addons/website/static/src/js/website.tour.basic.js @@ -0,0 +1,161 @@ +(function () { + 'use strict'; + + var website = openerp.website; + + var render = website.tour.render; + + website.EditorBasicTour = website.EditorTour.extend({ + id: 'add_banner_tour', + name: "Insert a banner", + init: function (editor) { + var self = this; + self.steps = [ + { + stepId: 'welcome', + orphan: true, + backdrop: true, + title: "Welcome to your website!", + content: "This tutorial will guide you to build your first page. We will start by adding a banner.", + template: render('website.tour_popover', { next: "Start Tutorial", end: "Skip It" }), + }, + { + stepId: 'edit-page', + element: 'button[data-action=edit]', + placement: 'bottom', + reflex: true, + title: "Edit this page", + content: "Every page of your website can be modified through the Edit button.", + template: render('website.tour_popover'), + }, + { + stepId: 'add-block', + element: 'button[data-action=snippet]', + placement: 'bottom', + title: "Insert building blocks", + content: "To add content in a page, you can insert building blocks.", + template: render('website.tour_popover'), + onShow: function () { + function refreshAddBlockStep () { + self.tour.showStep(self.indexOfStep('add-block')); + editor.off('rte:ready', editor, refreshAddBlockStep); + } + editor.on('rte:ready', editor, refreshAddBlockStep); + $('button[data-action=snippet]').click(function () { + self.movetoStep('drag-banner'); + }); + } + }, + { + stepId: 'drag-banner', + element: '#website-top-navbar [data-snippet-id=carousel].ui-draggable', + placement: 'bottom', + title: "Drag & Drop a Banner", + content: "Drag the Banner block and drop it in your page.

Tip: release the mouse button when you are in a valid zone, with a preview of the banner.

", + template: render('website.tour_popover'), + onShow: function () { + function beginDrag () { + $('.popover.tour').remove(); + $('body').off('mousedown', beginDrag); + function goToNextStep () { + $('#oe_snippets').hide(); + self.movetoStep('edit-title'); + $('body').off('mouseup', goToNextStep); + } + $('body').on('mouseup', goToNextStep); + } + $('body').on('mousedown', beginDrag); + }, + }, + { + stepId: 'edit-title', + element: '#wrap [data-snippet-id=carousel]:first .carousel-caption', + placement: 'left', + title: "Customize banner's text", + content: "Click in the text and start editing it. Click continue once it's done.", + template: render('website.tour_popover', { next: "Continue" }), + onHide: function () { + var $banner = $("#wrap [data-snippet-id=carousel]:first"); + if ($banner.length) { + $banner.click(); + } + }, + }, + { + stepId: 'customize-banner', + element: '.oe_overlay_options .oe_options', + placement: 'left', + title: "Customize the banner", + content: "You can customize components of your page through the Customize menu. Try to change the background of your banner.", + template: render('website.tour_popover', { next: "Continue" }), + onShow: function () { + $('.dropdown-menu [name=carousel-background]').click(function () { + self.movetoStep('save-changes'); + }); + }, + }, + { + stepId: 'save-changes', + element: 'button[data-action=save]', + placement: 'right', + reflex: true, + title: "Save your modifications", + content: "Once you click on save, your website page is updated.", + template: render('website.tour_popover'), + onHide: function () { + self.saveStep('part-2'); + }, + + }, + { + stepId: 'part-2', + orphan: true, + title: "Congratulation!", + content: "Your homepage have been updated. Now, we suggest you to insert others building blocks like texts and images to structure your page.", + template: render('website.tour_popover', { next: "Continue" }), + }, + { + stepId: 'show-tutorials', + element: '#help-menu-button', + placement: 'left', + title: "Help is always available", + content: "But you can always click here if you want more tutorials.", + template: render('website.tour_popover', { end: "Close" }), + }, + ]; + return this._super(); + }, + startOfPart2: function () { + var currentStepIndex = this.currentStepIndex(); + var secondPartIndex = this.indexOfStep('part-2'); + var showTutorialsIndex = this.indexOfStep('show-tutorials'); + return (currentStepIndex === secondPartIndex || currentStepIndex === showTutorialsIndex) && !this.tour.ended(); + }, + canResume: function () { + return this.startOfPart2() || this._super(); + }, + }); + + website.EditorBar.include({ + start: function () { + var menu = $('#help-menu'); + var basicTour = new website.EditorBasicTour(this); + var $menuItem = $($.parseHTML('
  • '+basicTour.name+'
    • ')); + $menuItem.click(function () { + basicTour.reset(); + basicTour.start(); + }); + menu.append($menuItem); + var url = new website.UrlParser(window.location.href); + if (url.search.indexOf('?tutorial=true') === 0 || basicTour.startOfPart2()) { + basicTour.start(); + } + $('.tour-backdrop').click(function (e) { + e.stopImmediatePropagation(); + e.preventDefault(); + }); + return this._super(); + }, + }); + +}()); \ No newline at end of file diff --git a/addons/website/static/src/js/website.tour.js b/addons/website/static/src/js/website.tour.js index bfb9a0461d9..f5d3237c28d 100644 --- a/addons/website/static/src/js/website.tour.js +++ b/addons/website/static/src/js/website.tour.js @@ -4,9 +4,11 @@ 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.tour = { + render: function render (template, dict) { + return openerp.qweb.render(template, dict); + } + }; website.EditorTour = openerp.Class.extend({ tour: undefined, @@ -19,7 +21,7 @@ keyboard: false, }); this.tour.addSteps(_.map(this.steps, function (step) { - step.title = render('website.tour_popover_title', { title: step.title }); + step.title = website.tour.render('website.tour_popover_title', { title: step.title }); return step; })); this.monkeyPatchTour(); @@ -81,137 +83,6 @@ }, }); - website.EditorBasicTour = website.EditorTour.extend({ - id: 'add_banner_tour', - name: "Insert a banner", - init: function (editor) { - var self = this; - self.steps = [ - { - stepId: 'welcome', - orphan: true, - backdrop: true, - title: "Welcome to your website!", - content: "This tutorial will guide you to build your first page. We will start by adding a banner.", - template: render('website.tour_popover', { next: "Start Tutorial", end: "Skip It" }), - }, - { - stepId: 'edit-page', - element: 'button[data-action=edit]', - placement: 'bottom', - reflex: true, - title: "Edit this page", - content: "Every page of your website can be modified through the Edit button.", - template: render('website.tour_popover'), - }, - { - stepId: 'add-block', - element: 'button[data-action=snippet]', - placement: 'bottom', - title: "Insert building blocks", - content: "To add content in a page, you can insert building blocks.", - template: render('website.tour_popover'), - onShow: function () { - function refreshAddBlockStep () { - self.tour.showStep(self.indexOfStep('add-block')); - editor.off('rte:ready', editor, refreshAddBlockStep); - } - editor.on('rte:ready', editor, refreshAddBlockStep); - $('button[data-action=snippet]').click(function () { - self.movetoStep('drag-banner'); - }); - } - }, - { - stepId: 'drag-banner', - element: '#website-top-navbar [data-snippet-id=carousel].ui-draggable', - placement: 'bottom', - title: "Drag & Drop a Banner", - content: "Drag the Banner block and drop it in your page.

    Tip: release the mouse button when you are in a valid zone, with a preview of the banner.

    ", - template: render('website.tour_popover'), - onShow: function () { - function beginDrag () { - $('.popover.tour').remove(); - $('body').off('mousedown', beginDrag); - function goToNextStep () { - $('#oe_snippets').hide(); - self.movetoStep('edit-title'); - $('body').off('mouseup', goToNextStep); - } - $('body').on('mouseup', goToNextStep); - } - $('body').on('mousedown', beginDrag); - }, - }, - { - stepId: 'edit-title', - element: '#wrap [data-snippet-id=carousel]:first .carousel-caption', - placement: 'left', - title: "Customize banner's text", - content: "Click in the text and start editing it. Click continue once it's done.", - template: render('website.tour_popover', { next: "Continue" }), - onHide: function () { - var $banner = $("#wrap [data-snippet-id=carousel]:first"); - if ($banner.length) { - $banner.click(); - } - }, - }, - { - stepId: 'customize-banner', - element: '.oe_overlay_options .oe_options', - placement: 'left', - title: "Customize the banner", - content: "You can customize components of your page through the Customize menu. Try to change the background of your banner.", - template: render('website.tour_popover', { next: "Continue" }), - onShow: function () { - $('.dropdown-menu [name=carousel-background]').click(function () { - self.movetoStep('save-changes'); - }); - }, - }, - { - stepId: 'save-changes', - element: 'button[data-action=save]', - placement: 'right', - reflex: true, - title: "Save your modifications", - content: "Once you click on save, your website page is updated.", - template: render('website.tour_popover'), - onHide: function () { - self.saveStep('part-2'); - }, - - }, - { - stepId: 'part-2', - orphan: true, - title: "Congratulation!", - content: "Your homepage have been updated. Now, we suggest you to insert others building blocks like texts and images to structure your page.", - template: render('website.tour_popover', { next: "Continue" }), - }, - { - stepId: 'show-tutorials', - element: '#help-menu-button', - placement: 'left', - title: "Help is always available", - content: "But you can always click here if you want more tutorials.", - template: render('website.tour_popover', { end: "Close" }), - }, - ]; - return this._super(); - }, - startOfPart2: function () { - var currentStepIndex = this.currentStepIndex(); - var secondPartIndex = this.indexOfStep('part-2'); - var showTutorialsIndex = this.indexOfStep('show-tutorials'); - return (currentStepIndex === secondPartIndex || currentStepIndex === showTutorialsIndex) && !this.tour.ended(); - }, - canResume: function () { - return this.startOfPart2() || this._super(); - }, - }); - website.UrlParser = openerp.Class.extend({ init: function (url) { var a = document.createElement('a'); @@ -227,30 +98,4 @@ }, }); - website.EditorBar.include({ - start: function () { - 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); - }); - var url = new website.UrlParser(window.location.href); - if (url.search.indexOf('?tutorial=true') === 0 || website.tutorials.basic.startOfPart2()) { - website.tutorials.basic.start(); - } - $('.tour-backdrop').click(function (e) { - e.stopImmediatePropagation(); - e.preventDefault(); - }); - return this._super(); - }, - }); - }()); diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml index 46bf0996221..85767884773 100644 --- a/addons/website/views/website_templates.xml +++ b/addons/website/views/website_templates.xml @@ -73,6 +73,7 @@ + From 24c3e4016b428b69dc70a22598ea30b5eca9416e Mon Sep 17 00:00:00 2001 From: ddm Date: Mon, 21 Oct 2013 11:51:58 +0200 Subject: [PATCH 3/4] [IMP] Ace: light opacity trick bzr revid: ddm@openerp.com-20131021095158-6037xha2bqyihv0q --- addons/website/static/src/css/editor.css | 4 ++-- addons/website/static/src/css/editor.sass | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css index b939ec11b6d..a3151d14855 100644 --- a/addons/website/static/src/css/editor.css +++ b/addons/website/static/src/css/editor.css @@ -641,8 +641,8 @@ table.editorbar-panel td.selected { cursor: ew-resize; } .oe_ace_view_editor.oe_ace_open { - filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); - opacity: 1; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=97); + opacity: 0.97; } .oe_ace_view_editor.oe_ace_closed { z-index: -1000; diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass index 092194e9e10..dcfa88b89e7 100644 --- a/addons/website/static/src/css/editor.sass +++ b/addons/website/static/src/css/editor.sass @@ -503,7 +503,7 @@ $navbar_height: 51px .ace_gutter cursor: ew-resize &.oe_ace_open - +opacity(1) + +opacity(0.97) &.oe_ace_closed z-index: -1000 +opacity(0) From 75a4a7e3f827ad559a65f73c60fbc3cfb595dc53 Mon Sep 17 00:00:00 2001 From: ddm Date: Mon, 21 Oct 2013 12:28:40 +0200 Subject: [PATCH 4/4] [IMP] Ace: proper template naming bzr revid: ddm@openerp.com-20131021102840-h8s2nflqdmuumun0 --- addons/website_mail/views/website_mail.xml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addons/website_mail/views/website_mail.xml b/addons/website_mail/views/website_mail.xml index 8ed809a6eab..5fdff8d4c04 100644 --- a/addons/website_mail/views/website_mail.xml +++ b/addons/website_mail/views/website_mail.xml @@ -17,7 +17,7 @@ -