mirror of
https://github.com/Qortal/qortal-ui.git
synced 2025-03-28 00:05:53 +00:00
Add Dev button
This commit is contained in:
AlphaX-Projects
GitHub
parent
4ae0ec6a98
commit
1755e90731
@ -45,7 +45,8 @@ class ShowPlugin extends connect(store)(LitElement) {
|
||||
theme: { type: String, reflect: true },
|
||||
tabInfo: { type: Object },
|
||||
chatLastSeen: { type: Array },
|
||||
chatHeads: { type: Array }
|
||||
chatHeads: { type: Array },
|
||||
proxyPort: { type: Number }
|
||||
}
|
||||
}
|
||||
|
||||
@ -63,6 +64,23 @@ class ShowPlugin extends connect(store)(LitElement) {
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--thumbBG) var(--scrollbarBG);
|
||||
--mdc-theme-primary: rgb(3, 169, 244);
|
||||
--mdc-theme-surface: var(--white);
|
||||
--mdc-text-field-outlined-idle-border-color: var(--txtfieldborder);
|
||||
--mdc-text-field-outlined-hover-border-color: var(--txtfieldhoverborder);
|
||||
--mdc-text-field-label-ink-color: var(--black);
|
||||
--mdc-text-field-ink-color: var(--black);
|
||||
--mdc-select-ink-color: var(--black);
|
||||
--mdc-select-fill-color: var(--black);
|
||||
--mdc-select-label-ink-color: var(--black);
|
||||
--mdc-select-idle-line-color: var(--black);
|
||||
--mdc-select-hover-line-color: var(--black);
|
||||
--mdc-select-outlined-idle-border-color: var(--txtfieldborder);
|
||||
--mdc-select-outlined-hover-border-color: var(--txtfieldhoverborder);
|
||||
--mdc-dialog-content-ink-color: var(--black);
|
||||
--mdc-dialog-shape-radius: 25px;
|
||||
--mdc-dialog-min-width: 400px;
|
||||
--mdc-dialog-max-width: 700px;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-track {
|
||||
@ -206,6 +224,30 @@ class ShowPlugin extends connect(store)(LitElement) {
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
.add-dev-button {
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
margin-left: 10px;
|
||||
margin-top: 4px;
|
||||
max-height: 28px;
|
||||
padding: 5px 5px;
|
||||
font-size: 14px;
|
||||
background-color: #03a9f4;
|
||||
color: white;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.add-dev-button:hover {
|
||||
opacity: 0.8;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.red {
|
||||
--mdc-theme-primary: #F44336;
|
||||
}
|
||||
|
||||
.iconActive {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
@ -291,6 +333,7 @@ class ShowPlugin extends connect(store)(LitElement) {
|
||||
this.tabInfo = {}
|
||||
this.chatLastSeen = []
|
||||
this.chatHeads = []
|
||||
this.proxyPort = 0
|
||||
}
|
||||
|
||||
render() {
|
||||
@ -341,6 +384,8 @@ class ShowPlugin extends connect(store)(LitElement) {
|
||||
title = html`${translate('tabmenu.tm16')}`
|
||||
} else if (tab.myPlugObj && tab.myPlugObj.url === "myapp") {
|
||||
title = tab.myPlugObj && tab.myPlugObj.title
|
||||
} else if (tab.myPlugObj && tab.myPlugObj.url === "devmode") {
|
||||
title = html`${translate('tabmenu.tm38')}`
|
||||
} else {
|
||||
title = html`${translate('tabmenu.tm17')}`
|
||||
}
|
||||
@ -413,6 +458,11 @@ class ShowPlugin extends connect(store)(LitElement) {
|
||||
this.currentTab = lengthOfTabs
|
||||
}}
|
||||
>+</button>
|
||||
<button
|
||||
class="add-dev-button"
|
||||
title="${translate('tabmenu.tm18')}"
|
||||
@click=${this.openDevDialog}
|
||||
>${translate('tabmenu.tm38')}</button>
|
||||
</div>
|
||||
|
||||
${repeat(this.tabs, (tab) => tab.id, (tab, index) => html`
|
||||
@ -434,6 +484,31 @@ class ShowPlugin extends connect(store)(LitElement) {
|
||||
</nav-bar>
|
||||
</div>
|
||||
`)}
|
||||
<mwc-dialog id="addDevDialog">
|
||||
<div style="text-align: center;">
|
||||
<h2>${translate('tabmenu.tm39')}</h2>
|
||||
<hr>
|
||||
</div>
|
||||
<p>
|
||||
<mwc-textfield id="domainInput" style="width:100%; color: var(--black);" required outlined label="${translate("settings.domain")}"></mwc-textfield>
|
||||
</p>
|
||||
<p>
|
||||
<mwc-textfield id="portInput" style="width:100%; color: var(--black);" required outlined label="${translate("settings.port")}"></mwc-textfield>
|
||||
</p>
|
||||
<mwc-button
|
||||
slot="secondaryAction"
|
||||
dialogAction="close"
|
||||
class="red"
|
||||
>
|
||||
${translate("general.close")}
|
||||
</mwc-button>
|
||||
<mwc-button
|
||||
slot="primaryAction"
|
||||
@click="${this.getProxyPort}"
|
||||
>
|
||||
${translate('tabmenu.tm40')}
|
||||
</mwc-button>
|
||||
</mwc-dialog>
|
||||
`
|
||||
}
|
||||
|
||||
@ -476,6 +551,58 @@ class ShowPlugin extends connect(store)(LitElement) {
|
||||
return true
|
||||
}
|
||||
|
||||
openDevDialog() {
|
||||
this.shadowRoot.getElementById('domainInput').value = ''
|
||||
this.shadowRoot.getElementById('portInput').value = ''
|
||||
this.shadowRoot.querySelector("#addDevDialog").show()
|
||||
}
|
||||
|
||||
async getProxyPort() {
|
||||
this.proxyPort = 0
|
||||
let framework = ''
|
||||
|
||||
const domain = this.shadowRoot.getElementById('domainInput').value
|
||||
const port = this.shadowRoot.getElementById('portInput').value
|
||||
|
||||
if (domain.length >= 3 && port.length >= 2) {
|
||||
framework = domain + ':' + port
|
||||
} else {
|
||||
let errorString = get("tabmenu.tm41")
|
||||
parentEpml.request('showSnackBar', `${errorString}`)
|
||||
return
|
||||
}
|
||||
|
||||
let framePort = await parentEpml.request('apiCall', {
|
||||
url: `/developer/proxy/start`,
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'text/plain'
|
||||
},
|
||||
body: `${framework}`
|
||||
})
|
||||
|
||||
this.createUrl(framePort)
|
||||
}
|
||||
|
||||
createUrl(framePort) {
|
||||
this.proxyPort = framePort
|
||||
const myFrameNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]
|
||||
const myFrameNodeUrl = myFrameNode.protocol + '://' + myFrameNode.domain + ':' + this.proxyPort
|
||||
|
||||
this.changePage({
|
||||
"url": "devmode",
|
||||
"domain": "core",
|
||||
"page": `qdn/browser/index.html?link=${myFrameNodeUrl}&dev=FRAMEWORK`,
|
||||
"title": "Dev Server",
|
||||
"icon": "vaadin:desktop",
|
||||
"mwcicon": "api",
|
||||
"menus": [],
|
||||
"parent": false
|
||||
})
|
||||
|
||||
this.shadowRoot.querySelector("#addDevDialog").close()
|
||||
}
|
||||
|
||||
async addTab(tab) {
|
||||
if (this.tabs == []) {
|
||||
// ...Nothing to do
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user