Skip to content
Snippets Groups Projects
Commit b106a7f6 authored by gnaegi's avatar gnaegi
Browse files

OO-1068 bootstrapify chat

parent 6bb2a024
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 115 additions and 57 deletions
src/main/java/org/olat/instantMessaging/ui/ChatController.java
+ 2
− 2
View file @ b106a7f6
......@@ -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
+ 8
− 8
View file @ b106a7f6
......@@ -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
+ 6
− 6
View file @ b106a7f6
......@@ -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
+ 1
− 1
View file @ b106a7f6
<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
+ 3
− 3
View file @ b106a7f6
......@@ -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
+ 15
− 13
View file @ b106a7f6
<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
+ 1
− 1
View file @ b106a7f6
......@@ -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
+ 2
− 2
View file @ b106a7f6
......@@ -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
+ 1
− 1
View file @ b106a7f6
......@@ -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
+ 13
− 0
View file @ b106a7f6
......@@ -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
+ 45
− 4
View file @ b106a7f6
......@@ -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
+ 3
− 1
View file @ b106a7f6
......@@ -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/main/webapp/static/themes/light/theme.css
+ 3
− 3
View file @ b106a7f6
source diff could not be displayed: it is too large. Options to address this: view the blob.
src/test/java/org/olat/util/FunctionalInstantMessagingUtil.java
+ 12
− 12
View file @ b106a7f6
......@@ -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,
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment