mirror of
https://github.com/Qortal/qortal-ui.git
synced 2025-02-11 17:55:51 +00:00
final fixes
This commit is contained in:
parent
435f6b1905
commit
ba3b61f792
@ -1193,6 +1193,7 @@
|
||||
"friend13": "Feed",
|
||||
"friend14": "Remove friend",
|
||||
"friend15": "Feed settings",
|
||||
"friend16": "Select the Q-Apps you want updates from, especially those related to your friends."
|
||||
"friend16": "Select the Q-Apps you want updates from, especially those related to your friends.",
|
||||
"friends17": "Friends"
|
||||
}
|
||||
}
|
||||
@ -560,7 +560,7 @@ class AppView extends connect(store)(LitElement) {
|
||||
</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:20px">
|
||||
<save-settings-qdn></save-settings-qdn>
|
||||
<!-- <save-settings-qdn></save-settings-qdn> -->
|
||||
<friends-side-panel-parent></friends-side-panel-parent>
|
||||
<notification-bell></notification-bell>
|
||||
<notification-bell-general></notification-bell-general>
|
||||
|
||||
@ -12,6 +12,7 @@ import '@material/mwc-dialog';
|
||||
import '@material/mwc-checkbox';
|
||||
import { connect } from 'pwa-helpers';
|
||||
import { store } from '../../store';
|
||||
import '@polymer/paper-spinner/paper-spinner-lite.js'
|
||||
|
||||
class AddFriendsModal extends connect(store)(LitElement) {
|
||||
static get properties() {
|
||||
@ -27,7 +28,8 @@ class AddFriendsModal extends connect(store)(LitElement) {
|
||||
editContent: { type: Object },
|
||||
onClose: { attribute: false },
|
||||
mySelectedFeeds: { type: Array },
|
||||
availableFeeedSchemas: {type: Array}
|
||||
availableFeeedSchemas: {type: Array},
|
||||
isLoadingSchemas: {type: Boolean}
|
||||
};
|
||||
}
|
||||
|
||||
@ -41,7 +43,8 @@ class AddFriendsModal extends connect(store)(LitElement) {
|
||||
this.nodeUrl = this.getNodeUrl();
|
||||
this.myNode = this.getMyNode();
|
||||
this.mySelectedFeeds = [];
|
||||
this.availableFeeedSchemas = []
|
||||
this.availableFeeedSchemas = [];
|
||||
this.isLoadingSchemas= false;
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
@ -53,6 +56,7 @@ class AddFriendsModal extends connect(store)(LitElement) {
|
||||
--mdc-dialog-content-ink-color: var(--black);
|
||||
--mdc-dialog-min-width: 400px;
|
||||
--mdc-dialog-max-width: 1024px;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
.input {
|
||||
width: 90%;
|
||||
@ -145,9 +149,11 @@ class AddFriendsModal extends connect(store)(LitElement) {
|
||||
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px;
|
||||
z-index: 1001;
|
||||
border-radius: 5px;
|
||||
max-height: 80vh;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction:column;
|
||||
}
|
||||
|
||||
|
||||
.modal-overlay.hidden {
|
||||
display: none;
|
||||
}
|
||||
@ -155,7 +161,7 @@ class AddFriendsModal extends connect(store)(LitElement) {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.app-name {
|
||||
@ -168,6 +174,30 @@ class AddFriendsModal extends connect(store)(LitElement) {
|
||||
border-radius: 5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.inner-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 75vh;
|
||||
flex-grow: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.inner-content::-webkit-scrollbar-track {
|
||||
background-color: whitesmoke;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.inner-content::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
border-radius: 7px;
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
|
||||
.inner-content::-webkit-scrollbar-thumb {
|
||||
background-color: rgb(180, 176, 176);
|
||||
border-radius: 7px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
@ -250,10 +280,10 @@ class AddFriendsModal extends connect(store)(LitElement) {
|
||||
|
||||
async getAvailableFeedSchemas() {
|
||||
try {
|
||||
this.isLoadingSchemas= true
|
||||
const url = `${this.nodeUrl}/arbitrary/resources/search?service=DOCUMENT&identifier=ui_schema_feed&prefix=true`;
|
||||
const res = await fetch(url);
|
||||
const data = await res.json();
|
||||
|
||||
if (data.error === 401) {
|
||||
this.availableFeeedSchemas = [];
|
||||
} else {
|
||||
@ -264,13 +294,17 @@ class AddFriendsModal extends connect(store)(LitElement) {
|
||||
this.availableFeeedSchemas = result;
|
||||
}
|
||||
this.userFoundModalOpen = true;
|
||||
} catch (error) {}
|
||||
} catch (error) {} finally {
|
||||
this.isLoadingSchemas= false
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<div class="modal-overlay ${this.isOpen ? '' : 'hidden'}">
|
||||
|
||||
<div class="modal-content">
|
||||
<div class="inner-content">
|
||||
<div style="text-align:center">
|
||||
<h1>
|
||||
${this.editContent
|
||||
@ -297,7 +331,7 @@ class AddFriendsModal extends connect(store)(LitElement) {
|
||||
?checked=${this.willFollow}
|
||||
></mwc-checkbox>
|
||||
</div>
|
||||
<div style="height: 15px"></div>
|
||||
<div style="height:15px"></div>
|
||||
<div style="display: flex;flex-direction: column;">
|
||||
<label
|
||||
for="name"
|
||||
@ -315,7 +349,7 @@ class AddFriendsModal extends connect(store)(LitElement) {
|
||||
: ''}
|
||||
/>
|
||||
</div>
|
||||
<div style="height: 15px"></div>
|
||||
<div style="height:15px"></div>
|
||||
<div style="display: flex;flex-direction: column;">
|
||||
<label
|
||||
for="alias"
|
||||
@ -332,7 +366,7 @@ class AddFriendsModal extends connect(store)(LitElement) {
|
||||
@change=${(e) => (this.alias = e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div style="height: 15px"></div>
|
||||
<div style="height:15px"></div>
|
||||
<div style="margin-bottom:0;">
|
||||
<textarea
|
||||
class="input"
|
||||
@ -344,12 +378,17 @@ class AddFriendsModal extends connect(store)(LitElement) {
|
||||
rows="3"
|
||||
></textarea>
|
||||
</div>
|
||||
<div style="height: 15px"></div>
|
||||
<div style="height:15px"></div>
|
||||
<h2>${translate('friends.friend15')}</h2>
|
||||
<div style="margin-bottom:0;">
|
||||
<p>${translate('friends.friend16')}</p>
|
||||
</div>
|
||||
<div>
|
||||
${this.isLoadingSchemas ? html`
|
||||
<div style="width:100%;display: flex; justify-content:center">
|
||||
<paper-spinner-lite active></paper-spinner-lite>
|
||||
</div>
|
||||
` : ''}
|
||||
${this.availableFeeedSchemas.map((schema) => {
|
||||
const isAlreadySelected = this.mySelectedFeeds.find(
|
||||
(item) => item.name === schema.name
|
||||
@ -401,6 +440,7 @@ class AddFriendsModal extends connect(store)(LitElement) {
|
||||
`;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="display:flex;justify-content:space-between;align-items:center;margin-top:20px"
|
||||
>
|
||||
|
||||
@ -84,11 +84,24 @@ export class FeedItem extends connect(store)(LitElement) {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
}
|
||||
.avatar {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius:50%;
|
||||
overflow: hidden;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
}
|
||||
.avatarApp {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius:50%;
|
||||
overflow: hidden;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
}
|
||||
.feed-item-name {
|
||||
user-select: none;
|
||||
color: #03a9f4;
|
||||
@ -433,14 +446,14 @@ getMyNode(){
|
||||
const avatarUrl = `${this.nodeUrl}/arbitrary/THUMBNAIL/${this.resource.name}/qortal_avatar?async=true&apiKey=${this.myNode.apiKey}`;
|
||||
avatarImg = html`<img
|
||||
src="${avatarUrl}"
|
||||
style="max-width:100%; max-height:100%;"
|
||||
style="width:100%; height:100%;"
|
||||
onerror="this.onerror=null; this.src='/img/incognito.png';"
|
||||
/>`;
|
||||
let avatarImgApp
|
||||
const avatarUrl2 = `${this.nodeUrl}/arbitrary/THUMBNAIL/${this.appName}/qortal_avatar?async=true&apiKey=${this.myNode.apiKey}`;
|
||||
avatarImgApp = html`<img
|
||||
src="${avatarUrl2}"
|
||||
style="max-width:100%; max-height:100%;"
|
||||
style="width:100%; height:100%;"
|
||||
onerror="this.onerror=null; this.src='/img/incognito.png';"
|
||||
/>`;
|
||||
return html`
|
||||
@ -473,7 +486,7 @@ getMyNode(){
|
||||
}
|
||||
${this.status.status === 'READY' && this.feedItem ? html`
|
||||
<div class="parent-feed-item" style="position:relative" @click=${this.goToFeedLink}>
|
||||
<div style="display:flex;gap:10px;margin-bottom:20px">
|
||||
<div style="display:flex;gap:10px;margin-bottom:5px">
|
||||
<div class="avatar">
|
||||
${avatarImg}</div> <span class="feed-item-name">${this.resource.name}</span>
|
||||
</div>
|
||||
@ -481,7 +494,7 @@ getMyNode(){
|
||||
<p>${this.feedItem.title}</p>
|
||||
</div>
|
||||
<div class="app-name">
|
||||
<div class="avatar">
|
||||
<div class="avatarApp">
|
||||
${avatarImgApp}
|
||||
</div>
|
||||
<message-time
|
||||
|
||||
@ -32,6 +32,8 @@ class FriendsFeed extends connect(store)(LitElement) {
|
||||
this.hasInitialFetch = false
|
||||
this.observerHandler = this.observerHandler.bind(this);
|
||||
this.elementObserver = this.elementObserver.bind(this)
|
||||
this.mySelectedFeeds = []
|
||||
this.getSchemas = this.getSchemas.bind(this)
|
||||
|
||||
}
|
||||
|
||||
@ -60,10 +62,9 @@ class FriendsFeed extends connect(store)(LitElement) {
|
||||
return myNode;
|
||||
}
|
||||
|
||||
async getSchemas(schemas){
|
||||
|
||||
|
||||
|
||||
async getSchemas(){
|
||||
this.mySelectedFeeds = JSON.parse(localStorage.getItem('friends-my-selected-feeds') || "[]")
|
||||
const schemas = this.mySelectedFeeds
|
||||
const getAllSchemas = (schemas || []).map(
|
||||
async (schema) => {
|
||||
try {
|
||||
@ -99,42 +100,49 @@ class FriendsFeed extends connect(store)(LitElement) {
|
||||
|
||||
}
|
||||
|
||||
async getEndpoints(){
|
||||
const dynamicVars = {
|
||||
|
||||
}
|
||||
const schemas = await this.getSchemas()
|
||||
const friendList = JSON.parse(localStorage.getItem('friends-my-friend-list') || "[]")
|
||||
console.log({friendList})
|
||||
const names = friendList.map(friend => `name=${friend.name}`).join('&');
|
||||
if(names.length === 0){
|
||||
this.endpoints= []
|
||||
this.endpointOffsets = Array(this.endpoints.length).fill(0);
|
||||
return
|
||||
}
|
||||
console.log({names})
|
||||
const baseurl = `${this.nodeUrl}/arbitrary/resources/search?reverse=true&exactmatchnames=true&${names}`
|
||||
let formEndpoints = []
|
||||
schemas.forEach((schema)=> {
|
||||
const feedData = schema.feed[0]
|
||||
if(feedData){
|
||||
const copyFeedData = {...feedData}
|
||||
const fullUrl = constructUrl(baseurl, copyFeedData.search, dynamicVars);
|
||||
if(fullUrl){
|
||||
formEndpoints.push({
|
||||
url: fullUrl, schemaName: schema.name, schema: copyFeedData
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
this.endpoints= formEndpoints
|
||||
this.endpointOffsets = Array(this.endpoints.length).fill(0);
|
||||
}
|
||||
|
||||
async firstUpdated(){
|
||||
this.viewElement = this.shadowRoot.getElementById('viewElement');
|
||||
this.downObserverElement =
|
||||
this.shadowRoot.getElementById('downObserver');
|
||||
this.elementObserver();
|
||||
let schemaObj = {...schema}
|
||||
const dynamicVars = {
|
||||
|
||||
}
|
||||
const getEndpoints = async () => {
|
||||
const schemas = await this.getSchemas(schemaList)
|
||||
const friendList = JSON.parse(localStorage.getItem('friends-my-friend-list') || "[]")
|
||||
console.log({friendList})
|
||||
const names = friendList.map(friend => `name=${friend.name}`).join('&');
|
||||
console.log({names})
|
||||
const baseurl = `${this.nodeUrl}/arbitrary/resources/search?reverse=true&exactmatchnames=true&${names}`
|
||||
let formEndpoints = []
|
||||
schemas.forEach((schema)=> {
|
||||
const feedData = schema.feed[0]
|
||||
if(feedData){
|
||||
const copyFeedData = {...feedData}
|
||||
const fullUrl = constructUrl(baseurl, copyFeedData.search, dynamicVars);
|
||||
if(fullUrl){
|
||||
formEndpoints.push({
|
||||
url: fullUrl, schemaName: schema.name, schema: copyFeedData
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
this.endpoints= formEndpoints
|
||||
this.endpointOffsets = Array(this.endpoints.length).fill(0);
|
||||
}
|
||||
|
||||
|
||||
try {
|
||||
await getEndpoints()
|
||||
await this.getEndpoints()
|
||||
|
||||
this.loadAndMergeData();
|
||||
this.getFeedOnInterval()
|
||||
@ -151,6 +159,15 @@ this.getFeedOnInterval()
|
||||
this.requestUpdate()
|
||||
}
|
||||
|
||||
async refresh(){
|
||||
try {
|
||||
await this.getEndpoints()
|
||||
this.reFetchFeedData()
|
||||
} catch (error) {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
elementObserver() {
|
||||
const options = {
|
||||
@ -293,7 +310,7 @@ this.getFeedOnInterval()
|
||||
async reFetchFeedData() {
|
||||
// Resetting offsets to start fresh.
|
||||
this.endpointOffsets = Array(this.endpoints.length).fill(0);
|
||||
|
||||
await this.getEndpoints()
|
||||
const oldIdentifiers = new Set(this.feed.map(item => item.identifier));
|
||||
const newData = await this.initialLoad();
|
||||
|
||||
@ -502,42 +519,4 @@ export function replacePlaceholders(template, resource, customParams) {
|
||||
|
||||
|
||||
|
||||
export const schemaList = [{
|
||||
identifier: 'ui_schema_feed',
|
||||
name: 'Q-Blog',
|
||||
service: 'DOCUMENT'
|
||||
}]
|
||||
export const schema = {
|
||||
name: "Q-Blog",
|
||||
defaultFeedIndex: 0,
|
||||
feed: [
|
||||
{
|
||||
id:"post-creation",
|
||||
version: 1,
|
||||
updated: 1696646223261,
|
||||
title: "Q-Blog Post creations",
|
||||
description: "blablabla",
|
||||
search: {
|
||||
query: "-post-",
|
||||
identifier: "q-blog-",
|
||||
service: "BLOG_POST",
|
||||
exactmatchnames: true
|
||||
},
|
||||
click: "qortal://APP/Q-Blog/$${resource.name}$$/$${customParams.blogId}$$/$${customParams.shortIdentifier}$$",
|
||||
display: {
|
||||
title: "$${rawdata.title}$$"
|
||||
},
|
||||
customParams: {
|
||||
blogId: "**methods.getBlogId(resource)**",
|
||||
shortIdentifier: "**methods.getShortId(resource)**"
|
||||
},
|
||||
"methods": {
|
||||
"getShortId": "return resource.identifier.split('-post-')[1];",
|
||||
"getBlogId": "const arr = resource.identifier.split('-post-'); const id = arr[0]; return id.startsWith('q-blog-') ? id.substring(7) : id;"
|
||||
}
|
||||
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
export const listSchemas = [schema]
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
import { LitElement, html, css } from 'lit';
|
||||
import '@material/mwc-icon';
|
||||
import './friends-side-panel.js';
|
||||
import '@vaadin/tooltip';
|
||||
import { get } from 'lit-translate';
|
||||
|
||||
|
||||
class FriendsSidePanelParent extends LitElement {
|
||||
static get properties() {
|
||||
return {
|
||||
@ -49,7 +53,7 @@ class FriendsSidePanelParent extends LitElement {
|
||||
}
|
||||
render() {
|
||||
return html`
|
||||
<mwc-icon @click=${()=> {
|
||||
<mwc-icon id="friends-icon" @click=${()=> {
|
||||
this.isOpen = !this.isOpen
|
||||
if(this.isOpen && this.hasNewFeed){
|
||||
localStorage.setItem('lastSeenFeed', Date.now());
|
||||
@ -59,6 +63,13 @@ class FriendsSidePanelParent extends LitElement {
|
||||
}} style="color: ${this.hasNewFeed ? 'green' : 'var(--black)'}; cursor:pointer;user-select:none"
|
||||
>group</mwc-icon
|
||||
>
|
||||
<vaadin-tooltip
|
||||
for="friends-icon"
|
||||
position="bottom"
|
||||
hover-delay=${200}
|
||||
hide-delay=${1}
|
||||
text=${get('friends.friends17')}>
|
||||
</vaadin-tooltip>
|
||||
<friends-side-panel .setHasNewFeed=${(val)=> this.setHasNewFeed(val)} ?isOpen=${this.isOpen} .setIsOpen=${(val)=> this.isOpen = val}></friends-side-panel>
|
||||
|
||||
`;
|
||||
|
||||
@ -99,6 +99,13 @@ class FriendsSidePanel extends LitElement {
|
||||
|
||||
`;
|
||||
|
||||
refreshFeed(){
|
||||
|
||||
this.shadowRoot.querySelector('friends-feed').refresh()
|
||||
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<div class="parent">
|
||||
@ -109,7 +116,7 @@ class FriendsSidePanel extends LitElement {
|
||||
</div>
|
||||
<div style="display:flex;gap:15px;align-items:center">
|
||||
<mwc-icon @click=${()=> {
|
||||
this.shadowRoot.querySelector('friends-feed').reFetchFeedData()
|
||||
this.refreshFeed()
|
||||
}} style="color: var(--black); cursor:pointer;">refresh</mwc-icon>
|
||||
<mwc-icon style="cursor:pointer" @click=${()=> {
|
||||
this.setIsOpen(false)
|
||||
@ -119,7 +126,7 @@ class FriendsSidePanel extends LitElement {
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="${this.selected === 'friends' ? 'active-content' : 'default-content'}">
|
||||
<friends-view></friends-view>
|
||||
<friends-view .refreshFeed=${()=>this.refreshFeed()}></friends-view>
|
||||
</div>
|
||||
<div class="${this.selected === 'feed' ? 'active-content' : 'default-content'}">
|
||||
<friends-feed .setHasNewFeed=${(val)=> this.setHasNewFeed(val)}></friends-feed>
|
||||
|
||||
@ -41,7 +41,8 @@ class FriendsView extends connect(store)(LitElement) {
|
||||
userFound: { type: Array},
|
||||
isOpenAddFriendsModal: {type: Boolean},
|
||||
editContent: {type: Object},
|
||||
mySelectedFeeds: {type: Array}
|
||||
mySelectedFeeds: {type: Array},
|
||||
refreshFeed: {attribute: false}
|
||||
};
|
||||
}
|
||||
static get styles() {
|
||||
@ -222,10 +223,14 @@ class FriendsView extends connect(store)(LitElement) {
|
||||
}
|
||||
this.setMySelectedFeeds(val.mySelectedFeeds)
|
||||
this.userSelected = {};
|
||||
this.shadowRoot.getElementById('sendTo').value = ''
|
||||
this.isLoading = false;
|
||||
this.isOpenAddFriendsModal = false
|
||||
this.editContent = null
|
||||
this.setMyFriends(this.friendList)
|
||||
if(!isRemove && this.friendList.length === 1){
|
||||
this.refreshFeed()
|
||||
}
|
||||
}
|
||||
setMyFriends(friendList){
|
||||
localStorage.setItem('friends-my-friend-list', JSON.stringify(friendList));
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user