Richard Mathot (OpenERP)
2013-10-21 12:37:10 +02:00
7 changed files with 181 additions and 170 deletions
+2 -4
View File
@@ -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,14 +636,13 @@ table.editorbar-panel td.selected {
right: 0;
bottom: 51px;
left: 0;
width: 720px;
}
.oe_ace_view_editor .ace_editor .ace_gutter {
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;
+1 -4
View File
@@ -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,11 +500,10 @@ $navbar_height: 51px
right: 0
bottom: $navbar_height
left: 0
width: $ace_width
.ace_gutter
cursor: ew-resize
&.oe_ace_open
+opacity(1)
+opacity(0.97)
&.oe_ace_closed
z-index: -1000
+opacity(0)
@@ -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;
@@ -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 <i>Edit</i> 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 <em>Banner</em> block and drop it in your page. <p class='text-muted'>Tip: release the mouse button when you are in a valid zone, with a preview of the banner.</p>",
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 <em>Customize</em> 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('<li><a href="#">'+basicTour.name+'</a></li>'));
$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();
},
});
}());
+6 -161
View File
@@ -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 <i>Edit</i> 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 <em>Banner</em> block and drop it in your page. <p class='text-muted'>Tip: release the mouse button when you are in a valid zone, with a preview of the banner.</p>",
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 <em>Customize</em> 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('<li><a href="#">'+tutorial.name+'</a></li>'));
$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();
},
});
}());
@@ -73,6 +73,7 @@
<script type="text/javascript" src="/website/static/src/js/website.mobile.js"></script>
<script type="text/javascript" src="/website/static/src/js/website.seo.js"></script>
<script type="text/javascript" src="/website/static/src/js/website.tour.js"></script>
<script type="text/javascript" src="/website/static/src/js/website.tour.basic.js"></script>
<script t-if="not translatable" type="text/javascript" src="/website/static/src/js/website.snippets.js"></script>
<script t-if="not translatable" type="text/javascript" src="/website/static/src/js/website.ace.js"></script>
<script t-if="translatable" type="text/javascript" src="/website/static/src/js/website.translator.js"></script>
+1 -1
View File
@@ -17,7 +17,7 @@
</div>
</template>
<template id="website.layout" inherit_id="website.layout">
<template id="website.layout" name="Mail customization" inherit_id="website.layout">
<!-- Load stylesheets before scripts to avoid blocking -->
<xpath expr="//head/link" position="after">
<link rel='stylesheet' href='/website_mail/static/src/css/website_mail.css'/>