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