Add in chat pane and sort out layout resizing

services/web/app/views/project/editor.jade

@@ -35,17 +35,32 @@ block content
 
 		include ./editor/left-menu
 
-		include ./editor/header
+		#chat-wrapper(
+			layout="chat",
+			spacing-open="12",
+			spacing-closed="0",
+			initial-size-east="250",
+			init-closed-east="true",
+			open-east="ui.chatOpen",
+			ng-hide="state.loading",
+			ng-cloak
+		)
+			.ui-layout-center
+				include ./editor/header
 
-		include ./editor/share
+				include ./editor/share
 
-		#ide-body(ng-cloak, layout="main", ng-hide="state.loading")
-			.ui-layout-west
-				include ./editor/file-tree
+				#ide-body(ng-cloak, layout="main", ng-hide="state.loading", resize-on="layout:chat:resize")
+					.ui-layout-west
+						include ./editor/file-tree
+
+					.ui-layout-center
+						include ./editor/editor
+						include ./editor/track-changes
+
+			.ui-layout-east
+				| Chat!
 
-			.ui-layout-center
-				include ./editor/editor
-				include ./editor/track-changes
 
 	script(src='/socket.io/socket.io.js')
 

services/web/app/views/project/editor/editor.jade

@@ -2,6 +2,8 @@ div.full-size(
 	ng-show="ui.view == 'editor'"
 	layout="pdf"
 	resize-on="layout:main:resize"
+	resize-proportionally="true"
+	initial-size-east="'50%'"
 )
 	.ui-layout-center
 		.loading-panel(ng-show="!editor.sharejs_doc || editor.opening")

services/web/app/views/project/editor/header.jade

@@ -29,5 +29,12 @@ header.toolbar.toolbar-header(ng-cloak, ng-hide="state.loading")
 			tooltip-placement="bottom"
 		)
 			i.fa.fa-fw.fa-history
-		a.btn.btn-full-height(href='#', tooltip="Chat", tooltip-placement="bottom")
+		a.btn.btn-full-height(
+			href,
+			tooltip="Chat",
+			tooltip-placement="bottom",
+			ng-class="{ active: ui.chatOpen }",
+			ng-click="toggleChat()",
+			ng-controller="ChatButtonController"
+		)
 			i.fa.fa-fw.fa-comment

services/web/public/coffee/app/ide.coffee

@@ -8,6 +8,7 @@ define [
 	"ide/pdf/PdfManager"
 	"ide/settings/index"
 	"ide/share/index"
+	"ide/chat/index"
 	"ide/directives/layout"
 	"ide/services/ide"
 	"directives/focus"
@@ -40,6 +41,7 @@ define [
 		$scope.ui = {
 			leftMenuShown: false
 			view: "editor"
+			chatOpen: false
 		}
 		$scope.user = window.user
 		$scope.settings = window.userSettings

services/web/public/coffee/app/ide/chat/controllers/ChatButtonController.coffee

@@ -0,0 +1,7 @@
+define [
+	"base"
+], (App) ->
+	App.controller "ChatButtonController", ["$scope", ($scope) ->
+		$scope.toggleChat = () ->
+			$scope.ui.chatOpen = !$scope.ui.chatOpen
+	]

services/web/public/coffee/app/ide/chat/index.coffee

@@ -0,0 +1,3 @@
+define [
+	"ide/chat/controllers/ChatButtonController"
+], () ->

services/web/public/coffee/app/ide/directives/layout.coffee

@@ -1,46 +1,101 @@
 define [
 	"base"
 ], (App) ->
-	App.directive "layout", () ->
+	App.directive "layout", ["$parse", ($parse) ->
 		return {
-			link: (scope, element, attrs) ->
-				name = attrs.layout
-
-				options =
-					spacing_open: 24
-					spacing_closed: 24
-					onresize: () =>
-						onResize()
-					maskIframesOnResize: scope.$eval(
-						attrs.maskIframesOnResize or "false"
-					)
-
-				onResize = () ->
-					state = element.layout().readState()
-					scope.$broadcast "layout:#{name}:resize", state
-					repositionControls()
-
-				# Restore previously recorded state
-				if (state = $.localStorage("layout.#{name}"))?
-					options.west = state.west
-					options.east = state.east
-
-				element.layout options
-				element.layout().resizeAll()
-
-				if attrs.resizeOn?
-					scope.$on attrs.resizeOn, () -> element.layout().resizeAll()
-
-				# Save state when exiting
-				$(window).unload () ->
-					$.localStorage("layout.#{name}", element.layout().readState())
-
-				repositionControls = () ->
-					state = element.layout().readState()
-					if state.east?
-						element.find(".ui-layout-resizer-controls").css({
-							position: "absolute"
-							right: state.east.size
-							"z-index": 10
-						})
-		}
+			compile: () ->
+				pre: (scope, element, attrs) ->
+					name = attrs.layout
+
+					if attrs.spacingOpen?
+						spacingOpen = parseInt(attrs.spacingOpen, 10)
+					else
+						spacingOpen = 24
+
+					if attrs.spacingClosed?
+						spacingClosed = parseInt(attrs.spacingClosed, 10)
+					else
+						spacingClosed = 24
+
+					options =
+						spacing_open: spacingOpen
+						spacing_closed: spacingClosed
+						slidable: false
+						onresize: () =>
+							onInternalResize()
+						maskIframesOnResize: scope.$eval(
+							attrs.maskIframesOnResize or "false"
+						)
+						east:
+							size: scope.$eval(attrs.initialSizeEast)
+							initClosed: scope.$eval(attrs.initClosedEast)
+						west:
+							size: scope.$eval(attrs.initialSizeEast)
+							initClosed: scope.$eval(attrs.initClosedWest)
+
+					# Restore previously recorded state
+					if (state = $.localStorage("layout.#{name}"))?
+						options.west = state.west
+						options.east = state.east
+
+					# Someone moved the resizer
+					onInternalResize = () ->
+						state = element.layout().readState()
+						scope.$broadcast "layout:#{name}:resize", state
+						repositionControls()
+						resetOpenStates()
+
+					oldWidth = element.width()
+					# Something resized our parent element
+					onExternalResize = () ->
+						console.log "EXTERNAL RESIOZE", name, attrs.resizeProportionally
+						if attrs.resizeProportionally? and scope.$eval(attrs.resizeProportionally)
+							eastState = element.layout().readState().east
+							if eastState?
+								newInternalWidth = eastState.size / oldWidth * element.width()
+								oldWidth = element.width()
+								element.layout().sizePane("east", newInternalWidth)
+								return
+							
+						element.layout().resizeAll()
+
+					element.layout options
+					element.layout().resizeAll()
+
+					if attrs.resizeOn?
+						scope.$on attrs.resizeOn, () -> onExternalResize()
+
+					# Save state when exiting
+					$(window).unload () ->
+						$.localStorage("layout.#{name}", element.layout().readState())
+
+					repositionControls = () ->
+						state = element.layout().readState()
+						if state.east?
+							element.find("> .ui-layout-resizer-controls").css({
+								position: "absolute"
+								right: state.east.size
+								"z-index": 10
+							})
+
+					resetOpenStates = () ->
+						state = element.layout().readState()
+						if attrs.openEast?
+							openEast = $parse(attrs.openEast)
+							openEast.assign(scope, !state.east.initClosed)
+
+					if attrs.openEast?
+						scope.$watch attrs.openEast, (value, oldValue) ->
+							console.log "Open East", value, oldValue
+							if value? and value != oldValue
+								if value
+									element.layout().open("east")
+								else
+									element.layout().close("east")
+							setTimeout () ->
+								scope.$digest()
+							, 0
+
+					resetOpenStates()
+		}
+	]

services/web/public/coffee/app/ide/pdf/controllers/PdfController.coffee

@@ -227,7 +227,6 @@ define [
 	App.controller "PdfSynctexController", ["$scope", "synctex", "ide", ($scope, synctex, ide) ->
 		$scope.showControls = true
 		$scope.$on "layout:pdf:resize", (event, data) ->
-			console.log "RESIZE DATA", data.east
 			if data.east.initClosed
 				$scope.showControls = false
 			else

services/web/public/stylesheets/app/editor.less

@@ -22,6 +22,13 @@
 	margin-left: -200px;
 }
 
+#chat-wrapper {
+	.full-size;
+	> .ui-layout-resizer > .ui-layout-toggler {
+		display: none !important;
+	}
+}
+
 #ide-body {
 	.full-size;
 	top: 40px;