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