pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] website_slides: embedded player restyling

Browse Source 
The style and DOM structure of the embeded player (used
to display PDF file) is old, and it needed a little refresh
to be adapt to bootstrap4 and modern styling.

Task-1941250
This commit is contained in:
sri-odoo
2019-03-15 20:38:58 +00:00
committed by jem-odoo
parent 69fb136a48
commit 54261c4e3e
4 changed files with 78 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website_slides/static/src/js/slides_embed.js
+1
View File
@@ -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');
}
addons/website_slides/static/src/scss/slides_slide_fullscreen.scss
-6
View File
@@ -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;
addons/website_slides/static/src/scss/website_slides.scss
+23 -84
View File
@@ -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;
}
#PDFViewerNav {
background-image: linear-gradient(120deg, $o-wslides-color-dark1, $o-wslides-color-dark2);
}
.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_panel_footer a, .oe_slides_share_bar a {
@include o-hover-text-color(rgba(white, 0.7), white);
.oe_slides_apart_small {
height: 60px;
width: 90px;
object-fit: cover;
object-position: top;
}
&.disabled {
@include o-hover-text-color(rgba(white, 0.2), rgba(white, 0.2));
cursor: default;
}
}
.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;
}
// 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_suggestion_media {
margin-top: 10px;
position: relative;
}
.oe_slides_suggestion_media img {
height: 33%;
width: 100%;
overflow: hidden;
}
// 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
addons/website_slides/views/website_slides_templates_lesson_embed.xml
+54 -53
View File
@@ -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>