diff --git a/qortal-ui-core/font/PaytoneOne.ttf b/qortal-ui-core/font/PaytoneOne.ttf new file mode 100644 index 00000000..5cb0bbb8 Binary files /dev/null and b/qortal-ui-core/font/PaytoneOne.ttf differ diff --git a/qortal-ui-core/font/material-icons.css b/qortal-ui-core/font/material-icons.css index bf6891fc..d2bfeaae 100644 --- a/qortal-ui-core/font/material-icons.css +++ b/qortal-ui-core/font/material-icons.css @@ -54,12 +54,19 @@ url(Livvic.ttf) format('truetype'); } +@font-face { + font-family: 'Paytone One', sans-serif; + src: local('PaytoneOne'), + local('PaytoneOne'), + url(PaytoneOne.ttf) format('truetype'); +} + .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; - /* Preferred icon size */ + /* Preferred icon size */ display: inline-block; line-height: 1; text-transform: none; diff --git a/qortal-ui-core/language/us.json b/qortal-ui-core/language/us.json index 77f635b5..1b3e31f7 100644 --- a/qortal-ui-core/language/us.json +++ b/qortal-ui-core/language/us.json @@ -583,7 +583,12 @@ "cchange87": "A collection name is required!", "cchange88": "Collection Name", "cchange89": "Gif Collection Uploaded Successfully!", - "cchange90": "Gifs uploading, please wait..." + "cchange90": "Gifs uploading, please wait...", + "cchange91": "Something went wrong! Please try changing tabs and coming back.", + "cchange92": "You currently have no collections.", + "cchange93": "You currently have no subscribed collections.", + "cchange94": "Error fetching image. Retrying...", + "cchange95": "Failed to fetch image! Please visit another collection and try again!" }, "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 1911758d..b4607b9f 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifs-css.js +++ b/qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifs-css.js @@ -12,8 +12,9 @@ width: fit-content; justify-self: flex-end; place-self: end flex-end; min-height: 400px; -max-height: 95vh; +max-height: calc(95vh - 90px); min-width: 370px; +max-width: 370px; box-shadow: var(--gifs-drop-shadow); } @@ -137,6 +138,49 @@ display: flex; flex-direction: column; width: 100%; height: 100%; +overflow: hidden; +} + +.collection-gifs { +display: grid; +grid-template-columns: repeat(2, 1fr); +grid-gap: 10px; +margin-top: 10px; +overflow-y: auto; +overflow-x: hidden; +} + +.collection-gifs::-webkit-scrollbar-track { +background-color: whitesmoke; +border-radius: 7px; +} + +.collection-gifs::-webkit-scrollbar { +width: 6px; +border-radius: 7px; +background-color: whitesmoke; +} + +.collection-gifs::-webkit-scrollbar-thumb { +background-color: rgb(180, 176, 176); +border-radius: 7px; +transition: all 0.3s ease-in-out; +} + +.collection-gif { +border-radius: 15px; +background-color: transparent; +cursor: pointer; +width: 100%; +height: 150px; +object-fit: cover; +border: 1px solid transparent; +transition: all 0.2s cubic-bezier(0, 0.55, 0.45, 1); +box-shadow: rgb(50 50 93 / 25%) 0px 6px 12px -2px, rgb(0 0 0 / 30%) 0px 3px 7px -3px; +} + +.collection-gif:hover { +border: 1px solid var(--mdc-theme-primary ); } .new-collection-row { @@ -295,21 +339,39 @@ color: var(--chat-bubble-msg-color); font-weight: 300; letter-spacing: 0.3px; font-size: 16px; + width: fit-content; + gap: 10px; 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); + background-color: var(--gif-button-row-bg); border-radius: 10px; - box-shadow: rgb(0 0 0 / 15%) 1.95px 1.95px 2.6px; - padding: 8px 15px; + box-shadow: rgb(0 0 0 / 20%) 0px 0px 0px; + padding: 8px 10px; 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; + 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; +} + +.collection-back-button-arrow { + font-size: 10px; +} + +.no-collections { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + color: var(--chat-bubble-msg-color); + font-size: 20px; + font-family: Paytone One, sans-serif; + margin-top: 20px; + user-select: none; } .collection-card { @@ -405,6 +467,7 @@ background-color: #03a8f475; color: var(--chat-bubble-msg-color); margin: 0 0 10px 0; text-align: center; + 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 3a79c903..b6ae1475 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifs.js +++ b/qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifs.js @@ -9,6 +9,7 @@ import {publishData} from '../../../utils/publish-image.js'; import {translate, get} from 'lit-translate'; import {gifExplorerStyles} from './ChatGifs-css.js'; import './ChatGifsExplore.js'; +import '../ImageComponent.js'; import '@vaadin/tooltip'; const parentEpml = new Epml({type: 'WINDOW', source: window.parent}); @@ -66,7 +67,7 @@ editor: {type: Object}, url: `/arbitrary/metadata/GIF_REPOSITORY/${this.myAccountName}/${collection.identifier}`, }); - console.log({metaData}); + console.log({metaData}); collectionObj = { ...collection, @@ -173,10 +174,12 @@ editor: {type: Object}, getMyGifCollections ); - console.log({gifCollectionWithMetaData}); - this.myGifCollections = gifCollectionWithMetaData; - } + return gifCollectionWithMetaData; + } else { + return []; + } } + async getAllCollections() { this.pageNumber = 0; // for the explore section @@ -202,7 +205,6 @@ editor: {type: Object}, const name = splitCollection[0]; const identifier = splitCollection[1]; try { - console.log({collection}); const data = await parentEpml.request('apiCall', { url: `/arbitrary/resources?service=GIF_REPOSITORY&limit=0&name=${name}&identifier=${identifier}`, }); @@ -219,7 +221,7 @@ editor: {type: Object}, const savedCollectionsWithMetaData = await this.structureCollections( savedCollections ); - this.mySubscribedCollections = savedCollectionsWithMetaData; + return savedCollectionsWithMetaData; } async firstUpdated() { @@ -233,10 +235,23 @@ editor: {type: Object}, '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; - await this.getMyGifCollections(); + this.isLoading = true; + const myCollections = await this.getMyGifCollections(); + const savedCollections = await this.getSavedCollections(); + + if (!Array.isArray(myCollections) && !Array.isArray(savedCollections)) { + parentEpml.request('showSnackBar', get('chatpage.cchange91')); + return; + } + + await new Promise((res) => { + setTimeout(() => { + res(); + }, 1000) + }); + this.myGifCollections = myCollections; + this.mySubscribedCollections = savedCollections; await this.getAllCollections(); - await this.getSavedCollections(); this.isLoading = false; } catch (error) { this.isLoading = false; @@ -245,16 +260,20 @@ editor: {type: Object}, } async updated(changedProperties) { - console.log({changedProperties}); if (changedProperties && changedProperties.has('mode')) { const mode = this.mode; - console.log({mode}); if (mode === 'myCollection') { try { + this.myGifCollections = []; this.isLoading = true; - - await this.getMyGifCollections(); - this.isLoading = false; + const collections = await this.getMyGifCollections(); + await new Promise((res) => { + setTimeout(() => { + res(); + }, 1000) + }); + this.myGifCollections = collections; + this.isLoading = false; } catch (error) { this.isLoading = false; } @@ -272,10 +291,16 @@ editor: {type: Object}, } if (mode === 'subscribedCollection') { try { + this.mySubscribedCollections = []; this.isLoading = true; - - await this.getSavedCollections(); - this.isLoading = false; + const savedCollections = await this.getSavedCollections(); + await new Promise((res) => { + setTimeout(() => { + res(); + }, 1000) + }); + this.mySubscribedCollections = savedCollections; + this.isLoading = false; } catch (error) { this.isLoading = false; } @@ -301,16 +326,13 @@ editor: {type: Object}, } addGifs(gifs) { - console.log('gifs', gifs); const mapGifs = gifs.map((file) => { return { file, name: file.name, }; }); - console.log({mapGifs}); this.gifsToBeAdded = [...this.gifsToBeAdded, ...mapGifs]; - console.log('this.gifsToBeAdded', this.gifsToBeAdded); } async uploadGifCollection() { @@ -362,7 +384,6 @@ editor: {type: Object}, await zipWriter.close(); const zipFileBlob = await zipFileWriter.getData(); const blobTobase = await blobToBase64(zipFileBlob); - console.log({blobTobase}); if (!userName) { parentEpml.request('showSnackBar', get('chatpage.cchange27')); @@ -411,12 +432,11 @@ editor: {type: Object}, // saveAs(zipFileBlob, 'zipfile'); this.isLoading = false; this.setGifsLoading(false); - this.mode = 'myCollection'; - this.gifsToBeAdded = []; - this.newCollectionName = ''; + this.mode = 'myCollection'; + this.gifsToBeAdded = []; + this.newCollectionName = ''; parentEpml.request('showSnackBar', get('chatpage.cchange89')); - console.log({zipFileBlob}); - } catch (error) { + } catch (error) { console.log(error); } } @@ -432,7 +452,7 @@ editor: {type: Object}, render() { console.log('this.currentCollection', this.currentCollection); - console.log(13, 'chat gifs here'); + console.log(27, 'chat gifs here'); return html`
@@ -464,9 +484,9 @@ editor: {type: Object}, id="explore-collections-icon" class="explore-collections-icon" @click=${() => { - if (this.isLoading) return; - this.mode = 'explore'; - }} + if (this.isLoading) return; + this.mode = 'explore'; + }} icon="vaadin:search" slot="icon"> @@ -496,6 +516,7 @@ editor: {type: Object}, if (this.isLoading) return; if (this.mode === 'myCollection') return; this.mode = 'myCollection'; + this.currentCollection = null; }} > ${translate('chatpage.cchange82')} @@ -512,6 +533,7 @@ editor: {type: Object}, if (this.isLoading) return; if (this.mode === 'subscribedCollection') return; this.mode = 'subscribedCollection'; + this.currentCollection = null; }} > ${translate('chatpage.cchange83')} @@ -524,48 +546,60 @@ editor: {type: Object}, ${this.isLoading === true ? html`
` : ''} - ${this.myGifCollections.map((collection) => { - return html` -
{ - this.currentCollection = - collection; - }} class='collection-card'> - ${collection.identifier} -
- `; - })} + ${(this.myGifCollections.length === 0 && !this.isLoading) ? ( + html` +
${translate('chatpage.cchange92')}
+ ` + ) : ( + html` + ${(this.myGifCollections || []).map((collection) => { + return html` +
{ + this.currentCollection = + collection; + }} class='collection-card'> + ${collection.identifier} +
+ `; + })} + ` + )} ` : '' } - ${this.mode === 'subscribedCollection' && + ${this.mode === 'subscribedCollection' && !this.currentCollection ? html` ${this.isLoading === true - ? html`

Loading...

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

{ + ${(this.mySubscribedCollections.length === 0 && !this.isLoading) ? ( + html` +

${translate('chatpage.cchange93')}
+ ` + ) : ( + html` + ${this.mySubscribedCollections.map( + (collection) => { + return html` +
{ this.currentCollection = collection; - }} - > - ${collection.identifier} -

-
- `; - } - )} + }} class='collection-card'> + ${collection.identifier} +
+ `; + } + )} + ` + )} ` : '' } ${this.mode === 'explore' && !this.currentCollection - ? html` + ? html` ${this.isLoading === true - ? html`

Loading...

` + ? html`
` : ''} { this.currentCollection = null; }} > - + ${translate('general.back')}
- ${this.currentCollection.gifUrls.map((gif) => { - console.log({gif}); - - return html` - { - e.target.src = gif; - }} - src=${gif} - style="width: 50px; height: 50px" - /> - `; - })} +
+ ${this.currentCollection.gifUrls.map((gif) => { + console.log({gif}); + return html` + + + `; + })} +
` : '' } ${this.currentCollection && this.mode === 'subscribedCollection' ? html` - + + + ${translate('general.back')} +
+
${this.currentCollection.gifUrls.map((gif) => { - console.log({gif}); - return html` { e.target.src = gif; }} src=${gif} - style="width: 50px; height: 50px" /> `; })} +
` : '' } @@ -651,7 +695,6 @@ editor: {type: Object}, Subscribe to this collection ${this.currentCollection.gifUrls.map((gif) => { - console.log({gif}); return html`
${this.gifsToBeAdded.map((gif, i) => { @@ -766,7 +809,7 @@ editor: {type: Object}, ${translate('general.back')}