[IMP] web_editor: improve `LinkDialog` widget design and usability

Specification
=============

- no boxes around fields
- use regular form style for input fields
- don't split page/URL into two fields, just do one URL field, with autocomplete
- Add alpha, beta, gamma, delta and epsilon color in color selection because they are used in mass mailing and themes also.
- Add a selection option with label "L" inside circle for link.
- Add Color selector for choosing button color
- Remov select2 page selector and used jquery autocomplete on same input
- Fix issue of page search in ir.http

1 files changed, 16 insertions, 90 deletions

diff --git a/addons/website/static/src/js/website.editor.js b/addons/website/static/src/js/website.editor.js
index d7bedde67f7..9e4e32cd227 100644
--- a/addons/website/static/src/js/website.editor.js
+++ b/addons/website/static/src/js/website.editor.js
@@ -113,100 +113,26 @@ website.TopBar.include({
 
 widget.LinkDialog.include({
     bind_data: function () {
-        var self = this;
-        var href = this.data.url;
-        var last;
-
-        this.$('#link-page').select2({
-            minimumInputLength: 1,
-            placeholder: _t("New or existing page"),
-            query: function (q) {
-                if (q.term === last) return;
-                last = q.term;
-                $.when(
-                    self.page_exists(q.term),
-                    self.fetch_pages(q.term)
-                ).then(function (exists, results) {
-                    var rs = _.map(results, function (r) {
-                        return { id: r.loc, text: r.loc, };
-                    });
-                    if (!exists) {
-                        rs.push({
-                            create: true,
-                            id: q.term,
-                            text: _.str.sprintf(_t("Create page '%s'"), q.term),
-                        });
-                    }
-                    q.callback({
-                        more: false,
-                        results: rs
+        this.$( "#link-external" ).autocomplete({
+            source: function(request, response) {
+                return ajax.jsonRpc('/web/dataset/call_kw', 'call', {
+                    model: 'website',
+                    method: 'search_pages',
+                    args: [null, request.term],
+                    kwargs: {
+                            limit: 15,
+                            context: base.get_context(),
+                        },
+                }).then(function (exists) {
+                    var rs=_.map(exists, function (r) {
+                        return r.loc;
                     });
-                }, function () {
-                    q.callback({more: false, results: []});
+                    response(rs);
                 });
-            },
-        });
-
-        if (href) {
-            this.page_exists(href).then(function (exist) {
-                if (exist) {
-                    self.$('#link-page').select2('data', {'id': href, 'text': href}).change();
-                } else {
-                    self.$('input.url').val(href).change();
-                    self.$('input.window-new').closest("div").show();
-                }
-            });
-        }
-        return this._super();
-    },
-    get_data_buy_url: function (def, $e, isNewWindow, label, classes, test) {
-        var val = $e.val();
-        if (val && val.length && $e.hasClass('page')) {
-            var data = $e.select2('data');
-            if (!data.create || test) {
-                def.resolve(data.id, isNewWindow, label || data.text, classes);
-            } else {
-                // Create the page, get the URL back
-                $.get(_.str.sprintf(
-                        '/website/add/%s?noredirect=1', encodeURI(data.id)))
-                    .then(function (response) {
-                        def.resolve(response, isNewWindow, label, classes);
-                    });
             }
-        } else {
-            return this._super.apply(this, arguments);
-        }
-    },
-    changed: function (e) {
-        this.$('.url-source').filter(':input').not($(e.target)).val('')
-                .filter(function () { return !!$(this).data('select2'); })
-                .select2('data', null);
-        this._super(e);
-    },
-    call: function (method, args, kwargs) {
-        var self = this;
-        var req = method + '_req';
-        if (this[req]) { this[req].abort(); }
-        return this[req] = ajax.jsonRpc('/web/dataset/call_kw', 'call', {
-            model: 'website',
-            method: method,
-            args: args,
-            kwargs: kwargs,
-        }).always(function () {
-            self[req] = null;
-        });
-    },
-    page_exists: function (term) {
-        return this.call('page_exists', [null, term], {
-            context: base.get_context(),
         });
-    },
-    fetch_pages: function (term) {
-        return this.call('search_pages', [null, term], {
-            limit: 100,
-            context: base.get_context(),
-        });
-    },
+        return this._super();
+    }
 });
 
 /**