[IMP] website_slides: improve sharing control when slide is embedded

This commit improves the sharing control when the slide is externally embedded,
meaning embedded outside of the Odoo website, on a third party.

Previously, there were several buttons to share (by email / social / embed),
but the end result was really strange with some kind of overlay content
displayed on top of the PDF viewer that was almost unreadable.

Now, we simply re-use the "slide_share_modal" template to get a consistent
sharing feature whether it's embedded externally or not.

Side note: this removes the ability to share by email, which was not working
anyway since it requires the user to be logged-in to the system, which will
most likely never happen if said user is actually viewing the slide on a third
party website.

Task-2654009

Part-of: odoo/odoo#77736
This commit is contained in:
Aurélien Warnon
2021-11-24 10:18:17 +00:00
parent 1ab9455a9a
commit 6638b79c5e
3 changed files with 25 additions and 20 deletions
@@ -557,7 +557,7 @@
<t t-esc="slide.embed_code_external"/>
</textarea>
</div>
<div class="form-group d-flex" t-if="slide.slide_type in ('presentation', 'document')">
<div t-if="slide.slide_type in ('presentation', 'document') and not embed_hide_starting_page" class="form-group d-flex">
<div class="form-text p-0 col-xs-5 col-sm-5 col-md-5 col-lg-5">Select page to start with</div>
<div class="input-group col-xs-3 col-sm-2 col-md-2 col-lg-3">
<input type="number" value="1" class="form-control"/>
@@ -28,9 +28,10 @@
</div>
</div>
<div class="col flex-grow-0 d-flex text-nowrap small">
<a href="#" class="oe_slide_js_embed_option_link" data-slide-option-id="#slide_share"><i class="fa fa-share-alt"/> Share</a>
<a href="#" class="oe_slide_js_embed_option_link mx-4" data-slide-option-id="#slide_email"><i class="fa fa-envelope"/> Email</a>
<a href="#" class="oe_slide_js_embed_option_link" data-slide-option-id="#slide_embed"><i class="fa fa-code"/> Embed</a>
<a class="oe_slide_js_embed_option_link" href="#" data-toggle="modal" t-attf-data-target="#slideChannelShareModal_{{slide.id}}">
<i class="fa fa-share-alt" aria-label="Share" title="Share"/>
Share
</a>
</div>
</div>
</div>
@@ -42,18 +43,12 @@
t-attf-data-downloadable="#{False}"
t-att-data-defaultpage="page">
<t t-if="is_external_embed">
<div id="slide_share" class="oe_slide_embed_option" style="display: none;">
<t t-call="website_slides.slide_share_modal">
<t t-set="record" t-value="slide"/>
<t t-set="website_url" t-value="slide.channel_id.website_url"/>
</t>
</div>
<div id="slide_email" class="oe_slide_embed_option" style="display: none;">
<t t-call="website_slides.slide_social_email"/>
</div>
<div id="slide_embed" class="oe_slide_embed_option" style="display: none;">
<t t-call="website_slides.slide_social_embed"/>
</div>
<t t-call="website_slides.slide_share_modal">
<t t-set="record" t-value="slide"/>
<t t-set="website_url" t-value="slide.channel_id.website_url"/>
<t t-set="include_embed" t-value="True"/>
<t t-set="embed_hide_starting_page" t-value="True"/>
</t>
</t>
<div id="slide_suggest" class="oe_slide_embed_option bg-300 container-fluid overflow-auto d-none">
<div class="row">
@@ -4,9 +4,18 @@
<!-- Share on social networks -->
<template id='slide_share_social' name="Slides Media Share">
<div class="btn-group" role="group">
<a t-attf-href="https://www.facebook.com/sharer/sharer.php?u=#{record.website_url}" class="btn border bg-white o_wslides_js_social_share" social-key="facebook" aria-label="Share on Facebook" title="Share on Facebook"><i class="fa fa-facebook-square fa-fw"/></a>
<a t-attf-href="https://twitter.com/intent/tweet?text=#{record.name}&amp;url=#{record.website_url}" class="btn border bg-white o_wslides_js_social_share" social-key="twitter" aria-label="Share on Twitter" title="Share on Twitter"><i class="fa fa-twitter fa-fw"/></a>
<a t-attf-href="http://www.linkedin.com/sharing/share-offsite/?url=#{record.website_url}" social-key="linkedin" class="btn border bg-white o_wslides_js_social_share" aria-label="Share on LinkedIn" title="Share on LinkedIn"><i class="fa fa-linkedin fa-fw"/></a>
<a t-attf-href="https://www.facebook.com/sharer/sharer.php?u=#{record.website_url}" class="btn border bg-white o_wslides_js_social_share"
social-key="facebook" aria-label="Share on Facebook" title="Share on Facebook" target="_blank">
<i class="fa fa-facebook-square fa-fw"/>
</a>
<a t-attf-href="https://twitter.com/intent/tweet?text=#{record.name}&amp;url=#{record.website_url}" class="btn border bg-white o_wslides_js_social_share"
social-key="twitter" aria-label="Share on Twitter" title="Share on Twitter" target="_blank">
<i class="fa fa-twitter fa-fw"/>
</a>
<a t-attf-href="http://www.linkedin.com/sharing/share-offsite/?url=#{record.website_url}" class="btn border bg-white o_wslides_js_social_share"
social-key="linkedin" aria-label="Share on LinkedIn" title="Share on LinkedIn" target="_blank">
<i class="fa fa-linkedin fa-fw"/>
</a>
</div>
</template>
@@ -41,11 +50,12 @@
<h5>Share on Social Networks</h5>
<t t-call="website_slides.slide_share_social"/>
<t t-call="website_slides.slide_share_link"/>
<t t-if="include_embed" t-call="website_slides.slide_social_embed"/>
</div>
</template>
<template id="slide_share_link">
<h5 class="mt16">Share Link</h5>
<h5 class="mt-3">Share Link</h5>
<div class="input-group">
<input type="text" t-att-id="'wslides_share_link_id_%s' % record.id" class="form-control o_wslides_js_share_link" readonly="readonly" onclick="this.select();"
t-att-value="website_url"/>