From a4c23120069471efea42f3173445b54ccb2a6eb1 Mon Sep 17 00:00:00 2001
From: Ahmad Hamed <ahmad.fhamed@gmail.com>
Date: Wed, 15 Mar 2017 10:59:57 +0200
Subject: [PATCH] add upload progress bar to main page + fixes on transition &
 background service

---
 widget/app.service.js                        |  6 +-
 widget/assets/css/style.css                  | 73 +++++++++-----------
 widget/controllers/widget.wall.controller.js |  7 +-
 widget/index.html                            | 41 +++++------
 4 files changed, 63 insertions(+), 64 deletions(-)

diff --git a/widget/app.service.js b/widget/app.service.js
index 0585882..c86c084 100644
--- a/widget/app.service.js
+++ b/widget/app.service.js
@@ -491,6 +491,7 @@
                 _this.newPostTimerChecker = null;
                 _this.newPostAvailable = false;
                 _this.newCommentsAvailable = false;
+                _this.pauseNewPostBgService = false;
                 _this.comments = [];
 
             };
@@ -591,7 +592,7 @@
                 }
 
                 function checkNewPostsAvailability() {
-                    if($rootScope.postBusy)
+                    if(_this.pauseNewPostBgService)
                         return;
 
                     console.log('getPosts called');
@@ -611,6 +612,9 @@
                         headers: {'Content-Type': 'application/json'},
                         silent:true
                     }).then(function (response) {
+                        if(_this.pauseNewPostBgService)
+                            return;
+
                         var _newPostsAvailable = false;
                         if (response
                             && response.data
diff --git a/widget/assets/css/style.css b/widget/assets/css/style.css
index 3ebb307..1a8133d 100644
--- a/widget/assets/css/style.css
+++ b/widget/assets/css/style.css
@@ -595,19 +595,17 @@ textarea {
 }
 
 .slide-right.ng-enter {
-    transform: translateX(60px);
-    -ms-transform: translateX(60px);
-    -webkit-transform: translateX(60px);
+    transform: translateX(100%);
+    -ms-transform: translateX(100%);
+    -webkit-transform: translateX(100%);
     transition-duration: 250ms;
     -webkit-transition-duration: 250ms;
-    opacity: 0;
 }
 
 .slide-right.ng-enter-active {
     transform: translateX(0);
     -ms-transform: translateX(0);
     -webkit-transform: translateX(0);
-    opacity: 1;
 }
 
 .slide-right.ng-leave {
@@ -616,14 +614,12 @@ textarea {
     -webkit-transform: translateX(0);
     transition-duration: 250ms;
     -webkit-transition-duration: 250ms;
-    opacity: 1;
 }
 
 .slide-right.ng-leave-active {
-    transform: translateX(60px);
-    -ms-transform: translateX(60px);
-    -webkit-transform: translateX(60px);
-    opacity: 0;
+    transform: translateX(100%);
+    -ms-transform: translateX(100%);
+    -webkit-transform: translateX(100%);
 }
 
 .slide-right.ng-hide-add {
@@ -632,31 +628,27 @@ textarea {
     -webkit-transform: translateX(0);
     transition-duration: 250ms;
     -webkit-transition-duration: 250ms;
-    opacity: 1;
 }
 
 .slide-right.ng-hide-add.ng-hide-add-active {
-    transform: translateX(60px);
-    -ms-transform: translateX(60px);
-    -webkit-transform: translateX(60px);
-    opacity: 0;
+    transform: translateX(100%);
+    -ms-transform: translateX(100%);
+    -webkit-transform: translateX(100%);
 }
 
 .slide-right.ng-hide-remove {
-    transform: translateX(60px);
-    -ms-transform: translateX(60px);
-    -webkit-transform: translateX(60px);
+    transform: translateX(100%);
+    -ms-transform: translateX(100%);
+    -webkit-transform: translateX(100%);
     transition-duration: 250ms;
     -webkit-transition-duration: 250ms;
     display: block !important;
-    opacity: 0;
 }
 
 .slide-right.ng-hide-remove.ng-hide-remove-active {
     transform: translateX(0);
     -ms-transform: translateX(0);
     -webkit-transform: translateX(0);
-    opacity: 1;
 }
 /* ------------------------------------------- */
 /* Slide Left
@@ -677,19 +669,17 @@ textarea {
 }
 
 .slide-left.ng-enter {
-    transform: translateX(-60px);
-    -ms-transform: translateX(-60px);
-    -webkit-transform: translateX(-60px);
+    transform: translateX(-100%);
+    -ms-transform: translateX(-100%);
+    -webkit-transform: translateX(-100%);
     transition-duration: 250ms;
     -webkit-transition-duration: 250ms;
-    opacity: 0;
 }
 
 .slide-left.ng-enter-active {
     transform: translateX(0);
     -ms-transform: translateX(0);
     -webkit-transform: translateX(0);
-    opacity: 1;
 }
 
 .slide-left.ng-leave {
@@ -698,14 +688,12 @@ textarea {
     -webkit-transform: translateX(0);
     transition-duration: 250ms;
     -webkit-transition-duration: 250ms;
-    opacity: 1;
 }
 
 .slide-left.ng-leave-active {
-    transform: translateX(-60px);
-    -ms-transform: translateX(-60px);
-    -webkit-transform: translateX(-60px);
-    opacity: 0;
+    transform: translateX(-100%);
+    -ms-transform: translateX(-100%);
+    -webkit-transform: translateX(-100%);
 }
 
 .slide-left.ng-hide-add {
@@ -714,31 +702,27 @@ textarea {
     -webkit-transform: translateX(0);
     transition-duration: 250ms;
     -webkit-transition-duration: 250ms;
-    opacity: 1;
 }
 
 .slide-left.ng-hide-add.ng-hide-add-active {
-    transform: translateX(-60px);
-    -ms-transform: translateX(-60px);
-    -webkit-transform: translateX(-60px);
-    opacity: 0;
+    transform: translateX(-100%);
+    -ms-transform: translateX(-100%);
+    -webkit-transform: translateX(-100%);
 }
 
 .slide-left.ng-hide-remove {
-    transform: translateX(-60px);
-    -ms-transform: translateX(-60px);
-    -webkit-transform: translateX(-60px);
+    transform: translateX(-100%);
+    -ms-transform: translateX(-100%);
+    -webkit-transform: translateX(-100%);
     transition-duration: 250ms;
     -webkit-transition-duration: 250ms;
     display: block !important;
-    opacity: 0;
 }
 
 .slide-left.ng-hide-remove.ng-hide-remove-active {
     transform: translateX(0);
     -ms-transform: translateX(0);
     -webkit-transform: translateX(0);
-    opacity: 1;
 }
 /*
     End Animation
@@ -755,6 +739,15 @@ textarea {
     -webkit-overflow-scrolling:touch;
 }
 /* Comment Box */
+.small-post-box{
+    position: relative;
+}
+    .small-post-box .image-upload-queue{
+        position: absolute;
+        top: -78px;
+        width: 90%;
+    }
+
 .has-comment-box {
     height: calc(100% - 39px)
 }
diff --git a/widget/controllers/widget.wall.controller.js b/widget/controllers/widget.wall.controller.js
index 6d93321..5f5159f 100644
--- a/widget/controllers/widget.wall.controller.js
+++ b/widget/controllers/widget.wall.controller.js
@@ -104,7 +104,7 @@
             WidgetWall.createPost = function ($event) {
                 var checkuserAuthPromise = checkUserIsAuthenticated();
                 checkuserAuthPromise.then(function (response) {
-                    $rootScope.postBusy = true;
+                    WidgetWall.SocialItems.pauseNewPostBgService = true;
                     if (!$rootScope.$$phase) $rootScope.$digest();
                     WidgetWall.closePostSection();
 
@@ -214,6 +214,7 @@
                         WidgetWall.waitAPICompletion = false;
                         var _postIndex = WidgetWall.SocialItems.items.indexOf(postData);
                         WidgetWall.SocialItems.items.splice(_postIndex,1);
+                        WidgetWall.SocialItems.pauseNewPostBgService = false;
                     } else if (response.data.result) {
                         Buildfire.messaging.sendMessageToControl({
                             name: EVENTS.POST_CREATED,
@@ -228,7 +229,7 @@
                         });
 
                         if (!$scope.$$phase) $scope.$digest();
-                        $rootScope.postBusy = false;
+                        WidgetWall.SocialItems.pauseNewPostBgService = false;
                         if (userIds.indexOf(response.data.result.userId.toString()) == -1) {
                             userIds.push(response.data.result.userId.toString());
                         }
@@ -280,7 +281,7 @@
                 var error = function (err) {
                     var _postIndex = WidgetWall.SocialItems.items.indexOf(postData);
                     WidgetWall.SocialItems.items.splice(_postIndex,1);
-                    $rootScope.postBusy = false;
+                    WidgetWall.SocialItems.pauseNewPostBgService = false;
                     console.log('Error while creating post ', err);
                     WidgetWall.postText = '';
                     WidgetWall.picFile = '';
diff --git a/widget/index.html b/widget/index.html
index 1c6a6c9..68eebbc 100644
--- a/widget/index.html
+++ b/widget/index.html
@@ -143,8 +143,17 @@ <h5 class="text-center margin-top-fifteen">You do not have any posts yet.</h5>
         <div ng-show="WidgetWall.SocialItems.userDetails.userId == null || WidgetWall.createThreadPermission"
              class="holder padding-zero bottom-post backgroundColorTheme" ng-class="{'full-post-section':WidgetWall.goFullScreen}">
             <hr class="small">
-            <form ng-submit="" handle-phone-submit ng-show="!WidgetWall.goFullScreen">
+            <form class="small-post-box" ng-submit="" handle-phone-submit ng-show="!WidgetWall.goFullScreen">
                 <div class="post-holder clearfix">
+                    <div class="image-upload-queue ng-cloak" ng-if="WidgetWall.imageSelected">
+                        <div class="uploadifive-queue-item"><a ng-click="WidgetWall.cancelImageSelect()"
+                                                               class="btn-delete-icon cross-icon"></a>
+                            <div><span class="filename">{{WidgetWall.imageName}}</span></div>
+                            <div class="progress" ng-if="WidgetWall.showImageLoader">
+                                <div class="progress-bar"></div>
+                            </div>
+                        </div>
+                    </div>
                     <div class="add-media">
                         <a>
                     <span class="icon icon-camera2 text-primary" ng-click="WidgetWall.openPostSection()"></span>
@@ -161,15 +170,7 @@ <h5 class="text-center margin-top-fifteen">You do not have any posts yet.</h5>
                         <input type="submit" class="text-primary send-btn" value="Post"
                                ng-click="WidgetWall.createPost($event)">
                     </div>
-                    <!--<div class="image-upload-queue ng-cloak" ng-if="WidgetWall.imageSelected">-->
-                        <!--<div class="uploadifive-queue-item"><a ng-click="WidgetWall.cancelImageSelect()"-->
-                                                               <!--class="btn-delete-icon cross-icon"></a>-->
-                            <!--<div><span class="filename">{{WidgetWall.imageName}}</span></div>-->
-                            <!--<div class="progress" ng-if="WidgetWall.showImageLoader">-->
-                                <!--<div class="progress-bar"></div>-->
-                            <!--</div>-->
-                        <!--</div>-->
-                    <!--</div>-->
+
                 </div>
             </form>
 
@@ -196,6 +197,16 @@ <h5 class="text-center margin-top-fifteen">You do not have any posts yet.</h5>
                     <textarea rows="1" cols="30" placeholder="Type your message..." name="text"
                               ng-model="WidgetWall.postText" class="text-area-custom backgroundColorTheme text-primary"></textarea>
                     </div>
+                    <div class="image-upload-queue ng-cloak" ng-if="WidgetWall.imageSelected">
+                        <div class="uploadifive-queue-item titleBarBackgroundTheme">
+                            <a ng-click="WidgetWall.cancelImageSelect()"
+                               class="btn-delete-icon cross-icon titleBarTextAndIcons"></a>
+                            <div><span class="filename titleBarTextAndIcons">{{WidgetWall.imageName}}</span></div>
+                            <div class="progress" ng-if="WidgetWall.showImageLoader">
+                                <div class="progress-bar titleBarTextAndIcons"></div>
+                            </div>
+                        </div>
+                    </div>
                     <div class="media-section border-top-grey">
                         <a>
                     <span class="icon icon-camera2 text-primary" ngf-select="WidgetWall.uploadImage($file)"
@@ -208,16 +219,6 @@ <h5 class="text-center margin-top-fifteen">You do not have any posts yet.</h5>
                         </a>
 
                     </div>
-                    <div class="image-upload-queue ng-cloak" ng-if="WidgetWall.imageSelected">
-                        <div class="uploadifive-queue-item titleBarBackgroundTheme">
-                            <a ng-click="WidgetWall.cancelImageSelect()"
-                                                               class="btn-delete-icon cross-icon titleBarTextAndIcons"></a>
-                            <div><span class="filename titleBarTextAndIcons">{{WidgetWall.imageName}}</span></div>
-                            <div class="progress" ng-if="WidgetWall.showImageLoader">
-                                <div class="progress-bar titleBarTextAndIcons"></div>
-                            </div>
-                        </div>
-                    </div>
             </form>
         </div>
     </div>