Merge pull request #17 from alikaakati/master

Fixed UI problems / placeholder image not loading / scrolling to bottom not loading more chats
BuildFire · Nov 29, 2021 · d33dc16 · d33dc16
2 parents b56f1e4 + cadb973
commit d33dc16
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 6 deletions.
diff --git a/src/widget/.images/.nomedia → src/widget/images/.nomedia b/src/widget/.images/.nomedia → src/widget/images/.nomedia
diff --git a/src/widget/.images/README.md → src/widget/images/README.md b/src/widget/.images/README.md → src/widget/images/README.md
diff --git a/src/widget/.images/avatar.png → src/widget/images/avatar.png b/src/widget/.images/avatar.png → src/widget/images/avatar.png
diff --git a/src/widget/index.html b/src/widget/index.html
@@ -32,8 +32,10 @@
     </button>
   </form>
   <div role="separator" class="mdc-list-divider"></div>
-  <ul class="mdc-list mdc-list--two-line mdc-list--avatar-list" id="inboxMessages">
-  </ul>
+  <div class="scrollDiv">
+    <ul class="mdc-list mdc-list--two-line mdc-list--avatar-list" id="inboxMessages">
+    </ul>
+  </div>
   <div id="emptyState">
     <span class="primaryTextTheme">No results found</span>
     <icon class="material-icons icon icon-drawer2 empty-icon"></icon>
@@ -42,7 +44,7 @@
 
 <!-- Thread template -->
 <template id="thread-ui-template">
-  <li class="mdc-list-item slide-right">
+  <li class="mdc-list-item slide-right mdc-list--non-interactive">
     <img class="mdc-list-item__graphic profile-image" src="{{imageUrl}}" alt="Profile" />
     <div class="red-dot dangerBackgroundTheme" style="visibility:{{visibility}}"></div>
     <div class="mdc-list-item__text">

diff --git a/src/widget/style.css b/src/widget/style.css
@@ -109,6 +109,11 @@ body {
     margin-left: 10px;
 }
 
+.mdc-list{
+    max-height: calc(100vh - 115px);
+    overflow-y: auto;
+    overflow-x: hidden;
+}
 .red-dot {
     width: 10px;
     height: 10px;
@@ -120,7 +125,7 @@ body {
 
 .slide-right {
 	-webkit-animation: slide-right 0.3s ease-in-out both;
-	        animation: slide-right 0.3s ease-in-out both;
+    animation: slide-right 0.3s ease-in-out both;
 }
 
  @-webkit-keyframes slide-right {
@@ -143,3 +148,10 @@ body {
               transform: translateX(0);
     }
   }
+  li:after {
+    content: none !important;
+    }
+
+    li:before {
+        content: none !important;
+    } 
diff --git a/src/widget/widget.js b/src/widget/widget.js
@@ -28,7 +28,7 @@ function reloadMessages(threads, clearOldThreads) {
           size: "xs",
           aspect: "1:1",
         });
-      else imageUrl = "./.images/avatar.png";
+      else imageUrl = "./images/avatar.png";
       let element = document.createElement("div");
 
       let time = new Date(thread.lastMessage.createdAt);
@@ -80,7 +80,21 @@ function initWidget(user) {
 
   let form = document.getElementById("searchForm");
   form.addEventListener("submit", onSearch);
-
+  let getMoreThreads = true;
+  let loading = false;
+  let inboxMessages = document.getElementById("inboxMessages");
+  inboxMessages.onscroll = () =>{
+    if(getMoreThreads && !loading){
+      if (inboxMessages.scrollHeight - inboxMessages.scrollTop - inboxMessages.clientHeight < 1){
+        loading = true;
+        Threads.getThreads(user, document.getElementById("inboxMessages").childNodes.length, 20, (err, threads) => {
+          if(threads.length < 20) getMoreThreads = false;
+          reloadMessages(threads, false);
+          loading = false;
+        });
+      }
+    }
+  }
   injectThemeStyle();
 }