mirror of
https://github.com/overleaf/overleaf.git
synced 2025-03-15 04:24:52 +00:00
Add in chat pane and sort out layout resizing
This commit is contained in:
James Allen
parent
83666be910
commit
ab09a865b8
9 changed files with 144 additions and 47 deletions
|
|
@ -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')
|
||||
|
||||
|
|
|
|||
|
|
@ -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")
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
define [
|
||||
"base"
|
||||
], (App) ->
|
||||
App.controller "ChatButtonController", ["$scope", ($scope) ->
|
||||
$scope.toggleChat = () ->
|
||||
$scope.ui.chatOpen = !$scope.ui.chatOpen
|
||||
]
|
||||
3
services/web/public/coffee/app/ide/chat/index.coffee
Normal file
3
services/web/public/coffee/app/ide/chat/index.coffee
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
define [
|
||||
"ide/chat/controllers/ChatButtonController"
|
||||
], () ->
|
||||
|
|
@ -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
|
||||
})
|
||||
}
|
||||
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()
|
||||
}
|
||||
]
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue