From f16cb2094316511dac8bcca09d6ae210f7c95339 Mon Sep 17 00:00:00 2001
From: Tomasz Rondio <tomasz.rondio@gmail.com>
Date: Fri, 18 Jan 2019 16:30:07 +0100
Subject: [PATCH] featured image in preview, route slug editable, UI
 improvements

---
 .../WebPublisherContentListsController.js          |  3 +--
 client/controllers/WebPublisherOutputController.js | 14 ++++++++++++--
 client/directives/groupArticle/view.html           | 13 ++++++++++---
 client/services/PublisherHelpers.js                |  9 +++++----
 client/views/output/preview-pane.html              |  3 +++
 .../settings/website-management/manage-routes.html |  5 +++++
 6 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/client/controllers/WebPublisherContentListsController.js b/client/controllers/WebPublisherContentListsController.js
index dc84a34e..0058761f 100644
--- a/client/controllers/WebPublisherContentListsController.js
+++ b/client/controllers/WebPublisherContentListsController.js
@@ -49,10 +49,9 @@ export function WebPublisherContentListsController($scope, publisher, publisherH
          * @description Sets the active view name to the given value
          */
         getThumbnail(article) {
-            return publisherHelpers.getThumbnail(article);
+            return publisherHelpers.getRenditionUrl(article, 'thumbnail');
         }
 
-
         /**
          * @ngdoc method
          * @name WebPublisherContentListsController#changeTab
diff --git a/client/controllers/WebPublisherOutputController.js b/client/controllers/WebPublisherOutputController.js
index 7c24000f..b1ae9399 100644
--- a/client/controllers/WebPublisherOutputController.js
+++ b/client/controllers/WebPublisherOutputController.js
@@ -8,8 +8,8 @@
  * @requires https://docs.angularjs.org/api/ng/type/$rootScope.Scope $scope
  * @description WebPublisherOutputController holds a set of functions used for web publisher monitoring
  */
-WebPublisherOutputController.$inject = ['$scope', '$sce', 'modal', 'publisher', 'authoringWorkspace', '$window', 'notify', '$interval', 'config'];
-export function WebPublisherOutputController($scope, $sce, modal, publisher, authoringWorkspace, $window, notify, $interval, config) {
+WebPublisherOutputController.$inject = ['$scope', '$sce', 'modal', 'publisher', 'publisherHelpers', 'authoringWorkspace', '$window', 'notify', '$interval', 'config'];
+export function WebPublisherOutputController($scope, $sce, modal, publisher, publisherHelpers, authoringWorkspace, $window, notify, $interval, config) {
     class WebPublisherOutput {
         constructor() {
             this.filterButtonAllActive = true;
@@ -189,6 +189,16 @@ export function WebPublisherOutputController($scope, $sce, modal, publisher, aut
             if (!this.publishOpen) this.selectedArticle = null;
         }
 
+        /**
+         * @ngdoc method
+         * @name WebPublisherOutputController#getThumbnail
+         * @param {Object} article - article content object
+         * @description Sets the active view name to the given value
+         */
+        getViewImage(article) {
+            return publisherHelpers.getRenditionUrl(article, 'viewImage');
+        }
+
         /**
          * @ngdoc method
          * @name WebPublisherOutputController#countPageViews
diff --git a/client/directives/groupArticle/view.html b/client/directives/groupArticle/view.html
index 4d079b62..4cb0d709 100644
--- a/client/directives/groupArticle/view.html
+++ b/client/directives/groupArticle/view.html
@@ -39,11 +39,18 @@
             </div>
         </div>
         <div class="sd-list-item__action-menu sd-list-item__action-menu--direction-row">
-            <button class="icn-btn" ng-if="rootType === 'incoming'" ng-click="webPublisherOutput.removeArticle(i); $event.stopPropagation();"><i class="icon-trash"></i></button>
-            <button class="icn-btn" ng-click="webPublisherOutput.correctArticle(i); $event.stopPropagation();"><i class="icon-pencil"></i></button>
-            <button class="icn-btn" ng-click="webPublisherOutput.openPublish(i, 'publish'); $event.stopPropagation();"><i class="icon-expand-thin"></i></button>
+            <button sd-tooltip="Remove" class="icn-btn" ng-if="rootType === 'incoming'" ng-click="webPublisherOutput.removeArticle(i); $event.stopPropagation();"><i class="icon-trash"></i></button>
+            <button sd-tooltip="Correct" class="icn-btn" ng-click="webPublisherOutput.correctArticle(i); $event.stopPropagation();"><i class="icon-pencil"></i></button>
+            <button sd-tooltip="Publish" class="icn-btn" ng-click="webPublisherOutput.openPublish(i, 'publish'); $event.stopPropagation();"><i class="icon-expand-thin"></i></button>
         </div>
     </div>
 
     <div ng-if="loadingArticles" class="item-group__loading" style="margin-left: auto; margin-right: auto; line-height: 38px; height: 38px; text-align: center;"></div>
 </div>
+
+<div class="panel-info" ng-if="!loadingArticles && !articlesList.length">
+    <div class="panel-info__icon">
+        <i class="big-icon--text"></i>
+    </div>
+    <h3 class="panel-info__heading">No {{rootType}} articles.</h3>
+</div>
\ No newline at end of file
diff --git a/client/services/PublisherHelpers.js b/client/services/PublisherHelpers.js
index 403e3513..83c6881f 100644
--- a/client/services/PublisherHelpers.js
+++ b/client/services/PublisherHelpers.js
@@ -10,15 +10,16 @@ export function PublisherHelpersFactory() {
 
         /**
          * @ngdoc method
-         * @name PublisherHelpers#getThumbnail
+         * @name PublisherHelpers#getRenditionUrl
          * @param {Object} article
+         * @param {String} type
          * @returns {String}
-         * @description Returns template url dependent on type
+         * @description Returns image rendition url
          */
-        getThumbnail(article) {
+        getRenditionUrl(article, type = 'thumbnail') {
             let base = article.tenant.subdomain ? '//' + article.tenant.subdomain + '.' + article.tenant.domainName : '//' + article.tenant.domainName;
             let mediaEl = article.media.find(el => el.id === article.featureMedia.id);
-            let rendition = mediaEl.renditions.find(el => el.name === 'thumbnail');
+            let rendition = mediaEl.renditions.find(el => el.name === type);
 
             return base + '/media/' + rendition.image.assetId + '.' + rendition.image.fileExtension;
         };
diff --git a/client/views/output/preview-pane.html b/client/views/output/preview-pane.html
index 2b079c50..071fea16 100644
--- a/client/views/output/preview-pane.html
+++ b/client/views/output/preview-pane.html
@@ -52,6 +52,9 @@ <h3 class="side-panel__heading">Item preview</h3>
 
         <div class="side-panel__content-block">
             <h3 class="side-panel__content-block-heading">{{webPublisherOutput.selectedArticle.headline}}</h3>
+            <img ng-if="webPublisherOutput.selectedArticle.articles[0].featureMedia && webPublisherOutput.selectedArticle.articles[0].featureMedia.image"
+                ng-src="{{webPublisherOutput.getViewImage(webPublisherOutput.selectedArticle.articles[0])}}"
+                style="max-width:100%">
             <div class="side-panel__content-block-text" ng-bind-html="webPublisherOutput.bodyHtml"></div>
         </div>
     </div>
diff --git a/client/views/settings/website-management/manage-routes.html b/client/views/settings/website-management/manage-routes.html
index 850acfa0..ecd1121d 100644
--- a/client/views/settings/website-management/manage-routes.html
+++ b/client/views/settings/website-management/manage-routes.html
@@ -44,6 +44,11 @@ <h3 class="side-panel__heading" ng-if="!webPublisherSettings.isObjEmpty(webPubli
                                     <label for="routeName" translate>name</label>
                                     <input type="text" class="line-input" id="routeName" ng-model="newRoute.name" required>
                                 </div>
+                                <div class="item" ng-class="{'sd-line-input sd-line-input--invalid': newRoute.id}">
+                                        <label for="routeSlug" translate>slug</label>
+                                        <input type="text" class="line-input" id="routeSlug" ng-model="newRoute.slug">
+                                        <div ng-if="newRoute.id" class="sd-line-input__message">Beware than changing slug will affect article urls and may cause SEO issues.</div>
+                                    </div>
                                 <div class="item">
                                     <label for="routeType" translate>type</label>
                                     <select class="dropdown__toggle line-input" id="routeType" ng-model="newRoute.type" required>