odoo
/
odoo
2
0
Fork 0
Code Pull Requests Releases Activity

[REV] tabification of link and image dialogs 

bzr revid: xmo@openerp.com-20130913084013-19zu9k9voxplwwhp
This commit is contained in:
Xavier Morel 2013-09-13 10:40:13 +02:00
parent 410e562893
commit a793a8ff16
4 changed files with 95 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
addons/website/static/src/css/editor.css
View File

@ -83,10 +83,6 @@
} }
/* ---- EDITOR BAR ---- */ /* ---- EDITOR BAR ---- */
.modal .tab-content {
padding-top: 5px;
}
table.editorbar-panel { table.editorbar-panel {
cursor: pointer; cursor: pointer;
width: 100%; width: 100%;
@ -95,10 +91,6 @@ table.editorbar-panel td.selected {
background-color: #b1c9d9; background-color: #b1c9d9;
} }
.modal .image-preview-container, .modal .image-preview {
margin-bottom: 0.5em;
}
/* ---- RTE ---- */ /* ---- RTE ---- */
.oe_editable .btn { .oe_editable .btn {
-webkit-user-select: auto; -webkit-user-select: auto;

6
addons/website/static/src/css/editor.sass
View File

@ -74,18 +74,12 @@
/* ---- EDITOR BAR ---- */ /* ---- EDITOR BAR ---- */
.modal .tab-content
padding-top: 5px
table.editorbar-panel table.editorbar-panel
cursor: pointer cursor: pointer
width: 100% width: 100%
td.selected td.selected
background-color: #b1c9d9 background-color: #b1c9d9
.modal .image-preview-container, .modal .image-preview
margin-bottom: 0.5em
/* ---- RTE ---- */ /* ---- RTE ---- */
// bootstrap makes .btn elements unselectable -> RTE double-click can't know // bootstrap makes .btn elements unselectable -> RTE double-click can't know

93
addons/website/static/src/js/website.editor.js
View File

@ -399,11 +399,15 @@
website.editor.LinkDialog = website.editor.Dialog.extend({ website.editor.LinkDialog = website.editor.Dialog.extend({
template: 'website.editor.dialog.link', template: 'website.editor.dialog.link',
events: _.extend({}, website.editor.Dialog.prototype.events, { events: _.extend({}, website.editor.Dialog.prototype.events, {
'change .url-source': function (e) { this.changed($(e.target)); },
'click div.existing a': 'select_page',
}), }),
init: function (editor) { init: function (editor) {
this._super(editor); this._super(editor);
// url -> name mapping for existing pages // url -> name mapping for existing pages
this.pages = Object.create(null); this.pages = Object.create(null);
// name -> url mapping for the same
this.pages_by_name = Object.create(null);
}, },
start: function () { start: function () {
var element; var element;
@ -462,24 +466,24 @@
}, },
save: function () { save: function () {
var self = this, _super = this._super.bind(this); var self = this, _super = this._super.bind(this);
var $active_tab = this.$('.tab-pane.active'); var $e = this.$('.url-source').filter(function () { return !!this.value; });
var $e = $active_tab.find('.url-source');
var val = $e.val(), done = $.when(); var val = $e.val(), done = $.when();
if ($active_tab.is('#link-email')) { if ($e.hasClass('email-address')) {
this.make_link('mailto:' + val, false, val); this.make_link('mailto:' + val, false, val);
} else if ($active_tab.is('#link-existing')) { } else if ($e.hasClass('pages')) {
self.make_link(val, false, this.pages[val]); // ``val`` is the *name* of the page
} else if ($active_tab.is('#link-new')) { var url = this.pages_by_name[val];
// Create the page, get the URL back if (!url) {
done = $.get(_.str.sprintf( // Create the page, get the URL back
'/pagenew/%s?noredirect', encodeURIComponent(val))) done = $.get(_.str.sprintf(
.then(function (response) { '/pagenew/%s?noredirect', encodeURIComponent(val)))
val = response; .then(function (response) {
}); url = response;
});
}
done.then(function () { done.then(function () {
self.make_link(val, false); self.make_link(url, false, val);
}); });
} else { } else {
this.make_link(val, this.$('input.window-new').prop('checked')); this.make_link(val, this.$('input.window-new').prop('checked'));
@ -493,19 +497,36 @@
var match, $control; var match, $control;
if (match = /(mailto):(.+)/.exec(href)) { if (match = /(mailto):(.+)/.exec(href)) {
$control = this.$('#link-email input').val(match[2]); $control = this.$('input.email-address').val(match[2]);
} else if(href in this.pages) { } else if(href in this.pages) {
$control = this.$('#link-existing select').val(href); $control = this.$('input.pages').val(this.pages[href]);
} else { }
$control = this.$('#link-external input:first').val(href); if (!$control) {
$control = this.$('input.url').val(href);
} }
var tab_name = $control.closest('.tab-pane').attr('id'); this.changed($control);
this.$('.nav a[href="#' + tab_name + '"]').tab('show');
this.$('input.window-new').prop( this.$('input.window-new').prop(
'checked', this.element.getAttribute('target') === '_blank'); 'checked', this.element.getAttribute('target') === '_blank');
}, },
changed: function ($e) {
$e.closest('li.list-group-item').addClass('active')
.siblings().removeClass('active');
this.$('.url-source').not($e).val('');
},
/**
* Selected an existing page in dropdown
*/
select_page: function (e) {
e.preventDefault();
e.stopPropagation();
var $target = $(e.target);
this.$('input.pages').val($target.text()).change();
// No #dropdown('close'), and using #dropdown('toggle') sur
// #closest('.dropdown') makes the dropdown not work correctly
$target.closest('.open').removeClass('open');
},
/** /**
* CKEDITOR.plugins.link.getSelectedLink ignores the editor's root, * CKEDITOR.plugins.link.getSelectedLink ignores the editor's root,
* if the editor is set directly on a link it will thus not work. * if the editor is set directly on a link it will thus not work.
@ -535,43 +556,32 @@
}, },
fill_pages: function (results) { fill_pages: function (results) {
var self = this; var self = this;
var pages = this.$('#link-existing-select')[0]; var $pages = this.$('div.existing ul').empty();
_(results).each(function (result) { _(results).each(function (result) {
self.pages[result.url] = result.name; self.pages[result.url] = result.name;
self.pages_by_name[result.name] = result.url;
pages.options[pages.options.length] = var $link = $('<a>').attr('href', result.url).text(result.name);
new Option(result.name, result.url); $('<li>').append($link).appendTo($pages);
}); });
}, },
}); });
website.editor.ImageDialog = website.editor.Dialog.extend({ website.editor.ImageDialog = website.editor.Dialog.extend({
template: 'website.editor.dialog.image', template: 'website.editor.dialog.image',
events: _.extend({}, website.editor.Dialog.prototype.events, { events: _.extend({}, website.editor.Dialog.prototype.events, {
'change .url-source': function (e) { this.changed($(e.target)); },
'click button.filepicker': function () { 'click button.filepicker': function () {
this.$('input[type=file]').click(); this.$('input[type=file]').click();
}, },
'change input[type=file]': 'file_selection', 'change input[type=file]': 'file_selection',
'change input.url': 'preview_image', 'change input.url': 'preview_image',
'change select.image-style': 'preview_image',
'click .existing-attachments a': 'select_existing', 'click .existing-attachments a': 'select_existing',
}), }),
start: function () { start: function () {
var selection = this.editor.getSelection(); var selection = this.editor.getSelection();
var el = selection && selection.getSelectedElement(); var el = selection && selection.getSelectedElement();
this.element = null; this.element = null;
var $select = this.$('.image-style');
var $options = $select.children();
this.image_styles = $options.map(function () { return this.value; }).get();
if (el && el.is('img')) { if (el && el.is('img')) {
this.element = el; this.element = el;
_(this.image_styles).each(function (style) {
if (el.hasClass(style)) {
$select.val(style);
}
});
// set_image should follow setup of image style
this.set_image(el.getAttribute('src')); this.set_image(el.getAttribute('src'));
} }
@ -581,7 +591,6 @@
}, },
save: function () { save: function () {
var url = this.$('input.url').val(); var url = this.$('input.url').val();
var style = this.$('.image-style').val();
var element, editor = this.editor; var element, editor = this.editor;
if (!(element = this.element)) { if (!(element = this.element)) {
element = editor.document.createElement('img'); element = editor.document.createElement('img');
@ -595,10 +604,7 @@
}, 0); }, 0);
} }
element.setAttribute('src', url); element.setAttribute('src', url);
$(element.$).removeClass(this.image_styles.join(' ')); this._super();
if (style) { element.addClass(style); }
return this._super();
}, },
/** /**
@ -636,10 +642,7 @@
var image = this.$('input.url').val(); var image = this.$('input.url').val();
if (!image) { return; } if (!image) { return; }
this.$('img.image-preview') this.$('img.image-preview').attr('src', image);
.attr('src', image)
.removeClass(this.image_styles.join(' '))
.addClass(this.$('select.image-style').val());
}, },
fetch_existing: function () { fetch_existing: function () {

108
addons/website/static/src/xml/website.editor.xml
View File

@ -35,87 +35,73 @@
<t t-call="website.editor.dialog"> <t t-call="website.editor.dialog">
<t t-set="title">Link to</t> <t t-set="title">Link to</t>
<form> <form>
<ul class="nav nav-pills nav-justified"> <ul class="list-group form-group">
<li class="active"> <li class="list-group-item active">
<a href="#link-existing" data-toggle="pill">Your website</a> <h3 class="list-group-item-heading">Page on your website</h3>
<div class="input-group">
<input type="text" class="form-control pages url-source"
placeholder="Create new page"/>
<div class="input-group-btn existing dropdown">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Existing page <span class="caret"></span></button>
<ul class="dropdown-menu pull-right"/>
</div>
</div>
</li> </li>
<li><a href="#link-new" data-toggle="pill">New page</a></li> <li class="list-group-item">
<li><a href="#link-external" data-toggle="pill">External Page</a></li>
<li><a href="#link-email" data-toggle="pill">Email Address</a></li>
</ul>
<div class="tab-content">
<div id="link-existing" class="tab-pane active form-group">
<select id="link-existing-select"
class="form-control url-source">
<option disabled="disabled">Select existing page:</option>
</select>
</div>
<div id="link-new" class="tab-pane form-group">
<input type="text" class="form-control pages url-source"
placeholder="Enter the name of the new page"/>
</div>
<div id="link-external" class="tab-pane">
<input type="text" class="form-control url url-source"
placeholder="example: http://openerp.com"/>
<div class="pull-right"> <div class="pull-right">
<label> <label>
<input type="checkbox" class="window-new"/> <input type="checkbox" class="window-new"/>
Open in new window Open in new window
</label> </label>
</div> </div>
</div> <h3 class="list-group-item-heading">External Page</h3>
<div id="link-email" class="tab-pane"> <input type="text" class="form-control url url-source"
placeholder="http://openerp.com"/>
</li>
<li class="list-group-item">
<h3 class="list-group-item-heading">Email Address</h3>
<input type="email" class="form-control email-address url-source" <input type="email" class="form-control email-address url-source"
placeholder="example: you@yourwebsite.com"/> placeholder="you@yourwebsite.com"/>
</div> </li>
</div> </ul>
</form> </form>
</t> </t>
</t> </t>
<t t-name="website.editor.dialog.image"> <t t-name="website.editor.dialog.image">
<t t-call="website.editor.dialog"> <t t-call="website.editor.dialog">
<t t-set="title">Image:</t> <t t-set="title">Image:</t>
<div> <div class="row">
<div class="image-preview-container">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAC0lEQVQIHWP4zwAAAgEBAMVfG14AAAAASUVORK5CYII%3D"
class="pull-right img-rounded image-preview"
width="100%"/>
<select class="form-control image-style">
<option value="">No styling</option>
<option value="img-rounded">Rounded corners</option>
<option value="img-thumbnail">Box</option>
<option value="img-circle">Circle</option>
</select>
</div>
<form method="POST" action="/website/attach" <form method="POST" action="/website/attach"
enctype="multipart/form-data" enctype="multipart/form-data"
target="fileframe"> target="fileframe"
<ul class="nav nav-pills nav-justified"> class="col-sm-8">
<li class="active"><a href="#image-upload" data-toggle="pill"> <div class="well">
Upload <!-- a href="#" class="pull-left">Find image</a -->
</a></li> <h3 class="list-group-item-heading">Image URL</h3>
<li><a href="#image-existing" data-toggle="pill">Your images</a></li> <input type="text" class="form-control url"
<li><a href="#image-external" data-toggle="pill">External Image</a></li> placeholder="http://openerp.com"/>
</ul> </div>
<div class="tab-content"> <div class="text-center">
<div id="image-upload" class="tab-pane active form-group text-center"> <p class="">— or —</p>
<input type="file" name="upload" style="position: absolute; opacity: 0; width: 1px; height: 1px;"/> <input type="file" name="upload" style="position: absolute; opacity: 0; width: 1px; height: 1px;"/>
<button type="button" class="btn btn-primary btn-lg filepicker"> <button type="button" class="btn btn-primary btn-lg filepicker">
Upload an image from your computer Upload an image from your computer
</button> </button>
</div> </div>
<div id="image-existing" class="tab-pane well"> <p class="text-center">— or —</p>
<div class="existing-attachments"/> <div class="well">
</div> <h3 class="list-group-item-heading">Pick an existing attachment</h3>
<div id="image-external" class="tab-pane well form-group"> <div class="existing-attachments"/>
<input type="text" class="form-control url"
placeholder="e.g. http://goo.gl/EDC325"/>
</div>
</div> </div>
<input type="hidden" name="func"/> <input type="hidden" name="func"/>
</form> </form>
<iframe src="about:blank" name="fileframe" class="hidden"/> <div class="col-sm-4">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAC0lEQVQIHWP4zwAAAgEBAMVfG14AAAAASUVORK5CYII%3D"
class="pull-right img-rounded image-preview"
width="100%"/>
</div>
</div> </div>
<iframe src="about:blank" name="fileframe" class="hidden"/>
</t> </t>
</t> </t>
<t t-name="website.editor.dialog.image.existing"> <t t-name="website.editor.dialog.image.existing">