forked from Qortal/qortal-ui
added color for new feed
This commit is contained in:
parent
fac7ae9004
commit
35b71ea311
@ -44,7 +44,7 @@ import './start-minting.js'
|
||||
import './notification-view/notification-bell.js'
|
||||
import './notification-view/notification-bell-general.js'
|
||||
import './friends-view/friends-side-panel-parent.js'
|
||||
|
||||
import './friends-view/save-settings-qdn.js'
|
||||
|
||||
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
|
||||
|
||||
@ -560,6 +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>
|
||||
<friends-side-panel-parent></friends-side-panel-parent>
|
||||
<notification-bell></notification-bell>
|
||||
<notification-bell-general></notification-bell-general>
|
||||
|
@ -137,7 +137,6 @@ class AddFriendsModal extends LitElement {
|
||||
|
||||
async updated(changedProperties) {
|
||||
if (changedProperties && changedProperties.has('editContent') && this.editContent) {
|
||||
console.log('this.editedContent', this.editContent)
|
||||
this.userSelected = {
|
||||
name: this.editContent.name ?? '',
|
||||
}
|
||||
@ -150,7 +149,6 @@ class AddFriendsModal extends LitElement {
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log('hello2', this.editContent)
|
||||
return html`
|
||||
<div class="modal-overlay ${this.isOpen ? '' : 'hidden'}">
|
||||
<div class="modal-content">
|
||||
|
@ -330,7 +330,6 @@ getMyNode(){
|
||||
|
||||
async goToFeedLink(){
|
||||
try {
|
||||
console.log('this.link', this.link)
|
||||
let newQuery = this.link
|
||||
if (newQuery.endsWith('/')) {
|
||||
newQuery = newQuery.slice(0, -1)
|
||||
@ -423,7 +422,6 @@ getMyNode(){
|
||||
|
||||
|
||||
render() {
|
||||
console.log('this.feedItem', this.feedItem)
|
||||
let avatarImg
|
||||
const avatarUrl = `${this.nodeUrl}/arbitrary/THUMBNAIL/${this.resource.name}/qortal_avatar?async=true&apiKey=${this.myNode.apiKey}`;
|
||||
avatarImg = html`<img
|
||||
|
@ -12,7 +12,8 @@ const maxResultsInMemory = 300;
|
||||
class FriendsFeed extends connect(store)(LitElement) {
|
||||
static get properties() {
|
||||
return {
|
||||
feed: {type: Array}
|
||||
feed: {type: Array},
|
||||
setHasNewFeed: {attribute:false}
|
||||
};
|
||||
}
|
||||
constructor(){
|
||||
@ -88,7 +89,6 @@ this.loadAndMergeData();
|
||||
|
||||
getMoreFeed(){
|
||||
if(!this.hasInitialFetch) return
|
||||
console.log('getting more feed')
|
||||
if(this.feedToRender.length === this.feed.length ) return
|
||||
this.feedToRender = this.feed.slice(0, this.feedToRender.length + 20)
|
||||
this.requestUpdate()
|
||||
@ -101,7 +101,6 @@ this.loadAndMergeData();
|
||||
threshold: 1,
|
||||
};
|
||||
// identify an element to observe
|
||||
console.log('this', this.viewElement, this.downObserverElement)
|
||||
const elementToObserve = this.downObserverElement;
|
||||
// passing it a callback function
|
||||
const observer = new IntersectionObserver(
|
||||
@ -114,11 +113,9 @@ this.loadAndMergeData();
|
||||
}
|
||||
|
||||
observerHandler(entries) {
|
||||
console.log({entries})
|
||||
if (!entries[0].isIntersecting) {
|
||||
return;
|
||||
} else {
|
||||
console.log('this.feedToRender', this.feedToRender)
|
||||
if (this.feedToRender.length < 20) {
|
||||
return;
|
||||
}
|
||||
@ -131,7 +128,6 @@ this.loadAndMergeData();
|
||||
const url = `${this.endpoints[endpointIndex].url}&limit=${count}&offset=${offset}`;
|
||||
const res = await fetch(url)
|
||||
const data = await res.json()
|
||||
console.log({data})
|
||||
return data.map((i)=> {
|
||||
return {
|
||||
...this.endpoints[endpointIndex],
|
||||
@ -248,6 +244,13 @@ this.loadAndMergeData();
|
||||
this.feed = [...allData]
|
||||
this.feedToRender = this.feed.slice(0,20)
|
||||
this.hasInitialFetch = true
|
||||
if(allData.length > 0){
|
||||
const created = allData[0].created
|
||||
let value = localStorage.getItem('lastSeenFeed')
|
||||
if (((+value || 0) < created)) {
|
||||
this.setHasNewFeed(true)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -255,7 +258,6 @@ this.loadAndMergeData();
|
||||
|
||||
|
||||
render() {
|
||||
console.log('ron', this.feed)
|
||||
return html`
|
||||
<div class="container">
|
||||
<div id="viewElement" class="container-body" style=${"position: relative"}>
|
||||
@ -368,10 +370,8 @@ function executeMethodInWorker(methodString, externalArgs) {
|
||||
|
||||
|
||||
export async function updateCustomParamsWithMethods(schema,resource) {
|
||||
console.log({schema, resource})
|
||||
for (const key in schema.customParams) {
|
||||
const value = schema.customParams[key];
|
||||
console.log({value})
|
||||
if (value.startsWith("**methods.") && value.endsWith("**")) {
|
||||
const methodInvocation = value.slice(10, -2).split('(');
|
||||
const methodName = methodInvocation[0];
|
||||
@ -382,9 +382,7 @@ export async function updateCustomParamsWithMethods(schema,resource) {
|
||||
name: resource.name,
|
||||
service: resource.service
|
||||
}
|
||||
console.log({newResource})
|
||||
const methodResult = await executeMethodInWorker(schema.methods[methodName], newResource);
|
||||
console.log({methodResult})
|
||||
schema.customParams[key] = methodResult;
|
||||
}
|
||||
}
|
||||
@ -443,31 +441,8 @@ export function replacePlaceholders(template, resource, customParams) {
|
||||
"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;"
|
||||
}
|
||||
// methods: {
|
||||
// getShortId: function(resource) {
|
||||
// console.log({resource})
|
||||
// const str = resource.identifier
|
||||
// const arr = str.split('-post-')
|
||||
// const shortIdentifier = arr[1]
|
||||
|
||||
// return shortIdentifier
|
||||
// },
|
||||
// getBlogId: function(resource) {
|
||||
// console.log({resource})
|
||||
// const str = resource.identifier
|
||||
// const arr = str.split('-post-')
|
||||
// const id = arr[0]
|
||||
// let blogId = ""
|
||||
// if (id.startsWith('q-blog-')) {
|
||||
// blogId = id.substring(7);
|
||||
// } else {
|
||||
// blogId= id;
|
||||
// }
|
||||
// return blogId
|
||||
// }
|
||||
// }
|
||||
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
// export const schema = JSON.stringify(schema2, null, 2); // 2 spaces indentation
|
||||
|
@ -4,7 +4,8 @@ import './friends-side-panel.js';
|
||||
class FriendsSidePanelParent extends LitElement {
|
||||
static get properties() {
|
||||
return {
|
||||
isOpen: {type: Boolean}
|
||||
isOpen: {type: Boolean},
|
||||
hasNewFeed: {type: Boolean}
|
||||
};
|
||||
}
|
||||
|
||||
@ -12,6 +13,7 @@ class FriendsSidePanelParent extends LitElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.isOpen = false
|
||||
this.hasNewFeed = false
|
||||
}
|
||||
static styles = css`
|
||||
.header {
|
||||
@ -42,14 +44,22 @@ class FriendsSidePanelParent extends LitElement {
|
||||
}
|
||||
`;
|
||||
|
||||
setHasNewFeed(val){
|
||||
this.hasNewFeed = val
|
||||
}
|
||||
render() {
|
||||
return html`
|
||||
<mwc-icon @click=${()=> {
|
||||
this.isOpen = !this.isOpen
|
||||
}} style="color: var(--black); cursor:pointer;user-select:none"
|
||||
if(this.isOpen && this.hasNewFeed){
|
||||
localStorage.setItem('lastSeenFeed', Date.now());
|
||||
this.hasNewFeed = false
|
||||
this.shadowRoot.querySelector("friends-side-panel").selected = 'feed'
|
||||
}
|
||||
}} style="color: ${this.hasNewFeed ? 'green' : 'var(--black)'}; cursor:pointer;user-select:none"
|
||||
>group</mwc-icon
|
||||
>
|
||||
<friends-side-panel ?isOpen=${this.isOpen} .setIsOpen=${(val)=> this.isOpen = val}></friends-side-panel>
|
||||
<friends-side-panel .setHasNewFeed=${(val)=> this.setHasNewFeed(val)} ?isOpen=${this.isOpen} .setIsOpen=${(val)=> this.isOpen = val}></friends-side-panel>
|
||||
|
||||
`;
|
||||
}
|
||||
|
@ -8,7 +8,8 @@ class FriendsSidePanel extends LitElement {
|
||||
return {
|
||||
setIsOpen: { attribute: false},
|
||||
isOpen: {type: Boolean},
|
||||
selected: {type: String}
|
||||
selected: {type: String},
|
||||
setHasNewFeed: {attribute: false}
|
||||
};
|
||||
}
|
||||
|
||||
@ -115,7 +116,7 @@ class FriendsSidePanel extends LitElement {
|
||||
<friends-view></friends-view>
|
||||
</div>
|
||||
<div class="${this.selected === 'feed' ? 'active-content' : 'default-content'}">
|
||||
<friends-feed></friends-feed>
|
||||
<friends-feed .setHasNewFeed=${(val)=> this.setHasNewFeed(val)}></friends-feed>
|
||||
</div>
|
||||
<!-- ${this.selected === 'friends' ? html`<friends-view></friends-view>` : ''}
|
||||
|
||||
|
@ -215,7 +215,6 @@ class FriendsView extends connect(store)(LitElement) {
|
||||
}
|
||||
|
||||
onClose(){
|
||||
console.log('hello100')
|
||||
this.isLoading = false;
|
||||
this.isOpenAddFriendsModal = false
|
||||
this.editContent = null
|
||||
@ -223,7 +222,6 @@ class FriendsView extends connect(store)(LitElement) {
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log('friends', this.userSelected);
|
||||
return html`
|
||||
<div class="container">
|
||||
<div id="viewElement" class="container-body" style=${"position: relative"}>
|
||||
@ -257,7 +255,6 @@ class FriendsView extends connect(store)(LitElement) {
|
||||
this.userSelected = result;
|
||||
this.isOpenAddFriendsModal = true
|
||||
|
||||
console.log({result});
|
||||
this.userFound = [];
|
||||
this.userFoundModalOpen = false;
|
||||
}}
|
||||
|
60
core/src/components/friends-view/save-settings-qdn.js
Normal file
60
core/src/components/friends-view/save-settings-qdn.js
Normal file
@ -0,0 +1,60 @@
|
||||
import { LitElement, html, css } from 'lit';
|
||||
import '@material/mwc-icon';
|
||||
import './friends-side-panel.js';
|
||||
class SaveSettingsQdn extends LitElement {
|
||||
static get properties() {
|
||||
return {
|
||||
isOpen: {type: Boolean}
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.isOpen = false
|
||||
}
|
||||
static styles = css`
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 16px;
|
||||
}
|
||||
.close {
|
||||
visibility: hidden;
|
||||
position: fixed;
|
||||
z-index: -100;
|
||||
right: -1000px;
|
||||
}
|
||||
|
||||
.parent-side-panel {
|
||||
transform: translateX(100%); /* start from outside the right edge */
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
.parent-side-panel.open {
|
||||
transform: translateX(0); /* slide in to its original position */
|
||||
|
||||
}
|
||||
`;
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<mwc-icon @click=${()=> {
|
||||
this.isOpen = !this.isOpen
|
||||
}} style="color: var(--black); cursor:pointer;user-select:none"
|
||||
>save</mwc-icon
|
||||
>
|
||||
|
||||
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
customElements.define('save-settings-qdn', SaveSettingsQdn);
|
@ -221,8 +221,6 @@ class Chat extends LitElement {
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log('chatHeads', this.chatHeads)
|
||||
console.log('chatHeadsObj', this.chatHeadsObj)
|
||||
return html`
|
||||
<div class="container clearfix">
|
||||
<div class="people-list" id="people-list">
|
||||
|
Loading…
x
Reference in New Issue
Block a user