forked from Qortal/qortal-ui
Fixed metadata issue + continued styling
This commit is contained in:
Justin Ferrari
parent
9c1c3f2bdd
commit
013b97ca51
@ -579,7 +579,11 @@
|
||||
"cchange83": "Subscribed Collections",
|
||||
"cchange84": "Upload your gif files",
|
||||
"cchange85": "File should be .Gif",
|
||||
"cchange86": "Upload Collection"
|
||||
"cchange86": "Upload Collection",
|
||||
"cchange87": "A collection name is required!",
|
||||
"cchange88": "Collection Name",
|
||||
"cchange89": "Gif Collection Uploaded Successfully!",
|
||||
"cchange90": "Gifs uploading, please wait..."
|
||||
},
|
||||
"welcomepage": {
|
||||
"wcchange1": "Welcome to Q-Chat",
|
||||
|
||||
@ -191,31 +191,15 @@ color: var(--mdc-theme-primary);
|
||||
}
|
||||
|
||||
.gifs-added-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-end;
|
||||
flex: 1 1 0%;
|
||||
margin-top: 10px;
|
||||
overflow-y: auto;
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
.gifs-added-col::-webkit-scrollbar-track {
|
||||
background-color: whitesmoke;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.gifs-added-col::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
border-radius: 7px;
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
|
||||
.gifs-added-col::-webkit-scrollbar-thumb {
|
||||
background-color: rgb(180, 176, 176);
|
||||
border-radius: 7px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.gifs-added-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -227,6 +211,23 @@ overflow-y: auto;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.gifs-added-row::-webkit-scrollbar-track {
|
||||
background-color: whitesmoke;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.gifs-added-row::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
border-radius: 7px;
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
|
||||
.gifs-added-row::-webkit-scrollbar-thumb {
|
||||
background-color: rgb(180, 176, 176);
|
||||
border-radius: 7px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.gif-input {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -267,6 +268,72 @@ width: 100%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.upload-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);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.upload-collection-name::placeholder {
|
||||
font-size: 16px;
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-weight: 600;
|
||||
opacity: 0.6;
|
||||
color: var(--chat-bubble-msg-color);
|
||||
}
|
||||
|
||||
.collection-back-button {
|
||||
display: flex;
|
||||
font-family: Roboto, sans-serif;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.3px;
|
||||
font-size: 16px;
|
||||
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);
|
||||
border-radius: 10px;
|
||||
box-shadow: rgb(0 0 0 / 15%) 1.95px 1.95px 2.6px;
|
||||
padding: 8px 15px;
|
||||
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;
|
||||
}
|
||||
|
||||
.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: box-shadow 0.2s ease-in-out;
|
||||
box-shadow: none;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.upload-button {
|
||||
font-family: Roboto, sans-serif;
|
||||
font-size: 16px;
|
||||
@ -299,4 +366,45 @@ cursor: pointer;
|
||||
background-color: #03a8f475;
|
||||
}
|
||||
|
||||
.lds-circle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 70px;
|
||||
}
|
||||
|
||||
.lds-circle > div {
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--mdc-theme-primary);
|
||||
animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
|
||||
}
|
||||
|
||||
@keyframes lds-circle {
|
||||
0%, 100% {
|
||||
animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
|
||||
}
|
||||
0% {
|
||||
transform: rotateY(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotateY(1800deg);
|
||||
animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
|
||||
}
|
||||
100% {
|
||||
transform: rotateY(3600deg);
|
||||
}
|
||||
}
|
||||
|
||||
.gifs-loading-message {
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-size: 20px;
|
||||
color: var(--chat-bubble-msg-color);
|
||||
margin: 0 0 10px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
`;
|
||||
|
||||
@ -66,6 +66,8 @@ editor: {type: Object},
|
||||
url: `/arbitrary/metadata/GIF_REPOSITORY/${this.myAccountName}/${collection.identifier}`,
|
||||
});
|
||||
|
||||
console.log({metaData});
|
||||
|
||||
collectionObj = {
|
||||
...collection,
|
||||
gifUrls: [],
|
||||
@ -164,11 +166,11 @@ editor: {type: Object},
|
||||
const userName = await this.getName(this.selectedAddress.address);
|
||||
this.myAccountName = userName;
|
||||
if (this.myAccountName) {
|
||||
const getMyGifColloctions = await parentEpml.request('apiCall', {
|
||||
const getMyGifCollections = await parentEpml.request('apiCall', {
|
||||
url: `/arbitrary/resources?service=GIF_REPOSITORY&limit=0&name=${this.myAccountName}`,
|
||||
});
|
||||
const gifCollectionWithMetaData = await this.structureCollections(
|
||||
getMyGifColloctions
|
||||
getMyGifCollections
|
||||
);
|
||||
|
||||
console.log({gifCollectionWithMetaData});
|
||||
@ -313,22 +315,21 @@ editor: {type: Object},
|
||||
|
||||
async uploadGifCollection() {
|
||||
if (!this.newCollectionName) {
|
||||
parentEpml.request('showSnackBar', get('chatpage.cchange27'));
|
||||
parentEpml.request('showSnackBar', get('chatpage.cchange87'));
|
||||
return;
|
||||
}
|
||||
|
||||
// if(!isAlphanumeric(this.newCollectionName)){
|
||||
// parentEpml.request('showSnackBar', get("chatpage.cchange27"));
|
||||
// return
|
||||
// }
|
||||
try {
|
||||
this.setGifsLoading(true);
|
||||
this.isLoading = true;
|
||||
const userName = await this.getName(this.selectedAddress.address);
|
||||
const doesNameExist = await parentEpml.request('apiCall', {
|
||||
url: `/arbitrary/resources?service=GIF_REPOSITORY&limit=0&name=${userName}&identifier=${this.newCollectionName}`,
|
||||
});
|
||||
|
||||
if (doesNameExist.length !== 0) {
|
||||
parentEpml.request('showSnackBar', get('chatpage.cchange27'));
|
||||
parentEpml.request('showSnackBar', get('chatpage.cchange87'));
|
||||
this.isLoading = false;
|
||||
this.setGifsLoading(false);
|
||||
return;
|
||||
}
|
||||
function blobToBase64(blob) {
|
||||
@ -365,6 +366,7 @@ editor: {type: Object},
|
||||
|
||||
if (!userName) {
|
||||
parentEpml.request('showSnackBar', get('chatpage.cchange27'));
|
||||
this.setGifsLoading(false);
|
||||
this.isLoading = false;
|
||||
return;
|
||||
}
|
||||
@ -376,7 +378,7 @@ editor: {type: Object},
|
||||
service: 'GIF_REPOSITORY',
|
||||
identifier: this.newCollectionName,
|
||||
parentEpml,
|
||||
metaData: undefined,
|
||||
metaData: `title=${this.newCollectionName}`,
|
||||
uploadType: 'zip',
|
||||
selectedAddress: this.selectedAddress,
|
||||
worker: this.webWorkerImage,
|
||||
@ -406,7 +408,13 @@ editor: {type: Object},
|
||||
};
|
||||
interval = setInterval(getAnswer, 5000);
|
||||
});
|
||||
saveAs(zipFileBlob, 'zipfile');
|
||||
// saveAs(zipFileBlob, 'zipfile');
|
||||
this.isLoading = false;
|
||||
this.setGifsLoading(false);
|
||||
this.mode = 'myCollection';
|
||||
this.gifsToBeAdded = [];
|
||||
this.newCollectionName = '';
|
||||
parentEpml.request('showSnackBar', get('chatpage.cchange89'));
|
||||
console.log({zipFileBlob});
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
@ -424,7 +432,7 @@ editor: {type: Object},
|
||||
|
||||
render() {
|
||||
console.log('this.currentCollection', this.currentCollection);
|
||||
console.log(12, 'chat gifs here');
|
||||
console.log(13, 'chat gifs here');
|
||||
return html`
|
||||
<div class="gifs-container">
|
||||
<div class="gif-explorer-container">
|
||||
@ -514,19 +522,15 @@ editor: {type: Object},
|
||||
${this.mode === 'myCollection' && !this.currentCollection
|
||||
? html`
|
||||
${this.isLoading === true
|
||||
? html` <p>Loading...</p> `
|
||||
? html`<div class="lds-circle"><div></div></div>`
|
||||
: ''}
|
||||
${this.myGifCollections.map((collection) => {
|
||||
return html`
|
||||
<div>
|
||||
<p
|
||||
@click=${() => {
|
||||
<div @click=${() => {
|
||||
this.currentCollection =
|
||||
collection;
|
||||
}}
|
||||
>
|
||||
}} class='collection-card'>
|
||||
${collection.identifier}
|
||||
</p>
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
@ -577,13 +581,15 @@ editor: {type: Object},
|
||||
}
|
||||
${this.currentCollection && this.mode === 'myCollection'
|
||||
? html`
|
||||
<button
|
||||
<div
|
||||
class='collection-back-button'
|
||||
@click=${() => {
|
||||
this.currentCollection = null;
|
||||
}}
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<vaadin-icon icon='vaadin:arrow-left' slot='icon'></vaadin-icon>
|
||||
${translate('general.back')}
|
||||
</div>
|
||||
${this.currentCollection.gifUrls.map((gif) => {
|
||||
console.log({gif});
|
||||
|
||||
@ -660,9 +666,9 @@ editor: {type: Object},
|
||||
`
|
||||
: ''
|
||||
}
|
||||
${this.mode === 'newCollection'
|
||||
${this.mode === 'newCollection' && this.isLoading === false
|
||||
? html`
|
||||
<div class="new-collection-row" style=${this.gifsToBeAdded.length === 0 ? "flex: 0;" : "flex: 1"}>
|
||||
<div class="new-collection-row" style=${this.gifsToBeAdded.length === 0 ? "" : "flex: 1;"}>
|
||||
<div class="new-collection-subrow">
|
||||
<p class="new-collection-title">
|
||||
${translate('chatpage.cchange84')}
|
||||
@ -711,7 +717,9 @@ editor: {type: Object},
|
||||
</div>
|
||||
|
||||
<input
|
||||
class="upload-collection-name"
|
||||
style=${this.gifsToBeAdded.length === 0 ? "display: none;" : "display: block;"}
|
||||
placeholder=${get("chatpage.cchange88")}
|
||||
.value=${this.newCollectionName}
|
||||
@change=${(e) => {
|
||||
this.newCollectionName =
|
||||
@ -720,11 +728,10 @@ editor: {type: Object},
|
||||
/>
|
||||
<div
|
||||
class="gifs-added-col"
|
||||
style=${this.gifsToBeAdded.length === 0 ? "display: none;" : "display: flex;"}
|
||||
|
||||
>
|
||||
<div class="gifs-added-row">
|
||||
${this.gifsToBeAdded.map((gif, i) => {
|
||||
console.log({gif});
|
||||
return html`
|
||||
<div class="gif-input">
|
||||
<img
|
||||
@ -759,6 +766,7 @@ editor: {type: Object},
|
||||
${translate('general.back')}
|
||||
</button>
|
||||
<button
|
||||
style=${this.gifsToBeAdded.length === 0 ? "display: none;" : "display: block;"}
|
||||
class="upload-button"
|
||||
@click=${() => {
|
||||
this.uploadGifCollection();
|
||||
@ -770,6 +778,14 @@ editor: {type: Object},
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
: this.mode === 'newCollection' && this.isLoading === true ? (
|
||||
html`
|
||||
<div>
|
||||
<p class='gifs-loading-message'>${translate("chatpage.cchange90")}</p>
|
||||
<div class="lds-circle"><div></div></div>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
: ''
|
||||
}
|
||||
</div>
|
||||
|
||||
@ -102,7 +102,8 @@ class ChatPage extends LitElement {
|
||||
selectedHead: { type: Object },
|
||||
userName: { type: String },
|
||||
goToRepliedMessage: { attribute: false },
|
||||
openGifModal: {type: Boolean}
|
||||
openGifModal: { type: Boolean },
|
||||
gifsLoading: { type: Boolean },
|
||||
}
|
||||
}
|
||||
|
||||
@ -862,6 +863,7 @@ class ChatPage extends LitElement {
|
||||
this.setOpenUserInfo = this.setOpenUserInfo.bind(this)
|
||||
this.setUserName = this.setUserName.bind(this)
|
||||
this.setSelectedHead = this.setSelectedHead.bind(this)
|
||||
this.setGifsLoading = this.setGifsLoading.bind(this)
|
||||
this.selectedAddress = {}
|
||||
this.userName = ""
|
||||
this.chatId = ''
|
||||
@ -962,6 +964,10 @@ class ChatPage extends LitElement {
|
||||
console.log('this.gifsToBeAdded', this.gifsToBeAdded)
|
||||
}
|
||||
|
||||
setGifsLoading(props) {
|
||||
this.gifsLoading = props;
|
||||
}
|
||||
|
||||
async uploadGifCollection(){
|
||||
try {
|
||||
function blobToBase64(blob) {
|
||||
@ -1055,6 +1061,7 @@ console.log({zipFileBlob})
|
||||
<div
|
||||
class="gifs-backdrop"
|
||||
@click=${() => {
|
||||
if (this.gifsLoading) return;
|
||||
this.setOpenGifModal(false);
|
||||
this.editor.commands.focus("end");
|
||||
this.shadowRoot.querySelector("chat-gifs").clearGifSelections();
|
||||
@ -1067,7 +1074,8 @@ console.log({zipFileBlob})
|
||||
<chat-gifs
|
||||
class="chat-gifs"
|
||||
style=${this.openGifModal ? "display: flex;" : "display: none;"}
|
||||
.webWorkerImage=${this.webWorkerImage}>
|
||||
.webWorkerImage=${this.webWorkerImage}
|
||||
.setGifsLoading=${(val) => this.setGifsLoading(val)}>
|
||||
</chat-gifs>
|
||||
<div
|
||||
class='last-message-ref'
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user