From ab09a865b89f74eec6d961cc516958c24876bf8a Mon Sep 17 00:00:00 2001 From: James Allen Date: Wed, 2 Jul 2014 13:23:04 +0100 Subject: [PATCH] Add in chat pane and sort out layout resizing --- services/web/app/views/project/editor.jade | 35 +++-- .../web/app/views/project/editor/editor.jade | 2 + .../web/app/views/project/editor/header.jade | 9 +- services/web/public/coffee/app/ide.coffee | 2 + .../controllers/ChatButtonController.coffee | 7 + .../public/coffee/app/ide/chat/index.coffee | 3 + .../coffee/app/ide/directives/layout.coffee | 125 +++++++++++++----- .../ide/pdf/controllers/PdfController.coffee | 1 - .../web/public/stylesheets/app/editor.less | 7 + 9 files changed, 144 insertions(+), 47 deletions(-) create mode 100644 services/web/public/coffee/app/ide/chat/controllers/ChatButtonController.coffee create mode 100644 services/web/public/coffee/app/ide/chat/index.coffee diff --git a/services/web/app/views/project/editor.jade b/services/web/app/views/project/editor.jade index d0224b6d1f..091c9d64d0 100644 --- a/services/web/app/views/project/editor.jade +++ b/services/web/app/views/project/editor.jade @@ -35,17 +35,32 @@ block content include ./editor/left-menu - include ./editor/header - - include ./editor/share - - #ide-body(ng-cloak, layout="main", ng-hide="state.loading") - .ui-layout-west - include ./editor/file-tree - + #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/editor - include ./editor/track-changes + include ./editor/header + + include ./editor/share + + #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! + script(src='/socket.io/socket.io.js') diff --git a/services/web/app/views/project/editor/editor.jade b/services/web/app/views/project/editor/editor.jade index 2836480468..117854654a 100644 --- a/services/web/app/views/project/editor/editor.jade +++ b/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") diff --git a/services/web/app/views/project/editor/header.jade b/services/web/app/views/project/editor/header.jade index a6859981ee..b9184fca4f 100644 --- a/services/web/app/views/project/editor/header.jade +++ b/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 \ No newline at end of file diff --git a/services/web/public/coffee/app/ide.coffee b/services/web/public/coffee/app/ide.coffee index 3a10089306..54abf30703 100644 --- a/services/web/public/coffee/app/ide.coffee +++ b/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 diff --git a/services/web/public/coffee/app/ide/chat/controllers/ChatButtonController.coffee b/services/web/public/coffee/app/ide/chat/controllers/ChatButtonController.coffee new file mode 100644 index 0000000000..74e6d31ee3 --- /dev/null +++ b/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 + ] \ No newline at end of file diff --git a/services/web/public/coffee/app/ide/chat/index.coffee b/services/web/public/coffee/app/ide/chat/index.coffee new file mode 100644 index 0000000000..2f6b566932 --- /dev/null +++ b/services/web/public/coffee/app/ide/chat/index.coffee @@ -0,0 +1,3 @@ +define [ + "ide/chat/controllers/ChatButtonController" +], () -> \ No newline at end of file diff --git a/services/web/public/coffee/app/ide/directives/layout.coffee b/services/web/public/coffee/app/ide/directives/layout.coffee index 15a982cade..af746f30a7 100644 --- a/services/web/public/coffee/app/ide/directives/layout.coffee +++ b/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 + compile: () -> + pre: (scope, element, attrs) -> + name = attrs.layout - options = - spacing_open: 24 - spacing_closed: 24 - onresize: () => - onResize() - maskIframesOnResize: scope.$eval( - attrs.maskIframesOnResize or "false" - ) + if attrs.spacingOpen? + spacingOpen = parseInt(attrs.spacingOpen, 10) + else + spacingOpen = 24 - onResize = () -> - state = element.layout().readState() - scope.$broadcast "layout:#{name}:resize", state - repositionControls() + if attrs.spacingClosed? + spacingClosed = parseInt(attrs.spacingClosed, 10) + else + spacingClosed = 24 - # Restore previously recorded state - if (state = $.localStorage("layout.#{name}"))? - options.west = state.west - options.east = state.east + 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) - element.layout options - element.layout().resizeAll() + # Restore previously recorded state + if (state = $.localStorage("layout.#{name}"))? + options.west = state.west + options.east = state.east - if attrs.resizeOn? - scope.$on attrs.resizeOn, () -> element.layout().resizeAll() + # Someone moved the resizer + onInternalResize = () -> + state = element.layout().readState() + scope.$broadcast "layout:#{name}:resize", state + repositionControls() + resetOpenStates() - # Save state when exiting - $(window).unload () -> - $.localStorage("layout.#{name}", element.layout().readState()) + 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() - repositionControls = () -> - state = element.layout().readState() - if state.east? - element.find(".ui-layout-resizer-controls").css({ - position: "absolute" - right: state.east.size - "z-index": 10 - }) - } \ No newline at end of file + 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() + } + ] \ No newline at end of file diff --git a/services/web/public/coffee/app/ide/pdf/controllers/PdfController.coffee b/services/web/public/coffee/app/ide/pdf/controllers/PdfController.coffee index fe2836862c..4fa3829f0d 100644 --- a/services/web/public/coffee/app/ide/pdf/controllers/PdfController.coffee +++ b/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 diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less index c1ff220a71..b98e14a376 100644 --- a/services/web/public/stylesheets/app/editor.less +++ b/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;