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`
Loading...
` + ? html`{ + ${(this.mySubscribedCollections.length === 0 && !this.isLoading) ? ( + html` +
Loading...
` + ? html`