Continued UI styling of gifs
This commit is contained in:
Justin Ferrari
parent
c60238bd04
commit
718d9e2700
@ -58,6 +58,7 @@ html {
|
||||
--gif-search-icon: #ffffff;
|
||||
--gif-button-row-bg: #eaeaef;
|
||||
--gif-button-row-color: #464040;
|
||||
--gif-collection-hover-bg: #eaeaefa3;
|
||||
}
|
||||
|
||||
html[theme="dark"] {
|
||||
@ -120,4 +121,5 @@ html[theme="dark"] {
|
||||
--gif-search-icon: #586b8d;
|
||||
--gif-button-row-bg: #82899c;
|
||||
--gif-button-row-color: #151212;
|
||||
--gif-collection-hover-bg: #ffffff26;
|
||||
}
|
||||
@ -55,6 +55,7 @@ html {
|
||||
--gif-search-icon: #ffffff;
|
||||
--gif-button-row-bg: #eaeaef;
|
||||
--gif-button-row-color: #464040;
|
||||
--gif-collection-hover-bg: #eaeaefa3;
|
||||
}
|
||||
|
||||
html[theme="dark"] {
|
||||
@ -114,4 +115,5 @@ html[theme="dark"] {
|
||||
--gif-search-icon: #586b8d;
|
||||
--gif-button-row-bg: #82899c;
|
||||
--gif-button-row-color: #151212;
|
||||
--gif-collection-hover-bg: #ffffff26;
|
||||
}
|
||||
@ -47,7 +47,6 @@ user-select: none;
|
||||
}
|
||||
|
||||
.explore-collections-icon {
|
||||
margin-left: auto;
|
||||
text-align: right;
|
||||
font-size: 20px;
|
||||
color: var(--chat-group);
|
||||
@ -346,7 +345,7 @@ color: var(--chat-bubble-msg-color);
|
||||
align-items: center;
|
||||
transition: box-shadow 0.2s ease-in-out;
|
||||
background-color: var(--gif-button-row-bg);
|
||||
border-radius: 10px;
|
||||
border-radius: 3px;
|
||||
box-shadow: rgb(0 0 0 / 20%) 0px 0px 0px;
|
||||
padding: 8px 10px;
|
||||
cursor: pointer;
|
||||
@ -383,7 +382,7 @@ color: var(--chat-bubble-msg-color);
|
||||
color: var(--chat-bubble-msg-color);
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
transition: box-shadow 0.2s ease-in-out;
|
||||
transition: all 0.3s ease-in-out;
|
||||
box-shadow: none;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
@ -391,9 +390,8 @@ color: var(--chat-bubble-msg-color);
|
||||
|
||||
.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;
|
||||
border-radius: 5px;
|
||||
background-color: var(--gif-collection-hover-bg);
|
||||
}
|
||||
|
||||
.upload-button {
|
||||
@ -404,7 +402,7 @@ background-color: transparent;
|
||||
padding: 8px 10px;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
transition: all 0.3s ease-in-out;
|
||||
transition: all 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
.upload-back-button {
|
||||
|
||||
@ -67,8 +67,6 @@ editor: {type: Object},
|
||||
url: `/arbitrary/metadata/GIF_REPOSITORY/${this.myAccountName}/${collection.identifier}`,
|
||||
});
|
||||
|
||||
console.log({metaData});
|
||||
|
||||
collectionObj = {
|
||||
...collection,
|
||||
gifUrls: [],
|
||||
@ -429,7 +427,7 @@ editor: {type: Object},
|
||||
};
|
||||
interval = setInterval(getAnswer, 5000);
|
||||
});
|
||||
// saveAs(zipFileBlob, 'zipfile');
|
||||
saveAs(zipFileBlob, 'zipfile');
|
||||
this.isLoading = false;
|
||||
this.setGifsLoading(false);
|
||||
this.mode = 'myCollection';
|
||||
@ -452,7 +450,7 @@ editor: {type: Object},
|
||||
|
||||
render() {
|
||||
console.log('this.currentCollection', this.currentCollection);
|
||||
console.log(27, 'chat gifs here');
|
||||
console.log(31, 'chat gifs here');
|
||||
return html`
|
||||
<div class="gifs-container">
|
||||
<div class="gif-explorer-container">
|
||||
@ -472,12 +470,31 @@ editor: {type: Object},
|
||||
slot="icon">
|
||||
</vaadin-icon>
|
||||
<div class="title-row">
|
||||
<p class="gif-explorer-title">${translate(
|
||||
'chatpage.cchange80'
|
||||
)}</p>
|
||||
<div
|
||||
style=${((this.currentCollection && (this.mode === 'myCollection' || this.mode === 'subscribedCollection')) || this.mode === 'explore') ? "visibility: visible;" : "visibility: hidden;"}
|
||||
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
|
||||
style=${
|
||||
this.mode === 'newCollection'
|
||||
(this.mode === 'newCollection' || this.mode === 'explore')
|
||||
? 'display: none'
|
||||
: 'display: block'
|
||||
}
|
||||
@ -498,27 +515,25 @@ editor: {type: Object},
|
||||
text=${get('chatpage.cchange81')}>
|
||||
</vaadin-tooltip>
|
||||
</div>
|
||||
<div class="collections-button-row" style=${
|
||||
this.mode === 'newCollection'
|
||||
? 'display: none'
|
||||
: 'display: block'
|
||||
}>
|
||||
<div class="collections-button-innerrow">
|
||||
<div
|
||||
class="collections-button-row"
|
||||
style=${(this.mode === 'newCollection' || this.mode === 'explore')
|
||||
? 'display: none' : 'display: block'}>
|
||||
<div class="collections-button-innerrow">
|
||||
<div
|
||||
id="my-collections-button"
|
||||
id="my-collections-button"
|
||||
class=${[
|
||||
'my-collections-button',
|
||||
this.mode === 'myCollection'
|
||||
? 'collections-button-active'
|
||||
: null,
|
||||
].join(' ')}
|
||||
@click=${() => {
|
||||
@click=${() => {
|
||||
if (this.isLoading) return;
|
||||
if (this.mode === 'myCollection') return;
|
||||
this.mode = 'myCollection';
|
||||
this.currentCollection = null;
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
${translate('chatpage.cchange82')}
|
||||
</div>
|
||||
<div
|
||||
@ -615,29 +630,11 @@ editor: {type: Object},
|
||||
}
|
||||
${this.currentCollection && this.mode === 'myCollection'
|
||||
? 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'>
|
||||
${this.currentCollection.gifUrls.map((gif) => {
|
||||
console.log({gif});
|
||||
return html`
|
||||
<image-component
|
||||
style='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;'
|
||||
.class=${'gif-image'}
|
||||
.url=${gif}
|
||||
.alt=${'gif-image'}>
|
||||
</image-component>
|
||||
@ -650,26 +647,14 @@ editor: {type: Object},
|
||||
${this.currentCollection &&
|
||||
this.mode === 'subscribedCollection'
|
||||
? 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'>
|
||||
${this.currentCollection.gifUrls.map((gif) => {
|
||||
return html`
|
||||
<img
|
||||
class='collection-gif'
|
||||
onerror=${(e) => {
|
||||
e.target.src = gif;
|
||||
}}
|
||||
src=${gif}
|
||||
/>
|
||||
<image-component
|
||||
.class=${'gif-image'}
|
||||
.url=${gif}
|
||||
.alt=${'gif-image'}>
|
||||
</image-component>
|
||||
`;
|
||||
})}
|
||||
</div>
|
||||
@ -678,13 +663,6 @@ editor: {type: Object},
|
||||
}
|
||||
${this.currentCollection && this.mode === 'explore'
|
||||
? html`
|
||||
<button
|
||||
@click=${() => {
|
||||
this.currentCollection = null;
|
||||
}}
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<button
|
||||
@click=${() => {
|
||||
this.addCollectionToList(
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
`
|
||||
@ -1,92 +1,98 @@
|
||||
import {LitElement, html, css} from 'lit';
|
||||
import {render} from 'lit/html.js';
|
||||
import {Epml} from '../../../../epml.js';
|
||||
import * as zip from '@zip.js/zip.js';
|
||||
import {saveAs} from 'file-saver';
|
||||
import { LitElement, html, css } from 'lit';
|
||||
import { Epml } from '../../../../epml.js';
|
||||
import { chatGifsExploreStyles } from './ChatGifsExplore-css.js';
|
||||
import { translate, get } from 'lit-translate';
|
||||
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 {
|
||||
static get properties() {
|
||||
return {
|
||||
currentCollection: {type: String},
|
||||
getMoreExploreGifs: {attribute: false},
|
||||
exploreCollections: {type: Array},
|
||||
setCurrentCollection: {attribute: false},
|
||||
};
|
||||
}
|
||||
static get properties() {
|
||||
return {
|
||||
currentCollection: { type: String },
|
||||
searchCollectionName: {type: String},
|
||||
getMoreExploreGifs: { attribute: false },
|
||||
exploreCollections: { type: Array },
|
||||
setCurrentCollection: { attribute: false },
|
||||
};
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return css``;
|
||||
}
|
||||
static styles = [chatGifsExploreStyles];
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.downObserverElement = '';
|
||||
this.viewElement = '';
|
||||
this.exploreCollections = [];
|
||||
}
|
||||
constructor() {
|
||||
super();
|
||||
this.searchCollectionName = '';
|
||||
this.downObserverElement = '';
|
||||
this.viewElement = '';
|
||||
this.exploreCollections = [];
|
||||
}
|
||||
|
||||
elementObserver() {
|
||||
const options = {
|
||||
root: this.viewElement,
|
||||
rootMargin: '0px',
|
||||
threshold: 1,
|
||||
};
|
||||
// identify an element to observe
|
||||
const elementToObserve = this.downObserverElement;
|
||||
// passing it a callback function
|
||||
const observer = new IntersectionObserver(
|
||||
this.observerHandler,
|
||||
options
|
||||
);
|
||||
// call `observe()` on that MutationObserver instance,
|
||||
// passing it the element to observe, and the options object
|
||||
observer.observe(elementToObserve);
|
||||
}
|
||||
elementObserver() {
|
||||
const options = {
|
||||
root: this.viewElement,
|
||||
rootMargin: '0px',
|
||||
threshold: 1,
|
||||
};
|
||||
// identify an element to observe
|
||||
const elementToObserve = this.downObserverElement;
|
||||
// passing it a callback function
|
||||
const observer = new IntersectionObserver(
|
||||
this.observerHandler,
|
||||
options
|
||||
);
|
||||
// call `observe()` on that MutationObserver instance,
|
||||
// passing it the element to observe, and the options object
|
||||
observer.observe(elementToObserve);
|
||||
}
|
||||
|
||||
observerHandler(entries) {
|
||||
if (!entries[0].isIntersecting) {
|
||||
return;
|
||||
} else {
|
||||
if (this.exploreCollections.length < 20) {
|
||||
return;
|
||||
}
|
||||
observerHandler(entries) {
|
||||
if (!entries[0].isIntersecting) {
|
||||
return;
|
||||
} else {
|
||||
if (this.exploreCollections.length < 20) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.getMoreExploreGifs();
|
||||
}
|
||||
}
|
||||
this.getMoreExploreGifs();
|
||||
}
|
||||
}
|
||||
|
||||
async firstUpdated() {
|
||||
this.viewElement = this.shadowRoot.getElementById('viewElement');
|
||||
this.downObserverElement =
|
||||
this.shadowRoot.getElementById('downObserver');
|
||||
this.elementObserver();
|
||||
}
|
||||
async firstUpdated() {
|
||||
this.viewElement = this.shadowRoot.getElementById('viewElement');
|
||||
this.downObserverElement =
|
||||
this.shadowRoot.getElementById('downObserver');
|
||||
this.elementObserver();
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<div id="viewElement" class="container-body">
|
||||
${this.exploreCollections.map((collection) => {
|
||||
return html`
|
||||
<div>
|
||||
<p
|
||||
@click=${() => {
|
||||
this.setCurrentCollection(collection);
|
||||
}}
|
||||
>
|
||||
${collection.identifier}
|
||||
</p>
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
<div id="downObserver"></div>
|
||||
render() {
|
||||
console.log(6, "chat-gifs-explore-here");
|
||||
return html`
|
||||
<div id="viewElement" class="container-body">
|
||||
<input
|
||||
class="search-collection-name"
|
||||
placeholder=${get("chatpage.cchange88")}
|
||||
.value=${this.searchCollectionName}
|
||||
@change=${(e) => {
|
||||
this.searchCollectionName =
|
||||
e.target.value;
|
||||
}}
|
||||
/>
|
||||
<div class='collection-wrapper'>
|
||||
${this.exploreCollections.map((collection) => {
|
||||
return html`
|
||||
<div class='collection-card' @click=${() => {
|
||||
this.setCurrentCollection(collection);
|
||||
}}>
|
||||
${collection.identifier}
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
<div id="downObserver"></div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
window.customElements.define('chat-gifs-explore', ChatGifsExplore);
|
||||
|
||||
@ -6,9 +6,9 @@ export class ImageComponent extends LitElement {
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
class: { type: String },
|
||||
url: { type: String },
|
||||
alt: { type: String },
|
||||
style: { type: String },
|
||||
attempts: { type: Number },
|
||||
maxAttempts: { type: Number },
|
||||
error: { type: Boolean }
|
||||
@ -26,12 +26,27 @@ color: var(--chat-bubble-msg-color);
|
||||
font-weight: 300;
|
||||
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() {
|
||||
super();
|
||||
this.src = '';
|
||||
this.attempts = 0;
|
||||
this.maxAttempts = 5;
|
||||
}
|
||||
@ -41,14 +56,18 @@ async _fetchImage() {
|
||||
if (this.attempts > this.maxAttempts) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(`http://your-backend-api/image-src`);
|
||||
const response = await fetch(this.url);
|
||||
const data = await response.json();
|
||||
console.log({data});
|
||||
if (data.ok) {
|
||||
this.error = false;
|
||||
} else {
|
||||
this.url = data.src;
|
||||
this.requestUpdate();
|
||||
} else if (!data.ok || data.error) {
|
||||
this.error = true;
|
||||
} else {
|
||||
this.error = false;
|
||||
}
|
||||
this.src = data.src;
|
||||
} catch (error) {
|
||||
this.error = true;
|
||||
console.error(error);
|
||||
@ -57,12 +76,18 @@ async _fetchImage() {
|
||||
}
|
||||
|
||||
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`
|
||||
${this.url && !this.error
|
||||
? html`
|
||||
<img
|
||||
.style=${this.style}
|
||||
class=${this.class}
|
||||
src=${this.url}
|
||||
alt=${this.alt}
|
||||
@error=${this._fetchImage}
|
||||
|
||||
@ -126,8 +126,6 @@ export const publishData = async ({
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
console.log({postBody})
|
||||
|
||||
let uploadDataUrl = `/arbitrary/${service}/${registeredName}${urlSuffix}?apiKey=${getApiKey()}`
|
||||
if (identifier != null && identifier.trim().length > 0) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user