mirror of
https://github.com/overleaf/overleaf.git
synced 2025-04-18 03:07:47 +00:00
Add in chat view with stubbed data
This commit is contained in:
James Allen
parent
926b31b337
commit
f256c96195
9 changed files with 187 additions and 2 deletions
|
|
@ -59,7 +59,7 @@ block content
|
|||
include ./editor/track-changes
|
||||
|
||||
.ui-layout-east
|
||||
| Chat!
|
||||
include ./editor/chat
|
||||
|
||||
|
||||
script(src='/socket.io/socket.io.js')
|
||||
|
|
|
|||
38
services/web/app/views/project/editor/chat.jade
Normal file
38
services/web/app/views/project/editor/chat.jade
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
aside.chat(
|
||||
ng-controller="ChatController"
|
||||
infinite-scroll="loadMore()"
|
||||
infinite-scroll-disabled="chat.loading || chat.atEnd"
|
||||
infinite-scroll-initialize="ui.chatOpen"
|
||||
)
|
||||
.messages(
|
||||
infinite-scroll="loadMore()"
|
||||
infinite-scroll-disabled="chat.loading || chat.atEnd"
|
||||
infinite-scroll-initialize="ui.chatOpen"
|
||||
)
|
||||
.infinite-scroll-inner
|
||||
ul.list-unstyled
|
||||
li.message(
|
||||
ng-repeat="message in chat.messages | orderBy:'timestamp':true"
|
||||
ng-controller="ChatMessageController"
|
||||
ng-class="{'self': message.user.id == user.id }"
|
||||
)
|
||||
|
||||
span.avatar
|
||||
img(ng-src="{{gravatarUrl(message.user)}}")
|
||||
div.message-wrapper
|
||||
.name(ng-if="message.user.id != user.id") {{ message.user.first_name }}
|
||||
.message(
|
||||
ng-style="{\
|
||||
'border-color': 'hsl({{ hue(message.user) }}, 60%, 80%)',\
|
||||
'background-color': 'hsl({{ hue(message.user) }}, 60%, 97%)'\
|
||||
}"
|
||||
)
|
||||
.arrow(ng-style="{'border-color': 'hsl({{ hue(message.user) }}, 60%, 80%)'}")
|
||||
{{ message.content }}
|
||||
|
||||
.new-message
|
||||
textarea(
|
||||
placeholder="Your message..."
|
||||
)
|
||||
|
||||
|
||||
|
|
@ -93,7 +93,7 @@ div.full-size(ng-controller="PdfController")
|
|||
)
|
||||
i.fa.fa-trash-o
|
||||
|
|
||||
div.dropdown(dropdown, style="display: inline-block;")
|
||||
div.dropdown(style="display: inline-block;")
|
||||
a.btn.btn-default.btn-sm(
|
||||
href
|
||||
dropdown-toggle
|
||||
|
|
|
|||
|
|
@ -46,6 +46,8 @@ define [
|
|||
$scope.user = window.user
|
||||
$scope.settings = window.userSettings
|
||||
|
||||
$scope.chat = {}
|
||||
|
||||
window._ide = ide
|
||||
|
||||
ide.project_id = $scope.project_id = window.project_id
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
define [
|
||||
"base"
|
||||
], (App) ->
|
||||
App.controller "ChatController", ["$scope", ($scope) ->
|
||||
james = {
|
||||
id: $scope.user.id
|
||||
first_name: "James"
|
||||
last_name: "Allen"
|
||||
email: "james@sharelatex.com"
|
||||
}
|
||||
james2 = {
|
||||
id: "james2-id"
|
||||
first_name: "James"
|
||||
last_name: "Allen"
|
||||
email: "jamesallen0108@gmail.com"
|
||||
}
|
||||
henry = {
|
||||
id: "henry-id"
|
||||
first_name: "Henry"
|
||||
last_name: "Oswald"
|
||||
email: "henry.oswald@sharelatex.com"
|
||||
}
|
||||
$scope.chat.messages = [
|
||||
{ content: "Hello world", timestamp: Date.now() - 2000, user: james2 }
|
||||
{ content: "Hello, this is the new chat", timestamp: Date.now() - 4000, user: james }
|
||||
{ content: "Here are some longer messages to show what ti looks like when I say a lot!", timestamp: Date.now() - 20000, user: henry }
|
||||
{ content: "What about some maths? $x^2 = 1$?", timestamp: Date.now() - 22000, user: james2 }
|
||||
{ content: "Nope, that doesn't work yet!", timestamp: Date.now() - 45000, user: henry }
|
||||
{ content: "I'm running out of things to say.", timestamp: Date.now() - 56000, user: henry }
|
||||
{ content: "Yep, me too", timestamp: Date.now() - 100000, user: james }
|
||||
{ content: "Hmm, looks like we've had this conversation backwards", timestamp: Date.now() - 120000, user: james }
|
||||
]
|
||||
]
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
define [
|
||||
"base"
|
||||
], (App) ->
|
||||
App.controller "ChatMessageController", ["$scope", "ide", ($scope, ide) ->
|
||||
$scope.gravatarUrl = (user) ->
|
||||
email = user.email.trim().toLowerCase()
|
||||
hash = CryptoJS.MD5(email).toString()
|
||||
return "//www.gravatar.com/avatar/#{hash}?d=mm&s=50"
|
||||
|
||||
$scope.hue = (user) ->
|
||||
ide.onlineUsersManager.getHueForUserId(user.id)
|
||||
]
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
define [
|
||||
"ide/chat/controllers/ChatButtonController"
|
||||
"ide/chat/controllers/ChatController"
|
||||
"ide/chat/controllers/ChatMessageController"
|
||||
], () ->
|
||||
|
|
@ -4,6 +4,7 @@
|
|||
@import "./editor/left-menu.less";
|
||||
@import "./editor/pdf.less";
|
||||
@import "./editor/share.less";
|
||||
@import "./editor/chat.less";
|
||||
|
||||
.full-size {
|
||||
position: absolute;
|
||||
|
|
|
|||
97
services/web/public/stylesheets/app/editor/chat.less
Normal file
97
services/web/public/stylesheets/app/editor/chat.less
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
@new-message-height: 80px;
|
||||
|
||||
.chat {
|
||||
.messages {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: @new-message-height;
|
||||
overflow-x: hidden;
|
||||
li.message {
|
||||
margin: @line-height-computed / 2;
|
||||
.avatar {
|
||||
margin-top: 14px;
|
||||
float: left;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.message-wrapper {
|
||||
margin-left: 50px + @line-height-computed/2;
|
||||
.name {
|
||||
font-size: 12px;
|
||||
color: @gray-light;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.message {
|
||||
padding: @line-height-computed / 2;
|
||||
border-left: 3px solid transparent;
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
box-shadow: -1px 2px 3px #ddd;
|
||||
border-raduis: @border-radius-base;
|
||||
.arrow {
|
||||
right: 100%;
|
||||
top: @line-height-computed / 4;
|
||||
border: solid;
|
||||
content: " ";
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
border-top-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
border-width: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.self) {
|
||||
.message {
|
||||
.arrow {
|
||||
border-left-color: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.self {
|
||||
margin-top: @line-height-computed;
|
||||
.avatar {
|
||||
display: none;
|
||||
}
|
||||
.message-wrapper .message {
|
||||
border-left: none;
|
||||
border-right: 3px solid transparent;
|
||||
.arrow {
|
||||
left: 100%;
|
||||
right: auto;
|
||||
border-right-color: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.new-message {
|
||||
.full-size;
|
||||
top: auto;
|
||||
height: @new-message-height;
|
||||
background-color: @gray-lightest;
|
||||
padding: @line-height-computed / 4;
|
||||
border-top: 1px solid @toolbar-border-color;
|
||||
textarea {
|
||||
border-radius: @border-radius-base;
|
||||
border: 1px solid @toolbar-border-color;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
color: @gray-dark;
|
||||
font-size: 14px;
|
||||
padding: @line-height-computed / 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue