mirror
/
meshastic.web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Update deps & minor UI cleanup

pull/1/head
Sacha Weatherstone 5 years ago
parent
a9d726cf5d
commit
2ea9e37569
12 changed files with 1178 additions and 118 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      .vscode/settings.json
  2. 20
      package.json
  3. 11
      src/Main.tsx
  4. 13
      src/components/ChatMessage.tsx
  5. 16
      src/components/Header.tsx
  6. 9
      src/components/NavItem.tsx
  7. 5
      src/components/Sidebar/SidebarChannels.tsx
  8. 7
      src/components/Sidebar/SidebarDeviceSettings.tsx
  9. 30
      src/components/Sidebar/SidebarNodes.tsx
  10. 11
      src/components/Sidebar/SidebarUISettings.tsx
  11. 6
      web-test-runner.config.js
  12. 1162
      yarn.lock

6
.vscode/settings.json
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
Write Preview
Loading…
Cancel
Save