Qortal/qortal-ui
1
0
Fork 0
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-03-30 09:15:54 +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

98
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,18 +241,29 @@ 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 icon = ''
let count = 0 let count = 0
if (tab.myPlugObj && tab.myPlugObj.title) { if (tab.myPlugObj && tab.myPlugObj.title) {
title = tab.myPlugObj.title title = tab.myPlugObj.title
} else {
title = 'New Tab'
} }
if (tab.myPlugObj && tab.myPlugObj.mwcicon) {
icon = tab.myPlugObj.mwcicon
} else {
icon = 'tab'
}
if (tab.myPlugObj && (tab.myPlugObj.url === 'websites' || tab.myPlugObj.url === 'qapps') && this.tabInfo[tab.id]) { if (tab.myPlugObj && (tab.myPlugObj.url === 'websites' || tab.myPlugObj.url === 'qapps') && this.tabInfo[tab.id]) {
title = this.tabInfo[tab.id].name title = this.tabInfo[tab.id].name
} }
if (tab.myPlugObj && (tab.myPlugObj.url === 'websites' || tab.myPlugObj.url === 'qapps') && this.tabInfo[tab.id]) { if (tab.myPlugObj && (tab.myPlugObj.url === 'websites' || tab.myPlugObj.url === 'qapps') && this.tabInfo[tab.id]) {
count = this.tabInfo[tab.id].count count = this.tabInfo[tab.id].count
} }
@ -241,15 +280,14 @@ class ShowPlugin extends connect(store)(LitElement) {
} else { } else {
id = chat.address id = chat.address
} }
return ch.key.includes(id) return ch.key.includes(id)
}) })
if (lastReadMessage && lastReadMessage.timestamp < chat.timestamp) { if (lastReadMessage && lastReadMessage.timestamp < chat.timestamp) {
count = count + 1 count = count + 1
} }
} }
} }
return html` return html`
<div <div
class="tab ${this.currentTab === index ? 'active' : ''}" class="tab ${this.currentTab === index ? 'active' : ''}"
@ -257,25 +295,29 @@ class ShowPlugin extends connect(store)(LitElement) {
> >
<div class="title"> <div class="title">
<div class="${this.currentTab === index ? "iconActive" : "iconInactive"}"> <div class="${this.currentTab === index ? "iconActive" : "iconInactive"}">
<mwc-icon>${tab.myPlugObj && tab.myPlugObj.mwcicon}</mwc-icon> <mwc-icon>${icon}</mwc-icon>
</div> </div>
${count ? html`
<div class="count">${count}</div>
` : ''}
<div> <div class="title">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ${count ? html`
<div class="ml-25">
${title} ${title}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="count ml-5">${count}</span>
</div>
` : html`
<div class="ml-25">
${title}
</div>
`}
</div> </div>
<div class="close" @click=${() => { this.removeTab(index) }}>x</div> <div class="close" @click=${() => { this.removeTab(index) }}>x</div>
</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({
@ -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>