Skip to content

Commit

Permalink
Full Micron support, dark mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@RFnexus
RFnexus committed Dec 10, 2024
1 parent 5ebd68a commit 81eff5c
Show file tree
Hide file tree
Showing 15 changed files with 262 additions and 269 deletions.
26 changes: 13 additions & 13 deletions src/frontend/components/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@

<!-- sidebar -->
<div class="bg-white flex w-72 min-w-72 flex-col dark:bg-zinc-950">
<div class="flex grow flex-col overflow-y-auto border-r border-gray-200 bg-white dark:bg-zinc-950">
<div class="flex grow flex-col overflow-y-auto border-r border-gray-200 bg-white dark:border-zinc-900 dark:bg-zinc-950">

<!-- navigation -->
<div class="flex-1">
Expand Down Expand Up @@ -134,7 +134,7 @@
<div>

<!-- my identity -->
<div v-if="config" class="bg-white border-t dark:bg-zinc-950">
<div v-if="config" class="bg-white border-t dark:border-zinc-900 dark:bg-zinc-950">
<div @click="isShowingMyIdentitySection = !isShowingMyIdentitySection" class="flex text-gray-700 p-2 cursor-pointer">
<div class="my-auto mr-2 dark:text-white">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
Expand All @@ -149,7 +149,7 @@
</button>
</div>
</div>
<div v-if="isShowingMyIdentitySection" class="divide-y text-gray-900 border-t border-gray-300 dark:text-zinc-200 dark:border-zinc-700">
<div v-if="isShowingMyIdentitySection" class="divide-y text-gray-900 border-t border-gray-300 dark:text-zinc-200 dark:border-zinc-900">
<div class="p-1">
<input
v-model="displayName"
Expand All @@ -159,19 +159,19 @@
dark:bg-zinc-800 dark:border-zinc-600 dark:text-zinc-200 dark:focus:ring-blue-400 dark:focus:border-blue-400"
>
</div>
<div class="p-1">
<div class="p-1 dark:border-zinc-900">
<div>Identity Hash</div>
<div class="text-sm text-gray-700 dark:text-zinc-400">{{ config.identity_hash }}</div>
</div>
<div class="p-1">
<div class="p-1 dark:border-zinc-900">
<div>LXMF Address</div>
<div class="text-sm text-gray-700 dark:text-zinc-400">{{ config.lxmf_address_hash }}</div>
</div>
</div>
</div>

<!-- auto announce -->
<div v-if="config" class="bg-white border-t dark:bg-zinc-950 dark:border-zinc-700">
<div v-if="config" class="bg-white border-t dark:bg-zinc-950 dark:border-zinc-900">
<div @click="isShowingAnnounceSection = !isShowingAnnounceSection" class="flex text-gray-700 p-2 cursor-pointer dark:text-white">
<div class="my-auto mr-2">
<svg
Expand Down Expand Up @@ -201,8 +201,8 @@
</button>
</div>
</div>
<div v-if="isShowingAnnounceSection" class="divide-y text-gray-900 border-t border-gray-300 dark:text-zinc-200 dark:border-zinc-700">
<div class="p-1">
<div v-if="isShowingAnnounceSection" class="divide-y text-gray-900 border-t border-gray-300 dark:text-zinc-200 dark:border-zinc-900">
<div class="p-1 dark:border-zinc-900">
<select
v-model="config.auto_announce_interval_seconds"
@change="onAnnounceIntervalSecondsChange"
Expand All @@ -227,10 +227,10 @@
</div>

<!-- audio calls -->
<div v-if="config" class="bg-white border-t dark:bg-zinc-950">
<div v-if="config" class="bg-white border-t dark:bg-zinc-950 dark:border-zinc-900">
<div @click="isShowingCallsSection = !isShowingCallsSection" class="flex text-gray-700 p-2 cursor-pointer">
<div class="my-auto mr-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="dark:text-white w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z" />
</svg>
</div>
Expand All @@ -247,11 +247,11 @@ dark:bg-zinc-800 dark:text-white dark:hover:bg-zinc-700 dark:focus-visible:outli
</a>
</div>
</div>
<div v-if="isShowingCallsSection" class="divide-y text-gray-900 border-t border-gray-300">
<div class="p-1 flex">
<div v-if="isShowingCallsSection" class="divide-y text-gray-900 border-t border-gray-300 dark:border-zinc-900">
<div class="p-1 flex dark:border-zinc-900 dark:text-white">
<div>
<div>Status</div>
<div class="text-sm text-gray-700">
<div class="text-sm text-gray-700 dark:text-white">
<div v-if="activeAudioCalls.length > 0" class="flex space-x-2">
<span v-if="activeInboundAudioCalls.length > 0">{{ activeInboundAudioCalls.length }} Incoming {{ activeInboundAudioCalls.length === 1 ? 'Call' : 'Calls' }}</span>
<span v-else>{{ activeOutboundAudioCalls.length }} Outgoing {{ activeOutboundAudioCalls.length === 1 ? 'Call' : 'Calls' }}</span>
Expand Down
63 changes: 36 additions & 27 deletions src/frontend/components/about/AboutPage.vue
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,25 @@
<template>
<div class="flex flex-col flex-1 overflow-hidden min-w-full sm:min-w-[500px]">
<div class="flex flex-col flex-1 overflow-hidden min-w-full sm:min-w-[500px] dark:bg-zinc-950">
<div class="overflow-y-auto space-y-2 p-2">

<!-- app info -->
<div v-if="appInfo" class="bg-white rounded shadow">
<div class="flex border-b border-gray-300 text-gray-700 p-2 font-semibold">App Info</div>
<div class="divide-y text-gray-900">
<div v-if="appInfo" class="bg-white dark:bg-zinc-900 rounded shadow">
<div class="flex border-b border-gray-300 dark:border-zinc-700 text-gray-700 dark:text-zinc-200 p-2 font-semibold">App Info</div>
<div class="divide-y divide-gray-200 dark:divide-zinc-800 text-gray-900 dark:text-zinc-200">

<!-- version -->
<div class="flex p-1">
<div class="mr-auto">
<div>Versions</div>
<div class="text-sm text-gray-700">MeshChat v{{ appInfo.version }} • RNS v{{ appInfo.rns_version }} • LXMF v{{ appInfo.lxmf_version }}</div>
<div class="text-sm text-gray-700 dark:text-zinc-400">
MeshChat v{{ appInfo.version }} • RNS v{{ appInfo.rns_version }} • LXMF v{{ appInfo.lxmf_version }}
</div>
</div>
<div class="hidden sm:block mx-2 my-auto">
<a target="_blank" href="https://github.com/liamcottle/reticulum-meshchat/releases" type="button" class="my-auto inline-flex items-center gap-x-1 rounded-md bg-gray-500 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500">
<a target="_blank"
href="https://github.com/liamcottle/reticulum-meshchat/releases"
type="button"
class="my-auto inline-flex items-center gap-x-1 rounded-md bg-gray-500 dark:bg-zinc-700 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 dark:hover:bg-zinc-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500 dark:focus-visible:outline-zinc-600">
Check for Updates
</a>
</div>
Expand All @@ -24,10 +29,12 @@
<div class="flex p-1">
<div class="mr-auto">
<div>Reticulum Config Path</div>
<div class="text-sm text-gray-700 break-all">{{ appInfo.reticulum_config_path }}</div>
<div class="text-sm text-gray-700 dark:text-zinc-400 break-all">{{ appInfo.reticulum_config_path }}</div>
</div>
<div v-if="isElectron" class="mx-2 my-auto">
<button @click="showReticulumConfigFile" type="button" class="my-auto inline-flex items-center gap-x-1 rounded-md bg-gray-500 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500">
<button @click="showReticulumConfigFile"
type="button"
class="my-auto inline-flex items-center gap-x-1 rounded-md bg-gray-500 dark:bg-zinc-700 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 dark:hover:bg-zinc-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500 dark:focus-visible:outline-zinc-600">
Show in Folder
</button>
</div>
Expand All @@ -37,10 +44,12 @@
<div class="flex p-1">
<div class="mr-auto">
<div>Database Path</div>
<div class="text-sm text-gray-700 break-all">{{ appInfo.database_path }}</div>
<div class="text-sm text-gray-700 dark:text-zinc-400 break-all">{{ appInfo.database_path }}</div>
</div>
<div v-if="isElectron" class="mx-2 my-auto">
<button @click="showDatabaseFile" type="button" class="my-auto inline-flex items-center gap-x-1 rounded-md bg-gray-500 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500">
<button @click="showDatabaseFile"
type="button"
class="my-auto inline-flex items-center gap-x-1 rounded-md bg-gray-500 dark:bg-zinc-700 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 dark:hover:bg-zinc-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500 dark:focus-visible:outline-zinc-600">
Show in Folder
</button>
</div>
Expand All @@ -49,57 +58,57 @@
<!-- database file size -->
<div class="p-1">
<div>Database File Size</div>
<div class="text-sm text-gray-700">{{ formatBytes(appInfo.database_file_size) }}</div>
<div class="text-sm text-gray-700 dark:text-zinc-400">{{ formatBytes(appInfo.database_file_size) }}</div>
</div>

</div>
</div>

<!-- reticulum status -->
<div v-if="appInfo" class="bg-white rounded shadow">
<div class="flex border-b border-gray-300 text-gray-700 p-2 font-semibold">Reticulum Status</div>
<div class="divide-y text-gray-900">
<div v-if="appInfo" class="bg-white dark:bg-zinc-900 rounded shadow">
<div class="flex border-b border-gray-300 dark:border-zinc-700 text-gray-700 dark:text-zinc-200 p-2 font-semibold">Reticulum Status</div>
<div class="divide-y divide-gray-200 dark:divide-zinc-800 text-gray-900 dark:text-zinc-200">

<!-- instance mode -->
<div class="p-1">
<div>Instance Mode</div>
<div class="text-sm text-gray-700">
<span v-if="appInfo.is_connected_to_shared_instance" class="text-orange-600">Connected to Shared Instance</span>
<span v-else class="text-green-600">Running as Standalone Instance</span>
<div class="text-sm text-gray-700 dark:text-zinc-400">
<span v-if="appInfo.is_connected_to_shared_instance" class="text-orange-600 dark:text-orange-400">Connected to Shared Instance</span>
<span v-else class="text-green-600 dark:text-green-400">Running as Standalone Instance</span>
</div>
</div>

<!-- transport mode -->
<div class="p-1">
<div>Transport Mode</div>
<div class="text-sm text-gray-700">
<span v-if="appInfo.is_transport_enabled" class="text-green-600">Transport Enabled</span>
<span v-else class="text-orange-600">Transport Disabled</span>
<div class="text-sm text-gray-700 dark:text-zinc-400">
<span v-if="appInfo.is_transport_enabled" class="text-green-600 dark:text-green-400">Transport Enabled</span>
<span v-else class="text-orange-600 dark:text-orange-400">Transport Disabled</span>
</div>
</div>

</div>
</div>

<!-- my addresses -->
<div v-if="config" class="bg-white rounded shadow">
<div class="flex border-b border-gray-300 text-gray-700 p-2 font-semibold">My Addresses</div>
<div class="divide-y text-gray-900">
<div v-if="config" class="bg-white dark:bg-zinc-900 rounded shadow">
<div class="flex border-b border-gray-300 dark:border-zinc-700 text-gray-700 dark:text-zinc-200 p-2 font-semibold">My Addresses</div>
<div class="divide-y divide-gray-200 dark:divide-zinc-800 text-gray-900 dark:text-zinc-200">
<div class="p-1">
<div>Identity Hash</div>
<div class="text-sm text-gray-700">{{ config.identity_hash }}</div>
<div class="text-sm text-gray-700 dark:text-zinc-400">{{ config.identity_hash }}</div>
</div>
<div class="p-1">
<div>LXMF Address</div>
<div class="text-sm text-gray-700">{{ config.lxmf_address_hash }}</div>
<div class="text-sm text-gray-700 dark:text-zinc-400">{{ config.lxmf_address_hash }}</div>
</div>
<div class="p-1">
<div>LXMF Propagation Node Address</div>
<div class="text-sm text-gray-700">{{ config.lxmf_local_propagation_node_address_hash }}</div>
<div class="text-sm text-gray-700 dark:text-zinc-400">{{ config.lxmf_local_propagation_node_address_hash }}</div>
</div>
<div class="p-1">
<div>Audio Call Address</div>
<div class="text-sm text-gray-700">{{ config.audio_call_address_hash }}</div>
<div class="text-sm text-gray-700 dark:text-zinc-400">{{ config.audio_call_address_hash }}</div>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit 81eff5c

Please sign in to comment.