Online indicators on PM list

This commit is contained in:
Mr. Stallion 2020-03-17 17:24:34 -05:00
parent 2ef6e937c6
commit 3746dc08de
5 changed files with 61 additions and 5 deletions

View File

@ -131,7 +131,7 @@
@Hook('destroyed')
destroyed(): void {
console.log('EDITOR', 'destroyed');
// console.log('EDITOR', 'destroyed');
window.removeEventListener('resize', this.resizeListener);
}

View File

@ -44,6 +44,7 @@
:class="{'fa-comment-dots': conversation.typingStatus == 'typing', 'fa-comment': conversation.typingStatus == 'paused'}"
></span>
<span style="flex:1"></span>
<span :class="getOnlineStatusIconClasses(conversation)"></span>
<span class="pin fas fa-thumbtack" :class="{'active': conversation.isPinned}"
@click="conversation.isPinned = !conversation.isPinned" :aria-label="l('chat.pinTab')"></span>
<span class="fas fa-times leave" @click.stop="conversation.close()" :aria-label="l('chat.closeTab')"></span>
@ -123,6 +124,7 @@
import UserList from './UserList.vue';
import UserMenu from './UserMenu.vue';
import ImagePreview from './preview/ImagePreview.vue';
import PrivateConversation = Conversation.PrivateConversation;
const unreadClasses = {
[Conversation.UnreadState.None]: '',
@ -275,6 +277,30 @@
sheet.insertRule(`.form-control, select.form-control { line-height: 1.428571429 }`, sheet.cssRules.length);
}
getOnlineStatusIconClasses(conversation: PrivateConversation) {
const status = conversation.character.status;
const styling = {
crown: { color: 'online', icon: ['fas', 'fa-crown'] },
online: { color: 'online', icon: ['fas', 'fa-circle'] },
looking: { color: 'online', icon: ['fa', 'fa-eye'] },
offline: { color: 'offline', icon: ['fas', 'fa-circle'] },
busy: { color: 'away', icon: ['fas', 'fa-circle'] },
idle: { color: 'away', icon: ['fas', 'fa-circle'] },
dnd: { color: 'away', icon: ['fas', 'fa-circle'] },
away: { color: 'away', icon: ['fas', 'fa-circle'] },
};
const cls = { [styling[status].color]: true };
_.each(
styling[status].icon,
(name) => cls[name] = true
);
return cls;
}
logOut(): void {
if(confirm(l('chat.confirmLeave'))) core.connection.close();
}
@ -345,6 +371,10 @@
}
.list-group.conversation-nav {
.fas.active {
color: #02a002;
}
margin-bottom: 10px;
.list-group-item {
padding: 5px;
@ -370,6 +400,28 @@
padding-left: 0;
padding-top: 0;
padding-bottom: 0;
.offline,
.online,
.away {
font-size: 80%;
}
.offline {
color: #5c5c84;
}
.online {
color: #02a002;
}
.away {
color: #c7894f;
}
.fa-eye {
margin-right: 3px;
}
}
img {
height: 40px;

View File

@ -79,6 +79,7 @@ This repository contains a heavily customized version of the mainline F-Chat 3.0
* AD UI Cleanup / hide to popovers
* image loading animation
* Ad cache is broken
* Show online / offline status on PM list
# F-List Exported

View File

@ -2,4 +2,6 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts" !default;
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "~@fortawesome/fontawesome-free/scss/solid.scss";
@import "~@fortawesome/fontawesome-free/scss/regular.scss";
@import "~@fortawesome/fontawesome-free/scss/brands.scss";
@import "~@fortawesome/fontawesome-free/scss/brands.scss";

View File

@ -43,9 +43,10 @@
<infotag-item v-for="id in quickInfoIds" v-if="character.character.infotags[id]" :infotag="getInfotag(id)"
:data="character.character.infotags[id]" :key="id" :characterMatch="characterMatch"></infotag-item>
<div class="contact-block">
<contact-method v-for="method in contactMethods" :method="method" :key="method.id"></contact-method>
</div>
<div class="contact-block">
<contact-method v-for="method in contactMethods" :infotag="method" :key="method.id"
:data="character.character.infotags[method.id]"></contact-method>
</div>
<div class="quick-info">
<span class="quick-info-label">Created</span>