RNS-Things/MeshChatX
2
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(components): update loading animations to use 'animate-spin-reverse' class for consistency

Browse Source
This commit is contained in:
ivan
2026-01-04 23:19:17 -06:00
parent 6a23727e55
commit 0492e7d7bf
11 changed files with 85 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
meshchatx/src/frontend/components/App.vue
View File

@@ -85,7 +85,7 @@
<MaterialDesignIcon <MaterialDesignIcon
icon-name="refresh" icon-name="refresh"
class="size-6" class="size-6"
:class="{ 'animate-spin': isSyncingPropagationNode }" :class="{ 'animate-spin-reverse': isSyncingPropagationNode }"
/> />
<span class="hidden sm:inline-block my-auto mx-1 text-sm font-medium">{{ <span class="hidden sm:inline-block my-auto mx-1 text-sm font-medium">{{
isSyncingPropagationNode isSyncingPropagationNode

2
meshchatx/src/frontend/components/archives/ArchivesPage.vue
View File

@@ -178,7 +178,7 @@
<!-- Rendered Content --> <!-- Rendered Content -->
<div class="flex-1 overflow-y-auto p-4 nodeContainer overscroll-contain"> <div class="flex-1 overflow-y-auto p-4 nodeContainer overscroll-contain">
<div v-if="isLoading" class="flex items-center justify-center h-full text-zinc-500"> <div v-if="isLoading" class="flex items-center justify-center h-full text-zinc-500">
<MaterialDesignIcon icon-name="refresh" class="size-8 animate-spin" /> <MaterialDesignIcon icon-name="refresh" class="size-8 animate-spin-reverse" />
</div> </div>
<div <div
v-else-if="!viewingArchive" v-else-if="!viewingArchive"

6
meshchatx/src/frontend/components/blocked/BlockedPage.vue
View File

@@ -31,7 +31,11 @@
title="Refresh" title="Refresh"
@click="loadBlockedDestinations" @click="loadBlockedDestinations"
> >
<MaterialDesignIcon icon-name="refresh" class="size-6" :class="{ 'animate-spin': isLoading }" /> <MaterialDesignIcon
icon-name="refresh"
class="size-6"
:class="{ 'animate-spin-reverse': isLoading }"
/>
</button> </button>
</div> </div>
</div> </div>

78
meshchatx/src/frontend/components/interfaces/AddInterfacePage.vue
View File

@@ -122,6 +122,7 @@
</optgroup> </optgroup>
<optgroup label="RNodes"> <optgroup label="RNodes">
<option value="RNodeInterface">RNode Interface</option> <option value="RNodeInterface">RNode Interface</option>
<option value="RNodeIPInterface">RNode IP Interface</option>
<option value="RNodeMultiInterface">RNode Multi Interface</option> <option value="RNodeMultiInterface">RNode Multi Interface</option>
</optgroup> </optgroup>
<optgroup label="IP Networks"> <optgroup label="IP Networks">
@@ -263,20 +264,49 @@
<!-- RNode interface --> <!-- RNode interface -->
<!-- interface port --> <!-- interface port -->
<div v-if="newInterfaceType === 'RNodeInterface'" class="mb-2"> <div v-if="['RNodeInterface', 'RNodeIPInterface'].includes(newInterfaceType)" class="mb-2">
<FormLabel class="mb-1">Port</FormLabel> <div v-if="newInterfaceType === 'RNodeInterface'" class="flex items-center mb-2">
<select <Toggle id="rnode-use-ip" v-model="newInterfaceRNodeUseIP" />
v-model="newInterfacePort" <FormLabel for="rnode-use-ip" class="ml-2">Connect over IP</FormLabel>
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600" </div>
>
<option v-for="comport of comports" :key="comport.device" :value="comport.device"> <div v-if="newInterfaceRNodeUseIP || newInterfaceType === 'RNodeIPInterface'" class="space-y-2">
{{ comport.device }} (Product: {{ comport.product ?? "?" }}, Serial: <div>
{{ comport.serial ?? "?" }}) <FormLabel class="mb-1">Host</FormLabel>
</option> <input
</select> v-model="newInterfaceRNodeIPHost"
<FormSubLabel> type="text"
<div class="text-blue-500 underline cursor-pointer" @click="loadComports">Reload Ports</div> placeholder="e.g: 10.0.0.1"
</FormSubLabel> class="input-field"
/>
</div>
<div>
<FormLabel class="mb-1">Port</FormLabel>
<input
v-model="newInterfaceRNodeIPPort"
type="text"
placeholder="e.g: 7633"
class="input-field"
/>
</div>
</div>
<div v-else>
<FormLabel class="mb-1">Port</FormLabel>
<select
v-model="newInterfacePort"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600"
>
<option v-for="comport of comports" :key="comport.device" :value="comport.device">
{{ comport.device }} (Product: {{ comport.product ?? "?" }}, Serial:
{{ comport.serial ?? "?" }})
</option>
</select>
<FormSubLabel>
<div class="text-blue-500 underline cursor-pointer" @click="loadComports">
Reload Ports
</div>
</FormSubLabel>
</div>
</div> </div>
<!-- interface Frequency --> <!-- interface Frequency -->
@@ -694,7 +724,7 @@
</div> </div>
<!-- RNodeInterface bitrate & link budget --> <!-- RNodeInterface bitrate & link budget -->
<ExpandingSection v-if="newInterfaceType === 'RNodeInterface'"> <ExpandingSection v-if="['RNodeInterface', 'RNodeIPInterface'].includes(newInterfaceType)">
<template #title>Calculated RNode Bitrate & Link Budget</template> <template #title>Calculated RNode Bitrate & Link Budget</template>
<template #content> <template #content>
<div class="p-2 space-y-3"> <div class="p-2 space-y-3">
@@ -908,7 +938,7 @@
</ExpandingSection> </ExpandingSection>
<!-- optional RNodeInterface settings --> <!-- optional RNodeInterface settings -->
<ExpandingSection v-if="newInterfaceType === 'RNodeInterface'"> <ExpandingSection v-if="['RNodeInterface', 'RNodeIPInterface'].includes(newInterfaceType)">
<template #title>Optional RNodeInterface Settings</template> <template #title>Optional RNodeInterface Settings</template>
<template #content> <template #content>
<div class="p-2 space-y-3"> <div class="p-2 space-y-3">
@@ -1127,6 +1157,9 @@ export default {
}, },
newInterfacePort: null, newInterfacePort: null,
newInterfaceRNodeUseIP: false,
newInterfaceRNodeIPHost: "localhost",
newInterfaceRNodeIPPort: "7633",
RNodeGHzValue: 0, RNodeGHzValue: 0,
RNodeMHzValue: 0, RNodeMHzValue: 0,
RNodekHzValue: 0, RNodekHzValue: 0,
@@ -1321,6 +1354,14 @@ export default {
// Port (For RNode, Serial, and KISS) // Port (For RNode, Serial, and KISS)
this.newInterfacePort = iface.port; this.newInterfacePort = iface.port;
if (iface.type === "RNodeInterface" && iface.port && iface.port.startsWith("tcp://")) {
this.newInterfaceType = "RNodeIPInterface";
this.newInterfaceRNodeUseIP = true;
const address = iface.port.replace("tcp://", "");
const parts = address.split(":");
this.newInterfaceRNodeIPHost = parts[0];
this.newInterfaceRNodeIPPort = parts[1] || "7633";
}
// RNode Interface // RNode Interface
this.newInterfaceFrequency = iface.frequency; this.newInterfaceFrequency = iface.frequency;
@@ -1425,7 +1466,10 @@ export default {
peers: this.I2PSettings.newInterfacePeers.join(","), peers: this.I2PSettings.newInterfacePeers.join(","),
// rnode interface // rnode interface
port: this.newInterfacePort, port:
this.newInterfaceRNodeUseIP || this.newInterfaceType === "RNodeIPInterface"
? `tcp://${this.newInterfaceRNodeIPHost}:${this.newInterfaceRNodeIPPort}`
: this.newInterfacePort,
frequency: this.calculateFrequencyInHz(), frequency: this.calculateFrequencyInHz(),
bandwidth: this.newInterfaceBandwidth, bandwidth: this.newInterfaceBandwidth,
txpower: this.newInterfaceTxpower, txpower: this.newInterfaceTxpower,

5
meshchatx/src/frontend/components/interfaces/Interface.vue
View File

@@ -194,7 +194,7 @@ export default {
case "AutoInterface": case "AutoInterface":
return "home-automation"; return "home-automation";
case "RNodeInterface": case "RNodeInterface":
return "radio-tower"; return this.iface.port && this.iface.port.startsWith("tcp://") ? "lan-connect" : "radio-tower";
case "RNodeMultiInterface": case "RNodeMultiInterface":
return "access-point-network"; return "access-point-network";
case "TCPClientInterface": case "TCPClientInterface":
@@ -226,6 +226,9 @@ export default {
if (this.iface.type === "SerialInterface") { if (this.iface.type === "SerialInterface") {
return `${this.iface.port} @ ${this.iface.speed || "9600"}bps`; return `${this.iface.port} @ ${this.iface.speed || "9600"}bps`;
} }
if (this.iface.type === "RNodeInterface" && this.iface.port && this.iface.port.startsWith("tcp://")) {
return `RNode over IP @ ${this.iface.port.replace("tcp://", "")}`;
}
if (this.iface.type === "AutoInterface") { if (this.iface.type === "AutoInterface") {
return "Auto-detect Ethernet and Wi-Fi peers"; return "Auto-detect Ethernet and Wi-Fi peers";
} }

2
meshchatx/src/frontend/components/interfaces/InterfacesPage.vue
View File

@@ -62,7 +62,7 @@
<MaterialDesignIcon <MaterialDesignIcon
:icon-name="reloadingRns ? 'refresh' : 'restart'" :icon-name="reloadingRns ? 'refresh' : 'restart'"
class="w-4 h-4" class="w-4 h-4"
:class="{ 'animate-spin': reloadingRns }" :class="{ 'animate-spin-reverse': reloadingRns }"
/> />
{{ reloadingRns ? $t("app.reloading_rns") : $t("app.reload_rns") }} {{ reloadingRns ? $t("app.reloading_rns") : $t("app.reload_rns") }}
</button> </button>

7
meshchatx/src/frontend/components/messages/ConversationViewer.vue
View File

@@ -920,9 +920,12 @@
> >
<div <div
class="size-12 rounded-2xl bg-indigo-50 dark:bg-indigo-900/20 text-indigo-600 flex items-center justify-center group-hover:scale-110 transition-transform" class="size-12 rounded-2xl bg-indigo-50 dark:bg-indigo-900/20 text-indigo-600 flex items-center justify-center group-hover:scale-110 transition-transform"
:class="{ 'animate-spin': isSyncingPropagationNode }"
> >
<MaterialDesignIcon icon-name="sync" class="size-6" /> <MaterialDesignIcon
icon-name="sync"
class="size-6"
:class="{ 'animate-spin-reverse': isSyncingPropagationNode }"
/>
</div> </div>
<span class="text-sm font-bold text-gray-900 dark:text-zinc-100">{{ <span class="text-sm font-bold text-gray-900 dark:text-zinc-100">{{
isSyncingPropagationNode ? "Syncing..." : "Sync Node" isSyncingPropagationNode ? "Syncing..." : "Sync Node"

13
meshchatx/src/frontend/components/network-visualiser/NetworkVisualiser.vue
View File

@@ -1030,17 +1030,4 @@ export default {
background-image: radial-gradient(#18181b 1px, transparent 1px); background-image: radial-gradient(#18181b 1px, transparent 1px);
background-size: 32px 32px; background-size: 32px 32px;
} }
@keyframes spin-reverse {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
.animate-spin-reverse {
animation: spin-reverse 1s linear infinite;
}
</style> </style>

2
meshchatx/src/frontend/components/rnstatus/RNStatusPage.vue
View File

@@ -27,7 +27,7 @@
<MaterialDesignIcon <MaterialDesignIcon
icon-name="refresh" icon-name="refresh"
class="w-4 h-4" class="w-4 h-4"
:class="{ 'animate-spin': isLoading }" :class="{ 'animate-spin-reverse': isLoading }"
/> />
Refresh Refresh
</button> </button>

2
meshchatx/src/frontend/components/settings/SettingsPage.vue
View File

@@ -846,7 +846,7 @@
<MaterialDesignIcon <MaterialDesignIcon
:icon-name="reloadingRns ? 'refresh' : 'restart'" :icon-name="reloadingRns ? 'refresh' : 'restart'"
class="w-5 h-5" class="w-5 h-5"
:class="{ 'animate-spin': reloadingRns }" :class="{ 'animate-spin-reverse': reloadingRns }"
/> />
<span>{{ reloadingRns ? $t("app.reloading_rns") : $t("app.reload_rns") }}</span> <span>{{ reloadingRns ? $t("app.reloading_rns") : $t("app.reload_rns") }}</span>
</button> </button>

6
meshchatx/src/frontend/components/tools/RNPathPage.vue
View File

@@ -20,7 +20,11 @@
title="Refresh" title="Refresh"
@click="refreshAll" @click="refreshAll"
> >
<MaterialDesignIcon icon-name="refresh" class="size-6" :class="{ 'animate-spin': isLoading }" /> <MaterialDesignIcon
icon-name="refresh"
class="size-6"
:class="{ 'animate-spin-reverse': isLoading }"
/>
</button> </button>
</div> </div>
</div> </div>