jschulthess
/
qortal-ui
forked from Qortal/qortal-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Add icons to tabs and Update dependencies

qortal-ui-dev
AlphaX-Projects 1 year ago
parent
425b05edd4
commit
349f32f9b5
6 changed files with 539 additions and 459 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 253
      core/src/components/notification-view/notification-bell.js
  2. 45
      core/src/components/show-plugin.js
  3. 613
      package-lock.json
  4. 26
      package.json
  5. 1
      plugins/plugins/core/main.js
  6. 60
      plugins/plugins/core/main.src.js

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

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

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

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

613
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

26
package.json
Unescape View File

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

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

File diff suppressed because one or more lines are too long

60
plugins/plugins/core/main.src.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save