diff --git a/qortal-ui-core/language/us.json b/qortal-ui-core/language/us.json index 2499a3a1..77f635b5 100644 --- a/qortal-ui-core/language/us.json +++ b/qortal-ui-core/language/us.json @@ -579,7 +579,11 @@ "cchange83": "Subscribed Collections", "cchange84": "Upload your gif files", "cchange85": "File should be .Gif", - "cchange86": "Upload Collection" + "cchange86": "Upload Collection", + "cchange87": "A collection name is required!", + "cchange88": "Collection Name", + "cchange89": "Gif Collection Uploaded Successfully!", + "cchange90": "Gifs uploading, please wait..." }, "welcomepage": { "wcchange1": "Welcome to Q-Chat", 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 6144b149..1911758d 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifs-css.js +++ b/qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifs-css.js @@ -191,31 +191,15 @@ color: var(--mdc-theme-primary); } .gifs-added-col { +display: flex; flex-direction: column; -justify-content: space-between; +justify-content: flex-end; flex: 1 1 0%; margin-top: 10px; overflow-y: auto; max-height: 300px; } -.gifs-added-col::-webkit-scrollbar-track { -background-color: whitesmoke; -border-radius: 7px; -} - -.gifs-added-col::-webkit-scrollbar { -width: 6px; -border-radius: 7px; -background-color: whitesmoke; -} - -.gifs-added-col::-webkit-scrollbar-thumb { -background-color: rgb(180, 176, 176); -border-radius: 7px; -transition: all 0.3s ease-in-out; -} - .gifs-added-row { display: flex; flex-direction: column; @@ -227,6 +211,23 @@ overflow-y: auto; border-bottom: none; } +.gifs-added-row::-webkit-scrollbar-track { +background-color: whitesmoke; +border-radius: 7px; +} + +.gifs-added-row::-webkit-scrollbar { +width: 6px; +border-radius: 7px; +background-color: whitesmoke; +} + +.gifs-added-row::-webkit-scrollbar-thumb { +background-color: rgb(180, 176, 176); +border-radius: 7px; +transition: all 0.3s ease-in-out; +} + .gif-input { display: flex; flex-direction: row; @@ -267,6 +268,72 @@ width: 100%; margin-top: 10px; } +.upload-collection-name { +display: block; +padding: 8px 10px; +font-size: 16px; +font-family: Montserrat, sans-serif; +font-weight: 600; +background-color: #ebeaea21; +border: 1px solid var(--mdc-theme-primary); +border-radius: 5px; +color: var(--chat-bubble-msg-color); +outline: none; +} + +.upload-collection-name::placeholder { +font-size: 16px; +font-family: Montserrat, sans-serif; +font-weight: 600; +opacity: 0.6; +color: var(--chat-bubble-msg-color); +} + +.collection-back-button { + display: flex; + font-family: Roboto, sans-serif; + font-weight: 300; + letter-spacing: 0.3px; + font-size: 16px; + color: var(--chat-bubble-msg-color); + flex-direction: row; + align-items: center; + transition: box-shadow 0.2s ease-in-out; + background-color: rgb(111, 116, 129); + border-radius: 10px; + box-shadow: rgb(0 0 0 / 15%) 1.95px 1.95px 2.6px; + padding: 8px 15px; + cursor: pointer; +} + +.collection-back-button:hover { + border: none; + box-sizing: border-box; + box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px; +} + +.collection-card { + display: flex; + font-family: Roboto, sans-serif; + font-weight: 300; + letter-spacing: 0.3px; + font-size: 19px; + color: var(--chat-bubble-msg-color); + flex-direction: row; + align-items: center; + transition: box-shadow 0.2s ease-in-out; + box-shadow: none; + padding: 10px; + cursor: pointer; +} + +.collection-card:hover { + border: none; + border-radius: 4px; + box-sizing: border-box; + box-shadow: rgb(0 0 0 / 14%) 0px 4px 5px 0px, rgb(0 0 0 / 12%) 0px 1px 10px 0px, rgb(0 0 0 / 20%) 0px 2px 4px -1px; +} + .upload-button { font-family: Roboto, sans-serif; font-size: 16px; @@ -299,4 +366,45 @@ cursor: pointer; background-color: #03a8f475; } +.lds-circle { + display: flex; + align-items: center; + justify-content: center; + margin-top: 70px; +} + +.lds-circle > div { + display: inline-block; + width: 80px; + height: 80px; + margin: 8px; + border-radius: 50%; + background: var(--mdc-theme-primary); + animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite; +} + +@keyframes lds-circle { + 0%, 100% { + animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5); + } + 0% { + transform: rotateY(0deg); + } + 50% { + transform: rotateY(1800deg); + animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1); + } + 100% { + transform: rotateY(3600deg); + } +} + +.gifs-loading-message { + font-family: Montserrat, sans-serif; + font-size: 20px; + color: var(--chat-bubble-msg-color); + margin: 0 0 10px 0; + text-align: center; +} + `; diff --git a/qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifs.js b/qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifs.js index a6315fcc..3a79c903 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifs.js +++ b/qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifs.js @@ -66,6 +66,8 @@ editor: {type: Object}, url: `/arbitrary/metadata/GIF_REPOSITORY/${this.myAccountName}/${collection.identifier}`, }); + console.log({metaData}); + collectionObj = { ...collection, gifUrls: [], @@ -164,11 +166,11 @@ editor: {type: Object}, const userName = await this.getName(this.selectedAddress.address); this.myAccountName = userName; if (this.myAccountName) { - const getMyGifColloctions = await parentEpml.request('apiCall', { + const getMyGifCollections = await parentEpml.request('apiCall', { url: `/arbitrary/resources?service=GIF_REPOSITORY&limit=0&name=${this.myAccountName}`, }); const gifCollectionWithMetaData = await this.structureCollections( - getMyGifColloctions + getMyGifCollections ); console.log({gifCollectionWithMetaData}); @@ -313,22 +315,21 @@ editor: {type: Object}, async uploadGifCollection() { if (!this.newCollectionName) { - parentEpml.request('showSnackBar', get('chatpage.cchange27')); + parentEpml.request('showSnackBar', get('chatpage.cchange87')); return; } - - // if(!isAlphanumeric(this.newCollectionName)){ - // parentEpml.request('showSnackBar', get("chatpage.cchange27")); - // return - // } try { + this.setGifsLoading(true); + this.isLoading = true; const userName = await this.getName(this.selectedAddress.address); const doesNameExist = await parentEpml.request('apiCall', { url: `/arbitrary/resources?service=GIF_REPOSITORY&limit=0&name=${userName}&identifier=${this.newCollectionName}`, }); if (doesNameExist.length !== 0) { - parentEpml.request('showSnackBar', get('chatpage.cchange27')); + parentEpml.request('showSnackBar', get('chatpage.cchange87')); + this.isLoading = false; + this.setGifsLoading(false); return; } function blobToBase64(blob) { @@ -365,6 +366,7 @@ editor: {type: Object}, if (!userName) { parentEpml.request('showSnackBar', get('chatpage.cchange27')); + this.setGifsLoading(false); this.isLoading = false; return; } @@ -376,7 +378,7 @@ editor: {type: Object}, service: 'GIF_REPOSITORY', identifier: this.newCollectionName, parentEpml, - metaData: undefined, + metaData: `title=${this.newCollectionName}`, uploadType: 'zip', selectedAddress: this.selectedAddress, worker: this.webWorkerImage, @@ -406,7 +408,13 @@ editor: {type: Object}, }; interval = setInterval(getAnswer, 5000); }); - saveAs(zipFileBlob, 'zipfile'); + // saveAs(zipFileBlob, 'zipfile'); + this.isLoading = false; + this.setGifsLoading(false); + this.mode = 'myCollection'; + this.gifsToBeAdded = []; + this.newCollectionName = ''; + parentEpml.request('showSnackBar', get('chatpage.cchange89')); console.log({zipFileBlob}); } catch (error) { console.log(error); @@ -424,7 +432,7 @@ editor: {type: Object}, render() { console.log('this.currentCollection', this.currentCollection); - console.log(12, 'chat gifs here'); + console.log(13, 'chat gifs here'); return html`
@@ -514,19 +522,15 @@ editor: {type: Object}, ${this.mode === 'myCollection' && !this.currentCollection ? html` ${this.isLoading === true - ? html`

Loading...

` + ? html`
` : ''} ${this.myGifCollections.map((collection) => { return html` -
-

{ +

{ this.currentCollection = collection; - }} - > + }} class='collection-card'> ${collection.identifier} -

`; })} @@ -577,13 +581,15 @@ editor: {type: Object}, } ${this.currentCollection && this.mode === 'myCollection' ? html` - + + ${translate('general.back')} +
${this.currentCollection.gifUrls.map((gif) => { console.log({gif}); @@ -660,9 +666,9 @@ editor: {type: Object}, ` : '' } - ${this.mode === 'newCollection' + ${this.mode === 'newCollection' && this.isLoading === false ? html` -
+

${translate('chatpage.cchange84')} @@ -679,7 +685,7 @@ editor: {type: Object}, ) .click()} class="new-collection-container" - style=${this.gifsToBeAdded.length > 0 ? "padding: 10px 0;" : "padding: 60px 0;"} + style=${this.gifsToBeAdded.length > 0 ? "padding: 10px 0;" : "padding: 60px 0;"} > { this.newCollectionName = @@ -720,21 +728,20 @@ editor: {type: Object}, />

-
+
${this.gifsToBeAdded.map((gif, i) => { - console.log({gif}); return html`
{ this.gifsToBeAdded[i] = { @@ -747,7 +754,7 @@ editor: {type: Object},
`; })} -
+
` - : '' + : this.mode === 'newCollection' && this.isLoading === true ? ( + html` +
+

${translate("chatpage.cchange90")}

+
+
+ ` + ) + : '' }
diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index bbb1e90f..61b2a1a8 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -101,8 +101,9 @@ class ChatPage extends LitElement { openUserInfo: { type: Boolean }, selectedHead: { type: Object }, userName: { type: String }, - goToRepliedMessage: {attribute: false}, - openGifModal: {type: Boolean} + goToRepliedMessage: { attribute: false }, + openGifModal: { type: Boolean }, + gifsLoading: { type: Boolean }, } } @@ -862,6 +863,7 @@ class ChatPage extends LitElement { this.setOpenUserInfo = this.setOpenUserInfo.bind(this) this.setUserName = this.setUserName.bind(this) this.setSelectedHead = this.setSelectedHead.bind(this) + this.setGifsLoading = this.setGifsLoading.bind(this) this.selectedAddress = {} this.userName = "" this.chatId = '' @@ -962,6 +964,10 @@ class ChatPage extends LitElement { console.log('this.gifsToBeAdded', this.gifsToBeAdded) } + setGifsLoading(props) { + this.gifsLoading = props; + } + async uploadGifCollection(){ try { function blobToBase64(blob) { @@ -1055,6 +1061,7 @@ console.log({zipFileBlob})
{ + if (this.gifsLoading) return; this.setOpenGifModal(false); this.editor.commands.focus("end"); this.shadowRoot.querySelector("chat-gifs").clearGifSelections(); @@ -1067,7 +1074,8 @@ console.log({zipFileBlob}) + .webWorkerImage=${this.webWorkerImage} + .setGifsLoading=${(val) => this.setGifsLoading(val)}>