mirror of
https://git.quad4.io/RNS-Things/MeshChatX.git
synced 2026-06-09 12:31:51 +00:00
refactor(ui): update background styles and padding for consistency across multiple page components
This commit is contained in:
Ivan
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col flex-1 overflow-hidden min-w-0 bg-gradient-to-br from-slate-50 via-slate-100 to-white dark:from-zinc-950 dark:via-zinc-900 dark:to-zinc-900"
|
||||
>
|
||||
<div class="flex-1 overflow-y-auto w-full px-4 md:px-5 lg:px-8 py-6">
|
||||
<div class="flex flex-col flex-1 overflow-hidden min-w-0 bg-slate-50 dark:bg-zinc-950">
|
||||
<div
|
||||
class="flex-1 overflow-y-auto w-full px-4 md:px-5 lg:px-8 py-6 pb-[max(1.5rem,env(safe-area-inset-bottom))]"
|
||||
>
|
||||
<div class="space-y-4 w-full max-w-5xl mx-auto">
|
||||
<div class="glass-card space-y-5">
|
||||
<div class="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<div
|
||||
class="flex flex-col flex-1 overflow-hidden min-w-0 bg-gradient-to-br from-slate-50 via-slate-100 to-white dark:from-zinc-950 dark:via-zinc-900 dark:to-zinc-900"
|
||||
>
|
||||
<div class="flex-1 overflow-y-auto w-full px-4 md:px-5 lg:px-8 py-6">
|
||||
<div class="flex flex-col flex-1 overflow-hidden min-w-0 bg-slate-50 dark:bg-zinc-950">
|
||||
<div
|
||||
class="flex-1 overflow-y-auto w-full px-4 md:px-5 lg:px-8 py-6 pb-[max(1.5rem,env(safe-area-inset-bottom))]"
|
||||
>
|
||||
<div class="space-y-4 w-full max-w-4xl mx-auto">
|
||||
<div class="glass-card space-y-5">
|
||||
<div class="space-y-2">
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col flex-1 overflow-hidden min-w-0 bg-gradient-to-br from-slate-50 via-slate-100 to-white dark:from-zinc-950 dark:via-zinc-900 dark:to-zinc-900"
|
||||
>
|
||||
<div class="flex-1 overflow-y-auto w-full px-4 md:px-5 lg:px-8 py-6">
|
||||
<div class="flex flex-col flex-1 overflow-hidden min-w-0 bg-slate-50 dark:bg-zinc-950">
|
||||
<div
|
||||
class="flex-1 overflow-y-auto w-full px-4 md:px-5 lg:px-8 py-6 pb-[max(1.5rem,env(safe-area-inset-bottom))]"
|
||||
>
|
||||
<div class="space-y-4 w-full max-w-4xl mx-auto">
|
||||
<div class="glass-card space-y-5">
|
||||
<div class="space-y-2">
|
||||
@@ -46,40 +46,47 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 border-b border-gray-200 dark:border-zinc-700">
|
||||
<button
|
||||
:class="[
|
||||
activeTab === 'send'
|
||||
? 'border-b-2 border-blue-500 text-blue-600 dark:text-blue-400'
|
||||
: 'text-gray-600 dark:text-gray-400',
|
||||
'px-4 py-2 font-semibold transition',
|
||||
]"
|
||||
@click="activeTab = 'send'"
|
||||
>
|
||||
{{ $t("rncp.send_file") }}
|
||||
</button>
|
||||
<button
|
||||
:class="[
|
||||
activeTab === 'fetch'
|
||||
? 'border-b-2 border-blue-500 text-blue-600 dark:text-blue-400'
|
||||
: 'text-gray-600 dark:text-gray-400',
|
||||
'px-4 py-2 font-semibold transition',
|
||||
]"
|
||||
@click="activeTab = 'fetch'"
|
||||
>
|
||||
{{ $t("rncp.fetch_file") }}
|
||||
</button>
|
||||
<button
|
||||
:class="[
|
||||
activeTab === 'listen'
|
||||
? 'border-b-2 border-blue-500 text-blue-600 dark:text-blue-400'
|
||||
: 'text-gray-600 dark:text-gray-400',
|
||||
'px-4 py-2 font-semibold transition',
|
||||
]"
|
||||
@click="activeTab = 'listen'"
|
||||
>
|
||||
{{ $t("rncp.listen") }}
|
||||
</button>
|
||||
<div
|
||||
class="border-b border-gray-200 dark:border-zinc-700 overflow-x-auto overscroll-x-contain -mx-4 px-4 sm:mx-0 sm:px-0"
|
||||
>
|
||||
<div class="flex w-max min-w-full sm:w-auto gap-1 sm:gap-2">
|
||||
<button
|
||||
type="button"
|
||||
:class="[
|
||||
activeTab === 'send'
|
||||
? 'border-b-2 border-blue-500 text-blue-600 dark:text-blue-400'
|
||||
: 'text-gray-600 dark:text-gray-400',
|
||||
'shrink-0 px-3 sm:px-4 py-2 text-sm font-semibold transition',
|
||||
]"
|
||||
@click="activeTab = 'send'"
|
||||
>
|
||||
{{ $t("rncp.send_file") }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
:class="[
|
||||
activeTab === 'fetch'
|
||||
? 'border-b-2 border-blue-500 text-blue-600 dark:text-blue-400'
|
||||
: 'text-gray-600 dark:text-gray-400',
|
||||
'shrink-0 px-3 sm:px-4 py-2 text-sm font-semibold transition',
|
||||
]"
|
||||
@click="activeTab = 'fetch'"
|
||||
>
|
||||
{{ $t("rncp.fetch_file") }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
:class="[
|
||||
activeTab === 'listen'
|
||||
? 'border-b-2 border-blue-500 text-blue-600 dark:text-blue-400'
|
||||
: 'text-gray-600 dark:text-gray-400',
|
||||
'shrink-0 px-3 sm:px-4 py-2 text-sm font-semibold transition',
|
||||
]"
|
||||
@click="activeTab = 'listen'"
|
||||
>
|
||||
{{ $t("rncp.listen") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="activeTab === 'send'" class="space-y-4">
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col flex-1 overflow-hidden min-w-0 bg-gradient-to-br from-slate-50 via-slate-100 to-white dark:from-zinc-950 dark:via-zinc-900 dark:to-zinc-900"
|
||||
>
|
||||
<div class="flex-1 overflow-y-auto w-full px-4 md:px-5 lg:px-8 py-6">
|
||||
<div class="flex flex-col flex-1 overflow-hidden min-w-0 bg-slate-50 dark:bg-zinc-950">
|
||||
<div
|
||||
class="flex-1 overflow-y-auto w-full px-4 md:px-5 lg:px-8 py-6 pb-[max(1.5rem,env(safe-area-inset-bottom))]"
|
||||
>
|
||||
<div class="space-y-4 w-full max-w-4xl mx-auto">
|
||||
<div class="glass-card space-y-5">
|
||||
<div class="space-y-2">
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col flex-1 overflow-hidden min-w-0 bg-gradient-to-br from-slate-50 via-slate-100 to-white dark:from-zinc-950 dark:via-zinc-900 dark:to-zinc-900"
|
||||
>
|
||||
<div class="flex-1 overflow-y-auto w-full px-4 md:px-5 lg:px-8 py-6">
|
||||
<div class="flex flex-col flex-1 overflow-hidden min-w-0 bg-slate-50 dark:bg-zinc-950">
|
||||
<div
|
||||
class="flex-1 overflow-y-auto w-full px-4 md:px-5 lg:px-8 py-6 pb-[max(1.5rem,env(safe-area-inset-bottom))]"
|
||||
>
|
||||
<div class="space-y-4 w-full max-w-6xl mx-auto">
|
||||
<div class="glass-card space-y-5 rounded-2xl border border-slate-200/70 p-5 dark:border-zinc-700/80">
|
||||
<div class="space-y-2">
|
||||
|
||||
@@ -1063,6 +1063,46 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Network Visualiser -->
|
||||
<section
|
||||
v-show="matchesSearch(...sectionKeywords.visualiser)"
|
||||
class="settings-section break-inside-avoid"
|
||||
>
|
||||
<header class="settings-section__header">
|
||||
<div>
|
||||
<div class="settings-section__eyebrow">Visualiser</div>
|
||||
<h2>{{ $t("visualiser.title") }}</h2>
|
||||
<p>{{ $t("visualiser.description") }}</p>
|
||||
</div>
|
||||
</header>
|
||||
<div class="settings-section__body space-y-4">
|
||||
<label class="setting-toggle">
|
||||
<Toggle
|
||||
id="settings-visualiser-offline"
|
||||
v-model="visualiserShowDisabledInterfaces"
|
||||
@update:model-value="onVisualiserShowDisabledChange"
|
||||
/>
|
||||
<span class="setting-toggle__label">
|
||||
<span class="setting-toggle__title">{{
|
||||
$t("visualiser.show_disabled_interfaces")
|
||||
}}</span>
|
||||
</span>
|
||||
</label>
|
||||
<label class="setting-toggle">
|
||||
<Toggle
|
||||
id="settings-visualiser-discovered"
|
||||
v-model="visualiserShowDiscoveredInterfaces"
|
||||
@update:model-value="onVisualiserShowDiscoveredChange"
|
||||
/>
|
||||
<span class="setting-toggle__label">
|
||||
<span class="setting-toggle__title">{{
|
||||
$t("visualiser.show_discovered_interfaces")
|
||||
}}</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Location -->
|
||||
<section
|
||||
v-show="matchesSearch(...sectionKeywords.location)"
|
||||
@@ -2023,6 +2063,7 @@ import KeyboardShortcuts from "../../js/KeyboardShortcuts";
|
||||
import ElectronUtils from "../../js/ElectronUtils";
|
||||
import LxmfUserIcon from "../LxmfUserIcon.vue";
|
||||
import GlobalState from "../../js/GlobalState";
|
||||
import GlobalEmitter from "../../js/GlobalEmitter";
|
||||
|
||||
export default {
|
||||
name: "SettingsPage",
|
||||
@@ -2100,7 +2141,20 @@ export default {
|
||||
trustedTelemetryPeers: [],
|
||||
stickerCount: 0,
|
||||
stickerImportReplaceDuplicates: false,
|
||||
visualiserShowDisabledInterfaces: false,
|
||||
visualiserShowDiscoveredInterfaces: false,
|
||||
sectionKeywords: {
|
||||
visualiser: [
|
||||
"Visualiser",
|
||||
"Network Visualiser",
|
||||
"visualiser",
|
||||
"graph",
|
||||
"mesh",
|
||||
"visualiser.show_disabled_interfaces",
|
||||
"visualiser.show_discovered_interfaces",
|
||||
"offline",
|
||||
"discovered",
|
||||
],
|
||||
banishment: [
|
||||
"Visuals",
|
||||
"app.banishment",
|
||||
@@ -2331,8 +2385,43 @@ export default {
|
||||
this.getConfig();
|
||||
this.getTrustedTelemetryPeers();
|
||||
this.loadStickerCount();
|
||||
this.loadVisualiserDisplayPrefsFromStorage();
|
||||
},
|
||||
methods: {
|
||||
loadVisualiserDisplayPrefsFromStorage() {
|
||||
try {
|
||||
if (typeof localStorage !== "undefined") {
|
||||
this.visualiserShowDisabledInterfaces =
|
||||
localStorage.getItem("meshchatx.visualiser.showDisabledInterfaces") === "true";
|
||||
this.visualiserShowDiscoveredInterfaces =
|
||||
localStorage.getItem("meshchatx.visualiser.showDiscoveredInterfaces") === "true";
|
||||
}
|
||||
} catch {
|
||||
/* localStorage unavailable */
|
||||
}
|
||||
},
|
||||
onVisualiserShowDisabledChange(val) {
|
||||
this.visualiserShowDisabledInterfaces = val;
|
||||
try {
|
||||
if (typeof localStorage !== "undefined") {
|
||||
localStorage.setItem("meshchatx.visualiser.showDisabledInterfaces", val ? "true" : "false");
|
||||
}
|
||||
} catch {
|
||||
/* localStorage unavailable */
|
||||
}
|
||||
GlobalEmitter.emit("visualiser-display-prefs-changed");
|
||||
},
|
||||
onVisualiserShowDiscoveredChange(val) {
|
||||
this.visualiserShowDiscoveredInterfaces = val;
|
||||
try {
|
||||
if (typeof localStorage !== "undefined") {
|
||||
localStorage.setItem("meshchatx.visualiser.showDiscoveredInterfaces", val ? "true" : "false");
|
||||
}
|
||||
} catch {
|
||||
/* localStorage unavailable */
|
||||
}
|
||||
GlobalEmitter.emit("visualiser-display-prefs-changed");
|
||||
},
|
||||
async getTrustedTelemetryPeers() {
|
||||
try {
|
||||
const response = await window.api.get("/api/v1/telemetry/trusted-peers");
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
<template>
|
||||
<div class="flex flex-col flex-1 overflow-hidden min-w-0 bg-white dark:bg-zinc-950">
|
||||
<div class="flex-1 overflow-y-auto w-full px-3 sm:px-4 md:px-5 lg:px-8 py-4 sm:py-6">
|
||||
<div class="flex flex-col flex-1 overflow-hidden min-w-0 bg-slate-50 dark:bg-zinc-950">
|
||||
<div
|
||||
class="flex-1 overflow-y-auto w-full px-3 sm:px-4 md:px-5 lg:px-8 py-4 sm:py-6 pb-[max(1.5rem,env(safe-area-inset-bottom))]"
|
||||
>
|
||||
<div class="space-y-8 w-full max-w-4xl mx-auto">
|
||||
<div class="space-y-2 border-b border-gray-200 dark:border-zinc-800 pb-6">
|
||||
<div class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="flex flex-col flex-1 overflow-hidden min-w-0 bg-white dark:bg-zinc-950">
|
||||
<div class="flex-1 overflow-y-auto w-full">
|
||||
<div class="p-3 sm:p-4 max-w-5xl mx-auto w-full space-y-4">
|
||||
<div class="flex flex-col flex-1 overflow-hidden min-w-0 bg-slate-50 dark:bg-zinc-950">
|
||||
<div class="flex-1 overflow-y-auto w-full pb-[max(1rem,env(safe-area-inset-bottom))]">
|
||||
<div class="p-3 sm:p-4 md:p-6 max-w-5xl mx-auto w-full space-y-4 min-w-0">
|
||||
<!-- header -->
|
||||
<div class="border-b border-gray-200 dark:border-zinc-800 pb-4">
|
||||
<div class="flex items-start gap-3 min-w-0">
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="flex flex-col flex-1 h-full overflow-hidden bg-white dark:bg-zinc-950">
|
||||
<div class="flex flex-col flex-1 h-full min-w-0 overflow-hidden bg-slate-50 dark:bg-zinc-950">
|
||||
<!-- header -->
|
||||
<div
|
||||
class="flex flex-wrap items-center gap-2 px-3 sm:px-4 py-3 sm:py-4 bg-white dark:bg-zinc-950 border-b border-gray-200 dark:border-zinc-800"
|
||||
class="flex flex-wrap items-center gap-2 px-3 sm:px-4 md:px-6 py-3 sm:py-4 bg-slate-50 dark:bg-zinc-950 border-b border-gray-200 dark:border-zinc-800"
|
||||
>
|
||||
<div class="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
|
||||
<div class="p-2 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg shrink-0">
|
||||
@@ -34,7 +34,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 overflow-y-auto p-3 sm:p-4 md:p-6 space-y-4 sm:space-y-6">
|
||||
<div
|
||||
class="flex-1 overflow-y-auto min-w-0 p-3 sm:p-4 md:p-6 space-y-4 sm:space-y-6 pb-[max(1rem,env(safe-area-inset-bottom))]"
|
||||
>
|
||||
<!-- tabs -->
|
||||
<div class="-mx-3 sm:mx-0 overflow-x-auto border-b border-gray-200 dark:border-zinc-800">
|
||||
<div class="flex min-w-0 px-3 sm:px-0">
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="flex flex-col flex-1 h-full overflow-hidden bg-white dark:bg-zinc-950">
|
||||
<div class="flex flex-col flex-1 h-full min-w-0 overflow-hidden bg-slate-50 dark:bg-zinc-950">
|
||||
<!-- header -->
|
||||
<div class="bg-white dark:bg-zinc-900 border-b border-gray-200 dark:border-zinc-800 shadow-sm z-10">
|
||||
<div class="px-4 py-3 md:px-6 md:py-4 flex items-center justify-between gap-4">
|
||||
<div class="bg-slate-50 dark:bg-zinc-950 border-b border-gray-200 dark:border-zinc-800 shadow-sm z-10">
|
||||
<div class="px-4 py-3 md:px-6 md:py-4 flex flex-wrap items-center justify-between gap-3 md:gap-4 min-w-0">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 bg-indigo-100 dark:bg-indigo-900/30 rounded-xl shrink-0">
|
||||
<MaterialDesignIcon
|
||||
@@ -33,8 +33,10 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 overflow-y-auto">
|
||||
<div class="p-3 sm:p-4 md:p-6 max-w-5xl mx-auto space-y-4 sm:space-y-6">
|
||||
<div class="flex-1 overflow-y-auto min-w-0">
|
||||
<div
|
||||
class="p-3 sm:p-4 md:p-6 max-w-5xl mx-auto space-y-4 sm:space-y-6 pb-[max(1rem,env(safe-area-inset-bottom))]"
|
||||
>
|
||||
<!-- main input card -->
|
||||
<div
|
||||
class="rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-3 sm:p-4 md:p-6"
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="flex flex-col h-full w-full bg-white dark:bg-zinc-950 overflow-hidden min-w-0">
|
||||
<div class="flex flex-col h-full w-full bg-slate-50 dark:bg-zinc-950 overflow-hidden min-w-0">
|
||||
<!-- header -->
|
||||
<div
|
||||
class="flex flex-wrap items-center gap-2 px-3 sm:px-4 py-2 border-b border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 z-10 relative"
|
||||
class="flex flex-wrap items-center gap-2 px-3 sm:px-4 md:px-6 py-2 sm:py-3 border-b border-gray-200 dark:border-zinc-800 bg-slate-50 dark:bg-zinc-950 z-10 relative"
|
||||
>
|
||||
<div class="flex items-center gap-2 min-w-0 flex-1">
|
||||
<v-icon icon="mdi-chip" color="purple" size="24" class="shrink-0"></v-icon>
|
||||
@@ -38,7 +38,9 @@
|
||||
</div>
|
||||
|
||||
<!-- content -->
|
||||
<div class="flex-1 min-h-0 overflow-y-auto p-3 sm:p-6 space-y-4 sm:space-y-6">
|
||||
<div
|
||||
class="flex-1 min-h-0 min-w-0 overflow-y-auto p-3 sm:p-6 space-y-4 sm:space-y-6 pb-[max(1.5rem,env(safe-area-inset-bottom))]"
|
||||
>
|
||||
<!-- setup card: Select device & Firmware -->
|
||||
<div
|
||||
class="border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 rounded-lg overflow-hidden"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="flex flex-col flex-1 overflow-hidden min-w-0 bg-white dark:bg-zinc-950">
|
||||
<div class="flex-1 overflow-y-auto w-full">
|
||||
<div class="flex flex-col flex-1 overflow-hidden min-w-0 bg-slate-50 dark:bg-zinc-950">
|
||||
<div class="flex-1 overflow-y-auto w-full pb-[max(1rem,env(safe-area-inset-bottom))]">
|
||||
<div class="border-b border-gray-200 dark:border-zinc-800 px-4 py-4 md:px-6 md:py-5">
|
||||
<div class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between lg:gap-6">
|
||||
<div class="space-y-2 min-w-0 flex-1">
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col flex-1 overflow-hidden min-w-0 bg-gradient-to-br from-slate-50 via-slate-100 to-white dark:from-zinc-950 dark:via-zinc-900 dark:to-zinc-900"
|
||||
>
|
||||
<div class="flex-1 overflow-y-auto w-full px-4 md:px-5 lg:px-8 py-6">
|
||||
<div class="flex flex-col flex-1 overflow-hidden min-w-0 bg-slate-50 dark:bg-zinc-950">
|
||||
<div
|
||||
class="flex-1 overflow-y-auto w-full px-4 md:px-5 lg:px-8 py-6 pb-[max(1.5rem,env(safe-area-inset-bottom))]"
|
||||
>
|
||||
<div class="space-y-4 w-full max-w-4xl mx-auto">
|
||||
<div class="glass-card space-y-5">
|
||||
<div class="space-y-2">
|
||||
|
||||
Reference in New Issue
Block a user