[REF] website, *: replace legacy dialog with OWL Dialog
*: test_website, web_editor, website_sale The goal of this commit is to replace all Dialog in the Website Editor flow with OWL Dialog. This uses the new `bindService` and `call` methods available on legacy widgets. The replacements mainly use the ConfirmationDialog component, but some had to have custom-made dialogs. closes odoo/odoo#138947 Signed-off-by: Francois Georis (fge) <fge@odoo.com>
This commit is contained in:
Arthur Detroux (ard)
@@ -1,36 +1,57 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<templates id="template" xml:space="preserve">
|
||||
<!-- Anchor Name option dialog -->
|
||||
<div t-name="website.dialog.anchorName">
|
||||
<div class="mb-3 row">
|
||||
<label class="col-form-label col-md-3" for="anchorName">Choose an anchor name</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" class="form-control o_input_anchor_name" id="anchorName" t-attf-value="#{currentAnchor}" placeholder="Anchor name"/>
|
||||
<div class="invalid-feedback">
|
||||
<p class="d-none o_anchor_already_exists">The chosen name already exists</p>
|
||||
<t t-name="website.dialog.anchorName">
|
||||
<Dialog title="this.title" size="'lg'" modalRef="this.modalRef">
|
||||
<div class="mb-3 row">
|
||||
<label class="col-form-label col-md-3" for="anchorName">Choose an anchor name</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" class="form-control o_input_anchor_name" id="anchorName"
|
||||
t-attf-value="#{props.currentAnchor}" placeholder="Anchor name"/>
|
||||
<div class="invalid-feedback">
|
||||
<p class="d-none o_anchor_already_exists">The chosen name already exists</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<t t-set-slot="footer">
|
||||
<button class="btn btn-primary" t-on-click="onClickConfirm">Save & copy</button>
|
||||
<button class="btn btn-secondary" t-on-click="onClickDiscard">Discard</button>
|
||||
<button t-if="props.delete" class="btn btn-link ms-auto" t-on-click="onClickDelete"><i class="fa fa-icon fa-trash"/>
|
||||
Remove
|
||||
</button>
|
||||
</t>
|
||||
</Dialog>
|
||||
</t>
|
||||
|
||||
<!-- Add a Google Font option dialog -->
|
||||
<div t-name="website.dialog.addGoogleFont">
|
||||
<div class="mb-3 row">
|
||||
<label class="col-form-label col-md-3" for="google_font_html">Google Font address</label>
|
||||
<div class="col-md-9">
|
||||
<textarea id="google_font_html" class="form-control o_input_google_font"
|
||||
placeholder="https://fonts.google.com/specimen/Roboto" style="height: 100px;"/>
|
||||
<span class="float-end text-muted">
|
||||
Select one font on <a target="_blank" href="https://fonts.google.com">fonts.google.com</a> and copy paste the address of the font page here.
|
||||
</span>
|
||||
<t t-name="website.dialog.addGoogleFont">
|
||||
<Dialog title="this.props.title">
|
||||
<div class="mb-3 row">
|
||||
<label class="col-form-label col-md-3" for="google_font_html">Google Font address</label>
|
||||
<div class="col-md-9">
|
||||
<textarea id="google_font_html" class="form-control o_input_google_font" t-ref="fontInput"
|
||||
placeholder="https://fonts.google.com/specimen/Roboto" style="height: 100px;"/>
|
||||
<span class="float-end text-muted">
|
||||
Select one font on <a target="_blank" href="https://fonts.google.com">fonts.google.com</a> and copy paste the address of the font page here.
|
||||
</span>
|
||||
</div>
|
||||
<label class="col-form-label col-md-3" for="google_font_serve">Serve font from Google servers</label>
|
||||
<label class="o_switch col-form-label col-md-9" for="google_font_serve">
|
||||
<input type="checkbox" checked="checked" id="google_font_serve" t-model="state.googleServe"/>
|
||||
<span/>
|
||||
</label>
|
||||
</div>
|
||||
<label class="col-form-label col-md-3" for="google_font_serve">Serve font from Google servers</label>
|
||||
<label class="o_switch col-form-label col-md-9" for="google_font_serve">
|
||||
<input type="checkbox" checked="checked" id="google_font_serve"/>
|
||||
<span/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<t t-set-slot="footer">
|
||||
<button class="btn btn-primary" t-att-disabled="state.loading" t-on-click="onClickSave">
|
||||
<t t-if="this.state.loading">
|
||||
<i class="fa fa-icon fa-icon"/>
|
||||
</t>
|
||||
Save and Reload
|
||||
</button>
|
||||
<button class="btn btn-secondary" t-on-click="onClickCancel">Cancel</button>
|
||||
</t>
|
||||
</Dialog>
|
||||
</t>
|
||||
<t t-name="website.delete_google_font_btn">
|
||||
<i t-if="!local" role="button" class="text-info me-2 fa fa-cloud" title="This font is hosted and served to your visitors by Google servers"/>
|
||||
<t t-set="delete_font_title">Delete this font</t>
|
||||
@@ -69,58 +90,73 @@
|
||||
<we-colorpicker title="Border" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-btn-secondary-border"/>
|
||||
</we-row>
|
||||
</t>
|
||||
<div t-name="website.s_google_map_modal">
|
||||
<p>Use Google Map on your website (Contact Us page, snippets, etc).</p>
|
||||
<div class="row mb-0">
|
||||
<label class="col-sm-2 col-form-label" for="pin_address">API Key</label>
|
||||
<div class="col">
|
||||
<div class="input-group">
|
||||
<div class="input-group-text"><i class="fa fa-key"/></div>
|
||||
<input type="text" class="form-control" id="api_key_input"
|
||||
t-att-value="apiKey or ''"
|
||||
placeholder="BSgzTvR5L1GB9jriT451iTN4huVPxHmltG6T6eo"/>
|
||||
</div>
|
||||
<small id="api_key_help" class="text-danger">
|
||||
</small>
|
||||
<div class="small form-text text-muted">
|
||||
Hint: How to use Google Map on your website (Contact Us page and as a snippet)
|
||||
<br/>
|
||||
<a target="_blank" href="https://console.developers.google.com/flows/enableapi?apiid=maps_backend,static_maps_backend&keyType=CLIENT_SIDE&reusekey=true">
|
||||
<i class="oi oi-arrow-right"/>
|
||||
Create a Google Project and Get a Key
|
||||
</a>
|
||||
<br/>
|
||||
<a target="_blank" href="https://cloud.google.com/maps-platform/pricing">
|
||||
<i class="oi oi-arrow-right"/>
|
||||
Enable billing on your Google Project
|
||||
</a>
|
||||
</div>
|
||||
<div class="alert alert-info mb-0 mt-3">
|
||||
Make sure your settings are properly configured:
|
||||
<ul class="mb-0">
|
||||
<li>
|
||||
Enable the right google map APIs in your google account
|
||||
<ul>
|
||||
<li>Maps Static API</li>
|
||||
<li>Maps JavaScript API</li>
|
||||
<li>Places API</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
Make sure billing is enabled
|
||||
</li>
|
||||
<li>
|
||||
Make sure to wait if errors keep being shown: sometimes enabling an API allows to use it immediately but Google keeps triggering errors for a while
|
||||
</li>
|
||||
</ul>
|
||||
<t t-name="website.s_google_map_modal">
|
||||
<Dialog title="props.title" size="'md'" modalRef="modalRef">
|
||||
<p>Use Google Map on your website (Contact Us page, snippets, etc).</p>
|
||||
<div class="row mb-0">
|
||||
<label class="col-sm-2 col-form-label" for="pin_address">API Key</label>
|
||||
<div class="col">
|
||||
<div class="input-group">
|
||||
<div class="input-group-text"><i class="fa fa-key"/></div>
|
||||
<input type="text" class="form-control" id="api_key_input"
|
||||
t-model="this.state.apiKey"
|
||||
placeholder="BSgzTvR5L1GB9jriT451iTN4huVPxHmltG6T6eo"/>
|
||||
</div>
|
||||
<small id="api_key_help" class="text-danger">
|
||||
</small>
|
||||
<div class="small form-text text-muted">
|
||||
Hint: How to use Google Map on your website (Contact Us page and as a snippet)
|
||||
<br/>
|
||||
<a target="_blank" href="https://console.developers.google.com/flows/enableapi?apiid=maps_backend,static_maps_backend&keyType=CLIENT_SIDE&reusekey=true">
|
||||
<i class="oi oi-arrow-right"/>
|
||||
Create a Google Project and Get a Key
|
||||
</a>
|
||||
<br/>
|
||||
<a target="_blank" href="https://cloud.google.com/maps-platform/pricing">
|
||||
<i class="oi oi-arrow-right"/>
|
||||
Enable billing on your Google Project
|
||||
</a>
|
||||
</div>
|
||||
<div class="alert alert-info mb-0 mt-3">
|
||||
Make sure your settings are properly configured:
|
||||
<ul class="mb-0">
|
||||
<li>
|
||||
Enable the right google map APIs in your google account
|
||||
<ul>
|
||||
<li>Maps Static API</li>
|
||||
<li>Maps JavaScript API</li>
|
||||
<li>Places API</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
Make sure billing is enabled
|
||||
</li>
|
||||
<li>
|
||||
Make sure to wait if errors keep being shown: sometimes enabling an API allows to use it immediately but Google keeps triggering errors for a while
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<t t-set-slot="footer">
|
||||
<button t-on-click="onClickSave" class="btn btn-primary">Save</button>
|
||||
<button class="btn" t-on-click="() => this.props.close()">Cancel</button>
|
||||
</t>
|
||||
</Dialog>
|
||||
</t>
|
||||
|
||||
<!-- Theme - custom code -->
|
||||
<div t-name="website.custom_code_dialog_content">
|
||||
<div class="mb-2" t-esc="contentText"/>
|
||||
<div class="o_ace_editor_container"/>
|
||||
</div>
|
||||
<t t-name="website.s_embed_code_dialog">
|
||||
<Dialog title="props.title">
|
||||
<CodeEditor mode="props.mode"
|
||||
class="'o_website_code_editor_field'"
|
||||
theme="'monokai'"
|
||||
onChange.bind="onCodeChange"
|
||||
value="this.state.value"/>
|
||||
<t t-set-slot="footer">
|
||||
<button class="btn btn-primary" t-on-click="onConfirm">Save</button>
|
||||
<button class="btn" t-on-click="this.props.close">Discard</button>
|
||||
</t>
|
||||
</Dialog>
|
||||
</t>
|
||||
</templates>
|
||||
|
||||
Reference in New Issue
Block a user