[IMP] Website Tour: Basic editing
Integrated tutorial to guide the user through his first edits to his homepage. The tutoril is displayed automatically when the user first installs the website module and remains available via the Help menu. bzr revid: ddm@openerp.com-20131009165103-70y6njd4vib0u4pe
This commit is contained in:
ddm
@@ -564,18 +564,6 @@ table.editorbar-panel td.selected {
|
||||
-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 {
|
||||
@@ -634,6 +622,10 @@ table.editorbar-panel td.selected {
|
||||
}
|
||||
|
||||
/* ---- EDITOR TOUR ---- */
|
||||
div.tour-backdrop {
|
||||
z-index: 2009;
|
||||
}
|
||||
|
||||
.popover.tour {
|
||||
z-index: 2010;
|
||||
}
|
||||
|
||||
@@ -479,7 +479,8 @@ $navbar_height: 51px
|
||||
+opacity(0)
|
||||
|
||||
/* ---- EDITOR TOUR ---- */
|
||||
|
||||
div.tour-backdrop
|
||||
z-index: 2009
|
||||
.popover.tour
|
||||
z-index: 2010
|
||||
// vim:tabstop=4:shiftwidth=4:softtabstop=4:fdm=marker:
|
||||
|
||||
@@ -201,8 +201,9 @@
|
||||
}
|
||||
});
|
||||
// Adding Static Menus
|
||||
menu.append('<li class="divider"></li><li><a href="/page/website.themes">Change Theme</a></li>');
|
||||
menu.append('<li class="divider"></li><li class="js_change_theme"><a href="/page/website.themes">Change Theme</a></li>');
|
||||
menu.append('<li class="divider"></li><li><a data-action="ace" href="#">Advanced view editor</a></li>');
|
||||
self.trigger('rte:customize_menu_ready');
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
|
||||
var website = openerp.website;
|
||||
website.templates.push('/website/static/src/xml/website.seo.xml');
|
||||
|
||||
|
||||
@@ -26,6 +26,7 @@
|
||||
reset: function () {
|
||||
this.tourStorage.removeItem(this.id+'_current_step');
|
||||
this.tourStorage.removeItem(this.id+'_end');
|
||||
this.tour._current = 0;
|
||||
$('.popover.tour').remove();
|
||||
},
|
||||
start: function () {
|
||||
@@ -34,7 +35,7 @@
|
||||
}
|
||||
},
|
||||
canResume: function () {
|
||||
return this.currentStepIndex() === 0 && !this.tour.ended();
|
||||
return (this.currentStepIndex() === 0) && !this.tour.ended();
|
||||
},
|
||||
currentStepIndex: function () {
|
||||
var index = this.tourStorage.getItem(this.id+'_current_step') || 0;
|
||||
@@ -68,7 +69,7 @@
|
||||
website.EditorBasicTour = website.EditorTour.extend({
|
||||
id: 'add_banner_tour',
|
||||
name: "How to add a banner",
|
||||
init: function () {
|
||||
init: function (editor) {
|
||||
var self = this;
|
||||
self.steps = [
|
||||
{
|
||||
@@ -77,7 +78,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_full', { next: "OK", end: "Close" }),
|
||||
template: render('website.tour_full', { next: "Continue", end: "Close Tutorial" }),
|
||||
},
|
||||
{
|
||||
stepId: 'edit-page',
|
||||
@@ -85,32 +86,32 @@
|
||||
placement: 'right',
|
||||
reflex: true,
|
||||
title: "Edit this page",
|
||||
content: "Every page of your website can be edited. Click the <b>Edit</b> button to modify your homepage.",
|
||||
content: "Every page of your website can be edited. Click the <em>Edit</em> button to modify your homepage.",
|
||||
template: render('website.tour_simple'),
|
||||
},
|
||||
{
|
||||
stepId: 'show-bar',
|
||||
element: '#website-top-navbar',
|
||||
placement: 'bottom',
|
||||
title: "Editor bar",
|
||||
content: "This is the <b>Editor Bar</b>, use it to modify your website's pages.",
|
||||
template: render('website.tour_confirm', { next: "OK" }),
|
||||
stepId: 'add-banner',
|
||||
orphan: true,
|
||||
backdrop: true,
|
||||
title: "Now, let's add a banner",
|
||||
content: "Let's add a banner on the top of the page to make your homepage more attractive.",
|
||||
template: render('website.tour_confirm', { next: "Continue" }),
|
||||
},
|
||||
{
|
||||
stepId: 'add-block',
|
||||
element: 'button[data-action=snippet]',
|
||||
placement: 'right',
|
||||
reflex: true,
|
||||
title: "Add a block to your page",
|
||||
content: "Click on the <b>Insert Blocks</b> button to open the block collection.",
|
||||
title: "Shows Building Blocks",
|
||||
content: "Click on the <em>Insert Blocks</em> button to show the available building blocks.",
|
||||
template: render('website.tour_simple'),
|
||||
},
|
||||
{
|
||||
stepId: 'drag-banner',
|
||||
element: '#website-top-navbar [data-snippet-id=carousel]',
|
||||
placement: 'bottom',
|
||||
title: "Add a banner to your page",
|
||||
content: "Drag the <b>Banner</b> block to the body of the page and drop it on a purple zone.",
|
||||
title: "Drag & Drop a Banner",
|
||||
content: "Drag the <em>Banner</em> block and drop it to the top of your page (purple zone).",
|
||||
template: render('website.tour_simple'),
|
||||
onShown: function () {
|
||||
function beginDrag () {
|
||||
@@ -130,9 +131,9 @@
|
||||
stepId: 'edit-title',
|
||||
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 then click <b>Done</b>.",
|
||||
template: render('website.tour_confirm', { next: "Done" }),
|
||||
title: "Set your Banner text",
|
||||
content: "Click on the text to start modifying it then click <em>Continue</em> to continue the tutorial.<br>You can also use the options of the top menubar to change the look of the banner. ",
|
||||
template: render('website.tour_confirm', { next: "Continue" }),
|
||||
onHide: function () {
|
||||
var $banner = $("#wrap [data-snippet-id=carousel]:first");
|
||||
if ($banner.length) {
|
||||
@@ -144,9 +145,9 @@
|
||||
stepId: 'customize-banner',
|
||||
element: '.oe_overlay_options .oe_options',
|
||||
placement: 'left',
|
||||
title: "Customize the banner",
|
||||
content: "Click on <b>Customize</b> and change the background of your banner.",
|
||||
template: render('website.tour_confirm', { next: "Not now" }),
|
||||
title: "Customize your new Banner style",
|
||||
content: "Click on <em>Customize</em> and change the background of your banner.<br>If your are satisfied with the current background, just click <em>Continue</em>.",
|
||||
template: render('website.tour_confirm', { next: "Continue" }),
|
||||
onShow: function () {
|
||||
$('.dropdown-menu [name=carousel-background]').click(function () {
|
||||
self.movetoStep('save-changes');
|
||||
@@ -159,7 +160,7 @@
|
||||
placement: 'right',
|
||||
reflex: true,
|
||||
title: "Save your modifications",
|
||||
content: "Click the <b>Save</b> button to apply modifications on your website.",
|
||||
content: "Click the <em>Save</em> button to apply modifications on your website.",
|
||||
template: render('website.tour_simple'),
|
||||
onHide: function () {
|
||||
self.saveStep('part-2');
|
||||
@@ -169,16 +170,39 @@
|
||||
{
|
||||
stepId: 'part-2',
|
||||
orphan: true,
|
||||
backdrop: true,
|
||||
title: "Congratutaltions!",
|
||||
content: "Congratulations on your first modifications.",
|
||||
template: render('website.tour_confirm', { next: "OK" }),
|
||||
},
|
||||
{
|
||||
stepId: 'show-customize',
|
||||
element: '#customize-menu-button',
|
||||
placement: 'left',
|
||||
title: "Customize your Website",
|
||||
content: "Go on the <em>Customize</em> menu to get access customization options for the current page.",
|
||||
template: render('website.tour_simple'),
|
||||
onShow: function () {
|
||||
editor.on('rte:customize_menu_ready', self, function () {
|
||||
self.movetoStep('change-themes');
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
stepId: 'change-themes',
|
||||
element: '.js_change_theme',
|
||||
placement: 'left',
|
||||
reflex: true,
|
||||
title: "Click to View Themes",
|
||||
content: "You can change the theme at any time to customize the look and feel of your website.",
|
||||
template: render('website.tour_simple'),
|
||||
},
|
||||
{
|
||||
stepId: 'show-tutorials',
|
||||
element: '#help-menu-button',
|
||||
placement: 'left',
|
||||
title: "Help is always available",
|
||||
content: "You can find more tutorials in the <b>Help</b> menu.",
|
||||
content: "You can find more tutorials in the <em>Help</em> menu.",
|
||||
template: render('website.tour_end', { end: "Close" }),
|
||||
},
|
||||
];
|
||||
@@ -187,7 +211,8 @@
|
||||
startOfPart2: function () {
|
||||
var currentStepIndex = this.currentStepIndex();
|
||||
var secondPartIndex = this.indexOfStep('part-2');
|
||||
return currentStepIndex === secondPartIndex && !this.tour.ended();
|
||||
var showTutorialsIndex = this.indexOfStep('show-tutorials');
|
||||
return (currentStepIndex === secondPartIndex || currentStepIndex === showTutorialsIndex) && !this.tour.ended();
|
||||
},
|
||||
canResume: function () {
|
||||
return this.startOfPart2() || this._super();
|
||||
@@ -212,7 +237,7 @@
|
||||
website.EditorBar.include({
|
||||
start: function () {
|
||||
website.tutorials = {
|
||||
basic: new website.EditorBasicTour(),
|
||||
basic: new website.EditorBasicTour(this),
|
||||
};
|
||||
var menu = $('#help-menu');
|
||||
_.each(website.tutorials, function (tutorial) {
|
||||
@@ -227,6 +252,10 @@
|
||||
if (url.search === '?tutorial=true' || website.tutorials.basic.startOfPart2()) {
|
||||
website.tutorials.basic.start();
|
||||
}
|
||||
$('.tour-backdrop').click(function (e) {
|
||||
e.stopImmediatePropagation();
|
||||
e.preventDefault();
|
||||
});
|
||||
return this._super();
|
||||
},
|
||||
});
|
||||
|
||||
@@ -39,6 +39,6 @@
|
||||
</div>
|
||||
</t>
|
||||
<t t-name="website.tour_title">
|
||||
<t t-esc="title"/><button title="Close" type="button" class="close" data-role="end">×</button>
|
||||
<t t-esc="title"/><button title="Close Tutorial" type="button" class="close" data-role="end">×</button>
|
||||
</t>
|
||||
</templates>
|
||||
Reference in New Issue
Block a user