clean up seamail user list with toggle switch

lib/seamail/Controller.js

@@ -8,6 +8,7 @@
 
 	var autocompleteTemplate = require('ngtemplate!html!./autocomplete-template.html');
 	var seamailTemplate = require('ngtemplate!html!./seamail.html');
+	var userListTemplate = require('ngtemplate!html!./user-list.html');
 
 	angular.module('cruisemonkey.seamail.Controller', [
 		'cruisemonkey.Config',
@@ -82,9 +83,20 @@
 			}
 		};
 	})
+	.controller('CMSeamailUserListCtrl', function($log, $scope) {
+		$scope.userList = {
+			closed: true
+		};
+		$scope.toggle = function(ev) {
+			ev.preventDefault();
+			ev.stopPropagation();
+			$scope.userList.closed = !$scope.userList.closed;
+		};
+	})
 	.controller('CMSeamailCtrl', function($interval, $ionicPopup, $log, $scope, $stateParams, SettingsService, Twitarr, UserService) {
 		$log.info('CMSeamailCtrl Initializing.');
 
+		$scope.userListTemplate = userListTemplate;
 		$scope.user = UserService.get();
 		$scope.seamail = undefined;
 		$scope.newMessage = { text: undefined };
@@ -168,6 +180,7 @@
 	.controller('CMSeamailsCtrl', function($q, $scope, $interval, $log, $timeout, $ionicModal, $ionicPopup, $ionicScrollDelegate, NewSeamail, SeamailService, SettingsService, Twitarr, UserService) {
 		$log.info('CMSeamailsCtrl Initializing.');
 
+		$scope.userListTemplate = userListTemplate;
 		$scope.user = UserService.get();
 		$scope.unread = 0;
 

lib/seamail/seamail.html

@@ -15,12 +15,10 @@
 		</ion-list>
 		<ion-scroll>
 			<ion-refresher pulling-text="Pull to refresh..." on-refresh="refreshMessages()"></ion-refresher>
-			<ion-scroll class="users" direction="x">
-				<span class="user" ng-click="openUser(user.username, $event)" ng-repeat="user in seamail.users">
-					<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>
-			</ion-scroll>
 			<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>

lib/seamail/seamails.html

@@ -10,12 +10,8 @@
 			<ion-item ng-repeat="seamail in seamails track by seamail.id" class="item-text-wrap" href="#/tab/seamail/{{seamail.id}}">
 				<div class="title"><i ng-if="seamail.is_unread" class="icon ion-record blue"></i> {{seamail.subject}}</div>
 				<div class="messages">{{seamail.messages}}</div>
-				<div class="time">{{seamail.timestamp.format('dddd, MMMM Do, h:mma')}}</div>
-				<ion-scroll class="users" direction="x">
-					<span class="user" ng-click="openUser(user.username, $event)" ng-repeat="user in seamail.users">
-						<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>
-				</ion-scroll>
+				<div class="timestamp">{{seamail.timestamp.format('dddd, MMMM Do, h:mma')}}</div>
+				<div ng-include="userListTemplate"></div>
 			</ion-item>
 		</ion-list>
 	</ion-content>

lib/seamail/user-list.html

@@ -0,0 +1,19 @@
+<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>
+		</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
+			</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>

scss/cruisemonkey.scss

@@ -752,26 +752,34 @@ ion-popover-view.fit ion-content {
 
 .seamail {
 	.users {
+		overflow: visible;
+		white-space: normal;
 		padding: 2px;
-		margin: 0;
+		/*margin: 0;*/
 		min-height: 25px;
 		img {
 			min-height: 15px;
 			max-height: 26px;
 			min-width: 15px;
 			max-width: 26px;
 			border-radius: 3px;
-			padding: 5px;
+			padding: 2px 5px;
 			vertical-align: middle;
 		}
+		.toggle {
+			/*
+			margin: 0;
+			padding: 5px 0;
+			*/
+			display: block;
+			width: 100%;
+			font-size: $font-size-base - 1px;
+		}
 		.user {
-			padding: 5px;
-			padding-left: 8px;
-			padding-right: 8px;
+			display: inline-block;
+			padding: 2px 5px;
 			white-space: nowrap;
-			/* display: table-cell; */
 			vertical-align: middle;
-			/* max-height: 30px; */
 		}
 	}
 	.timestamp {