Allow selecting of theme

services/web/app/coffee/Features/Project/ProjectController.coffee

@@ -13,6 +13,7 @@ SubscriptionLocator = require("../Subscription/SubscriptionLocator")
 _ = require("underscore")
 Settings = require("settings-sharelatex")
 SecurityManager = require("../../managers/SecurityManager")
+fs = require "fs"
 
 module.exports = ProjectController =
 
@@ -196,6 +197,7 @@ module.exports = ProjectController =
 					chatUrl: Settings.apis.chat.url
 					anonymous: anonymous
 					languages: Settings.languages
+					themes: THEME_LIST
 					timer.done()
 
 	_buildProjectList: (ownedProjects, sharedProjects, readOnlyProjects)->
@@ -257,3 +259,11 @@ defaultSettingsForAnonymousUser = (user_id)->
 		dropbox: false
 		trackChanges: false
 
+THEME_LIST = []
+do generateThemeList = () ->
+	files = fs.readdirSync __dirname + '/../../../../public/js/ace/theme'
+	for file in files
+		if file.slice(-2) == "js"
+			cleanName = file.slice(0,-3)
+			THEME_LIST.push cleanName
+

services/web/app/coffee/Features/User/UserPagesController.coffee

@@ -42,11 +42,3 @@ module.exports =
 					fontSizes: ['10','11','12','13','14','16','20','24']
 					languages: Settings.languages,
 					accountSettingsTabActive: true
-
-THEME_LIST = []
-do generateThemeList = () ->
-	files = fs.readdirSync __dirname + '/../../../../public/js/ace/theme'
-	for file in files
-		if file.slice(-2) == "js"
-			cleanName = file.slice(0,-3)
-			THEME_LIST.push name: cleanName

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

@@ -33,8 +33,34 @@ block content
 			.alert.alert-warning.small(ng-if="connection.reconnecting")
 				strong Reconnecting...
 
+		aside#left-menu(
+			ng-class="{ 'shown': ui.leftMenuShown }"
+			ng-cloak
+		)
+			h4 Settings
+			form
+				.form-controls
+					label(for="theme") Theme
+					select.form-control(
+						name="theme"
+						ng-model="settings.theme"
+					)
+						each theme in themes
+							option(value=theme) #{theme}
+
+		#left-menu-mask(
+			ng-show="ui.leftMenuShown",
+			ng-click="ui.leftMenuShown = false"
+			ng-cloak
+		)
+
 		header.toolbar.toolbar-header(ng-cloak, ng-hide="state.loading")
-			a.btn.btn-full-height(href='#', tooltip="Menu", tooltip-placement="bottom")
+			a.btn.btn-full-height(
+				href,
+				ng-click="ui.leftMenuShown = true"
+				tooltip="Menu",
+				tooltip-placement="bottom"
+			)
 				i.fa.fa-bars
 
 			span.name {{ project.name }}
@@ -60,7 +86,7 @@ block content
 				#editor(
 					ace-editor,
 					ng-show="!!editor.sharejs_doc && !editor.opening"
-					theme="'cobalt'",
+					theme="settings.theme",
 					show-print-margin="false",
 					sharejs-doc="editor.sharejs_doc",
 					last-updated="editor.last_updated"

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

@@ -3,6 +3,7 @@ define [
 	"ide/file-tree/FileTreeManager"
 	"ide/connection/ConnectionManager"
 	"ide/editor/EditorManager"
+	"ide/settings/SettingsManager"
 	"ide/directives/layout"
 	"ide/services/ide"
 	"directives/focus"
@@ -13,12 +14,16 @@ define [
 	FileTreeManager
 	ConnectionManager
 	EditorManager
+	SettingsManager
 ) ->
 	App.controller "IdeController", ["$scope", "$timeout", "ide", ($scope, $timeout, ide) ->
 		$scope.state = {
 			loading: true
 			load_progress: 40
 		}
+		$scope.ui = {
+			leftMenuShown: false
+		}
 
 		window._ide = ide
 
@@ -28,6 +33,7 @@ define [
 		ide.connectionManager = new ConnectionManager(ide, $scope)
 		ide.fileTreeManager = new FileTreeManager(ide, $scope)
 		ide.editorManager = new EditorManager(ide, $scope)
+		ide.settingsManager = new SettingsManager(ide, $scope)
 	]
 
 	angular.bootstrap(document.body, ["SharelatexApp"])

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

@@ -0,0 +1,12 @@
+define [], () ->
+	class SettingsManager
+		constructor: (@ide, @$scope) ->
+			@$scope.settings = window.userSettings
+
+			@$scope.$watch "settings.theme", (theme, oldTheme) =>
+				if theme != oldTheme
+					@saveSettings({theme: theme})
+
+		saveSettings: (data) ->
+			data._csrf = window.csrfToken
+			@ide.$http.post "/user/settings", data

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

@@ -1,3 +1,11 @@
+.full-size {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+}
+
 .global-alerts {
 	position: absolute;
 	z-index: 20;
@@ -154,27 +162,16 @@
 }
 
 #ide-body {
-	position: absolute;
+	.full-size;
 	top: 40px;
-	bottom: 0;
-	left: 0;
-	right: 0;
 }
 
 #editor {
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
+	.full-size;
 }
 
 .loading {
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
+	.full-size;
 	padding-top: 10rem;
 	font-family: @font-family-serif;
 	text-align: center;
@@ -183,11 +180,7 @@
 
 // The internal components of the aceEditor directive
 .ace-editor-wrapper {
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
+	.full-size;
 	.undo-conflict-warning {
 		position: absolute;
 		top: 0;
@@ -239,3 +232,39 @@
 .ui-layout-resizer-dragging {
 	background-color: #ddd;
 }
+
+#left-menu {
+	position: absolute;
+	width: 210px;
+	padding: 10px;
+	top: 0;
+	bottom: 0;
+	background-color: #f4f4f4;
+	z-index: 100;
+	overflow: auto;
+	-webkit-transition: left ease-in-out 0.35s;
+	transition: left ease-in-out 0.35s;
+
+	left: -280px;
+	&.shown {
+		left: 0;
+	}
+
+	h4 {
+		font-family: @font-family-serif;
+		font-weight: 400;
+		font-size: 1rem;
+		margin: (@line-height-computed / 2) 0;
+		padding-bottom: (@line-height-computed / 4);
+		color: @gray-light;
+		border-bottom: 1px solid @gray-light;
+		text-transform: uppercase;
+	}
+}
+
+#left-menu-mask {
+	.full-size;
+	opacity: 0.4;
+	background-color: #999;
+	z-index: 99;
+}