New room types

client/stylesheets/base.less

@@ -6,7 +6,7 @@
 @import url(http://fonts.googleapis.com/css?family=Muli:400,300,500);
 @footer-min-height: 70px;
 @header-min-height: 60px;
-@rooms-box-width: 220px;
+@rooms-box-width: 260px;
 @primary-background-color: #0b1628;
 @secondary-background-color: #F4F4F4;
 @tertiary-background-color: #E9E9E9;
@@ -993,6 +993,78 @@ a.github-fork {
 			direction: ltr;
 			padding-left: 8px;
 		}
+		.nav-flex {
+			background-color: lighten(@primary-background-color, 15%);
+			position: fixed;
+			top: 0;
+			left: 0;
+			z-index: 1000;
+			// padding-top: 15px;
+			width: @rooms-box-width;
+			// .calc(width, @rooms-box-width ~'  - 10px');
+			.calc(height, ~'100% - ' @footer-min-height);
+			.transition(transform .3s cubic-bezier(.5, 0, .1, 1));
+			&._hidden {
+				.transform(translateX(-100%));
+			}
+			&.private-group-flex {
+				// background-color: #FFFFFF;
+			}
+			.close-nav-flex {
+				background-color: transparent;
+				border: none;
+				float: right;
+				color: #FFFFFF;
+				cursor: pointer;
+				line-height: @header-min-height;
+			}
+			h4 {
+				color: #FFFFFF;
+				text-align: center;
+				line-height: @header-min-height;
+				background-color: lighten(@primary-background-color, 10%);
+			}
+			.wrapper {
+				padding: 1em;
+
+				label {
+					color: #FFFFFF;
+					margin-top: 1em;
+					display: inline-block;
+				}
+
+				.selected-users {
+					min-height: 1em;
+					li {
+						background-color: #FFF;
+						display: inline-block;
+						border-radius: 3px;
+						padding: 4px;
+						margin: 1px 0;
+						i {
+							color: #000000;
+							cursor: pointer;
+						}
+					}
+				}
+
+				.buttons {
+					text-align: center;
+					margin-top: 1em;
+				}
+			}
+		}
+		h3 {
+			&.add-room {
+				&:hover {
+					color: #AAA;
+				}
+				i {
+					float: right;
+					margin-right: 0.5em;
+				}
+			}
+		}
 	}
 	.header {
 		position: absolute;

client/views/app/asideNav/channels.coffee

@@ -0,0 +1,89 @@
+Template.channels.helpers
+	tRoomMembers: ->
+		return t('chatRooms.Members_placeholder')
+
+	rooms: ->
+		return ChatSubscription.find { uid: Meteor.userId(), t: { $in: ['c']}, f: { $ne: true } }, { sort: 'rn': 1 }
+
+	selectedUsers: ->
+		return Template.instance().selectedUsers.get()
+
+	name: ->
+		return Template.instance().selectedUserNames[this.valueOf()]
+
+	autocompleteSettings: ->
+		return {
+			limit: 10
+			# inputDelay: 300
+			rules: [
+				{
+					# @TODO maybe change this 'collection' and/or template
+					collection: 'UserAndRoom'
+					subscription: 'roomSearch'
+					field: 'name'
+					template: Template.roomSearch
+					noMatchTemplate: Template.roomSearchEmpty
+					matchAll: true
+					filter:
+						type: 'u'
+						$and: [
+							{ _id: { $ne: Meteor.userId() } }
+							{ _id: { $nin: Template.instance().selectedUsers.get() } }
+						]
+					sort: 'name'
+				}
+			]
+		}
+
+Template.channels.events
+	'click .add-room': (e, instance) ->
+		$('.channel-flex').removeClass('_hidden')
+
+		instance.clearForm()
+		$('#channel-name').focus()
+
+	'click .close-nav-flex': ->
+		$('.channel-flex').addClass('_hidden')
+
+	'autocompleteselect #channel-members': (event, instance, doc) ->
+		instance.selectedUsers.set instance.selectedUsers.get().concat doc._id
+
+		instance.selectedUserNames[doc._id] = doc.name
+
+		event.currentTarget.value = ''
+		event.currentTarget.focus()
+
+	'click .remove-room-member': (e, instance) ->
+		self = @
+
+		users = Template.instance().selectedUsers.get()
+		users = _.reject Template.instance().selectedUsers.get(), (_id) ->
+			return _id is self.valueOf()
+
+		Template.instance().selectedUsers.set(users)
+
+		$('#channel-members').focus()
+
+	'click .cancel-channel': (e, instance) ->
+		$('.channel-flex').addClass('_hidden')
+
+	'click .save-channel': (e, instance) ->
+		Meteor.call 'createChannel', instance.find('#channel-name').value, instance.selectedUsers.get(), (err, result) ->
+			if err
+				return toastr.error err.reason
+
+			$('.channel-flex').addClass('_hidden')
+
+			instance.clearForm()
+
+			Router.go 'room', { _id: result.rid }
+
+Template.channels.onCreated ->
+	instance = this
+	instance.selectedUsers = new ReactiveVar []
+	instance.selectedUserNames = {}
+
+	instance.clearForm = ->
+		instance.selectedUsers.set([])
+		instance.find('#channel-name').value = ''
+		instance.find('#channel-members').value = ''

client/views/app/asideNav/channels.html

@@ -0,0 +1,37 @@
+<template name="channels">
+	<h3 class="add-room">
+		{{_ "chatRooms.Channels"}}
+		<i class="icon-plus-circled"></i>
+	</h3>
+
+	<ul>
+		{{#each rooms}}
+			{{> chatRoomItem }}
+		{{/each}}
+	</ul>
+
+	<div class="nav-flex channel-flex _hidden">
+		<button class="close-nav-flex"><i class="icon-left-open"></i></button>
+		<h4>{{_ "chatRooms.Channels"}}</h4>
+
+		<div class="wrapper">
+			<label for="channel-name">{{_ "chatRooms.Name"}}</label>
+			<input type="text" id="channel-name" placeholder="room-name">
+
+			<label for="channel-members">{{_ "chatRooms.Members" }}</label>
+			{{> inputAutocomplete settings=autocompleteSettings id="channel-members" class="search" placeholder=tRoomMembers autocomplete="off"}}
+
+			<label>{{_ "chatRooms.Selected_users" }}</label>
+			<ul class="selected-users">
+				{{#each selectedUsers}}
+					<li>{{name}} <i class="icon-cancel remove-room-member"></i></li>
+				{{/each}}
+			</ul>
+
+			<div class="buttons">
+				<button class="-btn primary save-channel">{{_ "chatRooms.Save" }}</button>
+				<button class="-btn cancel-channel">{{_ "chatRooms.Cancel" }}</button>
+			</div>
+		</div>
+	</div>
+</template>

client/views/app/asideNav/chatRoomItem.coffee

@@ -21,7 +21,8 @@ Template.chatRoomItem.helpers
 	roomIcon: ->
 		switch this.t
 			when 'd' then return 'icon-at'
-			when 'g' then return 'icon-hash'
+			when 'c' then return 'icon-hash'
+			when 'p' then return 'icon-lock'
 
 	active: ->
 		return 'active' if Router.current().params._id? and Router.current().params._id is this.rid

client/views/app/asideNav/chatRoomItem.html

@@ -7,7 +7,7 @@
 			<i class="{{roomIcon}} {{userStatus}}"></i>
 			<span>{{name}}</span>
 			<span class='opt'>
-				<i class="icon-cancel-circled hide-room" title="{{_ "chatRoomItem.Hide_room"}}"></i>
+				{{!-- <i class="icon-cancel-circled hide-room" title="{{_ "chatRoomItem.Hide_room"}}"></i> --}}
 				{{#if canLeave}}
 					<i class="icon-logout leave-room" title="{{_ "chatRoomItem.Leave_room"}}"></i>
 				{{/if}}

client/views/app/asideNav/directMessages.coffee

@@ -0,0 +1,3 @@
+Template.directMessages.helpers
+	rooms: ->
+		return ChatSubscription.find { uid: Meteor.userId(), t: { $in: ['d']}, f: { $ne: true } }, { sort: 'rn': 1 }

client/views/app/asideNav/directMessages.html

@@ -0,0 +1,12 @@
+<template name="directMessages">
+	<h3 class="add-room">
+		{{_ "chatRooms.Direct_Messages"}}
+		<i class="icon-plus-circled"></i>
+	</h3>
+
+	<ul>
+		{{#each rooms}}
+			{{> chatRoomItem }}
+		{{/each}}
+	</ul>
+</template>

client/views/app/asideNav/privateGroups.coffee

@@ -0,0 +1,89 @@
+Template.privateGroups.helpers
+	tRoomMembers: ->
+		return t('chatRooms.Members_placeholder')
+
+	rooms: ->
+		return ChatSubscription.find { uid: Meteor.userId(), t: { $in: ['p']}, f: { $ne: true } }, { sort: 'rn': 1 }
+
+	selectedUsers: ->
+		return Template.instance().selectedUsers.get()
+
+	name: ->
+		return Template.instance().selectedUserNames[this.valueOf()]
+
+	autocompleteSettings: ->
+		return {
+			limit: 10
+			# inputDelay: 300
+			rules: [
+				{
+					# @TODO maybe change this 'collection' and/or template
+					collection: 'UserAndRoom'
+					subscription: 'roomSearch'
+					field: 'name'
+					template: Template.roomSearch
+					noMatchTemplate: Template.roomSearchEmpty
+					matchAll: true
+					filter:
+						type: 'u'
+						$and: [
+							{ _id: { $ne: Meteor.userId() } }
+							{ _id: { $nin: Template.instance().selectedUsers.get() } }
+						]
+					sort: 'name'
+				}
+			]
+		}
+
+Template.privateGroups.events
+	'click .add-room': (e, instance) ->
+		$('.private-group-flex').removeClass('_hidden')
+
+		instance.clearForm()
+		$('#pvt-group-name').focus()
+
+	'click .close-nav-flex': ->
+		$('.private-group-flex').addClass('_hidden')
+
+	'autocompleteselect #pvt-group-members': (event, instance, doc) ->
+		instance.selectedUsers.set instance.selectedUsers.get().concat doc._id
+
+		instance.selectedUserNames[doc._id] = doc.name
+
+		event.currentTarget.value = ''
+		event.currentTarget.focus()
+
+	'click .remove-room-member': (e, instance) ->
+		self = @
+
+		users = Template.instance().selectedUsers.get()
+		users = _.reject Template.instance().selectedUsers.get(), (_id) ->
+			return _id is self.valueOf()
+
+		Template.instance().selectedUsers.set(users)
+
+		$('#pvt-group-members').focus()
+
+	'click .cancel-pvt-group': (e, instance) ->
+		$('.private-group-flex').addClass('_hidden')
+
+	'click .save-pvt-group': (e, instance) ->
+		Meteor.call 'createPrivateGroup', instance.find('#pvt-group-name').value, instance.selectedUsers.get(), (err, result) ->
+			if err
+				return toastr.error err.reason
+
+			$('.private-group-flex').addClass('_hidden')
+
+			instance.clearForm()
+
+			Router.go 'room', { _id: result.rid }
+
+Template.privateGroups.onCreated ->
+	instance = this
+	instance.selectedUsers = new ReactiveVar []
+	instance.selectedUserNames = {}
+
+	instance.clearForm = ->
+		instance.selectedUsers.set([])
+		instance.find('#pvt-group-name').value = ''
+		instance.find('#pvt-group-members').value = ''