fix seamail detail to be more like an IM window

RangerRick · Jan 24, 2016 · c3c251b · c3c251b
1 parent 4707645
commit c3c251b
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 37 deletions.
diff --git a/lib/seamail/Controller.js b/lib/seamail/Controller.js
@@ -5,6 +5,7 @@
 
 	require('../util/array-monkeypatch');
 	require('../images/Cache');
+	var hashFunc = require('string-hash/index');
 
 	var autocompleteTemplate = require('ngtemplate!html!./autocomplete-template.html');
 	var seamailTemplate = require('ngtemplate!html!./seamail.html');
@@ -87,13 +88,18 @@
 		$scope.userList = {
 			closed: true
 		};
+
+		if ($scope.listView === undefined) {
+			$scope.listView = false;
+		}
+
 		$scope.toggle = function(ev) {
 			ev.preventDefault();
 			ev.stopPropagation();
 			$scope.userList.closed = !$scope.userList.closed;
 		};
 	})
-	.controller('CMSeamailCtrl', function($interval, $ionicPopup, $log, $q, $scope, $stateParams, SettingsService, Twitarr, UserService) {
+	.controller('CMSeamailCtrl', function($interval, $ionicPopover, $ionicPopup, $ionicScrollDelegate, $log, $q, $scope, $stateParams, SettingsService, Twitarr, UserService) {
 		$log.info('CMSeamailCtrl Initializing.');
 
 		$scope.userListTemplate = userListTemplate;
@@ -126,6 +132,15 @@
 			}
 		};
 
+		var popover = $ionicPopover.fromTemplate('<ion-popover-view class="fit seamail"><span ng-include="userListTemplate"></span></ion-popover-view>', {
+			scope: $scope
+		});
+		popover.scope.listView = true;
+
+		$scope.openUserList = function(ev) {
+			popover.show(ev);
+		};
+
 		$scope.doRefresh = function() {
 			if (!UserService.loggedIn()) {
 				$log.info('CMSeamailCtrl.doRefresh(): not logged in');
@@ -138,7 +153,15 @@
 			$scope.user = UserService.get();
 			return Twitarr.getSeamailMessages($stateParams.id).then(function(res) {
 				if (res.seamail && res.seamail.messages) {
+					for (var i=0, len=res.seamail.messages.length, message; i < len; i++) {
+						message = res.seamail.messages[i];
+						message.hash = hashFunc(message.author + message.text + message.timestamp);
+					}
+					res.seamail.messages = res.seamail.messages.reverse();
 					$scope.seamail = res.seamail;
+					//$log.debug('seamail=' + angular.toJson($scope.seamail));
+					$scope.$broadcast('scroll.refreshComplete');
+					$ionicScrollDelegate.$getByHandle('seamail').scrollBottom();
 				}
 				return res;
 			}).finally(function() {

diff --git a/lib/seamail/seamail.html b/lib/seamail/seamail.html
@@ -1,31 +1,23 @@
-<ion-view class="seamail" title="{{seamail.subject}}">
-	<ion-content class="seamail" scroll="false">
+<ion-view class="seamail" title="Seamail Detail">
+	<ion-nav-buttons size="primary">
+		<button class="button button-icon icon cm-icon-people" ng-click="openUserList($event)"></button>
+	</ion-nav-buttons>
+	<ion-content class="seamail" delegate-handle="seamail">
 		<ion-list>
-			<ion-item class="item item-avatar">
-				<img cm-cache img-src="{{twitarrRoot}}api/v2/user/photo/{{user.username}}" ng-if="twitarrRoot &amp;&amp; user.username" />
-				<div class="row">
-					<div class="col">
-						<textarea required wrap="soft" ng-model="newMessage.text" ng-trim="true" placeholder="Add a message to this discussion..." style="resize: none; width: 100%" rows="5"></textarea>
-					</div>
-					<div class="col col-post">
-						<button class="button button-small button-icon icon cm-icon-send icon-navy" style="float: right" ng-click="postMessage()" ng-disabled="form.$invalid"></button>
-					</div>
-				</div>
+			<ion-item ng-repeat="message in seamail.messages track by message.hash" class="item item-avatar item-text-wrap">
+				<img cm-cache img-src="{{twitarrRoot}}api/v2/user/photo/{{message.author}}" title="{{message.author_display_name}}" ng-if="twitarrRoot &amp;&amp; message.author" />
+				<div class="display-name">{{message.author_display_name}} <span class="display-handle">@{{message.author}}</span></div>
+				<p ng-bind-html="message.text"></p>
+				<div class="timestamp">{{message.timestamp.fromNow()}}</div>
 			</ion-item>
 		</ion-list>
-		<ion-scroll>
-			<ion-refresher pulling-text="Pull to refresh..." on-refresh="refreshMessages()"></ion-refresher>
-			<ion-list>
-				<ion-item>
-					<div ng-include="userListTemplate"></div>
-				</ion-item>
-				<ion-item ng-repeat="message in seamail.messages track by $index" class="item item-avatar item-text-wrap">
-					<img cm-cache img-src="{{twitarrRoot}}api/v2/user/photo/{{message.author}}" title="{{message.author_display_name}}" ng-if="twitarrRoot &amp;&amp; message.author" />
-					<div class="display-name">{{message.author_display_name}} <span class="display-handle">@{{message.author}}</span></div>
-					<p ng-bind-html="message.text"></p>
-					<div class="timestamp">{{message.timestamp.fromNow()}}</div>
-				</ion-item>
-			</ion-list>
-		</ion-scroll>
 	</ion-content>
+	<form name="newMessageForm" ng-submit="postMessage()" novalidate>
+		<ion-footer-bar class="bar-light message-footer">
+			<textarea required wrap="soft" ng-model="newMessage.text" ng-trim="true" placeholder="Add a message to this discussion..." style="resize: none; width: 100%" rows="2"></textarea>
+			<div class="footer-btn-wrap">
+				<button class="button button-icon icon cm-icon-send footer-btn icon-navy" style="float: right" ng-disabled="form.$invalid"></button>
+			</div>
+		</ion-footer-bar>
+	</form>
 </ion-view>
diff --git a/lib/seamail/user-list.html b/lib/seamail/user-list.html
@@ -1,17 +1,24 @@
 <span ng-controller="CMSeamailUserListCtrl" class="user-list">
-	<div class="users" ng-if="userList.closed">
-		<div class="toggle">
-			<span ng-click="toggle($event)">
-				<i class="icon ion-android-arrow-dropright-circle"></i> Show Users
-			</span>
+	<span ng-if="!listView">
+		<div class="users" ng-if="userList.closed &amp;&amp; seamail.users.length >= 3">
+			<div class="toggle">
+				<span ng-click="toggle($event)">
+					<i class="icon ion-android-arrow-dropright-circle"></i> {{seamail.users.length}} Users
+				</span>
+			</div>
 		</div>
-	</div>
-	<div class="users" ng-if="!userList.closed">
-		<div class="toggle">
-			<span ng-click="toggle($event)">
-				<i class="icon ion-android-arrow-dropdown-circle"></i> Hide Users
+		<div class="users" ng-if="!userList.closed || seamail.users.length <= 2">
+			<div class="toggle" ng-if="seamail.users.length >= 3">
+				<span ng-click="toggle($event)">
+					<i class="icon ion-android-arrow-dropdown-circle"></i> Hide Users
+				</span>
+			</div>
+			<span class="user" ng-click="openUser(user.username, $event)" ng-repeat="user in seamail.users track by user.username">
+				<img cm-cache img-src="{{twitarrRoot}}api/v2/user/photo/{{user.username}}" title="{{user.display_name}}" ng-if="twitarrRoot &amp;&amp; user.username" /> {{user.username}}
 			</span>
 		</div>
+	</span>
+	<div class="users list-view" ng-if="listView">
 		<span class="user" ng-click="openUser(user.username, $event)" ng-repeat="user in seamail.users track by user.username">
 			<img cm-cache img-src="{{twitarrRoot}}api/v2/user/photo/{{user.username}}" title="{{user.display_name}}" ng-if="twitarrRoot &amp;&amp; user.username" /> {{user.username}}
 		</span>

diff --git a/scss/cruisemonkey.scss b/scss/cruisemonkey.scss
@@ -195,6 +195,9 @@ ion-tabs {
 .cm-icon-music-note {
 	@extend .ion-music-note;
 }
+.cm-icon-people {
+	@extend .ion-android-people;
+}
 .cm-icon-plus {
 	@extend .ion-plus;
 }
@@ -283,6 +286,9 @@ ion-tabs {
 	.cm-icon-music-note {
 		@extend .ion-ios-musical-notes;
 	}
+	.cm-icon-people {
+		@extend .ion-ios-people;
+	}
 	.cm-icon-plus {
 		@extend .ion-ios-plus-empty;
 	}
@@ -798,6 +804,9 @@ ion-popover-view.fit ion-content {
 			white-space: nowrap;
 			vertical-align: middle;
 		}
+		&.list-view .user {
+			display: block;
+		}
 	}
 	.title {
 		font-family: $headings-font-family;
@@ -821,6 +830,16 @@ ion-popover-view.fit ion-content {
 		max-width: 50px;
 		padding: 0;
 	}
+
+	.bar {
+		&.bar-light {
+			@include bar-style(white, $cmBackgroundAlternate, $cmForeground);
+			&.bar-footer {
+				background-image: none;
+				border-top: 1px solid $cmBackgroundAlternate;
+			}
+		}
+	}
 }
 
 .searchable {