mirror/web
1
0
Fork 0
mirror of https://github.com/meshtastic/web.git synced 2026-01-25 07:48:00 -05:00
Code Issues 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

6
.vscode/settings.json vendored Normal file
View File

@@ -0,0 +1,6 @@
{
"css.validate": false,
"editor.quickSuggestions": {
"strings": true
}
}

20
package.json
View File

@@ -2,34 +2,34 @@
"scripts": {
"start": "NODE_ENV=development snowpack dev",
"build": "snowpack build",
"test": "web-test-runner \"src/**/*.test.tsx\"",
"package": "yarn gzipper c build output",
"format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
"lint": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\""
},
"dependencies": {
"@headlessui/react": "^1.1.1",
"@heroicons/react": "^1.0.1",
"@meshtastic/meshtasticjs": "^0.6.9",
"add": "^2.0.6",
"react": "^17.0.0",
"react-dom": "^17.0.0",
"react-flags-select": "^2.1.2",
"react-icons": "^4.2.0",
"yarn": "^1.22.10"
},
"devDependencies": {
"@snowpack/plugin-dotenv": "^2.0.5",
"@snowpack/plugin-postcss": "^1.2.2",
"@snowpack/plugin-react-refresh": "^2.4.0",
"@snowpack/plugin-react-refresh": "^2.5.0",
"@snowpack/plugin-typescript": "^1.2.0",
"@types/react": "^17.0.0",
"@types/react": "^17.0.4",
"@types/react-dom": "^17.0.0",
"@types/snowpack-env": "^2.3.2",
"autoprefixer": "^10.2.5",
"gzipper": "^4.4.0",
"postcss": "^8.2.10",
"gzipper": "^4.5.0",
"postcss": "^8.2.13",
"postcss-cli": "^8.3.1",
"prettier": "^2.0.5",
"snowpack": "^3.0.1",
"tailwindcss": "^2.1.1",
"typescript": "^4.0.0"
"snowpack": "^3.3.7",
"tailwindcss": "^2.1.2",
"typescript": "^4.2.4"
}
}

11
src/Main.tsx
View File

@@ -1,7 +1,6 @@
import React from 'react';
import { FaBars, FaPaperPlane } from 'react-icons/fa';
import { MenuIcon, PaperAirplaneIcon } from '@heroicons/react/outline';
import type {
IHTTPConnection,
Protobuf,
@@ -76,10 +75,10 @@ const Main = (props: MainProps) => {
props.IsReady ? 'cursor-text' : 'cursor-not-allowed'
}`}
/>
<span className="z-10 h-full text-gray-400 absolute w-8 right-0 py-4">
<FaPaperPlane
<span className="flex z-10 h-full text-gray-400 absolute w-8 right-0">
<PaperAirplaneIcon
onClick={sendMessage}
className={`text-xl hover:text-gray-500 ${
className={`text-xl hover:text-gray-500 h-6 w-6 my-auto ${
props.IsReady ? 'cursor-pointer' : 'cursor-not-allowed'
}`}
/>
@@ -91,7 +90,7 @@ const Main = (props: MainProps) => {
setMobileNavOpen(!mobileNavOpen);
}}
>
<FaBars className="m-auto" />
<MenuIcon className="m-auto h-6 2-6" />
</div>
</div>
</div>

13
src/components/ChatMessage.tsx
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>

16
src/components/Header.tsx
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>

9
src/components/NavItem.tsx
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 ? (

5
src/components/Sidebar/SidebarChannels.tsx
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>
}

7
src/components/Sidebar/SidebarDeviceSettings.tsx
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>

30
src/components/Sidebar/SidebarNodes.tsx
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>

11
src/components/Sidebar/SidebarUISettings.tsx
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>
</>
}

6
web-test-runner.config.js
View File

@@ -1,6 +0,0 @@
// NODE_ENV=test - Needed by "@snowpack/web-test-runner-plugin"
process.env.NODE_ENV = 'test';
module.exports = {
plugins: [require('@snowpack/web-test-runner-plugin')()],
};

1162
yarn.lock
View File

File diff suppressed because it is too large Load Diff