diff options
Diffstat (limited to 'addons/web_editor/static/src/xml/editor.xml')
| -rw-r--r-- | addons/web_editor/static/src/xml/editor.xml | 231 |
1 files changed, 117 insertions, 114 deletions
diff --git a/addons/web_editor/static/src/xml/editor.xml b/addons/web_editor/static/src/xml/editor.xml index 3c3085bfe79..7bac85692e2 100644 --- a/addons/web_editor/static/src/xml/editor.xml +++ b/addons/web_editor/static/src/xml/editor.xml @@ -9,8 +9,8 @@ <div id="web_editor-top-edit"> <div id="web_editor-toolbars"/> <form class="navbar-form text-muted"> - <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> + <button type="button" class="btn btn-secondary" data-action="cancel"><i class="fa fa-times"/> Discard</button> + <button type="button" class="btn btn-primary" data-action="save"><i class="fa fa-floppy-o"/> Save</button> </form> </div> </t> @@ -29,16 +29,16 @@ <!--=================--> <!-- Alt Dialog (allows to change alt and title of page images) --> - <form t-name="web_editor.dialog.alt" action="#" class="form-horizontal"> - <div class="form-group"> - <label class="col-sm-3 control-label" for="alt">Description (alt tag)</label> - <div class="col-sm-8"> + <form t-name="web_editor.dialog.alt" action="#"> + <div class="form-group row"> + <label class="col-md-3 col-form-label" for="alt">Description (alt tag)</label> + <div class="col-md-8"> <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-3 control-label" for="title">Tooltip</label> - <div class="col-sm-8"> + <div class="form-group row"> + <label class="col-md-3 col-form-label" for="title">Tooltip</label> + <div class="col-md-8"> <input class="form-control" id="title" required="required" t-att-value="widget.title" type="text"/> </div> </div> @@ -47,30 +47,26 @@ <!-- Media Dialog (allows to choose an img/pictogram/video) --> <div t-name="web_editor.dialog.media"> <ul class="nav nav-tabs" role="tablist"> - <li class="active"><a role="tab" href="#editor-media-image" aria-controls="editor-media-image" data-toggle="tab" t-att-class="widget.noImages ? 'hidden' : ''">Image</a></li> - <li><a role="tab" href="#editor-media-document" aria-controls="editor-media-document" data-toggle="tab" t-att-class="widget.noDocuments ? 'hidden' : ''">Document</a></li> - <li><a role="tab" href="#editor-media-icon" aria-controls="editor-media-icon" data-toggle="tab" t-att-class="widget.noIcons ? 'hidden' : ''">Pictogram</a></li> - <li><a role="tab" href="#editor-media-video" aria-controls="editor-media-video" data-toggle="tab" t-att-class="widget.noVideos ? 'hidden' : ''">Video</a></li> - <li class="search pull-right"> - <ul class="pager mb0 mt0"> - <li class="previous"> - <a role="button" class="btn btn-default disabled" href="#"><i class="fa fa-angle-left"/> Previous</a> - </li> - <li class="next"> - <a role="button" class="btn btn-default disabled" href="#">Next <i class="fa fa-angle-right"/></a> - </li> - </ul> - </li> - <li class="search pull-right"> + <li class="nav-item"><a role="tab" href="#editor-media-image" aria-controls="editor-media-image" data-toggle="tab" t-attf-class="nav-link#{widget.noImages ? ' d-none' : ''}">Image</a></li> + <li class="nav-item"><a role="tab" href="#editor-media-document" aria-controls="editor-media-document" data-toggle="tab" t-attf-class="nav-link#{widget.noDocuments ? ' d-none' : ''}">Document</a></li> + <li class="nav-item"><a role="tab" href="#editor-media-icon" aria-controls="editor-media-icon" data-toggle="tab" t-attf-class="nav-link#{widget.noIcons ? ' d-none' : ''}">Pictogram</a></li> + <li class="nav-item"><a role="tab" href="#editor-media-video" aria-controls="editor-media-video" data-toggle="tab" t-attf-class="nav-link#{widget.noVideos ? ' d-none' : ''}">Video</a></li> + <li class="nav-item ml-auto search"> <div class="form-group"> <input class="form-control" id="icon-search" type="search"/> <span class="fa fa-search" title="Search" role="img" aria-label="Search"/> </div> </li> + <li class="nav-item search"> + <div class="btn-group"> + <a role="button" class="btn btn-secondary disabled previous" href="#"><i class="fa fa-angle-left"/> Previous</a> + <a role="button" class="btn btn-secondary disabled next" href="#">Next <i class="fa fa-angle-right"/></a> + </div> + </li> </ul> <!-- Tab panes --> <div class="tab-content"> - <div role="tabpanel" class="tab-pane fade in active" id="editor-media-image"/> + <div role="tabpanel" class="tab-pane fade" id="editor-media-image"/> <div role="tabpanel" class="tab-pane fade" id="editor-media-document"/> <div role="tabpanel" class="tab-pane fade" id="editor-media-icon"/> <div role="tabpanel" class="tab-pane fade" id="editor-media-video"/> @@ -88,37 +84,36 @@ <input type="hidden" name="filters" t-att-value="widget.firstFilters.join('_')"/> <input t-if="widget.options.res_id" type="hidden" name="res_id" t-att-value="widget.options.res_id"/> <input t-if="widget.options.res_model" type="hidden" name="res_model" t-att-value="widget.options.res_model"/> - <div class="well"> - <div class="form-group pull-left"> - <input type="file" class="hidden" name="upload" t-att-accept="widget.accept" multiple="multiple"/> - <input type="hidden" name="disable_optimization" value=""/> - <div class="btn-group"> - <button class="btn btn-primary o_upload_image_button" 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> - </button> - <ul class="dropdown-menu" role="menu"> - <li> - <a role="menuitem" class="o_upload_image_button_no_optimization">Upload image without optimization</a> - </li> - </ul> - </div> - </div> - <div> - <span class="text-muted">— or —</span> - <label for="imageurl">Add an image URL</label> - <div class="form-group btn-group"> - <input type="text" class="form-control url pull-left" id="imageurl" name="url" placeholder="https://www.odoo.com/logo.png" style="width: 250px;"/> - <button type="button" class="btn btn-default o_upload_image_url_button" disabled="disabled">Add</button> + <div class="card"> + <div class="card-body"> + <div class="form-inline"> + <input type="file" class="d-none" name="upload" t-att-accept="widget.accept" multiple="multiple"/> + <input type="hidden" name="disable_optimization" value=""/> + <div class="btn-group"> + <button class="btn btn-primary o_upload_image_button" type="button">Upload an image</button> + <button class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" type="button"> + <span class="sr-only">Alternate Upload</span> + </button> + <div class="dropdown-menu" role="menu"> + <a role="menuitem" class="dropdown-item o_upload_image_button_no_optimization">Upload image without optimization</a> + </div> + </div> + <span class="text-muted">— or —</span> + <label for="imageurl">Add an image URL</label> + <div class="input-group"> + <input type="text" class="form-control url" id="imageurl" name="url" placeholder="https://www.odoo.com/logo.png" style="width: 250px;"/> + <div class="input-group-append"> + <button type="button" class="btn btn-secondary o_upload_image_url_button" disabled="disabled">Add</button> + </div> + </div> </div> </div> </div> - <div class="help-block"/> + <div class="form-text"/> <div class="existing-attachments"> <t t-call="web_editor.dialog.image.existing"/> </div> - <iframe class="hidden" name="fileframe"/> + <iframe class="d-none" name="fileframe"/> </form> </t> <t t-name="web_editor.dialog.image.existing"> @@ -129,9 +124,9 @@ <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button> <h3 class="modal-title">Select a Picture</h3> </header> - <main class="modal-body has-error"> + <main class="modal-body o_has_error"> <div class="existing-attachments"/> - <div class="help-block"/> + <div class="form-text"/> </main> <footer class="modal-footer"> <a data-dismiss="modal" href="#" aria-label="Discard">Discard</a> @@ -143,7 +138,7 @@ <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 o_existing_attachment_cell" t-as="attachment" t-foreach="row"> + <div class="col-2 o_existing_attachment_cell" t-as="attachment" t-foreach="row"> <i t-if="attachment.res_model === 'ir.ui.view'" class="fa fa-times o_existing_attachment_remove" title="This file is a public view attachment" role="img" aria-label="This file is a public view attachment" t-att-data-id="attachment.id"/> <i t-else="" class="fa fa-times o_existing_attachment_remove" title="This file is attached to the current record" role="img" aria-label="This file is attached to the current record" t-att-data-id="attachment.id"/> <div class="o_attachment_border" t-att-style="attachment.res_model === 'ir.ui.view' ? null : 'border: 1px solid #5cb85c;'"><div t-att-data-src="attachment.src" t-att-data-url="attachment.url" role="img" t-att-aria-label="attachment.name" t-att-title="attachment.name" t-att-data-id="attachment.id" t-att-data-mimetype="attachment.mimetype" class="o_image o_image_loading"/></div> @@ -152,7 +147,7 @@ </div> </t> <t t-name="web_editor.dialog.image.existing.error"> - <div class="help-block"> + <div class="form-text"> <p>The image could not be deleted because it is used in the following pages or views:</p> <ul t-as="view" t-foreach="views"> @@ -187,18 +182,18 @@ </t> <!-- Video choosing part of the Media Dialog --> - <t t-name="web_editor.dialog.video"> - <form action="#" class="form-inline well"> + <div t-name="web_editor.dialog.video" class="card"> + <form action="#" class="form-inline card-body"> <div class="o_video_dialog_form"> <div class="form-group" id="o_video_form_group"> <label class="mt8" for="o_video_text">Video code <small class="text-muted">(URL or Embed)</small></label> <textarea class="form-control url" id="o_video_text" placeholder="Copy-paste your URL or embed code here"/> - <label class="control-label o_validate_feedback" for="o_video_text"><i class="fa fa-check" role="img" aria-label="Checked" title="Checked"/><i class="fa fa-exclamation-triangle" role="img" aria-label="Attention" title="Attention"/></label> + <label class="col-form-label o_validate_feedback" for="o_video_text"><i class="fa fa-check" role="img" aria-label="Checked" title="Checked"/><i class="fa fa-exclamation-triangle" role="img" aria-label="Attention" title="Attention"/></label> </div> <div class="text-right"> <small class="text-muted">Accepts <b><i>Youtube</i></b>, <b><i>Instagram</i></b>, <b><i>Vine.co</i></b>, <b><i>Vimeo</i></b>, <b><i>Dailymotion</i></b> and <b><i>Youku</i></b> videos</small> </div> - <div class="o_video_dialog_options hidden mt48"> + <div class="o_video_dialog_options d-none mt48"> <small class="text-muted">Options</small> <ul class="list-group"> <li class="list-group-item o_yt_option o_vim_option o_dm_option"> @@ -226,35 +221,35 @@ </div> </div> <div id="video-preview"> - <div class="o_video_dialog_preview_text small mt16 mb8 hidden">Preview</div> + <div class="o_video_dialog_preview_text small mt16 mb8 d-none">Preview</div> <div class="media_iframe_video"> <div class="media_iframe_video_size"/> <iframe class="o_video_dialog_iframe" allowfullscreen="allowfullscreen" frameborder="0" src=""/> </div> </div> </form> - </t> + </div> <!-- Link Dialog (allows to choose a style and content for a link on the page) --> <div t-name="web_editor.dialog.link" class="o_link_dialog"> <div class="row"> - <form class="col-md-8 form-horizontal"> - <div t-attf-class="form-group#{widget.needLabel ? '' : ' hidden'}"> - <label class="control-label col-sm-3" for="o_link_dialog_label_input">Link Label</label> - <div class="col-sm-9"> + <form class="col-lg-8"> + <div t-attf-class="form-group row#{widget.needLabel ? '' : ' d-none'}"> + <label class="col-form-label col-md-3" for="o_link_dialog_label_input">Link Label</label> + <div class="col-md-9"> <input type="text" name="label" class="form-control" id="o_link_dialog_label_input" required="required" t-att-value="widget.data.text"/> </div> </div> - <div class="form-group"> - <label class="control-label col-sm-3" for="o_link_dialog_url_input">URL or Email</label> - <div class="col-sm-9"> + <div class="form-group row"> + <label class="col-form-label col-md-3" for="o_link_dialog_url_input">URL or Email</label> + <div class="col-md-9"> <input type="text" name="url" class="form-control" id="o_link_dialog_url_input" required="required"/> </div> </div> - <div class="form-group"> - <label class="control-label col-sm-3">Size</label> - <div class="col-sm-9"> - <select name="link_style_size" class="form-control col-sm-3 link-style"> + <div class="form-group row"> + <label class="col-form-label col-md-3">Size</label> + <div class="col-md-9"> + <select name="link_style_size" class="form-control col-md-3 link-style"> <option value="xs">Extra Small</option> <option value="sm">Small</option> <option value="" selected="selected">Medium</option> @@ -262,26 +257,26 @@ </select> </div> </div> - <div class="form-group"> - <label class="control-label col-sm-3">Color</label> - <div class="col-sm-9"> + <div class="form-group row"> + <label class="col-form-label col-md-3">Color</label> + <div class="col-md-9"> <div class="o_link_dialog_color"> <label role="button" t-attf-class="o_link_dialog_color_item o_btn_preview btn btn-link text-center" data-color=""> <span>L</span> - <input class="hidden link-style" name="link_style_color" type="radio" value=""/> + <input class="d-none link-style" name="link_style_color" type="radio" value=""/> <i class="fa"/> </label> - <t t-foreach="['primary', 'default', 'success', 'info', 'warning', 'danger', 'alpha', 'beta', 'gamma', 'delta', 'epsilon']" t-as="color"> + <t t-foreach="['primary', 'secondary', 'success', 'info', 'warning', 'danger', 'alpha', 'beta', 'gamma', 'delta', 'epsilon']" t-as="color"> <label role="button" t-attf-class="o_link_dialog_color_item o_btn_preview btn btn-#{color}" t-attf-aria-label="Color for #{color}" t-attf-title="Color for #{color}"> - <input type="radio" name="link_style_color" class="hidden link-style" t-att-value="color"/> + <input type="radio" name="link_style_color" class="d-none link-style" t-att-value="color"/> <i class="fa"/> </label> </t> </div> </div> </div> - <div class="form-group"> - <div class="col-sm-offset-3 col-sm-9"> + <div class="form-group row"> + <div class="offset-md-3 col-md-9"> <label class="o_switch"> <input type="checkbox" name="is_new_window" t-att-checked="widget.data.isNewWindow ? 'checked' : undefined"/> <span/> @@ -290,7 +285,7 @@ </div> </div> </form> - <div class="col-md-4 o_link_dialog_preview"> + <div class="col-lg-4 o_link_dialog_preview"> <div class="form-group text-center"> <label>Preview</label> <div style="overflow: auto; max-width: 100%; max-height: 200px;"> @@ -313,31 +308,31 @@ </div> <t t-else=""> <div class="o_crop_area"> - <img class="img img-responsive o_cropper_image" t-att-src="widget.imageData.originalSrc"/> + <img class="img img-fluid o_cropper_image" t-att-src="widget.imageData.originalSrc"/> </div> <div class="o_crop_options text-center mt16"> <div class="btn-group" title="Aspect Ratio" data-toggle="buttons"> <t t-foreach="widget.aspectRatioList" t-as="ratio"> <t t-set="is_active" t-value="ratio[1] === widget.imageData.aspectRatio"/> - <a href="#" t-attf-class="btn btn-default#{is_active and ' active' or ''}" data-event="ratio" t-att-data-label="ratio[1]" t-att-data-value="ratio[2]"> + <a href="#" t-attf-class="btn btn-secondary#{is_active and ' active' or ''}" data-event="ratio" t-att-data-label="ratio[1]" t-att-data-value="ratio[2]"> <t t-esc="ratio[0]"/> </a> </t> </div> <div class="btn-group" role="group"> - <a href="#" class="btn btn-default" title="Zoom In" data-event="zoom" data-value="0.1"><i class="fa fa-search-plus"/></a> - <a href="#" class="btn btn-default" title="Zoom Out" data-event="zoom" data-value="-0.1"><i class="fa fa-search-minus"/></a> + <a href="#" class="btn btn-secondary" title="Zoom In" data-event="zoom" data-value="0.1"><i class="fa fa-search-plus"/></a> + <a href="#" class="btn btn-secondary" title="Zoom Out" data-event="zoom" data-value="-0.1"><i class="fa fa-search-minus"/></a> </div> <div class="btn-group" role="group"> - <a href="#" class="btn btn-default" title="Rotate Left" data-event="rotate" data-value="-45"><i class="fa fa-rotate-left"/></a> - <a href="#" class="btn btn-default" title="Rotate Right" data-event="rotate" data-value="45"><i class="fa fa-rotate-right"/></a> + <a href="#" class="btn btn-secondary" title="Rotate Left" data-event="rotate" data-value="-45"><i class="fa fa-rotate-left"/></a> + <a href="#" class="btn btn-secondary" title="Rotate Right" data-event="rotate" data-value="45"><i class="fa fa-rotate-right"/></a> </div> <div class="btn-group" role="group"> - <a href="#" class="btn btn-default" title="Flip Horizontal" data-event="flip" data-value="horizontal" data-x="1"><i class="fa fa-arrows-h"/></a> - <a href="#" class="btn btn-default" title="Flip Vertical" data-event="flip" data-value="vertical" data-y="1"><i class="fa fa-arrows-v"/></a> + <a href="#" class="btn btn-secondary" title="Flip Horizontal" data-event="flip" data-value="horizontal" data-x="1"><i class="fa fa-arrows-h"/></a> + <a href="#" class="btn btn-secondary" title="Flip Vertical" data-event="flip" data-value="vertical" data-y="1"><i class="fa fa-arrows-v"/></a> </div> <div class="btn-group" role="group"> - <a href="#" class="btn btn-default" title="Reset Image" data-event="reset"><i class="fa fa-refresh"/> Reset Image</a> + <a href="#" class="btn btn-secondary" title="Reset Image" data-event="reset"><i class="fa fa-refresh"/> Reset Image</a> </div> </div> </t> @@ -367,10 +362,10 @@ </div> </div> <div class="o_bg_img_opt" data-value="contain"> - <form class="form-horizontal"> - <div class="form-group"> - <label class="col-sm-2 control-label" for="repeatInput">Repeat</label> - <div class="col-sm-5"> + <form> + <div class="form-group row"> + <label class="col-md-2 col-form-label" for="repeatInput">Repeat</label> + <div class="col-md-5"> <div class="checkbox"> <label> <input type="checkbox" id="o_bg_img_opt_contain_repeat"/> @@ -380,25 +375,29 @@ </div> </form> </div> - <form class="o_bg_img_opt form-horizontal" data-value="custom"> + <form class="o_bg_img_opt" 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="form-group row"> + <label class="col-md-3 col-form-label" for="o_bg_img_opt_custom_size_x">Background width</label> + <div class="col-md-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> + <input type="number" min="0" max="100" class="form-control form-control-sm" id="o_bg_img_opt_custom_size_x" placeholder="auto"/> + <div class="input-group-append"> + <div class="input-group-text">%</div> + </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="form-group row"> + <label class="col-md-3 col-form-label" for="o_bg_img_opt_custom_size_y">Background height</label> + <div class="col-md-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> + <input type="number" min="0" max="100" class="form-control form-control-sm" id="o_bg_img_opt_custom_size_y" placeholder="auto"/> + <div class="input-group-append"> + <div class="input-group-text">%</div> + </div> </div> </div> </div> @@ -406,21 +405,25 @@ <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="form-group row"> + <label class="col-md-3 col-form-label" for="o_bg_img_opt_custom_pos_x">Horizontal</label> + <div class="col-md-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> + <input type="number" min="0" max="100" class="form-control form-control-sm" id="o_bg_img_opt_custom_pos_x" placeholder="auto"/> + <div class="input-group-append"> + <div class="input-group-text">%</div> + </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="form-group row"> + <label class="col-md-3 col-form-label" for="o_bg_img_opt_custom_pos_y">Vertical</label> + <div class="col-md-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> + <input type="number" min="0" max="100" class="form-control form-control-sm" id="o_bg_img_opt_custom_pos_y" placeholder="auto"/> + <div class="input-group-append"> + <div class="input-group-text">%</div> + </div> </div> </div> </div> |