feat: ux improvements

Ux improvements - added scrollbar to logs, added active environment version
EyeTrackVR · Aug 14, 2024 · ba722e6 · ba722e6
2 parents ec43ec0 + 8e1455b
commit ba722e6
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 13 deletions.
diff --git a/src/components/Terminal/Firmware/Index.tsx b/src/components/Terminal/Firmware/Index.tsx
@@ -2,13 +2,14 @@ import { Component } from 'solid-js'
 
 export interface IProps {
     version: string
+    board: string
 }
 
 const Firmware: Component<IProps> = (props) => {
     return (
-        <div class="flex w-full flex-col gap-[6px] select-none">
+        <div class="flex w-full gap-[6px] select-none">
             <p class="text-left not-italic font-[500] text-white leading-[14px] text-[16px]">
-                {props.version}
+                {props.version} {`${!props.board.trim() ? '' : `| ${props.board}`}`}
             </p>
         </div>
     )

diff --git a/src/containers/FlashFirmware/FlashFirmware.tsx b/src/containers/FlashFirmware/FlashFirmware.tsx
@@ -5,7 +5,7 @@ import { createEffect, createMemo, createSignal, onMount } from 'solid-js'
 import { debug } from 'tauri-plugin-log-api'
 import { ENotificationType, FLASH_STATUS, MODAL_TYPE } from '@interfaces/enums'
 import Terminal from '@pages/Terminal/Index'
-import { usb } from '@src/static'
+import { BoardConnectionMethod, usb } from '@src/static'
 import { download } from '@src/utils'
 import { useAppAPIContext } from '@store/context/api'
 import { useAppNotificationsContext } from '@store/context/notifications'
@@ -69,8 +69,14 @@ export const ManageFlashFirmware = () => {
         }
     })
 
+    const board = createMemo(() => {
+        const connectionMethod = BoardConnectionMethod[activeBoard().replace('_release', '')]
+        return connectionMethod ? `${activeBoard()} (${connectionMethod})` : activeBoard()
+    })
+
     return (
         <Terminal
+            board={board()}
             isUSBBoard={isUSBBoard()}
             percentageProgress={percentageProgress()}
             logs={logs()}

diff --git a/src/pages/Terminal/Index.tsx b/src/pages/Terminal/Index.tsx
@@ -21,6 +21,7 @@ export interface IProps {
     isActiveProcess: boolean
     firmwareVersion: string
     isUSBBoard: boolean
+    board: string
 }
 
 const Terminal: Component<IProps> = (props) => {
@@ -43,7 +44,7 @@ const Terminal: Component<IProps> = (props) => {
                     </div>
                     <div class="flex flex-col overflow-hidden w-full h-full bg-[#00101C] p-[24px] rounded-[12px] gap-[12px]">
                         <div class="flex p-[12px] justify-between items-center">
-                            <Firmware version={props.firmwareVersion} />
+                            <Firmware version={props.firmwareVersion} board={props.board} />
                         </div>
                         <div
                             class="flex flex-col overflow-y-auto h-full w-full scrollbar"

diff --git a/src/pages/VirtualList/Index.tsx b/src/pages/VirtualList/Index.tsx
@@ -46,6 +46,7 @@ export const VirtualList: Component<IProps> = (props) => {
 
     return (
         <div
+            class="scrollbarx scrollbar"
             ref={(el) => (parentRef = el)}
             style={{ height: height(), width: '100%', overflow: 'auto' }}>
             <div
@@ -68,6 +69,7 @@ export const VirtualList: Component<IProps> = (props) => {
                                     left: 0,
                                 }}>
                                 <pre
+                                    class="text-white"
                                     style={{
                                         'white-space': item.match(/\n/) ? 'nowrap' : 'none',
                                         hyphens: 'none',

diff --git a/src/static/index.ts b/src/static/index.ts
@@ -65,6 +65,22 @@ export const BoardDescription: {
     [BOARD_TYPE.XIAOSENSES_3_USB]: "SeedStudio's XIAO ESP32-S3 Sense (wired mode)",
 }
 
+export const BoardConnectionMethod: {
+    [key in BOARD_TYPE]: string
+} = {
+    [BOARD_TYPE.ESP_32_AI_THINKER]: 'wireless mode',
+    [BOARD_TYPE.ESP_32]: 'wireless mode',
+    [BOARD_TYPE.ESP_32_M_5_STACK]: 'wireless mode',
+    [BOARD_TYPE.ESP_32_W_ROVER]: 'wireless mode',
+    [BOARD_TYPE.ESP_EYE]: 'wireless mode',
+    [BOARD_TYPE.WROOMS_3]: 'wireless mode',
+    [BOARD_TYPE.WROOMS_3_QIO]: 'wireless mode',
+    [BOARD_TYPE.WROOMS_3_USB]: 'wired mode',
+    [BOARD_TYPE.WROOMS_3QIOUSB]: 'wired mode',
+    [BOARD_TYPE.XIAOSENSES_3]: 'wireless mode',
+    [BOARD_TYPE.XIAOSENSES_3_USB]: 'wired mode',
+}
+
 export const ChannelOptions: Record<CHANNEL_TYPE, IChannelOptions> = {
     [CHANNEL_TYPE.OFFICIAL]: {
         label: CHANNEL_TYPE.OFFICIAL,

diff --git a/src/styles/scrollbar.css b/src/styles/scrollbar.css
@@ -18,19 +18,24 @@
     border-radius: 12px;
 }
 
-.scrollbarx::-webkit-scrollbar {
-    width: 2px;
-    height: 4px;
+.scrollbarx {
+    overflow-y: auto;
+    overflow-x: hidden;
 }
 
-/* Track */
-.scrollbarx::-webkit-scrollbar-track {
-    border-radius: 10px;
+.scrollbar::-webkit-scrollbar {
+    width: 6px;
 }
 
-/* Handle */
-.scrollbarx::-webkit-scrollbar-thumb {
-    margin-left: 2px;
+.scrollbarx::-webkit-scrollbar:horizontal {
+    height: 0px;
+}
+
+.scrollbarx::-webkit-scrollbar-thumb:vertical {
     background: #9092ff;
     border-radius: 12px;
 }
+
+.scrollbarx::-webkit-scrollbar-track:vertical {
+    border-radius: 10px;
+}