OO-1068 bootstrapify chat

src/main/java/org/olat/instantMessaging/ui/ChatController.java

@@ -111,7 +111,7 @@ public class ChatController extends BasicController implements GenericEventListe
 		this.highlightVip = highlightVip;
 		setToday();
 
-		avatarBaseURL = registerCacheableMapper(ureq, "avatars-members", new UserAvatarMapper(true));
+		avatarBaseURL = registerCacheableMapper(ureq, "avatars-members", new UserAvatarMapper(false));
 		
 		//allChats = ureq.getUserSession().getChats();
 		allChats = new ArrayList<String>();
@@ -162,7 +162,7 @@ public class ChatController extends BasicController implements GenericEventListe
 				rosterCtrl == null ? null : rosterCtrl.getInitialComponent(),
 				translate("groupchat.roster"), true, false, true, String.valueOf(hashCode()));
 		listenTo(chatPanelCtr);
-		chatPanelCtr.setElementCSSClass("o_instantmessaging_chat_dialog");
+		chatPanelCtr.setElementCSSClass("o_im_chat_dialog");
 		
 		String pn = chatPanelCtr.getPanelName();
 		

src/main/java/org/olat/instantMessaging/ui/IMBuddyListController.java

@@ -67,7 +67,7 @@ public class IMBuddyListController extends BasicController {
 		if(imModule.isOnlineStatusEnabled()) {
 			toggleOffline = LinkFactory.createCustomLink("toggleOnline", "cmd.online", "", Link.NONTRANSLATED, mainVC, this);
 			toggleOffline.setCustomDisplayText(translate("im.show.offline.buddies"));
-			toggleOffline.setCustomEnabledLinkCSS("o_instantmessaging_showofflineswitch");
+			toggleOffline.setCustomEnabledLinkCSS("o_im_showofflineswitch");
 			toggleOffline.setIconLeftCSS("o_icon o_icon_status_unavailable");
 			viewMode = ViewMode.onlineUsers;
 		} else {
@@ -76,7 +76,7 @@ public class IMBuddyListController extends BasicController {
 		
 		toggleGroup = LinkFactory.createCustomLink("toggleGroups", "cmd.group", "", Link.NONTRANSLATED, mainVC, this);
 		toggleGroup.setCustomDisplayText(translate("im.hide.groups"));
-		toggleGroup.setCustomEnabledLinkCSS("o_instantmessaging_showgroupswitch");
+		toggleGroup.setCustomEnabledLinkCSS("o_im_showgroupswitch");
 		toggleGroup.setIconLeftCSS("o_icon o_icon_group");
 
 		buddyList = new Roster(getIdentity().getKey());
@@ -99,24 +99,24 @@ public class IMBuddyListController extends BasicController {
 		if (source == toggleOffline) {
 			if (viewMode == ViewMode.onlineUsers) {
 				toggleOffline.setCustomDisplayText(translate("im.hide.offline.buddies"));
-				toggleOffline.setCustomEnabledLinkCSS("o_instantmessaging_hideofflineswitch");
+				toggleOffline.setCustomEnabledLinkCSS("o_im_hideofflineswitch");
 				toggleOffline.setIconLeftCSS("o_icon o_icon_status_available");
 				loadRoster(ViewMode.offlineUsers);
 			} else {
 				toggleOffline.setCustomDisplayText(translate("im.show.offline.buddies"));
-				toggleOffline.setCustomEnabledLinkCSS("o_instantmessaging_showofflineswitch");
+				toggleOffline.setCustomEnabledLinkCSS("o_im_showofflineswitch");
 				toggleOffline.setIconLeftCSS("o_icon o_icon_status_unavailable");
 				loadRoster(ViewMode.onlineUsers);
 			}
 		} else if (source == toggleGroup) {
 			if (viewGroups) {
 				toggleGroup.setCustomDisplayText(translate("im.show.groups"));
-				toggleGroup.setCustomEnabledLinkCSS("o_instantmessaging_hidegroupswitch");
+				toggleGroup.setCustomEnabledLinkCSS("o_im_hidegroupswitch");
 				buddiesListContent.contextPut("viewGroups", Boolean.FALSE);
 				viewGroups = false;
 			} else {
 				toggleGroup.setCustomDisplayText(translate("im.hide.groups"));
-				toggleGroup.setCustomEnabledLinkCSS("o_instantmessaging_showgroupswitch");
+				toggleGroup.setCustomEnabledLinkCSS("o_im_showgroupswitch");
 				buddiesListContent.contextPut("viewGroups", Boolean.TRUE);
 				viewGroups = true;
 			}
@@ -171,10 +171,10 @@ public class IMBuddyListController extends BasicController {
 		if(imModule.isOnlineStatusEnabled()) {
 			sb.append("o_icon_status_").append(buddy.getStatus()).append(" ");
 		} else {
-			sb.append("o_instantmessaging_chat_icon ");
+			sb.append("o_im_chat_icon ");
 		}
 		if(buddy.isVip()) {
-			sb.append("o_instantmessaging_vip");
+			sb.append("o_im_vip");
 		}
 		return sb.toString();
 	}

src/main/java/org/olat/instantMessaging/ui/_chelp/instant-messenger.html

@@ -25,9 +25,9 @@
 	<b>$r.translate("im.status.change"):</b> 
 	$r.translate("chelp.chan1") 
 </p>
-	<div class="b_with_small_icon_left o_instantmessaging_available_icon"><i>$r.translate("presence.available")</i>: $r.translate("chelp.status.available")</div>
-	<div class="b_with_small_icon_left o_instantmessaging_dnd_icon"><i>$r.translate("presence.dnd")</i>: $r.translate("chelp.status.dnd") </div>
-	<div class="b_with_small_icon_left o_instantmessaging_unavailable_icon"><i>$r.translate("presence.unavailable")</i>: $r.translate("chelp.status.unavailable") </div> 
+	<div class="b_with_small_icon_left o_im_available_icon"><i>$r.translate("presence.available")</i>: $r.translate("chelp.status.available")</div>
+	<div class="b_with_small_icon_left o_im_dnd_icon"><i>$r.translate("presence.dnd")</i>: $r.translate("chelp.status.dnd") </div>
+	<div class="b_with_small_icon_left o_im_unavailable_icon"><i>$r.translate("presence.unavailable")</i>: $r.translate("chelp.status.unavailable") </div> 
 	<br />	
 <p>
 	<a name="senden"></a>
@@ -66,9 +66,9 @@
 	<b>$r.translate("chelp.rece"):</b> 
 	$r.translate("chelp.rece1") 
 </p>
-	<div class="b_with_small_icon_left o_instantmessaging_available_icon"><i>$r.translate("presence.available")</i>: $r.translate("chelp.rece4") $r.translate("chelp.rece5")</div>
-	<div class="b_with_small_icon_left o_instantmessaging_dnd_icon"><i>$r.translate("presence.dnd")</i>: $r.translate("chelp.rece2") $r.translate("chelp.rece3") $r.translate("chelp.rece4") </div>
-	<div class="b_with_small_icon_left o_instantmessaging_unavailable_icon"><i>$r.translate("presence.unavailable")</i>: $r.translate("chelp.rece2") $r.translate("chelp.rece3") $r.translate("chelp.rece4") </div> 
+	<div class="b_with_small_icon_left o_im_available_icon"><i>$r.translate("presence.available")</i>: $r.translate("chelp.rece4") $r.translate("chelp.rece5")</div>
+	<div class="b_with_small_icon_left o_im_dnd_icon"><i>$r.translate("presence.dnd")</i>: $r.translate("chelp.rece2") $r.translate("chelp.rece3") $r.translate("chelp.rece4") </div>
+	<div class="b_with_small_icon_left o_im_unavailable_icon"><i>$r.translate("presence.unavailable")</i>: $r.translate("chelp.rece2") $r.translate("chelp.rece3") $r.translate("chelp.rece4") </div> 
 	<br />
 <p>
 	<a name="add"></a>

src/main/java/org/olat/instantMessaging/ui/_content/buddies_content.html

 <ul class="list-unstyled">
 	#if($viewGroups)
 		#foreach ($group in $buddyList.groups)
-			<li class="o_instantmessaging_group">
+			<li class="o_im_group">
 				<div><i class="o_icon o_icon_group"> </i> $r.escapeHtml($group.groupName)</div>
 				<ul class="list-unstyled">
 				#foreach ($buddy in $group.buddy)

src/main/java/org/olat/instantMessaging/ui/_content/chat.html

@@ -2,7 +2,7 @@
 	/* <![CDATA[ */ 
 function resize_${panelName}() {	
 	var win = jQuery('#${panelName}');
-	jQuery('.o_instantmessaging_chat_history', win).each(function(index, el){
+	jQuery('.o_im_chat_history', win).each(function(index, el){
 		jQuery(el).height(win.height() - 100);
 		jQuery(el).scrollTop(el.scrollHeight);
 	});
@@ -24,7 +24,7 @@ function focus_${panelName}() {
 }
 /* ]]> */
 </script>
-<div class="o_instantmessaging_chat">
+<div class="o_im_chat">
 	<div class="clearfix">
 		$r.render("im.today") | $r.render("im.lastweek") | $r.render("im.lastmonth")
 		#if (!$isAjaxMode)
@@ -32,7 +32,7 @@ function focus_${panelName}() {
 		#end
 	</div>
 	$r.render("chatMsgFieldPanel")
-	<div class="o_instantmessaging_chat_form">
+	<div class="o_im_chat_form">
 		$r.render("sendMessageForm")
 	</div>
 </div>

src/main/java/org/olat/instantMessaging/ui/_content/chatMsgField.html

-<div class="o_instantmessaging_chat_history" id="$id">
+<div class="o_im_chat_history" id="$id">
 	#set($messageGroupCount=0)
 	#foreach($message in $chatMessages)
-		## The first message opens a new o_instantmessaging_message_group tag and adds the users
+		## The first message opens a new o_im_message_group tag and adds the users
 		## Name, his avatar icon and a list to his visiting card
 		#if($message.first)
 			#if ($messageGroupCount != 0)
-				## close last o_instantmessaging_message_group tag
+				## close last o_im_message_group tag
 				</div>
 			#end		
-			<div class="o_instantmessaging_message_group #if ($messageGroupCount % 2 == 1) o_odd #end">
+			<div class="o_im_message_group #if ($messageGroupCount % 2 == 1) o_odd #end">
 			
 				## link to visiting card
-				#if(!$message.anonym) <a href="$r.relLink("url/Identity/${message.fromKey}")">#end
-				
+				#if(!$message.anonym) <a href="$r.relLink("url/Identity/${message.fromKey}")" class="o_im_from">#end
+								
+				<div class="o_portrait"><div class="o_portrait_image">
 				#if($message.anonym) 
-					<div class="o_instantmessaging_avatar o_portrait_anonymous_small"></div>
+					<img src="$r.staticLink("images/transparent.gif")" alt="$altText" title="$altText" class="o_portrait_anonymous_small"/>
 				#elseif ($message.avatarKey != ":NA:") 
-					<div class="o_instantmessaging_avatar" style="background-image : url('${avatarBaseURL}/${message.avatarKey}/portrait_small.jpg')"></div>
+					<img src="$r.staticLink("images/transparent.gif")" alt="$altText" title="$altText" class="o_portrait_avatar_small" style="background-image: url('${avatarBaseURL}/${message.avatarKey}/portrait_small.jpg')" />
 				#else
-					<div class="o_instantmessaging_avatar o_portrait_dummy_small"></div>					 
+					<img src="$r.staticLink("images/transparent.gif")" alt="$altText" title="$altText" class="o_portrait_dummy_small"/>
 				#end 
+				</div></div>
 								
-				<div class="o_instantmessaging_from">$r.escapeHtml(${message.from})</div>				
+				<div class="o_im_from_name">$r.escapeHtml(${message.from})</div>				
 
 				## end link to visiting card
 				#if(!$message.anonym) </a> #end
@@ -29,14 +31,14 @@
 			#set($messageGroupCount=$messageGroupCount+1)
 		#end
 		## The real messages start here
-		<div class="o_instantmessaging_body b_clearfix">
-			<span class="o_instantmessaging_date b_float_right">${message.creationDate}</span>
+		<div class="o_im_body clearfix">
+			<span class="o_date">${message.creationDate}</span>
 			${message.body}
 		</div>
 	#end
 	
 	#if ($messageGroupCount > 0)
-		## close last o_instantmessaging_message_group tag
+		## close last o_im_message_group tag
 		</div>
 	#end
 </div>

src/main/java/org/olat/instantMessaging/ui/_content/roster.html

@@ -6,7 +6,7 @@
 	#end
 	<ul class="list-unstyled">
 	#foreach($entry in $roster.entries)
-		<li class="#if($entry.vip) o_instantmessaging_vip #end #if($entry.anonym) o_instantmessaging_anonymous #end">
+		<li class="#if($entry.vip) o_im_vip #end #if($entry.anonym) o_im_anonymous #end">
 			<span>$r.escapeHtml(${entry.name})</span>
 		</li>			
 	#end

src/main/java/org/olat/user/HomePageDisplayController.java

@@ -113,7 +113,7 @@ public class HomePageDisplayController extends BasicController {
 				imLink.setCustomDisplayText(translate("im.link", new String[] {fName,lName}));
 				Buddy buddy = imService.getBuddyById(homeIdentity.getKey());
 				
-				String css = (imModule.isOnlineStatusEnabled() ? getStatusCss(buddy) : "o_instantmessaging_chat_icon");
+				String css = (imModule.isOnlineStatusEnabled() ? getStatusCss(buddy) : "o_im_chat_icon");
 				imLink.setCustomEnabledLinkCSS(css);
 				imLink.setUserObject(buddy);
 			}
@@ -122,7 +122,7 @@ public class HomePageDisplayController extends BasicController {
 	
 	private String getStatusCss(Buddy buddy) {
 		StringBuilder sb = new StringBuilder(32);
-		sb.append("o_instantmessaging_").append(buddy.getStatus()).append("_icon ");
+		sb.append("o_im_").append(buddy.getStatus()).append("_icon ");
 		return sb.toString();
 	}
 

src/main/java/org/olat/user/UserAvatarMapper.java

@@ -48,7 +48,7 @@ public class UserAvatarMapper implements Mapper {
 
 	@Override
 	public MediaResource handle(String relPath, HttpServletRequest request) {
-		if(relPath != null && relPath.endsWith(useLarge ? POSTFIX_LARGE : POSTFIX_SMALL)) {
+		if(relPath != null && relPath.endsWith(POSTFIX_LARGE) || relPath.endsWith(POSTFIX_SMALL)) {
 			if(relPath.startsWith("/")) {
 				relPath = relPath.substring(1, relPath.length());
 			}

src/main/webapp/static/themes/light/_config.scss

@@ -112,6 +112,19 @@ $o-coursesite-catalog-space-xs : $padding-xs-vertical;
 $o-coursesite-catalog-border : $brand-primary;
 
 
+$o-im-chat-history-border		: $gray-lighter !default;
+$o-im-chat-message-bg			: #fff !default;
+$o-im-chat-message-bg-alt		: #F4F4F4 !default;
+$o-im-chat-message-border		: #eee !default;
+$o-im-chat-from-color			: $gray-light !default;
+$o-im-chat-from-size			: floor($font-size-base * 0.9) !default;
+$o-im-chat-date-color			: $text-muted !default;
+$o-im-chat-date-size			: floor($font-size-base * 0.7) !default;
+$o-im-chat-body-size			: floor($font-size-base * 0.9) !default;
+
+$o-dialog-window-bg				: #fefefe !default;
+$o-dialog-window-bar-bg			: #f9f9f9 !default;
+
 
 
 /*

src/main/webapp/static/themes/light/modules/_im.scss

@@ -15,15 +15,56 @@
 	}
 }
 
-.o_instantmessaging_chat_history {
+.o_im_chat_history {
 	height:170px;
 	font-size: 90%;
+	border: 1px solid $o-im-chat-history-border; 
 	
 	/* scrollbar */
 	margin: 0 0 1em 0; 
 	overflow: scroll; 
-	overflow-x:auto; 
+	overflow-x:auto;
+} 
+/* message group for all following messages of a single user. a new message group starts 
+   when someone else replies */
+.o_im_message_group {
+	padding: 3px 3px 3px 40px;
+	min-height: 40px;		
+	position: relative;
+	border-top: 1px solid $o-im-chat-message-border;
+	background: $o-im-chat-message-bg;
+		
+	&.o_odd {
+		background: $o-im-chat-message-bg-alt;
+	}
 	
-}
+	.o_portrait {
+		position: absolute;
+		top: 3px;
+		left: 3px;
+	}
+			
+	.o_im_from { 
+		color: $o-im-chat-from-color; 
+		font-size: $o-im-chat-from-size; 
+		font-weight: bold;
+		@extend %o_undecorated;
+		&:hover {
+			color: darken($o-im-chat-from-color, 10%); 		
+		}
+	}
+	
+	div.o_im_body {
+		padding: 3px 0 3px 0;
+		font-size: $o-im-chat-body-size;
+		.o_date { 
+			float: right;
+			color: $o-im-chat-date-color; 
+			font-size: $o-im-chat-date-size;
+		}
+	}
+}	
+
+a.o_im_hidegroupswitch { @include o-opacity(60); }
+
 
-a.o_instantmessaging_hidegroupswitch { @include o-opacity(60); }

src/main/webapp/static/themes/light/modules/_thirdparty.scss

@@ -18,7 +18,8 @@
 }
 
 .ui-dialog {
-	@include box-shadow(0px 1px 5px -1px rgba(0,0,0,.15));
+	@include box-shadow(0px 1px 5px -1px rgba(0,0,0,.25));
+	background-color: $o-dialog-window-bg;
 	
 	.ui-widget-header {
 		.ui-icon-closethick:before {
@@ -38,6 +39,7 @@
 	
 	.ui-dialog-titlebar {
 		padding: 2px 30px 2px 5px;
+		background-color: $o-dialog-window-bar-bg;
 	}
 }
 

src/test/java/org/olat/util/FunctionalInstantMessagingUtil.java

@@ -38,20 +38,20 @@ public class FunctionalInstantMessagingUtil {
 	public final static String INSTANT_MESSAGING_CLIENT_SUMMARY = "o_topnav_imclient_summary";
 	
 	public final static String INSTANT_MESSAGING_ROSTER_CSS = "o_extjsPanel_im_roster";
-	public final static String INSTANT_MESSAGING_SHOW_OFFLINE_CONTACTS_CSS = "o_instantmessaging_showofflineswitch";
-	public final static String INSTANT_MESSAGING_HIDE_OFFLINE_CONTACTS_CSS = "o_instantmessaging_hideofflineswitch";
-	public final static String INSTANT_MESSAGING_SHOW_GROUPS_CSS = "o_instantmessaging_showgroupswitch";
-	public final static String INSTANT_MESSAGING_HIDE_GROUPS_CSS = "o_instantmessaging_hidegroupswitch";
+	public final static String INSTANT_MESSAGING_SHOW_OFFLINE_CONTACTS_CSS = "o_im_showofflineswitch";
+	public final static String INSTANT_MESSAGING_HIDE_OFFLINE_CONTACTS_CSS = "o_im_hideofflineswitch";
+	public final static String INSTANT_MESSAGING_SHOW_GROUPS_CSS = "o_im_showgroupswitch";
+	public final static String INSTANT_MESSAGING_HIDE_GROUPS_CSS = "o_im_hidegroupswitch";
 	
-	public final static String INSTANT_MESSAGING_GROUP_CSS = "o_instantmessaging_groupname";
-	public final static String INSTANT_MESSAGING_AVAILABLE_CSS = "o_instantmessaging_available_icon";
-	public final static String INSTANT_MESSAGING_UNAVAILABLE_CSS = "o_instantmessaging_unavailable_icon";
+	public final static String INSTANT_MESSAGING_GROUP_CSS = "o_im_groupname";
+	public final static String INSTANT_MESSAGING_AVAILABLE_CSS = "o_im_available_icon";
+	public final static String INSTANT_MESSAGING_UNAVAILABLE_CSS = "o_im_unavailable_icon";
 	
-	public final static String INSTANT_MESSAGING_CHAT_CSS = "o_instantmessaging_chat";
-	public final static String INSTANT_MESSAGING_MESSAGE_GROUP_CSS = "o_instantmessaging_message_group";
-	public final static String INSTANT_MESSAGING_BODY_CSS = "o_instantmessaging_body";
-	public final static String INSTANT_MESSAGING_AVATAR_CSS = "o_instantmessaging_avatar";
-	public final static String INSTANT_MESSAGING_FORM_CSS = "o_instantmessaging_chat_form";
+	public final static String INSTANT_MESSAGING_CHAT_CSS = "o_im_chat";
+	public final static String INSTANT_MESSAGING_MESSAGE_GROUP_CSS = "o_im_message_group";
+	public final static String INSTANT_MESSAGING_BODY_CSS = "o_im_body";
+	public final static String INSTANT_MESSAGING_AVATAR_CSS = "o_im_avatar";
+	public final static String INSTANT_MESSAGING_FORM_CSS = "o_im_chat_form";
 	
 	public enum UserStatus{
 		AVAILABLE,