github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2025-01-16 16:22:34 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #210 from sharelatex/pr-style-v2-chatpane

Browse source 
Style v2 chat
This commit is contained in:
Paulo Jorge Reis 2017-12-20 09:52:52 +00:00 committed by GitHub
commit 7d3e463061
9 changed files with 83 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
services/web/app/coffee/infrastructure/ExpressLocals.coffee
View file

@ -297,10 +297,14 @@ module.exports = (app, webRouter, privateApiRouter, publicApiRouter)->
webRouter.use (req, res, next) ->
isOl = (Settings.brandPrefix == 'ol-')
res.locals.uiConfig =
defaultResizerSizeOpen : if isOl then 2 else 24
defaultResizerSizeClosed : if isOl then 2 else 24
eastResizerCursor : if isOl then "ew-resize" else null
westResizerCursor : if isOl then "ew-resize" else null
chatResizerSizeOpen : if isOl then 2 else 12
chatResizerSizeClosed : 0
defaultResizerSizeOpen : if isOl then 2 else 24
defaultResizerSizeClosed : if isOl then 2 else 24
eastResizerCursor : if isOl then "ew-resize" else null
westResizerCursor : if isOl then "ew-resize" else null
chatResizerSizeOpen : if isOl then 2 else 12
chatResizerSizeClosed : 0
chatMessageBorderSaturation: if isOl then "85%" else "70%"
chatMessageBorderLightness : if isOl then "40%" else "70%"
chatMessageBgSaturation : if isOl then "85%" else "60%"
chatMessageBgLightness : if isOl then "40%" else "97%"
next()

7
services/web/app/views/project/editor/chat.pug
View file

@ -35,12 +35,9 @@ aside.chat(
span(ng-if="message.user.first_name") {{ message.user.first_name }}
span(ng-if="!message.user.first_name") {{ message.user.email }}
.message(
ng-style="{\
'border-color': 'hsl({{ hue(message.user) }}, 70%, 70%)',\
'background-color': 'hsl({{ hue(message.user) }}, 60%, 97%)'\
}"
ng-style="getMessageStyle(message.user);"
)
.arrow(ng-style="{'border-color': 'hsl({{ hue(message.user) }}, 70%, 70%)'}")
.arrow(ng-style="getArrowStyle(message.user)")
.message-content
p(
mathjax,

15
services/web/public/coffee/ide/chat/controllers/ChatMessageController.coffee
View file

@ -3,9 +3,22 @@ define [
"ide/colors/ColorManager"
], (App, ColorManager) ->
App.controller "ChatMessageController", ["$scope", "ide", ($scope, ide) ->
$scope.hue = (user) ->
hslColorConfigs =
borderSaturation: window.uiConfig?.chatMessageBorderSaturation or "70%"
borderLightness : window.uiConfig?.chatMessageBorderLightness or "70%"
bgSaturation : window.uiConfig?.chatMessageBgSaturation or "60%"
bgLightness : window.uiConfig?.chatMessageBgLightness or "97%"
hue = (user) ->
if !user?
return 0
else
return ColorManager.getHueForUserId(user.id)
$scope.getMessageStyle = (user) ->
"border-color" : "hsl(#{ hue(user) }, #{ hslColorConfigs.borderSaturation }, #{ hslColorConfigs.borderLightness })"
"background-color" : "hsl(#{ hue(user) }, #{ hslColorConfigs.bgSaturation }, #{ hslColorConfigs.bgLightness })"
$scope.getArrowStyle = (user) ->
"border-color" : "hsl(#{ hue(user) }, #{ hslColorConfigs.borderSaturation }, #{ hslColorConfigs.borderLightness })"
]

26
services/web/public/stylesheets/app/editor/chat.less
View file

@ -31,13 +31,18 @@
right: 0;
bottom: @new-message-height;
overflow-x: hidden;
background-color: @chat-bg;
li.message {
margin: @line-height-computed / 2;
.date {
font-size: 12px;
color: @gray-light;
border-bottom: 1px solid @gray-lightest;
color: @chat-message-date-color;
margin-bottom: @line-height-computed / 2;
text-align: right;
}
.date when (@is-overleaf = false) {
border-bottom: 1px solid @gray-lightest;
text-align: center;
}
.avatar {
@ -56,20 +61,22 @@
.name {
font-size: 12px;
color: @gray-light;
color: @chat-message-name-color;
margin-bottom: 4px;
min-height: 16px;
}
.message {
border-left: 3px solid transparent;
font-size: 14px;
box-shadow: -1px 2px 3px #ddd;
border-raduis: @border-radius-base;
box-shadow: @chat-message-box-shadow;
border-radius: @chat-message-border-radius;
position: relative;
.message-content {
padding: @line-height-computed / 2;
padding: @chat-message-padding;
overflow-x: auto;
color: @chat-message-color;
font-weight: @chat-message-weight;
}
.arrow {
@ -124,7 +131,7 @@
.full-size;
top: auto;
height: @new-message-height;
background-color: @gray-lightest;
background-color: @chat-new-message-bg;
padding: @line-height-computed / 4;
border-top: 1px solid @editor-border-color;
textarea {
@ -134,9 +141,10 @@
border: 1px solid @editor-border-color;
height: 100%;
width: 100%;
color: @gray-dark;
color: @chat-new-message-textarea-color;
font-size: 14px;
padding: @line-height-computed / 4;
background-color: @chat-new-message-textarea-bg;
}
}
}
@ -145,7 +153,7 @@
word-break: break-all;
}
.editor-dark {
.editor-dark when (@is-overleaf = false) {
.chat {
.new-message {
background-color: lighten(@editor-dark-background-color, 10%);

2
services/web/public/stylesheets/app/editor/toolbar.less
View file

@ -143,7 +143,7 @@
.toolbar-label {
display: none;
margin: 0 4px;
font-size: 12px;
font-size: @toolbar-font-size;
font-weight: 600;
margin-bottom: 2px;
vertical-align: middle;

21
services/web/public/stylesheets/core/_common-variables.less
View file

@ -20,14 +20,9 @@
//== Typography
//
//## Font, line-height, and color for body text, headings, and more.
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);
//@import url(https://fonts.googleapis.com/css?family=PT+Serif:400,600,700);
//@import url(https://fonts.googleapis.com/css?family=PT+Serif:400,400i,700,700i);
@import url(https://fonts.googleapis.com/css?family=Merriweather:400,400i,700,700i);
@font-family-sans-serif: "Open Sans", sans-serif;
@font-family-serif: "Merriweather", serif;
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;
@ -898,6 +893,7 @@
@toolbar-btn-active-color : white;
@toolbar-btn-active-bg-color : @link-color;
@toolbar-btn-active-shadow : inset 0 3px 5px rgba(0, 0, 0, 0.225);
@toolbar-font-size : 12px;
@toolbar-alt-bg-color : #fafafa;
@toolbar-icon-btn-color : @gray-light;
@toolbar-icon-btn-hover-color : @gray-dark;
@ -928,6 +924,19 @@
@synctex-controls-z-index : 3;
@synctex-controls-padding : 0 2px;
// Chat
@chat-bg : transparent;
@chat-message-color : @text-color;
@chat-message-date-color : @gray-light;
@chat-message-name-color : @gray-light;
@chat-message-box-shadow : -1px 2px 3px #ddd;
@chat-message-border-radius : 0;
@chat-message-padding : @line-height-computed / 2;
@chat-message-weight : normal;
@chat-new-message-bg : @gray-lightest;
@chat-new-message-textarea-bg : #FFF;
@chat-new-message-textarea-color : @gray-dark;
// PDF
@pdf-top-offset : @toolbar-tall-height;
@pdf-bg : transparent;

18
services/web/public/stylesheets/core/ol-variables.less
View file

@ -1,6 +1,9 @@
@import "./_common-variables.less";
@is-overleaf: true;
@font-family-sans-serif: "Lato", sans-serif;
@header-height: 68px;
@footer-height: 50px;
@ -198,6 +201,7 @@
@toolbar-icon-btn-hover-shadow : none;
@toolbar-border-bottom : 1px solid @toolbar-border-color;
@toolbar-icon-btn-hover-boxshadow : none;
@toolbar-font-size : 13px;
// Editor file-tree
@file-tree-bg : @ol-blue-gray-4;
@ -220,6 +224,20 @@
@editor-toggler-hover-bg-color : @ol-green;
@synctex-controls-z-index : 6;
@synctex-controls-padding : 0;
@editor-border-color : @ol-blue-gray-5;
// Chat
@chat-bg : @ol-blue-gray-5;
@chat-message-color : #FFF;
@chat-message-name-color : #FFF;
@chat-message-date-color : @ol-blue-gray-2;
@chat-message-box-shadow : none;
@chat-message-padding : 5px 10px;
@chat-message-border-radius : @border-radius-large;
@chat-message-weight : bold;
@chat-new-message-bg : @ol-blue-gray-4;
@chat-new-message-textarea-bg : @ol-blue-gray-1;
@chat-new-message-textarea-color : @ol-blue-gray-6;
// PDF
@pdf-top-offset : @toolbar-small-height;

3
services/web/public/stylesheets/ol-style.less
View file

@ -1,3 +1,6 @@
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700&subset=latin-ext);
@import url(https://fonts.googleapis.com/css?family=Merriweather:400,400i,700,700i);
// Core variables and mixins
@import "core/ol-variables.less";
@import "app/ol-style-guide.less";

3
services/web/public/stylesheets/style.less
View file

@ -1,3 +1,6 @@
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);
@import url(https://fonts.googleapis.com/css?family=Merriweather:400,400i,700,700i);
// Core variables and mixins
@import "core/variables.less";
@import "_style_includes.less";