Fixed metadata issue + continued styling

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",

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;
+}
+
 `;

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`
                 <div class="gifs-container">
                 <div class="gif-explorer-container">
@@ -514,19 +522,15 @@ editor: {type: Object},
             ${this.mode === 'myCollection' && !this.currentCollection
     				? html`
     						${this.isLoading === true
-    							? html` <p>Loading...</p> `
+    							? html`<div class="lds-circle"><div></div></div>`
     							: ''}
     						${this.myGifCollections.map((collection) => {
     							return html`
-    								<div>
+    								<div @click=${() => {
-    									<p
-    										@click=${() => {
     											this.currentCollection =
     												collection;
-    										}}
+    										}} class='collection-card'>
-    									>
     										${collection.identifier}
-    									</p>
     								</div>
     							`;
     						})}
@@ -577,13 +581,15 @@ editor: {type: Object},
     			}
                 ${this.currentCollection && this.mode === 'myCollection'
     					? html`
-    							<button
+    							<div
+										class='collection-back-button'
     								@click=${() => {
     									this.currentCollection = null;
     								}}
     							>
-    								Back
+									<vaadin-icon icon='vaadin:arrow-left' slot='icon'></vaadin-icon>
-    							</button>
+    								${translate('general.back')}
+    							</div>
     							${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`
-    							<div class="new-collection-row" style=${this.gifsToBeAdded.length === 0 ? "flex: 0;" : "flex: 1"}>
+    							<div class="new-collection-row" style=${this.gifsToBeAdded.length === 0 ? "" : "flex: 1;"}>
     								<div class="new-collection-subrow">
     									<p class="new-collection-title">
     										${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;"}
     								>
     									<vaadin-icon
     										id="new-collection-icon"
@@ -711,7 +717,9 @@ editor: {type: Object},
     								</div>
 
     								<input
+    											class="upload-collection-name"
     										style=${this.gifsToBeAdded.length === 0 ? "display: none;" : "display: block;"}
+    											placeholder=${get("chatpage.cchange88")}
     									.value=${this.newCollectionName}
     									@change=${(e) => {
     										this.newCollectionName =
@@ -720,21 +728,20 @@ editor: {type: Object},
     								/>
     								<div
     									class="gifs-added-col"
-											style=${this.gifsToBeAdded.length === 0 ? "display: none;" : "display: flex;"}
+    										
     								>
-										<div class="gifs-added-row">
+    									<div class="gifs-added-row">
     									${this.gifsToBeAdded.map((gif, i) => {
-    										console.log({gif});
     										return html`
     											<div class="gif-input">
     												<img
-															class="gif-input-img"
+    														class="gif-input-img"
     													src=${URL.createObjectURL(
     														gif.file
     													)}
     												/>
     												<input
-															class="gif-input-field"
+    														class="gif-input-field"
     													.value=${gif.name}
     													@change=${(e) => {
     														this.gifsToBeAdded[i] = {
@@ -747,7 +754,7 @@ editor: {type: Object},
     											</div>
     										`;
     									})}
-										</div>
+    									</div>
     								<div class="upload-collection-row">
     									<button
     										class="upload-back-button"
@@ -759,6 +766,7 @@ editor: {type: Object},
     										${translate('general.back')}
     									</button>
     									<button
+												style=${this.gifsToBeAdded.length === 0 ? "display: none;" : "display: block;"}
     										class="upload-button"
     										@click=${() => {
     											this.uploadGifCollection();
@@ -770,7 +778,15 @@ editor: {type: Object},
     								</div>
     							</div>
     					  `
-    					: ''
+    					: this.mode === 'newCollection' && this.isLoading === true ? (
+    							html`
+    								<div>
+    									<p class='gifs-loading-message'>${translate("chatpage.cchange90")}</p>
+    								<div class="lds-circle"><div></div></div>
+    								</div>
+    								`
+    						)
+    						: ''
     			}
                 </div>
             </div>

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},
+            goToRepliedMessage: { attribute: false },
-            openGifModal: {type: Boolean}
+            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})
                 <div 
                 class="gifs-backdrop" 
                 @click=${() => {
+                    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})
                 <chat-gifs 
                     class="chat-gifs"
                     style=${this.openGifModal ? "display: flex;" : "display: none;"}
-                    .webWorkerImage=${this.webWorkerImage}>
+                    .webWorkerImage=${this.webWorkerImage}
+                    .setGifsLoading=${(val) => this.setGifsLoading(val)}>
                 </chat-gifs>
                     <div 
                     class='last-message-ref'