Qortal/qortal-ui
1
0
Fork 0
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-03-27 15:55:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

rework tabs

Browse Source
This commit is contained in:
AlphaX-Projects 2023-06-13 16:40:35 +02:00
parent 8128d6da00
commit f91c3d69dc
1 changed files with 117 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

192
core/src/components/show-plugin.js
View File

@ -63,9 +63,9 @@ class ShowPlugin extends connect(store)(LitElement) {
} }
.showIframe { .showIframe {
zIndex: 1;
position: relative;
display: block; display: block;
position: relative;
zIndex: 1;
} }
.tabs { .tabs {
@ -96,7 +96,6 @@ class ShowPlugin extends connect(store)(LitElement) {
overflow: hidden; overflow: hidden;
text-wrap: nowrap; text-wrap: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
text-overflow: ellipsis;
} }
.tab:hover { .tab:hover {
@ -136,6 +135,7 @@ class ShowPlugin extends connect(store)(LitElement) {
} }
.add-tab-button { .add-tab-button {
margin-left: 10px;
font-weight: bold; font-weight: bold;
background: none; background: none;
border: none; border: none;
@ -164,17 +164,45 @@ class ShowPlugin extends connect(store)(LitElement) {
} }
.count { .count {
position: absolute; font-weight: bold;
background: red; background-color: red;
color: white; color: white;
padding: 5px;
font-size: 12px; font-size: 12px;
border-radius: 50%; padding: 2px 6px;
height: 10px; text-align: center;
width: 10px; border-radius: 5px;
display: flex; }
justify-content: center;
align-items: center; .ml-5 {
margin-left: 5px;
}
.ml-10 {
margin-left: 10px;
}
.ml-15 {
margin-left: 15px;
}
.ml-20 {
margin-left: 20px;
}
.ml-25 {
margin-left: 25px;
}
.mr-10 {
margin-right: 10px;
}
.mr-15 {
margin-right: 15px;
}
.mr-20 {
margin-right: 20px;
} }
` `
} }
@ -213,77 +241,91 @@ class ShowPlugin extends connect(store)(LitElement) {
return myPlug === undefined ? 'about:blank' : `${window.location.origin}/plugin/${myPlug.domain}/${myPlug.page}${this.linkParam}` return myPlug === undefined ? 'about:blank' : `${window.location.origin}/plugin/${myPlug.domain}/${myPlug.page}${this.linkParam}`
} }
return html` return html`
<div class="tabs"> <div class="tabs">
${this.tabs.map((tab, index) => { ${this.tabs.map((tab, index) => {
let title = '' let title = ''
let count = 0 let icon = ''
if (tab.myPlugObj && tab.myPlugObj.title) { let count = 0
title = tab.myPlugObj.title
}
if (tab.myPlugObj && (tab.myPlugObj.url === 'websites' || tab.myPlugObj.url === 'qapps') && this.tabInfo[tab.id]) {
title = this.tabInfo[tab.id].name
}
if (tab.myPlugObj && (tab.myPlugObj.url === 'websites' || tab.myPlugObj.url === 'qapps') && this.tabInfo[tab.id]) {
count = this.tabInfo[tab.id].count
}
if (tab.myPlugObj && tab.myPlugObj.url === 'q-chat') { if (tab.myPlugObj && tab.myPlugObj.title) {
for (const chat of this.chatHeads) { title = tab.myPlugObj.title
} else {
const lastReadMessage = this.chatLastSeen.find((ch) => { title = 'New Tab'
let id
if (chat.groupId === 0) {
id = chat.groupId
} else if (chat.groupId) {
id = chat.groupId
} else {
id = chat.address
}
return ch.key.includes(id)
})
if (lastReadMessage && lastReadMessage.timestamp < chat.timestamp) {
count = count + 1
} }
}
} if (tab.myPlugObj && tab.myPlugObj.mwcicon) {
return html` icon = tab.myPlugObj.mwcicon
<div } else {
class="tab ${this.currentTab === index ? 'active' : ''}" icon = 'tab'
@click=${() => this.currentTab = index} }
>
<div class="title"> if (tab.myPlugObj && (tab.myPlugObj.url === 'websites' || tab.myPlugObj.url === 'qapps') && this.tabInfo[tab.id]) {
<div class="${this.currentTab === index ? "iconActive" : "iconInactive"}"> title = this.tabInfo[tab.id].name
<mwc-icon>${tab.myPlugObj && tab.myPlugObj.mwcicon}</mwc-icon> }
</div>
${count ? html` if (tab.myPlugObj && (tab.myPlugObj.url === 'websites' || tab.myPlugObj.url === 'qapps') && this.tabInfo[tab.id]) {
<div class="count">${count}</div> count = this.tabInfo[tab.id].count
` : ''} }
if (tab.myPlugObj && tab.myPlugObj.url === 'q-chat') {
for (const chat of this.chatHeads) {
const lastReadMessage = this.chatLastSeen.find((ch) => {
let id
if (chat.groupId === 0) {
id = chat.groupId
} else if (chat.groupId) {
id = chat.groupId
} else {
id = chat.address
}
return ch.key.includes(id)
})
if (lastReadMessage && lastReadMessage.timestamp < chat.timestamp) {
count = count + 1
}
}
}
return html`
<div
class="tab ${this.currentTab === index ? 'active' : ''}"
@click=${() => this.currentTab = index}
>
<div class="title">
<div class="${this.currentTab === index ? "iconActive" : "iconInactive"}">
<mwc-icon>${icon}</mwc-icon>
</div>
<div> <div class="title">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ${count ? html`
${title} <div class="ml-25">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ${title}
<span class="count ml-5">${count}</span>
</div>
` : html`
<div class="ml-25">
${title}
</div>
`}
</div>
<div class="close" @click=${() => { this.removeTab(index) }}>x</div>
</div> </div>
<div class="close" @click=${() => { this.removeTab(index) }}>x</div>
</div> </div>
</div> `
` })}
})}&nbsp;&nbsp;&nbsp;
<button <button
class="add-tab-button" class="add-tab-button"
title="Add Tab" title="Add New Tab"
@click=${() => { @click=${() => {
const lengthOfTabs = this.tabs.length const lengthOfTabs = this.tabs.length
this.addTab({ this.addTab({
url: "", url: "",
id: this.uid() id: this.uid()
}) })
this.currentTab = lengthOfTabs this.currentTab = lengthOfTabs
}} }}
> >
+ +
</button> </button>
@ -292,10 +334,10 @@ class ShowPlugin extends connect(store)(LitElement) {
${repeat(this.tabs, (tab) => tab.id, (tab, index) => html` ${repeat(this.tabs, (tab) => tab.id, (tab, index) => html`
<div class=${this.currentTab === index ? "showIframe" : "hideIframe"}> <div class=${this.currentTab === index ? "showIframe" : "hideIframe"}>
<iframe src="${plugSrc(tab.myPlugObj)}" data-id=${tab.id} id="showPluginFrame${index}" style="width:100%; <iframe src="${plugSrc(tab.myPlugObj)}" data-id=${tab.id} id="showPluginFrame${index}" style="width:100%;
height:calc(var(--window-height) - 102px); height: calc(var(--window-height) - 102px);
border:0; border: 0;
padding:0; padding: 0;
margin:0" margin: 0"
class=${!tab.myPlugObj ? "hideIframe" : ""} class=${!tab.myPlugObj ? "hideIframe" : ""}
> >
</iframe> </iframe>