From 4535be68b3a01ba1466ba1fe1f317cc2752ea78e Mon Sep 17 00:00:00 2001 From: Vishnu Date: Wed, 30 Apr 2025 19:45:29 +0530 Subject: [PATCH] refactor: Update ExpandIcon to accept isActive prop for dynamic rendering; enhance ThroughputSummary and SimulationPlayer components with getAvatarColor for consistent color usage; improve styles across simulation and visualization components for better layout and responsiveness --- .../components/icons/ExportCommonIcons.tsx | 53 ++++--- .../ui/analysis/ThroughputSummary.tsx | 9 +- .../ui/simulation/simulationPlayer.tsx | 87 ++++++----- .../components/simulation/simulation.scss | 147 +++++++++--------- app/src/styles/components/tools.scss | 2 + .../visualization/floating/common.scss | 6 +- .../floating/energyConsumed.scss | 10 +- app/src/styles/pages/realTimeViz.scss | 6 +- app/src/styles/scene/scene.scss | 2 +- 9 files changed, 167 insertions(+), 155 deletions(-) diff --git a/app/src/components/icons/ExportCommonIcons.tsx b/app/src/components/icons/ExportCommonIcons.tsx index 8e03fd0..eaa7701 100644 --- a/app/src/components/icons/ExportCommonIcons.tsx +++ b/app/src/components/icons/ExportCommonIcons.tsx @@ -655,8 +655,8 @@ export const MonthlyROI = () => { ); }; -export const ExpandIcon = () => { - return ( +export const ExpandIcon = ({ isActive }: { isActive: boolean }) => { + return isActive ? ( { fill="var(--text-color)" /> + ) : ( + + + + + ); }; @@ -784,22 +814,3 @@ export const SpeedIcon = () => { ); }; - -// export const DublicateIcon = () => { -// return ( -// -// -// -// ); -// }; diff --git a/app/src/components/ui/analysis/ThroughputSummary.tsx b/app/src/components/ui/analysis/ThroughputSummary.tsx index b92a82d..e9946ae 100644 --- a/app/src/components/ui/analysis/ThroughputSummary.tsx +++ b/app/src/components/ui/analysis/ThroughputSummary.tsx @@ -8,6 +8,7 @@ import { PointElement, } from "chart.js"; import { PowerIcon, ThroughputSummaryIcon } from "../../icons/analysis"; +import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor"; ChartJS.register(LineElement, CategoryScale, LinearScale, PointElement); @@ -142,13 +143,13 @@ const ThroughputSummary = () => {
{/* Dynamically create progress bars based on shiftUtilization array */} - {shiftUtilization.map((shift) => ( + {shiftUtilization.map((shift, index) => (
))} @@ -156,11 +157,11 @@ const ThroughputSummary = () => {
{/* Dynamically create shift indicators with random colors */} - {shiftUtilization.map((shift) => ( + {shiftUtilization.map((shift, index) => (
diff --git a/app/src/components/ui/simulation/simulationPlayer.tsx b/app/src/components/ui/simulation/simulationPlayer.tsx index 86c5372..4c7c76d 100644 --- a/app/src/components/ui/simulation/simulationPlayer.tsx +++ b/app/src/components/ui/simulation/simulationPlayer.tsx @@ -16,8 +16,13 @@ import { SpeedIcon, StartIcon, } from "../../icons/ExportCommonIcons"; +import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor"; const SimulationPlayer: React.FC = () => { + const MAX_SPEED = 8; // Maximum speed + + const [expand, setExpand] = useState(true); + const { speed, setSpeed } = useAnimationPlaySpeed(); const [playSimulation, setPlaySimulation] = useState(false); const { setIsPlaying } = usePlayButtonStore(); @@ -29,8 +34,7 @@ const SimulationPlayer: React.FC = () => { // Button functions const handleReset = () => { - setReset(true); - // setReset(!isReset); + setReset(!isReset); setSpeed(1); }; const handlePlayStop = () => { @@ -49,7 +53,7 @@ const SimulationPlayer: React.FC = () => { }; const calculateHandlePosition = () => { - return ((speed - 0.5) / (8 - 0.5)) * 100; + return ((speed - 0.5) / (MAX_SPEED - 0.5)) * 100; }; const handleMouseDown = () => { @@ -99,7 +103,6 @@ const SimulationPlayer: React.FC = () => { { name: "process 9", completed: 90 }, // 90% completed { name: "process 10", completed: 30 }, // 30% completed ]; - const [expand, setExpand] = useState(false); // Move getRandomColor out of render const getRandomColor = () => { const letters = "0123456789ABCDEF"; @@ -125,7 +128,7 @@ const SimulationPlayer: React.FC = () => { const processPlayerRef = useRef(null); const processWrapperRef = useRef(null); - const [playerPosition, setPlayerPosition] = useState(0); + const [playerPosition, setPlayerPosition] = useState(20); // initial position const handleProcessMouseDown = (e: React.MouseEvent) => { if (!processWrapperRef.current) return; @@ -204,7 +207,7 @@ const SimulationPlayer: React.FC = () => {
-
{ handleReset(); @@ -212,8 +215,8 @@ const SimulationPlayer: React.FC = () => { > Reset -
-
+
-
+
-
+
+ +
@@ -306,53 +309,57 @@ const SimulationPlayer: React.FC = () => {
-
{speed.toFixed(1)}x -
+
-
8x
+
4x
-
+
00:00
+
24:00
- {process.map((item, index) => ( -
- ))} +
+ {process.map((item, index) => ( +
+
+
+ ))} +
-
diff --git a/app/src/styles/components/simulation/simulation.scss b/app/src/styles/components/simulation/simulation.scss index ec53e6f..0fc3df8 100644 --- a/app/src/styles/components/simulation/simulation.scss +++ b/app/src/styles/components/simulation/simulation.scss @@ -3,11 +3,11 @@ .simulation-player-wrapper { position: fixed; - bottom: 50px; + bottom: 12px; left: 50%; z-index: 2; transform: translate(-50%, 0); - width: 70%; + width: 70vw; .simulation-player-container { background: var(--background-color); @@ -16,24 +16,21 @@ display: flex; flex-direction: column; gap: 8px; + backdrop-filter: blur(10px); + outline: 1px solid var(--border-color); .progresser-wrapper { - outline: 1px solid var(--border-color); background: var(--background-color); - // background-color: var(--highlight-accent-color); - padding: 4px 5px; border-radius: 12px; display: flex; flex-direction: column; gap: 12px; - padding-top: 30px; + padding: 12px 5px; + padding-top: 38px; transition: height 0.2s linear; } - - - .controls-container { @include flex-center; gap: 12px; @@ -41,13 +38,12 @@ .production-details, .controls-wrapper { - display: flex; + @include flex-center; gap: 6px; } .production-details { .production-wrapper { - display: flex; align-items: center; flex-direction: column; @@ -56,33 +52,38 @@ .header { display: flex; flex-direction: row; - gap: 6px + gap: 6px; } .progress-wrapper { width: 164px; height: 8px; border-radius: 5px; - // overflow: hidden; - outline: 1px solid var(--border-color); - background: var(--background-color); + background: var(--background-color-solid); .progress { border-radius: 5px; height: 100%; - background-color: var(--accent-color); + background-color: var(--background-color-accent); } } } } + .expand-icon-container { + @include flex-center; + padding: 6px 8px; + cursor: pointer; + } + .simulation-button-container { @include flex-center; gap: 2px; - padding: 6px 8px; + padding: 4px 8px; min-width: 64px; background: var(--background-color); - border-radius: #{$border-radius-small}; + border-radius: #{$border-radius-extra-large}; + height: fit-content; cursor: pointer; &:hover { @@ -101,10 +102,8 @@ @include flex-center; gap: 32px; padding: 5px 16px; - // background: var(--background-color); border-radius: #{$border-radius-medium}; box-sizing: #{$box-shadow-medium}; - border-radius: 20px; position: relative; .min-value, @@ -118,11 +117,8 @@ width: 100%; max-width: 80vw; height: 28px; - // background: var(--background-color-gray); border-radius: #{$border-radius-small}; position: relative; - // padding: 4px 26px; - .speed-label { font-size: var(--font-size-tiny); @@ -135,13 +131,13 @@ } &:last-child { - right: 0; + right: -10px; } } &::after { content: ""; - background-color: #E5E5EA; + background-color: #e5e5ea; position: absolute; top: 50%; transform: translate(0, -50%); @@ -166,13 +162,15 @@ .slider-handle { position: absolute; top: 50%; - width: 42px; + min-width: 44px; + padding: 0 8px; line-height: 20px; text-align: center; - background: var(--accent-color); - color: var(--primary-color); - border-radius: #{$border-radius-small}; + background: var(--background-color-button); + color: var(--text-button-color); + border-radius: #{$border-radius-large}; transform: translate(-50%, -50%); + font-size: var(--font-size-small); cursor: pointer; z-index: 2; } @@ -226,23 +224,23 @@ } .time-displayer { - display: flex; - justify-content: space-between; + @include flex-space-between; + gap: 24px; height: auto; opacity: 1; - // overflow: hidden; - transition: all 0.5s ease; .start-time-wrappper, .end-time-wrappper { - display: flex; - align-items: center; - gap: 12px; + @include flex-center; + gap: 4px; + .icon { + @include flex-center; + } } .time-progresser { - width: 70%; + flex: 1; .timeline { padding: 16px; @@ -255,18 +253,15 @@ height: 33px; .label-dot-wrapper { - display: flex; - flex-direction: column; - align-items: center; - gap: 6px; + @include flex-center; position: relative; .label { position: absolute; - top: -200%; + top: -36px; transform: translate(0, -0); font-size: 12px; - color: #666; + color: var(--text-color); white-space: nowrap; } @@ -296,22 +291,32 @@ } } } - - - } - - } .processDisplayer { - border-radius: 5px; - // overflow: hidden; + border-radius: #{$border-radius-large}; outline: 1px solid var(--border-color); background: var(--background-color); - padding: 14px 6px; + padding: 20px 6px; position: relative; + .timmer { + width: auto; + position: absolute; + bottom: 0; + font-size: var(--font-size-tiny); + } + .start-displayer { + bottom: 4px; + left: 16px; + } + + .end-displayer { + bottom: 4px; + width: auto; + right: 16px; + } .process-player { position: absolute; top: 50%; @@ -321,29 +326,30 @@ left: 86.81px; border-radius: 14px; border-width: 1px; - background: var(--accent-color, #6F42C1); - + background: var(--background-color-accent, #6f42c1); } - - .process-wrapper { - display: flex; - // padding: 0px 16px; - - .process { - height: 5px; - background-color: #4caf50; - color: white; - text-align: center; - line-height: 30px; - transition: width 0.3s ease; + .process-wrapper{ + .process-container { + position: relative; + display: flex; + width: 100%; + + .process { + height: 5px; + border-radius: 4px; + color: white; + text-align: center; + line-height: 30px; + transition: width 0.3s ease; + } } } - } - .simulation-player-container.open { - + .timmer { + display: none; + } .progresser-wrapper { padding-top: 4px; } @@ -356,7 +362,7 @@ } .processDisplayer { - padding: 0; + padding: 0 8px; background: transparent; .process-player { @@ -364,5 +370,4 @@ display: none !important; } } - -} \ No newline at end of file +} diff --git a/app/src/styles/components/tools.scss b/app/src/styles/components/tools.scss index 5984dab..e476c3c 100644 --- a/app/src/styles/components/tools.scss +++ b/app/src/styles/components/tools.scss @@ -83,6 +83,8 @@ border-radius: #{$border-radius-medium}; background: var(--background-color); backdrop-filter: blur(8px); + contain: layout paint; + will-change: backdrop-filter; .option-list { display: flex; diff --git a/app/src/styles/components/visualization/floating/common.scss b/app/src/styles/components/visualization/floating/common.scss index 0bbbdc9..ee8adf2 100644 --- a/app/src/styles/components/visualization/floating/common.scss +++ b/app/src/styles/components/visualization/floating/common.scss @@ -121,10 +121,8 @@ flex-direction: column; gap: 6px; border-radius: 5.2px; - width: 100%; height: 150px; - display: flex; justify-content: center; align-items: center; @@ -254,7 +252,8 @@ gap: 5px; .header { - color: #a0aec0; + color: var(--text-color); + opacity: 0.8; } .data-values { @@ -413,7 +412,6 @@ /* FleetEfficiency.module.css */ .fleetEfficiency { - width: 100%; min-height: 240px !important; padding: 20px; background: var(--background-color); diff --git a/app/src/styles/components/visualization/floating/energyConsumed.scss b/app/src/styles/components/visualization/floating/energyConsumed.scss index 5ef39de..28f0861 100644 --- a/app/src/styles/components/visualization/floating/energyConsumed.scss +++ b/app/src/styles/components/visualization/floating/energyConsumed.scss @@ -5,8 +5,8 @@ display: flex; flex-direction: column; gap: 6px; - padding-top: 12px; padding: 6px; + padding-top: 12px; .floating { min-height: 170px; @@ -28,13 +28,6 @@ } } - - -.floatingWidgets-wrapper { - font-family: Arial, sans-serif; - color: #333; -} - .floating.working-state { width: 100%; height: 283px; @@ -51,7 +44,6 @@ justify-content: space-between; align-items: center; margin-bottom: 20px; - // flex-direction: column; } .state { diff --git a/app/src/styles/pages/realTimeViz.scss b/app/src/styles/pages/realTimeViz.scss index 7348eff..fa1b86c 100644 --- a/app/src/styles/pages/realTimeViz.scss +++ b/app/src/styles/pages/realTimeViz.scss @@ -177,8 +177,6 @@ .panel { position: absolute; - // background: var(--background-color); - // box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; border-radius: 6px; overflow: auto; @@ -415,7 +413,7 @@ } path { - stroke: var(--text-color); + stroke: var(--text-button-color); stroke-width: 2; } } @@ -920,8 +918,6 @@ // Add button -.extra-Bs {} - .extra-Bs-addopening { animation: slideDown 0.3s ease forwards; } diff --git a/app/src/styles/scene/scene.scss b/app/src/styles/scene/scene.scss index ab8f787..40743e0 100644 --- a/app/src/styles/scene/scene.scss +++ b/app/src/styles/scene/scene.scss @@ -15,7 +15,7 @@ font-size: var(--font-size-large); padding: 2px 8px; background: var(--background-color-accent); - color: var(--text-color); + color: var(--text-button-color); border-radius: #{$border-radius-medium}; box-shadow: var(--box-shadow-light); }