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

Style v2 chat

services/web/app/coffee/infrastructure/ExpressLocals.coffee

@@ -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()

services/web/app/views/project/editor/chat.pug

@@ -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,

services/web/public/coffee/ide/chat/controllers/ChatMessageController.coffee

@@ -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 })"
 	]

services/web/public/stylesheets/app/editor/chat.less

@@ -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%);

services/web/public/stylesheets/app/editor/toolbar.less

@@ -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;

services/web/public/stylesheets/core/_common-variables.less

@@ -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;

services/web/public/stylesheets/core/ol-variables.less

@@ -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;

services/web/public/stylesheets/ol-style.less

@@ -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";

services/web/public/stylesheets/style.less

@@ -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";