[IMP] website_slides : usability improvements

15 files changed, 263 insertions, 135 deletions

diff --git a/addons/website_slides/controllers/main.py b/addons/website_slides/controllers/main.py
index 52c254fb9e2..3047b06678a 100644
--- a/addons/website_slides/controllers/main.py
+++ b/addons/website_slides/controllers/main.py
@@ -4,7 +4,7 @@ import logging
 import werkzeug
 
 from openerp.addons.web import http
-from openerp.exceptions import AccessError
+from openerp.exceptions import AccessError, UserError
 from openerp.http import request
 from openerp.tools.translate import _
 
@@ -127,6 +127,7 @@ class website_slides(http.Controller):
             'user': user,
             'pager': pager,
             'is_public_user': user == request.website.user_id,
+            'display_channel_settings': not request.httprequest.cookies.get('slides_channel_%s' % (channel.id), False) and channel.can_see_full,
         }
         if search:
             values['search'] = search
@@ -312,7 +313,7 @@ class website_slides(http.Controller):
         # otherwise client slide create dialog box continue processing even server fail to create a slide.
         try:
             slide_id = request.env['slide.slide'].create(values)
-        except AccessError as e:
+        except (UserError, AccessError) as e:
             _logger.error(e)
             return {'error': e.name}
         except Exception as e:
diff --git a/addons/website_slides/models/slides.py b/addons/website_slides/models/slides.py
index ceeeeaf58f3..503d89e19d7 100644
--- a/addons/website_slides/models/slides.py
+++ b/addons/website_slides/models/slides.py
@@ -135,7 +135,7 @@ class Category(models.Model):
     _order = "sequence, id"
 
     name = fields.Char('Name', translate=True, required=True)
-    channel_id = fields.Many2one('slide.channel', string="Channel", required=True)
+    channel_id = fields.Many2one('slide.channel', string="Channel", required=True, ondelete='cascade')
     sequence = fields.Integer(default=10, help='Display order')
     slide_ids = fields.One2many('slide.slide', 'category_id', string="Slides")
     nbr_presentations = fields.Integer("Number of Presentations", compute='_count_presentations', store=True)
@@ -239,8 +239,8 @@ class Slide(models.Model):
     def _get_image(self):
         for record in self:
             if record.image:
-                record.image_medium = image.crop_image(record.image, thumbnail_ratio=3)
-                record.image_thumb = image.crop_image(record.image, thumbnail_ratio=4)
+                record.image_medium = image.crop_image(record.image, type='top', ratio=(4, 3), thumbnail_ratio=4)
+                record.image_thumb = image.crop_image(record.image, type='top', ratio=(4, 3), thumbnail_ratio=6)
             else:
                 record.image_medium = False
                 record.iamge_thumb = False
@@ -314,7 +314,12 @@ class Slide(models.Model):
     def _website_url(self, name, arg):
         res = super(Slide, self)._website_url(name, arg)
         base_url = self.env['ir.config_parameter'].get_param('web.base.url')
-        res.update({(slide.id, '%s/slides/slide/%s' % (base_url, slug(slide))) for slide in self})
+        #link_tracker is not in dependencies, so use it to shorten url only if installed.
+        if self.env.registry.get('link.tracker'):
+            LinkTracker = self.env['link.tracker']
+            res.update({(slide.id, LinkTracker.sudo().create({'url': '%s/slides/slide/%s' % (base_url, slug(slide))}).short_url) for slide in self})
+        else:
+            res.update({(slide.id, '%s/slides/slide/%s' % (base_url, slug(slide))) for slide in self})
         return res
 
 
diff --git a/addons/website_slides/static/description/index.html b/addons/website_slides/static/description/index.html
index 1dff078834f..f6cd3ebc780 100644
--- a/addons/website_slides/static/description/index.html
+++ b/addons/website_slides/static/description/index.html
@@ -5,14 +5,15 @@
             <h3 class="oe_slogan">Publish your presentations, videos, documents, infographics, etc.</h3>
         </div>
         <div class="oe_span6">
-            <div class="oe_demo oe_picture oe_screenshot">
-                <iframe width="361" height="200" frameborder="0" allowfullscreen="" src=""></iframe>
+            <div class="oe_row_img oe_centered">
+            <p class="oe_mt32">
+                <img src="slides4.png" class="oe_picture oe_screenshot">
             </div>
         </div>
         <div class="oe_span6">
             <p class="oe_mt32">
             Odoo presentations lets you upload files privately or publicly in the following file formats: PowerPoint, PDF, Keynote, Video or OpenDocument presentations.</p>
-            <p>This module originally meant to be used for businesses to share slides among employees more easily. It also provides users the ability to rate, comment, and share the uploaded content.
+            <p>This module originally meant to be used for businesses to share slides among employees more easily. It also provides users the ability to rate, comment, share the uploaded content and see detailed statistics like total views, web-views, embedded-views, likes and dislikes, total comments, total social-shares and shares on individual social site.
             </p>
             <div class="oe_centeralign oe_websiteonly">
                 <a class="oe_button oe_big oe_tacky" href="mailto:sales@openerp.com">Contact Us</a>
diff --git a/addons/website_slides/static/description/slides1.png b/addons/website_slides/static/description/slides1.png
index aad8a869efc..91eb5288c33 100644
--- a/addons/website_slides/static/description/slides1.png
+++ b/addons/website_slides/static/description/slides1.png
diff --git a/addons/website_slides/static/description/slides2.png b/addons/website_slides/static/description/slides2.png
index 0dbd8550d16..bf5487587cb 100644
--- a/addons/website_slides/static/description/slides2.png
+++ b/addons/website_slides/static/description/slides2.png
diff --git a/addons/website_slides/static/description/slides3.png b/addons/website_slides/static/description/slides3.png
index e804143d9b1..ecbbf338297 100644
--- a/addons/website_slides/static/description/slides3.png
+++ b/addons/website_slides/static/description/slides3.png
diff --git a/addons/website_slides/static/description/slides4.png b/addons/website_slides/static/description/slides4.png
new file mode 100644
index 00000000000..02f309f59c8
--- /dev/null
+++ b/addons/website_slides/static/description/slides4.png
diff --git a/addons/website_slides/static/lib/pdfslidesviewer/PDFSlidesViewer.js b/addons/website_slides/static/lib/pdfslidesviewer/PDFSlidesViewer.js
index 85abc0c8233..a6d533e8cd0 100644
--- a/addons/website_slides/static/lib/pdfslidesviewer/PDFSlidesViewer.js
+++ b/addons/website_slides/static/lib/pdfslidesviewer/PDFSlidesViewer.js
@@ -148,6 +148,23 @@ var PDFSlidesViewer = (function(){
     PDFSlidesViewer.prototype.toggleFullScreen = function(){
         var el = this.canvas;
 
+        var $PDFViewer = $("div#PDFSlideViewer");
+        var $navigation_footer = $('div#PDFViewer > div.navbar-fixed-bottom');
+
+        $(document).unbind('webkitfullscreenchange mozfullscreenchange fullscreenchange')
+            .bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function() {
+                var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen || document.msFullScreen;
+                if (!state) {
+                    $navigation_footer.removeAttr('style');
+                    $PDFViewer.unbind('click');
+                } else {
+                    $navigation_footer.css('z-index', 2147483647);
+                    $PDFViewer.on('click', function() {
+                        $navigation_footer.fadeToggle();
+                    });
+                }
+            });
+
         var isFullscreenAvailable = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled || false;
         if(isFullscreenAvailable){ // Full screen supported
             // get the actual element in FullScreen mode (Null if no element)
diff --git a/addons/website_slides/static/src/js/slides.js b/addons/website_slides/static/src/js/slides.js
index fe46ed826b0..f898e45ee76 100644
--- a/addons/website_slides/static/src/js/slides.js
+++ b/addons/website_slides/static/src/js/slides.js
@@ -29,6 +29,14 @@ $(document).ready(function () {
         $(el).text(display_str);
     });
 
+    // To prevent showing channel settings alert box once user closed it.
+    $('.o_slides_hide_channel_settings').on('click', function(ev) {
+        var channel_id = $(this).data("channelId");
+        ev.preventDefault();
+        document.cookie = "slides_channel_" + channel_id + " = closed";
+        return true;
+    });
+
     /*
      * Like/Dislike Buttons Widget
      */
@@ -140,6 +148,13 @@ $(document).ready(function () {
      * Social Sharing Statistics Widget
      */
     if ($('div#statistic').length) {
+        var slide_url = $("div#statistic").attr('slide-url');
+        var social_urls = {
+            'linkedin': 'https://www.linkedin.com/countserv/count/share?url=',
+            'twitter': 'https://cdn.api.twitter.com/1/urls/count.json?url=',
+            'fb': 'https://graph.facebook.com/?id=',
+            'gplus': 'https://clients6.google.com/rpc'
+        }
         var socialgatter = function (app_url, url, callback) {
             $.ajax({
                 url: app_url + url,
@@ -147,43 +162,77 @@ $(document).ready(function () {
                 success: callback
             });
         };
-        var current_url = window.location.origin + window.location.pathname;
-        socialgatter('https://www.linkedin.com/countserv/count/share?url=', current_url, function (data) {
-            $('#linkedin-badge').text(data.count || 0);
-            $('#total-share').text(parseInt($('#total-share').text()) + parseInt($('#linkedin-badge').text()));
-        });
-        socialgatter('https://cdn.api.twitter.com/1/urls/count.json?url=', current_url, function (data) {
-            $('#twitter-badge').text(data.count || 0);
-            $('#total-share').text(parseInt($('#total-share').text()) + parseInt($('#twitter-badge').text()));
-        });
-        socialgatter('https://graph.facebook.com/?id=', current_url, function (data) {
-            $('#facebook-badge').text(data.shares || 0);
-            $('#total-share').text(parseInt($('#total-share').text()) + parseInt($('#facebook-badge').text()));
+        var update_statistics = function(social_site, slide_url) {
+            if (social_site == 'linkedin') {
+                socialgatter(social_urls['linkedin'], slide_url, function(data) {
+                    $('#linkedin-badge').text(data.count || 0);
+                    $('#total-share').text(parseInt($('#total-share').text()) + parseInt($('#linkedin-badge').text()));
+                });
+            }
+            if (social_site == 'twitter') {
+                socialgatter(social_urls['twitter'], slide_url, function(data) {
+                    $('#twitter-badge').text(data.count || 0);
+                    $('#total-share').text(parseInt($('#total-share').text()) + parseInt($('#twitter-badge').text()));
+                });
+            }
+            if (social_site == 'fb') {
+                socialgatter(social_urls['fb'], slide_url, function(data) {
+                    $('#facebook-badge').text(data.shares || 0);
+                    $('#total-share').text(parseInt($('#total-share').text()) + parseInt($('#facebook-badge').text()));
+                });
+            }
+            if (social_site == 'gplus') {
+                $.ajax({
+                    url: social_urls['gplus'],
+                    type: "POST",
+                    dataType: 'json',
+                    contentType: 'application/json',
+                    data: JSON.stringify([{
+                        "method": "pos.plusones.get",
+                        "id": "p",
+                        "params": {
+                            "nolog": true,
+                            "id": slide_url,
+                            "source": "widget",
+                            "userId": "@viewer",
+                            "groupId": "@self"
+                        },
+                        // TDE NOTE: should there be a key here ?
+                        "jsonrpc": "2.0",
+                        "apiVersion": "v1"
+                    }]),
+                    success: function(data) {
+                        $('#google-badge').text(data[0].result.metadata.globalCounts.count || 0);
+                        $('#total-share').text(parseInt($('#total-share').text()) + parseInt($('#google-badge').text()));
+                    },
+                });
+            }
+        };
+
+        $.each(social_urls, function(key, value) {
+            update_statistics(key, slide_url)
         });
 
-        $.ajax({
-            url: 'https://clients6.google.com/rpc',
-            type: "POST",
-            dataType: 'json',
-            contentType: 'application/json',
-            data: JSON.stringify([{
-                "method": "pos.plusones.get",
-                "id": "p",
-                "params": {
-                    "nolog": true,
-                    "id": current_url,
-                    "source": "widget",
-                    "userId": "@viewer",
-                    "groupId": "@self"
-                },
-                // TDE NOTE: should there be a key here ?
-                "jsonrpc": "2.0",
-                "apiVersion": "v1"
-            }]),
-            success: function (data) {
-                $('#google-badge').text(data[0].result.metadata.globalCounts.count || 0);
-                $('#total-share').text(parseInt($('#total-share').text()) + parseInt($('#google-badge').text()));
-            },
+        $("a.o_slides_social_share").on('click', function(ev) {
+            ev.preventDefault();
+            var key = $(ev.currentTarget).attr('social-key');
+            var win_url = $(ev.currentTarget).attr('href');
+            var win = window.open(
+                win_url,
+                'Share Dialog',
+                'width=626,height=436');
+            var interval = window.setInterval(function() {
+                try {
+                    if (win.closed) {
+                        window.clearInterval(interval);
+                        setTimeout(function() {
+                            update_statistics(key, slide_url);
+                        }, 3000);
+                    }
+                } catch (e) {
+                    window.clearInterval(interval);
+                }
+            }, 1000);
         });
     }
 });
diff --git a/addons/website_slides/static/src/js/slides_upload.js b/addons/website_slides/static/src/js/slides_upload.js
index aa8d3c339bb..91a4b1dadb1 100644
--- a/addons/website_slides/static/src/js/slides_upload.js
+++ b/addons/website_slides/static/src/js/slides_upload.js
@@ -198,7 +198,7 @@ var SlideDialog = Widget.extend({
             width: '100%',
             placeholder: tag,
             allowClear: true,
-            formatNoMatches: _.str.sprintf(_t("No matches found. Type to create new %s"), tag),
+            formatNoMatches: false,
             multiple: multi,
             selection_data: false,
             fetch_rpc_fnc : fetch_fnc,
@@ -208,14 +208,22 @@ var SlideDialog = Widget.extend({
                 }
                 return data.text;
             },
-            createSearchChoice: function (term) {
-                return {
-                    id: _.uniqueId('tag_'),
-                    create: true,
-                    tag: term,
-                    text: _.str.sprintf(_t("Create New %s '%s'"), tag, term)
-                };
+            check_unique_tag: function(term, tags) {
+                return _.filter(tags, function(tag) {
+                    return tag.text.toLowerCase() === term.toLowerCase()
+                }).length === 0;
             },
+            createSearchChoice: function(term, data) {
+                var added_tags = $(this.opts.element).select2('data');
+                if (this.opts.check_unique_tag(term, _.union(added_tags, data))) {
+                    return {
+                        id: _.uniqueId('tag_'),
+                        create: true,
+                        tag: term,
+                        text: _.str.sprintf(_t("Create New %s '%s'"), tag, term)
+                    };
+                }
+             },
             fill_data: function (query, data) {
                 var that = this,
                     tags = {results: []};
@@ -290,6 +298,14 @@ var SlideDialog = Widget.extend({
             });
         return res;
     },
+    //Python PIL does not support SVG, so converting SVG to PNG
+    svg_to_png: function() {
+        var img = this.$el.find("img#slide-image")[0];
+        var canvas = document.createElement("canvas");
+        canvas.width = img.width, canvas.height = img.height;
+        canvas.getContext("2d").drawImage(img, 0, 0);
+        return canvas.toDataURL("image/png").split(',')[1];
+    },
     // Values and save
     get_value: function () {
         var canvas = this.$('#data_canvas')[0],
@@ -313,8 +329,8 @@ var SlideDialog = Widget.extend({
         if (/^image\/.*/.test(this.file.type)) {
             _.extend(values, {
                 'slide_type': 'infographic',
-                'mime_type': this.file.type,
-                'datas': this.file.data
+                'mime_type': this.file.type === 'image/svg+xml' ? 'image/png' : this.file.type,
+                'datas': this.file.type === 'image/svg+xml' ? this.svg_to_png() : this.file.data
             });
         }
         return values;
@@ -364,4 +380,4 @@ var SlideDialog = Widget.extend({
         slides.page_widgets['upload_dialog'] = new SlideDialog(this, channel_id).appendTo(document.body);
     });
 
-});
\ No newline at end of file
+});
diff --git a/addons/website_slides/static/src/less/website_slides.less b/addons/website_slides/static/src/less/website_slides.less
index ae1dd9a2551..a9348336a3b 100644
--- a/addons/website_slides/static/src/less/website_slides.less
+++ b/addons/website_slides/static/src/less/website_slides.less
@@ -86,6 +86,10 @@ img.oe_slides_promote_image {
     color: @link-color;
 }
 
+textarea.o_slides_comment {
+    resize: vertical;
+}
+
 // Thumbnails
 .oe_slides_thumbnail_container{
     height: 300px
@@ -103,6 +107,11 @@ img.oe_slides_promote_image {
     text-overflow: ellipsis
 }
 
+.o_slide_preview {
+    max-height: 160px;
+    overflow: hidden;
+}
+
 // Suggested slides grid
 .oe_slides_suggestion_caption {
     position:absolute;
@@ -154,3 +163,17 @@ img.oe_slides_promote_image {
 .oe_slides_share_bar{
     padding: 10px 0;
 }
+
+.oe_slides_panel_footer #page_number {
+    width: 45px;
+}
+// Display Slide Navigation Footer bit clear on mobile preview
+@media screen and (max-width: 300px) {
+    .o_slide_navigation_buttons {
+        margin-left: 15px;
+        margin-right: -15px;
+        .col-xs-4 {
+            display: none;
+        }
+    }
+}
diff --git a/addons/website_slides/static/src/xml/website_slides.xml b/addons/website_slides/static/src/xml/website_slides.xml
index 0c5c62c3466..270d3acb9c1 100644
--- a/addons/website_slides/static/src/xml/website_slides.xml
+++ b/addons/website_slides/static/src/xml/website_slides.xml
@@ -15,7 +15,11 @@
                         <form class="clearfix form-horizontal">
                             <div class="form-group">
                                 <div class="col-sm-4">
-                                    <img src="/website_slides/static/src/img/document.png" id="slide-image" title="Content Preview" class="img-responsive img-thumbnail"/>
+                                    <div class="img-thumbnail">
+                                        <div class="o_slide_preview">
+                                            <img src="/website_slides/static/src/img/document.png" id="slide-image" title="Content Preview" class="img-responsive"/>
+                                        </div>
+                                    </div>
                                 </div>
                                 <div class="col-sm-8">
                                     <ul class="list-group">
diff --git a/addons/website_slides/view/website_slides.xml b/addons/website_slides/view/website_slides.xml
index c5f952b7f1f..6e038214367 100644
--- a/addons/website_slides/view/website_slides.xml
+++ b/addons/website_slides/view/website_slides.xml
@@ -24,18 +24,10 @@
 <!-- Tools template: share on social networkds -->
 <template id='slides_share' name="Slides Media Share">
     <div class="form-group">
-        <a target="_Blank" t-attf-href="https://www.facebook.com/sharer/sharer.php?u=#{slide.website_url}">
-            <i class="fa fa-facebook-square fa-2x"></i>
-        </a>
-        <a target="_Blank" t-attf-href="https://twitter.com/intent/tweet?text=#{slide.name}&amp;url=#{slide.website_url}">
-            <i class="fa fa-twitter-square fa-2x"></i>
-        </a>
-        <a target="_Blank" t-attf-href="http://www.linkedin.com/shareArticle?mini=true&amp;url=#{slide.website_url}&amp;title=#{slide.name}&amp;">
-            <i class="fa fa-linkedin-square fa-2x"></i>
-        </a>
-        <a target="_Blank" t-attf-href="https://plus.google.com/share?url=#{slide.website_url}">
-            <i class="fa fa-google-plus-square fa-2x"></i>
-        </a>
+        <a t-attf-href="https://www.facebook.com/sharer/sharer.php?u=#{slide.website_url}" class="o_slides_social_share" social-key="fb"><i class="fa fa-facebook-square fa-2x"/></a>
+        <a t-attf-href="https://twitter.com/intent/tweet?text=#{slide.name}&amp;url=#{slide.website_url}" class="o_slides_social_share"  social-key="twitter"><i class="fa fa-twitter fa-2x"/></a>
+        <a t-attf-href="http://www.linkedin.com/shareArticle?mini=true&amp;url=#{slide.website_url}&amp;title=#{slide.name}&amp;" social-key="linkedin" class="o_slides_social_share"><i class="fa fa-linkedin fa-2x"/></a>
+        <a t-attf-href="https://plus.google.com/share?url=#{slide.website_url}" class="o_slides_social_share" social-key="gplus"><i class="fa fa-google-plus-square fa-2x"/></a>
     </div>
 </template>
 
@@ -45,31 +37,35 @@
         <div class="container mt16">
             <h1>Select a Channel</h1>
             <div class="row">
-                <div t-foreach="channels" t-as="channel" class="col-sm-4 mb32">
-                    <div class="well well-sm">
-                        <div>
-                            <a t-attf-href="/slides/#{slug(channel)}">
-                                <img t-if="channel.promoted_slide_id" t-attf-src="/web/image/slide.slide/#{channel.promoted_slide_id.id}/image_medium" class="img-responsive oe_slides_channel_thumbnail"/>
-                                <img t-if="not channel.promoted_slide_id" src="/website_slides/static/description/channel-default.jpg" class="img-responsive oe_slides_opacity"/>
-                            </a>
-                        </div>
-                        <div>
-                            <div class="mt4 pull-right">
-                                <t t-call="website.publish_management">
-                                    <t t-set="object" t-value="channel"/>
-                                    <t t-set="publish_edit" t-value="True"/>
-                                </t>
+                <t t-foreach="channels" t-as="channel">
+                    <div t-if="channel_index % 3 == 0" class="clearfix"/>
+                    <div class="col-sm-4 mb32">
+                        <div class="well well-sm">
+                            <div>
+                                <a t-attf-href="/slides/#{slug(channel)}">
+                                    <img t-if="channel.promoted_slide_id" t-attf-src="/web/image/slide.slide/#{channel.promoted_slide_id.id}/image_medium" class="img-responsive oe_slides_channel_thumbnail"/>
+                                    <img t-if="not channel.promoted_slide_id" src="/website_slides/static/description/channel-default.jpg" class="img-responsive oe_slides_opacity"/>
+                                </a>
+                            </div>
+                            <div>
+                                <div class="mt4 pull-right">
+                                    <t t-call="website.publish_management">
+                                        <t t-set="object" t-value="channel"/>
+                                        <t t-set="publish_edit" t-value="True"/>
+                                        <t t-set="action" t-value="'website_slides.action_slide_channels'"/>
+                                    </t>
+                                </div>
+                                <h3 class="mt4 mb4 lead" t-att-title="channel.name" style="width:55%">
+                                    <a t-attf-href="/slides/#{slug(channel)}" t-esc="channel.name"/>
+                                </h3>
+                                <span class="label label-warning" t-if="not channel.can_see_full">Private channel</span>
+                            </div>
+                            <div>
+                                <p class="text-muted oe_no_empty" t-field="channel.description"/>
                             </div>
-                            <h3 class="mt4 mb4 lead" t-att-title="channel.name" style="width:55%">
-                                <a t-attf-href="/slides/#{slug(channel)}" t-esc="channel.name"/>
-                            </h3>
-                            <span class="label label-warning" t-if="not channel.can_see_full">Private channel</span>
-                        </div>
-                        <div>
-                            <p class="text-muted oe_no_empty" t-field="channel.description"/>
                         </div>
                     </div>
-                </div>
+                </t>
             </div>
         </div>
     </t>
@@ -78,9 +74,11 @@
 <!-- Channels View: option: subscription -->
 <template id="opt_subscription_on_channels" name="Subscription" customize_show="True" inherit_id="website_slides.channels">
     <xpath expr="//p[@t-field='channel.description']" position="after">
-        <t t-call="website_mail.follow">
-            <t t-set="email" t-value="user.email"/>
-            <t t-set="object" t-value="channel"/>
+        <t t-if="channel.can_see_full">
+            <t t-call="website_mail.follow">
+                <t t-set="email" t-value="user.email"/>
+                <t t-set="object" t-value="channel"/>
+            </t>
         </t>
     </xpath>
 </template>
@@ -114,6 +112,11 @@
                                 <i class="fa fa-cloud-upload"></i> Upload
                             </a>
                         </t>
+                        <t t-if="channel.can_upload and is_public_user">
+                            <a class="btn btn-primary" title="Upload Presentation" t-attf-href="/web/login?redirect=/slides/#{slug(channel)}">
+                                <i class="fa fa-cloud-upload"></i> Upload
+                            </a>
+                        </t>
                     </h3>
                 </div>
                 <!-- Search box -->
@@ -198,13 +201,14 @@
                     <t t-set="header_object" t-value="category"/>
                 </t>
             </t>
-            <section t-if="not channel.promoted_slide_id and not tag and not slide_type and not search and not is_public_user and not category" class="wrap mt16 mb0">
+            <section t-if="not channel.promoted_slide_id and not tag and not slide_type and not search and not is_public_user and not category and display_channel_settings" class="wrap mt16 mb0" groups="base.group_configuration">
                 <div class="container">
                     <div class="alert alert-danger alert-dismissable mb0">
+                        <button type="button" class="close o_slides_hide_channel_settings" t-att-data-channel-id="channel.id" data-dismiss="alert">x</button>
                         <p>
                             Review your channel settings to promote your most viewed or recent published presentation
                         </p>
-                        <a t-attf-href="/web#return_label=Website&amp;id=#{channel.id}&amp;view_type=form&amp;model=slide.channel" class="fa fa-arrow-right mt8">
+                        <a t-attf-href="/web#return_label=Website&amp;id=#{channel.id}&amp;view_type=form&amp;model=slide.channel&amp;action=#{request.env.ref('website_slides.action_slide_channels').id }" class="fa fa-arrow-right mt8">
                             Channel Settings
                         </a>
                     </div>
@@ -215,10 +219,7 @@
                     <div class="row">
                         <div class="col-md-5 mt16 mb16">
                             <a t-attf-href="/slides/slide/#{slug(channel.promoted_slide_id)}">
-                                <img t-attf-src="/web/image/slide.slide/#{channel.promoted_slide_id.id}/image" class="img-responsive shadow oe_slides_promote_image"/>
-                                <span t-if="channel.promote_strategy in ['latest', 'most_viewed', 'most_voted', 'custom']"
-                                    class="label label-primary pull-right" style="position: absolute;right: 50px;top: 7px;"
-                                    t-field="channel.promote_strategy"/>
+                                <img t-attf-src="/web/image/slide.slide/#{channel.promoted_slide_id.id}/image_medium" class="img-responsive shadow oe_slides_promote_image"/>
                             </a>
                         </div>
                         <div class="col-md-7 mt16 mb16">
@@ -229,9 +230,7 @@
                             </h3>
                             <div class="row mt8 mb8" t-if="channel.promoted_slide_id.tag_ids">
                                 <t t-foreach="channel.promoted_slide_id.tag_ids" t-as="slide_tag">
-                                    <a t-attf-href="/slides/#{slug(channel)}/tag/#{slug(slide_tag)}">
-                                        <span t-attf-class="label label-default #{tag and tag.id == slide_tag.id and 'label-primary' ''}" t-field="slide_tag.name"/>
-                                    </a>
+                                    <a t-attf-href="/slides/#{slug(channel)}/tag/#{slug(slide_tag)}" t-attf-class="label label-default #{tag and tag.id == slide_tag.id and 'label-primary' ''}" t-field="slide_tag.name"/>
                                 </t>
                             </div>
                             <div class="row oe_no_empty" t-esc="channel.promoted_slide_id.description"/>
@@ -247,7 +246,7 @@
             </section>
             <section>
                 <div class="container mt16">
-                    <div class="row">
+                    <div class="row o_promote_box">
                         <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding-left: 15px;padding-right: 15px;" t-if="channel.total == 0">
                             <div class="jumbotron">
                                 <h1>No presentation published yet.</h1>
@@ -267,6 +266,9 @@
                         </div>
 
                         <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" t-if="slide_type or category or tag">
+                            <div class="alert alert-success mb0" role="alert" t-if="tag">
+                                Results for <strong t-esc="tag.name"/>
+                            </div>
                             <t t-call="website_slides.slides_grid_view"/>
                         </div>
                         <div class="row text-center" t-if="slide_type or category or tag">
@@ -357,9 +359,7 @@
                 </div>
                 <p t-if="slide.tag_ids" style="padding-top: 5px;">
                     <t t-foreach="slide.tag_ids" t-as="att_tag">
-                        <a t-attf-href="/slides/#{slug(channel)}/tag/#{slug(att_tag)}">
-                            <span t-attf-class="label label-default #{tag and tag.name == att_tag.name and 'label-primary' ''} text-muted" t-field="att_tag.name"/>
-                        </a>
+                        <a t-attf-href="/slides/#{slug(channel)}/tag/#{slug(att_tag)}" t-attf-class="label label-default #{tag and tag.name == att_tag.name and 'label-primary' ''} text-muted" t-field="att_tag.name"/>
                     </t>
                 </p>
             </div>
@@ -403,19 +403,22 @@
                             <t t-raw="slide.embed_code"/>
                         </div>
                         <div class="row">
-                            <div class="pull right">
-                                <t t-call="website.publish_management">
-                                    <t t-set="object" t-value="slide"/>
-                                    <t t-set="publish_edit" t-value="True"/>
-                                </t>
-                            </div>
-                            <h4 t-esc="slide.name" class="col-md-8"/>
-                            <div class="col-md-4" t-if="slide.tag_ids">
-                                <t t-foreach="slide.tag_ids" t-as="slide_tag">
-                                    <a t-attf-href="/slides/#{slug(slide.channel_id)}/tag/#{slug(slide_tag)}">
-                                        <span t-attf-class="label label-default #{tag and tag.id == slide_tag.id and 'label-primary' ''}" t-field="slide_tag.name"/>
-                                    </a>
-                                </t>
+                            <h4 t-field="slide.name" class="col-md-6"/>
+                            <div class="col-md-6">
+                                <div clas="row">
+                                    <div class="col-md-8" t-if="slide.tag_ids">
+                                        <t t-foreach="slide.tag_ids" t-as="slide_tag">
+                                            <a t-attf-href="/slides/#{slug(slide.channel_id)}/tag/#{slug(slide_tag)}"  t-attf-class="label label-default ml4 mb4 pull-right #{tag and tag.id == slide_tag.id and 'label-primary' ''}" t-field="slide_tag.name"/>
+                                        </t>
+                                    </div>
+                                    <div class="pull-right">
+                                        <t t-call="website.publish_management">
+                                            <t t-set="object" t-value="slide"/>
+                                            <t t-set="publish_edit" t-value="True"/>
+                                            <t t-set="action" t-value="'website_slides.action_slides_slides'"/>
+                                        </t>
+                                    </div>
+                                </div>
                             </div>
                         </div>
                         <div class="row">
@@ -536,21 +539,21 @@
                                 </div>
                                 <div class="tab-pane fade" t-if="not slide.website_published" id="share">
                                     <h4><i class="fa fa-info-circle"></i>
-                                        Publish a presentation to enable social sharing feature
+                                        The social sharing module will be unlocked when a moderator will allow your publication.
                                     </h4>
                                 </div>
                                 <div t-att-class="comments and 'tab-pane fade active in' or 'tab-pane fade'" id="discuss">
                                     <form id="comment" class="js_website_submit_form" t-attf-action="/slides/slide/#{slide.id}/comment" method="POST">
                                         <div class="media">
-                                            <span class="pull-left">
+                                            <span class="pull-left" t-if="not is_public_user">
                                                 <img class="img img-circle media-object"
                                                     t-att-src="'/web/image?model=res.partner&amp;field=image_small&amp;id='+str(user_id.partner_id.id)"
                                                     style="width: 30px"/>
                                             </span>
                                             <div class="media-body">
                                                 <div t-if="is_public_user" class="col-md-6">
-                                                    <input type="name" class="form-control mb8" name="name" placeholder="Your Name"/>
-                                                    <input type="email" class="form-control mb8" name="email" placeholder="Email Address"/>
+                                                    <input type="name" class="form-control mb8" required="true" name="name" placeholder="Your Name"/>
+                                                    <input type="email" class="form-control mb8" required="true" name="email" placeholder="Email Address"/>
                                                 </div>
                                                 <div t-if="is_public_user" class="col-md-6">
                                                     <p class="text-muted small">
@@ -559,10 +562,11 @@
                                                         to post comment
                                                     </p>
                                                 </div>
-                                                <textarea rows="3" name="comment" class="form-control" placeholder="Write a comment..."></textarea>
-                                                <button type="submit" class="btn btn-primary mt8">Post</button>
+                                                <div class="col-md-12">
+                                                    <textarea rows="3" name="comment" class="o_slides_comment form-control" required="true" placeholder="Write a comment..."></textarea>
+                                                    <button type="submit" class="btn btn-primary mt8">Post</button>
+                                                </div>
                                             </div>
-
                                         </div>
                                     </form>
                                     <ul class="media-list mt8">
@@ -589,7 +593,7 @@
                                         </t>
                                     </t>
                                 </div>
-                                <div class="tab-pane fade" id="statistic">
+                                <div class="tab-pane fade" id="statistic" t-att-slide-url="slide.website_url">
                                     <div class="row">
                                         <div class="col-md-4">
                                             <h4 class="mt0 oe_slides_statistics_title">Views</h4>
@@ -679,19 +683,27 @@
                         <li><a href="#most_viewed" data-toggle="tab">Most Viewed</a></li>
                     </ul>
                     <div class="tab-content">
-                        <div id="related" class="tab-pane active">
+                        <div id="related" class="tab-pane active mt4">
                             <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 panel panel-default">
                                 <ul class="media-list panel-body">
-                                    <t t-foreach="related_slides" t-as="slide">
+                                    <t t-set="related_slides_list" t-value="list(related_slides)"/>
+                                    <t t-if="not related_slides_list">
+                                        No presentation available.
+                                    </t>
+                                    <t t-foreach="related_slides_list" t-as="slide">
                                         <t t-call="website_slides.related_slides"/>
                                     </t>
                                 </ul>
                             </div>
                         </div>
-                        <div id="most_viewed" class="tab-pane">
+                        <div id="most_viewed" class="tab-pane  mt4">
                             <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 panel panel-default">
                                 <ul class="media-list panel-body">
-                                    <t t-foreach="most_viewed_slides" t-as="slide">
+                                    <t t-set="most_viewed_slides_list" t-value="list(most_viewed_slides)"/>
+                                    <t t-if="not list(most_viewed_slides_list)">
+                                        No presentation available.
+                                    </t>
+                                    <t t-foreach="most_viewed_slides_list" t-as="slide">
                                         <t t-call="website_slides.related_slides"/>
                                     </t>
                                 </ul>
diff --git a/addons/website_slides/view/website_slides_backend.xml b/addons/website_slides/view/website_slides_backend.xml
index fff35d4be08..4be8102e84b 100644
--- a/addons/website_slides/view/website_slides_backend.xml
+++ b/addons/website_slides/view/website_slides_backend.xml
@@ -46,7 +46,7 @@
                                 <field name="website_published" widget="website_button"/>
                             </button>
                         </div>
-                        <field name="image" widget="image" class="oe_avatar" options='{"preview_image": "image_thumb"}'/>
+                        <field name="image" widget="image" class="oe_avatar" options='{"preview_image": "image_thumb"}' readonly="1"/>
                         <div class="oe_title">
                             <div class="oe_edit_only">
                                 <label for="name" string="Name"/>
@@ -67,7 +67,7 @@
                             </page>
                             <page string="Document">
                                 <group>
-                                    <field name="url"/>
+                                    <field name="url" attrs="{'required': [('image', '=', False)]}"/>
                                     <field name="slide_type" readonly="1"/>
                                     <field name="document_id" readonly="1"/>
                                     <field name="mime_type" readonly="1"/>
diff --git a/addons/website_slides/view/website_slides_embed.xml b/addons/website_slides/view/website_slides_embed.xml
index c8984e528fe..4dd3036d2d6 100644
--- a/addons/website_slides/view/website_slides_embed.xml
+++ b/addons/website_slides/view/website_slides_embed.xml
@@ -108,7 +108,7 @@
                         <div class="container-fluid oe_slides_panel_footer">
                             <div class="row" style="padding-top:15px;">
                                 <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 text-left">
-                                    <input type="number" class="text-center slide-img-border" style="width: 45px;" id="page_number"></input> / <span id="page_count"></span>
+                                    <input type="number" class="text-center" id="page_number"></input> / <span id="page_count"></span>
                                 </div>
                                 <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 hide o_slide_navigation_buttons">
                                     <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center"></div>
@@ -135,7 +135,7 @@
                                     <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center"></div>
                                 </div>
                                 <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 pull-right text-right">
-                                    <a t-if="slide.download_security and not is_embedded" t-attf-href="/slides/slide/#{slide.id}/download" title="Download" id="download">
+                                    <a t-if="slide.download_security and not is_embedded" target="_top" t-attf-href="/slides/slide/#{slide.id}/download" title="Download" id="download">
                                         <i class="fa fa-download fa-2x"></i>
                                     </a>
                                     <span id="fullscreen" title="View fullscreen">