From 3746dc08debd1481ee123355129517d049feae86 Mon Sep 17 00:00:00 2001
From: "Mr. Stallion" <mrstallion@nobody.nowhere.fauxdomain.ext>
Date: Tue, 17 Mar 2020 17:24:34 -0500
Subject: [PATCH] Online indicators on PM list

---
 bbcode/Editor.vue               |  2 +-
 chat/ChatView.vue               | 52 +++++++++++++++++++++++++++++++++
 readme.md                       |  1 +
 scss/fa.scss                    |  4 ++-
 site/character_page/sidebar.vue |  7 +++--
 5 files changed, 61 insertions(+), 5 deletions(-)

diff --git a/bbcode/Editor.vue b/bbcode/Editor.vue
index 037df8f..08bb10c 100644
--- a/bbcode/Editor.vue
+++ b/bbcode/Editor.vue
@@ -131,7 +131,7 @@
 
         @Hook('destroyed')
         destroyed(): void {
-            console.log('EDITOR', 'destroyed');
+            // console.log('EDITOR', 'destroyed');
             window.removeEventListener('resize', this.resizeListener);
         }
 
diff --git a/chat/ChatView.vue b/chat/ChatView.vue
index e61a37d..7bd0bfb 100644
--- a/chat/ChatView.vue
+++ b/chat/ChatView.vue
@@ -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;
diff --git a/readme.md b/readme.md
index fa0dd46..3c4d41f 100644
--- a/readme.md
+++ b/readme.md
@@ -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
diff --git a/scss/fa.scss b/scss/fa.scss
index ab5f9ab..436b82c 100644
--- a/scss/fa.scss
+++ b/scss/fa.scss
@@ -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";
\ No newline at end of file
+@import "~@fortawesome/fontawesome-free/scss/brands.scss";
+
+
diff --git a/site/character_page/sidebar.vue b/site/character_page/sidebar.vue
index 23186b7..d01a2f3 100644
--- a/site/character_page/sidebar.vue
+++ b/site/character_page/sidebar.vue
@@ -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>