Skip to content

Commit

Permalink
SAK-29317 Changed the style of portal chat messages to help to differ…
Browse files Browse the repository at this point in the history
…entitate own messages from the other
  • Loading branch information
sinmsinm committed May 18, 2015
1 parent dc23ddc commit 30d679b
Showing 5 changed files with 124 additions and 43 deletions.
37 changes: 26 additions & 11 deletions portal/portal-charon/charon/src/webapp/scripts/chat.js
Original file line number Diff line number Diff line change
@@ -200,7 +200,7 @@
var openSize = ((262 * this.openWindows) + 50);
$(portal.chat.domSelectors.pcChatWinScroller).css("width", openSize + "px");

$(portal.chat.domSelectors.pcChatWinContainer).css("right", "225px");
$(portal.chat.domSelectors.pcChatWinContainer).css("right", "245px");
if ($(portal.chat.domSelectors.footerApp).position().left < openSize) {
$(portal.chat.domSelectors.pcChatScrollBar).show();
}
@@ -309,7 +309,7 @@
$(portal.chat.domSelectors.pcChatWinScroller).css("width", openSize + "px");
var right = $(portal.chat.domSelectors.pcChatWinContainer).css("right");
right = right.substring(0,right.indexOf("px"))-0;
if (right!=225) {
if (right!=245) {
$(portal.chat.domSelectors.pcChatWinContainer).css("right", (right + 262) + "px");
}
if ($(portal.chat.domSelectors.footerApp).position().left > openSize) {
@@ -840,7 +840,7 @@
var panelUuid = params.panelUuid;
var from = params.from;
var dateString = params.dateString;
var alt = params.alt;
var alt = params.fromDisplayName;

var avatarPermitted;
if ($(portal.chat.domSelectors.pcChatAvatarPerm).length === 1) {
@@ -849,11 +849,16 @@
avatarPermitted =false;
}

var avatarOrName = "";

var avatarElement = {
left: "",
right: ""
};

var messageAlign = (from === panelUuid) ? 'right' : 'left'

if (avatarPermitted) {
avatarOrName = "<img src=\"/direct/profile/" + from + "/image\" alt=\"" + alt + "\" title=\"" + alt + "\"/>";
} else {
avatarOrName="<span class=\"" +portal.chat.domNames.pcDisplayName +"\">" + alt + "</span>";
avatarElement[messageAlign] = "<img src=\"/direct/profile/" + from + "/image\" alt=\"" + alt + "\" title=\"" + alt + "\"/>";
}

// Escape markup
@@ -862,9 +867,19 @@
// Decode any unicode escapes
content = JSON.parse('"' + content + '"');

var messagePanel = $(portal.chat.domSelectors.pcChatMessagesPre + panelUuid);
var messagePanel = $(portal.chat.domSelectors.pcChatMessagesPre + panelUuid);

var chatMessage =
"<li>" +
avatarElement.left +
"<div class=\"" + portal.chat.domNames.pcMessage + " " + portal.chat.domNames.pcMessage + "__" + messageAlign + "\">"+
"<div class=\""+ portal.chat.domNames.pcMessage + "content\" >" + content + "</div>" +
"<div class=\"" + portal.chat.domNames.pcMessage + "header\"> <span class=\"" + portal.chat.domNames.pcMessage + "name\" >" + alt + "</span> <span class=\"" + portal.chat.domNames.pcMessage + "date\">" + dateString + "</span></div>" +
"</div>" +
avatarElement.right +
"</li>";

messagePanel.append("<li>"+ avatarOrName + "<div class=\"" + portal.chat.domNames.pcMessage +"\">" + content + "</div><span class=\"" + portal.chat.domNames.pcMessage + "date\">" + dateString + "</span></li>");
messagePanel.append (chatMessage);
};

$(document).ready(function () {
@@ -1083,7 +1098,7 @@
var right = $(portal.chat.domSelectors.pcChatWinContainer).css("right");
right = right.substring(0, right.indexOf("px")) - 0;
if (openSize > freeSpace) {
if (right == 225) {
if (right == 245) {
return;
}
$(portal.chat.domSelectors.pcChatWinContainer).css("right",(right + 262) + "px");
@@ -1098,7 +1113,7 @@
var right = $(portal.chat.domSelectors.pcChatWinContainer).css("right");
right = right.substring(0, right.indexOf("px")) - 0;
if (openSize > freeSpace) {
if (openSize + right - 225 < freeSpace) return;
if (openSize + right - 245 < freeSpace) return;
$(portal.chat.domSelectors.pcChatWinContainer).css("right",(right - 262) + "px");
}
});
Original file line number Diff line number Diff line change
@@ -215,10 +215,85 @@
&minimised{
margin-top: 260px;
}
&message{
width: 170px;
overflow: hidden;
}
&message{
position: relative;
padding: 0px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 3px;
border: #fff solid 1px;
display: inline-block;
width: 80%;
margin-left: 5px;
margin-top: 10px;
padding: 14px 2px 2px 2px;
&__left{
background: $footerApp__chat__message__left__background;
border: $footerApp__chat__message__left__border solid 1px;
margin-left: 5px;
&:after{
content: '';
position: absolute;
border-style: solid;
border-width: 3px 5px 3px 0;
border-color: transparent $footerApp__chat__message__left__background;
display: block;
width: 0;
z-index: 1;
margin-top: -1px;
left: -4px;
top: 77%;
}
&:before{
content: '';
position: absolute;
border-style: solid;
border-width: 3px 5px 3px 0;
border-color: transparent $footerApp__chat__message__left__border;
display: block;
width: 0;
z-index: 0;
margin-top: -1px;
left: -5px;
top: 77%;
}
}
&__right{
background: $footerApp__chat__message__right__background;
border: $footerApp__chat__message__right__border solid 1px;
margin-right: 5px;
&:after{
content: '';
position: absolute;
border-style: solid;
border-width: 3px 0 3px 5px;
border-color: transparent $footerApp__chat__message__right__background;
display: block;
width: 0;
z-index: 1;
margin-top: -1px;
right: -3px;
top: 77%;
}
&:before{
content: '';
position: absolute;
border-style: solid;
border-width: 3px 0 3px 5px;
border-color: transparent $footerApp__chat__message__right__border;
display: block;
width: 0;
z-index: 0;
margin-top: -1px;
right: -5px;
top: 77%;
}
}
&content{
margin: 5px 3px 0px 3px;
line-height: 1.2;
}
}
&displayname{
display: block;
font-weight: bold;
@@ -230,12 +305,12 @@
margin-left: -20px;
margin-top: 3px;
}
&messagedate{
font-size: 90%;
color: #555;
position: absolute;
right: 3px;
top: 3px;
&messageheader{
color: #555;
position: absolute;
right: 3px;
top: 3px;
font-size: 0.7em;
}

&editorwrapper {
@@ -261,35 +336,20 @@
margin: 0;

li{
margin: 2px 0px;
vertical-align: text-top;
position: relative;
border-bottom: 1px solid #EEE;
padding: 2px 35px 5px;
min-height: 30px;

padding-left: 3px;
img{
vertical-align: text-top;
max-width: 10%;
max-height: 80%;
border: 1px solid #ccc;
margin-right: 5px;
margin-left: 2px;
position: absolute;
top: 2px;
left: 2px;
float: left;
max-width: 10%;
width: 10%;
border: 1px solid #ccc;
margin-left: 2px;
}

}
}
&connections{
list-style: none;
padding: 0;
margin: 0;
}


}

/*Videochat controls */
Original file line number Diff line number Diff line change
@@ -12,3 +12,9 @@ $footerApp__chat__a--hover__color: lighten( $primary-color, 10%);

$footerApp__chat__header__color: $background-color !default;
$footerApp__chat__header__background: $primary-color !default;

$footerApp__chat__message__left__background: #C9EADD;
$footerApp__chat__message__left__border: darken( $footerApp__chat__message__left__background, 10%);

$footerApp__chat__message__right__background: #CDE3ED;
$footerApp__chat__message__right__border: darken( $footerApp__chat__message__right__background, 10%);

Large diffs are not rendered by default.

Large diffs are not rendered by default.

0 comments on commit 30d679b

Please sign in to comment.