From 5cef41fdbd13b6da365e3430d3a4b655b4fb51b8 Mon Sep 17 00:00:00 2001 From: James Allen Date: Tue, 24 Jun 2014 20:28:53 +0100 Subject: [PATCH] Allow selecting of theme --- .../Features/Project/ProjectController.coffee | 10 +++ .../Features/User/UserPagesController.coffee | 8 --- services/web/app/views/project/editor.jade | 30 ++++++++- services/web/public/coffee/app/ide.coffee | 6 ++ .../app/ide/settings/SettingsManager.coffee | 12 ++++ .../web/public/stylesheets/app/editor.less | 67 +++++++++++++------ 6 files changed, 104 insertions(+), 29 deletions(-) create mode 100644 services/web/public/coffee/app/ide/settings/SettingsManager.coffee diff --git a/services/web/app/coffee/Features/Project/ProjectController.coffee b/services/web/app/coffee/Features/Project/ProjectController.coffee index 9acf660026..63dc83354d 100644 --- a/services/web/app/coffee/Features/Project/ProjectController.coffee +++ b/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 + diff --git a/services/web/app/coffee/Features/User/UserPagesController.coffee b/services/web/app/coffee/Features/User/UserPagesController.coffee index 18df005320..df7211d1bd 100644 --- a/services/web/app/coffee/Features/User/UserPagesController.coffee +++ b/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 \ No newline at end of file diff --git a/services/web/app/views/project/editor.jade b/services/web/app/views/project/editor.jade index 75f0e6650e..46eb3557ca 100644 --- a/services/web/app/views/project/editor.jade +++ b/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" diff --git a/services/web/public/coffee/app/ide.coffee b/services/web/public/coffee/app/ide.coffee index ec16f6fa15..abd7e6bead 100644 --- a/services/web/public/coffee/app/ide.coffee +++ b/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"]) \ No newline at end of file diff --git a/services/web/public/coffee/app/ide/settings/SettingsManager.coffee b/services/web/public/coffee/app/ide/settings/SettingsManager.coffee new file mode 100644 index 0000000000..18d8e10204 --- /dev/null +++ b/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 diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less index 2c2e0ada1e..db9eccd263 100644 --- a/services/web/public/stylesheets/app/editor.less +++ b/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; @@ -238,4 +231,40 @@ } .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; } \ No newline at end of file