aljaz/pear-docs
1
0
Fork 0
mirror of https://github.com/aljazceru/pear-docs.git synced 2025-12-17 22:44:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

fixed setup ui button click (#68)

Browse Source 
* fixed setup ui button click

* system-status css tweaks

* system status html tweaks

* system status re-renders after installation

* system-status init button inside render logic

* simplified system-status button logic

* system-status css tweaks

---------

Co-authored-by: rafapaezbas <rafa@holepunch.com>
This commit is contained in:
rafapaezbas
2024-02-22 14:35:07 +01:00
committed by GitHub
parent 80612db142
commit 8f60cde71d
1 changed files with 18 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
lib/system-status.js
View File

@@ -71,15 +71,18 @@ customElements.define('system-status', class extends HTMLElement {
this.statement = `export PATH="${BIN}":$PATH`
this.stmtrx = new RegExp(`^export PATH="${BIN}":\\$PATH$`, 'm')
this.shellProfiles = null
this.installed = this.#installed()
this.template = document.createElement('template')
this.template.innerHTML = `
this.root = this.attachShadow({ mode: 'open' })
this.#render()
}
#render () {
this.shadowRoot.innerHTML = `
<div id="panel">
<style>
#panel { user-select: none; }
blockquote { outline: 1px solid #323532; margin-inline-start: 0; margin-inline-end: 0; display: block; margin-block-start: 1rem; margin-block-end: 0; padding: 1px; font-size: .825rem; border-radius: 2px; }
blockquote::before { content: "ℹ"; float: left; font-size: 1.625rem; margin-left: 1rem; margin-right: 0.625rem; }
button { background: #151517; color: #B0D944; border: 1px solid; padding: .575em .65em; cursor: pointer; margin-top: 2rem; font-size: 1.25rem; }
button { background: #151517; color: #B0D944; border: 1px solid; padding: .575em .65em; cursor: pointer; margin-top: 2rem; font-size: 1.20rem; }
#tip { text-indent: 4px; margin-top: -.25rem }
code {
background: #3a4816;
@@ -89,8 +92,9 @@ customElements.define('system-status', class extends HTMLElement {
padding-bottom: 0.15rem;
font-family: 'overpass-mono';
border-radius: 1px;
user-select: text;
}
#tip > p { margin: 0; padding: 0}
#tip > p { margin-top: 6px; margin-bottom: 6px; padding: 0}
#tip {
margin-top: 3rem;
}
@@ -107,36 +111,23 @@ customElements.define('system-status', class extends HTMLElement {
</style>
<h1>System Status</h1>
${
this.installed
? '<pear-welcome></pear-welcome>'
: `
this.#installed()
? '<pear-welcome></pear-welcome>'
: `
<blockquote>
<p>Pear setup is nearly complete.</p>
</blockquote>
<p id=tip><small>To finish installing Pear Runtime set your system path to <code>${BIN}</code>${!isWin? ' or click the button bellow.' : '.'}</small></p>
<p>To finish installing Pear Runtime set your system path to</p>
<p><code>${BIN}</code></p>
<p>${!isWin? ' or click the button.' : ''}</p>
${!isWin ? '<p><button> Automatic Setup Completion </button><p>' : ''}
`
}
</div>
`
this.root = this.attachShadow({ mode: 'open' })
this.root.appendChild(this.template.content.cloneNode(true))
this.button = this.root.querySelector('button')
if (this.button) {
const listener = () => {
this.button.removeEventListener('click', listener)
this.#install()
.then(() => {
this.replaceWith(new this.constructor())
console.log('now show version info, and a gif showing pear command line help output run through')
})
.catch((err) => this.#error(err))
}
this.button.addEventListener('click', listener)
}
this.shadowRoot.querySelector('button')?.addEventListener('click', () => {
this.#install().then(() => this.#render()).catch((err) => this.#error(err))
})
}
#error (err) {