Qortal/qortal-ui
1
0
Fork 0
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-04-24 20:07:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make it dark

Browse Source
This commit is contained in:
AlphaX-Projects 2022-03-09 02:06:28 -08:00 committed by GitHub
parent ae1f1d0929
commit 359022713e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 247 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
qortal-ui-plugins/plugins/core/components/ChatWelcomePage.js
View File

@ -239,9 +239,11 @@ class ChatWelcomePage extends LitElement {
firstUpdated() {
this.changeTheme()
setInterval(() => {
this.changeTheme();
}, 250)
}, 100)
const stopKeyEventPropagation = (e) => {
e.stopPropagation();

2
qortal-ui-plugins/plugins/core/group-management/group-management.src.js
View File

@ -429,6 +429,8 @@ class GroupManagement extends LitElement {
firstUpdated() {
this.changeTheme()
setInterval(() => {
this.changeTheme();
}, 100)

24
qortal-ui-plugins/plugins/core/messaging/chain-messaging/chain-messaging.src.js
View File

@ -3,7 +3,8 @@ import { LitElement, html, css } from 'lit'
class ChainMessaging extends LitElement {
static get properties() {
return {
loading: { type: Boolean }
loading: { type: Boolean },
theme: { type: String, reflect: true }
}
}
@ -22,7 +23,7 @@ class ChainMessaging extends LitElement {
}
#chain-messaging-page {
background:#fff;
background: var(--white);
}
`
@ -30,18 +31,25 @@ class ChainMessaging extends LitElement {
constructor() {
super()
this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
}
render() {
return html`
<div id="chain-messaging-page">
<h2 style="text-align: center; margin-top: 3rem;">Coming Soon!</h2>
<h2 style="text-align: center; margin-top: 3rem; color: var(--black)">Coming Soon!</h2>
</div>
`
}
firstUpdated() {
this.changeTheme()
setInterval(() => {
this.changeTheme();
}, 100)
window.addEventListener("contextmenu", (event) => {
event.preventDefault();
});
@ -55,6 +63,16 @@ class ChainMessaging extends LitElement {
}
}
changeTheme() {
const checkTheme = localStorage.getItem('qortalTheme')
if (checkTheme === 'dark') {
this.theme = 'dark';
} else {
this.theme = 'light';
}
document.querySelector('html').setAttribute('theme', this.theme);
}
isEmptyArray(arr) {
if (!arr) { return true }
return arr.length === 0

3
qortal-ui-plugins/plugins/core/messaging/chain-messaging/index.html
View File

@ -3,6 +3,7 @@
<head>
<link rel="stylesheet" href="/font/material-icons.css">
<link rel="stylesheet" href="/font/switch-theme.css">
<style>
html {
--scrollbarBG: #a1a1a1;
@ -32,7 +33,7 @@
body {
margin: 0;
font-family: "Roboto", sans-serif;
background-color: #fff;
background: var(--plugback);
}
</style>
</head>

2
qortal-ui-plugins/plugins/core/messaging/messaging.src.js
View File

@ -136,6 +136,8 @@ class Messaging extends LitElement {
firstUpdated() {
this.changeTheme()
setInterval(() => {
this.changeTheme();
}, 100)

4
qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js
View File

@ -345,9 +345,11 @@ class Chat extends LitElement {
firstUpdated() {
this.changeTheme()
setInterval(() => {
this.changeTheme();
}, 250)
}, 100)
const stopKeyEventPropagation = (e) => {
e.stopPropagation();

2
qortal-ui-plugins/plugins/core/minting/minting-info.src.js
View File

@ -358,6 +358,8 @@ class MintingInfo extends LitElement {
firstUpdated() {
this.changeTheme()
setInterval(() => {
this.changeTheme();
}, 100)

2
qortal-ui-plugins/plugins/core/name-registration/name-registration.src.js
View File

@ -159,6 +159,8 @@ class NameRegistration extends LitElement {
firstUpdated() {
this.changeTheme()
setInterval(() => {
this.changeTheme();
}, 100)

2
qortal-ui-plugins/plugins/core/node-management/node-management.src.js
View File

@ -287,6 +287,8 @@ class NodeManagement extends LitElement {
firstUpdated() {
this.changeTheme()
setInterval(() => {
this.changeTheme();
}, 100)

2
qortal-ui-plugins/plugins/core/puzzles/puzzles.src.js
View File

@ -171,6 +171,8 @@ class Puzzles extends LitElement {
firstUpdated() {
this.changeTheme()
setInterval(() => {
this.changeTheme();
}, 100)

2
qortal-ui-plugins/plugins/core/qdn/browser/browser.src.js
View File

@ -203,6 +203,8 @@ class WebBrowser extends LitElement {
firstUpdated() {
this.changeTheme()
setInterval(() => {
this.changeTheme();
}, 100)

3
qortal-ui-plugins/plugins/core/qdn/publish/index.html
View File

@ -3,6 +3,7 @@
<head>
<link rel="stylesheet" href="/font/material-icons.css">
<link rel="stylesheet" href="/font/switch-theme.css">
<style>
html {
--scrollbarBG: #a1a1a1;
@ -32,7 +33,7 @@
body {
margin: 0;
font-family: "Roboto", sans-serif;
background-color: #fff;
background: var(--plugback);
}
</style>
</head>

286
qortal-ui-plugins/plugins/core/qdn/publish/publish.src.js
View File

@ -33,7 +33,8 @@ class PublishData extends LitElement {
successMessage: { type: String },
errorMessage: { type: String },
loading: { type: Boolean },
btnDisable: { type: Boolean }
btnDisable: { type: Boolean },
theme: { type: String, reflect: true }
}
}
@ -47,6 +48,16 @@ class PublishData extends LitElement {
--mdc-theme-primary: rgb(3, 169, 244);
--mdc-theme-secondary: var(--mdc-theme-primary);
--paper-input-container-focus-color: var(--mdc-theme-primary);
--lumo-primary-text-color: rgb(0, 167, 245);
--lumo-primary-color-50pct: rgba(0, 167, 245, 0.5);
--lumo-primary-color-10pct: rgba(0, 167, 245, 0.1);
--lumo-primary-color: hsl(199, 100%, 48%);
--lumo-base-color: var(--white);
--lumo-body-text-color: var(--black);
--lumo-secondary-text-color: var(--sectxt);
--lumo-contrast-60pct: var(--vdicon);
--_lumo-grid-border-color: var(--border);
--_lumo-grid-secondary-border-color: var(--border2);
}
#publishWrapper paper-button {
@ -68,6 +79,7 @@ class PublishData extends LitElement {
.upload-text {
display: block;
font-size: 14px;
color: var(--black);
}
.address-bar {
@ -76,7 +88,7 @@ class PublishData extends LitElement {
left: 0;
right: 0;
height: 100px;
background-color: white;
background-color: var(--white);
height: 36px;
}
@ -86,17 +98,113 @@ class PublishData extends LitElement {
`
}
constructor() {
super()
this.showName = false;
this.showService = false
this.showIdentifier = false
const urlParams = new URLSearchParams(window.location.search)
this.name = urlParams.get('name')
this.service = urlParams.get('service')
this.identifier = urlParams.get('identifier')
this.category = urlParams.get('category')
this.uploadType = urlParams.get('uploadType') !== "null" ? urlParams.get('uploadType') : "file"
if (urlParams.get('showName') === "true") {
this.showName = true
}
if (urlParams.get('showService') === "true") {
this.showService = true
}
if (urlParams.get('showIdentifier') === "true") {
this.showIdentifier = true
}
if (this.identifier != null) {
if (this.identifier === "null" || this.identifier.trim().length == 0) {
this.identifier = null
}
}
// Default to true so the message doesn't appear and disappear quickly
this.portForwardingEnabled = true
this.names = []
this.myRegisteredName = ''
this.selectedName = 'invalid'
this.path = ''
this.successMessage = ''
this.generalMessage = ''
this.errorMessage = ''
this.loading = false
this.btnDisable = false
this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
const fetchNames = () => {
parentEpml.request('apiCall', {
url: `/names/address/${this.selectedAddress.address}?limit=0&reverse=true`
}).then(res => {
setTimeout(() => {
this.names = res
if (res[0] != null) {
this.myRegisteredName = res[0].name;
}
}, 1)
})
setTimeout(fetchNames, this.config.user.nodeSettings.pingInterval)
}
const fetchPeersSummary = () => {
parentEpml.request('apiCall', {
url: `/peers/summary`
}).then(res => {
setTimeout(() => {
this.portForwardingEnabled = (res.inboundConnections != null && res.inboundConnections > 0);
}, 1)
})
setTimeout(fetchPeersSummary, this.config.user.nodeSettings.pingInterval)
}
let configLoaded = false
parentEpml.ready().then(() => {
parentEpml.subscribe('selected_address', async selectedAddress => {
this.selectedAddress = {}
selectedAddress = JSON.parse(selectedAddress)
if (!selectedAddress || Object.entries(selectedAddress).length === 0) return
this.selectedAddress = selectedAddress
})
parentEpml.subscribe('config', c => {
if (!configLoaded) {
setTimeout(fetchNames, 1)
setTimeout(fetchPeersSummary, 1)
configLoaded = true
}
this.config = JSON.parse(c)
})
parentEpml.subscribe('copy_menu_switch', async value => {
if (value === 'false' && window.getSelection().toString().length !== 0) {
this.clearSelection()
}
})
})
}
render() {
return html`
<div id="publishWrapper" style="width:auto; padding:10px; background: #fff; height:100vh;">
<div id="publishWrapper" style="width: auto; padding:10px; background: var(--white); height: 100vh;">
<div class="layout horizontal center" style=" padding:12px 15px;">
<div class="address-bar">
<mwc-button @click=${() => this.goBack()} class="address-bar-button"><mwc-icon>arrow_back_ios</mwc-icon> Back</mwc-button>
</div>
<paper-card style="width:100%; max-width:740px;">
<div style="margin:0; margin-top:20px;">
<h3 style="margin:0; padding:8px 0; text-transform:capitalize;">Publish / Update ${this.category}</h3>
<p style="font-style:italic; font-size:14px;" ?hidden="${this.portForwardingEnabled}">Note: it is recommended that you set up port forwarding before hosting data, so that it can more easily accessed by peers on the network.</p>
<h3 style="margin:0; padding:8px 0; text-transform: capitalize; color: var(--black);">Publish / Update ${this.category}</h3>
<p style="font-style: italic; font-size: 14px; color: var(--black);" ?hidden="${this.portForwardingEnabled}">Note: it is recommended that you set up port forwarding before hosting data, so that it can more easily accessed by peers on the network.</p>
</div>
</paper-card>
<!-- TODO: adapt this dropdown to list all names on the account. Right now it's hardcoded to a single name -->
@ -114,8 +222,8 @@ class PublishData extends LitElement {
<mwc-textfield style="width:100%;" label="Identifier" id="identifier" type="text" value="${this.identifier != null ? this.identifier : ''}"></mwc-textfield>
</p>
<p style="break-word;">${this.generalMessage}</p>
<p style="color:red">${this.errorMessage}</p>
<p style="color: var(--black); word-break: break-word;">${this.generalMessage}</p>
<p style="color: red;">${this.errorMessage}</p>
<p style="color: green; word-break: break-word;">${this.successMessage}</p>
${this.loading ? html` <paper-progress indeterminate style="width:100%; margin:4px;"></paper-progress> ` : ''}
@ -130,8 +238,41 @@ class PublishData extends LitElement {
`
}
// Navigation
firstUpdated() {
this.changeTheme()
setInterval(() => {
this.changeTheme();
}, 100)
window.addEventListener('contextmenu', (event) => {
event.preventDefault()
this._textMenu(event)
})
window.addEventListener('click', () => {
parentEpml.request('closeCopyTextMenu', null)
})
window.onkeyup = (e) => {
if (e.keyCode === 27) {
parentEpml.request('closeCopyTextMenu', null)
}
}
}
changeTheme() {
const checkTheme = localStorage.getItem('qortalTheme')
if (checkTheme === 'dark') {
this.theme = 'dark';
} else {
this.theme = 'light';
}
document.querySelector('html').setAttribute('theme', this.theme);
}
// Navigation
goBack() {
window.history.back();
}
@ -140,13 +281,13 @@ class PublishData extends LitElement {
renderUploadField() {
if (this.uploadType === "file") {
return html`<p>
<input style="width:100%;" id="file" type="file" />
<input style="width: 100%; background: var(--white); color: var(--black)" id="file" type="file">
</p>`;
}
else if (this.uploadType === "zip") {
return html`<p>
<span class="upload-text">Select zip file containing static content:</span><br />
<input style="width:100%;" id="file" type="file" accept=".zip" />
<input style="width: 100%; background: var(--white); color: var(--black)" id="file" type="file" accept=".zip">
</p>`;
}
else {
@ -291,7 +432,6 @@ class PublishData extends LitElement {
url: `${uploadDataUrl}?apiKey=${this.getApiKey()}`,
body: `${postBody}`,
})
return uploadDataRes
}
@ -302,7 +442,6 @@ class PublishData extends LitElement {
url: `/transactions/convert`,
body: `${transactionBytesBase58}`,
})
return convertedBytes
}
@ -345,20 +484,11 @@ class PublishData extends LitElement {
else {
myResponse = response
}
return myResponse
}
validate()
}
// Helper Functions (Re-Used in Most part of the UI )
textColor(color) {
return color == 'light' ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.87)'
}
_textMenu(event) {
const getSelectedText = () => {
var text = ''
@ -380,123 +510,9 @@ class PublishData extends LitElement {
parentEpml.request('openCopyTextMenu', textMenuObject)
}
}
checkSelectedTextAndShowMenu()
}
constructor() {
super()
this.showName = false;
this.showService = false
this.showIdentifier = false
const urlParams = new URLSearchParams(window.location.search)
this.name = urlParams.get('name')
this.service = urlParams.get('service')
this.identifier = urlParams.get('identifier')
this.category = urlParams.get('category')
this.uploadType = urlParams.get('uploadType') !== "null" ? urlParams.get('uploadType') : "file"
if (urlParams.get('showName') === "true") {
this.showName = true
}
if (urlParams.get('showService') === "true") {
this.showService = true
}
if (urlParams.get('showIdentifier') === "true") {
this.showIdentifier = true
}
if (this.identifier != null) {
if (this.identifier === "null" || this.identifier.trim().length == 0) {
this.identifier = null
}
}
// Default to true so the message doesn't appear and disappear quickly
this.portForwardingEnabled = true
this.names = []
this.myRegisteredName = ''
this.selectedName = 'invalid'
this.path = ''
this.successMessage = ''
this.generalMessage = ''
this.errorMessage = ''
this.loading = false
this.btnDisable = false
const fetchNames = () => {
parentEpml.request('apiCall', {
url: `/names/address/${this.selectedAddress.address}?limit=0&reverse=true`
}).then(res => {
setTimeout(() => {
this.names = res
if (res[0] != null) {
this.myRegisteredName = res[0].name;
}
}, 1)
})
setTimeout(fetchNames, this.config.user.nodeSettings.pingInterval)
}
const fetchPeersSummary = () => {
parentEpml.request('apiCall', {
url: `/peers/summary`
}).then(res => {
setTimeout(() => {
this.portForwardingEnabled = (res.inboundConnections != null && res.inboundConnections > 0);
}, 1)
})
setTimeout(fetchPeersSummary, this.config.user.nodeSettings.pingInterval)
}
let configLoaded = false
parentEpml.ready().then(() => {
parentEpml.subscribe('selected_address', async selectedAddress => {
this.selectedAddress = {}
selectedAddress = JSON.parse(selectedAddress)
if (!selectedAddress || Object.entries(selectedAddress).length === 0) return
this.selectedAddress = selectedAddress
})
parentEpml.subscribe('config', c => {
if (!configLoaded) {
setTimeout(fetchNames, 1)
setTimeout(fetchPeersSummary, 1)
configLoaded = true
}
this.config = JSON.parse(c)
})
parentEpml.subscribe('copy_menu_switch', async value => {
if (value === 'false' && window.getSelection().toString().length !== 0) {
this.clearSelection()
}
})
})
}
firstUpdated() {
window.addEventListener('contextmenu', (event) => {
event.preventDefault()
this._textMenu(event)
})
window.addEventListener('click', () => {
parentEpml.request('closeCopyTextMenu', null)
})
window.onkeyup = (e) => {
if (e.keyCode === 27) {
parentEpml.request('closeCopyTextMenu', null)
}
}
}
selectName(e) {
let name = this.shadowRoot.getElementById('registeredName')
this.selectedName = (name.value)

24
qortal-ui-plugins/plugins/core/qdn/websites.src.js
View File

@ -388,6 +388,8 @@ class Websites extends LitElement {
firstUpdated() {
this.changeTheme()
setInterval(() => {
this.changeTheme();
}, 100)
@ -404,7 +406,7 @@ class Websites extends LitElement {
})
this.followedNames = followedNames
setTimeout(getFollowedNames, 60000)
setTimeout(getFollowedNames, 120000)
}
const getBlockedNames = async () => {
@ -413,7 +415,7 @@ class Websites extends LitElement {
})
this.blockedNames = blockedNames
setTimeout(getBlockedNames, 60000)
setTimeout(getBlockedNames, 120000)
}
const getWebFollowedNames = async () => {
@ -422,7 +424,7 @@ class Websites extends LitElement {
})
this.webFollowedNames = webFollowedNames
setTimeout(getWebFollowedNames, 60000)
setTimeout(getWebFollowedNames, 120000)
}
const getWebBlockedNames = async () => {
@ -431,7 +433,7 @@ class Websites extends LitElement {
})
this.webBlockedNames = webBlockedNames
setTimeout(getWebBlockedNames, 60000)
setTimeout(getWebBlockedNames, 120000)
}
const getBlockFollowedNames = async () => {
@ -440,7 +442,7 @@ class Websites extends LitElement {
})
this.blockFollowedNames = blockFollowedNames
setTimeout(getBlockFollowedNames, 60000)
setTimeout(getBlockFollowedNames, 120000)
}
const getBlockBlockedNames = async () => {
@ -449,7 +451,7 @@ class Websites extends LitElement {
})
this.blockBlockedNames = blockBlockedNames
setTimeout(getBlockBlockedNames, 60000)
setTimeout(getBlockBlockedNames, 120000)
}
const getSearchFollowedNames = async () => {
@ -458,7 +460,7 @@ class Websites extends LitElement {
})
this.searchFollowedNames = searchFollowedNames
setTimeout(getSearchFollowedNames, 60000)
setTimeout(getSearchFollowedNames, 120000)
}
const getSearchBlockedNames = async () => {
@ -467,7 +469,7 @@ class Websites extends LitElement {
})
this.searchBlockedNames = searchBlockedNames
setTimeout(getSearchBlockedNames, 60000)
setTimeout(getSearchBlockedNames, 120000)
}
const getRelayMode = async () => {
@ -476,7 +478,7 @@ class Websites extends LitElement {
})
this.relayMode = relayMode;
setTimeout(getRelayMode, 60000)
setTimeout(getRelayMode, 120000)
}
window.addEventListener("contextmenu", (event) => {
@ -518,8 +520,8 @@ class Websites extends LitElement {
setTimeout(getSearchBlockedNames, 1)
setTimeout(getRelayMode, 1)
setInterval(this.getArbitraryResources, 120000)
setInterval(this.getFollowedWebsites, 60000)
setInterval(this.getBlockedWebsites, 60000)
setInterval(this.getFollowedWebsites, 120000)
setInterval(this.getBlockedWebsites, 120000)
configLoaded = true
}
this.config = JSON.parse(c)

2
qortal-ui-plugins/plugins/core/reward-share/reward-share.src.js
View File

@ -165,6 +165,8 @@ class RewardShare extends LitElement {
firstUpdated() {
this.changeTheme()
setInterval(() => {
this.changeTheme();
}, 100)

2
qortal-ui-plugins/plugins/core/send-coin/send-coin.src.js
View File

@ -275,6 +275,8 @@ class SendMoneyPage extends LitElement {
firstUpdated() {
this.changeTheme()
setInterval(() => {
this.changeTheme();
}, 100)

3
qortal-ui-plugins/plugins/core/trade-portal/trade-portal.src.js
View File

@ -855,8 +855,11 @@ class TradePortal extends LitElement {
}
firstUpdated() {
let _this = this
this.changeTheme()
setInterval(() => {
this.changeTheme();
}, 100)

2
qortal-ui-plugins/plugins/core/wallet/wallet-app.src.js
View File

@ -660,6 +660,8 @@ class MultiWallet extends LitElement {
firstUpdated() {
this.changeTheme()
setInterval(() => {
this.changeTheme();
}, 100)