jschulthess/qortal-ui
1
0
Fork 0
forked from Qortal/qortal-ui
Code Issues Pull Requests Projects Releases Wiki Activity

Continued UI styling of gifs

Browse Source
This commit is contained in:
Justin Ferrari 2023-02-10 22:42:53 +02:00
parent c60238bd04
commit 718d9e2700
8 changed files with 227 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
qortal-ui-core/font/switch-theme.css
View File

@ -58,6 +58,7 @@ html {
--gif-search-icon: #ffffff; --gif-search-icon: #ffffff;
--gif-button-row-bg: #eaeaef; --gif-button-row-bg: #eaeaef;
--gif-button-row-color: #464040; --gif-button-row-color: #464040;
--gif-collection-hover-bg: #eaeaefa3;
} }
html[theme="dark"] { html[theme="dark"] {
@ -120,4 +121,5 @@ html[theme="dark"] {
--gif-search-icon: #586b8d; --gif-search-icon: #586b8d;
--gif-button-row-bg: #82899c; --gif-button-row-bg: #82899c;
--gif-button-row-color: #151212; --gif-button-row-color: #151212;
--gif-collection-hover-bg: #ffffff26;
} }

2
qortal-ui-core/src/styles/switch-theme.css
View File

@ -55,6 +55,7 @@ html {
--gif-search-icon: #ffffff; --gif-search-icon: #ffffff;
--gif-button-row-bg: #eaeaef; --gif-button-row-bg: #eaeaef;
--gif-button-row-color: #464040; --gif-button-row-color: #464040;
--gif-collection-hover-bg: #eaeaefa3;
} }
html[theme="dark"] { html[theme="dark"] {
@ -114,4 +115,5 @@ html[theme="dark"] {
--gif-search-icon: #586b8d; --gif-search-icon: #586b8d;
--gif-button-row-bg: #82899c; --gif-button-row-bg: #82899c;
--gif-button-row-color: #151212; --gif-button-row-color: #151212;
--gif-collection-hover-bg: #ffffff26;
} }

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

@ -47,7 +47,6 @@ user-select: none;
} }
.explore-collections-icon { .explore-collections-icon {
margin-left: auto;
text-align: right; text-align: right;
font-size: 20px; font-size: 20px;
color: var(--chat-group); color: var(--chat-group);
@ -346,7 +345,7 @@ color: var(--chat-bubble-msg-color);
align-items: center; align-items: center;
transition: box-shadow 0.2s ease-in-out; transition: box-shadow 0.2s ease-in-out;
background-color: var(--gif-button-row-bg); background-color: var(--gif-button-row-bg);
border-radius: 10px; border-radius: 3px;
box-shadow: rgb(0 0 0 / 20%) 0px 0px 0px; box-shadow: rgb(0 0 0 / 20%) 0px 0px 0px;
padding: 8px 10px; padding: 8px 10px;
cursor: pointer; cursor: pointer;
@ -383,7 +382,7 @@ color: var(--chat-bubble-msg-color);
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: all 0.3s ease-in-out;
box-shadow: none; box-shadow: none;
padding: 10px; padding: 10px;
cursor: pointer; cursor: pointer;
@ -391,9 +390,8 @@ color: var(--chat-bubble-msg-color);
.collection-card:hover { .collection-card:hover {
border: none; border: none;
border-radius: 4px; border-radius: 5px;
box-sizing: border-box; background-color: var(--gif-collection-hover-bg);
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 { .upload-button {
@ -404,7 +402,7 @@ background-color: transparent;
padding: 8px 10px; padding: 8px 10px;
border-radius: 5px; border-radius: 5px;
border: none; border: none;
transition: all 0.3s ease-in-out; transition: all 0.4s ease-in-out;
} }
.upload-back-button { .upload-back-button {

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

@ -67,8 +67,6 @@ editor: {type: Object},
url: `/arbitrary/metadata/GIF_REPOSITORY/${this.myAccountName}/${collection.identifier}`, url: `/arbitrary/metadata/GIF_REPOSITORY/${this.myAccountName}/${collection.identifier}`,
}); });
console.log({metaData});
collectionObj = { collectionObj = {
...collection, ...collection,
gifUrls: [], gifUrls: [],
@ -429,7 +427,7 @@ editor: {type: Object},
}; };
interval = setInterval(getAnswer, 5000); interval = setInterval(getAnswer, 5000);
}); });
// saveAs(zipFileBlob, 'zipfile'); saveAs(zipFileBlob, 'zipfile');
this.isLoading = false; this.isLoading = false;
this.setGifsLoading(false); this.setGifsLoading(false);
this.mode = 'myCollection'; this.mode = 'myCollection';
@ -452,7 +450,7 @@ editor: {type: Object},
render() { render() {
console.log('this.currentCollection', this.currentCollection); console.log('this.currentCollection', this.currentCollection);
console.log(27, 'chat gifs here'); console.log(31, '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">
@ -472,12 +470,31 @@ editor: {type: Object},
slot="icon"> slot="icon">
</vaadin-icon> </vaadin-icon>
<div class="title-row"> <div class="title-row">
<p class="gif-explorer-title">${translate( <div
'chatpage.cchange80' style=${((this.currentCollection && (this.mode === 'myCollection' || this.mode === 'subscribedCollection')) || this.mode === 'explore') ? "visibility: visible;" : "visibility: hidden;"}
)}</p> class='collection-back-button'
@click=${() => {
if (this.mode === 'explore' && !this.currentCollection) {
this.mode = 'myCollection';
this.currentCollection = null;
} else if (this.mode === 'explore' && this.currentCollection) {
this.mode = 'explore';
this.currentCollection = null;
} else {
this.currentCollection = null;
}
}}
>
<vaadin-icon class='collection-back-button-arrow' icon='vaadin:arrow-left' slot='icon'></vaadin-icon>
</div>
<p class="gif-explorer-title">
${translate(
'chatpage.cchange80'
)}
</p>
<vaadin-icon <vaadin-icon
style=${ style=${
this.mode === 'newCollection' (this.mode === 'newCollection' || this.mode === 'explore')
? 'display: none' ? 'display: none'
: 'display: block' : 'display: block'
} }
@ -498,27 +515,25 @@ editor: {type: Object},
text=${get('chatpage.cchange81')}> text=${get('chatpage.cchange81')}>
</vaadin-tooltip> </vaadin-tooltip>
</div> </div>
<div class="collections-button-row" style=${ <div
this.mode === 'newCollection' class="collections-button-row"
? 'display: none' style=${(this.mode === 'newCollection' || this.mode === 'explore')
: 'display: block' ? 'display: none' : 'display: block'}>
}> <div class="collections-button-innerrow">
<div class="collections-button-innerrow">
<div <div
id="my-collections-button" id="my-collections-button"
class=${[ class=${[
'my-collections-button', 'my-collections-button',
this.mode === 'myCollection' this.mode === 'myCollection'
? 'collections-button-active' ? 'collections-button-active'
: null, : null,
].join(' ')} ].join(' ')}
@click=${() => { @click=${() => {
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; this.currentCollection = null;
}} }}>
>
${translate('chatpage.cchange82')} ${translate('chatpage.cchange82')}
</div> </div>
<div <div
@ -615,29 +630,11 @@ editor: {type: Object},
} }
${this.currentCollection && this.mode === 'myCollection' ${this.currentCollection && this.mode === 'myCollection'
? html` ? html`
<div
class='collection-back-button'
@click=${() => {
this.currentCollection = null;
}}
>
<vaadin-icon class='collection-back-button-arrow' icon='vaadin:arrow-left' slot='icon'></vaadin-icon>
${translate('general.back')}
</div>
<div class='collection-gifs'> <div class='collection-gifs'>
${this.currentCollection.gifUrls.map((gif) => { ${this.currentCollection.gifUrls.map((gif) => {
console.log({gif});
return html` return html`
<image-component <image-component
style='border-radius: 15px; .class=${'gif-image'}
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;'
.url=${gif} .url=${gif}
.alt=${'gif-image'}> .alt=${'gif-image'}>
</image-component> </image-component>
@ -650,26 +647,14 @@ editor: {type: Object},
${this.currentCollection && ${this.currentCollection &&
this.mode === 'subscribedCollection' this.mode === 'subscribedCollection'
? html` ? html`
<div
class='collection-back-button'
@click=${() => {
this.currentCollection = null;
}}
>
<vaadin-icon class='collection-back-button-arrow' icon='vaadin:arrow-left' slot='icon'>
</vaadin-icon>
${translate('general.back')}
</div>
<div class='collection-gifs'> <div class='collection-gifs'>
${this.currentCollection.gifUrls.map((gif) => { ${this.currentCollection.gifUrls.map((gif) => {
return html` return html`
<img <image-component
class='collection-gif' .class=${'gif-image'}
onerror=${(e) => { .url=${gif}
e.target.src = gif; .alt=${'gif-image'}>
}} </image-component>
src=${gif}
/>
`; `;
})} })}
</div> </div>
@ -678,13 +663,6 @@ editor: {type: Object},
} }
${this.currentCollection && this.mode === 'explore' ${this.currentCollection && this.mode === 'explore'
? html` ? html`
<button
@click=${() => {
this.currentCollection = null;
}}
>
Back
</button>
<button <button
@click=${() => { @click=${() => {
this.addCollectionToList( this.addCollectionToList(

64
qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifsExplore-css.js Normal file
View File

@ -0,0 +1,64 @@
import { css } from 'lit';
export const chatGifsExploreStyles = css`
.container-body {
display: flex;
flex-direction: column;
align-items: center;
max-width: 100%;
height: 100%;
}
.collection-wrapper {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
overflow: hidden;
}
.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: all 0.3s ease-in-out;
box-shadow: none;
padding: 10px;
cursor: pointer;
}
.collection-card:hover {
border: none;
border-radius: 5px;
background-color: var(--gif-collection-hover-bg);
}
.search-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);
width: 90%;
margin: 10px 0;
outline: none;
}
.search-collection-name::placeholder {
font-size: 16px;
font-family: Montserrat, sans-serif;
font-weight: 600;
opacity: 0.6;
color: var(--chat-bubble-msg-color);
}
`

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

@ -1,92 +1,98 @@
import {LitElement, html, css} from 'lit'; import { LitElement, html, css } from 'lit';
import {render} from 'lit/html.js'; import { Epml } from '../../../../epml.js';
import {Epml} from '../../../../epml.js'; import { chatGifsExploreStyles } from './ChatGifsExplore-css.js';
import * as zip from '@zip.js/zip.js'; import { translate, get } from 'lit-translate';
import {saveAs} from 'file-saver';
import '@material/mwc-icon'; import '@material/mwc-icon';
import ShortUniqueId from 'short-unique-id';
import {publishData} from '../../../utils/publish-image.js';
const parentEpml = new Epml({type: 'WINDOW', source: window.parent}); const parentEpml = new Epml({ type: 'WINDOW', source: window.parent });
class ChatGifsExplore extends LitElement { class ChatGifsExplore extends LitElement {
static get properties() { static get properties() {
return { return {
currentCollection: {type: String}, currentCollection: { type: String },
getMoreExploreGifs: {attribute: false}, searchCollectionName: {type: String},
exploreCollections: {type: Array}, getMoreExploreGifs: { attribute: false },
setCurrentCollection: {attribute: false}, exploreCollections: { type: Array },
}; setCurrentCollection: { attribute: false },
} };
}
static get styles() { static styles = [chatGifsExploreStyles];
return css``;
}
constructor() { constructor() {
super(); super();
this.downObserverElement = ''; this.searchCollectionName = '';
this.viewElement = ''; this.downObserverElement = '';
this.exploreCollections = []; this.viewElement = '';
} this.exploreCollections = [];
}
elementObserver() { elementObserver() {
const options = { const options = {
root: this.viewElement, root: this.viewElement,
rootMargin: '0px', rootMargin: '0px',
threshold: 1, threshold: 1,
}; };
// identify an element to observe // identify an element to observe
const elementToObserve = this.downObserverElement; const elementToObserve = this.downObserverElement;
// passing it a callback function // passing it a callback function
const observer = new IntersectionObserver( const observer = new IntersectionObserver(
this.observerHandler, this.observerHandler,
options options
); );
// call `observe()` on that MutationObserver instance, // call `observe()` on that MutationObserver instance,
// passing it the element to observe, and the options object // passing it the element to observe, and the options object
observer.observe(elementToObserve); observer.observe(elementToObserve);
} }
observerHandler(entries) { observerHandler(entries) {
if (!entries[0].isIntersecting) { if (!entries[0].isIntersecting) {
return; return;
} else { } else {
if (this.exploreCollections.length < 20) { if (this.exploreCollections.length < 20) {
return; return;
} }
this.getMoreExploreGifs(); this.getMoreExploreGifs();
} }
} }
async firstUpdated() { async firstUpdated() {
this.viewElement = this.shadowRoot.getElementById('viewElement'); this.viewElement = this.shadowRoot.getElementById('viewElement');
this.downObserverElement = this.downObserverElement =
this.shadowRoot.getElementById('downObserver'); this.shadowRoot.getElementById('downObserver');
this.elementObserver(); this.elementObserver();
} }
render() { render() {
return html` console.log(6, "chat-gifs-explore-here");
<div id="viewElement" class="container-body"> return html`
${this.exploreCollections.map((collection) => { <div id="viewElement" class="container-body">
return html` <input
<div> class="search-collection-name"
<p placeholder=${get("chatpage.cchange88")}
@click=${() => { .value=${this.searchCollectionName}
this.setCurrentCollection(collection); @change=${(e) => {
}} this.searchCollectionName =
> e.target.value;
${collection.identifier} }}
</p> />
</div> <div class='collection-wrapper'>
`; ${this.exploreCollections.map((collection) => {
})} return html`
<div id="downObserver"></div> <div class='collection-card' @click=${() => {
this.setCurrentCollection(collection);
}}>
${collection.identifier}
</div>
`;
})}
</div> </div>
`; <div id="downObserver"></div>
} </div>
`;
}
} }
window.customElements.define('chat-gifs-explore', ChatGifsExplore); window.customElements.define('chat-gifs-explore', ChatGifsExplore);

39
qortal-ui-plugins/plugins/core/components/ImageComponent.js
View File

@ -6,9 +6,9 @@ export class ImageComponent extends LitElement {
static get properties() { static get properties() {
return { return {
class: { type: String },
url: { type: String }, url: { type: String },
alt: { type: String }, alt: { type: String },
style: { type: String },
attempts: { type: Number }, attempts: { type: Number },
maxAttempts: { type: Number }, maxAttempts: { type: Number },
error: { type: Boolean } error: { type: Boolean }
@ -26,12 +26,27 @@ color: var(--chat-bubble-msg-color);
font-weight: 300; font-weight: 300;
padding: 10px 10px; padding: 10px 10px;
} }
.gif-image {
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;
}
.gif-image:hover {
border: 1px solid var(--mdc-theme-primary );
}
` `
} }
constructor() { constructor() {
super(); super();
this.src = '';
this.attempts = 0; this.attempts = 0;
this.maxAttempts = 5; this.maxAttempts = 5;
} }
@ -41,14 +56,18 @@ async _fetchImage() {
if (this.attempts > this.maxAttempts) return; if (this.attempts > this.maxAttempts) return;
try { try {
const response = await fetch(`http://your-backend-api/image-src`); const response = await fetch(this.url);
const data = await response.json(); const data = await response.json();
console.log({data});
if (data.ok) { if (data.ok) {
this.error = false; this.error = false;
} else { this.url = data.src;
this.requestUpdate();
} else if (!data.ok || data.error) {
this.error = true; this.error = true;
} else {
this.error = false;
} }
this.src = data.src;
} catch (error) { } catch (error) {
this.error = true; this.error = true;
console.error(error); console.error(error);
@ -57,12 +76,18 @@ async _fetchImage() {
} }
render() { render() {
console.log(19, "image component here"); console.log(5, "Image Component here");
console.log(this.url)
if (this.error && this.attempts <= this.maxAttempts) {
setTimeout(() => {
this._fetchImage();
}, 1000);
}
return html` return html`
${this.url && !this.error ${this.url && !this.error
? html` ? html`
<img <img
.style=${this.style} class=${this.class}
src=${this.url} src=${this.url}
alt=${this.alt} alt=${this.alt}
@error=${this._fetchImage} @error=${this._fetchImage}

2
qortal-ui-plugins/plugins/utils/publish-image.js
View File

@ -126,8 +126,6 @@ export const publishData = async ({
} }
} }
console.log({postBody})
let uploadDataUrl = `/arbitrary/${service}/${registeredName}${urlSuffix}?apiKey=${getApiKey()}` let uploadDataUrl = `/arbitrary/${service}/${registeredName}${urlSuffix}?apiKey=${getApiKey()}`
if (identifier != null && identifier.trim().length > 0) { if (identifier != null && identifier.trim().length > 0) {