Skip to content

Commit

Permalink
Adding maximize/minimize feature to the communication channel
Browse files Browse the repository at this point in the history
  • Loading branch information
@anuprulez
anuprulez committed Jul 14, 2016
1 parent ff23df0 commit 0d915ce
Show file tree
Hide file tree
Showing 7 changed files with 111 additions and 36 deletions.
21 changes: 20 additions & 1 deletion client/galaxy/scripts/layout/generic-nav-view.js
View file
Expand Up @@ -20,11 +20,12 @@ var GenericNavView = Backbone.View.extend({
$el_chat_modal_body = null,
iframe_template = '<iframe class="f-iframe fade in communication-iframe" src="' + src + '"> </iframe>',
header_template = '<i class="fa fa-comment" aria-hidden="true" title="Communicate with other users"></i>' +
'<i class="fa fa-expand expand-compress-modal" aria-hidden="true" title="Maximize"></i>' +
'<i class="fa fa-times close-modal" aria-hidden="true" title="Close"></i>',
frame_height = 350,
frame_width = 600,
class_names = 'ui-modal chat-modal';

// deletes the chat modal if already present and create one
if( $( '.chat-modal' ).length > 0 ) {
$( '.chat-modal' ).remove();
Expand Down Expand Up @@ -53,6 +54,24 @@ var GenericNavView = Backbone.View.extend({
$( '.close-modal' ).click(function( e ) {
$( '.chat-modal' ).css( 'display', 'none' );
});
// click event of expand and compress icon
$( '.expand-compress-modal' ).click(function( e ) {
if( $( '.expand-compress-modal' ).hasClass( 'fa-expand' ) ) {
$( '.chat-modal .modal-dialog' ).width( '1000px' );
$( '.chat-modal .modal-body' ).height( '575px' );
$( '.expand-compress-modal' ).removeClass( 'fa-expand' ).addClass( 'fa-compress' );
$( '.expand-compress-modal' ).attr('title', 'Minimize');
$( '.expand-compress-modal' ).css('margin-left', '96.2%');
}
else {
$( '.chat-modal .modal-dialog' ).width( frame_width + 'px' );
$( '.chat-modal .modal-body' ).height( frame_height + 'px' );
$( '.expand-compress-modal' ).removeClass( 'fa-compress' ).addClass( 'fa-expand' );
$( '.expand-compress-modal' ).attr('title', 'Maximize');
$( '.expand-compress-modal' ).css('margin-left', '93.2%');
}

});
return this;
},

Expand Down
6 changes: 6 additions & 0 deletions client/galaxy/style/less/base.less
View file
Expand Up @@ -1739,3 +1739,9 @@ div.toolTitleNoSection
float: right;
cursor: pointer;
}

.expand-compress-modal {
cursor: pointer;
font-size: 12px;
margin-left: 93.2%;
}
10 changes: 8 additions & 2 deletions scripts/communication/template/communication.css
View file
Expand Up @@ -87,7 +87,12 @@ ul, li,

.tab-pane {
height: 100%;
padding: 20px;
padding: 5px 20px 5px 5px;

}

#chat_room_tab {
margin-left: 2%;
}

.row {
Expand Down Expand Up @@ -166,7 +171,8 @@ a:hover, a:visited {
float: left;
}

.message-height {
.message-height,
.notification-padding {
padding-right: 0px;
}

Expand Down
74 changes: 59 additions & 15 deletions scripts/communication/template/communication.js
View file
Expand Up @@ -18,7 +18,7 @@ var events_module = {
// append only for non empty messages
if (msg.data.length > 0) {
utils.append_message( $el_all_messages, message );
utils.vertical_center_align_gravatar( '#all_messages' );
utils.vertical_center_align_gravatar( $( '#all_messages .message' ) );
// adding message to build full chat history
utils.store_append_message( uid, $el_all_messages.html() );
}
Expand Down Expand Up @@ -72,7 +72,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.vertical_center_align_gravatar( '#all_messages_' + room.id );
utils.vertical_center_align_gravatar( $( '#all_messages_' + room.id + ' .message' ) );
utils.fancyscroll_to_last( $( "#galaxy_tabroom_" + room.id ) );
// if the pushed message is for some other user, show notification
if (uid !== msg.data) {
Expand Down Expand Up @@ -305,6 +305,23 @@ var click_events = {
}
}
});
},
// event for body resize
event_window_resize: function() {
$( window ).resize(function() {
var body_width = $('.body-container').width();
if ( body_width > 600 ) {
$('.right_icons').css('margin-left', '97%');
$('.tab-content').height( '79%' );
}
else {
$('.right_icons').css('margin-left', '95%');
$('.tab-content').height( '65%' );
}
// adjusts the vertical alignment of the gravatars
utils.gravatar_align();

});
}
}
// utility methods
Expand All @@ -324,6 +341,7 @@ var utils = {
}
// show the last item by scrolling to the end
utils.fancyscroll_to_last( $("#all_chat_tab") );
utils.gravatar_align();
},
// get the current username of logged in user
get_userid: function () {
Expand All @@ -334,7 +352,6 @@ var utils = {
// append message
append_message: function ( $el, message ) {
$el.append( message );
//$el.append( '<br>' );
},
// builds message for self
build_message: function ( original_message ) {
Expand All @@ -358,10 +375,6 @@ var utils = {
},
// builds template for message display
build_message_from_template: function ( user, original_message ) {
//return "<div class='date_time'><span title=" + this.get_date() + ">" + this.get_time() + "</span></div>" +
//"<span class='user_name'>" + username + "<br></span>" +
//"<div class='user_message'>" + unescape( original_message ) +
//"</div>";
var gravatar_col_content = '' +
'<img src="https://s.gravatar.com/avatar/' + user.gravatar + '?s=32&d=identicon" />' +
'';
Expand All @@ -388,7 +401,7 @@ var utils = {
'</div>';
} else if ( user.username === "Notification" ){
return '<div class="row message">' +
'<div class="col-xs-11 col-md-12">' +
'<div class="col-xs-11 col-md-12 notification-padding">' +
message_col_content +
'</div>' +
'</div>';
Expand Down Expand Up @@ -658,14 +671,44 @@ var utils = {
fancyscroll_to_last: function( $el ) {
$el.mCustomScrollbar( "scrollTo", "bottom" );
},
vertical_center_align_gravatar: function( parent ) {
var usermsg_length = $( parent + ' .message-height' ).length,
usermsg_height = ( $( $( parent + ' .message-height' )[ usermsg_length-1 ] ).height() / 2 ),
gravatar_length = $( parent + ' .vertical-align' ).length,
gravatar_height = ( $( $( parent + ' .vertical-align' )[ gravatar_length-1 ] ).height() / 2 );
// sets the vertical height of gravatar icon
$( $( parent + ' .vertical-align img' )[ gravatar_length-1 ] ).css( 'padding-top', usermsg_height - gravatar_height);
// vertically aligns the gravatar icon in the center
vertical_center_align_gravatar: function( $el ) {
var usermsg_length = $el.find('.message-height').length,
usermsg_height = ( $( $el.find('.message-height')[ usermsg_length - 1 ] ).height() / 2 ),
gravatar_height = ( $( $el.find( '.vertical-align img' )[0] ).height() / 2 );

if( gravatar_height === 0 ) {
gravatar_height = 16;
}
$( $el.find( '.vertical-align img' )[ usermsg_length - 1 ] ).css( 'padding-top', usermsg_height - gravatar_height );
},

gravatar_align: function() {
var active_tab_target = $('li.active a').attr('data-target').split('_'),
tab_number = "",
selector = "",
scroll_selector = "",
usermsg_height = 0,
gravatar_height = 0;
// finds the active tab's suffix number
tab_number = active_tab_target[active_tab_target.length - 1];
if( isNaN( tab_number ) ) {
selector = "#all_messages";
scroll_selector = "#all_chat_tab";
}
else {
selector = "#all_messages_" + tab_number;
scroll_selector = "#galaxy_tabroom_" + tab_number;
}
$( selector + ' .message' ).each(function( index ) {
usermsg_height = ( $( this ).find( '.message-height' ).height() / 2 ),
gravatar_height = ( $( this ).find( '.vertical-align img' ).height() / 2 );
$( this ).find( '.vertical-align img' ).css( 'padding-top', (usermsg_height - gravatar_height) );
});
// scrolls to the last element
utils.fancyscroll_to_last( $( scroll_selector ) );
}

}
// this event fires when all the resources of the page
// have been loaded
Expand Down Expand Up @@ -712,4 +755,5 @@ $(window).load(function() {
// scrolls to the last of the element
utils.fancyscroll_to_last( $( main_tab_id ) );
$el_persistent_rooms_visible.css('display', 'none');
click_events.event_window_resize();
});
32 changes: 16 additions & 16 deletions static/scripts/bundled/libs.bundled.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion static/scripts/bundled/libs.bundled.js.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion static/style/blue/base.css
View file

Large diffs are not rendered by default.

0 comments on commit 0d915ce

Please sign in to comment.