show version in grey box for every screen

This commit is contained in:
rafapaezbas
2024-02-02 12:51:13 +01:00
parent 6526255dee
commit c8cf6d82d1
2 changed files with 26 additions and 19 deletions

View File

@@ -193,6 +193,22 @@
top: 156px top: 156px
} }
#version {
position: fixed;
top: 95vh;
font-size: 75%;
background: #5c5c5c;
color: black;
opacity: 1;
padding: 10px;
padding-top: 5px;
padding-bottom: 0px;
border-radius: 8px;
}
#version:hover {
top: 90vh;
}
a:visited, a:visited,
a:active, a:active,
@@ -272,8 +288,17 @@
<section> <section>
<div class="col"><developer-tooling></devtools></div> <div class="col"><developer-tooling></devtools></div>
</section> </section>
<section id="version">
<p id="platform-version"></p>
<p id="app-version"></p>
</section>
<script> <script>
process.env.WS_NO_BUFFER_UTIL = false // Squashing an error from the 'ws' module process.env.WS_NO_BUFFER_UTIL = false // Squashing an error from the 'ws' module
const { versions } = Pear
versions().then(({ app, platform }) => {
document.querySelector('#platform-version').innerText = `Pear version: ${platform.fork}.${platform.length}.${platform.key}`
document.querySelector('#app-version').innerText = `App version: ${app.fork}.${app.length}.${app.key}`
})
</script> </script>
<script type='module' src='./lib/devtools.js'></script> <script type='module' src='./lib/devtools.js'></script>
</app-router> </app-router>

View File

@@ -3,7 +3,7 @@ import os from 'os'
import fs from 'fs' import fs from 'fs'
import path from 'path' import path from 'path'
import { spawn } from 'child_process' import { spawn } from 'child_process'
const { config, versions } = Pear const { config } = Pear
const BIN = path.join(config.pearDir, 'bin') const BIN = path.join(config.pearDir, 'bin')
const isWin = process.platform === 'win32' const isWin = process.platform === 'win32'
@@ -27,13 +27,6 @@ customElements.define('pear-welcome', class extends HTMLElement {
font-family: 'overpass-mono'; font-family: 'overpass-mono';
border-radius: 1px; border-radius: 1px;
} }
#version {
position: fixed;
top: 90vh;
font-size: 75%;
color: #efeaea;
opacity: 0.5;
}
</style> </style>
<blockquote> <blockquote>
<p> Pear is in the system PATH and ready to go .</p> <p> Pear is in the system PATH and ready to go .</p>
@@ -47,22 +40,11 @@ customElements.define('pear-welcome', class extends HTMLElement {
<video width="420" height="390" autoplay muted> <video width="420" height="390" autoplay muted>
<source src="./assets/usage.mp4" type="video/mp4"> <source src="./assets/usage.mp4" type="video/mp4">
</video> </video>
<section id="version">
<p id="platform-version"></p>
<p id="app-version"></p>
</section>
` `
this.root = this.attachShadow({ mode: 'open' }) this.root = this.attachShadow({ mode: 'open' })
this.root.appendChild(this.template.content.cloneNode(true)) this.root.appendChild(this.template.content.cloneNode(true))
} }
connectedCallback () {
versions().then(({ app, platform }) => {
this.root.querySelector('#platform-version').innerText = 'Pear version: ' + platform.key + '_' + platform.length
this.root.querySelector('#app-version').innerText = 'App version: ' + app.key + '_' + app.length
})
}
}) })
customElements.define('system-status', class extends HTMLElement { customElements.define('system-status', class extends HTMLElement {