Further added new UI features

qortal-ui-core/font/switch-theme.css

@@ -51,7 +51,13 @@ html {
   --lightChatHeadHover: #1e1f201a;
   --group-header: #929292;
   --group-drop-shadow: rgb(17 17 26 / 10%) 0px 1px 0px;
+  --reactions-tooltip-bg: #ffffff;
   --gifs-drop-shadow: #32326926 0px 2px 5px 0px, #0000000d 0px 1px 1px 0px;
+  --gif-tooltip-bg: #dad7ef;
+  --gif-search-icon-bs: rgb(17 17 26 / 10%) 0px 4px 16px, rgb(17 17 26 / 5%) 0px 8px 32px;
+  --gif-search-icon: #ffffff;
+  --gif-button-row-bg: #eaeaef;
+  --gif-button-row-color: #464040;
 }
 
 html[theme="dark"] {
@@ -107,5 +113,11 @@ html[theme="dark"] {
   --lightChatHeadHover: #e0e1e31a;
   --group-header: #c8c8c8;
   --group-drop-shadow: rgb(191 191 191 / 32%) 0px 1px 0px;
+  --reactions-tooltip-bg: #161515;
   --gifs-drop-shadow: 0px 2px 2px 0px hsla(0, 0%, 0%, 0.14), 0px 3px 1px -2px hsla(0, 0%, 0%, 0.12), 0px 1px 5px 0px hsla(0, 0%, 0%, 0.2);
+  --gif-tooltip-bg: #586b8d;
+  --gif-search-icon-bs: 0px 8px 10px 1px hsla(0, 0%, 0%, 0.14), 0px 3px 14px 2px hsla(0, 0%, 0%, 0.12), 0px 5px 5px -3px hsla(0, 0%, 0%, 0.2);
+  --gif-search-icon: #586b8d;
+  --gif-button-row-bg: #82899c;
+  --gif-button-row-color: #151212;
 }

qortal-ui-core/language/us.json

@@ -574,7 +574,11 @@
       "cchange65": "Please enter a recipient",
       "cchange66": "Cannot fetch replied-to message. Message is too old.",
       "cchange80": "Gif Explorer",
-      "cchange81": "Explore Collections"
+      "cchange81": "Explore Collections",
+      "cchange82": "My Collections",
+      "cchange83": "Subscribed Collections",
+      "cchange84": "Upload your gif files",
+      "cchange85": "File should be .Gif"
    },
    "welcomepage": {
       "wcchange1": "Welcome to Q-Chat",

qortal-ui-core/src/styles/switch-theme.css

@@ -48,7 +48,13 @@ html {
   --chatHeadTextActive: #080808;
   --group-header: #929292;
   --group-drop-shadow: rgb(17 17 26 / 10%) 0px 1px 0px;
+  --reactions-tooltip-bg: #ffffff;
   --gifs-drop-shadow: #32326926 0px 2px 5px 0px, #0000000d 0px 1px 1px 0px;
+  --gif-tooltip-bg: #dad7ef;
+  --gif-search-icon-bs: rgb(17 17 26 / 10%) 0px 4px 16px, rgb(17 17 26 / 5%) 0px 8px 32px;
+  --gif-search-icon: #ffffff;
+  --gif-button-row-bg: #eaeaef;
+  --gif-button-row-color: #464040;
 }
 
 html[theme="dark"] {
@@ -101,5 +107,11 @@ html[theme="dark"] {
   --chatHeadTextActive: #ffffff;
   --group-header: #c8c8c8;
   --group-drop-shadow: rgb(191 191 191 / 32%) 0px 1px 0px;
+  --reactions-tooltip-bg: #161515;
   --gifs-drop-shadow: 0px 2px 2px 0px hsla(0, 0%, 0%, 0.14), 0px 3px 1px -2px hsla(0, 0%, 0%, 0.12), 0px 1px 5px 0px hsla(0, 0%, 0%, 0.2);
+  --gif-tooltip-bg: #586b8d;
+  --gif-search-icon-bs: 0px 8px 10px 1px hsla(0, 0%, 0%, 0.14), 0px 3px 14px 2px hsla(0, 0%, 0%, 0.12), 0px 5px 5px -3px hsla(0, 0%, 0%, 0.2);
+  --gif-search-icon: #586b8d;
+  --gif-button-row-bg: #82899c;
+  --gif-button-row-color: #151212;
 }

qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifs-css.js

@@ -1,10 +1,28 @@
 import { css } from 'lit'
 
 export const gifExplorerStyles = css`
+  .gifs-container {
+      position: relative;
+      display: flex;
+      padding: 10px 15px;
+      border-radius: 12px;
+      box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
+      background-color: var(--chat-menu-bg);
+      width: fit-content;
+      justify-self: flex-end;
+      place-self: end flex-end;
+      min-height: 400px;
+      min-width: 370px;
+      margin-bottom: 8px;
+      margin-right: 5px;
+      box-shadow: var(--gifs-drop-shadow);
+  }
+
   .gif-explorer-container {
+    min-height: 400px;
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    justify-content: flex-start;
     width: 100%;
     align-items: center;
     gap: 15px;
@@ -25,17 +43,125 @@ export const gifExplorerStyles = css`
     font-size: 25px;
     color: var(--chat-bubble-msg-color);
     margin: 0;
+    user-select: none;
   }
 
   .explore-collections-icon {
     margin-left: auto;
     text-align: right;
     font-size: 20px;
-    color: var(--chat-bubble-msg-color);
+    color: var(--chat-group);
-    box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
+    box-shadow: var(--gif-search-icon-bs);
-    padding: 5px;
+    padding: 7px;
-    background-color: var(--chat-menu-bg);
+    background-color: var(--gif-search-icon);
     border: none;
-    border-radius: 12px;
+    border-radius: 8px;
+    cursor: pointer;
+  }
+
+  .create-collections-icon {
+    position: absolute;
+    bottom: 5px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 4px;
+    font-size: 22px;
+    background-color: var(--mdc-theme-primary);
+    color: white;
+    border-radius: 8px;
+    box-shadow: 0 0 0 rgba(0, 0, 0, 0.2); 
+    transition: all 0.3s ease-in-out;
+  }
+
+  .create-collections-icon:hover {
+    cursor: pointer;
+    box-shadow: 0px 4px 5px 0px hsla(0,0%,0%,0.14), 0px 1px 10px 0px hsla(0,0%,0%,0.12), 0px 2px 4px -1px hsla(0,0%,0%,0.2);
+  }
+
+  .collections-button-row {
+    width: auto;
+    background-color: var(--gif-button-row-bg);
+    border-radius: 35px;
+    padding: 2px;
+    margin-top: 10px;
+  }
+
+  .collections-button-innerrow {
+    display: flex; 
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .my-collections-button {
+    font-size: 16px;
+    font-family: "Maven Pro", sans-serif;
+    letter-spacing: 0.5px;
+    color: var(--gif-button-row-color);
+    border-radius: 35px;
+    padding: 8px 20px;
+    margin: 2px 0;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .subscribed-collections-button {
+    font-size: 16px;
+    font-family: "Maven Pro", sans-serif;
+    letter-spacing: 0.5px;
+    color: var(--gif-button-row-color);
+    border-radius: 35px;
+    padding: 8px 20px;
+    margin: 2px 0;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .collections-button-active {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: white;
+    color: var(--mdc-theme-primary);
+    border-radius: 25px;
+    padding: 8px 20px;
+    margin: 2px 0;
+    box-shadow: rgb(0 0 0 / 14%) 0px 1px 1px 0px, rgb(0 0 0 / 12%) 0px 2px 1px -1px, rgb(0 0 0 / 20%) 0px 1px 3px 0px;
+    /* box-shadow: rgb(99 99 99 / 20%) 0px 2px 8px 0px; */
+    transition: all 0.3s ease-in-out;
+    cursor: auto;
+  }
+
+  .new-collection-row {
+    display: flex;
+    flex-direction: column; 
+    justify-content: center;
+  }
+
+  .new-collection-subrow {
+    display: flex;
+    flex-direction: column; 
+    justify-content: center;
+    align-items: center;
+    gap: 5px;
+  }
+
+  .new-collection-title {
+    font-family: Maven Pro, sans-serif;
+    color: var(--chat-bubble-msg-color);
+    font-size: 18px;
+    letter-spacing: 0.6px;
+    margin: 0;
+    user-select: none;
+  }
+
+  .new-collection-subtitle {
+    font-family: Roboto, sans-serif;
+    color: var(--chat-bubble-msg-color);
+    font-weight: 300;
+    opacity: 0.9;
+    font-size: 14px;
+    letter-spacing: 0.3px;
+    margin: 0;
+    user-select: none;
   }
 `

qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifs.js

@@ -25,7 +25,8 @@ class ChatGifs extends LitElement {
             mode: { type: String },
             currentCollection: { type: String },
             isLoading: { type: String },
-            newCollectionName: {type: String}
+            newCollectionName: { type: String },
+            editor: { type: Object },
         }
     }
 
@@ -219,8 +220,8 @@ class ChatGifs extends LitElement {
     async firstUpdated() {
         const tooltip = this.shadowRoot.querySelector('vaadin-tooltip');
         const overlay = tooltip.shadowRoot.querySelector('vaadin-tooltip-overlay');
-        overlay.shadowRoot.getElementById("overlay").style.cssText = "background-color: transparent; box-shadow: rgb(50 50 93 / 25%) 0px 2px 5px -1px, rgb(0 0 0 / 30%) 0px 1px 3px -1px";
+        overlay.shadowRoot.getElementById("overlay").style.cssText = "background-color: transparent; border-radius: 10px; box-shadow: rgb(50 50 93 / 25%) 0px 2px 5px -1px, rgb(0 0 0 / 30%) 0px 1px 3px -1px";
-        overlay.shadowRoot.getElementById('content').style.cssText = "background-color: var(--reactions-tooltip-bg); color: var(--chat-bubble-msg-color); text-align: center; padding: 20px 10px; border-radius: 8px; font-family: Roboto, sans-serif; letter-spacing: 0.3px; font-weight: 300; font-size: 13.5px; transition: all 0.3s ease-in-out;";
+        overlay.shadowRoot.getElementById('content').style.cssText = "background-color: var(--gif-tooltip-bg); color: var(--chat-bubble-msg-color); text-align: center; padding: 20px 10px; font-family: Roboto, sans-serif; letter-spacing: 0.3px; font-weight: 300; font-size: 13.5px; transition: all 0.3s ease-in-out;";
 
         try {
             this.isLoading = true
@@ -399,7 +400,6 @@ class ChatGifs extends LitElement {
             }
             interval = setInterval(getAnswer, 5000)
         })
-
         saveAs(zipFileBlob, 'zipfile');
         console.log({zipFileBlob})
         } catch (error) {
@@ -411,14 +411,31 @@ class ChatGifs extends LitElement {
         this.currentCollection = val
     }
 
+    clearGifSelections() {
+        this.mode = "myCollection";
+        this.gifsToBeAdded = [];
+    }
+
     render() {
         console.log('this.currentCollection', this.currentCollection)
-        console.log(3, "chat gifs here")
+        console.log(9, "chat gifs here")
         return html`
+                <div class="gifs-container">
                 <div class="gif-explorer-container">
+                    <vaadin-icon 
+                        id="create-collection-button"
+                        class="create-collections-icon" 
+                        @click=${() => {
+                        if (this.isLoading) return;
+                        this.mode = "newCollection";
+                        }} 
+                        icon="vaadin:plus" 
+                        slot="icon">
+                    </vaadin-icon>  
                 <div class="title-row">
                     <p class="gif-explorer-title">${translate("chatpage.cchange80")}</p>
                     <vaadin-icon 
+                        style=${this.mode === "newCollection" ? "display: none" : "display: block"}
                         id="explore-collections-icon"
                         class="explore-collections-icon" 
                         @click=${()=> {
@@ -436,30 +453,43 @@ class ChatGifs extends LitElement {
                         text=${get("chatpage.cchange81")}>
                     </vaadin-tooltip>
                 </div>
-                <div>
+                <div class="collections-button-row" style=${this.mode === "newCollection" ? "display: none" : "display: block"}>
-                    <button 
+                    <div class="collections-button-innerrow">
-                    id="create-collection-button" 
+                <div
-                    @click=${()=> {
-                        if(this.isLoading) return
-                        this.mode = "newCollection"
-                    }}>
-                        Create Collection
-                    </button>
-                    <button 
                     id="my-collections-button"
+                  class=${[
+                    "my-collections-button",
+                    this.mode === "myCollection" 
+                      ? "collections-button-active"
+                      : null,
+                  ].join(" ")}
                   @click=${() => {
-                            if(this.isLoading) return
+                    if (this.isLoading) return;
-                        this.mode = "myCollection"
+                    if (this.mode === "myCollection") return;
-                    }}>
+                    this.mode = "myCollection";
-                        My Collections
+                  }}
-                    </button>
+                >
-                    <button id="subscribed-collections-button" 
+                  ${translate("chatpage.cchange82")}
+                </div>
+                <div
+                id="subscribed-collections-button"
+                  class=${[
+                    "subscribed-collections-button",
+                    this.mode === "subscribedCollection"
+                      ? "collections-button-active"
+                      : null,
+                  ].join(" ")}
                   @click=${() => {
-                        if(this.isLoading) return
+                    if(this.isLoading) return;
-                        this.mode = "subscribedCollection"
+                    if (this.mode === "subscribedCollection") return;
-                    }}>
+                    this.mode = "subscribedCollection";
-                        Subscribed Collections
+                  }}
-                    </button>
+                >
+                    ${translate("chatpage.cchange83")}
+                </div>
+              </div>
+            </div>
+            <div>
             ${this.mode === "myCollection" && !this.currentCollection ? html`
                 ${this.isLoading === true ? html`
                     <p>Loading...</p>
@@ -545,6 +575,15 @@ class ChatGifs extends LitElement {
                         })}
                 ` : ''}
                 ${this.mode === "newCollection" ? html`
+                <div class="new-collection-row">
+                    <div class="new-collection-subrow">
+                        <p class="new-collection-title">
+                            ${translate("chatpage.cchange84")}
+                        </p>
+                        <p class="new-collection-subtitle">
+                            ${translate("chatpage.cchange85")}
+                        </p>
+                    </div>      
                 <input 
                     @change="${e => {
                         this.addGifs(Array.from(e.target.files));
@@ -556,14 +595,20 @@ class ChatGifs extends LitElement {
                     }"
                     id="file-picker-gif"
                     ?multiple=${true}
-                    class="file-picker-input-gif" type="file" name="myGif" accept="image/gif" />
+                    class="file-picker-input-gif" type="file" name="myGif" accept="image/gif"
-
+                     />
                     <button @click=${()=> {
                         this.uploadGifCollection()
-                        }}>Upload Collection</button>
+                    }}>
-                    <input .value=${this.newCollectionName} @change=${(e=> {
+                        Upload Collection
+                    </button>
+                    <input 
+                        .value=${this.newCollectionName} 
+                        @change=${(e=> {
                             this.newCollectionName = e.target.value
-                        })} />
+                        })} 
+                    />
+                    </div>
                     <div style="display: flex; flex-direction: column">
                     ${this.gifsToBeAdded.map((gif, i)=> {
                         console.log({gif})
@@ -577,18 +622,15 @@ class ChatGifs extends LitElement {
                             } 
                         })} />
                         </div>   
-                        
                         `
                     })}
                     </div>
                 ` : ''}
-                
+                </div>
             </div>  
         </div>
         `
     }
-
-    
 }
 
 window.customElements.define('chat-gifs', ChatGifs)

qortal-ui-plugins/plugins/core/components/ChatPage.js

@@ -823,29 +823,29 @@ class ChatPage extends LitElement {
           color: #4e5054;
       }
 
+      .chat-gifs {
+          position: relative;
+          justify-self: flex-end;
+          width: fit-content;
+          height: auto;
+          transform: translateY(30%);
+          animation: smooth-appear 0.5s ease forwards;
+          z-index: 5;
+      }
+
+        @keyframes smooth-appear {
+            to {
+                transform: translateY(0);
+            }
+        }   
+
         .gifs-backdrop {
+            top: 0;
             height: 100vh;
             width: 100vw;
             background: transparent;
             position: fixed;
         }
-
-    .gifs-container {
-        position: relative;
-        display: flex;
-        padding: 10px 15px;
-        border-radius: 12px;
-        box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
-        background-color: var(--chat-menu-bg);
-        align-items: center;
-        justify-content: flex-end;
-        width: fit-content;
-        justify-self: flex-end;
-        margin-bottom: 8px;
-        margin-right: 5px;
-        box-shadow: var(--gifs-drop-shadow);
-        z-index: 5;
-    }
     `
     }
 
@@ -913,6 +913,7 @@ class ChatPage extends LitElement {
         this.webWorkerImage = null;
         this.currentEditor = '_chatEditorDOM'
         this.initialChat = this.initialChat.bind(this)
+        this.setOpenGifModal = this.setOpenGifModal.bind(this)
         this.isEnabledChatEnter = true
         this.openGifModal = false
     }
@@ -1050,18 +1051,20 @@ console.log({zipFileBlob})
                         this.renderChatScroller()}
                 </div>
                  <!-- gif div -->
-                 <div class="gifs-backdrop" @click=${() => {
-                     this.editor.commands.focus("end");
-                    this.setOpenGifModal(false);
-                    }} style=${this.openGifModal ? "visibility: visible; z-index: 4" : "visibility: hidden; z-index: -100"}>
-                </div>
                  <div 
-                    class="gifs-container"
+                    class="gifs-backdrop" 
-                    style=${this.openGifModal ? "visibility: visible;" : "visibility: hidden;"}>
+                    @click=${() => {
+                        this.setOpenGifModal(false);
+                        this.editor.commands.focus("end");
+                        this.shadowRoot.querySelector("chat-gifs").clearGifSelections();
+                    }} 
+                    style=${this.openGifModal ? "visibility: visible; z-index: 4" : "visibility: hidden; z-index: -100"}>
+                    </div>
                     <chat-gifs 
+                        class="chat-gifs"
+                        style=${this.openGifModal ? "display: flex;" : "display: none;"}
                         .webWorkerImage=${this.webWorkerImage}>
                     </chat-gifs>
-                </div>
                 <!-- main chat bar -->
                 <div class="chat-text-area" style="${`${(this.repliedToMessageObj || this.editedMessageObj) && "min-height: 120px"}`}">
                     <div