fix(web-ui): modernize UI (#4631)
This commit is contained in:
David Lane
GitHub
parent
76b3a8596f
commit
3ce39b36d0
19 changed files with 3529 additions and 456 deletions
|
|
@ -10,77 +10,115 @@
|
|||
<div id="content" class="container">
|
||||
<h1 class="my-4">{{ $t('index.welcome') }}</h1>
|
||||
<p>{{ $t('index.description') }}</p>
|
||||
<div class="alert alert-danger" v-if="fancyLogs.find(x => x.level === 'Fatal')">
|
||||
<div style="line-height: 32px;">
|
||||
<i class="fas fa-circle-exclamation" style="font-size: 32px;margin-right: 0.25em;"></i>
|
||||
<p v-html="$t('index.startup_errors')"></p>
|
||||
<br>
|
||||
|
||||
<!-- Fatal Errors Alert -->
|
||||
<div class="alert alert-danger my-4" v-if="fancyLogs.find(x => x.level === 'Fatal')">
|
||||
<div>
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<alert-circle :size="32" class="icon-lg me-3"></alert-circle>
|
||||
<div v-html="$t('index.startup_errors')"></div>
|
||||
</div>
|
||||
<ul class="mb-3">
|
||||
<li v-for="v in fancyLogs.filter(x => x.level === 'Fatal')">{{v.value}}</li>
|
||||
</ul>
|
||||
<a class="btn btn-danger" href="./troubleshooting#logs">
|
||||
<file-text :size="18" class="icon"></file-text>
|
||||
View Logs
|
||||
</a>
|
||||
</div>
|
||||
<ul>
|
||||
<li v-for="v in fancyLogs.filter(x => x.level === 'Fatal')">{{v.value}}</li>
|
||||
</ul>
|
||||
<a class="btn btn-danger" href="./troubleshooting#logs">View Logs</a>
|
||||
</div>
|
||||
|
||||
<!-- ViGEmBus Warning -->
|
||||
<div class="alert alert-warning" v-if="platform === 'windows' && controllerEnabled && vigembus && (!vigembus.installed || !vigembus.version_compatible)">
|
||||
<div style="line-height: 32px;">
|
||||
<i class="fas fa-triangle-exclamation" style="font-size: 32px;margin-right: 0.25em;"></i>
|
||||
<div v-if="!vigembus.installed">
|
||||
<p><strong>{{ $t('index.vigembus_not_installed_title') }}</strong></p>
|
||||
<p>{{ $t('index.vigembus_not_installed_desc') }}</p>
|
||||
<div class="alert alert-warning my-4" v-if="platform === 'windows' && controllerEnabled && vigembus && (!vigembus.installed || !vigembus.version_compatible)">
|
||||
<div>
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<alert-triangle :size="32" class="icon-lg me-3"></alert-triangle>
|
||||
<div>
|
||||
<div v-if="!vigembus.installed">
|
||||
<p class="mb-1"><strong>{{ $t('index.vigembus_not_installed_title') }}</strong></p>
|
||||
<p class="mb-0">{{ $t('index.vigembus_not_installed_desc') }}</p>
|
||||
</div>
|
||||
<div v-else-if="!vigembus.version_compatible">
|
||||
<p class="mb-1"><strong>{{ $t('index.vigembus_outdated_title') }}</strong></p>
|
||||
<p class="mb-0">{{ $t('index.vigembus_outdated_desc', { version: vigembus.version }) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="!vigembus.version_compatible">
|
||||
<p><strong>{{ $t('index.vigembus_outdated_title') }}</strong></p>
|
||||
<p>{{ $t('index.vigembus_outdated_desc', { version: vigembus.version }) }}</p>
|
||||
</div>
|
||||
<a class="btn btn-warning" href="./troubleshooting#vigembus">{{ $t('index.fix_now') }}</a>
|
||||
<a class="btn btn-warning" href="./troubleshooting#vigembus">
|
||||
<wrench :size="18" class="icon"></wrench>
|
||||
{{ $t('index.fix_now') }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Version -->
|
||||
<div class="card p-2 my-4">
|
||||
<div class="card my-4">
|
||||
<div class="card-body" v-if="version">
|
||||
<h2>Version {{version.version}}</h2>
|
||||
<br>
|
||||
<div v-if="loading">
|
||||
|
||||
<div v-if="loading" class="my-3">
|
||||
{{ $t('index.loading_latest') }}
|
||||
</div>
|
||||
<div class="alert alert-success" v-if="buildVersionIsDirty">
|
||||
|
||||
<div class="alert alert-success my-3" v-if="buildVersionIsDirty">
|
||||
<package :size="18" class="icon"></package>
|
||||
{{ $t('index.version_dirty') }} 🌇
|
||||
</div>
|
||||
<div class="alert alert-info" v-if="installedVersionNotStable">
|
||||
|
||||
<div class="alert alert-info my-3" v-if="installedVersionNotStable">
|
||||
<info :size="18" class="icon"></info>
|
||||
{{ $t('index.installed_version_not_stable') }}
|
||||
</div>
|
||||
|
||||
<div v-else-if="(!preReleaseBuildAvailable || !notifyPreReleases) && !stableBuildAvailable && !buildVersionIsDirty">
|
||||
<div class="alert alert-success">
|
||||
<div class="alert alert-success my-3">
|
||||
<check-circle :size="18" class="icon"></check-circle>
|
||||
{{ $t('index.version_latest') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="notifyPreReleases && preReleaseBuildAvailable">
|
||||
<div class="alert alert-warning">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div class="my-2">
|
||||
<p>{{ $t('index.new_pre_release') }}</p>
|
||||
<div class="alert alert-warning my-3">
|
||||
<!-- header row -->
|
||||
<div class="d-flex align-items-center justify-content-between gap-3 flex-wrap mb-3">
|
||||
<div class="d-flex align-items-center gap-3 flex-wrap">
|
||||
<alert-circle :size="18" class="icon"></alert-circle>
|
||||
<span>{{ $t('index.new_pre_release') }}</span>
|
||||
<h5 class="mb-0">{{ preReleaseVersion.release.name }}</h5>
|
||||
</div>
|
||||
<a class="btn btn-success m-1" :href="preReleaseVersion.release.html_url" target="_blank">{{ $t('index.download') }}</a>
|
||||
<a class="btn btn-success flex-shrink-0" :href="preReleaseVersion.release.html_url" target="_blank">
|
||||
<download :size="18" class="icon"></download>
|
||||
{{ $t('index.download') }}
|
||||
</a>
|
||||
</div>
|
||||
<h3>{{preReleaseVersion.release.name}}</h3>
|
||||
<div class="markdown-body" v-html="convertMarkdownToHtml(preReleaseVersion.release.body)"></div>
|
||||
|
||||
<!-- body row (full width) -->
|
||||
<div class="markdown-body release-notes" v-html="convertMarkdownToHtml(preReleaseVersion.release.body)"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="stableBuildAvailable">
|
||||
<div class="alert alert-warning">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div class="my-2">
|
||||
<p>{{ $t('index.new_stable') }}</p>
|
||||
<div class="alert alert-warning my-3">
|
||||
<!-- header row -->
|
||||
<div class="d-flex align-items-center justify-content-between gap-3 flex-wrap mb-3">
|
||||
<div class="d-flex align-items-center gap-3 flex-wrap">
|
||||
<alert-circle :size="18" class="icon"></alert-circle>
|
||||
<span>{{ $t('index.new_stable') }}</span>
|
||||
<h5 class="mb-0">{{ githubVersion.release.name }}</h5>
|
||||
</div>
|
||||
<a class="btn btn-success m-1" :href="githubVersion.release.html_url" target="_blank">{{ $t('index.download') }}</a>
|
||||
<a class="btn btn-success flex-shrink-0" :href="githubVersion.release.html_url" target="_blank">
|
||||
<download :size="18" class="icon"></download>
|
||||
{{ $t('index.download') }}
|
||||
</a>
|
||||
</div>
|
||||
<h3>{{githubVersion.release.name}}</h3>
|
||||
<div class="markdown-body" v-html="convertMarkdownToHtml(githubVersion.release.body)"></div>
|
||||
|
||||
<!-- body row (full width) -->
|
||||
<div class="markdown-body release-notes" v-html="convertMarkdownToHtml(githubVersion.release.body)"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Resources -->
|
||||
<div class="my-4">
|
||||
<Resource-Card></Resource-Card>
|
||||
|
|
@ -95,6 +133,16 @@
|
|||
import Navbar from './Navbar.vue'
|
||||
import ResourceCard from './ResourceCard.vue'
|
||||
import SunshineVersion from './sunshine_version'
|
||||
import {
|
||||
AlertCircle,
|
||||
AlertTriangle,
|
||||
FileText,
|
||||
Wrench,
|
||||
Package,
|
||||
Info,
|
||||
CheckCircle,
|
||||
Download
|
||||
} from 'lucide-vue-next'
|
||||
|
||||
// Configure marked to allow HTML
|
||||
marked.setOptions({
|
||||
|
|
@ -109,7 +157,15 @@
|
|||
let app = createApp({
|
||||
components: {
|
||||
Navbar,
|
||||
ResourceCard
|
||||
ResourceCard,
|
||||
AlertCircle,
|
||||
AlertTriangle,
|
||||
FileText,
|
||||
Wrench,
|
||||
Package,
|
||||
Info,
|
||||
CheckCircle,
|
||||
Download
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -200,3 +256,4 @@
|
|||
|
||||
initApp(app);
|
||||
</script>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue