[IMP] website editor: change link editor modal layout

2 files changed, 56 insertions, 50 deletions

diff --git a/addons/website/static/src/js/website.editor.js b/addons/website/static/src/js/website.editor.js
index bfe084898de..178dee1e024 100644
--- a/addons/website/static/src/js/website.editor.js
+++ b/addons/website/static/src/js/website.editor.js
@@ -948,9 +948,7 @@
                 this.text = $(e.target).val();
             },
             'change select.link-style': function (e) {
-                if (this.$("input.url-source[value!='']").val()) {
-                    this.preview();
-                }
+                this.preview();
             },
         }),
         init: function (editor) {
@@ -994,14 +992,14 @@
             });
             return this._super().then(this.proxy('bind_data'));
         },
-        get_data: function () {
+        get_data: function (test) {
             var self = this,
                 def = new $.Deferred(),
                 $e = this.$('.active input.url-source').filter(':input'),
                 val = $e.val(),
                 label = this.$('#link-text').val() || val;
 
-            if (!val || !$e[0].checkValidity()) {
+            if (test !== false && (!val || !$e[0].checkValidity())) {
                 // FIXME: error message
                 $e.closest('.form-group').addClass('has-error');
                 $e.focus();
@@ -1014,7 +1012,7 @@
 
             if ($e.hasClass('email-address') && $e.val().indexOf("@") !== -1) {
                 def.resolve('mailto:' + val, false, label);
-            } else if ($e.hasClass('page')) {
+            } else if ($e.val() && $e.val().length && $e.hasClass('page')) {
                 var data = $e.select2('data');
                 if (!data.create) {
                     def.resolve(data.id, false, data.text);
@@ -1066,15 +1064,15 @@
                 });
             }
 
-            if (!href) { return; }
             var match, $control;
-            if ((match = /mailto:(.+)/.exec(href))) {
+            if (href && (match = /mailto:(.+)/.exec(href))) {
                 this.$('input.email-address').val(match[1]).change();
             }
-            if (!$control) {
+            if (href && !$control) {
                 this.$('input.url').val(href).change();
                 this.$('input.window-new').closest("div").show();
             }
+            this.preview();
         },
         changed: function (e) {
             var $e = $(e.target);
@@ -1085,9 +1083,7 @@
                 .addClass('active')
                 .siblings().removeClass('active')
                 .addBack().removeClass('has-error');
-            if ($e.val() && $e.val().length) {
-                this.preview();
-            }
+            this.preview();
         },
         call: function (method, args, kwargs) {
             var self = this;
@@ -1123,10 +1119,9 @@
         },
         preview: function () {
             var $preview = this.$("#link-preview");
-            this.get_data().then(function (url, new_window, label, classes) {
-                $preview.attr("href", url)
-                    .attr("target", new_window ? '_blank' : "")
-                    .text(label && label.length ? label : url)
+            this.get_data(false).then(function (url, new_window, label, classes) {
+                $preview.attr("target", new_window ? '_blank' : "")
+                    .text((label && label.length ? label : url))
                     .attr("class", classes);
             });
         }
diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index e895c08c3cd..099c85ddc45 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -65,41 +65,52 @@
                         <input type="text" class="form-control url email-address url-source"
                                id="link-external" placeholder="http://openerp.com"/>
                     </li>
-                    <li class="list-group-item form-group">
-                        <h4 class="list-group-item-heading">
-                            <label for="link-text" class="control-label">
-                                Link text
-                            </label>
-                        </h4>
-                            <input type="text" class="form-control"
-                                   id="link-text"/>
-                    </li>
-                    <li class="list-group-item form-group">
-                        <h4 class="list-group-item-heading">
-                            <label for="link-type" class="control-label">
-                                Style
-                            </label>
-                        </h4>
-                        <select id="link-style-type" class="form-control link-style pull-left" style="display: inline-block; width: 49%;">
-                            <option value="" selected="selected">Link</option>
-                            <option value="btn-default">Basic</option>
-                            <option value="btn-primary">Primary</option>
-                            <option value="btn-success">Success</option>
-                            <option value="btn-info">Info</option>
-                            <option value="btn-warning">Warning</option>
-                            <option value="btn-danger">Danger</option>
-                        </select>
-                        <select id="link-style-size" class="form-control link-style pull-right" style="display: inline-block; width: 49%;">
-                            <option value="btn-xs">Extra Small</option>
-                            <option value="btn-sm">Small</option>
-                            <option value="" selected="selected">Default</option>
-                            <option value="btn-lg">Large</option>
-                        </select>
-                        <div class="clearfix"/>
-                    </li>
                 </ul>
-                <div class="text-center">
-                    <a id="link-preview" href="#" class="hidden">Preview</a>
+                <div class="form-horizontal">
+                    <div class="form-group">
+                        <label for="link-text" class="col-sm-2 control-label">
+                            Link text
+                        </label>
+                        <div class="col-sm-10">
+                            <input type="text" class="form-control" id="link-text"/>
+                        </div>
+                    </div>
+                </div>
+                <div class="form-horizontal">
+                    <div class="form-group">
+                        <label for="link-style-type" class="col-sm-2 control-label">
+                            Style
+                        </label>
+                        <div class="col-sm-5">
+                            <select id="link-style-type" class="form-control link-style" style="display: inline-block;">
+                                <option value="" selected="selected">Link</option>
+                                <option value="btn-default">Basic</option>
+                                <option value="btn-primary">Primary</option>
+                                <option value="btn-success">Success</option>
+                                <option value="btn-info">Info</option>
+                                <option value="btn-warning">Warning</option>
+                                <option value="btn-danger">Danger</option>
+                            </select>
+                        </div>
+                        <div class="col-sm-5">
+                            <select id="link-style-size" class="form-control link-style" style="display: inline-block;">
+                                <option value="btn-xs">Extra Small</option>
+                                <option value="btn-sm">Small</option>
+                                <option value="" selected="selected">Default</option>
+                                <option value="btn-lg">Large</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+                <div class="form-horizontal">
+                    <div class="form-group">
+                        <label for="link-text" class="col-sm-2 control-label">
+                            Preview
+                        </label>
+                        <div class="col-sm-10" style="line-height: 2;">
+                            <a id="link-preview" href="#"></a>
+                        </div>
+                    </div>
                 </div>
             </form>
         </t>