diff --git a/addons/website_slides/static/src/js/slides_embed.js b/addons/website_slides/static/src/js/slides_embed.js
index edcaca7eccb19d76d8ca3f6df87383934cf6e0fb..b5ea4325375b6757c23e0a78487d891c303478a2 100644
--- a/addons/website_slides/static/src/js/slides_embed.js
+++ b/addons/website_slides/static/src/js/slides_embed.js
@@ -32,6 +32,7 @@ $(document).ready(function () {
this.$('canvas').show();
this.$('#page_count').text(this.pdf_viewer.pdf_page_total);
this.$('#PDFViewerLoader').hide();
+ this.$('#PDFViewerLoader').toggleClass('d-flex');
if (this.pdf_viewer.pdf_page_total > 1) {
this.$('.o_slide_navigation_buttons').removeClass('hide');
}
diff --git a/addons/website_slides/static/src/scss/slides_slide_fullscreen.scss b/addons/website_slides/static/src/scss/slides_slide_fullscreen.scss
index b377c7c3ca2d5af27788823f06ef60023479d850..d4a5cbd710504f71fb97f4ecdd1bcbe1456ef09d 100644
--- a/addons/website_slides/static/src/scss/slides_slide_fullscreen.scss
+++ b/addons/website_slides/static/src/scss/slides_slide_fullscreen.scss
@@ -1,12 +1,6 @@
-$o-wslides-color-bg: desaturate(map-get($grays, "200"), 80%);
-$o-wslides-color-dark1: #47525f;
-$o-wslides-color-dark2: #1f262d;
-$o-wslides-color-dark3: #101216;
-$o-wslides-fs-side-width: 300px;
$o-wslides-tabs-height: 36px;
-
.o_wslides_fs_main {
@include o-position-absolute(0,0,0,0);
z-index: 2000;
diff --git a/addons/website_slides/static/src/scss/website_slides.scss b/addons/website_slides/static/src/scss/website_slides.scss
index 1a4814fd4acf86d5ae8e7c180ecefdf769e1aa18..9cbdef9fc877791d23df85cb4e5e8460a44c686f 100644
--- a/addons/website_slides/static/src/scss/website_slides.scss
+++ b/addons/website_slides/static/src/scss/website_slides.scss
@@ -5,6 +5,13 @@ $MAX-Z-INDEX : 2147483647 !default;
$gray-50: #f4f4f4 !default;
$o-enterprise-radient-color: #62495B !default;
+$o-wslides-color-bg: desaturate(map-get($grays, "200"), 80%);
+$o-wslides-color-dark1: #47525f;
+$o-wslides-color-dark2: #1f262d;
+$o-wslides-color-dark3: #101216;
+$o-wslides-fs-side-width: 300px;
+
+
.o_wslides_gradient {
background-image: linear-gradient(120deg, #875A7B, darken(#875A7B, 10%));
}
@@ -331,95 +338,27 @@ $o-enterprise-radient-color: #62495B !default;
}
}
-// Old brol to clean someday
+// Embed PDFViewer
// **************************************************
+#PDFViewer.o_wslides_fs_pdf_viewer {
+ background-image: linear-gradient(120deg, $o-wslides-color-dark2, $o-wslides-color-dark3);
-.oe_slides_panel_footer .fa, .oe_slide_js_embed_option_link{
- color : theme-color('primary');
- cursor: pointer;
-}
-
-.oe_slide_embed_option {
- position: absolute;
- padding: 30px 30px 30px 30px;
- top: 0px;
- left: 0px;
- right: 0px;
- bottom: 0px;
- background-color: $body-bg;
- opacity: 1;
- display:none;
- overflow-y: auto !important;
-}
-
-.oe_slides_apart_small {
- height: 60px;
- width: 90px;
- object-fit: cover;
- object-position: top;
-}
-
-.oe_slides_statistics_title {
- border-bottom: 1px solid $nav-tabs-border-color;
- padding-bottom: 5px;
-}
-.oe_slides_transcript {
- overflow-y: auto;
- max-height: 500px;
-}
-
-// Thumbnails
-.oe_slides_ellipsis {
- white-space: nowrap;
- width: 100%;
- overflow: hidden;
- text-overflow: ellipsis
-}
-
-.o_slide_preview {
- max-height: 160px;
- overflow: hidden;
-}
+ #PDFViewerNav {
+ background-image: linear-gradient(120deg, $o-wslides-color-dark1, $o-wslides-color-dark2);
+ }
-// Suggested slides grid
-.oe_slides_suggestion_caption {
- position:absolute;
- top:0;
- right:0;
- background:rgba(10, 10, 10, 0.75);
- width:100%;
- height:100%;
- display: none;
- text-align:center;
- color:#fff !important;
- z-index:2;
-}
+ .oe_slides_panel_footer a, .oe_slides_share_bar a {
+ @include o-hover-text-color(rgba(white, 0.7), white);
-.oe_slides_suggestion_media {
- margin-top: 10px;
- position: relative;
-}
-.oe_slides_suggestion_media img {
- height: 33%;
- width: 100%;
- overflow: hidden;
-}
+ &.disabled {
+ @include o-hover-text-color(rgba(white, 0.2), rgba(white, 0.2));
+ cursor: default;
+ }
+ }
-// PDF Viewer Loader
-.oe_slides_loader{
- position: relative;
- width: 100%; /* for IE 6 */
-}
-.oe_slides_loader h4{
- position: absolute;
- bottom: 20px;
- left: 0;
- width: 35%;
-
- color: white;
- background: rgb(0, 0, 0); /* fallback color */
- background: rgba(0, 0, 0, 0.7);
- padding: 10px;
+ .oe_slide_embed_option {
+ @include o-position-absolute(0,0,0,0);
+ }
}
// Slide display
diff --git a/addons/website_slides/views/website_slides_templates_lesson_embed.xml b/addons/website_slides/views/website_slides_templates_lesson_embed.xml
index ac8ecbde8ecb0115d54aa7026f61617e4e88d1d6..286fd52fd5fdac946266314e5f8c169d00ae2be1 100644
--- a/addons/website_slides/views/website_slides_templates_lesson_embed.xml
+++ b/addons/website_slides/views/website_slides_templates_lesson_embed.xml
@@ -15,32 +15,28 @@
<t t-call-assets="website_slides.slide_embed_assets" t-css="false"/>
</head>
<body>
- <div id="PDFViewer" class="d-flex flex-column h-100 border">
+ <div id="PDFViewer" class="o_wslides_fs_pdf_viewer d-flex flex-column h-100">
<!-- PDF Viewer Header : contains the name, and the share links -->
- <div t-if="is_embedded" class="navbar-default oe_slides_share_bar">
+ <div t-if="is_embedded" class="oe_slides_share_bar">
<div class="container-fluid">
- <div class="row">
- <div class="col-lg-8 col-4 text-left">
+ <div class="row align-items-center">
+ <div class="col">
<div class="oe_slides_ellipsis">
<a target="_new" t-att-href="slide.website_url">
<span t-esc="slide.name" t-att-title="slide.name"/>
</a>
</div>
</div>
- <div class="col-lg-1 col-2 text-right">
- <b class="oe_slide_js_embed_option_link" data-slide-option-id="#slide_share"><i class="fa fa-share-alt"></i> Share</b>
- </div>
- <div class="col-lg-1 col-2 text-right">
- <b class="oe_slide_js_embed_option_link" data-slide-option-id="#slide_email"><i class="fa fa-envelope"></i> Email</b>
- </div>
- <div class="col-lg-1 col-2 text-right">
- <b class="oe_slide_js_embed_option_link" data-slide-option-id="#slide_embed"><i class="fa fa-code"></i> Embed</b>
+ <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>
</div>
</div>
</div>
</div>
<!-- PDF Viewer Body : contains the canvas, the loader, or the image-->
- <div id="PDFSlideViewer" class="text-center position-relative flex-grow-1" style="height: 0;"
+ <div id="PDFSlideViewer" class="d-flex align-items-start position-relative flex-grow-1 overflow-auto" style="height: 0;"
t-attf-data-slideid="#{slide.id}"
t-attf-data-slideurl="/slides/slide/#{slug(slide)}/pdf_content"
t-attf-data-downloadable="#{False}"
@@ -56,59 +52,64 @@
<t t-call="website_slides.slide_social_embed"/>
</div>
</t>
- <div id="slide_suggest" class="oe_slide_embed_option">
- <t t-foreach="related_slides" t-as="suggest_slide">
- <div class="col-4 oe_slides_suggestion_media">
- <a t-att-href="suggest_slide.website_url" target="_new">
- <div class="oe_slides_suggestion_caption">
- <h4><t t-esc="suggest_slide.name"/></h4>
+ <div id="slide_suggest" class="oe_slide_embed_option bg-300 container-fluid overflow-auto d-none">
+ <div class="row">
+ <t t-foreach="related_slides" t-as="suggest_slide">
+ <div class="col-6 col-md-4 col-lg-3 oe_slides_suggestion_media">
+ <div class="card mb-3">
+ <a t-att-href="suggest_slide.website_url" target="_new" class="card-img-top embed-responsive embed-responsive-16by9">
+ <img t-attf-src="/web/image/slide.slide/#{suggest_slide.id}/image" class="card-img-top embed-responsive-item" t-att-alt="suggest_slide.name"/>
+ </a>
+ <div class="card-body">
+ <h6 class="card-title">
+ <a t-att-href="suggest_slide.website_url" target="_new">
+ <t t-esc="suggest_slide.name"/>
+ </a>
+ </h6>
+ <div class="oe_slides_suggestion_caption"/>
+ </div>
</div>
- <span class="oe-image-thumbnail">
- <img class="img-fluid" t-attf-src="/web/image/slide.slide/#{suggest_slide.id}/image_small" alt="suggest_slide.name"/>
- </span>
- </a>
-
- </div>
- </t>
+ </div>
+ </t>
+ </div>
</div>
<t t-if="slide.slide_type in ('presentation', 'document')">
- <div id="PDFViewerLoader" class="oe_slides_loader">
- <img class="img-fluid" t-attf-src="/web/image/slide.slide/#{slide.id}/image_large" style="margin:auto;height:100%" alt="suggest_slide.name"/>
- <h4 class="text-center">
- <i class="fa fa-spinner fa-spin"></i> Loading ...
- </h4>
+ <div id="PDFViewerLoader" class="oe_slides_loader d-flex justify-content-center align-items-center position-absolute h-100 w-100">
+ <div class="toast show">
+ <div class="toast-header">
+ <i class="fa fa-circle-o-notch fa-spin mr-2"/><b>Loading...</b>
+ </div>
+ <div class="toast-body p-0">
+ <img class="img-fluid w-100" t-attf-src="/web/image/slide.slide/#{slide.id}/image_large"/>
+ </div>
+ </div>
</div>
- <canvas id="PDFViewerCanvas" class="img-fluid" style="margin: auto; height: 100%; display: none;"></canvas>
+ <canvas id="PDFViewerCanvas" class="img-fluid w-100" style="display: none;"></canvas>
</t>
<t t-if="slide.slide_type == 'infographic'">
<img t-attf-src="/web/image/slide.slide/#{slide.id}/image" class="img-fluid" style="width: 100%" alt="Slide image"/>
</t>
</div>
<!-- Fixed bottom navbar -->
- <div class="pt-2 pb-2 bg-light" role="navigation" t-if="slide.slide_type in ('presentation', 'document')">
+ <div id="PDFViewerNav" class="pt-2 pb-2 bg-light text-white" role="navigation" t-if="slide.slide_type in ('presentation', 'document')">
<div class="container-fluid oe_slides_panel_footer">
- <div class="row">
- <div class="col-auto mr-auto text-left mt-2 mb-2">
- <input type="number" class="text-center" id="page_number"></input> / <span id="page_count"></span>
+ <div class="row align-items-center">
+ <div class="col-2 flex-grow-0">
+ <div class="input-group input-group-sm flex-nowrap" style="max-width: 100px">
+ <input type="number" class="form-control text-center" id="page_number" style="min-width: 60px"/>
+ <div class="input-group-append">
+ <span class="input-group-text" id="page_count"/>
+ </div>
+ </div>
</div>
- <div class="col-auto o_slide_navigation_buttons mt-2 mb-2">
- <span id="first" class="ml-2 mr-2" title="First slide" role="img" aria-label="First slide">
- <i class="fa fa-step-backward fa-2x"></i>
- </span>
- <a id="previous" class="ml-2 mr-2" title="Previous slide" aria-label="Previous slide" role="button">
- <i class="fa fa-arrow-circle-left fa-2x"></i>
- </a>
- <a id="next" class="ml-2 mr-2" title="Next slide" aria-label="Next slide" role="button">
- <i class="fa fa-arrow-circle-right fa-2x"></i>
- </a>
- <a id="last" class="ml-2 mr-2" title="Last slide" aria-label="Last slide" role="button">
- <i class="fa fa-step-forward fa-2x"></i>
- </a>
+ <div class="col text-center">
+ <a id="first" href="#" class="text-decoration-none mr-1 mr-sm-2" title="First slide" role="button" aria-label="First slide"> <i class="fa fa-step-backward"/> </a>
+ <a id="previous" href="#" class="text-decoration-none mx-1 mx-sm-2" title="Previous slide" aria-label="Previous slide" role="button"> <i class="fa fa-arrow-circle-left"/> </a>
+ <a id="next" href="#" class="text-decoration-none mx-1 mx-sm-2" title="Next slide" aria-label="Next slide" role="button"> <i class="fa fa-arrow-circle-right"/> </a>
+ <a id="last" href="#" class="text-decoration-none ml-1 ml-sm-2" title="Last slide" aria-label="Last slide" role="button"> <i class="fa fa-step-forward"/> </a>
</div>
- <div class="col-auto text-right ml-auto mt-2 mb-2">
- <span id="fullscreen" title="View fullscreen" role="img" aria-label="Fullscreen">
- <i class="fa fa-arrows-alt fa-2x"></i>
- </span>
+ <div class="col-2 flex-grow-0 text-right">
+ <a id="fullscreen" href="#" title="View fullscreen" role="img" aria-label="Fullscreen"> <i class="fa fa-arrows-alt"/> </a>
</div>
</div>
</div>