From b7327bafc369205f2087bc4b9fccc08f555fcacc Mon Sep 17 00:00:00 2001 From: Justin Ferrari Date: Fri, 3 Feb 2023 13:01:33 +0200 Subject: [PATCH] Further added new UI features --- qortal-ui-core/font/switch-theme.css | 12 ++ qortal-ui-core/language/us.json | 6 +- qortal-ui-core/src/styles/switch-theme.css | 12 ++ .../core/components/ChatGifs/ChatGifs-css.js | 138 ++++++++++++++- .../core/components/ChatGifs/ChatGifs.js | 164 +++++++++++------- .../plugins/core/components/ChatPage.js | 67 +++---- 6 files changed, 299 insertions(+), 100 deletions(-) diff --git a/qortal-ui-core/font/switch-theme.css b/qortal-ui-core/font/switch-theme.css index ee0a4f91..8e56fbea 100644 --- a/qortal-ui-core/font/switch-theme.css +++ b/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; } \ No newline at end of file diff --git a/qortal-ui-core/language/us.json b/qortal-ui-core/language/us.json index a3287762..b95a9b43 100644 --- a/qortal-ui-core/language/us.json +++ b/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", diff --git a/qortal-ui-core/src/styles/switch-theme.css b/qortal-ui-core/src/styles/switch-theme.css index 47162c6b..20ed00ef 100644 --- a/qortal-ui-core/src/styles/switch-theme.css +++ b/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; } \ No newline at end of file diff --git a/qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifs-css.js b/qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifs-css.js index 11c2272b..c975016f 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifs-css.js +++ b/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); - box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px; - padding: 5px; - background-color: var(--chat-menu-bg); + color: var(--chat-group); + box-shadow: var(--gif-search-icon-bs); + padding: 7px; + 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; } ` diff --git a/qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifs.js b/qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifs.js index 4b41e11f..cd5b291c 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifs.js +++ b/qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifs.js @@ -18,14 +18,15 @@ class ChatGifs extends LitElement { return { selectedAddress: { type: Object }, myGifCollections: { type: Array }, - mySubscribedCollections: {type: Array}, + mySubscribedCollections: { type: Array }, exploreCollections: { type: Array }, - gifsToBeAdded: { type: Array}, - webWorkerImage: {type: Object}, - mode: {type: String}, - currentCollection: {type: String}, - isLoading: {type: String}, - newCollectionName: {type: String} + gifsToBeAdded: { type: Array }, + webWorkerImage: { type: Object }, + mode: { type: String }, + currentCollection: { type: String }, + isLoading: { 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('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("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(--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 @@ -398,31 +399,47 @@ class ChatGifs extends LitElement { } } interval = setInterval(getAnswer, 5000) - }) - - saveAs(zipFileBlob, 'zipfile'); - console.log({zipFileBlob}) - } catch (error) { - console.log(error) - } + }) + saveAs(zipFileBlob, 'zipfile'); + console.log({zipFileBlob}) + } catch (error) { + console.log(error) } + } setCurrentCollection(val){ 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` -
+
+
+ { + if (this.isLoading) return; + this.mode = "newCollection"; + }} + icon="vaadin:plus" + slot="icon"> +

${translate("chatpage.cchange80")}

{ - if(this.isLoading) return; + @click=${()=> { + if (this.isLoading) return; this.mode = "explore"; }} icon="vaadin:search" @@ -436,30 +453,43 @@ class ChatGifs extends LitElement { text=${get("chatpage.cchange81")}>
-
- - - +
+
+
{ + if (this.isLoading) return; + if (this.mode === "myCollection") return; + this.mode = "myCollection"; + }} + > + ${translate("chatpage.cchange82")} +
+
{ + if(this.isLoading) return; + if (this.mode === "subscribedCollection") return; + this.mode = "subscribedCollection"; + }} + > + ${translate("chatpage.cchange83")} +
+
+
+
${this.mode === "myCollection" && !this.currentCollection ? html` ${this.isLoading === true ? html`

Loading...

@@ -545,25 +575,40 @@ class ChatGifs extends LitElement { })} ` : ''} ${this.mode === "newCollection" ? html` +
+
+

+ ${translate("chatpage.cchange84")} +

+

+ ${translate("chatpage.cchange85")} +

+
- - - { + class="file-picker-input-gif" type="file" name="myGif" accept="image/gif" + /> + + { this.newCollectionName = e.target.value - })} /> + })} + /> +
${this.gifsToBeAdded.map((gif, i)=> { console.log({gif}) @@ -576,19 +621,16 @@ class ChatGifs extends LitElement { name: e.target.value } })} /> -
- +
` })}
` : ''} -
-
+
+ ` } - - } window.customElements.define('chat-gifs', ChatGifs) diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index e3bf62c3..6d8a1d90 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -823,29 +823,29 @@ class ChatPage extends LitElement { color: #4e5054; } - .gifs-backdrop { - height: 100vh; - width: 100vw; - background: transparent; - position: fixed; - } + .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; + } - .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; - } + @keyframes smooth-appear { + to { + transform: translateY(0); + } + } + + .gifs-backdrop { + top: 0; + height: 100vh; + width: 100vw; + background: transparent; + position: fixed; + } ` } @@ -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()} -
{ - this.editor.commands.focus("end"); - this.setOpenGifModal(false); - }} style=${this.openGifModal ? "visibility: visible; z-index: 4" : "visibility: hidden; z-index: -100"}> -
-
+
{ + 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"}> +
+ class="chat-gifs" + style=${this.openGifModal ? "display: flex;" : "display: none;"} + .webWorkerImage=${this.webWorkerImage}> -