mirrors/n-link
1
0
Fork 0
mirror of https://github.com/lights0123/n-link.git synced 2026-08-08 10:43:29 +00:00
Code Issues Projects Releases Wiki Activity

feat(ui): restyle CalcInfo with AppButton and ProgressBar

Browse source 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Your Name 2026-07-27 20:31:19 -04:00
parent c38b99d7c8
commit b3d621cd6d
1 changed files with 13 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
n-link-core/components/CalcInfo.vue
View file

@ -5,35 +5,29 @@
<h3 class="text-center text-xs select-text">{{ info.id }}</h3> <h3 class="text-center text-xs select-text">{{ info.id }}</h3>
<br> <br>
<div :title="`${formatSize(info.free_storage)} free`"> <div :title="`${formatSize(info.free_storage)} free`">
<small class="block select-text"> <small class="block select-text text-muted">
Storage: {{ formatSize(info.total_storage - info.free_storage) }} / {{ formatSize(info.total_storage) }} used Storage: {{ formatSize(info.total_storage - info.free_storage) }} / {{ formatSize(info.total_storage) }} used
</small> </small>
<div class="mb-2 bg-gray-300 rounded-full"> <progress-bar class="mb-2" :fraction="1 - info.free_storage / info.total_storage" color="accent"/>
<div :style="{width: `${100 - (info.free_storage / info.total_storage) * 100}%`}"
class="bg-blue-500 py-1 rounded-full"/>
</div>
</div> </div>
<div :title="`${formatSize(info.free_ram)} free`"> <div :title="`${formatSize(info.free_ram)} free`">
<small class="block select-text"> <small class="block select-text text-muted">
RAM: {{ formatSize(info.total_ram - info.free_ram) }} / {{ formatSize(info.total_ram) }} used RAM: {{ formatSize(info.total_ram - info.free_ram) }} / {{ formatSize(info.total_ram) }} used
</small> </small>
<div class="mb-2 bg-gray-300 rounded-full"> <progress-bar class="mb-2" :fraction="1 - info.free_ram / info.total_ram" color="ok"/>
<div :style="{width: `${100 - (info.free_ram / info.total_ram) * 100}%`}"
class="bg-teal-400 py-1 rounded-full"/>
</div>
</div> </div>
<small class="block select-text">Boot1: {{ formatVersion(info.boot1_version) }}</small> <small class="block select-text">Boot1: {{ formatVersion(info.boot1_version) }}</small>
<small class="block select-text">Boot2: {{ formatVersion(info.boot2_version) }}</small> <small class="block select-text">Boot2: {{ formatVersion(info.boot2_version) }}</small>
<button class="mt-4 button" @click="refresh" :disabled="refreshing"> <app-button class="mt-4" :disabled="refreshing" @click="refresh">
<div class="flex"> <div class="flex">
<div v-if="refreshing" class="lds-dual-ring"/> <div v-if="refreshing" class="lds-dual-ring"/>
Refresh Refresh
</div> </div>
</button> </app-button>
<button class="mt-4 button gray-button" <app-button class="mt-4" variant="secondary"
@click="nativeUpload ? upload?.click() : $devices.uploadOs(dev, osExtension)"> @click="nativeUpload ? upload?.click() : $devices.uploadOs(dev, osExtension)">
Upload OS Upload OS
</button> </app-button>
<input v-if="nativeUpload" ref="upload" type="file" class="hidden" :accept="info.os_extension" <input v-if="nativeUpload" ref="upload" type="file" class="hidden" :accept="info.os_extension"
@change="uploadNative"/> @change="uploadNative"/>
</div> </div>
@ -43,6 +37,8 @@
import {computed, inject, ref} from 'vue'; import {computed, inject, ref} from 'vue';
import {DEVICES_KEY, type GenericDevices, type Info, type Version} from './devices'; import {DEVICES_KEY, type GenericDevices, type Info, type Version} from './devices';
import {filesize} from 'filesize'; import {filesize} from 'filesize';
import AppButton from './AppButton.vue';
import ProgressBar from './ProgressBar.vue';
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
info: Info; info: Info;
@ -86,22 +82,6 @@ function uploadNative(e: Event) {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.button {
@apply bg-blue-500 text-white rounded px-6 py-2.5 font-bold;
&:disabled {
cursor: not-allowed;
opacity: 0.75;
}
&:focus {
outline: none;
}
}
.gray-button {
@apply bg-gray-400 text-gray-800;
}
.lds-dual-ring { .lds-dual-ring {
$scale-factor: 0.2; $scale-factor: 0.2;
margin-right: 64px * $scale-factor + 8px; margin-right: 64px * $scale-factor + 8px;
@ -118,8 +98,8 @@ function uploadNative(e: Event) {
height: 64px; height: 64px;
margin: 8px; margin: 8px;
border-radius: 50%; border-radius: 50%;
border: 6px solid white; border: 6px solid var(--accent-fg);
border-color: white transparent white transparent; border-color: var(--accent-fg) transparent var(--accent-fg) transparent;
animation: lds-dual-ring 1.2s linear infinite; animation: lds-dual-ring 1.2s linear infinite;
} }