[REF] web_editor: code refactoring and simplification

* Remove dead code + optimization
* Use Dialog API from web module
* Reorganize files
* Correct buggy $() function for snippet option class
* Add comments

* Fix the snippet parent navigation :

If a page contained a three level snippet structure (i.e A contains
B contains C), when editing the following bug occured :

If B or C was selected first, parenting buttons were correctly set.
But if selecting A then C, clicking on the parent lead to going back
on A instead of going on B.

* Fix snippet thumbnail layout
* Better isolate ui css from themes
* MediaDialog image list : prevent displaying empty attachments
* ...

1 files changed, 271 insertions, 312 deletions

diff --git a/addons/web_editor/static/src/xml/editor.xml b/addons/web_editor/static/src/xml/editor.xml
index 49743987fc3..f4fb773c8c3 100644
--- a/addons/web_editor/static/src/xml/editor.xml
+++ b/addons/web_editor/static/src/xml/editor.xml
@@ -1,5 +1,10 @@
 <?xml version="1.0" encoding="utf-8"?>
 <templates id="template" xml:space="preserve">
+    <!--=================-->
+    <!-- Base components -->
+    <!--=================-->
+
+    <!-- Editor top bar which contains the summernote tools and save/discard buttons -->
     <t t-name="web_editor.editorbar">
         <div id="web_editor-top-edit" class="o_css_editor">
             <div id="web_editor-toolbars"/>
@@ -9,187 +14,72 @@
             </form>
         </div>
     </t>
-    <t t-name="web_editor.dialog">
-        <div class="modal o_website_modal web_editor-dialog" tabindex="-1" role="dialog" aria-hidden="true">
-            <div class="modal-dialog">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-                        <h3 class="modal-title">
-                            <t t-esc="title"/>
-                        </h3>
-                    </div>
-                    <div class="modal-body">
-                        <t t-raw="0"/>
-                    </div>
-                    <div class="modal-footer">
-                        <button class="btn btn-sm btn-primary save" t-if="!button" type="button">Save</button>
-                        <button class="btn btn-sm btn-primary save" t-if="button" type="button"><t t-raw="button"/></button>
-                        <button class="btn hidden wait" disabled="disabled" type="button"/>
-                        <a class="btn btn-sm btn-default" data-dismiss="modal" href="#" aria-hidden="true">Discard</a>
-                    </div>
-                </div>
-            </div>
-        </div>
+
+    <!-- Custom checkbox (material-design-like toggle) -->
+    <t t-name="web_editor.components.switch">
+        <label class="o_switch" t-att-for="id">
+            <input type="checkbox" t-att-id="id"/>
+            <span/>
+            <t t-if="label"><t t-esc="label"/></t>
+        </label>
     </t>
-    <div t-name="web_editor.dialog.background_position" class="o_bg_img_opt_modal">
-        <label class="radio-inline"><input type="radio" name="o_bg_img_opt" value="cover"/> Cover</label>
-        <label class="radio-inline"><input type="radio" name="o_bg_img_opt" value="contain"/> Contain</label>
-        <label class="radio-inline"><input type="radio" name="o_bg_img_opt" value="custom"/> Custom</label>
 
-        <div class="o_bg_img_opt" data-value="cover">
-            <a class="help-control collapsed" role="button" data-toggle="collapse" href="#cover_help" aria-expanded="false" aria-controls="cover_help"><span class="fa fa-question-circle"/></a>
-            <div class="help collapse" id="cover_help">
-                <div class="simulator cover_bg">
-                    <div class="bg"/>
-                    <div class="el"/>
-                </div>
-                <p class="help-text">Scale the image to be as large as it needs to fill the whole content area. Part of the image may not be visible.</p>
-            </div>
+    <!--=================-->
+    <!-- Edition Dialogs -->
+    <!--=================-->
 
-            <p><strong>Assigning a focal point to ensure that the targeted area will be always visible</strong></p>
-            <div class="o_bg_img_opt_cover_edition">
-                <h6>Click on the picture</h6>
-                <div class="o_bg_img_opt_object">
-                    <span class="grid grid-1"/>
-                    <span class="grid grid-2"/>
-                    <span class="grid grid-3"/>
-                    <span class="grid grid-4"/>
-                    <span class="o_focus_point"/>
-                    <div class="o_bg_img_opt_ui_info">X: <span class="o_x"/> Y: <span class="o_y"/></div>
-                </div>
+    <!-- Alt Dialog (allows to change alt and title of page images) -->
+    <form t-name="web_editor.dialog.alt" action="#" class="form-horizontal">
+        <div class="form-group">
+            <label class="col-sm-2 control-label" for="alt">Description</label>
+            <div class="col-sm-9">
+                <input class="form-control" id="alt" required="required" t-att-value="widget.alt" type="text"/>
             </div>
         </div>
-        <div class="o_bg_img_opt" data-value="contain">
-            <a class="help-control collapsed" role="button" data-toggle="collapse" href="#contain_help" aria-expanded="false" aria-controls="contain_help"><span class="fa fa-question-circle"/></a>
-            <div class="help collapse" id="contain_help">
-                <div class="simulator contain_bg">
-                    <div class="bg"/>
-                    <div class="el"/>
-                </div>
-                <p class="help-text">Scale the image to the largest size such that both its width and height can fit inside the content area</p>
+        <div class="form-group">
+            <label class="col-sm-2 control-label" for="title">Tooltip</label>
+            <div class="col-sm-9">
+                <input class="form-control" id="title" required="required" t-att-value="widget.title" type="text"/>
             </div>
+        </div>
+    </form>
 
-            <form class="form-horizontal">
-                <div class="form-group">
-                    <label class="col-sm-2 control-label" for="repeatInput">Repeat</label>
-                    <div class="col-sm-5">
-                        <div class="checkbox">
-                            <label>
-                                <input type="checkbox" id="o_bg_img_opt_contain_repeat"/>
-                            </label>
-                        </div>
+    <!-- Media Dialog (allows to choose an img/pictogram/video) -->
+    <div t-name="web_editor.dialog.media">
+        <ul class="nav nav-tabs">
+            <li class="active"><a href="#editor-media-image" data-toggle="tab">Image</a></li>
+            <li><a href="#editor-media-document" data-toggle="tab">Document</a></li>
+            <li><a href="#editor-media-icon" data-toggle="tab">Pictogram</a></li>
+            <li><a href="#editor-media-video" data-toggle="tab">Video</a></li>
+            <li class="search">
+                <ul class="pager mb0 mt0">
+                    <li class="previous disabled">
+                        <a href="#">← Previous</a>
+                    </li>
+                    <li class="next disabled">
+                        <a href="#">Next →</a>
+                    </li>
+                </ul>
+            </li>
+            <li class="search">
+                <form action="#">
+                    <div class="form-group">
+                        <input class="form-control" id="icon-search" type="search"/>
+                        <span class="fa fa-search"/>
                     </div>
-                </div>
-            </form>
+                </form>
+            </li>
+        </ul>
+        <!-- Tab panes -->
+        <div class="tab-content">
+            <div class="tab-pane fade in active" id="editor-media-image"/>
+            <div class="tab-pane fade" id="editor-media-document"/>
+            <div class="tab-pane fade" id="editor-media-icon"/>
+            <div class="tab-pane fade" id="editor-media-video"/>
         </div>
-        <form class="o_bg_img_opt form-horizontal" data-value="custom">
-            <fieldset>
-                <legend>Background size</legend>
-                <p>Sets the width and height of the background image in percent of the parent element.</p>
-                <div class="form-group">
-                    <label class="col-sm-3 control-label" for="o_bg_img_opt_custom_size_x">Background width</label>
-                    <div class="col-sm-5">
-                        <div class="input-group">
-                            <input type="number" min="0" max="100" class="form-control input-sm" id="o_bg_img_opt_custom_size_x" placeholder="auto"/>
-                            <div class="input-group-addon">%</div>
-                        </div>
-                    </div>
-                </div>
-                <div class="form-group">
-                    <label class="col-sm-3 control-label" for="o_bg_img_opt_custom_size_y">Background height</label>
-                    <div class="col-sm-5">
-                        <div class="input-group">
-                            <input type="number" min="0" max="100" class="form-control input-sm" id="o_bg_img_opt_custom_size_y" placeholder="auto"/>
-                            <div class="input-group-addon">%</div>
-                        </div>
-                    </div>
-                </div>
-            </fieldset>
-            <fieldset>
-                <legend>Background position</legend>
-                <p>Set the starting position of the background image.</p>
-                <div class="form-group">
-                    <label class="col-sm-3 control-label" for="o_bg_img_opt_custom_pos_x">Horizontal</label>
-                    <div class="col-sm-5">
-                        <div class="input-group">
-                            <input type="number" min="0" max="100" class="form-control input-sm" id="o_bg_img_opt_custom_pos_x" placeholder="auto"/>
-                            <div class="input-group-addon">%</div>
-                        </div>
-                    </div>
-                </div>
-                <div class="form-group">
-                    <label class="col-sm-3 control-label" for="o_bg_img_opt_custom_pos_y">Vertical</label>
-                    <div class="col-sm-5">
-                        <div class="input-group">
-                            <input type="number" min="0" max="100" class="form-control input-sm" id="o_bg_img_opt_custom_pos_y" placeholder="auto"/>
-                            <div class="input-group-addon">%</div>
-                        </div>
-                    </div>
-                </div>
-            </fieldset>
-            <fieldset>
-                <legend>Background repeat</legend>
-                <p>Define if/how the background image will be repeated</p>
-                <select class="form-control" id="o_bg_img_opt_custom_repeat">
-                    <option value="">No repeat</option>
-                    <option value="o_bg_img_opt_repeat">Repeat both</option>
-                    <option value="o_bg_img_opt_repeat_x">Repeat x</option>
-                    <option value="o_bg_img_opt_repeat_y">Repeat y</option>
-                </select>
-            </fieldset>
-        </form>
     </div>
-    <t t-name="web_editor.dialog.media">
-        <div class="modal note-image-dialog o_website_modal" tabindex="-1" role="dialog" aria-hidden="true">
-            <div class="modal-dialog modal-lg o_select_media_dialog">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-                        <h3 class="modal-title">Select a Media</h3>
-                    </div>
-                    <div class="modal-body">
-                        <ul class="nav nav-tabs">
-                            <li class="active"><a href="#editor-media-image" data-toggle="tab">Image</a></li>
-                            <li><a href="#editor-media-document" data-toggle="tab">Document</a></li>
-                            <li><a href="#editor-media-icon" data-toggle="tab">Pictogram</a></li>
-                            <li><a href="#editor-media-video" data-toggle="tab">Video</a></li>
-                            <li class="search">
-                                <ul class="pager mb0 mt0">
-                                    <li class="previous disabled">
-                                        <a href="#">← Previous</a>
-                                    </li>
-                                    <li class="next disabled">
-                                        <a href="#">Next →</a>
-                                    </li>
-                                </ul>
-                            </li>
-                            <li class="search">
-                                <form action="#">
-                                    <div class="form-group">
-                                        <input class="form-control" id="icon-search" type="search"/>
-                                        <span class="fa fa-search"/>
-                                    </div>
-                                </form>
-                            </li>
-                        </ul>
-                        <!-- Tab panes -->
-                        <div class="tab-content">
-                            <div class="tab-pane fade in active" id="editor-media-image"/>
-                            <div class="tab-pane fade" id="editor-media-document"/>
-                            <div class="tab-pane fade" id="editor-media-icon"/>
-                            <div class="tab-pane fade" id="editor-media-video"/>
-                        </div>
-                    </div>
-                    <div class="modal-footer">
-                        <button class="btn btn-sm btn-primary save" type="button">Save</button>
-                        <button class="btn btn-sm hidden wait" disabled="disabled" type="button"/>
-                        <a class="btn btn-sm btn-default" data-dismiss="modal" href="#" aria-hidden="true">Discard</a>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </t>
+
+    <!-- Image choosing part of the Media Dialog -->
     <t t-name="web_editor.dialog.image">
         <div>
             <form method="POST"
@@ -276,45 +166,8 @@
             </ul>
         </div>
     </t>
-    <t t-name="web_editor.discard">
-        <div class="modal o_website_modal" tabindex="-1" role="dialog" aria-hidden="true">
-            <div class="modal-dialog">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-                        <h3 class="modal-title">Discard edition</h3>
-                    </div>
-                    <div class="modal-body">
-                        <p>If you discard the current edition, <em>all</em> unsaved changes will be lost.</p>
-                        <p>You can cancel to return to the edition mode.</p>
-                    </div>
-                    <div class="modal-footer">
-                        <button class="btn btn-sm btn-danger" type="button">Discard</button>
-                        <a class="btn btn-sm btn-default" data-dismiss="modal" href="#" aria-hidden="true">Cancel</a>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </t>
-    <t t-name="web_editor.dialog.alt">
-        <t t-call="web_editor.dialog">
-            <t t-set="title">Change media description and tooltip</t>
-            <form action="#" class="form-horizontal">
-                <div class="form-group">
-                    <label class="col-sm-2 control-label" for="alt">Description</label>
-                    <div class="col-sm-9">
-                        <input class="form-control" id="alt" required="required" t-att-value="widget.alt" type="text"/>
-                    </div>
-                </div>
-                <div class="form-group">
-                    <label class="col-sm-2 control-label" for="title">Tooltip</label>
-                    <div class="col-sm-9">
-                        <input class="form-control" id="title" required="required" t-att-value="widget.title" type="text"/>
-                    </div>
-                </div>
-            </form>
-        </t>
-    </t>
+
+    <!-- Icon choosing part of the Media Dialog -->
     <t t-name="web_editor.dialog.font-icons">
         <form action="#">
             <input type="hidden" id="fa-icon"/>
@@ -331,6 +184,8 @@
             <span t-as="cssData" t-att-data-id="cssData[2]" t-att-title="cssData[3].join(', ')" t-attf-class="#{data.base} font-icons-icon #{cssData[2]}" t-attf-data-alias=",#{cssData[3]}," t-foreach="data.cssData"/>
         </t>
     </t>
+
+    <!-- Video choosing part of the Media Dialog -->
     <t t-name="web_editor.dialog.video">
         <form action="#" class="form-inline">
             <div class="well">
@@ -361,117 +216,221 @@
             </div>
         </form>
     </t>
-    <t t-name="web_editor.dialog.link">
-        <t t-call="web_editor.dialog">
-            <t t-set="title">Link to</t>
-            <form>
-                <div class="list-group">
-                    <div class="form-group list-group-item active">
-                        <h3 class="list-group-item-heading">
-                            <label class="control-label" for="link-new">Link Label
-                            </label>
-                        </h3>
-                        <input class="form-control" id="link-text" required="required" type="text"/>
+
+    <!-- Link Dialog (allows to choose a style and content for a link on the page) -->
+    <form t-name="web_editor.dialog.link">
+        <div class="list-group">
+            <div class="form-group list-group-item active">
+                <h3 class="list-group-item-heading">
+                    <label class="control-label" for="link-new">Link Label
+                    </label>
+                </h3>
+                <input class="form-control" id="link-text" required="required" type="text"/>
+            </div>
+        </div>
+        <ul class="list-group">
+            <li class="list-group-item form-group clearfix active">
+                <div class="pull-right" style="display: none;">
+                    <label>
+                        <input class="window-new" type="checkbox"/>Open in new window</label>
+                </div>
+                <h4 class="list-group-item-heading">
+                    <label class="control-label" for="link-external">URL or Email Address
+                    </label>
+                </h4>
+                <input class="form-control url email-address url-source" id="link-external" placeholder="http://openerp.com" type="text"/>
+            </li>
+        </ul>
+        <div class="form-horizontal link-style">
+            <div class="form-group">
+                <label class="col-sm-2 control-label">Style
+                </label>
+                <div class="col-sm-4">
+                    <div class="dropdown" style="line-height: 2em;">
+                        <a class="btn btn-default" data-toggle="dropdown" href="#">Color Style
+                            <span class="caret"/></a>
+                        <ul aria-labelledby="dLabel" class="dropdown-menu" role="menu">
+                            <li>
+                                <label class="btn btn-link">Link
+                                    <input checked="checked" class="link-style" name="link-style-type" type="radio" value=""/></label>
+                            </li>
+                            <li>
+                                <label class="btn btn-default">Basic
+                                    <input class="link-style" name="link-style-type" type="radio" value="btn-default"/></label>
+                            </li>
+                            <li>
+                                <label class="btn btn-success">Success
+                                    <input class="link-style" name="link-style-type" type="radio" value="btn-success"/></label>
+                            </li>
+                            <li>
+                                <label class="btn btn-primary">Primary
+                                    <input class="link-style" name="link-style-type" type="radio" value="btn-primary"/></label>
+                            </li>
+                            <li>
+                                <label class="btn btn-info">Info
+                                    <input class="link-style" name="link-style-type" type="radio" value="btn-info"/></label>
+                            </li>
+                            <li>
+                                <label class="btn btn-warning">Warning
+                                    <input class="link-style" name="link-style-type" type="radio" value="btn-warning"/></label>
+                            </li>
+                            <li>
+                                <label class="btn btn-danger">Danger
+                                    <input class="link-style" name="link-style-type" type="radio" value="btn-danger"/></label>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="col-sm-4">
+                    <div class="dropdown" style="line-height: 2em;">
+                        <a class="btn btn-default" data-toggle="dropdown" href="#">Size
+                            <span class="caret"/></a>
+                        <ul aria-labelledby="dLabel" class="dropdown-menu" role="menu">
+                            <li>
+                                <label class="btn btn-default btn-xs">Extra Small
+                                    <input class="link-style" name="link-style-size" type="radio" value="btn-xs"/></label>
+                            </li>
+                            <li>
+                                <label class="btn btn-default btn-sm">Small
+                                    <input class="link-style" name="link-style-size" type="radio" value="btn-sm"/></label>
+                            </li>
+                            <li>
+                                <label class="btn btn-default">Default
+                                    <input checked="checked" class="link-style" name="link-style-size" type="radio" value=""/></label>
+                            </li>
+                            <li>
+                                <label class="btn btn-default btn-lg">Large
+                                    <input class="link-style" name="link-style-size" type="radio" value="btn-lg"/></label>
+                            </li>
+                        </ul>
                     </div>
                 </div>
-                <ul class="list-group">
-                    <li class="list-group-item form-group clearfix active">
-                        <div class="pull-right" style="display: none;">
+            </div>
+        </div>
+        <div class="form-horizontal link-style">
+            <div class="form-group">
+                <label class="col-sm-2 control-label">Preview
+                </label>
+                <div class="col-sm-10" style="line-height: 2em;">
+                    <div style="overflow: auto; max-width: 100%; max-height: 200px;">
+                        <a href="#" id="link-preview"/>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>
+
+    <!--=================-->
+    <!-- Snippet options -->
+    <!--=================-->
+
+    <!-- Background position option dialog -->
+    <div t-name="web_editor.dialog.background_position" class="o_bg_img_opt_modal">
+        <label class="radio-inline"><input type="radio" name="o_bg_img_opt" value="cover"/> Cover</label>
+        <label class="radio-inline"><input type="radio" name="o_bg_img_opt" value="contain"/> Contain</label>
+        <label class="radio-inline"><input type="radio" name="o_bg_img_opt" value="custom"/> Custom</label>
+
+        <div class="o_bg_img_opt" data-value="cover">
+            <a class="help-control collapsed" role="button" data-toggle="collapse" href="#cover_help" aria-expanded="false" aria-controls="cover_help"><span class="fa fa-question-circle"/></a>
+            <div class="help collapse" id="cover_help">
+                <div class="simulator cover_bg">
+                    <div class="bg"/>
+                    <div class="el"/>
+                </div>
+                <p class="help-text">Scale the image to be as large as it needs to fill the whole content area. Part of the image may not be visible.</p>
+            </div>
+
+            <p><strong>Assigning a focal point to ensure that the targeted area will be always visible</strong></p>
+            <div class="o_bg_img_opt_cover_edition">
+                <h6>Click on the picture</h6>
+                <div class="o_bg_img_opt_object">
+                    <span class="grid grid-1"/>
+                    <span class="grid grid-2"/>
+                    <span class="grid grid-3"/>
+                    <span class="grid grid-4"/>
+                    <span class="o_focus_point"/>
+                    <div class="o_bg_img_opt_ui_info">X: <span class="o_x"/> Y: <span class="o_y"/></div>
+                </div>
+            </div>
+        </div>
+        <div class="o_bg_img_opt" data-value="contain">
+            <a class="help-control collapsed" role="button" data-toggle="collapse" href="#contain_help" aria-expanded="false" aria-controls="contain_help"><span class="fa fa-question-circle"/></a>
+            <div class="help collapse" id="contain_help">
+                <div class="simulator contain_bg">
+                    <div class="bg"/>
+                    <div class="el"/>
+                </div>
+                <p class="help-text">Scale the image to the largest size such that both its width and height can fit inside the content area</p>
+            </div>
+
+            <form class="form-horizontal">
+                <div class="form-group">
+                    <label class="col-sm-2 control-label" for="repeatInput">Repeat</label>
+                    <div class="col-sm-5">
+                        <div class="checkbox">
                             <label>
-                                <input class="window-new" type="checkbox"/>Open in new window</label>
-                        </div>
-                        <h4 class="list-group-item-heading">
-                            <label class="control-label" for="link-external">URL or Email Address
+                                <input type="checkbox" id="o_bg_img_opt_contain_repeat"/>
                             </label>
-                        </h4>
-                        <input class="form-control url email-address url-source" id="link-external" placeholder="http://openerp.com" type="text"/>
-                    </li>
-                </ul>
-                <div class="form-horizontal link-style">
-                    <div class="form-group">
-                        <label class="col-sm-2 control-label">Style
-                        </label>
-                        <div class="col-sm-4">
-                            <div class="dropdown" style="line-height: 2em;">
-                                <a class="btn btn-default" data-toggle="dropdown" href="#">Color Style
-                                    <span class="caret"/></a>
-                                <ul aria-labelledby="dLabel" class="dropdown-menu" role="menu">
-                                    <li>
-                                        <label class="btn btn-link">Link
-                                            <input checked="checked" class="link-style" name="link-style-type" type="radio" value=""/></label>
-                                    </li>
-                                    <li>
-                                        <label class="btn btn-default">Basic
-                                            <input class="link-style" name="link-style-type" type="radio" value="btn-default"/></label>
-                                    </li>
-                                    <li>
-                                        <label class="btn btn-success">Success
-                                            <input class="link-style" name="link-style-type" type="radio" value="btn-success"/></label>
-                                    </li>
-                                    <li>
-                                        <label class="btn btn-primary">Primary
-                                            <input class="link-style" name="link-style-type" type="radio" value="btn-primary"/></label>
-                                    </li>
-                                    <li>
-                                        <label class="btn btn-info">Info
-                                            <input class="link-style" name="link-style-type" type="radio" value="btn-info"/></label>
-                                    </li>
-                                    <li>
-                                        <label class="btn btn-warning">Warning
-                                            <input class="link-style" name="link-style-type" type="radio" value="btn-warning"/></label>
-                                    </li>
-                                    <li>
-                                        <label class="btn btn-danger">Danger
-                                            <input class="link-style" name="link-style-type" type="radio" value="btn-danger"/></label>
-                                    </li>
-                                </ul>
-                            </div>
                         </div>
-                        <div class="col-sm-4">
-                            <div class="dropdown" style="line-height: 2em;">
-                                <a class="btn btn-default" data-toggle="dropdown" href="#">Size
-                                    <span class="caret"/></a>
-                                <ul aria-labelledby="dLabel" class="dropdown-menu" role="menu">
-                                    <li>
-                                        <label class="btn btn-default btn-xs">Extra Small
-                                            <input class="link-style" name="link-style-size" type="radio" value="btn-xs"/></label>
-                                    </li>
-                                    <li>
-                                        <label class="btn btn-default btn-sm">Small
-                                            <input class="link-style" name="link-style-size" type="radio" value="btn-sm"/></label>
-                                    </li>
-                                    <li>
-                                        <label class="btn btn-default">Default
-                                            <input checked="checked" class="link-style" name="link-style-size" type="radio" value=""/></label>
-                                    </li>
-                                    <li>
-                                        <label class="btn btn-default btn-lg">Large
-                                            <input class="link-style" name="link-style-size" type="radio" value="btn-lg"/></label>
-                                    </li>
-                                </ul>
-                            </div>
+                    </div>
+                </div>
+            </form>
+        </div>
+        <form class="o_bg_img_opt form-horizontal" data-value="custom">
+            <fieldset>
+                <legend>Background size</legend>
+                <p>Sets the width and height of the background image in percent of the parent element.</p>
+                <div class="form-group">
+                    <label class="col-sm-3 control-label" for="o_bg_img_opt_custom_size_x">Background width</label>
+                    <div class="col-sm-5">
+                        <div class="input-group">
+                            <input type="number" min="0" max="100" class="form-control input-sm" id="o_bg_img_opt_custom_size_x" placeholder="auto"/>
+                            <div class="input-group-addon">%</div>
                         </div>
                     </div>
                 </div>
-                <div class="form-horizontal link-style">
-                    <div class="form-group">
-                        <label class="col-sm-2 control-label">Preview
-                        </label>
-                        <div class="col-sm-10" style="line-height: 2em;">
-                            <div style="overflow: auto; max-width: 100%; max-height: 200px;">
-                                <a href="#" id="link-preview"/>
-                            </div>
+                <div class="form-group">
+                    <label class="col-sm-3 control-label" for="o_bg_img_opt_custom_size_y">Background height</label>
+                    <div class="col-sm-5">
+                        <div class="input-group">
+                            <input type="number" min="0" max="100" class="form-control input-sm" id="o_bg_img_opt_custom_size_y" placeholder="auto"/>
+                            <div class="input-group-addon">%</div>
                         </div>
                     </div>
                 </div>
-            </form>
-        </t>
-    </t>
-    <t t-name="web_editor.components.switch">
-        <label class="o_switch" t-att-for="id">
-            <input type="checkbox" t-att-id="id"/>
-            <span/>
-            <t t-if="label"><t t-esc="label"/></t>
-        </label>
-    </t>
+            </fieldset>
+            <fieldset>
+                <legend>Background position</legend>
+                <p>Set the starting position of the background image.</p>
+                <div class="form-group">
+                    <label class="col-sm-3 control-label" for="o_bg_img_opt_custom_pos_x">Horizontal</label>
+                    <div class="col-sm-5">
+                        <div class="input-group">
+                            <input type="number" min="0" max="100" class="form-control input-sm" id="o_bg_img_opt_custom_pos_x" placeholder="auto"/>
+                            <div class="input-group-addon">%</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label class="col-sm-3 control-label" for="o_bg_img_opt_custom_pos_y">Vertical</label>
+                    <div class="col-sm-5">
+                        <div class="input-group">
+                            <input type="number" min="0" max="100" class="form-control input-sm" id="o_bg_img_opt_custom_pos_y" placeholder="auto"/>
+                            <div class="input-group-addon">%</div>
+                        </div>
+                    </div>
+                </div>
+            </fieldset>
+            <fieldset>
+                <legend>Background repeat</legend>
+                <p>Define if/how the background image will be repeated</p>
+                <select class="form-control" id="o_bg_img_opt_custom_repeat">
+                    <option value="">No repeat</option>
+                    <option value="o_bg_img_opt_repeat">Repeat both</option>
+                    <option value="o_bg_img_opt_repeat_x">Repeat x</option>
+                    <option value="o_bg_img_opt_repeat_y">Repeat y</option>
+                </select>
+            </fieldset>
+        </form>
+    </div>
 </templates>