opensource/galaxy
3
0
Fork 0
mirror of https://github.com/galaxyproject/galaxy.git synced 2026-09-24 16:30:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fixing the issue with persistent room names with spaces, adding fancy scroll bar, buttons instead of links for persistent rooms and UI changes for message area

Browse Source
This commit is contained in:
anuprulez
2016-06-14 20:03:58 +02:00
parent f034f1778b
commit 111a1c6222
8 changed files with 73 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/galaxy/scripts/layout/menu.js
+1 -1
View File
@@ -24,7 +24,7 @@ var Collection = Backbone.Collection.extend({
var host = window.Galaxy.config.communication_server_host,
port = window.Galaxy.config.communication_server_port,
username = escape(window.Galaxy.user.attributes.username),
persistent_communication_rooms = window.Galaxy.config.persistent_communication_rooms,
persistent_communication_rooms = escape(window.Galaxy.config.persistent_communication_rooms),
query_string = "?username=" + username + "&persistent_communication_rooms=" + persistent_communication_rooms,
src = host + ":" + port + query_string,
$el_chat_modal_header = null,
scripts/communication/template/communication.css
+23 -7
View File
@@ -1,6 +1,6 @@
html, body {
height: 100%;
font-size: 13px;
font-size: 12px;
}
body {
@@ -20,20 +20,20 @@ body {
.message-textarea {
height: 50px !important;
width: 99.5%;
font-size: 13px;
padding: 6px 3px;
font-size: inherit;
}
/* Styles for top right icons */
.right_icons {
margin-left: 94.5%;
margin-left: 95%;
}
.chat-room-textbx {
width: 34%;
height: 10%;
font-size: 13px;
padding: 6px 3px;
font-size: inherit;
}
ul, li,
@@ -42,10 +42,15 @@ ul, li,
color: black;
}
.nav>li>a:hover, .nav>li>a:focus {
background-color: #F7F8FA;
}
.messages {
overflow-y: auto;
height: 100%;
margin-left: 2px;
/*background-color: #F7F8FA;*/
}
.send_message {
@@ -55,21 +60,27 @@ ul, li,
.user_name {
font-style: italic;
margin-left: 2px;
}
.user_message {
background-color: #DFE5F9;
background-color: #F7F8FA;
width: 99%;
margin: 2px 0px 4px 2px;
padding: 2px;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
border-radius: 2px;
}
.date_time {
font-style: italic;
font-size: 12px;
font-size: 11px;
width: 99%;
}
.date_time span {
float: right;
margin: 2px -2px 0 0;
}
.tab-content {
@@ -86,7 +97,6 @@ ul, li,
ul > li i {
padding-left: 4px;
font-size: 12px;
}
.join-room {
@@ -99,6 +109,12 @@ ul > li i {
margin-top: 1%;
}
.global-room {
margin: 0px 2px 2px 0px;
padding: 3px 6px;
font-size: inherit;
}
a:hover, a:visited {
text-decoration: none;
}
scripts/communication/template/communication.html
+3 -1
View File
@@ -3,6 +3,7 @@
<head>
<title>Chat</title>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/jquery.mCustomScrollbar.min.css">
<link rel="stylesheet" type="text/css" href="communication.css">
</head>
<body class="body-container">
@@ -26,7 +27,7 @@
</div>
<div class="tab-content">
<div class="tab-pane active fade in" id="all_chat_tab">
<div id="all_messages" class="messages"></div>
<div id="all_messages" class="messages mCustomScrollbar"></div>
</div>
<div class="tab-pane fade" id="chat_room_tab">
<div id="join_room" class="join-room">
@@ -47,6 +48,7 @@
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="https://use.fontawesome.com/89a733ecb7.js"></script>
<script type="text/javascript" src="communication.js"></script>
scripts/communication/template/communication.js
+42 -27
View File
@@ -24,7 +24,7 @@ var events_module = {
// updates the user session storage with all the messages
sessionStorage['broadcast'] = $el_all_messages.html();
// show the last item by scrolling to the end
utils.scroll_to_last( $el_all_messages );
utils.fancyscroll_to_last( $("#all_chat_tab") );
// Alert user if needed
if ( uid !== msg.user ) {
utils.show_notification( $el_tab_li );
@@ -47,7 +47,7 @@ var events_module = {
user: server_text_name,
};
utils.append_message( $el_all_messages, utils.build_message( message ) );
utils.scroll_to_last( $el_all_messages );
utils.fancyscroll_to_last( $("#all_chat_tab") );
// shows notification when message is from other user
if ( uid !== msg.userjoin ) {
$el_tab_li = $( "a[data-target='#all_chat_tab']" );
@@ -60,7 +60,7 @@ var events_module = {
user: server_text_name,
};
utils.append_message( $el_all_messages, utils.build_message( message ) );
utils.scroll_to_last( $el_all_messages );
utils.fancyscroll_to_last( $("#all_chat_tab") );
// shows notification when message is from other user
if ( uid !== msg.userleave ) {
$el_tab_li = $( "a[data-target='#all_chat_tab']" );
@@ -71,7 +71,7 @@ var events_module = {
var room = utils.check_room_by_roomname( click_events.connected_room, msg.chatroom );
$el_room_msg = $( '#all_messages_' + room.id );
utils.append_message( $el_room_msg, utils.build_message( msg ) );
utils.scroll_to_last( $el_room_msg );
utils.fancyscroll_to_last( $( "#galaxy_tabroom_" + room.id ) );
// if the pushed message is for some other user, show notification
if (uid !== msg.data) {
$el_tab_li = $( "a[data-target='#galaxy_tabroom_" + room.id + "'" + " ]" );
@@ -138,14 +138,14 @@ var click_events = {
if( e.target.attributes['data-target'] ) {
// sets the active tab
click_events.active_tab = e.target.attributes['data-target'].nodeValue;
// removes the background color
$( this ).children().css( 'background-color', '' );
// hides the message textarea for create room tab
utils.show_hide_textarea( $( this ).children() );
// finds the tab content and scrolls to last
message_area_div_id = $( this ).find('a').attr( 'data-target' );
message_area_id = $( message_area_div_id + ' .messages' ).attr( 'id' );
if( message_area_id ) { // if it has message area
utils.scroll_to_last( $( '#' + message_area_id ) );
if( message_area_div_id ) { // if it has message area
utils.fancyscroll_to_last( $( message_area_div_id ) );
}
}
});
@@ -275,7 +275,7 @@ var click_events = {
// creates a tab for persistent chat room upon clicking
$('.global-room').click(function( e ) {
e.stopPropagation();
chat_room_name = e.target.parentElement.title;
chat_room_name = $(this)[0].title;
utils.create_new_tab( chat_room_name, $el_txtbox_chat_room, $el_chat_room_tab, $el_chat_tabs, $el_tab_content, $el_msg_box );
return false;
});
@@ -300,6 +300,9 @@ var click_events = {
}
// utility methods
var utils = {
notification_color_code: '#FFD700',
connected_color_code: "#00FF00",
disconnected_color_code: "#FF0000",
// fill in all messages
fill_messages: function ( collection ) {
var uid = utils.get_userid(),
@@ -311,7 +314,7 @@ var utils = {
$el_all_messages.append( $( '<div' + '/' + '>' ).html( message_html ) );
}
// show the last item by scrolling to the end
utils.scroll_to_last( $el_all_messages );
utils.fancyscroll_to_last( $("#all_chat_tab") );
},
// get the current username of logged in user
get_userid: function () {
@@ -319,12 +322,6 @@ var utils = {
query_string_list = location.search.slice( query_string_start ).split( '&' );
return query_string_list[0].split( '=' )[1];
},
// scrolls to the last of the element
scroll_to_last: function ( $el ) {
if ( $el[0] ) {
$el.scrollTop( $el[0].scrollHeight );
}
},
// append message
append_message: function ( $el, message ) {
$el.append( message );
@@ -358,17 +355,17 @@ var utils = {
// builds template for username for message display
build_message_username_template: function ( username ) {
return "<div class='date_time'><span title=" + this.get_date() + ">" + this.get_time() + "</span></div>" +
"<span class='user_name'>" + username + ":<br></span>";
"<span class='user_name'>" + username + "<br></span>";
},
// adds an information about the online status
update_online_status: function ( $el, connected ) {
var connected_message = "You are online. Press to be offline.",
disconnected_message = "You are offline. Press to be online.";
if ( connected ) {
$el.prop( "title", connected_message ).css( "color", "#00FF00" );
$el.prop( "title", connected_message ).css( "color", this.connected_color_code );
}
else {
$el.prop( "title", disconnected_message ).css( "color", "#FF0000" );
$el.prop( "title", disconnected_message ).css( "color", this.disconnected_color_code );
}
},
// gets the current time
@@ -400,10 +397,10 @@ var utils = {
// pushed to an inactive tab(s)
show_notification: function ( $el ) {
if ( !$el.parent().hasClass( 'active' ) ) {
$el.css( 'background-color', '#FCD116' );
$el.css( 'background-color', this.notification_color_code );
for (var i = 2; i >= 1; i--) {
// shows the animation
$el.fadeOut( 200 ).fadeIn( 200 );
$el.fadeOut( 150 ).fadeIn( 150 );
}
}
},
@@ -478,10 +475,10 @@ var utils = {
// save chat logs
store_append_message: function( key, data ) {
if (!localStorage[key]) {
localStorage[key] = data + '<br>';
localStorage[key] = data;
}
else {
localStorage[key] = localStorage[key] + data + '<br>';
localStorage[key] = localStorage[key] + data;
}
},
create_global_chatroom_links: function() {
@@ -495,7 +492,9 @@ var utils = {
// creates html template for persistent rooms
for(var room_counter = 0; room_counter < persistent_communication_rooms.length; room_counter++ ) {
room_name = persistent_communication_rooms[room_counter];
room_template = "<a href='#' class='global-room' title=" + room_name + "><span>" + room_name + "</span></a><br>";
//room_template = "<a href='#' class='global-room' title='" + room_name + "'><span>" + room_name + "</span></a><br>";
room_template = "<button type='button' class='btn btn-primary global-room' title='" + room_name +
"'>" + room_name + "</button>";
$el_room_container.append(room_template);
}
},
@@ -539,6 +538,7 @@ var utils = {
$el_tab_content.append(tab_room_body_template);
// registers leave room event
self.leave_close_room();
utils.create_fancy_scroll( $( '#' + tab_id ), "#"+tab_id );
click_events.tab_counter++;
}
self.active_element();
@@ -552,7 +552,9 @@ var utils = {
get_persistent_rooms: function() {
var query_string_start = location.search.indexOf('?') + 1,
query_string_list = location.search.slice(query_string_start).split('&');
return query_string_list[1].split('=')[1].split(',');
// unescapes the list
query_string_list = unescape(query_string_list[1]);
return query_string_list.split('=')[1].split(',');
},
// returns the room information if it exists
check_room_by_roomname: function( dictionary, room_name ) {
@@ -583,6 +585,17 @@ var utils = {
// smooth transition of body element upon first load
load_transition: function() {
$('.body-container').addClass('body-container-loaded');
},
// creates fancy scroll for the messages area
create_fancy_scroll: function( $el, element_id ) {
$el.mCustomScrollbar({
theme:"minimal"
});
$( element_id + ' .mCSB_dragger_bar' ).css( 'background-color', 'black' );
},
// scrolls the fancy scroll to the last element
fancyscroll_to_last: function( $el ) {
$el.mCustomScrollbar( "scrollTo", "bottom" );
}
}
// this event fires when all the resources of the page
@@ -591,7 +604,8 @@ $(window).load(function() {
var uid = utils.get_userid(),
$el_textarea = $('#send_data'),
$el_all_messages = $('#all_messages'),
$el_chat_tabs = $('#chat_tabs');
$el_chat_tabs = $('#chat_tabs'),
main_tab_id = "#all_chat_tab";
// build tabs
$el_chat_tabs.tab();
// registers response event
@@ -620,10 +634,11 @@ $(window).load(function() {
// by checking if user was connected or not
utils.checks_session_storage();
utils.fill_messages(sessionStorage['broadcast']);
// scrolls to the last of the element
utils.scroll_to_last( $el_all_messages );
// sets focus to the textarea
utils.set_focus_textarea( $el_textarea );
// sets smooth transition
utils.load_transition();
utils.create_fancy_scroll( $( main_tab_id ), main_tab_id );
// scrolls to the last of the element
utils.fancyscroll_to_last( $( main_tab_id ) );
});
static/maps/layout/menu.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
static/scripts/bundled/libs.bundled.js
+1 -1
View File
File diff suppressed because one or more lines are too long
static/scripts/bundled/libs.bundled.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
static/scripts/layout/menu.js
+1 -1
View File
File diff suppressed because one or more lines are too long