new room types

client/stylesheets/base.less

@@ -7,7 +7,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;
@@ -992,6 +992,80 @@ 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: 5px;
+						padding: 4px;
+						float: left;
+						margin-right: 4px;
+						i {
+							color: #000000;
+							cursor: pointer;
+						}
+					}
+				}
+
+				.buttons {
+					text-align: center;
+					margin-top: 2em;
+				}
+			}
+		}
+		h3 {
+			button.add-room {
+				background-color: transparent;
+				border: none;
+				float: right;
+				color: #666;
+
+				i:hover {
+					color: #CCC;
+				}
+			}
+		}
 	}
 	.header {
 		position: absolute;

client/views/app/asideNav/channels.html

+<template name="channels">
+	<h3>
+		{{_ "chatRooms.Channels"}}
+		<button class="add-room"><i class="icon-plus-circled"></i></button>
+	</h3>
+</template>

client/views/app/asideNav/directMessages.html

+<template name="directMessages">
+	<h3>
+		{{_ "chatRooms.Direct_Messages"}}
+		<button class="add-room"><i class="icon-plus-circled"></i></button>
+	</h3>
+</template>

client/views/app/asideNav/privateGroups.coffee

+Template.privateGroups.helpers
+	tRoomMembers: ->
+		'User'
+
+	selectedUsers: ->
+		console.log 'selected ->',Template.instance().selectedUsers.get()
+		return Template.instance().selectedUsers.get()
+
+	name: ->
+		console.log 'dado ->',this.valueOf()
+		return Template.instance().selectedUserNames[this.valueOf()]
+
+	autocompleteSettingsRoomSearch: ->
+		console.log 'nin ->',Template.instance().selectedUsers.get()
+		return {
+			limit: 10
+			# inputDelay: 300
+			rules: [
+				{
+					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) ->
+		instance.selectedUsers.set([])
+
+		$('.private-group-flex').removeClass('_hidden')
+
+		$('#pvt-room-name').focus()
+
+	'click .close-nav-flex': ->
+		$('.private-group-flex').addClass('_hidden')
+
+	'autocompleteselect #pvt-room-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()
+
+		console.log doc, instance.selectedUsers.get()
+
+	'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-room-members').focus()
+
+Template.privateGroups.onCreated ->
+	this.selectedUsers = new ReactiveVar []
+	this.selectedUserNames = {}

client/views/app/asideNav/privateGroups.html

+<template name="privateGroups">
+	<h3>
+		{{_ "chatRooms.Private_Groups"}}
+		<button class="add-room"><i class="icon-plus-circled"></i></button>
+	</h3>
+
+	<ul>
+		{{#each privateRooms}}
+			{{> chatRoomItem }}
+		{{/each}}
+
+		{{!-- <li><a href="{{ pathFor 'privateHistory' }}"><i class="icon-history"></i> {{_ "general.History"}}</a></li> --}}
+	</ul>
+
+	<div class="nav-flex private-group-flex _hidden">
+		<button class="close-nav-flex"><i class="icon-left-open"></i></button>
+		<h4>{{_ "chatRooms.Private_Groups"}}</h4>
+
+		<div class="wrapper">
+			<label for="pvt-room-name">Name</label>
+			<input type="text" id="pvt-room-name" placeholder="room-name">
+
+			<label for="pvt-room-members">Members</label>
+			{{> inputAutocomplete settings=autocompleteSettingsRoomSearch id="pvt-room-members" class="search" placeholder=tRoomMembers autocomplete="off"}}
+
+			<label>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</button>
+				<button class="-btn">Cancel</button>
+			</div>
+		</div>
+	</div>
+</template>

client/views/app/asideNav/chatRooms.html → client/views/app/asideNav/sideNav.html

-<template name="chatRooms">
+<template name="sideNav">
 	<aside class="side-nav" role="navigation">
 		<header class="header">
 			{{> userStatus}}
@@ -6,19 +6,13 @@
 		{{#if currentUser}}
 			<div class="rooms-list">
 				<div class="wrapper">
-					<h3>{{_ "chatRooms.Favorites"}}</h3>
-					<ul>
-						{{#each favoriteRooms}}
-							{{> chatRoomItem }}
-						{{/each}}
-					</ul>
-					<h3>{{_ "chatRooms.Recents"}}</h3>
-					<ul>
-						{{#each recentRooms}}
-							{{> chatRoomItem }}
-						{{/each}}
-						<li><a href="{{ pathFor 'privateHistory' }}"><i class="icon-history"></i> {{_ "general.History"}}</a></li>
-					</ul>
+					{{> starredRooms }}
+
+					{{> channels }}
+
+					{{> directMessages }}
+
+					{{> privateGroups }}
 				</div>
 			</div>
 		{{/if}}

client/views/app/asideNav/starredRooms.html

+<template name="starredRooms">
+	<h3>{{_ "chatRooms.Favorites"}}</h3>
+
+	<ul>
+		{{#each favoriteRooms}}
+			{{> chatRoomItem }}
+		{{/each}}
+	</ul>
+</template>

client/views/app/layout.html

@@ -5,7 +5,7 @@
 		<main class="main-content cf_ {{flexOpened}}">
 			{{> yield}}
 		</main>
-		{{> chatRooms }}
+		{{> sideNav }}
 	</div>
 	{{> audioNotification }}
 </template>

i18n/en.i18n.json

@@ -21,7 +21,10 @@
 	"chatRooms": {
 		"Favorites": "Favorites",
 		"Powered_by": "Powered by",
-		"Recents": "Recents"
+		"Recents": "Recents",
+		"Channels": "Channels",
+		"Direct_Messages": "Direct Messages",
+		"Private_Groups": "Private Groups"
 	},
 	"chatWindowDashboard": {
 		"Add_users": "Add users",