Skip to content

Commit

Permalink
Refactored some Views. Inseted text is now truncated when overflowing…
Browse files Browse the repository at this point in the history 
… its parent element. Also Added tooltips for labels in the refactored views.
  • Loading branch information
@Dopaman
Dopaman committed May 30, 2021
1 parent 92499be commit 399eb92
Show file tree
Hide file tree
Showing 9 changed files with 100 additions and 74 deletions.
16 changes: 8 additions & 8 deletions src/game/app/client/views/js/ChatListView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,20 +99,20 @@ class ChatListView extends WindowView {

// Now we want to append each chat as a clickable element
$("#chatListModal .modal-body .list-group").prepend(`
<li class="list-group-item bg-transparent chatthread pl-0 pr-0" id="${"chatListEntry" + chat.chatId}">
<li class="list-group-item bg-transparent chatthread px-0" id="${"chatListEntry" + chat.chatId}">
<a class="" title="Open chat" id="${"chat" + chat.chatId}" role="button" data-toggle="modal" href="">
<div class="d-flex flex-row justify-content-between pl-0 pr-0">
<div class="col-3 mx-auto my-auto">
<div class="d-flex flex-row px-0">
<div class="col-2 pr-0 my-auto">
<div class="d-flex flex-row justify-content-center align-items-center my-auto">
<i class="fa fa-user fa-4x navbarIcons"></i>
<i class="fa fa-user fa-5x navbarIcons"></i>
</div>
</div>
<div class="col-9">
<div class="col-10 pl-4">
<div class="d-flex flex-row justify-content-start align-items-center">
<label class="name lead wrapword">${chat.title}</label>
<label class="name lead text-truncate" title="${chat.title}" data-toggle="tooltip">${chat.title}</label>
</div>
<div class="d-flex flex-row justify-content-start align-items-center">
<span class="small" style="opacity: 0.3" id="${"chatTimestamp" + chat.chatId}">${timestamp}</span>
<span class="small text-truncate" style="opacity: 0.3" id="${"chatTimestamp" + chat.chatId}">${timestamp}</span>
</div>
<div class="d-flex flex-row justify-content-start align-items-center">
<span class ="small wrapword" style="opacity: 0.8" id="${"chatPreviewMessage" + chat.chatId}">${previewMessage}</span>
Expand Down Expand Up @@ -219,7 +219,7 @@ class ChatListView extends WindowView {
<div class="modal" id=${"chatThreadModal" + chatID} role="dialog" aria-labelledby=${"chatThreadModalTitle" + chatID}
aria-hidden="true" data-focus-on="input:first">
<div class="modal-dialog modal-dialog-centered mw-50" role="document">
<div class="modal-content" style="background-color:rgba(34, 43, 46, 1) !important;">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id=${"chatThreadModalTitle" + chatID}></h5>
<div class="d-flex flex-row justify-content-end">
Expand Down
8 changes: 4 additions & 4 deletions src/game/app/client/views/js/ChatParticipantListView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,12 +37,12 @@ class ChatParticipantListView extends Views {
this.usernames.forEach(username => {
$(`#chatParticipantListModal${chatId} .modal-body .list-group`).append(`
<li class="list-group-item bg-transparent chatthread" id="${"chatParticipantEntry" + username}">
<div class="row w-100">
<div class="col-12 col-sm-1 px-0">
<div class="row w-100">
<div class="col-1 px-0">
<i class="fa fa-user fa-2x navbarIcons" style="margin-left: 0.3125rem" ></i>
</div>
<div class="col-12 col-md-11 text-center text-sm-left">
<label class="name lead">${username}</label>
<div class="d-flex col-11 align-items-center text-left">
<span class="name lead text-truncate" title="${username}" data-toggle="tooltip">${username}</span>
</div>
</div>
</li>
Expand Down
2 changes: 1 addition & 1 deletion src/game/app/client/views/js/ChatThreadView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ class ChatThreadView extends WindowView {
$("#chatThreadModalTitle" + this.chat.chatId).empty();
$(`#chatThreadModalList${this.chat.chatId}`).empty();

$('#chatThreadModalTitle' + this.chat.chatId).text(chat.title);
$('#chatThreadModalTitle' + this.chat.chatId).text(chat.title).attr("title", chat.title);

if ($('#notifChatDiv' + this.chat.chatId).length)
$('#notifChatDiv' + this.chat.chatId).remove();
Expand Down
24 changes: 13 additions & 11 deletions src/game/app/client/views/js/FriendListView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,28 +51,30 @@ class FriendListView extends WindowView {
this.businessCards = sortedBusinessCards;

this.businessCards.forEach(businessCard => {
let userTitle = businessCard.getTitle() + " " + businessCard.getForename() + " " + businessCard.getSurname() + " (@" + businessCard.getUsername() + ")";

$('#friendListModal .modal-body .list-group').append(`
<li class="list-group-item bg-transparent chatthread pl-0 pr-0" id="${"friend" + businessCard.getParticipantId()}">
<div class="d-flex flex-row justify-content-between pl-0 pr-0">
<div class="col-3 mx-auto my-auto">
<li class="list-group-item bg-transparent chatthread px-0" id="${"friend" + businessCard.getParticipantId()}">
<div class="d-flex flex-row">
<div class="col-2 pr-0 my-auto">
<div class="d-flex flex-row justify-content-center align-items-center">
<i class="fa fa-user fa-4x navbarIcons"></i>
<i class="fa fa-user fa-5x navbarIcons"></i>
</div>
</div>
<div class="col-9">
<div class="col-9 pr-0 pl-4">
<div class="d-flex flex-row justify-content-start align-items-center">
<label class="name lead wrapword">${businessCard.getTitle() + " " + businessCard.getForename() + " " + businessCard.getSurname() + " (@" + businessCard.getUsername() + ")"}</label>
<label class="name lead text-truncate" title="${userTitle}" data-toggle="tooltip">${userTitle}</label>
</div>
<div class="d-flex flex-row justify-content-start align-items-center">
<span class="fa fa-briefcase fa-fw mr-2" data-toggle="tooltip" title="" data-original-title=""></span>
<span >${businessCard.getJob() + " at " + businessCard.getCompany()}</span>
<span class="fa fa-briefcase fa-fw mr-2"></span>
<span class"text-truncate">${businessCard.getJob() + " at " + businessCard.getCompany()}</span>
</div>
<div class="d-flex flex-row justify-content-start align-items-center">
<span class="fa fa-envelope fa-fw mr-2" data-toggle="tooltip" data-original-title="" title=""></span>
<span class="small">${businessCard.getEmail()}</span>
<span class="fa fa-envelope fa-fw mr-2"></span>
<span class="small text-truncate">${businessCard.getEmail()}</span>
</div>
</div>
<div class="ml-n5 mt-n1">
<div class="col-1 p-0 ml-1 mt-n1">
<div class="d-flex flex-row mt-n3">
<a class="action_button nav-item nav-link" href="" onclick = "" role="button" id="dropdownFriendOption" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-sort-desc fa-2x navbarIcons"></i>
Expand Down
42 changes: 25 additions & 17 deletions src/game/app/client/views/js/FriendRequestListView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,26 +52,34 @@ class FriendRequestListView extends WindowView {
appendFriendRequest(businessCard) {
$('#nofriendrequest').empty();

let userTitle = businessCard.getTitle() + " " + businessCard.getForename() + " " + businessCard.getSurname() + " (@" + businessCard.getUsername() + ")";

$('#friendRequestListModal .modal-body .list-group').prepend(`
<li class="list-group-item bg-transparent" id="${"friendRequest" + businessCard.getParticipantId()}">
<div class="row w-100">
<div class="col-2 px-0">
<i class="fa fa-user fa-5x navbarIcons" style="margin-left: 0.3125rem" ></i>
<li class="list-group-item bg-transparent px-0" id="${"friendRequest" + businessCard.getParticipantId()}">
<div class="d-flex flex-row">
<div class="col-2 pr-0 my-auto">
<div class="d-flex flex-row justify-content-center align-items-center">
<i class="fa fa-user fa-5x navbarIcons"></i>
</div>
</div>
<div class="col-8 text-left">
<label class="name lead">${businessCard.getTitle() + " " + businessCard.getForename() + " " + businessCard.getSurname() + " (@" + businessCard.getUsername() + ")"}</label>
<br>
<span class="fa fa-briefcase fa-fw" data-toggle="tooltip" title="" data-original-title=""></span>
<span >${businessCard.getJob() + " at " + businessCard.getCompany()}</span>
<br>
<div class="col-8 pr-0 pl-4">
<div class="d-flex flex-row justify-content-start align-items-center">
<label class="name lead text-truncate" title="${userTitle}" data-toggle="tooltip">${userTitle}</label>
</div>
<div class="d-flex flex-row justify-content-start align-items-center">
<span class="fa fa-briefcase fa-fw mr-2"></span>
<span class="small text-truncate">${businessCard.getJob() + " at " + businessCard.getCompany()}</span>
</div>
</div>
<div class="col-2")>
<button id="${"accept" + businessCard.getParticipantId()}" title="Remove from friend request and add to friend list" class="btn btn-blue " style="width: 4.6875rem;">Accept</button>
<button id="${"reject" + businessCard.getParticipantId()}" title="Remove from friend request and reject" class="btn btn-white" style="margin-top: 0.625rem; width: 4.6875rem;">Reject</button>
<h6 style="margin-top: 0.5625rem; display: none;" id="${"accepted" + businessCard.getParticipantId()}">Accepted</h6>
<button id="${"rejectdisable" + businessCard.getParticipantId()}" class="btn btn-white" type ="button" style="margin-top: 0.625rem; cursor: not-allowed; display:none;" disabled>Reject</button>
<button id="${"acceptdisable" + businessCard.getParticipantId()}" class="btn btn-blue" type ="button" style="cursor: not-allowed; display: none;" disabled>Accept</button>
<h6 style="margin-top: 1.25rem; margin-left: 0.25rem; display:none" id="${"rejected" + businessCard.getParticipantId()}">Rejected</h6>
<div class="col-2 p-0 my-auto">
<div class="d-flex flex-column align-items-center">
<h6 style="display: none;" id="${"accepted" + businessCard.getParticipantId()}">Accepted</h6>
<button id="${"accept" + businessCard.getParticipantId()}" title="Remove from friend request and add to friend list" class="btn btn-blue" style="width: 100%;">Accept</button>
<button id="${"reject" + businessCard.getParticipantId()}" title="Remove from friend request and reject" class="btn btn-white" style="margin-top: 0.625rem; width: 100%;">Reject</button>
<button id="${"rejectdisable" + businessCard.getParticipantId()}" class="btn btn-white" type ="button" style="margin-top: 0.625rem; cursor: not-allowed; display:none;" disabled>Reject</button>
<button id="${"acceptdisable" + businessCard.getParticipantId()}" class="btn btn-blue" type ="button" style="cursor: not-allowed; display: none;" disabled>Accept</button>
<h6 class="mt-2 mb-0" style="display:none" id="${"rejected" + businessCard.getParticipantId()}">Rejected</h6>
</div>
</div>
</div>
</li>
Expand Down
50 changes: 30 additions & 20 deletions src/game/app/client/views/js/InviteFriendsView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,30 +59,40 @@ class InviteFriendsView extends WindowView {
this.chatId = chatId;

this.businessCards.forEach(businessCard => {
let userTitle = businessCard.getTitle() + " " + businessCard.getForename() + " " + businessCard.getSurname() + " (@" + businessCard.getUsername() + ")";

$('#inviteFriendsModal .modal-body .list-group').append(`
<ul id="${"invitefriend" + businessCard.getParticipantId()}">
<li class="list-group-item bg-transparent" >
<div class="row w-100">
<div class="col-2 px-0">
<i class="fa fa-user fa-5x navbarIcons" style="margin-left: 0.3125rem" ></i>
<li class="list-group-item bg-transparent px-0" >
<div class="d-flex flex-row">
<div class="col-2 pr-0 my-auto">
<div class="d-flex flex-row justify-content-center align-items-center">
<i class="fa fa-user fa-5x navbarIcons"></i>
</div>
</div>
<div class="col-9 pr-0 pl-4">
<div class="d-flex flex-row justify-content-start align-items-center">
<label class="name lead text-truncate" title="${userTitle}" data-toggle="tooltip">${userTitle}</label>
</div>
<div class="d-flex flex-row justify-content-start align-items-center">
<span class="fa fa-briefcase fa-fw mr-2"></span>
<span class="text-truncate">${businessCard.getJob() + " at " + businessCard.getCompany()}</span>
</div>
<div class="d-flex flex-row justify-content-start align-items-center">
<span class="fa fa-envelope fa-fw mr-2"></span>
<span class="small text-truncate">${businessCard.getEmail()}</span>
</div>
</div>
<div class="col-9 text-left">
<label class="name lead">${businessCard.getTitle() + " " + businessCard.getForename() + " " + businessCard.getSurname() + " (@" + businessCard.getUsername() + ")"}</label>
<br>
<span class="fa fa-briefcase fa-fw" data-toggle="tooltip" title="" data-original-title=""></span>
<span >${businessCard.getJob() + " at " + businessCard.getCompany()}</span>
<br>
<span class="fa fa-envelope fa-fw" data-toggle="tooltip" data-original-title="" title=""></span>
<span class="small">${businessCard.getEmail()}</span>
<div class="col-1 p-0 ml-n1">
<div class="d-flex flex-row mt-n2">
<button id="${"invite" + businessCard.getParticipantId()}" style="outline: none; box-shadow: none;" class="btn">
<i class="fa fa-plus-circle fa-2x navbarIcons"></i>
</button>
<button id="${"selected" + businessCard.getParticipantId()}" style="outline: none; box-shadow: none" class="btn">
<i class="fa fa-check-circle fa-2x navbarIcons"></i>
</button>
</div>
</div>
<div class="col-1">
<button id="${"invite" + businessCard.getParticipantId()}" style="position: absolute; margin-top: -0.4375rem; margin-left: 0.3125rem; outline: none; box-shadow: none;" class="btn">
<i class="fa fa-plus-circle fa-2x navbarIcons"></i>
</button>
<button id="${"selected" + businessCard.getParticipantId()}" style="position: absolute; display: none; margin-top: -0.4375rem; margin-left: 0.3125rem; outline: none; box-shadow: none" class="btn">
<i class="fa fa-check-circle fa-2x navbarIcons"></i>
</button>
</div>
</div>
</li>
</ul>
Expand Down
18 changes: 11 additions & 7 deletions src/game/app/client/views/js/MeetingListView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,16 +85,20 @@ class MeetingListView extends WindowView {
$('#nomeeting').empty();

$('#meetingListModal .modal-body .list-group').prepend(`
<li class="list-group-item bg-transparent chatthread" id="${"meetingEntry" + meeting.id}">
<li class="list-group-item bg-transparent chatthread px-0" id="${"meetingEntry" + meeting.id}">
<a class="" title="Open meeting" id="${"meeting" + meeting.id}" role="button" data-toggle="modal" href="">
<div class="row w-100">
<div class="col-2 px-0">
<i class="fa fa-video fa-4x navbarIcons"></i>
<div class="d-flex flex-row align-items-center">
<div class="col-2 pr-0 my-auto">
<div class="d-flex flex-row justify-content-center align-items-center">
<i class="fa fa-video fa-5x navbarIcons"></i>
</div>
<div class="col-10 text-left">
<label class="name lead">${meeting.name}</label>
</div>
</div>
<div class="col-10 pl-3">
<div class="d-flex flex-row justify-content-center align-items-center">
<span class="name lead text-truncate mr-3" title="${meeting.name}" data-toggle="tooltip">${meeting.name}</span>
</div>
</div>
</div>
</a>
</li>
`);
Expand Down
Loading

0 comments on commit 399eb92

Please sign in to comment.