From 91e131389fa80314df8eebf3fc258673a64979bb Mon Sep 17 00:00:00 2001 From: Vinitha Ranganeni Date: Fri, 2 Aug 2024 08:52:55 -0700 Subject: [PATCH 1/4] installing material icons locally --- package.json | 4 ++++ src/pages/operator/html/index.html | 4 ++-- src/pages/operator/tsx/layout_components/MovementRecorder.tsx | 4 +++- 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index e675d876..610fc50f 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,10 @@ "version": "0.1.0", "private": true, "dependencies": { + "@emotion/react": "^11.13.0", + "@emotion/styled": "^11.13.0", + "@mui/icons-material": "^5.16.6", + "@mui/material": "^5.16.6", "@types/createjs": "^0.0.29", "@types/react": "^18.0.34", "@types/react-dom": "^18.0.11", diff --git a/src/pages/operator/html/index.html b/src/pages/operator/html/index.html index b7956157..f44ed486 100644 --- a/src/pages/operator/html/index.html +++ b/src/pages/operator/html/index.html @@ -7,10 +7,10 @@ /> Stretch Web Interface - + /> -->
diff --git a/src/pages/operator/tsx/layout_components/MovementRecorder.tsx b/src/pages/operator/tsx/layout_components/MovementRecorder.tsx index e64e42c4..20f1c868 100644 --- a/src/pages/operator/tsx/layout_components/MovementRecorder.tsx +++ b/src/pages/operator/tsx/layout_components/MovementRecorder.tsx @@ -7,6 +7,7 @@ import "operator/css/MovementRecorder.css"; import "operator/css/basic_components.css"; import { isMobile } from "react-device-detect"; import { RadioFunctions, RadioGroup } from "../basic_components/RadioGroup"; +import PlayCircle from "@mui/icons-material/PlayCircle"; /** All the possible button functions */ export enum MovementRecorderFunction { @@ -159,7 +160,8 @@ export const MovementRecorder = (props: { }} > - play_circle + {/* play_circle */} + Date: Fri, 2 Aug 2024 10:04:34 -0700 Subject: [PATCH 2/4] Updated icons in all components to import material icons --- src/pages/operator/css/CameraView.css | 2 +- .../tsx/basic_components/AccordionSelect.tsx | 4 ++- .../basic_components/CheckToggleButton.tsx | 4 ++- .../tsx/basic_components/Dropdown.tsx | 3 ++- .../tsx/basic_components/DropdownInput.tsx | 3 ++- .../tsx/layout_components/CameraView.tsx | 17 ++++++------ .../tsx/layout_components/DropZone.tsx | 5 ++-- .../layout_components/MovementRecorder.tsx | 14 +++++----- .../operator/tsx/layout_components/Panel.tsx | 5 ++-- .../tsx/layout_components/TextToSpeech.tsx | 14 +++++----- .../tsx/static_components/AudioControl.tsx | 8 +++--- .../tsx/static_components/CustomizeButton.tsx | 6 +++-- .../tsx/static_components/Sidebar.tsx | 27 ++++++++++--------- 13 files changed, 63 insertions(+), 49 deletions(-) diff --git a/src/pages/operator/css/CameraView.css b/src/pages/operator/css/CameraView.css index df5f30f2..4b1b2649 100644 --- a/src/pages/operator/css/CameraView.css +++ b/src/pages/operator/css/CameraView.css @@ -157,7 +157,7 @@ padding: 0px; } -.realsense-pan-tilt-grid button .material-icons { +.realsense-pan-tilt-grid button { margin: 0; font-size: xxx-large; background-color: whitesmoke; diff --git a/src/pages/operator/tsx/basic_components/AccordionSelect.tsx b/src/pages/operator/tsx/basic_components/AccordionSelect.tsx index af1b1eac..54db0b3c 100644 --- a/src/pages/operator/tsx/basic_components/AccordionSelect.tsx +++ b/src/pages/operator/tsx/basic_components/AccordionSelect.tsx @@ -1,6 +1,8 @@ import React, { useRef, useState } from "react"; import "operator/css/basic_components.css"; import { className } from "shared/util"; +import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; +import ExpandLessIcon from "@mui/icons-material/ExpandLess"; export const AccordionSelect = (props: { title: string; @@ -46,7 +48,7 @@ export const AccordionSelect = (props: { style={{ backgroundColor: props.backgroundColor }} > {props.title} - expand_more + {active ? : }
{ const { checked } = props; - const icon = checked ? "check_box" : "check_box_outline_blank"; + const icon = checked ? : ; return ( @@ -245,7 +245,7 @@ export const MovementRecorder = (props: { } }} > - play_circle + Play
diff --git a/src/pages/operator/tsx/layout_components/Panel.tsx b/src/pages/operator/tsx/layout_components/Panel.tsx index e31c0e1b..9069c83a 100644 --- a/src/pages/operator/tsx/layout_components/Panel.tsx +++ b/src/pages/operator/tsx/layout_components/Panel.tsx @@ -14,6 +14,7 @@ import { isSelected, } from "./CustomizableComponent"; import "operator/css/Panel.css"; +import AddCircleIcon from "@mui/icons-material/AddCircle"; /* TODO: @@ -189,10 +190,10 @@ export const Panel = (props: CustomizableComponentProps) => { // In customization mode show an extra plus to add a new tab props.sharedState.customizing ? ( ) : undefined } diff --git a/src/pages/operator/tsx/layout_components/TextToSpeech.tsx b/src/pages/operator/tsx/layout_components/TextToSpeech.tsx index 34f69323..16501836 100644 --- a/src/pages/operator/tsx/layout_components/TextToSpeech.tsx +++ b/src/pages/operator/tsx/layout_components/TextToSpeech.tsx @@ -5,6 +5,10 @@ import { Tooltip } from "../static_components/Tooltip"; import "operator/css/TextToSpeech.css"; import "operator/css/basic_components.css"; import { isMobile } from "react-device-detect"; +import PlayCircleIcon from "@mui/icons-material/PlayCircle"; +import StopCircleIcon from "@mui/icons-material/StopCircle"; +import SaveIcon from "@mui/icons-material/Save"; +import DeleteForeverIcon from "@mui/icons-material/DeleteForever"; /** All the possible button functions */ export enum TextToSpeechFunction { @@ -73,7 +77,7 @@ export const TextToSpeech = (props: { hideLabels: boolean }) => { }} > - play_circle + {/* Stop the playing text */} @@ -85,7 +89,7 @@ export const TextToSpeech = (props: { hideLabels: boolean }) => { }} > - stop_circle + {/* If we are on saved text, then we show a delete button, else a save button. */} @@ -102,9 +106,7 @@ export const TextToSpeech = (props: { hideLabels: boolean }) => { }} > - - delete_forever - + ) : ( @@ -117,7 +119,7 @@ export const TextToSpeech = (props: { hideLabels: boolean }) => { }} > - save + )} diff --git a/src/pages/operator/tsx/static_components/AudioControl.tsx b/src/pages/operator/tsx/static_components/AudioControl.tsx index 8ea26361..8dfa96a3 100644 --- a/src/pages/operator/tsx/static_components/AudioControl.tsx +++ b/src/pages/operator/tsx/static_components/AudioControl.tsx @@ -1,6 +1,8 @@ import "operator/css/AudioControl.css"; import { className, RemoteStream } from "shared/util"; import React from "react"; +import VolumeOffIcon from "@mui/icons-material/VolumeOff"; +import VolumeUpIcon from "@mui/icons-material/VolumeUp"; /**Props for {@link AudioControl} */ type AudioControlProps = { @@ -49,11 +51,7 @@ export const AudioControl = (props: AudioControlProps) => { Robot audio playback is not supported on this browser ); diff --git a/src/pages/operator/tsx/static_components/CustomizeButton.tsx b/src/pages/operator/tsx/static_components/CustomizeButton.tsx index 50cadca9..2af4f382 100644 --- a/src/pages/operator/tsx/static_components/CustomizeButton.tsx +++ b/src/pages/operator/tsx/static_components/CustomizeButton.tsx @@ -1,4 +1,6 @@ import "operator/css/CustomizeButton.css"; +import CheckIcon from "@mui/icons-material/Check"; +import BuildIcon from "@mui/icons-material/Build"; type CustomizeButtonProps = { /** If the interface is in customization mode */ @@ -9,7 +11,7 @@ type CustomizeButtonProps = { /** Button to toggle customization mode. */ export const CustomizeButton = (props: CustomizeButtonProps) => { - const icon = props.customizing ? "check" : "build"; + const icon = props.customizing ? : ; const text = props.customizing ? "Done" : "Customize"; return ( ); diff --git a/src/pages/operator/tsx/static_components/Sidebar.tsx b/src/pages/operator/tsx/static_components/Sidebar.tsx index c50952eb..d977234a 100644 --- a/src/pages/operator/tsx/static_components/Sidebar.tsx +++ b/src/pages/operator/tsx/static_components/Sidebar.tsx @@ -18,6 +18,9 @@ import { PopupModal } from "../basic_components/PopupModal"; import { Dropdown } from "../basic_components/Dropdown"; import "operator/css/Sidebar.css"; import { storageHandler } from "operator/tsx/index"; +import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; +import ExpandLessIcon from "@mui/icons-material/ExpandLess"; +import DeleteForeverIcon from "@mui/icons-material/DeleteForever"; type SidebarProps = { hidden: boolean; @@ -64,12 +67,12 @@ export const Sidebar = (props: SidebarProps) => { id="delete-button" disabled={deleteDisabled} title={deleteTooltip} - className={className("material-icons btn-red", {})} + className={className("btn-red", {})} onClick={ deleteDisabled ? undefined : () => props.onDelete() } > - delete_forever + @@ -573,17 +576,17 @@ const ComponentProviderTab = (props: ComponentProviderTabProps) => {