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

Add icons to tabs and Update dependencies

Browse Source
This commit is contained in:
AlphaX-Projects 2023-06-11 16:57:53 +02:00
parent 425b05edd4
commit 349f32f9b5
6 changed files with 570 additions and 490 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

251
core/src/components/notification-view/notification-bell.js
View File

@ -1,55 +1,53 @@
import { LitElement, html, css } from 'lit'; import { LitElement, html, css } from 'lit'
import { connect } from 'pwa-helpers'; import { connect } from 'pwa-helpers'
import '@vaadin/button'; import '@vaadin/item'
import '@vaadin/item'; import '@vaadin/list-box'
import '@vaadin/list-box'; import '@polymer/paper-icon-button/paper-icon-button.js'
import '@vaadin/icon'; import '@polymer/iron-icons/iron-icons.js'
import '@vaadin/icons'; import { store } from '../../store.js'
import { store } from '../../store.js'; import { setNewTab } from '../../redux/app/app-actions.js'
import { setNewTab } from '../../redux/app/app-actions.js'; import { routes } from '../../plugins/routes.js'
import { routes } from '../../plugins/routes.js'; import config from '../../notifications/config.js'
import config from '../../notifications/config.js';
import '../../../../plugins/plugins/core/components/TimeAgo.js' import '../../../../plugins/plugins/core/components/TimeAgo.js'
class NotificationBell extends connect(store)(LitElement) { class NotificationBell extends connect(store)(LitElement) {
static properties = { static properties = {
notifications: { type: Array }, notifications: { type: Array },
showNotifications: { type: Boolean }, showNotifications: { type: Boolean },
}; notificationCount: { type: Boolean },
theme: { type: String, reflect: true },
}
constructor() { constructor() {
super(); super()
this.notifications = []; this.notifications = []
this.showNotifications = false; this.showNotifications = false
this.notificationCount = false
this.initialFetch = false this.initialFetch = false
this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
} }
firstUpdated() { firstUpdated() {
this.getNotifications(); this.getNotifications();
document.addEventListener('click', (event) => { document.addEventListener('click', (event) => {
const path = event.composedPath(); const path = event.composedPath()
if (!path.includes(this)) { if (!path.includes(this)) {
this.showNotifications = false; this.showNotifications = false
} }
}); })
} }
getApiKey() { getApiKey() {
const apiNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]; const apiNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]
let apiKey = apiNode.apiKey; let apiKey = apiNode.apiKey
return apiKey; return apiKey
} }
async getNotifications() { async getNotifications() {
const myNode = const myNode = store.getState().app.nodeConfig.knownNodes[store.getState().app.nodeConfig.node]
store.getState().app.nodeConfig.knownNodes[ const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port
store.getState().app.nodeConfig.node
];
const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port;
let interval = null let interval = null
let stop = false let stop = false
@ -69,18 +67,18 @@ class NotificationBell extends connect(store)(LitElement) {
} }
}) })
const data = await response.json(); const data = await response.json()
return data; return data;
}; }
if (!stop && !this.showNotifications) { if (!stop && !this.showNotifications) {
stop = true; stop = true
try { try {
const address = window.parent.reduxStore.getState().app?.selectedAddress?.address; const address = window.parent.reduxStore.getState().app?.selectedAddress?.address;
const name = window.parent.reduxStore.getState().app?.accountInfo?.names[0]?.name const name = window.parent.reduxStore.getState().app?.accountInfo?.names[0]?.name
if (!name || !address) return if (!name || !address) return
const mailArray = await getMail(name, address); const mailArray = await getMail(name, address)
let notificationsToShow = [] let notificationsToShow = []
if (mailArray.length > 0) { if (mailArray.length > 0) {
const lastVisited = localStorage.getItem("Q-Mail-last-visited") const lastVisited = localStorage.getItem("Q-Mail-last-visited")
@ -110,76 +108,85 @@ class NotificationBell extends connect(store)(LitElement) {
} }
} }
this.notifications = notificationsToShow this.notifications = notificationsToShow
if (this.notifications.length === 0) {
this.notificationCount = false
} else {
this.notificationCount = true
}
if (!this.initialFetch) this.initialFetch = true if (!this.initialFetch) this.initialFetch = true
} catch (error) { } catch (error) {
console.error(error) console.error(error)
} }
stop = false stop = false
} }
}; }
try { try {
setTimeout(() => { setTimeout(() => {
getNewMail() getNewMail()
}, 5000) }, 5000)
interval = setInterval(getNewMail, 30000)
interval = setInterval(getNewMail, 30000);
} catch (error) { } catch (error) {
console.error(error) console.error(error)
} }
} }
render() { render() {
return html` return html`
<div class="layout"> <div class="layout">
<vaadin-button theme="icon" aria-label="Notifications" @click=${this._toggleNotifications}> ${this.notificationCount ? html`
<vaadin-icon icon="vaadin:bell"></vaadin-icon> <paper-icon-button style="color: green;" icon="icons:mail" @click=${() => this._toggleNotifications()} title="Q-Mail"></paper-icon-button>
<span class="count">${this.notifications.length}</span> ` : html`
</vaadin-button> <paper-icon-button icon="icons:mail" @click=${() => this._toggleNotifications()} title="Q-Mail"></paper-icon-button>
<div class="popover-panel" ?hidden=${!this.showNotifications}> `}
<div class="notifications-list">
${this.notifications.map(notification => html`
<div class="notification-item" @click=${() => {
const query = `?service=APP&name=Q-Mail` ${this.notificationCount ? html`
store.dispatch(setNewTab({ <span class="count">${this.notifications.length}</span>
url: `qdn/browser/index.html${query}`, ` : ''}
id: 'q-mail-notification',
myPlugObj: { <div class="popover-panel" ?hidden=${!this.showNotifications}>
"url": "qapps", <div class="notifications-list">
"domain": "core", ${this.notifications.map(notification => html`
"page": `qdn/browser/index.html${query}`, <div class="notification-item" @click=${() => {
"title": "Q-Mail", const query = `?service=APP&name=Q-Mail`
"icon": "vaadin:desktop", store.dispatch(setNewTab({
"menus": [], url: `qdn/browser/index.html${query}`,
"parent": false id: 'q-mail-notification',
} myPlugObj: {
})) "url": "qapps",
this.showNotifications = false "domain": "core",
this.notifications = [] "page": `qdn/browser/index.html${query}`,
}}> "title": "Q-Mail",
<div> "icon": "vaadin:mailbox",
<p>Q-Mail</p> "mwcicon": "mail_outline",
<message-time timestamp=${notification.created} style="color:red;font-size:12px"></message-time> "menus": [],
"parent": false
}
}))
this.showNotifications = false
this.notifications = []
}}>
<div>
<p>Q-Mail</p>
<message-time timestamp=${notification.created} style="color:red;font-size:12px"></message-time>
</div>
<div>
<p>${notification.name}</p>
</div>
</div>
`)}
</div>
</div>
</div> </div>
<div> `
<p>${notification.name}</p>
</div>
</div>
`)}
</div>
</div>
</div>
`;
} }
_toggleNotifications() { _toggleNotifications() {
if (this.notifications.length === 0) return if (this.notifications.length === 0) return
this.showNotifications = !this.showNotifications; this.showNotifications = !this.showNotifications
} }
static styles = css` static styles = css`
@ -190,76 +197,80 @@ class NotificationBell extends connect(store)(LitElement) {
align-items: center; align-items: center;
position: relative; position: relative;
} }
.count { .count {
position: absolute; position: absolute;
top: 0; top: 2px;
right: 0; right: 32px;
font-size: 12px;
background-color: red; background-color: red;
color: white; color: white;
border-radius: 50%; border-radius: 50%;
width: 20px; width: 16px;
height: 20px; height: 16px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.nocount {
display: none;
}
.popover-panel { .popover-panel {
position: absolute; position: absolute;
width: 200px; width: 200px;
padding: 10px; padding: 10px;
background-color: #f5f5f5; background-color: var(--white);
border: 1px solid #ccc; border: 1px solid var(--black);
border-radius: 4px; border-radius: 4px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
top: 40px; top: 40px;
max-height: 350px; max-height: 350px;
overflow: auto; overflow: auto;
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: #6a6c75 #a1a1a1; scrollbar-color: #6a6c75 #a1a1a1;
} }
.popover-panel::-webkit-scrollbar { .popover-panel::-webkit-scrollbar {
width: 11px; width: 11px;
} }
.popover-panel::-webkit-scrollbar-track { .popover-panel::-webkit-scrollbar-track {
background: #a1a1a1; background: #a1a1a1;
} }
.popover-panel::-webkit-scrollbar-thumb { .popover-panel::-webkit-scrollbar-thumb {
background-color: #6a6c75; background-color: #6a6c75;
border-radius: 6px; border-radius: 6px;
border: 3px solid #a1a1a1; border: 3px solid #a1a1a1;
} }
.notifications-list { .notifications-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.notification-item {
padding: 5px;
border-bottom: 1px solid;
display: flex;
justify-content: space-between;
cursor: pointer;
transition: 0.2s all;
}
.notification-item:hover {
background: #c9d2d9;
}
p {
font-size: 14px;
color: #444444;
margin: 0px;
padding: 0px;
} .notification-item {
`; padding: 5px;
border-bottom: 1px solid;
display: flex;
justify-content: space-between;
cursor: pointer;
transition: 0.2s all;
}
.notification-item:hover {
background: var(--nav-color-hover);
}
p {
font-size: 14px;
color: var(--black);
margin: 0px;
padding: 0px;
}
`
} }
customElements.define('notification-bell', NotificationBell); customElements.define('notification-bell', NotificationBell)

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

@ -7,6 +7,10 @@ import { repeat } from 'lit/directives/repeat.js';
import ShortUniqueId from 'short-unique-id'; import ShortUniqueId from 'short-unique-id';
import { setNewTab } from '../redux/app/app-actions.js' import { setNewTab } from '../redux/app/app-actions.js'
import '@vaadin/icon'
import '@vaadin/icons'
import '@material/mwc-icon'
class ShowPlugin extends connect(store)(LitElement) { class ShowPlugin extends connect(store)(LitElement) {
static get properties() { static get properties() {
return { return {
@ -67,7 +71,7 @@ class ShowPlugin extends connect(store)(LitElement) {
background: var(--sidetopbar); background: var(--sidetopbar);
border-bottom: 1px solid var(--black); border-bottom: 1px solid var(--black);
height: 48px; height: 48px;
box-sizing: border-box; box-sizing: border-box;
} }
.tab { .tab {
@ -92,6 +96,8 @@ class ShowPlugin extends connect(store)(LitElement) {
.tab:hover { .tab:hover {
background: #F3F4F6; background: #F3F4F6;
color: #03a9f4;
font-weight: bold;
} }
.tab.active { .tab.active {
@ -116,6 +122,10 @@ class ShowPlugin extends connect(store)(LitElement) {
right: 8px; right: 8px;
} }
.title {
display: inline;
}
.close:hover { .close:hover {
color: red; color: red;
} }
@ -133,6 +143,19 @@ class ShowPlugin extends connect(store)(LitElement) {
.add-tab-button:hover { .add-tab-button:hover {
color: var(--black); color: var(--black);
} }
.iconActive {
position: absolute;
top: 7px;
color: #03a9f4;
--mdc-icon-size: 20px;
}
.iconInactive {
position: absolute;
top: 7px;
color: #999;
--mdc-icon-size: 20px;
}
` `
} }
@ -167,7 +190,6 @@ 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) => html` ${this.tabs.map((tab, index) => html`
@ -175,17 +197,26 @@ class ShowPlugin extends connect(store)(LitElement) {
class="tab ${this.currentTab === index ? 'active' : ''}" class="tab ${this.currentTab === index ? 'active' : ''}"
@click=${() => this.currentTab = index} @click=${() => this.currentTab = index}
> >
${tab.myPlugObj && tab.myPlugObj.title}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <div class="title">
<div class="close" @click=${() => { this.removeTab(index) }}>x</div> <div class="${this.currentTab === index ? "iconActive" : "iconInactive"}">
<mwc-icon>${tab.myPlugObj && tab.myPlugObj.mwcicon}</mwc-icon>
</div>
<div>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
${tab.myPlugObj && tab.myPlugObj.title}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</div>
<div class="close" @click=${() => { this.removeTab(index) }}>x</div>
</div>
</div> </div>
`)}&nbsp;&nbsp;&nbsp; `)}&nbsp;&nbsp;&nbsp;
<button <button
class="add-tab-button" class="add-tab-button"
title="Add Tab" title="Add Tab"
@click=${() => this.addTab({ @click=${() => this.addTab({
url: "", url: "",
id: this.uid() id: this.uid()
})} })}
> >
+ +
</button> </button>

625
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

26
package.json
View File

@ -55,7 +55,7 @@
"prosemirror-state": "1.4.3", "prosemirror-state": "1.4.3",
"prosemirror-transform": "1.7.2", "prosemirror-transform": "1.7.2",
"prosemirror-view": "1.31.3", "prosemirror-view": "1.31.3",
"sass": "1.62.1", "sass": "1.63.3",
"short-unique-id": "4.4.4", "short-unique-id": "4.4.4",
"@hapi/hapi": "21.3.2", "@hapi/hapi": "21.3.2",
"@hapi/inert": "7.1.0", "@hapi/inert": "7.1.0",
@ -71,12 +71,12 @@
}, },
"devDependencies": { "devDependencies": {
"axios": "1.4.0", "axios": "1.4.0",
"electron": "25.0.1", "electron": "25.1.0",
"electron-builder": "23.6.0", "electron-builder": "23.6.0",
"electron-packager": "17.1.1", "electron-packager": "17.1.1",
"epml": "0.3.3", "epml": "0.3.3",
"file-saver": "2.0.5", "file-saver": "2.0.5",
"highcharts": "11.0.1", "highcharts": "11.1.0",
"html-escaper": "3.0.3", "html-escaper": "3.0.3",
"is-electron": "2.2.2", "is-electron": "2.2.2",
"lit": "2.7.5", "lit": "2.7.5",
@ -85,12 +85,12 @@
"passive-events-support": "1.1.0", "passive-events-support": "1.1.0",
"redux": "4.2.1", "redux": "4.2.1",
"redux-thunk": "2.4.2", "redux-thunk": "2.4.2",
"rollup": "3.23.0", "rollup": "3.24.1",
"rollup-plugin-node-globals": "1.4.0", "rollup-plugin-node-globals": "1.4.0",
"rollup-plugin-progress": "1.1.2", "rollup-plugin-progress": "1.1.2",
"rollup-plugin-scss": "3.0.0", "rollup-plugin-scss": "3.0.0",
"shelljs": "0.8.5", "shelljs": "0.8.5",
"@babel/core": "7.22.1", "@babel/core": "7.22.5",
"@material/mwc-button": "0.27.0", "@material/mwc-button": "0.27.0",
"@material/mwc-checkbox": "0.27.0", "@material/mwc-checkbox": "0.27.0",
"@material/mwc-dialog": "0.27.0", "@material/mwc-dialog": "0.27.0",
@ -128,17 +128,17 @@
"@qortal/rollup-plugin-web-worker-loader": "1.6.4", "@qortal/rollup-plugin-web-worker-loader": "1.6.4",
"@rollup/plugin-alias": "5.0.0", "@rollup/plugin-alias": "5.0.0",
"@rollup/plugin-babel": "6.0.3", "@rollup/plugin-babel": "6.0.3",
"@rollup/plugin-commonjs": "25.0.0", "@rollup/plugin-commonjs": "25.0.1",
"@rollup/plugin-node-resolve": "15.1.0", "@rollup/plugin-node-resolve": "15.1.0",
"@rollup/plugin-replace": "5.0.2", "@rollup/plugin-replace": "5.0.2",
"@rollup/plugin-terser": "0.4.3", "@rollup/plugin-terser": "0.4.3",
"@vaadin/avatar": "24.0.7", "@vaadin/avatar": "24.1.0",
"@vaadin/button": "24.0.7", "@vaadin/button": "24.1.0",
"@vaadin/grid": "24.0.7", "@vaadin/grid": "24.1.0",
"@vaadin/icons": "24.0.7", "@vaadin/icons": "24.1.0",
"@vaadin/password-field": "24.0.7", "@vaadin/password-field": "24.1.0",
"@vaadin/tooltip": "24.0.7", "@vaadin/tooltip": "24.1.0",
"@zip.js/zip.js": "2.7.14" "@zip.js/zip.js": "2.7.15"
}, },
"engines": { "engines": {
"node": ">=18.14.0" "node": ">=18.14.0"

1
plugins/plugins/core/main.js
View File

File diff suppressed because one or more lines are too long

112
plugins/plugins/core/main.src.js
View File

@ -13,6 +13,7 @@ parentEpml.ready().then(() => {
page: 'minting/index.html', page: 'minting/index.html',
title: 'Minting Details', title: 'Minting Details',
icon: 'vaadin:info-circle', icon: 'vaadin:info-circle',
mwcicon: 'info_outline',
menus: [], menus: [],
parent: false, parent: false,
}, },
@ -21,7 +22,8 @@ parentEpml.ready().then(() => {
domain: 'core', domain: 'core',
page: 'become-minter/index.html', page: 'become-minter/index.html',
title: 'Become a Minter', title: 'Become a Minter',
icon: 'vaadin:info-circle', icon: 'vaadin:thumbs-up',
mwcicon: 'thumb_up',
menus: [], menus: [],
parent: false, parent: false,
}, },
@ -29,8 +31,9 @@ parentEpml.ready().then(() => {
url: 'sponsorship-list', url: 'sponsorship-list',
domain: 'core', domain: 'core',
page: 'sponsorship-list/index.html', page: 'sponsorship-list/index.html',
title: 'Become a Minter', title: 'Sponsorship List',
icon: 'vaadin:info-circle', icon: 'vaadin:list-ol',
mwcicon: 'format_list_numbered',
menus: [], menus: [],
parent: false, parent: false,
}, },
@ -40,6 +43,7 @@ parentEpml.ready().then(() => {
page: 'wallet/index.html', page: 'wallet/index.html',
title: 'Wallet', title: 'Wallet',
icon: 'vaadin:wallet', icon: 'vaadin:wallet',
mwcicon: 'account_balance_wallet',
menus: [], menus: [],
parent: false, parent: false,
}, },
@ -49,6 +53,7 @@ parentEpml.ready().then(() => {
page: 'trade-portal/index.html', page: 'trade-portal/index.html',
title: 'Trade Portal', title: 'Trade Portal',
icon: 'vaadin:bullets', icon: 'vaadin:bullets',
mwcicon: 'format_list_bulleted',
menus: [], menus: [],
parent: false, parent: false,
}, },
@ -58,6 +63,7 @@ parentEpml.ready().then(() => {
page: 'trade-bot/index.html', page: 'trade-bot/index.html',
title: 'Auto Buy', title: 'Auto Buy',
icon: 'vaadin:calc-book', icon: 'vaadin:calc-book',
mwcicon: 'shop',
menus: [], menus: [],
parent: false, parent: false,
}, },
@ -67,51 +73,7 @@ parentEpml.ready().then(() => {
page: 'reward-share/index.html', page: 'reward-share/index.html',
title: 'Reward Share', title: 'Reward Share',
icon: 'vaadin:share-square', icon: 'vaadin:share-square',
menus: [], mwcicon: 'ios_share',
parent: false,
},
{
url: 'name-registration',
domain: 'core',
page: 'name-registration/index.html',
title: 'Name Registration',
icon: 'vaadin:user-check',
menus: [],
parent: false,
},
{
url: 'names-market',
domain: 'core',
page: 'names-market/index.html',
title: 'Names Market',
icon: 'vaadin:user-check',
menus: [],
parent: false,
},
{
url: 'websites',
domain: 'core',
page: 'qdn/index.html',
title: 'Websites',
icon: 'vaadin:desktop',
menus: [],
parent: false,
},
{
url: 'qapps',
domain: 'core',
page: 'q-app/index.html',
title: 'Q-Apps',
icon: 'vaadin:desktop',
menus: [],
parent: false,
},
{
url: 'data-management',
domain: 'core',
page: 'qdn/data-management/index.html',
title: 'Data Management',
icon: 'vaadin:database',
menus: [], menus: [],
parent: false, parent: false,
}, },
@ -121,6 +83,47 @@ parentEpml.ready().then(() => {
page: 'messaging/q-chat/index.html', page: 'messaging/q-chat/index.html',
title: 'Q-Chat', title: 'Q-Chat',
icon: 'vaadin:chat', icon: 'vaadin:chat',
mwcicon: 'forum',
menus: [],
parent: false,
},
{
url: 'name-registration',
domain: 'core',
page: 'name-registration/index.html',
title: 'Name Registration',
icon: 'vaadin:user-check',
mwcicon: 'manage_accounts',
menus: [],
parent: false,
},
{
url: 'names-market',
domain: 'core',
page: 'names-market/index.html',
title: 'Names Market',
icon: 'vaadin:shop',
mwcicon: 'store',
menus: [],
parent: false,
},
{
url: 'websites',
domain: 'core',
page: 'qdn/index.html',
title: 'Websites',
icon: 'vaadin:desktop',
mwcicon: 'desktop_mac',
menus: [],
parent: false,
},
{
url: 'qapps',
domain: 'core',
page: 'q-app/index.html',
title: 'Q-Apps',
icon: 'vaadin:external-browser',
mwcicon: 'open_in_browser',
menus: [], menus: [],
parent: false, parent: false,
}, },
@ -130,6 +133,17 @@ parentEpml.ready().then(() => {
page: 'group-management/index.html', page: 'group-management/index.html',
title: 'Group Management', title: 'Group Management',
icon: 'vaadin:group', icon: 'vaadin:group',
mwcicon: 'group',
menus: [],
parent: false,
},
{
url: 'data-management',
domain: 'core',
page: 'qdn/data-management/index.html',
title: 'Data Management',
icon: 'vaadin:database',
mwcicon: 'storage',
menus: [], menus: [],
parent: false, parent: false,
}, },
@ -139,6 +153,7 @@ parentEpml.ready().then(() => {
page: 'puzzles/index.html', page: 'puzzles/index.html',
title: 'Puzzles', title: 'Puzzles',
icon: 'vaadin:puzzle-piece', icon: 'vaadin:puzzle-piece',
mwcicon: 'extension',
menus: [], menus: [],
parent: false, parent: false,
}, },
@ -166,6 +181,7 @@ parentEpml.ready().then(() => {
page: 'node-management/index.html', page: 'node-management/index.html',
title: 'Node Management', title: 'Node Management',
icon: 'vaadin:cloud', icon: 'vaadin:cloud',
mwcicon: 'cloud',
menus: [], menus: [],
parent: false, parent: false,
}; };