forked from Qortal/qortal-ui
Further added new UI features
This commit is contained in:
Justin Ferrari
parent
4cab597afa
commit
b7327bafc3
@ -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;
|
||||
}
|
||||
@ -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",
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
`
|
||||
|
||||
@ -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`
|
||||
<div class="gif-explorer-container">
|
||||
<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=${() => {
|
||||
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")}>
|
||||
</vaadin-tooltip>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
id="create-collection-button"
|
||||
@click=${()=> {
|
||||
if(this.isLoading) return
|
||||
this.mode = "newCollection"
|
||||
}}>
|
||||
Create Collection
|
||||
</button>
|
||||
<button
|
||||
id="my-collections-button"
|
||||
@click=${()=> {
|
||||
if(this.isLoading) return
|
||||
this.mode = "myCollection"
|
||||
}}>
|
||||
My Collections
|
||||
</button>
|
||||
<button id="subscribed-collections-button"
|
||||
@click=${()=> {
|
||||
if(this.isLoading) return
|
||||
this.mode = "subscribedCollection"
|
||||
}}>
|
||||
Subscribed Collections
|
||||
</button>
|
||||
<div class="collections-button-row" style=${this.mode === "newCollection" ? "display: none" : "display: block"}>
|
||||
<div class="collections-button-innerrow">
|
||||
<div
|
||||
id="my-collections-button"
|
||||
class=${[
|
||||
"my-collections-button",
|
||||
this.mode === "myCollection"
|
||||
? "collections-button-active"
|
||||
: null,
|
||||
].join(" ")}
|
||||
@click=${() => {
|
||||
if (this.isLoading) return;
|
||||
if (this.mode === "myCollection") return;
|
||||
this.mode = "myCollection";
|
||||
}}
|
||||
>
|
||||
${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.mode === "subscribedCollection") return;
|
||||
this.mode = "subscribedCollection";
|
||||
}}
|
||||
>
|
||||
${translate("chatpage.cchange83")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
${this.mode === "myCollection" && !this.currentCollection ? html`
|
||||
${this.isLoading === true ? html`
|
||||
<p>Loading...</p>
|
||||
@ -545,25 +575,40 @@ 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));
|
||||
const filePickerInput = this.shadowRoot.getElementById('file-picker-gif')
|
||||
if(filePickerInput){
|
||||
filePickerInput.value = ""
|
||||
}
|
||||
if (filePickerInput) {
|
||||
filePickerInput.value = ""
|
||||
}
|
||||
}"
|
||||
}
|
||||
}"
|
||||
id="file-picker-gif"
|
||||
?multiple=${true}
|
||||
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=> {
|
||||
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=> {
|
||||
this.newCollectionName = e.target.value
|
||||
})} />
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column">
|
||||
${this.gifsToBeAdded.map((gif, i)=> {
|
||||
console.log({gif})
|
||||
@ -576,19 +621,16 @@ class ChatGifs extends LitElement {
|
||||
name: e.target.value
|
||||
}
|
||||
})} />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
`
|
||||
})}
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
window.customElements.define('chat-gifs', ChatGifs)
|
||||
|
||||
@ -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()}
|
||||
</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"
|
||||
style=${this.openGifModal ? "visibility: visible;" : "visibility: hidden;"}>
|
||||
<div
|
||||
class="gifs-backdrop"
|
||||
@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
|
||||
.webWorkerImage=${this.webWorkerImage}>
|
||||
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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user