Qortal/qortal-ui
4
1
Fork 4
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-02-12 02:05:51 +00:00
Code Issues Projects Releases Wiki Activity

Continued UI styling and fixed img bug

Browse Source
This commit is contained in:
Justin Ferrari 2023-02-08 23:00:50 +02:00
parent 013b97ca51
commit c60238bd04
6 changed files with 287 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
qortal-ui-core/font/PaytoneOne.ttf Normal file
View File

Binary file not shown.

7
qortal-ui-core/font/material-icons.css
View File

@ -54,6 +54,13 @@
url(Livvic.ttf) format('truetype'); 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 { .material-icons {
font-family: 'Material Icons'; font-family: 'Material Icons';
font-weight: normal; font-weight: normal;

7
qortal-ui-core/language/us.json
View File

@ -583,7 +583,12 @@
"cchange87": "A collection name is required!", "cchange87": "A collection name is required!",
"cchange88": "Collection Name", "cchange88": "Collection Name",
"cchange89": "Gif Collection Uploaded Successfully!", "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": { "welcomepage": {
"wcchange1": "Welcome to Q-Chat", "wcchange1": "Welcome to Q-Chat",

73
qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifs-css.js
View File

@ -12,8 +12,9 @@ width: fit-content;
justify-self: flex-end; justify-self: flex-end;
place-self: end flex-end; place-self: end flex-end;
min-height: 400px; min-height: 400px;
max-height: 95vh; max-height: calc(95vh - 90px);
min-width: 370px; min-width: 370px;
max-width: 370px;
box-shadow: var(--gifs-drop-shadow); box-shadow: var(--gifs-drop-shadow);
} }
@ -137,6 +138,49 @@ display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
height: 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 { .new-collection-row {
@ -295,21 +339,39 @@ color: var(--chat-bubble-msg-color);
font-weight: 300; font-weight: 300;
letter-spacing: 0.3px; letter-spacing: 0.3px;
font-size: 16px; font-size: 16px;
width: fit-content;
gap: 10px;
color: var(--chat-bubble-msg-color); color: var(--chat-bubble-msg-color);
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
transition: box-shadow 0.2s ease-in-out; transition: box-shadow 0.2s ease-in-out;
background-color: rgb(111, 116, 129); background-color: var(--gif-button-row-bg);
border-radius: 10px; border-radius: 10px;
box-shadow: rgb(0 0 0 / 15%) 1.95px 1.95px 2.6px; box-shadow: rgb(0 0 0 / 20%) 0px 0px 0px;
padding: 8px 15px; padding: 8px 10px;
cursor: pointer; cursor: pointer;
} }
.collection-back-button:hover { .collection-back-button:hover {
border: none; border: none;
box-sizing: border-box; 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 { .collection-card {
@ -405,6 +467,7 @@ background-color: #03a8f475;
color: var(--chat-bubble-msg-color); color: var(--chat-bubble-msg-color);
margin: 0 0 10px 0; margin: 0 0 10px 0;
text-align: center; text-align: center;
user-select: none;
} }
`; `;

205
qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifs.js
View File

@ -9,6 +9,7 @@ import {publishData} from '../../../utils/publish-image.js';
import {translate, get} from 'lit-translate'; import {translate, get} from 'lit-translate';
import {gifExplorerStyles} from './ChatGifs-css.js'; import {gifExplorerStyles} from './ChatGifs-css.js';
import './ChatGifsExplore.js'; import './ChatGifsExplore.js';
import '../ImageComponent.js';
import '@vaadin/tooltip'; import '@vaadin/tooltip';
const parentEpml = new Epml({type: 'WINDOW', source: window.parent}); 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}`, url: `/arbitrary/metadata/GIF_REPOSITORY/${this.myAccountName}/${collection.identifier}`,
}); });
console.log({metaData}); console.log({metaData});
collectionObj = { collectionObj = {
...collection, ...collection,
@ -173,10 +174,12 @@ editor: {type: Object},
getMyGifCollections getMyGifCollections
); );
console.log({gifCollectionWithMetaData}); return gifCollectionWithMetaData;
this.myGifCollections = gifCollectionWithMetaData; } else {
} return [];
}
} }
async getAllCollections() { async getAllCollections() {
this.pageNumber = 0; this.pageNumber = 0;
// for the explore section // for the explore section
@ -202,7 +205,6 @@ editor: {type: Object},
const name = splitCollection[0]; const name = splitCollection[0];
const identifier = splitCollection[1]; const identifier = splitCollection[1];
try { try {
console.log({collection});
const data = await parentEpml.request('apiCall', { const data = await parentEpml.request('apiCall', {
url: `/arbitrary/resources?service=GIF_REPOSITORY&limit=0&name=${name}&identifier=${identifier}`, url: `/arbitrary/resources?service=GIF_REPOSITORY&limit=0&name=${name}&identifier=${identifier}`,
}); });
@ -219,7 +221,7 @@ editor: {type: Object},
const savedCollectionsWithMetaData = await this.structureCollections( const savedCollectionsWithMetaData = await this.structureCollections(
savedCollections savedCollections
); );
this.mySubscribedCollections = savedCollectionsWithMetaData; return savedCollectionsWithMetaData;
} }
async firstUpdated() { 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;'; '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 { try {
this.isLoading = true; this.isLoading = true;
await this.getMyGifCollections(); 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.getAllCollections();
await this.getSavedCollections();
this.isLoading = false; this.isLoading = false;
} catch (error) { } catch (error) {
this.isLoading = false; this.isLoading = false;
@ -245,16 +260,20 @@ editor: {type: Object},
} }
async updated(changedProperties) { async updated(changedProperties) {
console.log({changedProperties});
if (changedProperties && changedProperties.has('mode')) { if (changedProperties && changedProperties.has('mode')) {
const mode = this.mode; const mode = this.mode;
console.log({mode});
if (mode === 'myCollection') { if (mode === 'myCollection') {
try { try {
this.myGifCollections = [];
this.isLoading = true; this.isLoading = true;
const collections = await this.getMyGifCollections();
await this.getMyGifCollections(); await new Promise((res) => {
this.isLoading = false; setTimeout(() => {
res();
}, 1000)
});
this.myGifCollections = collections;
this.isLoading = false;
} catch (error) { } catch (error) {
this.isLoading = false; this.isLoading = false;
} }
@ -272,10 +291,16 @@ editor: {type: Object},
} }
if (mode === 'subscribedCollection') { if (mode === 'subscribedCollection') {
try { try {
this.mySubscribedCollections = [];
this.isLoading = true; this.isLoading = true;
const savedCollections = await this.getSavedCollections();
await this.getSavedCollections(); await new Promise((res) => {
this.isLoading = false; setTimeout(() => {
res();
}, 1000)
});
this.mySubscribedCollections = savedCollections;
this.isLoading = false;
} catch (error) { } catch (error) {
this.isLoading = false; this.isLoading = false;
} }
@ -301,16 +326,13 @@ editor: {type: Object},
} }
addGifs(gifs) { addGifs(gifs) {
console.log('gifs', gifs);
const mapGifs = gifs.map((file) => { const mapGifs = gifs.map((file) => {
return { return {
file, file,
name: file.name, name: file.name,
}; };
}); });
console.log({mapGifs});
this.gifsToBeAdded = [...this.gifsToBeAdded, ...mapGifs]; this.gifsToBeAdded = [...this.gifsToBeAdded, ...mapGifs];
console.log('this.gifsToBeAdded', this.gifsToBeAdded);
} }
async uploadGifCollection() { async uploadGifCollection() {
@ -362,7 +384,6 @@ editor: {type: Object},
await zipWriter.close(); await zipWriter.close();
const zipFileBlob = await zipFileWriter.getData(); const zipFileBlob = await zipFileWriter.getData();
const blobTobase = await blobToBase64(zipFileBlob); const blobTobase = await blobToBase64(zipFileBlob);
console.log({blobTobase});
if (!userName) { if (!userName) {
parentEpml.request('showSnackBar', get('chatpage.cchange27')); parentEpml.request('showSnackBar', get('chatpage.cchange27'));
@ -411,12 +432,11 @@ editor: {type: Object},
// saveAs(zipFileBlob, 'zipfile'); // saveAs(zipFileBlob, 'zipfile');
this.isLoading = false; this.isLoading = false;
this.setGifsLoading(false); this.setGifsLoading(false);
this.mode = 'myCollection'; this.mode = 'myCollection';
this.gifsToBeAdded = []; this.gifsToBeAdded = [];
this.newCollectionName = ''; this.newCollectionName = '';
parentEpml.request('showSnackBar', get('chatpage.cchange89')); parentEpml.request('showSnackBar', get('chatpage.cchange89'));
console.log({zipFileBlob}); } catch (error) {
} catch (error) {
console.log(error); console.log(error);
} }
} }
@ -432,7 +452,7 @@ editor: {type: Object},
render() { render() {
console.log('this.currentCollection', this.currentCollection); console.log('this.currentCollection', this.currentCollection);
console.log(13, 'chat gifs here'); console.log(27, 'chat gifs here');
return html` return html`
<div class="gifs-container"> <div class="gifs-container">
<div class="gif-explorer-container"> <div class="gif-explorer-container">
@ -464,9 +484,9 @@ editor: {type: Object},
id="explore-collections-icon" id="explore-collections-icon"
class="explore-collections-icon" class="explore-collections-icon"
@click=${() => { @click=${() => {
if (this.isLoading) return; if (this.isLoading) return;
this.mode = 'explore'; this.mode = 'explore';
}} }}
icon="vaadin:search" icon="vaadin:search"
slot="icon"> slot="icon">
</vaadin-icon> </vaadin-icon>
@ -496,6 +516,7 @@ editor: {type: Object},
if (this.isLoading) return; if (this.isLoading) return;
if (this.mode === 'myCollection') return; if (this.mode === 'myCollection') return;
this.mode = 'myCollection'; this.mode = 'myCollection';
this.currentCollection = null;
}} }}
> >
${translate('chatpage.cchange82')} ${translate('chatpage.cchange82')}
@ -512,6 +533,7 @@ editor: {type: Object},
if (this.isLoading) return; if (this.isLoading) return;
if (this.mode === 'subscribedCollection') return; if (this.mode === 'subscribedCollection') return;
this.mode = 'subscribedCollection'; this.mode = 'subscribedCollection';
this.currentCollection = null;
}} }}
> >
${translate('chatpage.cchange83')} ${translate('chatpage.cchange83')}
@ -524,48 +546,60 @@ editor: {type: Object},
${this.isLoading === true ${this.isLoading === true
? html`<div class="lds-circle"><div></div></div>` ? html`<div class="lds-circle"><div></div></div>`
: ''} : ''}
${this.myGifCollections.map((collection) => { ${(this.myGifCollections.length === 0 && !this.isLoading) ? (
return html` html`
<div @click=${() => { <div class='no-collections'>${translate('chatpage.cchange92')}</div>
this.currentCollection = `
collection; ) : (
}} class='collection-card'> html`
${collection.identifier} ${(this.myGifCollections || []).map((collection) => {
</div> return html`
`; <div @click=${() => {
})} this.currentCollection =
collection;
}} class='collection-card'>
${collection.identifier}
</div>
`;
})}
`
)}
` `
: '' : ''
} }
${this.mode === 'subscribedCollection' && ${this.mode === 'subscribedCollection' &&
!this.currentCollection !this.currentCollection
? html` ? html`
${this.isLoading === true ${this.isLoading === true
? html` <p>Loading...</p> ` ? html`<div class="lds-circle"><div></div></div>`
: ''} : ''}
${this.mySubscribedCollections.map( ${(this.mySubscribedCollections.length === 0 && !this.isLoading) ? (
(collection) => { html`
return html` <div class='no-collections'>${translate('chatpage.cchange93')}</div>
<div> `
<p ) : (
@click=${() => { html`
${this.mySubscribedCollections.map(
(collection) => {
return html`
<div @click=${() => {
this.currentCollection = this.currentCollection =
collection; collection;
}} }} class='collection-card'>
> ${collection.identifier}
${collection.identifier} </div>
</p> `;
</div> }
`; )}
} `
)} )}
` `
: '' : ''
} }
${this.mode === 'explore' && !this.currentCollection ${this.mode === 'explore' && !this.currentCollection
? html` ? html`
${this.isLoading === true ${this.isLoading === true
? html` <p>Loading...</p> ` ? html`<div class="lds-circle"><div></div></div>`
: ''} : ''}
<chat-gifs-explore <chat-gifs-explore
currentCollection=${this.currentCollection} currentCollection=${this.currentCollection}
@ -582,53 +616,63 @@ editor: {type: Object},
${this.currentCollection && this.mode === 'myCollection' ${this.currentCollection && this.mode === 'myCollection'
? html` ? html`
<div <div
class='collection-back-button' class='collection-back-button'
@click=${() => { @click=${() => {
this.currentCollection = null; this.currentCollection = null;
}} }}
> >
<vaadin-icon icon='vaadin:arrow-left' slot='icon'></vaadin-icon> <vaadin-icon class='collection-back-button-arrow' icon='vaadin:arrow-left' slot='icon'></vaadin-icon>
${translate('general.back')} ${translate('general.back')}
</div> </div>
${this.currentCollection.gifUrls.map((gif) => { <div class='collection-gifs'>
console.log({gif}); ${this.currentCollection.gifUrls.map((gif) => {
console.log({gif});
return html` return html`
<img <image-component
onerror=${(e) => { style='border-radius: 15px;
e.target.src = gif; background-color: transparent;
}} cursor: pointer;
src=${gif} width: 100%;
style="width: 50px; height: 50px" 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;'
.url=${gif}
.alt=${'gif-image'}>
</image-component>
`;
})}
</div>
` `
: '' : ''
} }
${this.currentCollection && ${this.currentCollection &&
this.mode === 'subscribedCollection' this.mode === 'subscribedCollection'
? html` ? html`
<button <div
class='collection-back-button'
@click=${() => { @click=${() => {
this.currentCollection = null; this.currentCollection = null;
}} }}
> >
Back <vaadin-icon class='collection-back-button-arrow' icon='vaadin:arrow-left' slot='icon'>
</button> </vaadin-icon>
${translate('general.back')}
</div>
<div class='collection-gifs'>
${this.currentCollection.gifUrls.map((gif) => { ${this.currentCollection.gifUrls.map((gif) => {
console.log({gif});
return html` return html`
<img <img
class='collection-gif'
onerror=${(e) => { onerror=${(e) => {
e.target.src = gif; e.target.src = gif;
}} }}
src=${gif} src=${gif}
style="width: 50px; height: 50px"
/> />
`; `;
})} })}
</div>
` `
: '' : ''
} }
@ -651,7 +695,6 @@ editor: {type: Object},
Subscribe to this collection Subscribe to this collection
</button> </button>
${this.currentCollection.gifUrls.map((gif) => { ${this.currentCollection.gifUrls.map((gif) => {
console.log({gif});
return html` return html`
<img <img
@ -766,7 +809,7 @@ editor: {type: Object},
${translate('general.back')} ${translate('general.back')}
</button> </button>
<button <button
style=${this.gifsToBeAdded.length === 0 ? "display: none;" : "display: block;"} style=${this.gifsToBeAdded.length === 0 ? "display: none;" : "display: block;"}
class="upload-button" class="upload-button"
@click=${() => { @click=${() => {
this.uploadGifCollection(); this.uploadGifCollection();

80
qortal-ui-plugins/plugins/core/components/ImageComponent.js Normal file
View File

@ -0,0 +1,80 @@
import { LitElement, html, css } from 'lit';
import { translate, get } from 'lit-translate';
import { render } from 'lit/html.js';
export class ImageComponent extends LitElement {
static get properties() {
return {
url: { type: String },
alt: { type: String },
style: { type: String },
attempts: { type: Number },
maxAttempts: { type: Number },
error: { type: Boolean }
}
}
static get styles() {
return css`
.gif-error-msg {
margin: 0;
font-family: Roboto, sans-serif;
font-size: 17px;
letter-spacing: 0.3px;
color: var(--chat-bubble-msg-color);
font-weight: 300;
padding: 10px 10px;
}
`
}
constructor() {
super();
this.src = '';
this.attempts = 0;
this.maxAttempts = 5;
}
async _fetchImage() {
this.attempts++;
if (this.attempts > this.maxAttempts) return;
try {
const response = await fetch(`http://your-backend-api/image-src`);
const data = await response.json();
if (data.ok) {
this.error = false;
} else {
this.error = true;
}
this.src = data.src;
} catch (error) {
this.error = true;
console.error(error);
this._fetchImage();
}
}
render() {
console.log(19, "image component here");
return html`
${this.url && !this.error
? html`
<img
.style=${this.style}
src=${this.url}
alt=${this.alt}
@error=${this._fetchImage}
/>`
: this.error && this.attempts <= this.maxAttempts ? html`
<p class='gif-error-msg'>${translate('chatpage.cchange94')}</p>
`
: html`
<p class='gif-error-msg'>${translate('chatpage.cchange95')}</p>
`
}`
}
}
customElements.define('image-component', ImageComponent);