Improve UE

Author: ouzhenkun

www/app/messages/messages.controller.coffee

@@ -1,9 +1,11 @@
 angular.module('ionic-nodeclub')
 
 .controller 'MessagesCtrl', (
+  toast
   $scope
-  messageService
   $stateParams
+  $ionicLoading
+  messageService
 ) ->
 
   loadMessages = (refresh) ->
@@ -26,7 +28,13 @@ angular.module('ionic-nodeclub')
     doRefresh: ->
       loadMessages(refresh = true)
     markAsRead: ->
+      $ionicLoading.show()
       messageService.markAllAsRead()
-        .then -> loadMessages(refresh = true)
+        .then ->
+          $ionicLoading.hide()
+          toast $scope.hasnot_read_messages.length + '个被标记为已读'
+          loadMessages(refresh = true)
+        .catch ->
+          $ionicLoading.hide()
 
   loadMessages(refresh = false)

www/app/messages/messages.html

@@ -1,10 +1,5 @@
 <ion-view view-title="我的消息">
   <ion-nav-buttons side="right">
-    <button class="button button-small button-positive"
-            ng-click="markAsRead()"
-            ng-if="hasnot_read_messages.length">
-      标记为已读
-    </button>
   </ion-nav-buttons>
   <!-- TODO overflow-scroll="true" -->
   <ion-content>
@@ -13,12 +8,21 @@
                    spinner="spiral"
                    on-refresh="doRefresh()">
     </ion-refresher>
+    <div class="text-center padding"
+         ng-if="loading && !hasnot_read_messages">
+      <ion-spinner icon="spiral"></ion-spinner>
+      <p>加载中...</p>
+    </div>
+    <div class="padding text-center"
+         ng-if="error">
+      囧，出错啦...
+    </div>
     <div class="list">
       <message-tile ng-repeat="message in hasnot_read_messages track by message.id"
                     message="message">
       </message-tile>
       <div class="item"
-           ng-if="!hasnot_read_messages.length && !loading && !error">
+           ng-if="!hasnot_read_messages.length && hasnot_read_messages && !error">
         暂无未读消息
       </div>
       <div ng-if="has_read_messages.length"
@@ -27,14 +31,8 @@
                     message="message">
       </message-tile>
     </div>
-    <div class="text-center padding"
-         ng-if="loading && !has_read_messages && !hasnot_read_messages">
-      <ion-spinner icon="spiral"></ion-spinner>
-      <p>加载中...</p>
-    </div>
-    <div class="padding text-center"
-         ng-if="error">
-      囧，出错啦...
-    </div>
   </ion-content>
+  <button class="button-float button button-stable icon icon-done-all"
+          ng-if="!hasnot_read_messages.length"
+          ng-click="markAsRead()"></button>
 </ion-view>

www/app/scss/_button.scss

@@ -14,6 +14,9 @@
     left: -1px;
     bottom: -5px;
   }
+  span {
+    margin: 0 !important;
+  }
 }
 .header-avatar-button {
   line-height: 34px;
@@ -37,10 +40,28 @@
     color: $button-positive-active-bg !important;
   }
 }
+.button-float {
+  position: fixed;
+  bottom: 16px;
+  right: 16px;
+  border: none;
+  border-radius: 50%;
+  min-width: 3em;
+  min-height: 3em;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+  z-index: 20;
+  @include transition(0.2s linear);
+  @include transition-property('background-color, box-shadow');
+  &.active,
+  &.activated {
+    box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.36) !important;
+  }
+}
 .reply-button {
   margin-left: 0 !important;
   font-size: 16px !important;
   border: none;
+  background-color: #EEE;
 }
 .new-reply {
   background: none;

www/app/scss/_icon.scss

@@ -1,20 +1,26 @@
+.icon-person {
+ @extend .ion-ios-person-outline;
+}
 .icon-new-topic {
-  @extend .ion-ios-compose-outline;
+  @extend .ion-ios-paperplane;
 }
-.icon-more {
-  @extend .ion-ios-more;
+.icon-more-action {
+  @extend .ion-android-more-vertical;
 }
 .icon-close {
   @extend .ion-ios-close-empty;
 }
+.icon-done-all {
+  @extend .ion-android-done-all;
+}
 
 .platform-android {
+  .icon-person {
+   @extend .ion-android-person;
+  }
   .icon-new-topic {
     @extend .ion-android-add;
   }
-  .icon-more {
-    @extend .ion-android-more-vertical;
-  }
   .icon-close {
     @extend .ion-android-close;
   }

www/app/services/auth.service.coffee

@@ -25,7 +25,7 @@ angular.module('ionic-nodeclub')
         .then (user) ->
           toast '登录成功，欢迎您: ' + user.loginname
           $scope.loginModal?.hide()
-        .catch (error) ->
+        , (error) ->
           toast '登录失败: ' + error?.data?.error_msg
 
   $ionicModal
@@ -47,11 +47,13 @@ angular.module('ionic-nodeclub')
         .all('accessToken')
         .post(accesstoken: token)
         .then (user) ->
+          $ionicLoading.hide()
           storage.set 'user', angular.extend(user, token: token)
           $rootScope.$broadcast 'auth.userUpdated', user
           resolve user
-        .catch reject
-        .finally $ionicLoading.hide
+        , (error) ->
+          $ionicLoading.hide()
+          reject(error)
 
   #
   # 我要在初始化的时候检查localStorage的token是否合法

www/app/topic/topic-popover.html

@@ -1,6 +1,7 @@
 angular.module('ionic-nodeclub')
 
 .controller 'TopicCtrl', (
+  API
   toast
   $scope
   $state
@@ -11,24 +12,14 @@ angular.module('ionic-nodeclub')
   topicService
   $stateParams
   $ionicPopover
+  $ionicActionSheet
 ) ->
 
-  $ionicPopover.fromTemplateUrl 'app/topic/topic-popover.html',
-    scope: $scope
-  .then (popover) ->
-    $scope.popover = popover
-
   angular.extend $scope,
     loading: false
     isCollected: false
     error: null
     topic: null
-    popover: null
-
-    hidePopover: (event) ->
-      $timeout ->
-        $scope.popover.hide(event)
-      , 100
 
     loadTopic: (reload = false) ->
       $scope.loading = true
@@ -44,19 +35,16 @@ angular.module('ionic-nodeclub')
       authService
         .isAuthenticated()
         .then ->
-          userService.collectTopic topic
-            .then ->
-              $scope.isCollected = true
-              toast '收藏成功'
-
-    deCollectTopic: (topic) ->
-      authService
-        .isAuthenticated()
-        .then ->
-          userService.deCollectTopic topic
-            .then ->
-              $scope.isCollected = false
-              toast '已取消收藏'
+          if $scope.isCollected
+            userService.deCollectTopic topic
+              .then ->
+                $scope.isCollected = false
+                toast '已取消收藏'
+          else
+            userService.collectTopic topic
+              .then ->
+                $scope.isCollected = true
+                toast '收藏成功'
 
     replyTopic: ->
       authService
@@ -70,6 +58,34 @@ angular.module('ionic-nodeclub')
         .then (me) ->
           $state.go 'app.user', loginname:me.loginname
 
+    showTopicAction: ->
+      $ionicActionSheet.show
+        buttons: [
+          text: '重新加载'
+        ,
+          text: '回复话题'
+        ,
+          text: if !$scope.isCollected then '收藏话题' else '取消收藏'
+        ,
+          text: '关于作者'
+        ,
+          text: '浏览器打开'
+        ]
+        buttonClicked: (index) ->
+          switch index
+            when 0
+              $scope.loadTopic(true)
+            when 1
+              $scope.replyTopic()
+            when 2
+              $scope.collectTopic()
+            when 3
+              $state.go 'app.user', loginname: $scope.topic.author.loginname
+            else
+              window.open "#{API.server}/topic/#{$stateParams.topicId}", '_system'
+          return true
+
+
 
   $scope.loadTopic()
   userService.checkCollect $stateParams.topicId

www/app/topic/topic.controller.coffee

@@ -5,10 +5,6 @@
             ng-if="topic">
       {{topic.reply_count}}回复
     </button>
-    <button class="button button-icon icon icon-more"
-            ng-if="popover"
-            ng-click="popover.show($event)">
-    </button>
   </ion-nav-buttons>
   <!-- TODO overflow-scroll="true" -->
   <ion-content>
@@ -40,10 +36,17 @@ <h3>{{topic.title}}</h3>
          ui-sref="app.replies({topicId: topic.id})">
       <span ng-if="topic.reply_count">
         {{topic.reply_count}} 回复
+        <small class="text-note"> -
+          <span am-time-ago="topic.last_reply_at">
+          </span>
+        </small>
       </span>
       <span ng-if="!topic.reply_count">
         暂无回复
       </span>
     </div>
   </ion-content>
+  <button class="button-float button button-stable icon icon-more-action"
+          ng-if="!hasnot_read_messages.length"
+          ng-click="showTopicAction()"></button>
 </ion-view>

www/app/topic/topic.html

@@ -5,15 +5,17 @@ angular.module('ionic-nodeclub')
   toast
   $scope
   $timeout
+  authService
   $ionicModal
   $stateParams
-  authService
+  $ionicPopover
   topicService
   $ionicScrollDelegate
 ) ->
 
   $ionicModal
-    .fromTemplateUrl('app/topics/new-topic-modal.html', scope: $scope)
+    .fromTemplateUrl 'app/topics/new-topic-modal.html',
+      scope: $scope
     .then (modal) ->
       $scope.newTopicModal = modal
 

www/app/topics/topics.controller.coffee

@@ -1,9 +1,7 @@
 <ion-view view-title="{{selectedTab | tabLabel}}">
   <ion-nav-buttons side="right">
-    <button class="button button-icon icon icon-new-topic"
-            ng-click="createNewTopic()"></button>
     <span ng-if="!me">
-      <button class="button button-icon icon ion-ios-person-outline"
+      <button class="button button-icon icon icon-person"
               ng-click="auth.login()"></button>
     </span>
     <span ng-if="me">
@@ -14,8 +12,6 @@
              ng-src="{{me.avatar_url | prefixUrl}}">
       </a>
     </span>
-    <button class="button button-icon icon icon-more"
-            ng-click="more()"></button>
   </ion-nav-buttons>
   <!-- TODO overflow-scroll="true" -->
   <ion-content delegate-handle="topics-handle">
@@ -61,4 +57,6 @@ <h2>{{topic.title}}</h2>
       <span ng-if="error">囧，出错啦...</span>
     </div>
   </ion-content>
+  <button class="button-float button button-assertive icon icon-new-topic"
+          ng-click="createNewTopic()"></button>
 </ion-view>