Online indicators on PM list
This commit is contained in:
parent
2ef6e937c6
commit
3746dc08de
|
@ -131,7 +131,7 @@
|
|||
|
||||
@Hook('destroyed')
|
||||
destroyed(): void {
|
||||
console.log('EDITOR', 'destroyed');
|
||||
// console.log('EDITOR', 'destroyed');
|
||||
window.removeEventListener('resize', this.resizeListener);
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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";
|
||||
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue