366 lines
24 KiB
XML
366 lines
24 KiB
XML
<?xml version="1.0" encoding="utf-8"?>
|
|
<templates id="template" xml:space="preserve">
|
|
|
|
<t t-name="web_editor.Wysiwyg">
|
|
<div style="display: contents;" t-ref="toolbar">
|
|
<Toolbar t-props="this.state.toolbarProps" t-if="this.state.showToolbar"/>
|
|
</div>
|
|
<div style="display: contents;" t-ref="imageCrop">
|
|
<ImageCrop t-props="this.imageCropProps"/>
|
|
</div>
|
|
<div t-ref="el"/>
|
|
<!--
|
|
trigger_up does not use .bind as this somehow bypasses patches to it
|
|
and currently the test snippets_all_drag_and_drop patches it.
|
|
-->
|
|
<div t-ref="snippets-menu-container">
|
|
<t t-if="this.state.showSnippetsMenu" t-component="this.snippetsMenuComponent"
|
|
options="this.snippetsMenuOptions"
|
|
folded="this.state.snippetsMenuFolded"
|
|
setCSSVariables.bind="this.setCSSVariables"
|
|
trigger_up="(ev) => this._trigger_up(ev)"
|
|
mountedProm="this.state.snippetsMenuMountedProm"
|
|
bus="this.snippetsMenuBus"
|
|
/>
|
|
</div>
|
|
</t>
|
|
|
|
<!--=================-->
|
|
<!-- Edition Dialogs -->
|
|
<!--=================-->
|
|
|
|
<!-- Link Dialog (allows to choose a style and content for a link on the page) -->
|
|
<div t-name="web_editor.LinkDialog">
|
|
<Dialog size="'xl'" title.translate="Insert a Link / Button">
|
|
<div class="o_link_dialog">
|
|
<div class="row" t-ref="linkComponentWrapper">
|
|
<form class="col-lg-8">
|
|
<div t-attf-class="mb-3 row#{props.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-ref="inputText"/>
|
|
</div>
|
|
</div>
|
|
<div t-attf-class="mb-3 row o_url_input#{state.isButton ? ' d-none' : ''}">
|
|
<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" t-ref="inputUrl" t-on-keydown="onUrlKeydown"/>
|
|
<div class="form-check o_strip_domain d-none">
|
|
<input type="checkbox" id="o_link_dialog_url_strip_domain" checked="checked" class="form-check-input"/>
|
|
<label for="o_link_dialog_url_strip_domain" class="form-check-label fw-normal">
|
|
Autoconvert to relative link
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3 row">
|
|
<label class="col-form-label col-md-3">Style</label>
|
|
<div class="col-md-9 d-flex align-items-center">
|
|
<div t-attf-class="#{this.colorCombinationClass ? ('p-2 ' + this.colorCombinationClass) : ''}">
|
|
<select name="link_style_color" class="form-select link-style">
|
|
<t t-foreach="this.colorsData" t-as="colorData" t-key="colorData.type">
|
|
<t t-if="colorData.type !== 'custom'">
|
|
<option t-att-value="colorData.type" t-attf-class="o_btn_preview dropdown-item">
|
|
<span t-esc="colorData.label"/>
|
|
</option>
|
|
</t>
|
|
</t>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="o_link_dialog_button_opts_collapse" class="collapse">
|
|
<div class="mb-3 row">
|
|
<label class="col-form-label col-md-3">Size</label>
|
|
<div class="col-md-9">
|
|
<select name="link_style_size" class="form-select link-style">
|
|
<option value="sm">Small</option>
|
|
<option value="" selected="selected">Medium</option>
|
|
<option value="lg">Large</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3 row">
|
|
<label class="col-form-label col-md-3">Layout</label>
|
|
<div class="col-md-9">
|
|
<select name="link_style_shape" class="form-select link-style">
|
|
<option value="" selected="selected">Default</option>
|
|
<option value="rounded-circle">Default + Rounded</option>
|
|
<option value="outline">Outline</option>
|
|
<option value="outline,rounded-circle">Outline + Rounded</option>
|
|
<option value="fill">Fill</option>
|
|
<option value="fill,rounded-circle">Fill + Rounded</option>
|
|
<option value="flat">Flat</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3 row" t-if="!state.isButton and !props.forceNewWindow">
|
|
<div class="offset-md-3 col-md-9">
|
|
<label class="o_switch">
|
|
<input type="checkbox" name="is_new_window" t-att-checked="this.initialNewWindow ? 'checked' : undefined"/>
|
|
<span/>
|
|
Open in new window
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<div class="col-lg-4 o_link_dialog_preview">
|
|
<div class="mb-3 text-center">
|
|
<label>Preview</label>
|
|
<div t-attf-class="#{this.colorCombinationClass ? ('p-2 ' + this.colorCombinationClass) : ''}"
|
|
style="overflow-x: auto; max-width: 100%; max-height: 200px;">
|
|
<a href="#" id="link-preview" aria-label="Preview" title="Preview"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<t t-set-slot="footer">
|
|
<button class="btn btn-primary" t-on-click="this.onSave" data-hotkey="c">Apply</button>
|
|
<button class="btn btn-secondary" t-on-click="this.onDiscard" data-hotkey="j">Discard</button>
|
|
</t>
|
|
</div>
|
|
</Dialog>
|
|
</div>
|
|
|
|
<we-customizeblock-option t-name="web_editor.LinkTools">
|
|
<div style="display: contents" t-ref="linkComponentWrapper">
|
|
<we-row id="url_row" t-attf-class="#{state.isButton ? ' d-none' : ''}">
|
|
<we-input class="o_we_user_value_widget o_we_sublevel_1">
|
|
<we-title class="o_short_title"></we-title>
|
|
<div class="o_url_input">
|
|
<input name="url" id="o_link_dialog_url_input" type="text" placeholder="Your URL"/>
|
|
<we-button class="o_we_user_value_widget fa fa-file" t-on-click="this.openDocumentDialog" data-tooltip="Link to an uploaded document"></we-button>
|
|
</div>
|
|
</we-input>
|
|
</we-row>
|
|
<we-row class="o_strip_domain d-none" t-attf-class="#{state.isButton ? ' d-none' : ''}">
|
|
<we-button class="o_we_user_value_widget o_we_checkbox_wrapper o_we_sublevel_1 active">
|
|
<we-title class="o_long_title">Autoconvert to Relative Link</we-title>
|
|
<div class="o_switch">
|
|
<we-checkbox name="do_strip_domain"/>
|
|
</div>
|
|
</we-button>
|
|
</we-row>
|
|
<we-row t-attf-class="o_we_sublevel_1 {{props.needLabel ? '' : 'd-none'}}">
|
|
<we-title>Label</we-title>
|
|
<we-input class="o_we_user_value_widget">
|
|
<div>
|
|
<input name="label" id="o_link_dialog_label_input" type="text"/>
|
|
</div>
|
|
</we-input>
|
|
</we-row>
|
|
<we-row>
|
|
<we-select class="o_we_user_value_widget o_we_sublevel_1">
|
|
<we-title>Style</we-title>
|
|
<div class="dropdown">
|
|
<button class="dropdown-toggle" data-bs-toggle="dropdown" tabindex="-1" aria-expanded="false">
|
|
<we-toggler title="Link Style"/>
|
|
</button>
|
|
<we-selection-items class="dropdown-menu" name="link_style_color">
|
|
<t t-foreach="this.colorsData" t-as="colorData" t-key="colorData.type">
|
|
<we-button class="dropdown-item" href="#" t-att-data-value="colorData.type">
|
|
<t t-esc="colorData.label"/>
|
|
</we-button>
|
|
</t>
|
|
</we-selection-items>
|
|
<span class="o_we_dropdown_caret"></span>
|
|
</div>
|
|
</we-select>
|
|
</we-row>
|
|
<we-row class="link-custom-color link-custom-color-text" t-att-class="{'d-none': !state.showLinkCustomColor}">
|
|
<we-select title="Color" class="o_we_user_value_widget o_we_so_color_palette o_we_sublevel_2">
|
|
<we-title>Text Color</we-title>
|
|
<div class="dropdown">
|
|
<span data-bs-toggle="dropdown" data-css-property="color" class="o_we_color_preview"></span>
|
|
<we-selection-items class="dropdown-menu" name="link_text_color">
|
|
<ColorPalette
|
|
selectedColor="colorpickerProps['color'].selectedColor"
|
|
excluded="['transparent_grayscale']"
|
|
document="this.props.wysiwyg.options.document"
|
|
onSetColorNames="(colorNames) => this._onColorpaletteSetColorNames('color', colorNames)"
|
|
onColorHover="(params) => this._colorpaletteApply('color', params)"
|
|
onColorLeave="(params) => this._colorpaletteApply('color', params)"
|
|
onColorPicked="(params) => this._onColorpaletteColorPicked('color', params)"
|
|
onCustomColorPicked="(params) => this._onColorpaletteColorPicked('color', params)"
|
|
getTemplate="this.props.getColorpickerTemplate"
|
|
/>
|
|
</we-selection-items>
|
|
</div>
|
|
</we-select>
|
|
</we-row>
|
|
<we-row class="link-custom-color link-custom-color-fill" t-att-class="{'d-none': !state.showLinkCustomColor}">
|
|
<we-select title="Color" class="o_we_user_value_widget o_we_so_color_palette o_we_sublevel_2">
|
|
<we-title>Fill Color</we-title>
|
|
<div class="dropdown">
|
|
<span data-bs-toggle="dropdown" data-css-property="background-color" class="o_we_color_preview"></span>
|
|
<we-selection-items class="dropdown-menu" name="link_fill_color">
|
|
<ColorPalette
|
|
selectedColor="colorpickerProps['background-color'].selectedColor"
|
|
excluded="['transparent_grayscale']"
|
|
document="this.props.wysiwyg.options.document"
|
|
withGradients="true"
|
|
onSetColorNames="(colorNames) => this._onColorpaletteSetColorNames('background-color', colorNames)"
|
|
onColorHover="(params) => this._colorpaletteApply('background-color', params)"
|
|
onColorLeave="(params) => this._colorpaletteApply('background-color', params)"
|
|
onColorPicked="(params) => this._onColorpaletteColorPicked('background-color', params)"
|
|
onCustomColorPicked="(params) => this._onColorpaletteColorPicked('background-color', params)"
|
|
getTemplate="this.props.getColorpickerTemplate"
|
|
/>
|
|
</we-selection-items>
|
|
</div>
|
|
</we-select>
|
|
</we-row>
|
|
<we-row class="link-custom-color link-custom-color-border o_we_sublevel_2" t-att-class="{'d-none': !state.showLinkCustomColor}">
|
|
<we-title>Border</we-title>
|
|
<div>
|
|
<we-input class="o_we_user_value_widget" title="Border Width">
|
|
<div class="o_custom_border_width_input">
|
|
<input name="custom_border_width" type="number" class="text-end" size="2"/>
|
|
<span>px</span>
|
|
</div>
|
|
</we-input>
|
|
<we-select class="o_we_user_value_widget" title="Border Style">
|
|
<div class="dropdown">
|
|
<button class="dropdown-toggle"
|
|
data-bs-toggle="dropdown" title="" tabindex="-1"
|
|
data-bs-original-title="Link Border Style" aria-expanded="false">
|
|
<we-toggler/>
|
|
</button>
|
|
<we-selection-items class="dropdown-menu" name="link_border_style">
|
|
<we-button title="Solid" class="dropdown-item" data-value="solid"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: solid;"/></we-button>
|
|
<we-button title="Dashed" class="dropdown-item" data-value="dashed"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: dashed;"/></we-button>
|
|
<we-button title="Dotted" class="dropdown-item" data-value="dotted"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: dotted;"/></we-button>
|
|
<we-button title="Double" class="dropdown-item" data-value="double"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: double; border-left: none; border-right: none;"/></we-button>
|
|
</we-selection-items>
|
|
</div>
|
|
</we-select>
|
|
<we-select title="Border Color" class="o_we_user_value_widget o_we_so_color_palette">
|
|
<div class="dropdown">
|
|
<span data-bs-toggle="dropdown" data-css-property="border-color" class="o_we_color_preview"></span>
|
|
<we-selection-items class="dropdown-menu" name="link_border_color">
|
|
<ColorPalette
|
|
selectedColor="colorpickerProps['border-color'].selectedColor"
|
|
excluded="['transparent_grayscale']"
|
|
document="this.props.wysiwyg.options.document"
|
|
onSetColorNames="(colorNames) => this._onColorpaletteSetColorNames('border-color', colorNames)"
|
|
onColorHover="(params) => this._colorpaletteApply('border-color', params)"
|
|
onColorLeave="(params) => this._colorpaletteApply('border-color', params)"
|
|
onColorPicked="(params) => this._onColorpaletteColorPicked('border-color', params)"
|
|
onCustomColorPicked="(params) => this._onColorpaletteColorPicked('border-color', params)"
|
|
getTemplate="this.props.getColorpickerTemplate"
|
|
/>
|
|
</we-selection-items>
|
|
</div>
|
|
</we-select>
|
|
</div>
|
|
</we-row>
|
|
<we-row class="link-size-row" t-att-class="{'d-none': !state.showLinkSizeRow}">
|
|
<we-select class="o_we_user_value_widget o_we_sublevel_2">
|
|
<we-title>Size</we-title>
|
|
<div>
|
|
<div class="dropdown">
|
|
<button class="dropdown-toggle" data-bs-toggle="dropdown" title="" tabindex="-1" aria-expanded="false">
|
|
<we-toggler title="Link Size">
|
|
Medium
|
|
</we-toggler>
|
|
</button>
|
|
<we-selection-items name="link_style_size" class="dropdown-menu link-style">
|
|
<we-button class="dropdown-item" href="#" data-value="sm">
|
|
Small
|
|
</we-button>
|
|
<we-button class="dropdown-item active" href="#" data-value="">
|
|
Medium
|
|
</we-button>
|
|
<we-button class="dropdown-item" href="#" data-value="lg">
|
|
Large
|
|
</we-button>
|
|
</we-selection-items>
|
|
<span class="o_we_dropdown_caret"></span>
|
|
</div>
|
|
</div>
|
|
</we-select>
|
|
</we-row>
|
|
<we-row class="link-shape-row" t-att-class="{'d-none': !state.showLinkShapeRow}">
|
|
<we-select class="o_we_user_value_widget o_we_sublevel_2">
|
|
<we-title>Shape</we-title>
|
|
<div>
|
|
<div class="dropdown">
|
|
<button class="dropdown-toggle" data-bs-toggle="dropdown" tabindex="-1" aria-expanded="false">
|
|
<we-toggler title="Link Shape">
|
|
Default
|
|
</we-toggler>
|
|
</button>
|
|
<we-selection-items name="link_style_shape" class="dropdown-menu link-style">
|
|
<we-button class="dropdown-item active" data-value="">Default</we-button>
|
|
<we-button class="dropdown-item" data-value="rounded-circle">Default + Rounded</we-button>
|
|
<we-button class="dropdown-item" data-value="outline">Outline</we-button>
|
|
<we-button class="dropdown-item" data-value="outline,rounded-circle">Outline + Rounded</we-button>
|
|
<we-button class="dropdown-item" data-value="fill">Fill</we-button>
|
|
<we-button class="dropdown-item" data-value="fill,rounded-circle">Fill + Rounded</we-button>
|
|
<we-button class="dropdown-item" data-value="flat">Flat</we-button>
|
|
</we-selection-items>
|
|
</div>
|
|
</div>
|
|
</we-select>
|
|
</we-row>
|
|
<we-row t-if="!state.isButton and !props.forceNewWindow and !state.isDocument">
|
|
<we-button t-attf-class="o_we_user_value_widget o_we_checkbox_wrapper o_we_sublevel_1 #{this.initialNewWindow ? 'active' : ''}">
|
|
<we-title class="o_long_title">Open in New Window</we-title>
|
|
<div class="o_switch">
|
|
<we-checkbox name="is_new_window" t-att-checked="this.initialNewWindow ? 'checked' : undefined"/>
|
|
</div>
|
|
</we-button>
|
|
</we-row>
|
|
<we-row t-if="!state.isButton and state.isDocument">
|
|
<we-button t-attf-class="o_we_user_value_widget o_we_checkbox_wrapper o_we_sublevel_1 #{state.directDownload ? 'active' : ''}">
|
|
<we-title class="o_long_title">Direct Download</we-title>
|
|
<div class="o_switch">
|
|
<we-checkbox name="direct_download" t-att-checked="state.directDownload ? 'checked' : undefined"/>
|
|
</div>
|
|
</we-button>
|
|
</we-row>
|
|
</div>
|
|
</we-customizeblock-option>
|
|
|
|
<!-- ImageCrop controls (allows to crop images on the page) -->
|
|
<div t-name="web_editor.ImageCrop" class="o_we_crop_widget" contenteditable="false"
|
|
t-att-class="this.state.active ? '' : 'd-none'"
|
|
t-ref="el"
|
|
>
|
|
<div class="o_we_cropper_wrapper">
|
|
<img class="o_we_cropper_img"/>
|
|
<div class="o_we_crop_buttons text-center mt16 position-fixed o_we_no_overlay" contenteditable="false">
|
|
<div class="btn-group btn-group-toggle" title="Aspect Ratio" data-bs-toggle="buttons">
|
|
<t t-foreach="this.aspectRatios" t-as="ratio" t-key="ratio">
|
|
<t t-set="is_active" t-value="ratio === this.aspectRatio"/>
|
|
<label t-attf-class="btn #{is_active and 'active' or ''}" data-action="ratio" t-att-data-value="ratio">
|
|
<input type="radio" /><t t-esc="ratio_value.label"/>
|
|
</label>
|
|
</t>
|
|
</div>
|
|
<div class="btn-group" role="group">
|
|
<button type="button" title="Zoom In" data-action="zoom" data-value="0.1"><i class="fa fa-fw fa-search-plus"/></button>
|
|
<button type="button" title="Zoom Out" data-action="zoom" data-value="-0.1"><i class="fa fa-fw fa-search-minus"/></button>
|
|
</div>
|
|
<div class="btn-group" role="group">
|
|
<button type="button" title="Rotate Left" data-action="rotate" data-value="-90"><i class="fa fa-fw fa-rotate-left"/></button>
|
|
<button type="button" title="Rotate Right" data-action="rotate" data-value="90"><i class="fa fa-fw fa-rotate-right"/></button>
|
|
</div>
|
|
<div class="btn-group" role="group">
|
|
<button type="button" title="Flip Horizontal" data-action="flip" data-scale-direction="scaleX"><i class="oi oi-fw oi-arrows-h"/></button>
|
|
<button type="button" title="Flip Vertical" data-action="flip" data-scale-direction="scaleY"><i class="oi oi-fw oi-arrows-v"/></button>
|
|
</div>
|
|
<div class="btn-group" role="group">
|
|
<button type="button" title="Reset Image" data-action="reset"><i class="fa fa-refresh"/> Reset Image</button>
|
|
</div>
|
|
<div class="btn-group" role="group">
|
|
<button type="button" title="Apply" data-action="apply" class="btn btn-primary"><i class="fa fa-check"/> Apply</button>
|
|
<button type="button" title="Discard" data-action="discard" class="btn btn-danger"><i class="fa fa-times"/> Discard</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</templates>
|