hermes/meshtastic-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update deps & minor UI cleanup

Browse Source
This commit is contained in:
Sacha Weatherstone
2021-05-01 19:39:45 +10:00
parent a9d726cf5d
commit 2ea9e37569
12 changed files with 1178 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ChatMessage.tsx
+8 -5
View File
@@ -1,7 +1,10 @@
import React from 'react';
import { FaCheckCircle, FaCircle, FaUser } from 'react-icons/fa';
import {
CheckCircleIcon,
DotsCircleHorizontalIcon,
UserIcon,
} from '@heroicons/react/outline';
import type { Types } from '@meshtastic/meshtasticjs';
interface ChatMessageProps {
@@ -20,7 +23,7 @@ const ChatMessage = (props: ChatMessageProps) => {
: 'bg-green-200'
}`}
>
<FaUser className="m-auto" />
<UserIcon className="m-auto w-5 h-5" />
</div>
<div className="flex flex-col container px-2 items-start">
<div
@@ -50,9 +53,9 @@ const ChatMessage = (props: ChatMessageProps) => {
<div className="flex justify-between text-gray-600">
<span className="inline-block">{props.message.message.data}</span>
{props.message.ack ? (
<FaCheckCircle className="my-auto" />
<CheckCircleIcon className="my-auto w-5 h-5" />
) : (
<FaCircle className=" text-lg my-auto animate-pulse" />
<DotsCircleHorizontalIcon className="my-auto animate-pulse w-5 h-5" />
)}
</div>
</div>
src/components/Header.tsx
+12 -4
View File
@@ -1,7 +1,10 @@
import React from 'react';
import { FaBroadcastTower, FaMobileAlt } from 'react-icons/fa';
import {
DeviceMobileIcon,
StatusOfflineIcon,
StatusOnlineIcon,
} from '@heroicons/react/outline';
import { Types } from '@meshtastic/meshtasticjs';
import typelogo from '../../public/typelogo.svg';
@@ -32,7 +35,12 @@ const Header = (props: HeaderProps) => {
: 'bg-green-400'
}`}
></div>
<FaBroadcastTower className="m-auto ml-1 text-xl" />
{new Date(props.LastMeshInterraction) >
new Date(Date.now() - 40000) ? (
<StatusOnlineIcon className="m-auto ml-1 h-5 w-5" />
) : (
<StatusOfflineIcon className="m-auto ml-1 h-5 w-5" />
)}
</div>
<div className="flex pl-4">
@@ -48,7 +56,7 @@ const Header = (props: HeaderProps) => {
: 'bg-gray-400'
}`}
></div>
<FaMobileAlt className="m-auto ml-1 text-xl" />
<DeviceMobileIcon className="m-auto ml-1 w-5 h-5" />
</div>
</div>
</div>
src/components/NavItem.tsx
+5 -4
View File
@@ -1,6 +1,6 @@
import React from 'react';
import { FaCaretDown, FaCaretRight, FaSpinner } from 'react-icons/fa';
import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/outline';
interface NavItemProps {
isDropdown: boolean;
@@ -41,13 +41,14 @@ const NavItem = (props: NavItemProps) => {
{props.titleContent}
{props.isDropdown && !props.isLoading ? (
navItemOpen ? (
<FaCaretDown className="my-auto group-hover:text-gray-700" />
<ChevronDownIcon className="my-auto group-hover:text-gray-700 w-5 h-5" />
) : (
<FaCaretRight className="my-auto group-hover:text-gray-700" />
<ChevronRightIcon className="my-auto group-hover:text-gray-700 w-5 h-5" />
)
) : null}
{props.isLoading ? (
<FaSpinner className="animate-spin my-auto" />
// <FaSpinner className="animate-spin my-auto" />
<div>loading</div>
) : null}
</div>
{props.isDropdown ? (
src/components/Sidebar/SidebarChannels.tsx
+2 -3
View File
@@ -1,7 +1,6 @@
import React from 'react';
import { FaStream } from 'react-icons/fa';
import { HashtagIcon } from '@heroicons/react/outline';
import { Protobuf } from '@meshtastic/meshtasticjs';
import type { languageTemplate } from '../../App';
@@ -21,7 +20,7 @@ const SidebarChannels = (props: SidebarChannelsProps) => {
isNested={false}
titleContent={
<div className="flex">
<FaStream className="my-auto mr-2" />
<HashtagIcon className="my-auto mr-2 2-5 h-5" />
{props.Translations.device_channels_title}
</div>
}
src/components/Sidebar/SidebarDeviceSettings.tsx
+3 -4
View File
@@ -1,7 +1,6 @@
import React from 'react';
import { FaSave, FaUserCog } from 'react-icons/fa';
import { AdjustmentsIcon, SaveIcon } from '@heroicons/react/outline';
import { IHTTPConnection, Protobuf } from '@meshtastic/meshtasticjs';
import type { languageTemplate } from '../../App';
@@ -22,7 +21,7 @@ const SidebarDeviceSettings = (props: SidebarDeviceSettingsProps) => {
isNested={false}
titleContent={
<div className="flex">
<FaUserCog className="my-auto mr-2" />
<AdjustmentsIcon className="my-auto mr-2 w-5 h-5" />
{props.Translations.device_settings_title}
</div>
}
@@ -93,7 +92,7 @@ const SidebarDeviceSettings = (props: SidebarDeviceSettingsProps) => {
props.Connection.setPreferences(props.Preferences);
}}
>
<FaSave className="m-auto mr-2 group-hover:text-gray-700" />
<SaveIcon className="m-auto mr-2 group-hover:text-gray-700 w-5 h-5" />
{props.Translations.save_changes_button}
</div>
</div>
src/components/Sidebar/SidebarNodes.tsx
+14 -16
View File
@@ -1,15 +1,13 @@
import React from 'react';
import {
FaBatteryHalf,
FaClock,
FaCrown,
FaDesktop,
FaMapMarkerAlt,
FaMountain,
FaUsers,
} from 'react-icons/fa';
ClockIcon,
DesktopComputerIcon,
FlagIcon,
GlobeIcon,
LightningBoltIcon,
UsersIcon,
} from '@heroicons/react/outline';
import type { Types } from '@meshtastic/meshtasticjs';
import type { languageTemplate } from '../../App';
@@ -30,7 +28,7 @@ const SidebarNodes = (props: sidebarNodesProps) => {
isNested={false}
titleContent={
<div className="flex">
<FaUsers className="my-auto mr-2" />
<UsersIcon className="my-auto mr-2 w-5 h-5" />
{props.Translations.nodes_title}
<div className="flex m-auto rounded-full bg-gray-300 w-6 h-6 text-sm ml-2">
<div className="m-auto">{props.Nodes.length ?? 0}</div>
@@ -49,9 +47,9 @@ const SidebarNodes = (props: sidebarNodesProps) => {
titleContent={
<div key={index} className="flex">
{node.data.num === props.myId ? (
<FaCrown className="text-yellow-500 my-auto mr-2" />
<FlagIcon className="text-yellow-500 my-auto mr-2 w-5 h-5" />
) : (
<FaDesktop className="my-auto mr-2" />
<DesktopComputerIcon className="my-auto mr-2 w-5 h-5" />
)}
<div className="m-auto">{node.data.user?.longName}</div>
</div>
@@ -80,7 +78,7 @@ const SidebarNodes = (props: sidebarNodesProps) => {
{}
</p>
<div className="flex">
<FaMapMarkerAlt className="my-auto mr-2" />
<GlobeIcon className="my-auto mr-2 w-5 h-5" />
<p>
{node.data.position?.latitudeI},
{node.data.position?.longitudeI}
@@ -88,16 +86,16 @@ const SidebarNodes = (props: sidebarNodesProps) => {
</div>
<div className="flex">
<FaMountain className="my-auto mr-2" />
<GlobeIcon className="my-auto mr-2 w-5 h-5" />
<p>{node.data.position?.altitude}</p>
</div>
<div className="flex">
<FaClock className="my-auto mr-2" />
<ClockIcon className="my-auto mr-2 w-5 h-5" />
<p>{node.data.position?.time}</p>
</div>
<div className="flex">
<FaBatteryHalf className="my-auto mr-2" />
<LightningBoltIcon className="my-auto mr-2 w-5 h-5" />
<p>{node.data.position?.batteryLevel}</p>
</div>
</div>
src/components/Sidebar/SidebarUISettings.tsx
+6 -5
View File
@@ -1,7 +1,8 @@
import React from 'react';
import { Jp, Us, Br } from 'react-flags-select';
import { FaCog, FaLaptop, FaMoon, FaSun } from 'react-icons/fa';
import { Br, Jp, Us } from 'react-flags-select';
import { CogIcon } from '@heroicons/react/outline';
import type { languageTemplate } from '../../App';
import { LanguageEnum } from '../../App';
@@ -22,7 +23,7 @@ const SidebarUISettings = (props: SidebarUISettingsProps) => {
open={false}
titleContent={
<div className="flex">
<FaCog className="my-auto mr-2" />
<CogIcon className="my-auto mr-2 w-5 h-5" />
{props.Translations.ui_settings_title}
</div>
}
@@ -38,7 +39,7 @@ const SidebarUISettings = (props: SidebarUISettingsProps) => {
{props.Translations.color_scheme_title}
</div>
<div className="flex shadow-md rounded-md ml-2">
<div className="bg-gray-200 flex group p-2 rounded-l-md border border-gray-300 hover:bg-gray-200 cursor-pointer">
{/* <div className="bg-gray-200 flex group p-2 rounded-l-md border border-gray-300 hover:bg-gray-200 cursor-pointer">
<FaSun className="m-auto group-hover:text-gray-700" />
</div>
<div className="flex group p-2 border border-gray-300 hover:bg-gray-200 cursor-pointer">
@@ -46,7 +47,7 @@ const SidebarUISettings = (props: SidebarUISettingsProps) => {
</div>
<div className="flex group p-2 rounded-r-md border border-gray-300 hover:bg-gray-200 cursor-pointer">
<FaLaptop className="m-auto group-hover:text-gray-700" />
</div>
</div> */}
</div>
</>
}