added hover / active styling or threadpreview components. aded a foot…

…er.css to src. footer.css gives the footer display:none. this was done to remove the spacing at the bottom of the page w/o having to rewrite a whole php file that handles theming like in fusionpbx
AccelerateNetworks · Nov 15, 2023 · 4988510 · 4988510
1 parent 648ae2d
commit 4988510
Show file tree

Hide file tree

Showing 8 changed files with 194 additions and 173 deletions.
diff --git a/frontend/components/ConvoPlaceholder.vue b/frontend/components/ConvoPlaceholder.vue
@@ -22,95 +22,6 @@ height: 83vh;
     grid-column-end: 2;
 }
 
-/* these are for conversation which we are sidestepping for now */
-
-
-.thread {
-    height:80vh;
-    margin: 0 auto;
-    border-left: solid #3178b1 2px;
-    border-right: solid #3178b1 2px;
-    border-bottom: solid #3178b1 2px;
-    border-bottom-left-radius: 0.5em;
-    border-bottom-right-radius: 0.5em;
-    padding-left: 0.5em;
-    padding-right: 0.5em;
-
-    /* stupid hack to get the text entry box to display inside the bounds of the thread */
-    display: flex;
-    flex-direction: column;
-}
-
-.thread-header {
-    margin: 0 auto;
-    padding: 1em;
-    background-color: #3178b1;
-    color: #fff;
-    border-top-left-radius: 0.5em;
-    border-top-right-radius: 0.5em;
-    font-weight: bold;
-}
-
-.message-container {
-    height: 100%;
-    overflow-y: auto;
-    display: flex;
-    flex-flow: column;
-    justify-content: flex-start;
-    margin-bottom: 0.5em;
-}
-
-.backfill {
-    max-width: 50em;
-    margin: 0 auto;
-    padding: 1em;
-}
-
-.white {
-    color: white;
-}
-
-td:active{
-    background-color:#3178B1;
-    color:white;
-}
-td:hover{
-    background-color: aliceblue;
-}
-table {
-    width: 100%;
-    table-layout: fixed;
-}
-    
-.timestamp {
-    color: #999;
-    font-size: 8pt;
-    padding-left: 0.5em;
-}
-.thread-name {
-    font-size: 12pt;
-    color: #000;
-}
-.thread-name:active{
-    color:white;
-}
-.thread-last-message {
-    color: #000;
-}
-.thread-last-message:active {
-    color: #fff;
-}
-td {
-    border: solid #3178b1;
-    border-radius: 1em;
-    padding: 0.25em;
-    margin-bottom: 0.5em;
-    min-height: calc(50px + 1em);
-}
-table {
-    width: 100%;
-    table-layout: fixed;
-}
 @media screen and (width <=700px){
     #conversation{ 
         display: none;

diff --git a/frontend/components/ThreadList/ThreadList.vue b/frontend/components/ThreadList/ThreadList.vue
@@ -1,7 +1,5 @@
 <script lang="ts" >
-import { MessageData, emitter, state, } from '../../lib/global';
 import ThreadPreview, { ThreadPreviewInterface } from '../ThreadPreview/ThreadPreview.vue';
-import { RouterLink } from 'vue-router';
 
 // type ThreadListInterface = {
     
@@ -38,7 +36,16 @@ export default{
         threads: Array<Object>,
             threadPreviews: Array<ThreadPreviewInterface>
     },
-    components:{ThreadPreview}
+    components:{ThreadPreview},
+    data(){
+        return {activeThread: false}
+    },
+    methods:{
+        recieveEmit(activeConversation){
+            // alert(`active conversation: ${activeConversation}`);
+            this.activeThread = activeConversation;
+        }
+    }
 }
 
 
@@ -64,24 +71,16 @@ export default{
     </form>
     */
 </script>
-
+<template>
+    <div class="threadlist_container">
+        <div class='table'>
+            <div class="preview_list_container">
+                <ThreadPreview @thread-change="recieveEmit" v-for="preview in threadPreviews"   :key="preview.toString()" v-bind="preview" :activeThread="this.activeThread"/>
+            </div>
+        </div>
+    </div>
+</template>
 <style>
-
-
-.td_preview:active{
-    background-color:#3178B1;
-    color:white;
-}
-.td_preview:hover{
-    background-color: aliceblue;
-}
-.td_preview{
-    border: solid #3178b1;
-    border-radius: 1em;
-    padding: 0.5em;
-    margin-bottom: 0.5em;
-    min-height: calc(50px + 1em);
-}
 .preview_list_container{
     direction:ltr;
     padding-left:0.25rem;
@@ -94,18 +93,9 @@ export default{
     grid-column-end: 1;
     padding-right: 0.25rem;
 }
-.timestamp {
-    color: #999;
-    font-size: 8pt;
-    padding-left: 0.5em;
-}
-.thread-name {
-    font-size: 12pt;
-    color: #000;
-}
-.thread-last-message {
-    color: #000;
-}
+
+
+
 
 .table {
     /*border-spacing: 1em; */
@@ -125,24 +115,4 @@ export default{
     }
 }
 
-</style>
-
-
-
-<template>
-
-    <div class="threadlist_container">
-        <div class='action_bar' id='action_bar'>
-            <div class='heading'><b>WebTexting</b> {{displayName}}  </div>
-            <div class='actions'>
-            </div>
-            <div style='clear: both;'></div>
-        </div>
-        <div class='table'>
-            <div class="preview_list_container">
-                <ThreadPreview v-for="preview in threadPreviews"   :key="preview.toString()" v-bind="preview"/> 
-            </div>
-            </div>
-    </div>
-
-</template>
+</style>
diff --git a/frontend/components/ThreadPreview/ThreadPreview.vue b/frontend/components/ThreadPreview/ThreadPreview.vue
@@ -35,7 +35,7 @@ export type ThreadPreviewInterface = {
 }
 
 export default {
-    name:'ThreadPreview',
+    name: 'ThreadPreview',
     props: {
         displayName: {
             type: String,
@@ -64,25 +64,167 @@ export default {
         },
         groupMembers: {
             type: Array<String>,
+        },
+        activeThread:{
+            type:String||Boolean, 
+            required:true,
         }
 
     },
     components: { Conversation },
+    computed:{
+        currentThread(){
+            if(this.remoteNumber == this.activeThread){
+                console.log("change my background");
+                return this.remoteNumber;
+            }
+            else if(this.groupUUID == this.activeThread){
+                console.log("change my background");
+                return this.groupUUID;
+            }
+            return false;
+        }
+    },
+    emits:{
+        'thread-change':String,
+    },
+    methods:{
+        routerLinkClickHandler(event){
+            if(this.remoteNumber){
+                console.log(event);
+                this.$emit("thread-change", this.remoteNumber)
+            }
+            else if(this.groupUUID){
+                console.log(event);
+
+                this.$emit("thread-change", this.groupUUID)
+
+            }
+        }
+    }
 }
 </script>
 
 <template>
-    <div class='tr_replace'>
-        <div class='td_preview'>
-            <router-link :to="this.link">
-                <span class='thread-name'>{{ this.displayName }}</span><br />
-                <span class='thread-last-message'>{{ this.bodyPreview }}</span><br/>
-                <span class='timestamp' :data-timestamp="this.timestamp"></span>
+    <div class='tr_replace' v-bind:class="currentThread ? 'activeThread' : 'inactiveThread'">
+        <div class='td_preview' v-bind:class="currentThread ? 'activeThread' : 'inactiveThread'">
+            <router-link :to="this.link" class="thread-link" @click="routerLinkClickHandler">
+                <div class="thread-preview-container" v-bind:class="currentThread ? 'activeThread' : 'inactiveThread'">
+                     <!-- <span class="dot"></span> -->
+                    <span class='thread-name' v-bind:class="currentThread ? 'activeThread' : 'inactiveThread'">{{ this.displayName }}</span> 
+                    <span class='timestamp' v-bind:class="currentThread ? 'activeThread' : 'inactiveThread'"
+                        :data-timestamp="this.timestamp"></span>
+
+                    <span class='thread-last-message' v-bind:class="currentThread ? 'activeThread' : 'inactiveThread'" >{{ this.bodyPreview }}</span>
+                </div>
+
+
             </router-link>
         </div>
     </div>
 </template>
 
 <style>
 
+.thread-name {
+    grid-column-start: 2;
+    grid-column-end: 2;
+    grid-row: 1;
+    justify-self: start;
+    color:black;
+}
+
+.timestamp {
+    grid-column-start: 3;
+    grid-column-end: 3;
+    grid-row: 1;
+    justify-self: end;
+}
+
+.thread-last-message {
+    color: darkgray;
+    grid-row-start: 2;
+    grid-column: 2;
+    justify-self: start;
+}
+
+.timestamp.activeThread {
+    color:white;
+}
+.thread-name.activeThread{
+    color:white;
+}
+.thread-last-message.activeThread {
+    color: white;
+}
+/*
+.timestamp.activeThread:hover {
+    color:gray;
+}
+.thread-name.activeThread:hover{
+    color:gray;
+}
+
+.thread-last-message.activeThread:hover {
+    color: gray;
+}*/
+
+.td_preview:hover {
+    background-color: #a1cff7;
+}
+
+
+.thread-preview-container {
+    border-radius: 1em;
+    padding: 0.5625em;
+    /* margin-bottom: 0.5em;
+    min-height: calc(50px + 1em); */
+    display: grid;
+    grid-template-rows: auto;
+    grid-template-columns: 0 auto auto;
+}
+
+.thread-preview-container:hover span{
+    color:black;
+}
+.thread-preview-container.activeThread:hover span{
+    color:white;
+}
+
+.text-center {
+    margin: 0;
+    position: relative;
+    top: 50%;
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+}
+
+.dot {
+    grid-column: 1;
+    grid-row-start: 1;
+    grid-row-end: 3;
+    height: 50px;
+    width: 50px;
+    background-color: #bbb;
+    border-radius: 50%;
+    display: inline-block;
+    margin: 0;
+    position: relative;
+    top: 50%;
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+}
+.activeThread{
+    color:white;
+}
+.td_preview.activeThread:hover {
+    background-color: #3178B1;
+}
+.tr_replace.activeThread{
+    background-color:#5f9fd3;
+}
+.tr_replace.activeThread:hover{
+    background-color:#3178B1;
+}
+
 </style>