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

feat(ui): restyle file browser, file view, and home sidebar with tokens

Browse source 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Your Name 2026-07-27 20:56:40 -04:00
parent cda28b69c5
commit 91fe355807
3 changed files with 15 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
desktop/src/views/Home.vue
View file

@ -1,21 +1,21 @@
<template> <template>
<div class="home h-full overflow-hidden"> <div class="home h-full overflow-hidden">
<div class="flex flex-row h-full"> <div class="flex flex-row h-full">
<div class="flex-shrink-0 border-r w-64"> <div class="flex-shrink-0 border-r border-edge w-64">
<device-select v-model:selected="selectedCalculator"/> <device-select v-model:selected="selectedCalculator"/>
<div class="overflow-auto h-full px-4 py-4"> <div class="overflow-auto h-full px-4 py-4">
<div v-if="needsDrivers && !isLinux"> <div v-if="needsDrivers && !isLinux">
<h1 class="text-3xl">Drivers required</h1> <h1 class="text-3xl">Drivers required</h1>
<p>The WinUSB driver is required to use this device.</p> <p>The WinUSB driver is required to use this device.</p>
<p class="text-center mt-2"> <p class="text-center mt-2">
<a href="#" @click.prevent="installDrivers()" class="text-blue-600">See installation instructions</a> <a href="#" @click.prevent="installDrivers()" class="text-accent">See installation instructions</a>
</p> </p>
</div> </div>
<div v-else-if="needsDrivers && isLinux"> <div v-else-if="needsDrivers && isLinux">
<h1 class="text-3xl">udev rules required</h1> <h1 class="text-3xl">udev rules required</h1>
<p>udev rules are required to access this device.</p> <p>udev rules are required to access this device.</p>
<p class="text-center mt-2"> <p class="text-center mt-2">
<a href="#" @click.prevent="installDrivers('linux')" class="text-blue-600">See installation <a href="#" @click.prevent="installDrivers('linux')" class="text-accent">See installation
instructions</a> instructions</a>
</p> </p>
</div> </div>
@ -25,8 +25,8 @@
<div v-else-if="calculator && calculator.info"> <div v-else-if="calculator && calculator.info">
<calc-info :info="calculator.info" :dev="selectedCalculator!"/> <calc-info :info="calculator.info" :dev="selectedCalculator!"/>
<label class="inline-flex items-center cursor-pointer mr-2 mt-4"> <label class="inline-flex items-center cursor-pointer mr-2 mt-4">
<input type="checkbox" class="h-5 w-5 text-blue-600 cursor-pointer" v-model="showHidden"> <input type="checkbox" class="h-5 w-5 text-accent cursor-pointer" v-model="showHidden">
<span class="mx-2 text-gray-700 select-none">Include hidden files</span> <span class="mx-2 text-muted select-none">Include hidden files</span>
</label> </label>
</div> </div>
</div> </div>
@ -107,7 +107,7 @@ function installDrivers(platform = 'windows') {
} }
.lds-dual-ring:after { .lds-dual-ring:after {
$color: theme('colors.gray.400'); $color: var(--muted);
content: " "; content: " ";
display: block; display: block;
width: 64px; width: 64px;

14
n-link-core/components/FileBrowser.vue
View file

@ -1,11 +1,11 @@
<template> <template>
<div class="h-full"> <div class="h-full">
<div class="border-b py-2 px-2 header flex"> <div class="border-b border-edge py-2 px-2 header flex">
<ol class="flex"> <ol class="flex">
<li v-for="(part, i) in parts" :key="i" class="" :class="{active: i === parts.length - 1}"> <li v-for="(part, i) in parts" :key="i" class="" :class="{active: i === parts.length - 1}">
<span class="inline-block cursor-pointer bg-gray-200 px-4 py-1 rounded-full" <span class="inline-block cursor-pointer bg-raised text-fg px-4 py-1 rounded-full"
@click="goToIndex(i)">{{ part || 'Home' }}</span> @click="goToIndex(i)">{{ part || 'Home' }}</span>
<img v-if="i < parts.length - 1" class="inline img-fix" :src="chevronRight"/> <icon v-if="i < parts.length - 1" name="chevron-right" :size="16" class="inline text-muted"/>
</li> </li>
</ol> </ol>
<div class="flex-grow"/> <div class="flex-grow"/>
@ -19,7 +19,7 @@
<div class="lds-dual-ring"/> <div class="lds-dual-ring"/>
</div> </div>
</div> </div>
<div class="overflow-auto h-full px-4 pt-4 w-48 flex-shrink-0 border-l"> <div class="overflow-auto h-full px-4 pt-4 w-48 flex-shrink-0 border-l border-edge">
<file-data :files="selected" :show-hidden="showHidden" :dev="dev" :path="path" :native-upload="nativeUpload"/> <file-data :files="selected" :show-hidden="showHidden" :dev="dev" :path="path" :native-upload="nativeUpload"/>
</div> </div>
</div> </div>
@ -32,7 +32,7 @@ import FileView from './FileView.vue';
import {DEVICES_KEY, type GenericDevices, type FileInfo} from './devices'; import {DEVICES_KEY, type GenericDevices, type FileInfo} from './devices';
import FileData from './FileData.vue'; import FileData from './FileData.vue';
import DeviceQueue from './DeviceQueue.vue'; import DeviceQueue from './DeviceQueue.vue';
import chevronRight from 'feather-icons/dist/icons/chevron-right.svg'; import Icon from './Icon.vue';
const devices = inject(DEVICES_KEY) as GenericDevices; const devices = inject(DEVICES_KEY) as GenericDevices;
@ -108,7 +108,7 @@ function goToIndex(i: number) {
} }
.active span { .active span {
@apply bg-blue-500 text-white; @apply bg-accent text-accent-fg;
} }
.img-fix { .img-fix {
@ -122,7 +122,7 @@ function goToIndex(i: number) {
} }
.lds-dual-ring:after { .lds-dual-ring:after {
$color: theme('colors.gray.400'); $color: var(--muted);
content: " "; content: " ";
display: block; display: block;
width: 64px; width: 64px;

5
n-link-core/components/FileView.vue
View file

@ -69,10 +69,9 @@ function shiftSelection(item: number) {
<style scoped lang="scss"> <style scoped lang="scss">
.selected { .selected {
background-color: #4d88e8; @apply rounded bg-selected;
@apply rounded;
p { p {
@apply text-white; @apply text-fg;
} }
} }
</style> </style>