[IMP] website: replace the select box into dropdown for link editor to have a preview

4 files changed, 82 insertions, 27 deletions

diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index d38f26fd332..f789c7499f2 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -165,6 +165,23 @@ table.editorbar-panel td.selected {
   background-color: #b1c9d9;
 }
 
+.link-style .dropdown > .btn {
+  min-width: 160px;
+}
+.link-style .link-style {
+  display: none;
+}
+.link-style li {
+  text-align: center;
+}
+.link-style li label {
+  width: 100px;
+  margin: 0 5px;
+}
+.link-style .col-sm-2 > * {
+  line-height: 2em;
+}
+
 /* ---- TRANSLATIONS ---- {{{ */
 .oe_translate_or {
   color: white;
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index b40907bc66c..2922c944d86 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -134,6 +134,19 @@ table.editorbar-panel
     td.selected
         background-color: #b1c9d9
 
+.link-style
+    .dropdown > .btn
+        min-width: 160px
+    .link-style
+        display: none
+    li
+        text-align: center
+        label
+            width: 100px
+            margin: 0 5px
+    .col-sm-2 > *
+        line-height: 2em
+
 // }}}
 
 /* ---- TRANSLATIONS ---- {{{ */
diff --git a/addons/website/static/src/js/website.editor.js b/addons/website/static/src/js/website.editor.js
index 178dee1e024..f15278ee49f 100644
--- a/addons/website/static/src/js/website.editor.js
+++ b/addons/website/static/src/js/website.editor.js
@@ -947,7 +947,7 @@
             'change input#link-text': function (e) {
                 this.text = $(e.target).val();
             },
-            'change select.link-style': function (e) {
+            'change .link-style': function (e) {
                 this.preview();
             },
         }),
@@ -1006,8 +1006,8 @@
                 def.reject();
             }
 
-            var style = this.$("#link-style-type").val();
-            var size = this.$("#link-style-size").val();
+            var style = this.$("input[name='link-style-type']:checked").val();
+            var size = this.$("input[name='link-style-size']:checked").val();
             var classes = (style && style.length ? "btn " : "") + style + " " + size;
 
             if ($e.hasClass('email-address') && $e.val().indexOf("@") !== -1) {
@@ -1056,10 +1056,10 @@
 
             var classes = this.element && this.element.$.className;
             if (classes) {
-                this.$('option[value!=""]').each(function () {
+                this.$('input[value!=""]').each(function () {
                     var $option = $(this);
                     if (classes.indexOf($option.val()) !== -1) {
-                        $option.attr("selected", "selected");
+                        $option.attr("checked", "checked");
                     }
                 });
             }
diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index 099c85ddc45..486b4498f16 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -76,38 +76,63 @@
                         </div>
                     </div>
                 </div>
-                <div class="form-horizontal">
+                <div class="form-horizontal link-style">
                     <div class="form-group">
-                        <label for="link-style-type" class="col-sm-2 control-label">
+                        <label 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 class="col-sm-4">
+                            <div class="dropdown" style="line-height: 2em;">
+                                <a data-toggle="dropdown" class="btn btn-default" href="#">Color Style <span class="caret"></span></a>
+                                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+                                    <li>
+                                        <label class="btn btn-link">Link<input value="" class="link-style" type="radio" name="link-style-type" checked="checked"/></label>
+                                    </li>
+                                    <li>
+                                        <label class="btn btn-default">Basic<input value="btn-default" class="link-style" type="radio" name="link-style-type"/></label>
+                                    </li>
+                                    <li>
+                                        <label class="btn btn-primary">Primary<input value="btn-primary" class="link-style" type="radio" name="link-style-type"/></label>
+                                    </li>
+                                    <li>
+                                        <label class="btn btn-info">Info<input value="btn-info" class="link-style" type="radio" name="link-style-type"/></label>
+                                    </li>
+                                    <li>
+                                        <label class="btn btn-warning">Warning<input value="btn-warning" class="link-style" type="radio" name="link-style-type"/></label>
+                                    </li>
+                                    <li>
+                                        <label class="btn btn-danger">Danger<input value="btn-danger" class="link-style" type="radio" name="link-style-type"/></label>
+                                    </li>
+                                </ul>
+                            </div>
                         </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 class="col-sm-4">
+                            <div class="dropdown" style="line-height: 2em;">
+                                <a data-toggle="dropdown" class="btn btn-default" href="#">Size <span class="caret"></span></a>
+                                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+                                    <li>
+                                        <label class="btn btn-default btn-xs">Extra Small<input value="btn-xs" class="link-style" type="radio" name="link-style-size"/></label>
+                                    </li>
+                                    <li>
+                                        <label class="btn btn-default btn-sm">Small<input value="btn-sm" class="link-style" type="radio" name="link-style-size"/></label>
+                                    </li>
+                                    <li>
+                                        <label class="btn btn-default">Default<input value="" class="link-style" type="radio" name="link-style-size" checked="checked"/></label>
+                                    </li>
+                                    <li>
+                                        <label class="btn btn-default btn-lg">Large<input value="btn-lg" class="link-style" type="radio" name="link-style-size"/></label>
+                                    </li>
+                                </ul>
+                            </div>
                         </div>
                     </div>
                 </div>
-                <div class="form-horizontal">
+                <div class="form-horizontal link-style">
                     <div class="form-group">
-                        <label for="link-text" class="col-sm-2 control-label">
+                        <label class="col-sm-2 control-label">
                             Preview
                         </label>
-                        <div class="col-sm-10" style="line-height: 2;">
+                        <div class="col-sm-10" style="line-height: 2em;">
                             <a id="link-preview" href="#"></a>
                         </div>
                     </div>