From c4a896a8a0e2219879903d212f2324d0b85d7f00 Mon Sep 17 00:00:00 2001
From: stefanorigano <stefano.rigano@gmail.com>
Date: Thu, 3 Sep 2015 13:29:04 +0200
Subject: [REF] website,web_editor: complete restyling

---
 addons/web_editor/static/src/xml/editor.xml | 578 +++++++++++++++++++++-------
 1 file changed, 447 insertions(+), 131 deletions(-)

(limited to 'addons/web_editor/static/src/xml/editor.xml')

diff --git a/addons/web_editor/static/src/xml/editor.xml b/addons/web_editor/static/src/xml/editor.xml
index 44abb32caf1..3891e7caf89 100644
--- a/addons/web_editor/static/src/xml/editor.xml
+++ b/addons/web_editor/static/src/xml/editor.xml
@@ -1,41 +1,375 @@
 <templates id="template" xml:space="preserve">
     <t t-name="web_editor.editorbar">
-        <div id="web_editor-top-edit" class="o_css_editor navbar navbar-inverse navbar-fixed-top hidden-xs">
+        <div class="o_css_editor navbar navbar-fixed-top hidden-xs" id="web_editor-top-edit">
+            <div id="web_editor-toolbars" />
             <form class="navbar-form text-muted">
-                <button type="button" data-action="save"
-                        class="btn btn-primary btn-xs">Save</button>
-                <span> or </span>
-                <a href="#" data-action="cancel" class="btn btn-link btn-xs">Discard</a>
+                <div id="web_editor-top-actions">
+                    <a class="btn btn-link btn-xs" data-action="cancel" href="#">
+                        <i class="material-icons">clear</i>DISCARD</a>
+                    <button class="btn full compl btn-xs" data-action="save" type="button">
+                        <i class="fa fa-floppy-o"></i>  SAVE</button>
+                </div>
             </form>
         </div>
     </t>
-
     <t t-name="web_editor.dialog">
-        <div class="modal web_editor-dialog" tabindex="-1" role="dialog" aria-hidden="true">
+        <div aria-hidden="true" class="modal web_editor-dialog" role="dialog" tabindex="-1">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</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-primary save" t-if="!button" type="button">Save</button>
+                        <button class="btn btn-primary save" t-if="button" type="button">
+                            <t t-raw="button"/>
+                        </button>
+                        <button class="btn hidden wait" disabled="disabled" type="button"/>
+                        <span>or </span>
+                        <a aria-hidden="true" data-dismiss="modal" href="#">Discard</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </t>
+    <t t-name="web_editor.dialog.background_position">
+        <div aria-hidden="true" class="modal website_modal web_editor-background_position" role="dialog" tabindex="-1">
             <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>
+                        <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
+                        <h3 class="modal-title">Background Image Options</h3>
                     </div>
-                    <div class="modal-body"><t t-raw="0"/></div>
+                    <div class="modal-body">
+                        <div class="panel-group" id="bg_image_opt_accordition" role="tablist" aria-multiselectable="true">
+                            <div class="panel panel-default">
+                                <div class="panel-heading" role="tab" id="heading_cover">
+                                    <label role="button" class="radio inline"  data-toggle="collapse" data-parent="#bg_image_opt_accordition" href="#collapse_cover">
+                                        <input id="radio1" class="opt_select" name="rdo" type="radio"/>COVER</label>
+                                </div>
+                                <div class="panel-collapse collapse" role="tabpanel" id="collapse_cover">
+                                    <div class="panel-body">
+
+                                        <a class="help-controll collapsed" role="button" data-toggle="collapse" href="#cover_help" aria-expanded="false" aria-controls="cover_help"><i class="material-icons">help</i></a>
+
+                                        <div class="help collapse" id="cover_help">
+
+                                            <div class="simulator cover_bg">
+                                                <div class="bg"></div>
+                                                <div class="el"></div>
+                                            </div>
+
+                                            <div class="help-text">
+                                                <p>The 'cover' method scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view</p>
+                                            </div>
+                                        </div>
+                                        <p><strong>Assigning a focal point to ensure that the targeted area will be always visible</strong></p>
+                                        <div class="cover_editing_container">
+                                            <h6>Click on the picture</h6>
+                                            <div class="object">
+                                                <span class="grid grid-1"/>
+                                                <span class="grid grid-2"/>
+                                                <span class="grid grid-3"/>
+                                                <span class="grid grid-4"/>
+                                                <span class="focus_point"/>
+                                                <div class="ui_info">X: <span class="x"/> Y: <span class="y"/></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="panel panel-default">
+                                <div class="panel-heading" role="tab" id="heading_contain">
+                                    <label role="button" class="radio inline"  data-toggle="collapse" data-parent="#bg_image_opt_accordition" href="#collapse_contain">
+                                        <input id="radio2" class="opt_select" name="rdo" type="radio"/>CONTAIN</label>
+                                </div>
+                                <div class="panel-collapse collapse" role="tabpanel" id="collapse_contain">
+                                    <div class="panel-body">
+                                        <a class="help-controll collapsed" role="button" data-toggle="collapse" href="#contain_help" aria-expanded="false" aria-controls="contain_help"><i class="material-icons">help</i></a>
+
+                                        <div class="help collapse" id="contain_help">
+
+                                            <div class="simulator contain_bg">
+                                                <div class="bg"></div>
+                                                <div class="el"></div>
+                                            </div>
+
+                                            <div class="help-text">
+                                                <p>Scale the image to the largest size such that both its width and its height can fit inside the content area</p>
+                                            </div>
+                                        </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 id="contain_repeat"  type="checkbox"/>
+                                                    </label>
+                                                </div>
+                                            </div>
+                                          </div>
+                                        </form>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="panel panel-default">
+                                <div class="panel-heading" role="tab" id="heading_custom">
+                                    <label role="button" class="radio inline"  data-toggle="collapse" data-parent="#bg_image_opt_accordition" href="#collapse_custom">
+                                        <input id="radio3" class="opt_select" name="rdo" type="radio"/>CUSTOM</label>
+                                </div>
+                                <div class="panel-collapse collapse" role="tabpanel" id="collapse_custom">
+                                    <div class="panel-body">
+                                        <form class="form-horizontal">
+                                            <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="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="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="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="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="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="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="custom_pos_x">Vertical</label>
+                                                    <div class="col-sm-5">
+                                                        <div class="input-group">
+                                                            <input type="number" min="0" max="100" class="form-control input-sm" id="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="custom_repeat">
+                                                    <option value="o_bg_img_no_repeat">No repeat</option>
+                                                    <option value="o_bg_img_repeat">Repeat both</option>
+                                                    <option value="o_bg_img_repeat_x">Repeat x</option>
+                                                    <option value="o_bg_img_repeat_y">Repeat y</option>
+                                                </select>
+                                            </fieldset>
+                                        </form>
+
+                                    </div>
+                                </div>
+                            </div> <!-- / .panel -->
+                        </div> <!-- / .panel-group -->
+                        <input id="pos_x" type="hidden"/>
+                        <input id="pos_y" type="hidden"/>
+                        <input id="bg_size" type="hidden"/>
+                    </div> <!-- /.modal-body -->
+
                     <div class="modal-footer">
-                        <button type="button" class="btn btn-primary save" t-if="!button">Save</button>
-                        <button type="button" class="btn btn-primary save" t-if="button"><t t-raw="button"/></button>
-                        <button type="button" class="btn hidden wait" disabled="disabled"/>
-                        <span> or </span>
-                        <a href="#" data-dismiss="modal" aria-hidden="true">Discard</a>
+                        <button class="btn btn-primary save" data-dismiss="modal" type="button">Save</button> or <a aria-hidden="true" data-dismiss="modal" href="#">Discard</a>
                     </div>
+
+                </div>
+            </div>
+        </div>
+    </t>
+    <t t-name="web_editor.dialog.background_position">
+        <div aria-hidden="true" class="modal website_modal web_editor-background_position" role="dialog" tabindex="-1">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
+                        <h3 class="modal-title">Background Image Options</h3>
+                    </div>
+                    <div class="modal-body">
+                        <div class="panel-group" id="bg_image_opt_accordition" role="tablist" aria-multiselectable="true">
+                            <div class="panel panel-default">
+                                <div class="panel-heading" role="tab" id="heading_cover">
+                                    <label role="button" class="radio inline"  data-toggle="collapse" data-parent="#bg_image_opt_accordition" href="#collapse_cover">
+                                        <input id="radio1" class="opt_select" name="rdo" type="radio"/>COVER</label>
+                                </div>
+                                <div class="panel-collapse collapse" role="tabpanel" id="collapse_cover">
+                                    <div class="panel-body">
+
+                                        <a class="help-controll collapsed" role="button" data-toggle="collapse" href="#cover_help" aria-expanded="false" aria-controls="cover_help"><i class="material-icons">help</i></a>
+
+                                        <div class="help collapse" id="cover_help">
+
+                                            <div class="simulator cover_bg">
+                                                <div class="bg"></div>
+                                                <div class="el"></div>
+                                            </div>
+
+                                            <div class="help-text">
+                                                <p>The 'cover' method scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view</p>
+                                            </div>
+                                        </div>
+                                        <p><strong>Assigning a focal point to ensure that the targeted area will be always visible</strong></p>
+                                        <div class="cover_editing_container">
+                                            <h6>Click on the picture</h6>
+                                            <div class="object">
+                                                <span class="grid grid-1"/>
+                                                <span class="grid grid-2"/>
+                                                <span class="grid grid-3"/>
+                                                <span class="grid grid-4"/>
+                                                <span class="focus_point"/>
+                                                <div class="ui_info">X: <span class="x"/> Y: <span class="y"/></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="panel panel-default">
+                                <div class="panel-heading" role="tab" id="heading_contain">
+                                    <label role="button" class="radio inline"  data-toggle="collapse" data-parent="#bg_image_opt_accordition" href="#collapse_contain">
+                                        <input id="radio2" class="opt_select" name="rdo" type="radio"/>CONTAIN</label>
+                                </div>
+                                <div class="panel-collapse collapse" role="tabpanel" id="collapse_contain">
+                                    <div class="panel-body">
+                                        <a class="help-controll collapsed" role="button" data-toggle="collapse" href="#contain_help" aria-expanded="false" aria-controls="contain_help"><i class="material-icons">help</i></a>
+
+                                        <div class="help collapse" id="contain_help">
+
+                                            <div class="simulator contain_bg">
+                                                <div class="bg"></div>
+                                                <div class="el"></div>
+                                            </div>
+
+                                            <div class="help-text">
+                                                <p>Scale the image to the largest size such that both its width and its height can fit inside the content area</p>
+                                            </div>
+                                        </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 id="contain_repeat"  type="checkbox"/>
+                                                    </label>
+                                                </div>
+                                            </div>
+                                          </div>
+                                        </form>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="panel panel-default">
+                                <div class="panel-heading" role="tab" id="heading_custom">
+                                    <label role="button" class="radio inline"  data-toggle="collapse" data-parent="#bg_image_opt_accordition" href="#collapse_custom">
+                                        <input id="radio3" class="opt_select" name="rdo" type="radio"/>CUSTOM</label>
+                                </div>
+                                <div class="panel-collapse collapse" role="tabpanel" id="collapse_custom">
+                                    <div class="panel-body">
+                                        <form class="form-horizontal">
+                                            <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="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="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="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="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="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="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="custom_pos_x">Vertical</label>
+                                                    <div class="col-sm-5">
+                                                        <div class="input-group">
+                                                            <input type="number" min="0" max="100" class="form-control input-sm" id="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="custom_repeat">
+                                                    <option value="o_bg_img_no_repeat">No repeat</option>
+                                                    <option value="o_bg_img_repeat">Repeat both</option>
+                                                    <option value="o_bg_img_repeat_x">Repeat x</option>
+                                                    <option value="o_bg_img_repeat_y">Repeat y</option>
+                                                </select>
+                                            </fieldset>
+                                        </form>
+
+                                    </div>
+                                </div>
+                            </div> <!-- / .panel -->
+                        </div> <!-- / .panel-group -->
+                        <input id="pos_x" type="hidden"/>
+                        <input id="pos_y" type="hidden"/>
+                        <input id="bg_size" type="hidden"/>
+                    </div> <!-- /.modal-body -->
+
+                    <div class="modal-footer">
+                        <button class="btn btn-primary save" data-dismiss="modal" type="button">Save</button> or <a aria-hidden="true" data-dismiss="modal" href="#">Discard</a>
+                    </div>
+
                 </div>
             </div>
         </div>
     </t>
     <t t-name="web_editor.dialog.media">
-        <div class="modal note-image-dialog" tabindex="-1" role="dialog" aria-hidden="true">
+        <div aria-hidden="true" class="modal note-image-dialog" role="dialog" tabindex="-1">
             <div class="modal-dialog select-media">
                 <div class="modal-content">
                     <div class="modal-header">
-                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+                        <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
                         <h3 class="modal-title">Select a Media</h3>
                     </div>
                     <div class="modal-body">
@@ -46,37 +380,34 @@
                             <li><a href="#editor-media-video" data-toggle="tab">Video</a></li>
                             <li class="search" style="float: right;">
                                 <ul class="pager mb0 mt0">
-                                    <li class="previous disabled"><a href="#">← Previous</a></li>
-                                    <li class="next disabled"><a href="#">Next →</a></li>
+                                    <li class="previous disabled">
+                                        <a href="#">← Previous</a>
+                                    </li>
+                                    <li class="next disabled">
+                                        <a href="#">Next →</a>
+                                    </li>
                                 </ul>
                             </li>
                             <li class="search" style="float: right;">
                                 <form action="#">
                                     <div class="form-group font-icons fa fa-search mb0">
-                                        <input type="search" class="form-control" id="icon-search"/>
+                                        <input class="form-control" id="icon-search" type="search"/>
                                     </div>
                                 </form>
                             </li>
                         </ul>
-
                         <!-- Tab panes -->
                         <div class="tab-content">
-                            <div class="tab-pane fade in active" id="editor-media-image">
-                            </div>
-                            <div class="tab-pane fade" id="editor-media-document">
-                            </div>
-                            <div class="tab-pane fade" id="editor-media-icon">
-                            </div>
-                            <div class="tab-pane fade" id="editor-media-video">
-                            </div>
+                            <div class="tab-pane fade in active" id="editor-media-image"/>
+                            <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 type="button" class="btn btn-primary save">Save</button>
-                        <button type="button" class="btn hidden wait" disabled="disabled"/>
-                        or
-                        <a href="#" data-dismiss="modal" aria-hidden="true">Discard</a>
-                    </div>
+                        <button class="btn btn-primary save" type="button">Save</button>
+                        <button class="btn hidden wait" disabled="disabled" type="button"/>or
+
+                        <a aria-hidden="true" data-dismiss="modal" href="#">Discard</a></div>
                 </div>
             </div>
         </div>
@@ -94,41 +425,43 @@
                         <input type="file" name="upload" t-att-accept="widget.accept" multiple="multiple" style="position: absolute; opacity: 0; width: 1px; height: 1px;"/>
                         <input type="hidden" name="disable_optimization" value=""/>
                         <div class="btn-group">
-                            <button type="button" class="btn btn-primary filepicker">Upload an image from your computer</button>
-                            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
-                                <span class="caret"></span>
+                            <button class="btn btn-primary filepicker" type="button">Upload an image from your computer</button>
+                            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button">
+                                <span class="caret"/>
                                 <span class="sr-only">Alternate Upload</span>
                             </button>
                             <ul class="dropdown-menu" role="menu">
-                                <li><a href="#" class="js_disable_optimization">Upload image without optimization</a></li>
+                                <li>
+                                    <a class="js_disable_optimization" href="#">Upload image without optimization</a>
+                                </li>
                             </ul>
                         </div>
-                        <button type="button" class="btn hidden wait" disabled="disabled">Uploading...</button>
+                        <button class="btn hidden wait" disabled="disabled" type="button">Uploading...</button>
                     </div>
                     <div>
-                        <span class="text-muted"> — or — </span>
+                        <span class="text-muted">— or — </span>
                         <label for="iamgeurl">Add an image URL</label>
                         <div class="form-group btn-group">
-                            <input type="text" name="url" class="form-control url pull-left" style="width: 320px;" id="iamgeurl" placeholder="http://openerp.com/logo.png"/>
+                            <input class="form-control url pull-left" id="iamgeurl" name="url" placeholder="http://openerp.com/logo.png" style="width: 320px;" type="text"/>
                             <button class="btn btn-default" type="submit">Add</button>
                         </div>
                     </div>
                 </div>
-                <input type="hidden" name="func"/>
+                <input name="func" type="hidden"/>
                 <div class="help-block"/>
                 <div class="existing-attachments">
                     <t t-call="web_editor.dialog.image.existing"/>
                 </div>
             </form>
         </div>
-        <iframe src="about:blank" name="fileframe" class="hidden"/>
+        <iframe class="hidden" name="fileframe" src="about:blank"/>
     </t>
     <t t-name="web_editor.dialog.image.existing">
-        <div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
+        <div aria-hidden="true" class="modal" role="dialog" tabindex="-1">
             <div class="modal-dialog select-image">
                 <div class="modal-content">
                     <div class="modal-header">
-                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+                        <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
                         <h3 class="modal-title">Select a Picture</h3>
                     </div>
                     <div class="modal-body has-error">
@@ -136,7 +469,7 @@
                         <div class="help-block"/>
                     </div>
                     <div class="modal-footer">
-                        <a href="#" data-dismiss="modal" aria-hidden="true">Discard</a>
+                        <a aria-hidden="true" data-dismiss="modal" href="#">Discard</a>
                     </div>
                 </div>
             </div>
@@ -144,9 +477,8 @@
     </t>
     <t t-name="web_editor.dialog.image.existing.content">
         <div class="existing-attachments">
-            <div class="row mt16" t-foreach="rows" t-as="row">
-                <div class="col-sm-2 existing-attachment-cell"
-                     t-foreach="row" t-as="attachment">
+            <div class="row mt16" t-as="row" t-foreach="rows">
+                <div class="col-sm-2 existing-attachment-cell" t-as="attachment" t-foreach="row">
                     <i class="fa fa-times existing-attachment-remove" t-att-data-id="attachment.id"/>
                     <div class="o_attachment_border"><div t-att-data-src="attachment.src" t-att-data-url="attachment.url" t-att-alt="attachment.name" t-att-title="attachment.name" t-att-data-id="attachment.id" t-att-data-mimetype="attachment.mimetype" class="o_image"/></div>
                 </div>
@@ -157,7 +489,7 @@
         <div class="help-block">
             <p>The image could not be deleted because it is used in the
                following pages or views:</p>
-            <ul t-foreach="views" t-as="view">
+            <ul t-as="view" t-foreach="views">
                 <li>
                     <a t-attf-href="/web#model=ir.ui.view&amp;id=#{view.id}">
                         <t t-esc="view.name"/>
@@ -166,52 +498,51 @@
             </ul>
         </div>
     </t>
-
     <t t-name="web_editor.discard">
-        <div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
+        <div aria-hidden="true" class="modal" role="dialog" tabindex="-1">
             <div class="modal-dialog">
                 <div class="modal-content">
                     <div class="modal-header">
-                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+                        <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</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>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 type="button" class="btn btn-danger">Discard</button>
-                        or
-                        <a href="#" data-dismiss="modal" aria-hidden="true">Cancel</a>
-                    </div>
+                        <button class="btn btn-danger" type="button">Discard</button>or
+
+                        <a aria-hidden="true" data-dismiss="modal" href="#">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 Alt and Title</t>
             <form action="#" class="form-horizontal">
                 <div class="form-group">
-                    <label for="alt" class="col-sm-2 control-label">Alt:</label>
-                    <div class="col-sm-9"><input id="alt" type="text" class="form-control" required="required" t-att-value="widget.alt"/></div>
+                    <label class="col-sm-2 control-label" for="alt">Alt:</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 for="title" class="col-sm-2 control-label">Title:</label>
-                    <div class="col-sm-9"><input id="title" type="text" class="form-control" required="required" t-att-value="widget.title"/></div>
+                    <label class="col-sm-2 control-label" for="title">Title:</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>
-
     <t t-name="web_editor.dialog.font-icons">
         <form action="#">
-            <input type="hidden" id="fa-icon"/>
-            <input type="hidden" id="fa-size" value="fa-1x"/>
+            <input id="fa-icon" type="hidden"/>
+            <input id="fa-size" type="hidden" value="fa-1x"/>
             <div class="font-icons-icons">
                 <t t-call="web_editor.dialog.font-icons.icons">
                     <t t-set="iconsParser" t-value="widget.iconsParser"/>
@@ -220,61 +551,40 @@
         </form>
     </t>
     <t t-name="web_editor.dialog.font-icons.icons">
-        <t t-foreach="iconsParser" t-as="data">
-          <span t-foreach="data.cssData" t-as="cssData"
-                t-attf-class="#{data.base} font-icons-icon #{cssData[2]}"
-                t-attf-data-alias=",#{cssData[3]},"
-                t-att-title="cssData[3].join(', ')"
-                t-att-data-id="cssData[2]"/>
+        <t t-as="data" t-foreach="iconsParser">
+            <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>
-
     <t t-name="web_editor.dialog.video">
         <form action="#" class="form-inline">
             <div class="well">
                 <div class="form-group btn-group">
                     <span class="text-muted pull-right" style="margin-left:10px; line-height: 2em;">(Youtube, Vimeo, Dailymotion)</span>
-                    <label for="urlvideo" style="width: 220px; line-height: 2em;" class="pull-left">Set a video URL</label>
-                    <input type="text"
-                        name="url"
-                        class="form-control url pull-left"
-                        style="width: 400px;"
-                        id="urlvideo"
-                        placeholder="//www.youtube.com/embed/yws1tbgNV7k"
-                        t-translation="off"/>
+                    <label class="pull-left" for="urlvideo" style="width: 220px; line-height: 2em;">Set a video URL</label>
+                    <input class="form-control url pull-left" id="urlvideo" name="url" placeholder="//www.youtube.com/embed/yws1tbgNV7k" style="width: 400px;" t-translation="off" type="text"/>
                     <button class="btn btn-default">Preview</button>
                 </div>
                 <div class="form-group btn-group">
-                    <label for="urlvideo" style="width: 220px; line-height: 2em;" class="pull-left"><span class="text-muted">— or —</span> Embed Video (HTML)</label>
-                    <input type="text"
-                        name="embed"
-                        class="form-control url pull-left"
-                        style="width: 400px;"
-                        id="embedvideo"
-                        placeholder='&lt;iframe src="//www.youtube.com/embed/yws1tbgNV7k"&gt;&lt;/iframe&gt;'
-                        t-translation="off"/>
+                    <label class="pull-left" for="urlvideo" style="width: 220px; line-height: 2em;">
+                        <span class="text-muted">— or —</span>Embed Video (HTML)</label>
+                    <input class="form-control url pull-left" id="embedvideo" name="embed" placeholder="&lt;iframe src=&quot;//www.youtube.com/embed/yws1tbgNV7k&quot;&gt;&lt;/iframe&gt;" style="width: 400px;" t-translation="off" type="text"/>
                     <button class="btn btn-default">Preview</button>
                 </div>
             </div>
-            
             <div id="video-preview" style="width: 450px; margin: 0 auto;">
                 <div class="media_iframe_video">
-                    <div class="media_iframe_video_size"></div>
-                    <iframe
-                        src=""
-                        frameborder="0"
-                        allowfullscreen="allowfullscreen"></iframe>
+                    <div class="media_iframe_video_size"/>
+                    <iframe allowfullscreen="allowfullscreen" frameborder="0" src=""/>
                 </div>
             </div>
-
             <div class="text-center mt32">
                 <div class="checkbox">
-                    <label><input type="checkbox" id="autoplay"/> Autoplay</label>
+                    <label>
+                        <input id="autoplay" type="checkbox"/>Autoplay</label>
                 </div>
             </div>
         </form>
     </t>
-
     <t t-name="web_editor.dialog.link">
         <t t-call="web_editor.dialog">
             <t t-set="title">Link to</t>
@@ -282,78 +592,85 @@
                 <div class="list-group">
                     <div class="form-group list-group-item active">
                         <h3 class="list-group-item-heading">
-                            <label for="link-new" class="control-label">
-                                Link Label
+                            <label class="control-label" for="link-new">Link Label
                             </label>
                         </h3>
-                        <input type="text" class="form-control" id="link-text" required="required"/>
+                        <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 type="checkbox" class="window-new"/>
-                                Open in new window
-                            </label>
+                                <input class="window-new" type="checkbox"/>Open in new window</label>
                         </div>
                         <h4 class="list-group-item-heading">
-                            <label for="link-external" class="control-label">
-                                URL or Email Address
+                            <label class="control-label" for="link-external">URL or Email Address
                             </label>
                         </h4>
-                        <input type="text" class="form-control url email-address url-source"
-                               id="link-external" placeholder="http://openerp.com"/>
+                        <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 class="col-sm-2 control-label">Style
                         </label>
                         <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">
+                                <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 value="" class="link-style" type="radio" name="link-style-type" checked="checked"/></label>
+                                        <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 value="btn-default" class="link-style" type="radio" name="link-style-type"/></label>
+                                        <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 value="btn-success" class="link-style" type="radio" name="link-style-type"/></label>
+                                        <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 value="btn-primary" class="link-style" type="radio" name="link-style-type"/></label>
+                                        <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 value="btn-info" class="link-style" type="radio" name="link-style-type"/></label>
+                                        <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 value="btn-warning" class="link-style" type="radio" name="link-style-type"/></label>
+                                        <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 value="btn-danger" class="link-style" type="radio" name="link-style-type"/></label>
+                                        <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 data-toggle="dropdown" class="btn btn-default" href="#">Size <span class="caret"></span></a>
-                                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+                                <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 value="btn-xs" class="link-style" type="radio" name="link-style-size"/></label>
+                                        <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 value="btn-sm" class="link-style" type="radio" name="link-style-size"/></label>
+                                        <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 value="" class="link-style" type="radio" name="link-style-size" checked="checked"/></label>
+                                        <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 value="btn-lg" class="link-style" type="radio" name="link-style-size"/></label>
+                                        <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>
@@ -362,12 +679,11 @@
                 </div>
                 <div class="form-horizontal link-style">
                     <div class="form-group">
-                        <label class="col-sm-2 control-label">
-                            Preview
+                        <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 id="link-preview" href="#"></a>
+                                <a href="#" id="link-preview"/>
                             </div>
                         </div>
                     </div>
-- 
cgit v1.2.3


From 6610d05549e347fbb548e606fa66cfb113df9e67 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Wed, 24 Feb 2016 13:13:12 +0100
Subject: [REF] web_editor,website,mass_mailing: JS/XML update

* Adapt DOM selectors
* Refactore dialog XMLs to have odoo styling
* New editor options (background-position, ...)
* Various improvements
---
 addons/web_editor/static/src/xml/editor.xml | 508 ++++++++--------------------
 1 file changed, 145 insertions(+), 363 deletions(-)

(limited to 'addons/web_editor/static/src/xml/editor.xml')

diff --git a/addons/web_editor/static/src/xml/editor.xml b/addons/web_editor/static/src/xml/editor.xml
index 3891e7caf89..765d3d15354 100644
--- a/addons/web_editor/static/src/xml/editor.xml
+++ b/addons/web_editor/static/src/xml/editor.xml
@@ -1,23 +1,19 @@
 <templates id="template" xml:space="preserve">
     <t t-name="web_editor.editorbar">
-        <div class="o_css_editor navbar navbar-fixed-top hidden-xs" id="web_editor-top-edit">
-            <div id="web_editor-toolbars" />
+        <div id="web_editor-top-edit" class="o_css_editor">
+            <div id="web_editor-toolbars"/>
             <form class="navbar-form text-muted">
-                <div id="web_editor-top-actions">
-                    <a class="btn btn-link btn-xs" data-action="cancel" href="#">
-                        <i class="material-icons">clear</i>DISCARD</a>
-                    <button class="btn full compl btn-xs" data-action="save" type="button">
-                        <i class="fa fa-floppy-o"></i>  SAVE</button>
-                </div>
+                <button type="button" class="btn btn-sm btn-default" data-action="cancel"><i class="fa fa-times"/> Discard</button>
+                <button type="button" class="btn btn-sm btn-primary" data-action="save"><i class="fa fa-floppy-o"/> Save</button>
             </form>
         </div>
     </t>
     <t t-name="web_editor.dialog">
-        <div aria-hidden="true" class="modal web_editor-dialog" role="dialog" tabindex="-1">
+        <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 aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
+                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                         <h3 class="modal-title">
                             <t t-esc="title"/>
                         </h3>
@@ -26,350 +22,129 @@
                         <t t-raw="0"/>
                     </div>
                     <div class="modal-footer">
-                        <button class="btn btn-primary save" t-if="!button" type="button">Save</button>
-                        <button class="btn btn-primary save" t-if="button" type="button">
-                            <t t-raw="button"/>
-                        </button>
+                        <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"/>
-                        <span>or </span>
-                        <a aria-hidden="true" data-dismiss="modal" href="#">Discard</a>
+                        <a class="btn btn-sm btn-default" data-dismiss="modal" href="#" aria-hidden="true">Discard</a>
                     </div>
                 </div>
             </div>
         </div>
     </t>
-    <t t-name="web_editor.dialog.background_position">
-        <div aria-hidden="true" class="modal website_modal web_editor-background_position" role="dialog" tabindex="-1">
-            <div class="modal-dialog">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
-                        <h3 class="modal-title">Background Image Options</h3>
-                    </div>
-                    <div class="modal-body">
-                        <div class="panel-group" id="bg_image_opt_accordition" role="tablist" aria-multiselectable="true">
-                            <div class="panel panel-default">
-                                <div class="panel-heading" role="tab" id="heading_cover">
-                                    <label role="button" class="radio inline"  data-toggle="collapse" data-parent="#bg_image_opt_accordition" href="#collapse_cover">
-                                        <input id="radio1" class="opt_select" name="rdo" type="radio"/>COVER</label>
-                                </div>
-                                <div class="panel-collapse collapse" role="tabpanel" id="collapse_cover">
-                                    <div class="panel-body">
-
-                                        <a class="help-controll collapsed" role="button" data-toggle="collapse" href="#cover_help" aria-expanded="false" aria-controls="cover_help"><i class="material-icons">help</i></a>
-
-                                        <div class="help collapse" id="cover_help">
-
-                                            <div class="simulator cover_bg">
-                                                <div class="bg"></div>
-                                                <div class="el"></div>
-                                            </div>
-
-                                            <div class="help-text">
-                                                <p>The 'cover' method scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view</p>
-                                            </div>
-                                        </div>
-                                        <p><strong>Assigning a focal point to ensure that the targeted area will be always visible</strong></p>
-                                        <div class="cover_editing_container">
-                                            <h6>Click on the picture</h6>
-                                            <div class="object">
-                                                <span class="grid grid-1"/>
-                                                <span class="grid grid-2"/>
-                                                <span class="grid grid-3"/>
-                                                <span class="grid grid-4"/>
-                                                <span class="focus_point"/>
-                                                <div class="ui_info">X: <span class="x"/> Y: <span class="y"/></div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="panel panel-default">
-                                <div class="panel-heading" role="tab" id="heading_contain">
-                                    <label role="button" class="radio inline"  data-toggle="collapse" data-parent="#bg_image_opt_accordition" href="#collapse_contain">
-                                        <input id="radio2" class="opt_select" name="rdo" type="radio"/>CONTAIN</label>
-                                </div>
-                                <div class="panel-collapse collapse" role="tabpanel" id="collapse_contain">
-                                    <div class="panel-body">
-                                        <a class="help-controll collapsed" role="button" data-toggle="collapse" href="#contain_help" aria-expanded="false" aria-controls="contain_help"><i class="material-icons">help</i></a>
-
-                                        <div class="help collapse" id="contain_help">
-
-                                            <div class="simulator contain_bg">
-                                                <div class="bg"></div>
-                                                <div class="el"></div>
-                                            </div>
-
-                                            <div class="help-text">
-                                                <p>Scale the image to the largest size such that both its width and its height can fit inside the content area</p>
-                                            </div>
-                                        </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 id="contain_repeat"  type="checkbox"/>
-                                                    </label>
-                                                </div>
-                                            </div>
-                                          </div>
-                                        </form>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="panel panel-default">
-                                <div class="panel-heading" role="tab" id="heading_custom">
-                                    <label role="button" class="radio inline"  data-toggle="collapse" data-parent="#bg_image_opt_accordition" href="#collapse_custom">
-                                        <input id="radio3" class="opt_select" name="rdo" type="radio"/>CUSTOM</label>
-                                </div>
-                                <div class="panel-collapse collapse" role="tabpanel" id="collapse_custom">
-                                    <div class="panel-body">
-                                        <form class="form-horizontal">
-                                            <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="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="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="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="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="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="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="custom_pos_x">Vertical</label>
-                                                    <div class="col-sm-5">
-                                                        <div class="input-group">
-                                                            <input type="number" min="0" max="100" class="form-control input-sm" id="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="custom_repeat">
-                                                    <option value="o_bg_img_no_repeat">No repeat</option>
-                                                    <option value="o_bg_img_repeat">Repeat both</option>
-                                                    <option value="o_bg_img_repeat_x">Repeat x</option>
-                                                    <option value="o_bg_img_repeat_y">Repeat y</option>
-                                                </select>
-                                            </fieldset>
-                                        </form>
-
-                                    </div>
-                                </div>
-                            </div> <!-- / .panel -->
-                        </div> <!-- / .panel-group -->
-                        <input id="pos_x" type="hidden"/>
-                        <input id="pos_y" type="hidden"/>
-                        <input id="bg_size" type="hidden"/>
-                    </div> <!-- /.modal-body -->
+    <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="modal-footer">
-                        <button class="btn btn-primary save" data-dismiss="modal" type="button">Save</button> or <a aria-hidden="true" data-dismiss="modal" href="#">Discard</a>
-                    </div>
+        <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>
-    </t>
-    <t t-name="web_editor.dialog.background_position">
-        <div aria-hidden="true" class="modal website_modal web_editor-background_position" role="dialog" tabindex="-1">
-            <div class="modal-dialog">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
-                        <h3 class="modal-title">Background Image Options</h3>
-                    </div>
-                    <div class="modal-body">
-                        <div class="panel-group" id="bg_image_opt_accordition" role="tablist" aria-multiselectable="true">
-                            <div class="panel panel-default">
-                                <div class="panel-heading" role="tab" id="heading_cover">
-                                    <label role="button" class="radio inline"  data-toggle="collapse" data-parent="#bg_image_opt_accordition" href="#collapse_cover">
-                                        <input id="radio1" class="opt_select" name="rdo" type="radio"/>COVER</label>
-                                </div>
-                                <div class="panel-collapse collapse" role="tabpanel" id="collapse_cover">
-                                    <div class="panel-body">
-
-                                        <a class="help-controll collapsed" role="button" data-toggle="collapse" href="#cover_help" aria-expanded="false" aria-controls="cover_help"><i class="material-icons">help</i></a>
-
-                                        <div class="help collapse" id="cover_help">
-
-                                            <div class="simulator cover_bg">
-                                                <div class="bg"></div>
-                                                <div class="el"></div>
-                                            </div>
-
-                                            <div class="help-text">
-                                                <p>The 'cover' method scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view</p>
-                                            </div>
-                                        </div>
-                                        <p><strong>Assigning a focal point to ensure that the targeted area will be always visible</strong></p>
-                                        <div class="cover_editing_container">
-                                            <h6>Click on the picture</h6>
-                                            <div class="object">
-                                                <span class="grid grid-1"/>
-                                                <span class="grid grid-2"/>
-                                                <span class="grid grid-3"/>
-                                                <span class="grid grid-4"/>
-                                                <span class="focus_point"/>
-                                                <div class="ui_info">X: <span class="x"/> Y: <span class="y"/></div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="panel panel-default">
-                                <div class="panel-heading" role="tab" id="heading_contain">
-                                    <label role="button" class="radio inline"  data-toggle="collapse" data-parent="#bg_image_opt_accordition" href="#collapse_contain">
-                                        <input id="radio2" class="opt_select" name="rdo" type="radio"/>CONTAIN</label>
-                                </div>
-                                <div class="panel-collapse collapse" role="tabpanel" id="collapse_contain">
-                                    <div class="panel-body">
-                                        <a class="help-controll collapsed" role="button" data-toggle="collapse" href="#contain_help" aria-expanded="false" aria-controls="contain_help"><i class="material-icons">help</i></a>
-
-                                        <div class="help collapse" id="contain_help">
-
-                                            <div class="simulator contain_bg">
-                                                <div class="bg"></div>
-                                                <div class="el"></div>
-                                            </div>
-
-                                            <div class="help-text">
-                                                <p>Scale the image to the largest size such that both its width and its height can fit inside the content area</p>
-                                            </div>
-                                        </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 id="contain_repeat"  type="checkbox"/>
-                                                    </label>
-                                                </div>
-                                            </div>
-                                          </div>
-                                        </form>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="panel panel-default">
-                                <div class="panel-heading" role="tab" id="heading_custom">
-                                    <label role="button" class="radio inline"  data-toggle="collapse" data-parent="#bg_image_opt_accordition" href="#collapse_custom">
-                                        <input id="radio3" class="opt_select" name="rdo" type="radio"/>CUSTOM</label>
-                                </div>
-                                <div class="panel-collapse collapse" role="tabpanel" id="collapse_custom">
-                                    <div class="panel-body">
-                                        <form class="form-horizontal">
-                                            <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="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="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="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="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="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="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="custom_pos_x">Vertical</label>
-                                                    <div class="col-sm-5">
-                                                        <div class="input-group">
-                                                            <input type="number" min="0" max="100" class="form-control input-sm" id="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="custom_repeat">
-                                                    <option value="o_bg_img_no_repeat">No repeat</option>
-                                                    <option value="o_bg_img_repeat">Repeat both</option>
-                                                    <option value="o_bg_img_repeat_x">Repeat x</option>
-                                                    <option value="o_bg_img_repeat_y">Repeat y</option>
-                                                </select>
-                                            </fieldset>
-                                        </form>
-
-                                    </div>
-                                </div>
-                            </div> <!-- / .panel -->
-                        </div> <!-- / .panel-group -->
-                        <input id="pos_x" type="hidden"/>
-                        <input id="pos_y" type="hidden"/>
-                        <input id="bg_size" type="hidden"/>
-                    </div> <!-- /.modal-body -->
+        <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>
 
-                    <div class="modal-footer">
-                        <button class="btn btn-primary save" data-dismiss="modal" type="button">Save</button> or <a aria-hidden="true" data-dismiss="modal" href="#">Discard</a>
+            <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>
                     </div>
-
                 </div>
-            </div>
+            </form>
         </div>
-    </t>
+        <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 aria-hidden="true" class="modal note-image-dialog" role="dialog" tabindex="-1">
-            <div class="modal-dialog select-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 aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
+                        <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">
@@ -378,7 +153,7 @@
                             <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" style="float: right;">
+                            <li class="search">
                                 <ul class="pager mb0 mt0">
                                     <li class="previous disabled">
                                         <a href="#">← Previous</a>
@@ -388,10 +163,11 @@
                                     </li>
                                 </ul>
                             </li>
-                            <li class="search" style="float: right;">
+                            <li class="search">
                                 <form action="#">
-                                    <div class="form-group font-icons fa fa-search mb0">
+                                    <div class="form-group">
                                         <input class="form-control" id="icon-search" type="search"/>
+                                        <span class="fa fa-search"/>
                                     </div>
                                 </form>
                             </li>
@@ -399,15 +175,16 @@
                         <!-- 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-primary save" type="button">Save</button>
-                        <button class="btn hidden wait" disabled="disabled" type="button"/>or
-
-                        <a aria-hidden="true" data-dismiss="modal" href="#">Discard</a></div>
+                        <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>
@@ -425,7 +202,7 @@
                         <input type="file" name="upload" t-att-accept="widget.accept" multiple="multiple" style="position: absolute; opacity: 0; width: 1px; height: 1px;"/>
                         <input type="hidden" name="disable_optimization" value=""/>
                         <div class="btn-group">
-                            <button class="btn btn-primary filepicker" type="button">Upload an image from your computer</button>
+                            <button class="btn btn-primary filepicker" type="button">Upload an image</button>
                             <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button">
                                 <span class="caret"/>
                                 <span class="sr-only">Alternate Upload</span>
@@ -447,7 +224,7 @@
                         </div>
                     </div>
                 </div>
-                <input name="func" type="hidden"/>
+                <input type="hidden" name="func"/>
                 <div class="help-block"/>
                 <div class="existing-attachments">
                     <t t-call="web_editor.dialog.image.existing"/>
@@ -457,11 +234,11 @@
         <iframe class="hidden" name="fileframe" src="about:blank"/>
     </t>
     <t t-name="web_editor.dialog.image.existing">
-        <div aria-hidden="true" class="modal" role="dialog" tabindex="-1">
+        <div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
             <div class="modal-dialog select-image">
                 <div class="modal-content">
                     <div class="modal-header">
-                        <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
+                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                         <h3 class="modal-title">Select a Picture</h3>
                     </div>
                     <div class="modal-body has-error">
@@ -469,7 +246,7 @@
                         <div class="help-block"/>
                     </div>
                     <div class="modal-footer">
-                        <a aria-hidden="true" data-dismiss="modal" href="#">Discard</a>
+                        <a data-dismiss="modal" href="#" aria-hidden="true">Discard</a>
                     </div>
                 </div>
             </div>
@@ -478,8 +255,8 @@
     <t t-name="web_editor.dialog.image.existing.content">
         <div class="existing-attachments">
             <div class="row mt16" t-as="row" t-foreach="rows">
-                <div class="col-sm-2 existing-attachment-cell" t-as="attachment" t-foreach="row">
-                    <i class="fa fa-times existing-attachment-remove" t-att-data-id="attachment.id"/>
+                <div class="col-sm-2 o_existing_attachment_cell" t-as="attachment" t-foreach="row">
+                    <i class="fa fa-times o_existing_attachment_remove" t-att-data-id="attachment.id"/>
                     <div class="o_attachment_border"><div t-att-data-src="attachment.src" t-att-data-url="attachment.url" t-att-alt="attachment.name" t-att-title="attachment.name" t-att-data-id="attachment.id" t-att-data-mimetype="attachment.mimetype" class="o_image"/></div>
                 </div>
             </div>
@@ -499,39 +276,37 @@
         </div>
     </t>
     <t t-name="web_editor.discard">
-        <div aria-hidden="true" class="modal" role="dialog" tabindex="-1">
+        <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 aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
+                        <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>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-danger" type="button">Discard</button>or
-
-                        <a aria-hidden="true" data-dismiss="modal" href="#">Cancel</a></div>
+                        <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 Alt and Title</t>
+            <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">Alt:</label>
+                    <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">Title:</label>
+                    <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>
@@ -541,8 +316,8 @@
     </t>
     <t t-name="web_editor.dialog.font-icons">
         <form action="#">
-            <input id="fa-icon" type="hidden"/>
-            <input id="fa-size" type="hidden" value="fa-1x"/>
+            <input type="hidden" id="fa-icon"/>
+            <input type="hidden" id="fa-size" value="fa-1x"/>
             <div class="font-icons-icons">
                 <t t-call="web_editor.dialog.font-icons.icons">
                     <t t-set="iconsParser" t-value="widget.iconsParser"/>
@@ -691,4 +466,11 @@
             </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>
 </templates>
-- 
cgit v1.2.3