diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css index e895b1209ce..9607aef55db 100644 --- a/addons/website/static/src/css/editor.css +++ b/addons/website/static/src/css/editor.css @@ -1,4 +1,4 @@ -@charset "utf-8"; +@charset "UTF-8"; /* ---- CKEditor Minimal Reset ---- */ .navbar.navbar-inverse .cke_chrome { border: none; @@ -100,6 +100,25 @@ table.editorbar-panel td.selected { user-select: auto; } +.modal .existing-attachments a.thumbnail { + position: relative; +} +.modal .existing-attachments a.thumbnail.selected:before { + text-decoration: none; + font-size: 150%; + background-color: rgba(0, 0, 0, 0.3); + color: #21dc0f; + content: "✔"; + height: 2em; + width: 2em; + text-align: center; + padding: 5px; + border-radius: 4px 0; + position: absolute; + top: 0; + left: 0; +} + /* ---- SNIPPET EDITOR ---- */ #oe_snippets { position: fixed; diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass index 96c77108ff6..1dd71acefdc 100644 --- a/addons/website/static/src/css/editor.sass +++ b/addons/website/static/src/css/editor.sass @@ -91,6 +91,27 @@ table.editorbar-panel -o-user-select: auto user-select: auto +.modal .existing-attachments a.thumbnail + position: relative + + &.selected:before + text-decoration: none + font-size: 150% + background-color: rgba(0, 0, 0, 0.3) + color: #21dc0f + content: "✔" + + height: 2em + width: 2em + text-align: center + padding: 5px + border-radius: 4px 0 + + position: absolute + top: 0 + left: 0 + + /* ---- SNIPPET EDITOR ---- */ #oe_snippets diff --git a/addons/website/static/src/js/website.editor.js b/addons/website/static/src/js/website.editor.js index 5a8801bba38..77bed2f9215 100644 --- a/addons/website/static/src/js/website.editor.js +++ b/addons/website/static/src/js/website.editor.js @@ -589,7 +589,7 @@ }, 'change input[type=file]': 'file_selection', 'change input.url': 'preview_image', - 'click .existing-attachments a': 'select_existing', + 'click a[href=#existing]': 'browse_existing', }), start: function () { var selection = this.editor.getSelection(); @@ -600,9 +600,7 @@ this.set_image(el.getAttribute('src')); } - return $.when( - this._super(), - this.fetch_existing().then(this.proxy('fetched_existing'))); + return this._super(); }, save: function () { var url = this.$('input.url').val(); @@ -660,6 +658,29 @@ this.$('img.image-preview').attr('src', image); }, + browse_existing: function (e) { + e.preventDefault(); + new website.editor.ExistingImageDialog(this).appendTo(document.body); + }, + }); + + website.editor.ExistingImageDialog = website.editor.Dialog.extend({ + template: 'website.editor.dialog.image.existing', + events: _.extend({}, website.editor.Dialog.prototype.events, { + 'click .existing-attachments a': 'select_existing', + }), + init: function (parent) { + this.image = null; + this.parent = parent; + this._super(parent.editor); + }, + + start: function () { + return $.when( + this._super(), + this.fetch_existing().then(this.proxy('fetched_existing'))); + }, + fetch_existing: function () { // FIXME: lazy load attachments? return openerp.jsonRpc('/web/dataset/call_kw', 'call', { @@ -681,11 +702,21 @@ .values() .value(); this.$('.existing-attachments').replaceWith( - openerp.qweb.render('website.editor.dialog.image.existing', {rows: rows})); + openerp.qweb.render( + 'website.editor.dialog.image.existing.content', {rows: rows})); }, select_existing: function (e) { e.preventDefault(); - this.set_image(e.currentTarget.getAttribute('href')); + this.$('a.thumbnail.selected').removeClass('selected'); + + $(e.currentTarget).addClass('selected'); + }, + save: function () { + var link = this.$('a.thumbnail.selected').attr('href'); + if (link) { + this.parent.set_image(link); + } + this._super(); }, }); diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml index 03d0cd19849..98a5af1c184 100644 --- a/addons/website/static/src/xml/website.editor.xml +++ b/addons/website/static/src/xml/website.editor.xml @@ -103,7 +103,7 @@
— or —