From cc44826f669be9dc0fb6c8c163c5278d3149b651 Mon Sep 17 00:00:00 2001 From: Nalvazhuthi Date: Tue, 29 Apr 2025 10:34:21 +0530 Subject: [PATCH 1/9] updating progressbar --- app/src/components/icons/analysis.tsx | 93 ++++++ .../ui/analysis/ProductionCapacity.tsx | 62 ++++ app/src/components/ui/analysis/ROISummary.tsx | 151 ++++++++++ .../ui/analysis/SemiCircleProgress.tsx | 25 ++ .../ui/analysis/ThroughputSummary.tsx | 146 ++++++++++ .../visualization/RealTimeVisulization.tsx | 2 +- app/src/pages/Project.tsx | 12 +- .../components/analysis/ROISummary.scss | 269 +++++++++++++++++ .../styles/components/analysis/analysis.scss | 270 ++++++++++++++++++ app/src/styles/main.scss | 2 + 10 files changed, 1029 insertions(+), 3 deletions(-) create mode 100644 app/src/components/icons/analysis.tsx create mode 100644 app/src/components/ui/analysis/ProductionCapacity.tsx create mode 100644 app/src/components/ui/analysis/ROISummary.tsx create mode 100644 app/src/components/ui/analysis/SemiCircleProgress.tsx create mode 100644 app/src/components/ui/analysis/ThroughputSummary.tsx create mode 100644 app/src/styles/components/analysis/ROISummary.scss create mode 100644 app/src/styles/components/analysis/analysis.scss diff --git a/app/src/components/icons/analysis.tsx b/app/src/components/icons/analysis.tsx new file mode 100644 index 0000000..3a5542b --- /dev/null +++ b/app/src/components/icons/analysis.tsx @@ -0,0 +1,93 @@ +export function ThroughputSummaryIcon() { + return ( + + + + + ); +} +export function ProductionCapacityIcon() { + return ( + + + + + ); +} +export function ROISummaryIcon() { + return ( + + + + + + ); +} +export function PowerIcon() { + return ( + + + + + + + + + + + + ); +} diff --git a/app/src/components/ui/analysis/ProductionCapacity.tsx b/app/src/components/ui/analysis/ProductionCapacity.tsx new file mode 100644 index 0000000..268ea81 --- /dev/null +++ b/app/src/components/ui/analysis/ProductionCapacity.tsx @@ -0,0 +1,62 @@ +import React from "react"; +import { ProductionCapacityIcon } from "../../icons/analysis"; + +const ProductionCapacity = () => { + const totalBars = 6; + const progressPercent = 50; + + const barsToFill = Math.floor((progressPercent / 100) * totalBars); + const partialFillPercent = + ((progressPercent / 100) * totalBars - barsToFill) * 100; + + return ( +
+
+
+
+
Throughput Summary
+
08:00 - 09:00 AM
+
+
+ +
+
+ +
+
+ 128 Units/hour +
+ + {/* Progress Bar */} +
+ {[...Array(totalBars)].map((_, i) => ( +
+ {i < barsToFill ? ( +
+ ) : i === barsToFill ? ( +
+ ) : null} +
+ ))} +
+
+ +
+
+ Avg. Process Time + 28.4 Secs/unit +
+
+ Machine Utilization + 78% +
+
+
+
+ ); +}; + +export default ProductionCapacity; diff --git a/app/src/components/ui/analysis/ROISummary.tsx b/app/src/components/ui/analysis/ROISummary.tsx new file mode 100644 index 0000000..cacd2c7 --- /dev/null +++ b/app/src/components/ui/analysis/ROISummary.tsx @@ -0,0 +1,151 @@ +import React from "react"; +import { ROISummaryIcon } from "../../icons/analysis"; +import SemiCircleProgress from "./SemiCircleProgress"; + +const ROISummary = () => { + // Data for the cost breakdown as an array of objects + const costBreakdownData = [ + { + item: "Raw Material A", + unitCost: "₹ 10/unit", + laborCost: "₹ 0", + totalCost: "₹ 1000", + sellingPrice: "₹ 1500", + }, + { + item: "Labor", + unitCost: "₹ 10/unit", + laborCost: "₹ 500", + totalCost: "₹ 500", + sellingPrice: "N/A", + }, + { + item: "Product 1", + unitCost: "₹ 10/unit", + laborCost: "₹ 200", + totalCost: "₹ 200", + sellingPrice: "₹ 2000", + }, + { + item: "Machine", + unitCost: "-", + laborCost: "-", + totalCost: "₹ 20,000", + sellingPrice: "N/A", + }, + { + item: "Total", + unitCost: "-", + laborCost: "-", + totalCost: "₹ 1,20,000", + sellingPrice: "-", + }, + { + item: "Net Profit", + unitCost: "-", + laborCost: "-", + totalCost: "₹ 1,60,000", + sellingPrice: "-", + }, + ]; + const progressValue = 50; + return ( +
+
+
+
+
ROI Summary
+
From 24 November, 2025
+
+
+ +
+
+
+
Product :
+
Product name
+
+
+
+
+ +133% ROI with payback in just 50.3 months +
+
+
+ + +
+
+
+ Total Cost Incurred + ₹ 1,20,000 +
+
+ Revenue Generated + ₹ 2,80,000 +
+
+
+ Net Profit + ₹ 1,60,000 +
+
+
+
+
+ ① + Cost Breakdown + ⌵ +
+ + + + + + + + + + + + {costBreakdownData.map((row, index) => ( + + + + + + + + ))} + +
ItemUnit CostLabor CostTotal CostSelling Price
{row.item}{row.unitCost}{row.laborCost}{row.totalCost}{row.sellingPrice}
+
+
+
+ 💡 + How to improve ROI? +
+
+ Increase CNC utilization by 10%{" "} + to shave 0.5 months of payback + period +
+ +
+
+
+ ); +}; + +export default ROISummary; diff --git a/app/src/components/ui/analysis/SemiCircleProgress.tsx b/app/src/components/ui/analysis/SemiCircleProgress.tsx new file mode 100644 index 0000000..bd11d28 --- /dev/null +++ b/app/src/components/ui/analysis/SemiCircleProgress.tsx @@ -0,0 +1,25 @@ +import React from "react"; + +const SemiCircleProgress = () => { + const progress = 10; + const clampedProgress = Math.min(Math.max(progress, 0), 100); // clamp 0-100 + return ( +
+
+
+
+
{clampedProgress}%
+
+ ); +}; + +export default SemiCircleProgress; diff --git a/app/src/components/ui/analysis/ThroughputSummary.tsx b/app/src/components/ui/analysis/ThroughputSummary.tsx new file mode 100644 index 0000000..cb4fac5 --- /dev/null +++ b/app/src/components/ui/analysis/ThroughputSummary.tsx @@ -0,0 +1,146 @@ +import React from "react"; +import { Line } from "react-chartjs-2"; +import { + Chart as ChartJS, + LineElement, + CategoryScale, + LinearScale, + PointElement, +} from "chart.js"; +import { PowerIcon, ThroughputSummaryIcon } from "../../icons/analysis"; + +ChartJS.register(LineElement, CategoryScale, LinearScale, PointElement); + +const ThroughputSummary = () => { + const data = { + labels: ["08:00", "08:10", "08:20", "08:30", "08:40", "08:50", "09:00"], + datasets: [ + { + label: "Units/hour", + data: [100, 120, 110, 130, 125, 128, 132], + borderColor: "#B392F0", + tension: 0.4, + pointRadius: 0, // hide points + }, + ], + }; + + const options = { + responsive: true, + scales: { + x: { + grid: { + display: false, + }, + ticks: { + display: false, + color: "#fff", + }, + }, + y: { + grid: { + display: false, + }, + ticks: { + display: false, + color: "#fff", + }, + }, + }, + plugins: { + legend: { + display: false, + }, + tooltip: { + enabled: true, + }, + }, + }; + + const shiftUtilization = { + "shift 1": 25, + "shift 2": 45, + "shift 3": 15, + }; + + return ( +
+
+
+
+
Throughput Summary
+
08:00 - 09:00 AM
+
+
+ +
+
+ +
+
+ 1240 Units/hour +
+
+
+
Asset usage
+
85%
+
+ +
+
+ +
+
+
Energy Consumption
+
+
+ +
+
+
456
+
KWH
+
+
+
+
+
Shift Utilization
+
+
85%
+ +
+
+
+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+
+
+ ); +}; + +export default ThroughputSummary; diff --git a/app/src/modules/visualization/RealTimeVisulization.tsx b/app/src/modules/visualization/RealTimeVisulization.tsx index cd2c57c..50b72ba 100644 --- a/app/src/modules/visualization/RealTimeVisulization.tsx +++ b/app/src/modules/visualization/RealTimeVisulization.tsx @@ -343,7 +343,7 @@ const RealTimeVisulization: React.FC = () => { onDrop={(event) => handleDrop(event)} onDragOver={(event) => event.preventDefault()} > - + {/* */}
{activeModule === "visualization" && selectedZone.zoneName !== "" && ( diff --git a/app/src/pages/Project.tsx b/app/src/pages/Project.tsx index 2daa091..26d1d7d 100644 --- a/app/src/pages/Project.tsx +++ b/app/src/pages/Project.tsx @@ -23,6 +23,9 @@ import SimulationPlayer from "../components/ui/simulation/simulationPlayer"; import RenderOverlay from "../components/templates/Overlay"; import MenuBar from "../components/ui/menu/menu"; import KeyPressListener from "../utils/shortcutkeys/handleShortcutKeys"; +import ProductionCapacity from "../components/ui/analysis/ProductionCapacity"; +import ThroughputSummary from "../components/ui/analysis/ThroughputSummary"; +import ROISummary from "../components/ui/analysis/ROISummary"; const Project: React.FC = () => { let navigate = useNavigate(); @@ -38,7 +41,7 @@ const Project: React.FC = () => { setFloorItems([]); setWallItems([]); setZones([]); - setActiveModule('builder') + setActiveModule("builder"); const email = localStorage.getItem("email"); if (email) { const Organization = email!.split("@")[1].split(".")[0]; @@ -57,8 +60,13 @@ const Project: React.FC = () => { return (
+
+ {/* + */} + +
- {loadingProgress && } + {/* {loadingProgress && } */} {!isPlaying && ( <> {toggleThreeD && } diff --git a/app/src/styles/components/analysis/ROISummary.scss b/app/src/styles/components/analysis/ROISummary.scss new file mode 100644 index 0000000..f4ee414 --- /dev/null +++ b/app/src/styles/components/analysis/ROISummary.scss @@ -0,0 +1,269 @@ +.roiSummary-container { + + .roiSummary-wrapper { + background-color: #F2F2F7; + + .product-info { + display: flex; + } + + .playBack { + display: flex; + background-color: var(--background-color); + border-radius: 12px; + padding: 6px; + + .info { + span { + font-size: var(--font-size-xlarge); + + &:first-child { + color: #31C756; + } + + &:last-child { + color: #2B3344; + } + } + } + } + + .roi-details { + display: flex; + + .roi-progress { + width: 60%; + } + + .metrics { + display: flex; + flex-direction: column; + gap: 6px; + + .metric-item { + width: 100%; + border-radius: 6px; + border: 1px solid var(--axis-colors-green, #43C06D); + background: var(--axis-colors-green-lite, #BEEECF); + display: flex; + flex-direction: column; + padding: 4px 6px; + + &:last-child { + align-items: center; + } + + .metric-label { + font-size: 10px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + } + + .metric-value { + text-align: center; + line-height: 20px; + } + } + + .metric-wrapper { + display: flex; + gap: 6px; + + .metric-item { + background-color: var(--background-color); + border: 1px solid var(--Grays-Gray-6, #F2F2F7); + + } + } + } + } + + + .cost-breakdown { + background-color: var(--background-color); + border: 1px solid var(--text-disabled); + border-radius: 8px; + padding: 16px; + + .breakdown-header { + display: flex; + align-items: center; + gap: 8px; + margin-bottom: 16px; + + .section-number { + font-size: 20px; + color: #00aaff; + } + + .section-title { + font-size: var(--font-size-regular); + color: #333; + } + + .expand-icon { + font-size: 16px; + color: #666; + cursor: pointer; + } + } + + + + .breakdown-table { + width: 100%; + border-collapse: collapse; + border-radius: 8px; + + th, + td { + padding: 8px; + text-align: left; + border-top: 1px solid var(--text-disabled); + border-bottom: 1px solid var(--text-disabled); + } + + /* Apply left border to first child */ + th:first-child { + border-left: 1px solid var(--text-disabled); + } + + /* Apply right border to last child */ + th:last-child { + border-right: 1px solid var(--text-disabled); + } + + td:first-child { + border-left: 1px solid var(--text-disabled); + } + + /* Apply right border to last child */ + td:last-child { + border-right: 1px solid var(--text-disabled); + } + + th { + background-color: var(--background-color); + + color: #333; + } + + .total-row, + .net-profit-row { + font-weight: bold; + color: #333; + } + } + + + + } + + + .tips-section { + background-color: var(--background-color); + border-radius: 8px; + display: flex; + flex-direction: column; + gap: 6px; + padding: 12px; + + .tip-header { + display: flex; + align-items: center; + + .tip-title { + color: var(--text-color); + font-weight: 600; + } + } + + .tip-description { + span { + color: #34C759; + /* Default color for the first span */ + + &:first-child { + color: #34C759; + /* Color for the first span */ + } + + &:nth-child(2) { + color: #488EF6; + /* Color for the second span */ + } + } + } + } + + .get-tips-button { + border: none; + + border-radius: 5px; + cursor: pointer; + font-size: 14px; + margin-top: 8px; + + /* Make the button content-width dependent */ + display: inline-block; + display: flex; + justify-content: flex-end; + background: none; + + .btn { + background-color: var(--accent-color); + color: var(--background-color); + padding: 4px 6px; + /* Add padding to ensure it has space around the text */ + border-radius: 5px; + display: inline-block; + /* Ensure button width adjusts to its content */ + font-size: 14px; + text-align: center; + /* Ensure text is centered */ + } + } + + + + } +} + + +.semi-circle-wrapper { + width: 250px; + height: 125px; + overflow: hidden; + position: relative; + } + + .semi-circle { + width: 250px; + height: 250px; + border-radius: 50%; + position: relative; + transition: background 0.5s ease; + transform: rotate(180deg); /* rotate so 0% is at left */ + } + + .progress-cover { + position: absolute; + width: 75%; + height: 75%; + top: 12.5%; + left: 12.5%; + background-color: white; + border-radius: 50%; + } + + .label { + position: absolute; + top: 40%; + left: 50%; + transform: translate(-50%, -50%); + font-weight: bold; + font-size: 1.2rem; + } + \ No newline at end of file diff --git a/app/src/styles/components/analysis/analysis.scss b/app/src/styles/components/analysis/analysis.scss new file mode 100644 index 0000000..bc33556 --- /dev/null +++ b/app/src/styles/components/analysis/analysis.scss @@ -0,0 +1,270 @@ +.analysis { + position: absolute; + top: 0; + left: 0; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100vh; + z-index: 100000000000000000000000000000; +} + +.analysis-card { + min-width: 333px; + // background: var(--primary-color); + border-radius: 20px; + + padding: 8px; + + .analysis-card-wrapper { + background: var(--background-color); + border-radius: 14px; + padding: 16px; + + display: flex; + flex-direction: column; + gap: 14px; + + .card-header { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + + .main-header { + line-height: 20px; + font-size: var(--font-size-regular); + } + } + + .process-container { + display: flex; + flex-direction: column; + + .throughput-value { + font-size: 1rem; + + .value { + font-weight: bold; + font-size: 1.5rem; + } + } + + .progress-bar-wrapper { + display: flex; + gap: 8px; + margin-top: 6px; + } + + .progress-bar { + position: relative; + width: 36px; + height: 4px; + border-radius: 13px; + overflow: hidden; + background-color: #FBEBD7; + + .bar-fill { + position: absolute; + height: 100%; + top: 0; + left: 0; + background-color: #FC9D2F; + border-radius: 13px; + } + + .bar-fill.full { + width: 100%; + } + + .bar-fill.partial { + width: 0; // inline style will override this + } + } + } + + .metrics-section { + padding-top: 16px; + border-top: 1px solid var(--background-color-gray); + + .metric { + display: flex; + justify-content: space-between; + align-items: center; + font-size: 14px; + margin-bottom: 8px; + + .label { + color: var(--text-color); + } + + .value { + font-weight: bold; + } + } + } + } +} + + +.throughoutSummary { + .throughoutSummary-wrapper { + .process-container { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + gap: 16px; + width: 100%; + + .throughput-value { + font-size: var(--font-size-small); + flex: 1; + display: flex; + flex-direction: column; + + .value { + color: var(--accent-color); + } + + /* Let the text take available space */ + } + + .lineChart { + max-width: 200px; + height: 100px; + position: relative; + + .assetUsage { + text-align: right; + position: absolute; + right: 0; + top: 0; + } + + canvas { + background-color: transparent; + } + } + } + + .footer { + display: flex; + gap: 16px; // Space between cards + margin-top: 24px; + + .footer-card { + width: 100%; + background: var(--background-color-gray); + border-radius: 6px; + padding: 8px; + display: flex; + flex-direction: column; + gap: 6px; + + &:first-child { + width: 85%; + } + + .header { + font-size: var(--font-size-regular); + } + + .value-container { + display: flex; + flex-direction: row; + align-items: center; + justify-content: end; + gap: 6px; + } + } + + .shiftUtilization { + .value-container { + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + + .value { + font-size: var(--font-size-xlarge); + } + + .progress-wrapper { + width: 100%; + display: flex; + gap: 6px; + + .progress { + border-radius: 6px; + height: 5px; + + &:nth-child(1) { + background-color: #F3C64D; + } + + &:nth-child(2) { + background-color: #67B3F4; + } + + &:nth-child(3) { + background-color: #7981F5; + } + } + } + + .progress-indicator { + display: flex; + justify-content: space-between; + width: 100%; + gap: 6px; + + .shift-wrapper { + display: flex; + align-items: center; + gap: 5px; + + /* Align items vertically */ + &:nth-child(1) { + .indicator { + + background-color: #F3C64D; + } + } + + &:nth-child(2) { + .indicator { + + background-color: #67B3F4; + } + } + + &:nth-child(3) { + .indicator { + + background-color: #7981F5; + } + } + + label { + font-size: var(--font-size-small); + position: relative; + } + + .indicator { + display: inline-block; + width: 5px; + height: 5px; + border-radius: 50%; + + } + } + } + } + } + + } + + + } +} \ No newline at end of file diff --git a/app/src/styles/main.scss b/app/src/styles/main.scss index 5e46dd4..f0f7704 100644 --- a/app/src/styles/main.scss +++ b/app/src/styles/main.scss @@ -25,6 +25,8 @@ @use 'components/simulation/simulation'; @use 'components/menu/menu'; @use 'components/confirmationPopUp'; +@use 'components/analysis/analysis'; +@use 'components/analysis/ROISummary.scss'; // layout @use 'layout/loading'; From c1a7fe30156ef79a53adcdb78b5e093fb307657a Mon Sep 17 00:00:00 2001 From: Vishnu Date: Tue, 29 Apr 2025 12:50:14 +0530 Subject: [PATCH 2/9] feat: Implement collaboration features including user following and avatar management --- .../components/layout/sidebarRight/Header.tsx | 2 +- .../layout/sidebarRight/SideBarRight.tsx | 3 + .../properties/GlobalProperties.tsx | 5 +- app/src/components/templates/FollowPerson.tsx | 29 ++++++++++ app/src/functions/collabUserIcon.tsx | 31 ---------- .../collaboration/camera/collabCams.tsx | 19 +++++-- .../collaboration/camera/collabUserIcon.tsx | 56 +++++++++++++++++++ .../modules/collaboration/collaboration.tsx | 38 +++++++++---- .../functions/getAvatarColor.ts | 2 +- .../collaboration}/functions/getInitials.ts | 0 .../collaboration/functions/setCameraView.ts | 46 +++++++++++++++ .../collaboration}/users/Avatar.tsx | 7 +-- app/src/pages/Project.tsx | 15 +++-- app/src/store/useCollabStore.ts | 30 ++++++++++ app/src/styles/components/templates.scss | 22 ++++++++ app/src/styles/layout/popup.scss | 1 + 16 files changed, 243 insertions(+), 63 deletions(-) create mode 100644 app/src/components/templates/FollowPerson.tsx delete mode 100644 app/src/functions/collabUserIcon.tsx create mode 100644 app/src/modules/collaboration/camera/collabUserIcon.tsx rename app/src/{functions/users => modules/collaboration}/functions/getAvatarColor.ts (98%) rename app/src/{functions/users => modules/collaboration}/functions/getInitials.ts (100%) create mode 100644 app/src/modules/collaboration/functions/setCameraView.ts rename app/src/{functions => modules/collaboration}/users/Avatar.tsx (87%) create mode 100644 app/src/store/useCollabStore.ts diff --git a/app/src/components/layout/sidebarRight/Header.tsx b/app/src/components/layout/sidebarRight/Header.tsx index f9f48fb..a449500 100644 --- a/app/src/components/layout/sidebarRight/Header.tsx +++ b/app/src/components/layout/sidebarRight/Header.tsx @@ -2,9 +2,9 @@ import React, { useEffect, useState } from "react"; import { AppDockIcon } from "../../icons/HeaderIcons"; import orgImg from "../../../assets/orgTemp.png"; import { useActiveUsers } from "../../../store/store"; -import { getAvatarColor } from "../../../functions/users/functions/getAvatarColor"; import { ActiveUser } from "../../../types/users"; import CollaborationPopup from "../../templates/CollaborationPopup"; +import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor"; const Header: React.FC = () => { const { activeUsers } = useActiveUsers(); diff --git a/app/src/components/layout/sidebarRight/SideBarRight.tsx b/app/src/components/layout/sidebarRight/SideBarRight.tsx index cb9b5dc..b2f25eb 100644 --- a/app/src/components/layout/sidebarRight/SideBarRight.tsx +++ b/app/src/components/layout/sidebarRight/SideBarRight.tsx @@ -49,6 +49,9 @@ const SideBarRight: React.FC = () => { setSubModule("simulations"); } } + if (activeModule !== "simulation") { + setSubModule("properties"); + } }, [activeModule, selectedEventData, selectedEventSphere, setSubModule]); return ( diff --git a/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx b/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx index 568783c..251ada3 100644 --- a/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx +++ b/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx @@ -282,8 +282,7 @@ const GlobalProperties: React.FC = () => { key={"6"} /> -
- + {/*
{ max={5} onChange={(value: number) => updateGridDistance(value)} onPointerUp={updatedGrid} - /> + /> */}
); }; diff --git a/app/src/components/templates/FollowPerson.tsx b/app/src/components/templates/FollowPerson.tsx new file mode 100644 index 0000000..a85d0c9 --- /dev/null +++ b/app/src/components/templates/FollowPerson.tsx @@ -0,0 +1,29 @@ +import React from "react"; +import RenderOverlay from "./Overlay"; +import { useSelectedUserStore } from "../../store/useCollabStore"; +import { useCamMode } from "../../store/store"; + +const FollowPerson: React.FC = () => { + // Get the selected user from the store + const { selectedUser, clearSelectedUser } = useSelectedUserStore(); + const { setCamMode } = useCamMode(); + return ( + + {selectedUser && ( + // eslint-disable-next-line +
{ + clearSelectedUser(); + setCamMode("FirstPerson"); + }} + style={{ "--user-color": selectedUser.color } as React.CSSProperties} + > +
{selectedUser.name}
+
+ )} + + ); +}; + +export default FollowPerson; diff --git a/app/src/functions/collabUserIcon.tsx b/app/src/functions/collabUserIcon.tsx deleted file mode 100644 index 9e6802b..0000000 --- a/app/src/functions/collabUserIcon.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from "react"; -import CustomAvatar from "./users/Avatar"; - -interface CollabUserIconProps { - userName: string; - userImage?: string; - color: string; -} - -const CollabUserIcon: React.FC = ({ - userImage, - userName, - color, -}) => { - return ( -
-
- {userImage ? ( - {userName} - ) : ( - - )} -
-
- {userName} -
-
- ); -}; - -export default CollabUserIcon; diff --git a/app/src/modules/collaboration/camera/collabCams.tsx b/app/src/modules/collaboration/camera/collabCams.tsx index 1347a2a..461cb7f 100644 --- a/app/src/modules/collaboration/camera/collabCams.tsx +++ b/app/src/modules/collaboration/camera/collabCams.tsx @@ -8,9 +8,9 @@ import { useActiveUsers, useSocketStore } from "../../../store/store"; import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader"; import { useNavigate } from "react-router-dom"; import { Html } from "@react-three/drei"; -import CollabUserIcon from "../../../functions/collabUserIcon"; -import { getAvatarColor } from "../../../functions/users/functions/getAvatarColor"; +import CollabUserIcon from "./collabUserIcon"; import useModuleStore from "../../../store/useModuleStore"; +import { getAvatarColor } from "../functions/getAvatarColor"; const CamModelsGroup = () => { const navigate = useNavigate(); @@ -20,13 +20,14 @@ const CamModelsGroup = () => { const { socket } = useSocketStore(); const { activeModule } = useModuleStore(); + // eslint-disable-next-line react-hooks/exhaustive-deps const loader = new GLTFLoader(); const dracoLoader = new DRACOLoader(); dracoLoader.setDecoderPath("three/examples/jsm/libs/draco/gltf/"); loader.setDRACOLoader(dracoLoader); const [cams, setCams] = useState([]); - const [models, setModels] = useState>({}); + const [models, setModels] = useState>({}); const dedupeCams = (cams: any[]) => { const seen = new Set(); @@ -102,6 +103,7 @@ const CamModelsGroup = () => { }); socket.on("cameraUpdateResponse", (data: any) => { + if ( !groupRef.current || socket.id === data.socketId || @@ -122,6 +124,11 @@ const CamModelsGroup = () => { data.data.rotation.y, data.data.rotation.z ), + target: new THREE.Vector3( + data.data.target.x, + data.data.target.y, + data.data.target.z + ), }, })); }); @@ -131,7 +138,7 @@ const CamModelsGroup = () => { socket.off("userDisConnectResponse"); socket.off("cameraUpdateResponse"); }; - }, [socket]); + }, [email, loader, navigate, setActiveUsers, socket]); useFrame(() => { if (!groupRef.current) return; @@ -217,9 +224,11 @@ const CamModelsGroup = () => { position={[-0.015, 0, 0.7]} > diff --git a/app/src/modules/collaboration/camera/collabUserIcon.tsx b/app/src/modules/collaboration/camera/collabUserIcon.tsx new file mode 100644 index 0000000..dcdb73b --- /dev/null +++ b/app/src/modules/collaboration/camera/collabUserIcon.tsx @@ -0,0 +1,56 @@ +import React from "react"; +import CustomAvatar from "../users/Avatar"; +import { useSelectedUserStore } from "../../../store/useCollabStore"; +import { useCamMode } from "../../../store/store"; + +interface CollabUserIconProps { + userName: string; + userImage?: string; + color: string; + position?: { + x: number; + y: number; + z: number; + }; + rotation?: { + x: number; + y: number; + z: number; + }; +} + +const CollabUserIcon: React.FC = ({ + userImage, + userName, + color, + position, + rotation, +}) => { + const { setSelectedUser } = useSelectedUserStore(); + const { setCamMode } = useCamMode(); + return ( +
+ +
+ {userName} +
+
+ ); +}; + +export default CollabUserIcon; diff --git a/app/src/modules/collaboration/collaboration.tsx b/app/src/modules/collaboration/collaboration.tsx index 84d3ab1..8835185 100644 --- a/app/src/modules/collaboration/collaboration.tsx +++ b/app/src/modules/collaboration/collaboration.tsx @@ -1,14 +1,32 @@ -import React from 'react' -import CamModelsGroup from './camera/collabCams' +import React, { useEffect } from "react"; +import CamModelsGroup from "./camera/collabCams"; +import { useSelectedUserStore } from "../../store/useCollabStore"; +import { useThree } from "@react-three/fiber"; +import setCameraView from "./functions/setCameraView"; +import { useCamMode } from "../../store/store"; -const Collaboration = () => { - return ( - <> +const Collaboration: React.FC = () => { + const { selectedUser } = useSelectedUserStore(); + const { camMode } = useCamMode(); + const { camera, controls } = useThree(); // Access R3F camera and controls - + useEffect(() => { + if(camMode !== "FollowPerson") return; + // If a user is selected, set the camera view to their location + // and update the camera and controls accordingly + if (selectedUser?.location) { + const { position, rotation } = selectedUser.location; + setCameraView({ + controls, + camera, + position, + rotation, + username: selectedUser.name, + }); + } + }, [selectedUser, camera, controls, camMode]); - - ) -} + return ; +}; -export default Collaboration \ No newline at end of file +export default Collaboration; diff --git a/app/src/functions/users/functions/getAvatarColor.ts b/app/src/modules/collaboration/functions/getAvatarColor.ts similarity index 98% rename from app/src/functions/users/functions/getAvatarColor.ts rename to app/src/modules/collaboration/functions/getAvatarColor.ts index d9a5d37..6d34edc 100644 --- a/app/src/functions/users/functions/getAvatarColor.ts +++ b/app/src/modules/collaboration/functions/getAvatarColor.ts @@ -27,7 +27,7 @@ export function getAvatarColor(index: number, name?: string): string { const localStorageKey = "userAvatarColors"; // Check if local storage is available if (name) { - let userColors = JSON.parse(localStorage.getItem(localStorageKey) || "{}"); + let userColors = JSON.parse(localStorage.getItem(localStorageKey) ?? "{}"); // Check if the user already has an assigned color if (userColors[name]) { diff --git a/app/src/functions/users/functions/getInitials.ts b/app/src/modules/collaboration/functions/getInitials.ts similarity index 100% rename from app/src/functions/users/functions/getInitials.ts rename to app/src/modules/collaboration/functions/getInitials.ts diff --git a/app/src/modules/collaboration/functions/setCameraView.ts b/app/src/modules/collaboration/functions/setCameraView.ts new file mode 100644 index 0000000..af05181 --- /dev/null +++ b/app/src/modules/collaboration/functions/setCameraView.ts @@ -0,0 +1,46 @@ +import * as THREE from 'three'; + +interface SetCameraViewProps { + controls: any; + camera: THREE.Camera; + position: THREE.Vector3 | { x: number; y: number; z: number }; + rotation: THREE.Euler | { x: number; y: number; z: number }; + username?: string; +} + +export default async function setCameraView({ + controls, + camera, + position, + rotation, + username, +}: SetCameraViewProps) { + if (!controls || !camera) return; + + // Normalize position + const newPosition = position instanceof THREE.Vector3 + ? position + : new THREE.Vector3(position.x, position.y, position.z); + + // Normalize rotation + const newRotation = rotation instanceof THREE.Euler + ? rotation + : new THREE.Euler(rotation.x, rotation.y, rotation.z); + + // Update camera position and rotation + // camera.position.copy(newPosition); + // camera.rotation.copy(newRotation); + + // If your controls need to update the target, you can optionally adjust it too + if (controls.setTarget) { + // Setting a basic target slightly forward from new position based on rotation + const cameraDirection = new THREE.Vector3(0, 0, -1).applyEuler(newRotation); + const targetPosition = new THREE.Vector3().copy(newPosition).add(cameraDirection); + + // controls.setTarget(targetPosition.x, targetPosition.y, targetPosition.z); + controls?.setLookAt(...newPosition.toArray(), newPosition.x, 0, newPosition.z, true); + } + + // Optionally you can log + console.log(`Camera view updated by ${username ?? 'unknown user'}`); +} diff --git a/app/src/functions/users/Avatar.tsx b/app/src/modules/collaboration/users/Avatar.tsx similarity index 87% rename from app/src/functions/users/Avatar.tsx rename to app/src/modules/collaboration/users/Avatar.tsx index d3e5dca..899ecb4 100644 --- a/app/src/functions/users/Avatar.tsx +++ b/app/src/modules/collaboration/users/Avatar.tsx @@ -1,6 +1,5 @@ import React, { useEffect, useState } from "react"; -import { getInitials } from "./functions/getInitials"; -import { getAvatarColor } from "./functions/getAvatarColor"; +import { getInitials } from "../functions/getInitials"; interface AvatarProps { name: string; // Name can be a full name or initials @@ -26,7 +25,7 @@ const CustomAvatar: React.FC = ({ const initials = getInitials(name); // Convert name to initials if needed // Draw background - ctx.fillStyle = color || "#323232"; // Use color prop or generate color based on index + ctx.fillStyle = color ?? "#323232"; // Use color prop or generate color based on index ctx.fillRect(0, 0, size, size); // Draw initials @@ -40,7 +39,7 @@ const CustomAvatar: React.FC = ({ const dataURL = canvas.toDataURL("image/png"); setImageSrc(dataURL); } - }, [name, size, textColor]); + }, [color, name, size, textColor]); if (!imageSrc) { return null; // Return null while the image is being generated diff --git a/app/src/pages/Project.tsx b/app/src/pages/Project.tsx index 3f6b4cc..bae83cc 100644 --- a/app/src/pages/Project.tsx +++ b/app/src/pages/Project.tsx @@ -1,11 +1,10 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect } from "react"; import ModuleToggle from "../components/ui/ModuleToggle"; import SideBarLeft from "../components/layout/sidebarLeft/SideBarLeft"; import SideBarRight from "../components/layout/sidebarRight/SideBarRight"; import useModuleStore, { useThreeDStore } from "../store/useModuleStore"; import RealTimeVisulization from "../modules/visualization/RealTimeVisulization"; import Tools from "../components/ui/Tools"; -// import Scene from "../modules/scene/scene"; import { useSocketStore, useFloorItems, @@ -20,12 +19,9 @@ import { usePlayButtonStore } from "../store/usePlayButtonStore"; import MarketPlace from "../modules/market/MarketPlace"; import LoadingPage from "../components/templates/LoadingPage"; import SimulationPlayer from "../components/ui/simulation/simulationPlayer"; -import RenderOverlay from "../components/templates/Overlay"; -import MenuBar from "../components/ui/menu/menu"; import KeyPressListener from "../utils/shortcutkeys/handleShortcutKeys"; -import ProductionCapacity from "../components/ui/analysis/ProductionCapacity"; -import ThroughputSummary from "../components/ui/analysis/ThroughputSummary"; -import ROISummary from "../components/ui/analysis/ROISummary"; +import { useSelectedUserStore } from "../store/useCollabStore"; +import FollowPerson from "../components/templates/FollowPerson"; const Project: React.FC = () => { let navigate = useNavigate(); @@ -44,7 +40,7 @@ const Project: React.FC = () => { setActiveModule("builder"); const email = localStorage.getItem("email"); if (email) { - const Organization = email!.split("@")[1].split(".")[0]; + const Organization = email.split("@")[1].split(".")[0]; useSocketStore.getState().initializeSocket(email, Organization); const name = localStorage.getItem("userName"); if (Organization && name) { @@ -55,8 +51,10 @@ const Project: React.FC = () => { navigate("/"); } }, []); + const { isPlaying } = usePlayButtonStore(); const { toggleThreeD } = useThreeDStore(); + const { selectedUser } = useSelectedUserStore(); return (
@@ -81,6 +79,7 @@ const Project: React.FC = () => { {activeModule !== "market" && } {isPlaying && activeModule === "simulation" && } + {selectedUser && }
); }; diff --git a/app/src/store/useCollabStore.ts b/app/src/store/useCollabStore.ts new file mode 100644 index 0000000..3fe1497 --- /dev/null +++ b/app/src/store/useCollabStore.ts @@ -0,0 +1,30 @@ +import { create } from 'zustand'; + +interface SelectedUser { + color: string; + name: string; + location?: { + position: { + x: number; + y: number; + z: number; + }; + rotation: { + x: number; + y: number; + z: number; + }; + } +} + +interface SelectedUserStore { + selectedUser: SelectedUser | null; + setSelectedUser: (user: SelectedUser) => void; + clearSelectedUser: () => void; +} + +export const useSelectedUserStore = create((set) => ({ + selectedUser: null, + setSelectedUser: (user) => set({ selectedUser: user }), + clearSelectedUser: () => set({ selectedUser: null }), +})); diff --git a/app/src/styles/components/templates.scss b/app/src/styles/components/templates.scss index e69de29..bd28d94 100644 --- a/app/src/styles/components/templates.scss +++ b/app/src/styles/components/templates.scss @@ -0,0 +1,22 @@ +.follow-person-container{ + height: 100vh; + width: 100vw; + position: fixed; + top: 0; + left: 0; + outline: 8px solid var(--user-color); + outline-offset: -3px; + border-radius: 16px; + .follower-name{ + background-color: var(--user-color); + color: #FFFFFF; + padding: 4px 8px; + padding-top: 16px; + text-align: center; + position: absolute; + top: -10px; + left: 50%; + transform: translate(-50%, 0); + border-radius: 8px; + } +} diff --git a/app/src/styles/layout/popup.scss b/app/src/styles/layout/popup.scss index a354c10..b92d8cc 100644 --- a/app/src/styles/layout/popup.scss +++ b/app/src/styles/layout/popup.scss @@ -137,6 +137,7 @@ width: 100%; object-fit: cover; vertical-align: top; + pointer-events: none; } } .user-name{ From 617d29f2e3b3e573764ade22ab000a2ab56aca02 Mon Sep 17 00:00:00 2001 From: Vishnu Date: Tue, 29 Apr 2025 12:50:56 +0530 Subject: [PATCH 3/9] feat: Add target parameter to setCameraView function for improved camera control --- .../collaboration/functions/setCameraView.ts | 17 ++--------------- 1 file changed, 2 insertions(+), 15 deletions(-) diff --git a/app/src/modules/collaboration/functions/setCameraView.ts b/app/src/modules/collaboration/functions/setCameraView.ts index af05181..8bae59b 100644 --- a/app/src/modules/collaboration/functions/setCameraView.ts +++ b/app/src/modules/collaboration/functions/setCameraView.ts @@ -6,6 +6,7 @@ interface SetCameraViewProps { position: THREE.Vector3 | { x: number; y: number; z: number }; rotation: THREE.Euler | { x: number; y: number; z: number }; username?: string; + target?: THREE.Vector3 | { x: number; y: number; z: number }; } export default async function setCameraView({ @@ -14,6 +15,7 @@ export default async function setCameraView({ position, rotation, username, + target }: SetCameraViewProps) { if (!controls || !camera) return; @@ -22,22 +24,7 @@ export default async function setCameraView({ ? position : new THREE.Vector3(position.x, position.y, position.z); - // Normalize rotation - const newRotation = rotation instanceof THREE.Euler - ? rotation - : new THREE.Euler(rotation.x, rotation.y, rotation.z); - - // Update camera position and rotation - // camera.position.copy(newPosition); - // camera.rotation.copy(newRotation); - - // If your controls need to update the target, you can optionally adjust it too if (controls.setTarget) { - // Setting a basic target slightly forward from new position based on rotation - const cameraDirection = new THREE.Vector3(0, 0, -1).applyEuler(newRotation); - const targetPosition = new THREE.Vector3().copy(newPosition).add(cameraDirection); - - // controls.setTarget(targetPosition.x, targetPosition.y, targetPosition.z); controls?.setLookAt(...newPosition.toArray(), newPosition.x, 0, newPosition.z, true); } From ab5ade7bee51db8338f533f366c11b59ac61ded8 Mon Sep 17 00:00:00 2001 From: Vishnu Date: Tue, 29 Apr 2025 13:42:24 +0530 Subject: [PATCH 4/9] feat: Enhance camera control and user experience with improved key handling and speed adjustments --- .../components/layout/sidebarRight/Header.tsx | 8 +- app/src/modules/builder/groups/zoneGroup.tsx | 15 +- app/src/modules/scene/camera/camMode.tsx | 220 +++++++++++------- app/src/types/world/worldConstants.ts | 8 +- .../utils/shortcutkeys/handleShortcutKeys.ts | 2 +- 5 files changed, 160 insertions(+), 93 deletions(-) diff --git a/app/src/components/layout/sidebarRight/Header.tsx b/app/src/components/layout/sidebarRight/Header.tsx index a449500..a88baee 100644 --- a/app/src/components/layout/sidebarRight/Header.tsx +++ b/app/src/components/layout/sidebarRight/Header.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React, { useState } from "react"; import { AppDockIcon } from "../../icons/HeaderIcons"; import orgImg from "../../../assets/orgTemp.png"; import { useActiveUsers } from "../../../store/store"; @@ -8,7 +8,7 @@ import { getAvatarColor } from "../../../modules/collaboration/functions/getAvat const Header: React.FC = () => { const { activeUsers } = useActiveUsers(); - const userName = localStorage.getItem("userName") || "Anonymous"; + const userName = localStorage.getItem("userName") ?? "Anonymous"; const guestUsers: ActiveUser[] = activeUsers.filter( (user: ActiveUser) => user.userName !== userName @@ -23,14 +23,14 @@ const Header: React.FC = () => { )}
-
{ setUserManagement(true); }} > Share -
+ {/*
*/} diff --git a/app/src/modules/builder/groups/zoneGroup.tsx b/app/src/modules/builder/groups/zoneGroup.tsx index d218534..f1818f3 100644 --- a/app/src/modules/builder/groups/zoneGroup.tsx +++ b/app/src/modules/builder/groups/zoneGroup.tsx @@ -69,7 +69,9 @@ const ZoneGroup: React.FC = () => { }, transparent: true, depthWrite: false, - }), []); + }), + [] + ); useEffect(() => { const fetchZones = async () => { @@ -148,6 +150,7 @@ const ZoneGroup: React.FC = () => { } }, [toolMode, toggleView]); + // eslint-disable-next-line react-hooks/exhaustive-deps const addZoneToBackend = async (zone: { zoneId: string; zoneName: string; @@ -503,6 +506,15 @@ const ZoneGroup: React.FC = () => { draggedSphere, movePoint, activeLayer, + raycaster, + pointer, + controls, + plane, + setZones, + setZonePoints, + addZoneToBackend, + handleDeleteZone, + updateZoneToBackend, ]); useFrame(() => { @@ -551,6 +563,7 @@ const ZoneGroup: React.FC = () => { key={index} position={midpoint} rotation={[0, -angle, 0]} + // visible={false} > { - const { camMode, setCamMode } = useCamMode(); - const [, get] = useKeyboardControls() - const [isTransitioning, setIsTransitioning] = useState(false); - const state: any = useThree(); - const { toggleView } = useToggleView(); + const { camMode, setCamMode } = useCamMode(); + const [, get] = useKeyboardControls(); + const [isTransitioning, setIsTransitioning] = useState(false); + const state: any = useThree(); + const { toggleView } = useToggleView(); + const [isShiftActive, setIsShiftActive] = useState(false); - useEffect(() => { - const handlePointerLockChange = async () => { - if (document.pointerLockElement && !toggleView) { - // console.log('Pointer is locked'); - } else { - // console.log('Pointer is unlocked'); - if (camMode === "FirstPerson" && !toggleView) { - setCamMode("ThirdPerson"); - await switchToThirdPerson(state.controls, state.camera); - } - } - }; - - document.addEventListener('pointerlockchange', handlePointerLockChange); - - return () => { - document.removeEventListener('pointerlockchange', handlePointerLockChange); - }; - }, [camMode, toggleView, setCamMode, state.controls, state.camera]); - - useEffect(() => { - const handleKeyPress = async (event: any) => { - if (!state.controls) return; - - const keyCombination = detectModifierKeys(event); - - if (keyCombination === "/" && !isTransitioning && !toggleView) { - setIsTransitioning(true); - state.controls.mouseButtons.left = CONSTANTS.controlsTransition.leftMouse; - state.controls.mouseButtons.right = CONSTANTS.controlsTransition.rightMouse; - state.controls.mouseButtons.wheel = CONSTANTS.controlsTransition.wheelMouse; - state.controls.mouseButtons.middle = CONSTANTS.controlsTransition.middleMouse; - - if (camMode === 'ThirdPerson') { - setCamMode("FirstPerson"); - await switchToFirstPerson(state.controls, state.camera); - } else if (camMode === "FirstPerson") { - setCamMode("ThirdPerson"); - await switchToThirdPerson(state.controls, state.camera); - } - - setIsTransitioning(false); - } - }; - - window.addEventListener("keydown", handleKeyPress); - return () => { - window.removeEventListener("keydown", handleKeyPress); - }; - }, [camMode, isTransitioning, toggleView, state.controls, state.camera, setCamMode]); - - useFrame(() => { - const { forward, backward, left, right } = get(); - if (!state.controls) return - if (!state.controls || camMode === "ThirdPerson" || !document.pointerLockElement) return; - - if (forward) { - state.controls.forward(CONSTANTS.firstPersonControls.forwardSpeed, true) + useEffect(() => { + const handlePointerLockChange = async () => { + if (document.pointerLockElement && !toggleView) { + // Pointer is locked + } else { + // Pointer is unlocked + if (camMode === "FirstPerson" && !toggleView) { + setCamMode("ThirdPerson"); + await switchToThirdPerson(state.controls, state.camera); } - if (backward) { - state.controls.forward(CONSTANTS.firstPersonControls.backwardSpeed, true) - } - if (left) { - state.controls.truck(CONSTANTS.firstPersonControls.leftSpeed, 0, true) - } - if (right) { - state.controls.truck(CONSTANTS.firstPersonControls.rightSpeed, 0, true) - } - }); + } + }; - return null; // This component does not render any UI + document.addEventListener("pointerlockchange", handlePointerLockChange); + + return () => { + document.removeEventListener( + "pointerlockchange", + handlePointerLockChange + ); + }; + }, [camMode, toggleView, setCamMode, state.controls, state.camera]); + + useEffect(() => { + const handleKeyDown = (event: KeyboardEvent) => { + if (event.key === "Shift") { + setIsShiftActive(true); + } + }; + + const handleKeyUp = (event: KeyboardEvent) => { + if (event.key === "Shift") { + setIsShiftActive(false); + } + }; + + window.addEventListener("keydown", handleKeyDown); + window.addEventListener("keyup", handleKeyUp); + + return () => { + window.removeEventListener("keydown", handleKeyDown); + window.removeEventListener("keyup", handleKeyUp); + }; + }, []); + + useEffect(() => { + const handleKeyPress = async (event: KeyboardEvent) => { + if (!state.controls) return; + + const keyCombination = detectModifierKeys(event); + + if (keyCombination === "/" && !isTransitioning && !toggleView) { + setIsTransitioning(true); + + state.controls.mouseButtons.left = + CONSTANTS.controlsTransition.leftMouse; + state.controls.mouseButtons.right = + CONSTANTS.controlsTransition.rightMouse; + state.controls.mouseButtons.wheel = + CONSTANTS.controlsTransition.wheelMouse; + state.controls.mouseButtons.middle = + CONSTANTS.controlsTransition.middleMouse; + + if (camMode === "ThirdPerson") { + setCamMode("FirstPerson"); + await switchToFirstPerson(state.controls, state.camera); + } else if (camMode === "FirstPerson") { + setCamMode("ThirdPerson"); + await switchToThirdPerson(state.controls, state.camera); + } + + setIsTransitioning(false); + } + }; + + window.addEventListener("keydown", handleKeyPress); + return () => { + window.removeEventListener("keydown", handleKeyPress); + }; + }, [ + camMode, + isTransitioning, + toggleView, + state.controls, + state.camera, + setCamMode, + ]); + + useFrame(() => { + const { forward, backward, left, right } = get(); + if (!state.controls) return; + if (camMode === "ThirdPerson" || !document.pointerLockElement) return; + + const speedMultiplier = isShiftActive ? 4 : 1; + + if (forward) { + state.controls.forward( + CONSTANTS.firstPersonControls.forwardSpeed * speedMultiplier, + true + ); + } + if (backward) { + state.controls.forward( + CONSTANTS.firstPersonControls.backwardSpeed * speedMultiplier, + true + ); + } + if (left) { + state.controls.truck( + CONSTANTS.firstPersonControls.leftSpeed * speedMultiplier, + 0, + true + ); + } + if (right) { + state.controls.truck( + CONSTANTS.firstPersonControls.rightSpeed * speedMultiplier, + 0, + true + ); + } + }); + + return null; // This component does not render any UI }; -export default CamMode; \ No newline at end of file +export default CamMode; diff --git a/app/src/types/world/worldConstants.ts b/app/src/types/world/worldConstants.ts index 924c12c..0374c8a 100644 --- a/app/src/types/world/worldConstants.ts +++ b/app/src/types/world/worldConstants.ts @@ -189,10 +189,10 @@ export const firstPersonControls: Controls = { maxDistance: 0, // Maximum distance from the target maxPolarAngle: Math.PI, // Maximum polar angle leftMouse: 1, // Mouse button for rotation (ROTATE) - forwardSpeed: 0.3, // Speed of forward movement - backwardSpeed: -0.3, // Speed of backward movement - leftSpeed: -0.3, // Speed of left movement - rightSpeed: 0.3, // Speed of right movement + forwardSpeed: 0.1, // Speed of forward movement + backwardSpeed: -0.1, // Speed of backward movement + leftSpeed: -0.1, // Speed of left movement + rightSpeed: 0.1, // Speed of right movement }; export const thirdPersonControls: ThirdPersonControls = { diff --git a/app/src/utils/shortcutkeys/handleShortcutKeys.ts b/app/src/utils/shortcutkeys/handleShortcutKeys.ts index 43ca553..52877b9 100644 --- a/app/src/utils/shortcutkeys/handleShortcutKeys.ts +++ b/app/src/utils/shortcutkeys/handleShortcutKeys.ts @@ -190,7 +190,7 @@ const KeyPressListener: React.FC = () => { return () => { window.removeEventListener("keydown", handleKeyPress); }; - }, [activeModule, toggleUI, toggleView]); // Dependencies to reapply effect if these values change + }, [activeModule, setActiveModule, setActiveSubTool, setActiveTool, setAddAction, setDeleteTool, setIsPlaying, setSelectedWallItem, setToggleThreeD, setToggleUI, setToggleView, setToolMode, toggleUI, toggleView]); // Dependencies to reapply effect if these values change return null; // This component does not render any UI }; From 77a6dda068ee2d70e0594b1d4145ca05bf2e42fa Mon Sep 17 00:00:00 2001 From: Vishnu Date: Tue, 29 Apr 2025 14:58:58 +0530 Subject: [PATCH 5/9] feat: Add icon color variables for light and dark themes --- app/src/styles/abstracts/variables.scss | 11 ++ app/src/styles/base/base.scss | 203 +++++++++++++----------- 2 files changed, 121 insertions(+), 93 deletions(-) diff --git a/app/src/styles/abstracts/variables.scss b/app/src/styles/abstracts/variables.scss index 6bb3d57..8400709 100644 --- a/app/src/styles/abstracts/variables.scss +++ b/app/src/styles/abstracts/variables.scss @@ -60,6 +60,17 @@ $highlight-secondary-color: #6F42C1; $highlight-accent-color-dark: #403E6A; $highlight-secondary-color-dark: #C4ABF1; +// icon colors +// ---------- light mode ---------- +$icon-default-color: #6F42C1; +$icon-default-color-hover: #7f4ddb; +$icon-default-color-active: #F2F2F7; + +// ---------- dark mode ---------- +$icon-default-color-dark: #6F42C1; +$icon-default-color-hover-dark: #7f4ddb; +$icon-default-color-active-dark: #F2F2F7; + // colors $color1: #A392CD; $color2: #7b4cd3; diff --git a/app/src/styles/base/base.scss b/app/src/styles/base/base.scss index e74c0ec..d812e9b 100644 --- a/app/src/styles/base/base.scss +++ b/app/src/styles/base/base.scss @@ -1,139 +1,156 @@ -@use "../abstracts/variables" as *; // abstracts/variables.scss +@use "../abstracts/variables" as *; -// Light theme styles [data-theme="light"] { - // Text and Input colors - --text-color: #{$text-color}; // Main text color for light theme - --text-disabled: #{$text-disabled}; // Disabled text color - --input-text-color: #{$input-text-color}; // Input field text color + // text colors + --text-color: #{$text-color}; + --text-disabled: #{$text-disabled}; + --input-text-color: #{$input-text-color}; + --highlight-text-color: #{$highlight-text-color}; - // Accent and Highlight colors - --primary-color: #{$background-color}; // Primary color for light theme - --accent-color: #{$accent-color}; // Primary accent color for light theme - --highlight-accent-color: #{$highlight-accent-color}; // Highlight color for light theme - --accent-gradient-color: #{$acent-gradient}; // Primary accent color for light theme + // background colors + --background-color: #{$background-color}; + --background-color-secondary: #{$background-color-secondary}; + --background-color-accent: #{$background-color-accent}; + --background-color-button: #{$background-color-button}; + --background-color-drop-down: #{$background-color-drop-down}; + --background-color-input: #{$background-color-input}; + --background-color-input-focus: #{$background-color-input-focus}; + --background-color-drop-down-gradient: #{$background-color-drop-down-gradient}; + --background-color-selected: #{$background-color-selected}; + --background-radial-gray-gradient: #{$background-radial-gray-gradient}; + + // border colors + --border-color: #{$border-color}; + --border-color-accent: #{$border-color-accent}; + + // highlight colors + --highlight-accent-color: #{$highlight-accent-color}; + --highlight-secondary-color: #{$highlight-secondary-color}; + + // icon colors + --icon-default-color: #{$icon-default-color}; + --icon-default-color-active: #{$icon-default-color-active}; + + // old colors + --accent-color: #{$accent-color}; + --highlight-accent-color: #{$highlight-accent-color}; + --accent-gradient-color: #{$acent-gradient}; --faint-gradient-color: #{$faint-gradient}; - - // Background colors - --background-color: #{$background-color}; // Main background color - --background-color-secondary: #{$background-color-secondary}; // Secondary background color - --background-color-gray: #{$background-color-gray}; // Secondary background color - - // Border colors - --border-color: #{$border-color}; // Border color for light theme - - // Shadow variables - --shadow-main-light: #{$shadow-color}; // Main shadow color - --box-shadow-light: 0px 2px 4px var(--shadow-main-light); // Light shadow - --box-shadow-medium: 0px 4px 8px var(--shadow-main-light); // Medium shadow - --box-shadow-heavy: 0px 8px 16px var(--shadow-main-light); // Heavy shadow - - // Font families - --font-inter: #{$font-inter}; // Inter font family - --font-josefin-sans: #{$font-josefin-sans}; // Josefin Sans font family - --font-poppins: #{$font-poppins}; // Poppins font family - --font-roboto: #{$font-roboto}; // Roboto font family + --background-color-gray: #{$background-color-gray}; + --border-color: #{$border-color}; + --shadow-main-light: #{$shadow-color}; + --box-shadow-light: 0px 2px 4px var(--shadow-main-light); + --box-shadow-medium: 0px 4px 8px var(--shadow-main-light); + --box-shadow-heavy: 0px 8px 16px var(--shadow-main-light); + --font-inter: #{$font-inter}; + --font-josefin-sans: #{$font-josefin-sans}; + --font-poppins: #{$font-poppins}; + --font-roboto: #{$font-roboto}; } -// Dark theme styles [data-theme="dark"] { - // Text and Input colors - --text-color: #{$text-color-dark}; // Main text color for dark theme - --text-disabled: #{$text-disabled-dark}; // Disabled text color - --input-text-color: #{$input-text-color-dark}; // Input field text color + // text colors + --text-color: #{$text-color-dark}; + --text-disabled: #{$text-disabled-dark}; + --input-text-color: #{$input-text-color-dark}; + --highlight-text-color: #{$highlight-text-color-dark}; - // Accent and Highlight colors - --primary-color: #{$highlight-accent-color-dark}; - --accent-color: #{$accent-color-dark}; // Primary accent color for dark theme - --highlight-accent-color: #{$highlight-accent-color-dark}; // Highlight color for dark theme - --accent-gradient-color: #{$acent-gradient-dark}; // Primary accent color for light theme + // background colors + --background-color: #{$background-color-dark}; + --background-color-secondary: #{$background-color-secondary-dark}; + --background-color-accent: #{$background-color-accent-dark}; + --background-color-button: #{$background-color-button-dark}; + --background-color-drop-down: #{$background-color-drop-down-dark}; + --background-color-input: #{$background-color-input-dark}; + --background-color-input-focus: #{$background-color-input-focus-dark}; + --background-color-drop-down-gradient: #{$background-color-drop-down-gradient-dark}; + --background-color-selected: #{$background-color-selected-dark}; + --background-radial-gray-gradient: #{$background-radial-gray-gradient-dark}; + + // border colors + --border-color: #{$border-color}; + --border-color-accent: #{$border-color-accent-dark}; + + // highlight colors + --highlight-accent-color: #{$highlight-accent-color-dark}; + --highlight-secondary-color: #{$highlight-secondary-color-dark}; + + // icon colors + --icon-default-color: #{$icon-default-color-dark}; + --icon-default-color-active: #{$icon-default-color-active-dark}; + + // old colors + --accent-color: #{$accent-color-dark}; + --highlight-accent-color: #{$highlight-accent-color-dark}; + --accent-gradient-color: #{$acent-gradient-dark}; --faint-gradient-color: #{$faint-gradient-dark}; - - // Background colors - --background-color: #{$background-color-dark}; // Main background color - --background-color-secondary: #{$background-color-secondary-dark}; // Secondary background color - --background-color-gray: #{$background-color-gray-dark}; // Secondary background color - - // Border colors - --border-color: #{$border-color-dark}; // Border color for dark theme - - // Shadow variables - --shadow-main-dark: #{$shadow-color}; // Main shadow color - --box-shadow-light: 0px 2px 4px var(--shadow-main-dark); // Light shadow - --box-shadow-medium: 0px 4px 8px var(--shadow-main-dark); // Medium shadow - --box-shadow-heavy: 0px 8px 16px var(--shadow-main-dark); // Heavy shadow - - // Font families - --font-inter: #{$font-inter}; // Inter font family - --font-josefin-sans: #{$font-josefin-sans}; // Josefin Sans font family - --font-poppins: #{$font-poppins}; // Poppins font family - --font-roboto: #{$font-roboto}; // Roboto font family + --background-color-gray: #{$background-color-gray-dark}; + --border-color: #{$border-color-dark}; + --shadow-main-dark: #{$shadow-color}; + --box-shadow-light: 0px 2px 4px var(--shadow-main-dark); + --box-shadow-medium: 0px 4px 8px var(--shadow-main-dark); + --box-shadow-heavy: 0px 8px 16px var(--shadow-main-dark); + --font-inter: #{$font-inter}; + --font-josefin-sans: #{$font-josefin-sans}; + --font-poppins: #{$font-poppins}; + --font-roboto: #{$font-roboto}; } -// Root container styles #root { - height: 100vh; // Full viewport height - width: 100vw; // Full viewport width - overflow: hidden; // Prevent scrollbars + height: 100vh; + width: 100vw; + overflow: hidden; background-color: var(--background-color-gray); } -// Root overlay styles #root-over { - position: fixed; // Fix overlay to the viewport - top: 0; // Align to the top - left: 0; // Align to the left - z-index: 99; // Ensure high stacking order + position: fixed; + top: 0; + left: 0; + z-index: 99; } body { background: var(--background-color); + --font-size-tiny: #{$tiny}; + --font-size-small: #{$small}; + --font-size-regular: #{$regular}; + --font-size-large: #{$large}; + --font-size-xlarge: #{$xlarge}; + --font-size-xxlarge: #{$xxlarge}; + --font-size-xxxlarge: #{$xxxlarge}; + --font-weight-regular: #{$regular-weight}; + --font-weight-medium: #{$medium-weight}; + --font-weight-bold: #{$bold-weight}; - /* Font Sizes */ - --font-size-tiny: #{$tiny}; // Extra small text - --font-size-small: #{$small}; // Small text - --font-size-regular: #{$regular}; // Default text size - --font-size-large: #{$large}; // Large text size - --font-size-xlarge: #{$xlarge}; // Extra large text size - --font-size-xxlarge: #{$xxlarge}; // Double extra large text size - --font-size-xxxlarge: #{$xxxlarge}; // Triple extra large text size - - /* Font Weights */ - --font-weight-regular: #{$regular-weight}; // Regular font weight - --font-weight-medium: #{$medium-weight}; // Medium font weight - --font-weight-bold: #{$bold-weight}; // Bold font weight + // colors + --color1: #{$color1}; + --color2: #{$color2}; + --color3: #{$color3}; + --color4: #{$color4}; + --color5: #{$color5}; } -/* Apply custom scrollbar styles globally */ ::-webkit-scrollbar { width: 8px; - /* Width of the scrollbar */ height: 8px; - /* Height for horizontal scrollbars */ } ::-webkit-scrollbar-track { background: transparent; - /* Background of the scrollbar track */ border-radius: 4px; - /* Rounded corners */ } ::-webkit-scrollbar-thumb { background: var(--accent-color); - /* Scrollbar handle color */ border-radius: 4px; - /* Rounded corners */ border: 2px solid var(--primary-color); - /* Padding around the scrollbar handle */ } ::-webkit-scrollbar-thumb:hover { background: var(--accent-color); - /* Handle color on hover */ } ::-webkit-scrollbar-corner { background: transparent; - /* Remove corner styling for scrollable containers */ } From 45fea9465ef7d07cf79123b6bdf5fe972cd93869 Mon Sep 17 00:00:00 2001 From: Vishnu Date: Tue, 29 Apr 2025 16:27:03 +0530 Subject: [PATCH 6/9] Refactor styles to use 'background' shorthand property instead of 'background-color' for consistency across components. Updated various components including confirmation pop-up, input fields, lists, marketplace, menu, module toggle, simulation, and more. Enhanced visual effects with backdrop filters and adjusted padding/margins for improved layout. Removed unnecessary styles and optimized hover effects for better user experience. --- app/src/components/icons/ContextMenuIcons.tsx | 34 +++---- app/src/components/icons/DashboardIcon.tsx | 86 ++++++++--------- .../components/icons/ExportCommonIcons.tsx | 90 ++++++++--------- .../components/icons/ExportModuleIcons.tsx | 40 ++++---- app/src/components/icons/ExportToolsIcons.tsx | 84 ++++++++-------- app/src/components/icons/HeaderIcons.tsx | 18 ++-- app/src/components/icons/Logo.tsx | 68 ++++++------- .../icons/RealTimeVisulationIcons.tsx | 14 +-- app/src/components/icons/SimulationIcons.tsx | 30 +++--- app/src/components/icons/marketPlaceIcons.tsx | 10 +- app/src/modules/builder/groups/zoneGroup.tsx | 2 +- app/src/modules/market/CardsContainer.tsx | 50 +++++----- .../widgets/panel/AddButtons.tsx | 8 +- app/src/styles/abstracts/variables.scss | 17 ++-- app/src/styles/base/base.scss | 15 +-- app/src/styles/base/global.scss | 6 +- .../styles/components/analysis/analysis.scss | 18 ++-- .../styles/components/confirmationPopUp.scss | 4 +- app/src/styles/components/input.scss | 96 ++++++++----------- app/src/styles/components/lists.scss | 10 +- .../components/marketPlace/marketPlace.scss | 39 ++++---- app/src/styles/components/menu/menu.scss | 14 +-- app/src/styles/components/moduleToggle.scss | 11 ++- .../components/simulation/simulation.scss | 6 +- app/src/styles/components/templates.scss | 2 +- app/src/styles/components/tools.scss | 19 ++-- .../visualization/floating/common.scss | 20 ++-- .../visualization/ui/styledWidgets.scss | 2 +- app/src/styles/layout/loading.scss | 2 +- app/src/styles/layout/popup.scss | 12 +-- app/src/styles/layout/sidebar.scss | 73 +++++++------- app/src/styles/layout/toast.scss | 8 +- app/src/styles/pages/dashboard.scss | 8 +- app/src/styles/pages/home.scss | 35 ------- app/src/styles/pages/realTimeViz.scss | 58 +++++------ app/src/styles/pages/userAuth.scss | 2 +- app/src/styles/scene/scene.scss | 5 +- 37 files changed, 491 insertions(+), 525 deletions(-) diff --git a/app/src/components/icons/ContextMenuIcons.tsx b/app/src/components/icons/ContextMenuIcons.tsx index 217ad8f..f48cf3b 100644 --- a/app/src/components/icons/ContextMenuIcons.tsx +++ b/app/src/components/icons/ContextMenuIcons.tsx @@ -9,31 +9,31 @@ export function FlipXAxisIcon() { > @@ -52,31 +52,31 @@ export function FlipYAxisIcon() { > @@ -95,31 +95,31 @@ export function FlipZAxisIcon() { ); diff --git a/app/src/components/icons/DashboardIcon.tsx b/app/src/components/icons/DashboardIcon.tsx index f1f4d7d..314a3c8 100644 --- a/app/src/components/icons/DashboardIcon.tsx +++ b/app/src/components/icons/DashboardIcon.tsx @@ -9,13 +9,13 @@ export function NotificationIcon() { > @@ -34,7 +34,7 @@ export function HomeIcon() { > ); @@ -51,7 +51,7 @@ export function ProjectsIcon() { > ); @@ -70,103 +70,103 @@ export function TutorialsIcon() { cx="8.157" cy="8.35866" r="6.17928" - stroke="var(--text-color)" + stroke="var(--icon-default-color)" strokeWidth="0.562865" /> @@ -184,12 +184,12 @@ export function DocumentationIcon() { > @@ -208,7 +208,7 @@ export function HelpIcon() { @@ -236,17 +236,17 @@ export function LogoutIcon() { > diff --git a/app/src/components/icons/ExportCommonIcons.tsx b/app/src/components/icons/ExportCommonIcons.tsx index fcf7202..f6f0287 100644 --- a/app/src/components/icons/ExportCommonIcons.tsx +++ b/app/src/components/icons/ExportCommonIcons.tsx @@ -24,7 +24,7 @@ export function ArrowIcon() { fill="none" xmlns="http://www.w3.org/2000/svg" > - + ); } @@ -40,14 +40,14 @@ export function FocusIcon() { > @@ -65,7 +65,7 @@ export function LockIcon({ isLocked }: { isLocked: boolean }) { > @@ -80,7 +80,7 @@ export function LockIcon({ isLocked }: { isLocked: boolean }) { > @@ -100,7 +100,7 @@ export function EyeIcon({ isClosed }: { isClosed: boolean }) { @@ -119,13 +119,13 @@ export function EyeIcon({ isClosed }: { isClosed: boolean }) { > @@ -142,9 +142,9 @@ export function KebebIcon() { fill="none" xmlns="http://www.w3.org/2000/svg" > - - - + + + ); } @@ -160,7 +160,7 @@ export function AddIcon() { > @@ -179,12 +179,12 @@ export function CloseIcon() { > @@ -203,11 +203,11 @@ export function SettingsIcon() { @@ -231,7 +231,7 @@ export function HelpIcon() { @@ -255,7 +255,7 @@ export function TrashIcon() { @@ -280,32 +280,32 @@ export function FilterIcon() { > @@ -324,7 +324,7 @@ export function EyeDroperIcon({ isActive }: { isActive: boolean }) { @@ -387,7 +387,7 @@ export function UndoIcon() { fillRule="evenodd" clipRule="evenodd" d="M3.76516 1.73483C3.91161 1.88128 3.91161 2.11872 3.76516 2.26516L2.90533 3.125H7.5C9.0878 3.125 10.375 4.41218 10.375 6C10.375 7.5878 9.0878 8.875 7.5 8.875H4C3.79289 8.875 3.625 8.7071 3.625 8.5C3.625 8.2929 3.79289 8.125 4 8.125H7.5C8.6736 8.125 9.625 7.1736 9.625 6C9.625 4.82639 8.6736 3.875 7.5 3.875H2.90533L3.76516 4.73483C3.91161 4.88128 3.91161 5.1187 3.76516 5.26515C3.61872 5.4116 3.38128 5.4116 3.23483 5.26515L1.73483 3.76516C1.58839 3.61872 1.58839 3.38128 1.73483 3.23483L3.23483 1.73483C3.38128 1.58839 3.61872 1.58839 3.76516 1.73483Z" - fill="var(--text-color)" + fill="var(--icon-default-color)" /> ); @@ -406,7 +406,7 @@ export function RedoIcon() { fillRule="evenodd" clipRule="evenodd" d="M8.23484 1.73483C8.08839 1.88128 8.08839 2.11872 8.23484 2.26516L9.09467 3.125H4.5C2.9122 3.125 1.625 4.41218 1.625 6C1.625 7.5878 2.9122 8.875 4.5 8.875H8C8.20711 8.875 8.375 8.7071 8.375 8.5C8.375 8.2929 8.20711 8.125 8 8.125H4.5C3.3264 8.125 2.375 7.1736 2.375 6C2.375 4.82639 3.3264 3.875 4.5 3.875H9.09467L8.23484 4.73483C8.08839 4.88128 8.08839 5.1187 8.23484 5.26515C8.38128 5.4116 8.61872 5.4116 8.76517 5.26515L10.2652 3.76516C10.4116 3.61872 10.4116 3.38128 10.2652 3.23483L8.76517 1.73483C8.61872 1.58839 8.38128 1.58839 8.23484 1.73483Z" - fill="var(--text-color)" + fill="var(--icon-default-color)" /> ); @@ -442,7 +442,7 @@ export function RemoveIcon() { fill="none" xmlns="http://www.w3.org/2000/svg" > - + ); } @@ -458,11 +458,11 @@ export function InfoIcon() { > ); @@ -512,21 +512,21 @@ export const KebabIcon = () => { cy="1.35112" rx="1.4993" ry="1.27477" - fill="var(--text-color)" + fill="var(--icon-default-color)" /> ); @@ -545,7 +545,7 @@ export const DublicateIcon = () => { fillRule="evenodd" clipRule="evenodd" d="M14.3125 11.375C14.3125 11.7545 14.0045 12.0625 13.625 12.0625H8.125C7.7455 12.0625 7.4375 11.7545 7.4375 11.375V5.875C7.4375 5.4955 7.7455 5.1875 8.125 5.1875H13.625C14.0045 5.1875 14.3125 5.4955 14.3125 5.875V11.375ZM13.625 4.5H8.125C7.36566 4.5 6.75 5.11566 6.75 5.875V11.375C6.75 12.1343 7.36566 12.75 8.125 12.75H13.625C14.3843 12.75 15 12.1343 15 11.375V5.875C15 5.11566 14.3843 4.5 13.625 4.5ZM11.5625 14.125C11.5625 14.5045 11.2545 14.8125 10.875 14.8125H5.375C4.9955 14.8125 4.6875 14.5045 4.6875 14.125V8.625C4.6875 8.2455 4.9955 7.9375 5.375 7.9375H6.0625V7.25H5.375C4.61566 7.25 4 7.86566 4 8.625V14.125C4 14.8843 4.61566 15.5 5.375 15.5H10.875C11.6343 15.5 12.25 14.8843 12.25 14.125V13.4375H11.5625V14.125Z" - fill="var(--text-color)" + fill="var(--icon-default-color)" /> ); @@ -562,31 +562,31 @@ export const DeleteIcon = () => { > diff --git a/app/src/components/icons/ExportModuleIcons.tsx b/app/src/components/icons/ExportModuleIcons.tsx index fb2f566..1dda323 100644 --- a/app/src/components/icons/ExportModuleIcons.tsx +++ b/app/src/components/icons/ExportModuleIcons.tsx @@ -10,8 +10,8 @@ export function BuilderIcon({ isActive }: { isActive: boolean }) { > @@ -29,41 +29,41 @@ export function SimulationIcon({ isActive }: { isActive: boolean }) { > @@ -81,19 +81,19 @@ export function VisualizationIcon({ isActive }: { isActive: boolean }) { > @@ -112,20 +112,20 @@ export function CartIcon({ isActive }: { isActive: boolean }) { > diff --git a/app/src/components/icons/ExportToolsIcons.tsx b/app/src/components/icons/ExportToolsIcons.tsx index 478113c..cfe56ba 100644 --- a/app/src/components/icons/ExportToolsIcons.tsx +++ b/app/src/components/icons/ExportToolsIcons.tsx @@ -11,13 +11,13 @@ export function ZoneIcon({ isActive }: { isActive: boolean }) { @@ -41,27 +41,27 @@ export function AsileIcon({ isActive }: { isActive: boolean }) { > ); @@ -87,36 +87,36 @@ export function FloorIcon({ isActive }: { isActive: boolean }) { ); @@ -212,56 +212,56 @@ export function WallIcon({ isActive }: { isActive: boolean }) { @@ -305,7 +305,7 @@ export function WindowIcon({ isActive }: { isActive: boolean }) { > @@ -349,7 +349,7 @@ export function DoorIcon({ isActive }: { isActive: boolean }) { > ); @@ -393,17 +393,17 @@ export function PillerIcon({ isActive }: { isActive: boolean }) { > @@ -444,16 +444,16 @@ export function CommentIcon({ isActive }: { isActive: boolean }) { > @@ -485,7 +485,7 @@ export function FreeMoveIcon({ isActive }: { isActive: boolean }) { > ); @@ -533,7 +533,7 @@ export function DeleteIcon({ isActive }: { isActive: boolean }) { > @@ -565,7 +565,7 @@ export function CursorIcon({ isActive }: { isActive: boolean }) { > @@ -584,7 +584,7 @@ export function PlayIcon({ isActive }: { isActive: boolean }) { > @@ -603,7 +603,7 @@ export function PenIcon({ isActive }: { isActive: boolean }) { @@ -623,13 +623,13 @@ export function SaveTemplateIcon({ isActive }: { isActive: boolean }) { @@ -648,19 +648,19 @@ export function MeasureToolIcon({ isActive }: { isActive: boolean }) { > ); diff --git a/app/src/components/icons/HeaderIcons.tsx b/app/src/components/icons/HeaderIcons.tsx index 81f3690..ef02f02 100644 --- a/app/src/components/icons/HeaderIcons.tsx +++ b/app/src/components/icons/HeaderIcons.tsx @@ -65,15 +65,15 @@ export function AppDockIcon() { fill="none" xmlns="http://www.w3.org/2000/svg" > - - - - - - - - - + + + + + + + + + ); } diff --git a/app/src/components/icons/Logo.tsx b/app/src/components/icons/Logo.tsx index d15398c..822e83e 100644 --- a/app/src/components/icons/Logo.tsx +++ b/app/src/components/icons/Logo.tsx @@ -7,108 +7,108 @@ export function LogoIcon() { fill="none" xmlns="http://www.w3.org/2000/svg" > - + diff --git a/app/src/components/icons/RealTimeVisulationIcons.tsx b/app/src/components/icons/RealTimeVisulationIcons.tsx index 84d8cca..d418247 100644 --- a/app/src/components/icons/RealTimeVisulationIcons.tsx +++ b/app/src/components/icons/RealTimeVisulationIcons.tsx @@ -10,43 +10,43 @@ export function CleanPannel() { diff --git a/app/src/components/icons/SimulationIcons.tsx b/app/src/components/icons/SimulationIcons.tsx index 4879ea4..67a1a51 100644 --- a/app/src/components/icons/SimulationIcons.tsx +++ b/app/src/components/icons/SimulationIcons.tsx @@ -9,13 +9,13 @@ export function AnalysisIcon({ isActive }: { isActive: boolean }) { > @@ -34,11 +34,11 @@ export function MechanicsIcon({ isActive }: { isActive: boolean }) { > ); @@ -55,15 +55,15 @@ export function PropertiesIcon({ isActive }: { isActive: boolean }) { > ); @@ -82,13 +82,13 @@ export function SimulationIcon({ isActive }: { isActive: boolean }) { fillRule="evenodd" clipRule="evenodd" d="M6.44104 7.04762C6.57815 6.98413 6.73614 6.98413 6.87325 7.04762L12.0161 9.42958C12.198 9.51377 12.3143 9.69589 12.3143 9.89624V15.8512C12.3143 16.0347 12.2165 16.2043 12.0577 16.2962L6.9148 19.2736C6.75547 19.3659 6.55881 19.3659 6.39949 19.2736L1.25661 16.2962C1.09779 16.2043 1 16.0347 1 15.8512V9.89624C1 9.69589 1.11635 9.51377 1.29815 9.42958L6.44104 7.04762ZM2.02857 10.7297L6.14286 12.794V17.9366L2.02857 15.5546V10.7297ZM7.17143 17.9366L11.2857 15.5546V10.7297L7.17143 12.794V17.9366ZM6.65714 11.9013L10.6163 9.91477L6.65714 8.08106L2.69798 9.91477L6.65714 11.9013Z" - fill={isActive ? "var(--primary-color)" : "var(--text-color)"} + fill={isActive ? "var(--icon-default-color-active)" : "var(--icon-default-color)"} /> ); @@ -107,21 +107,21 @@ export function ResetIcon() { > @@ -140,7 +140,7 @@ export function PlayStopIcon() { > @@ -159,7 +159,7 @@ export function ExitIcon() { > diff --git a/app/src/components/icons/marketPlaceIcons.tsx b/app/src/components/icons/marketPlaceIcons.tsx index e69303f..6952ae1 100644 --- a/app/src/components/icons/marketPlaceIcons.tsx +++ b/app/src/components/icons/marketPlaceIcons.tsx @@ -29,13 +29,13 @@ export function DownloadIcon() { fillRule="evenodd" clipRule="evenodd" d="M2.5 11.875C2.84518 11.875 3.125 12.1548 3.125 12.5C3.125 13.6962 3.12633 14.5304 3.21096 15.1599C3.29317 15.7714 3.44354 16.0952 3.67418 16.3258C3.90481 16.5565 4.22863 16.7068 4.8401 16.7891C5.46956 16.8737 6.30383 16.875 7.5 16.875H12.5C13.6962 16.875 14.5304 16.8737 15.1599 16.7891C15.7714 16.7068 16.0952 16.5565 16.3258 16.3258C16.5565 16.0952 16.7068 15.7714 16.7891 15.1599C16.8737 14.5304 16.875 13.6962 16.875 12.5C16.875 12.1548 17.1548 11.875 17.5 11.875C17.8452 11.875 18.125 12.1548 18.125 12.5V12.5458C18.125 13.6854 18.125 14.604 18.0279 15.3265C17.9271 16.0766 17.7113 16.7081 17.2097 17.2097C16.7081 17.7113 16.0766 17.9271 15.3265 18.0279C14.604 18.125 13.6854 18.125 12.5458 18.125H7.45428C6.31462 18.125 5.39602 18.125 4.67354 18.0279C3.92345 17.9271 3.29189 17.7113 2.79029 17.2097C2.28869 16.7081 2.07295 16.0766 1.9721 15.3265C1.87497 14.604 1.87498 13.6854 1.875 12.5458C1.875 12.5305 1.875 12.5152 1.875 12.5C1.875 12.1548 2.15483 11.875 2.5 11.875Z" - fill="var(--primary-color)" + fill="var(--icon-default-color-active)" /> ); @@ -52,13 +52,13 @@ export function EyeIconBig() { > @@ -80,7 +80,7 @@ export function CommentsIcon() { fillRule="evenodd" clipRule="evenodd" d="M8 13C7.416 13 6.852 12.932 6.31 12.8165L3.956 14.2315L3.9875 11.912C2.183 10.827 1 9.033 1 7C1 3.6865 4.134 1 8 1C11.866 1 15 3.6865 15 7C15 10.314 11.866 13 8 13ZM8 0C3.582 0 0 3.1345 0 7C0 9.2095 1.1725 11.177 3 12.4595V16L6.5045 13.8735C6.9895 13.9535 7.4885 14 8 14C12.418 14 16 10.866 16 7C16 3.1345 12.418 0 8 0ZM11.5 5.5H4.5C4.224 5.5 4 5.724 4 6C4 6.2765 4.224 6.5 4.5 6.5H11.5C11.776 6.5 12 6.2765 12 6C12 5.724 11.776 5.5 11.5 5.5ZM10.5 8.5H5.5C5.224 8.5 5 8.7235 5 9C5 9.2765 5.224 9.5 5.5 9.5H10.5C10.776 9.5 11 9.2765 11 9C11 8.7235 10.776 8.5 10.5 8.5Z" - fill="var(--text-color)" + fill="var(--icon-default-color)" /> diff --git a/app/src/modules/builder/groups/zoneGroup.tsx b/app/src/modules/builder/groups/zoneGroup.tsx index f1818f3..1eadd24 100644 --- a/app/src/modules/builder/groups/zoneGroup.tsx +++ b/app/src/modules/builder/groups/zoneGroup.tsx @@ -563,7 +563,7 @@ const ZoneGroup: React.FC = () => { key={index} position={midpoint} rotation={[0, -angle, 0]} - // visible={false} + visible={false} > = ({ models }) => { }; return ( -
-
Products You May Like
-
- {models.length > 0 && - models.map((assetDetail) => ( - +
+
Products You May Like
+
+ {models.length > 0 && + models.map((assetDetail) => ( + + ))} + {/* */} + {selectedCard && ( + - ))} - {/* */} - {selectedCard && ( - - )} - {/* */} + )} + {/* */} +
); diff --git a/app/src/modules/visualization/widgets/panel/AddButtons.tsx b/app/src/modules/visualization/widgets/panel/AddButtons.tsx index d066cd4..4877824 100644 --- a/app/src/modules/visualization/widgets/panel/AddButtons.tsx +++ b/app/src/modules/visualization/widgets/panel/AddButtons.tsx @@ -304,8 +304,8 @@ const AddButtons: React.FC = ({
@@ -341,8 +341,8 @@ const AddButtons: React.FC = ({
diff --git a/app/src/styles/abstracts/variables.scss b/app/src/styles/abstracts/variables.scss index 8400709..d1a6a5e 100644 --- a/app/src/styles/abstracts/variables.scss +++ b/app/src/styles/abstracts/variables.scss @@ -10,16 +10,19 @@ $text-color: #2b3344; $text-disabled: #b7b7c6; $input-text-color: #595965; $highlight-text-color: #6f42c1; +$text-button-color: #f3f3fd; // ---------- dark mode ---------- $text-color-dark: #f3f3fd; $text-disabled-dark: #6f6f7a; $input-text-color-dark: #b5b5c8; $highlight-text-color-dark: #B392F0; +$text-button-color-dark: #f3f3fd; // background colors // ---------- light mode ---------- $background-color: linear-gradient(-45deg, #FCFDFDCC 0%, #FCFDFD99 100%); +$background-color-solid: #fcfdfd; $background-color-secondary: #FCFDFD4D; $background-color-accent: #6f42c1; $background-color-button: #6f42c1; @@ -32,6 +35,7 @@ $background-radial-gray-gradient: radial-gradient(circle, #bfe0f8 0%, #e9ebff 46 // ---------- dark mode ---------- $background-color-dark: linear-gradient(-45deg, #333333B3 0%, #2D2437B3 100%); +$background-color-solid-dark: #19191d; $background-color-secondary-dark: #19191D99; $background-color-accent-dark: #6f42c1; $background-color-button-dark: #6f42c1; @@ -85,15 +89,15 @@ $accent-color-dark: #c4abf1; $highlight-accent-color: #e0dfff; $highlight-accent-color-dark: #403e6a; -$background-color: #fcfdfd; -$background-color-dark: #19191d; -$background-color-secondary: #e1e0ff80; -$background-color-secondary-dark: #39394f99; +// $background-color: #fcfdfd; +// $background-color-dark: #19191d; +// $background-color-secondary: #e1e0ff80; +// $background-color-secondary-dark: #39394f99; $background-color-gray: #f3f3f3; $background-color-gray-dark: #232323; -$border-color: #e0dfff; -$border-color-dark: #403e6a; +// $border-color: #e0dfff; +// $border-color-dark: #403e6a; $shadow-color: #3c3c431a; $shadow-color-dark: #8f8f8f1a; @@ -141,3 +145,4 @@ $border-radius-medium: 6px; $border-radius-large: 12px; $border-radius-circle: 50%; $border-radius-extra-large: 20px; +$border-radius-xxx: 30px; diff --git a/app/src/styles/base/base.scss b/app/src/styles/base/base.scss index d812e9b..bd1403e 100644 --- a/app/src/styles/base/base.scss +++ b/app/src/styles/base/base.scss @@ -4,11 +4,13 @@ // text colors --text-color: #{$text-color}; --text-disabled: #{$text-disabled}; + --text-button-color: #{$text-button-color}; --input-text-color: #{$input-text-color}; --highlight-text-color: #{$highlight-text-color}; // background colors --background-color: #{$background-color}; + --background-color-solid: #{$background-color-solid}; --background-color-secondary: #{$background-color-secondary}; --background-color-accent: #{$background-color-accent}; --background-color-button: #{$background-color-button}; @@ -52,11 +54,13 @@ // text colors --text-color: #{$text-color-dark}; --text-disabled: #{$text-disabled-dark}; + --text-button-color: #{$text-button-color-dark}; --input-text-color: #{$input-text-color-dark}; --highlight-text-color: #{$highlight-text-color-dark}; // background colors --background-color: #{$background-color-dark}; + --background-color-solid: #{$background-color-solid-dark}; --background-color-secondary: #{$background-color-secondary-dark}; --background-color-accent: #{$background-color-accent-dark}; --background-color-button: #{$background-color-button-dark}; @@ -100,7 +104,7 @@ height: 100vh; width: 100vw; overflow: hidden; - background-color: var(--background-color-gray); + background: var(--background-color-gray); } #root-over { @@ -132,8 +136,8 @@ body { } ::-webkit-scrollbar { - width: 8px; - height: 8px; + width: 4px; + height: 4px; } ::-webkit-scrollbar-track { @@ -142,13 +146,12 @@ body { } ::-webkit-scrollbar-thumb { - background: var(--accent-color); + background: var(--background-color-button); border-radius: 4px; - border: 2px solid var(--primary-color); } ::-webkit-scrollbar-thumb:hover { - background: var(--accent-color); + background: var(--background-color-button); } ::-webkit-scrollbar-corner { diff --git a/app/src/styles/base/global.scss b/app/src/styles/base/global.scss index 3ba017e..d1bf505 100644 --- a/app/src/styles/base/global.scss +++ b/app/src/styles/base/global.scss @@ -1,5 +1,9 @@ +@use "../abstracts/variables" as *; +@use "../abstracts/mixins" as *; + section, .section{ padding: 12px; outline: 1px solid var(--border-color); - border-radius: 16px; + border-radius: #{$border-radius-large}; + background: var(--background-color); } diff --git a/app/src/styles/components/analysis/analysis.scss b/app/src/styles/components/analysis/analysis.scss index bc33556..9c4b0e6 100644 --- a/app/src/styles/components/analysis/analysis.scss +++ b/app/src/styles/components/analysis/analysis.scss @@ -63,14 +63,14 @@ height: 4px; border-radius: 13px; overflow: hidden; - background-color: #FBEBD7; + background: #FBEBD7; .bar-fill { position: absolute; height: 100%; top: 0; left: 0; - background-color: #FC9D2F; + background: #FC9D2F; border-radius: 13px; } @@ -144,7 +144,7 @@ } canvas { - background-color: transparent; + background: transparent; } } } @@ -200,15 +200,15 @@ height: 5px; &:nth-child(1) { - background-color: #F3C64D; + background: #F3C64D; } &:nth-child(2) { - background-color: #67B3F4; + background: #67B3F4; } &:nth-child(3) { - background-color: #7981F5; + background: #7981F5; } } } @@ -228,21 +228,21 @@ &:nth-child(1) { .indicator { - background-color: #F3C64D; + background: #F3C64D; } } &:nth-child(2) { .indicator { - background-color: #67B3F4; + background: #67B3F4; } } &:nth-child(3) { .indicator { - background-color: #7981F5; + background: #7981F5; } } diff --git a/app/src/styles/components/confirmationPopUp.scss b/app/src/styles/components/confirmationPopUp.scss index 4bef0ae..e955a79 100644 --- a/app/src/styles/components/confirmationPopUp.scss +++ b/app/src/styles/components/confirmationPopUp.scss @@ -11,7 +11,7 @@ left: 50%; transform: translate(-50%, -50%); z-index: 5; - background-color: var(--background-color); + background: var(--background-color); padding: 14px 12px; border-radius: 6px; @@ -32,7 +32,7 @@ } &:last-child { - background-color: #ffe3e0; + background: #ffe3e0; color: #f65648; } diff --git a/app/src/styles/components/input.scss b/app/src/styles/components/input.scss index 21554e8..48d6ee8 100644 --- a/app/src/styles/components/input.scss +++ b/app/src/styles/components/input.scss @@ -15,7 +15,8 @@ input { &:focus, &:active { - outline: 1px solid var(--accent-color); + outline: 1px solid var(--border-color-accent); + background: var(--background-color-input-focus); } &:-webkit-autofill, @@ -27,26 +28,19 @@ input { caret-color: var(--input-text-color); // Background styles - background-color: var(--background-color) !important; - -webkit-box-shadow: 0 0 0px 1000px var(--background-color) inset !important; + background: var(--background-color-solid) !important; + -webkit-box-shadow: 0 0 0px 1000px var(--background-color-solid) inset !important; } // File input specific style adjustments &::file-selector-button { font-size: 14px; - color: var(--accent-color); - background-color: var(--background-color-secondary); + background: var(--background-color-secondary); border: none; outline: none; border-radius: #{$border-radius-small}; padding: 2px; cursor: pointer; - - // Hover effect for the file button - &:hover { - color: var(--primary-color); - background-color: var(--accent-color); - } } } @@ -93,8 +87,8 @@ input { } .active { - background-color: var(--accent-color); - color: var(--primary-color); + background: var(--background-color-button); + color: var(--text-button-color); } } @@ -102,14 +96,13 @@ input { position: sticky; top: 0; padding: 8px 10px; - background: var(--background-color); + width: 100%; z-index: 1; .search-container { @include flex-center; width: 100%; border-radius: #{$border-radius-small}; - background-color: var(--background-color); padding: 6px 2px; position: relative; border: 1px solid var(--border-color); @@ -129,7 +122,7 @@ input { font-weight: var(--font-weight-regular); border: none; outline: none; - background-color: transparent; + background: transparent; padding-left: 36px; } @@ -141,16 +134,17 @@ input { height: 24px; border: none; cursor: pointer; - background-color: transparent; + background: transparent; &:hover { - background-color: var(--highlight-accent-color); + background: var(--highlight-accent-color); } } } .active { border: 1px solid var(--accent-color); + background: var(--background-color-input-focus); } } @@ -166,7 +160,7 @@ input { position: absolute; left: 10px; top: 12px; - background-color: var(--background-color); + background: var(--background-color); border-radius: #{$border-radius-small}; box-shadow: var(--box-shadow-medium); z-index: 1; @@ -182,7 +176,7 @@ input { gap: 2px; &:hover { - background-color: var(--background-color-secondary); + background: var(--background-color-secondary); } .icon-container { @@ -197,11 +191,11 @@ input { } .selected { - background-color: var(--highlight-accent-color); + background: var(--highlight-accent-color); color: var(--accent-color); &:hover { - background-color: var(--highlight-accent-color); + background: var(--highlight-accent-color); } } @@ -226,13 +220,13 @@ input { justify-content: space-between; cursor: pointer; border-radius: 6px; - background-color: var(--background-color); + background: var(--background-color); } .dropdown-options { position: absolute; width: 100%; - background-color: var(--primary-color); + background: var(--background-color); border: 1px solid var(--border-color); border-radius: #{$border-radius-small}; z-index: 10; @@ -241,6 +235,7 @@ input { left: 0; top: 110%; padding: 4px; + backdrop-filter: blur(8px); .dropdown-search { margin-bottom: 4px; @@ -253,8 +248,8 @@ input { border-radius: #{$border-radius-small}; &:hover { - color: var(--accent-color); - background-color: var(--highlight-accent-color); + color: var(--highlight-text-color); + background: var(--highlight-accent-color); } } } @@ -318,7 +313,7 @@ input { .dropdown-button { width: 100%; - background-color: var(--background-color) !important; + background: var(--background-color) !important; border: 1px solid var(--border-color) !important; padding: 5px 10px; @@ -335,11 +330,11 @@ input { transition: background-color 0.3s ease; &:hover { - background-color: #333333; + background: #333333; } &.open { - background-color: #333333; + background: #333333; } } @@ -347,7 +342,7 @@ input { position: absolute; top: 110%; right: -16px; - background-color: var(--background-color); + background: var(--background-color); border: 1px solid var(--border-color); border-radius: 5px; box-shadow: #{$box-shadow-medium}; @@ -412,7 +407,7 @@ input { transition: background-color 0.3s ease; &:hover { - background-color: var(--background-color); + background: var(--background-color); } } @@ -435,12 +430,12 @@ input { } &:hover { - background-color: var(--background-color); + background: var(--background-color); } &.open { color: var(--accent-color); - background-color: var(--highlight-accent-color); + background: var(--highlight-accent-color); } .icon { @@ -472,8 +467,8 @@ input { } .check-box { - height: 22px; - width: 44px; + height: 24px; + width: 38px; background: var(--background-color-secondary); border-radius: #{$border-radius-large}; position: relative; @@ -481,8 +476,8 @@ input { .check-box-style { position: absolute; - height: 18px; - width: 18px; + height: 20px; + width: 20px; top: 2px; left: 2px; background: var(--accent-color); @@ -523,7 +518,7 @@ input { -webkit-appearance: none; width: 16px; height: 16px; - background: var(--primary-color); + background: var(--background-color-accent); border-radius: #{$border-radius-circle}; box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); cursor: pointer; @@ -597,19 +592,19 @@ input { cursor: not-allowed; &::-webkit-slider-thumb { - background: var(--primary-color); + background: var(--background-color-accent); box-shadow: none; outline: 4px solid var(--text-disabled); outline: -4px; } &::-moz-range-thumb { - background: var(--primary-color); + background: var(--background-color-accent); box-shadow: none; } &::-ms-thumb { - background: var(--primary-color); + background: var(--background-color-accent); box-shadow: none; } @@ -644,14 +639,10 @@ input { padding: 2px 32px; border: none; border-radius: #{$border-radius-large}; - color: var(--text-disabled); - background: var(--accent-color); + color: var(--text-color); + background: var(--background-color-button); transition: all 0.2s; cursor: pointer; - - &:hover { - color: var(--primary-color); - } } } @@ -710,11 +701,6 @@ input { line-height: 12px; text-align: center; border-radius: #{$border-radius-small}; - - &:hover { - background: var(--accent-color); - color: var(--primary-color); - } } } } @@ -722,8 +708,8 @@ input { .invite-button { padding: 4px 12px; border-radius: #{$border-radius-large}; - background: var(--accent-color); - color: var(--primary-color); + background: var(--background-color-accent); + color: var(--text-button-color); } .multi-email-invite-input.active { @@ -770,7 +756,7 @@ input { width: 100%; height: 100%; border-radius: #{$border-radius-small}; - background-color: var(--background-color-gray); + background: var(--background-color-gray); } } } diff --git a/app/src/styles/components/lists.scss b/app/src/styles/components/lists.scss index cf66d2b..3b52e69 100644 --- a/app/src/styles/components/lists.scss +++ b/app/src/styles/components/lists.scss @@ -30,8 +30,6 @@ } .list-wrapper { - - .no-item { padding: 12px; } @@ -41,7 +39,6 @@ // margin-left: 10px; overflow: hidden; - .list-item { @include flex-space-between; width: 100%; @@ -67,7 +64,7 @@ } .active { - background-color: var(--highlight-accent-color); + background: var(--highlight-accent-color); color: var(--primary-color); } } @@ -75,7 +72,6 @@ .asset-list { border-left: 2px solid var(--border-color); - margin-left: 20px + margin-left: 20px; } - -} \ No newline at end of file +} diff --git a/app/src/styles/components/marketPlace/marketPlace.scss b/app/src/styles/components/marketPlace/marketPlace.scss index c93b344..b84a252 100644 --- a/app/src/styles/components/marketPlace/marketPlace.scss +++ b/app/src/styles/components/marketPlace/marketPlace.scss @@ -5,28 +5,28 @@ height: 100vh; width: 100vw; z-index: #{$z-index-marketplace}; - background-color: var(--background-color-secondary); + background: var(--background-color-secondary); position: absolute; left: 0; top: 0; padding: 100px 50px; padding-bottom: 32px; - backdrop-filter: blur(6px); - + .marketplace-container { position: relative; padding: 20px 2px; height: 100%; - background-color: var(--background-color); + background: var(--background-color); box-shadow: #{$box-shadow-medium}; - border-radius: #{$border-radius-extra-large}; + border-radius: #{$border-radius-xxx}; + outline: 1px solid var(--border-color); + backdrop-filter: blur(16px); } .marketPlace { width: 100%; height: 100%; overflow: auto; - padding-bottom: 60px; display: flex; flex-direction: column; gap: 24px; @@ -83,12 +83,18 @@ } } } - + .cards-container-wrapper{ + position: relative; + height: calc(100% - 60px); + padding: 0px 10px; + } .cards-container-container { - padding: 0px 20px; display: flex; + padding: 0 10px; flex-direction: column; gap: 6px; + height: 100%; + overflow: auto; .header { color: var(--text-color); @@ -107,7 +113,8 @@ border-radius: 18px; padding: 12px; box-shadow: 0px 2px 10.5px 0px #0000000d; - border: 1px solid var(--background-accent-transparent, #e0dfff80); + background: var(--background-color); + border: 1px solid var(--border-color); position: relative; display: flex; flex-direction: column; @@ -124,7 +131,7 @@ height: 30px; border-radius: 10px; padding: 5px; - background-color: var(--accent-color); + background: var(--accent-color); } .image-container { @@ -193,11 +200,11 @@ .buy-now-button { width: 100%; - background-color: var(--background-color-secondary); + background: var(--background-color-button); border-radius: $border-radius-extra-large; padding: 8px 0; @include flex-center; - color: var(--accent-color); + color: var(--text-button-color); &:hover { cursor: pointer; @@ -220,7 +227,7 @@ .assetPreview { width: 100%; height: 100%; - background-color: var(--background-color); + background: var(--background-color); display: flex; gap: 12px; overflow: hidden; @@ -262,7 +269,7 @@ border-radius: 50%; font-weight: var(--font-weight-bold); color: var(--background-color); - background-color: var(--accent-color); + background: var(--accent-color); } .organization-details { @@ -327,7 +334,7 @@ display: block; width: 2px; height: 12px; - background-color: #ccc; + background: #ccc; } } @@ -363,7 +370,7 @@ } &:last-child { - background-color: var(--accent-color); + background: var(--accent-color); color: var(--background-color); } } diff --git a/app/src/styles/components/menu/menu.scss b/app/src/styles/components/menu/menu.scss index 55b16f9..34c56d1 100644 --- a/app/src/styles/components/menu/menu.scss +++ b/app/src/styles/components/menu/menu.scss @@ -36,7 +36,7 @@ top: 32px; left: 0; z-index: 5; - background-color: var(--background-color); + background: var(--background-color); color: var(--text-color); box-shadow: var(--box-shadow-light); border-radius: 8px; @@ -73,7 +73,7 @@ position: absolute; top: 0; left: 100%; - background-color: var(--background-color); + background: var(--background-color); min-width: 220px; border-radius: 4px; box-shadow: var(--box-shadow-light); @@ -95,7 +95,7 @@ rotate: -90deg; } &:hover { - background-color: var(--highlight-accent-color); + background: var(--highlight-accent-color); span, .menu-item-right span { color: var(--accent-color); @@ -123,7 +123,7 @@ position: absolute; left: 100%; top: 0; - background-color: var(--background-color); + background: var(--background-color); min-width: 200px; border-radius: 0 4px 4px 4px; box-shadow: var(--box-shadow-light); @@ -140,7 +140,7 @@ white-space: nowrap; color: var(--text-color); &:hover { - background-color: var(--highlight-accent-color); + background: var(--highlight-accent-color); span { color: var(--accent-color); } @@ -154,7 +154,7 @@ } &:hover { - background-color: var(--highlight-accent-color); + background: var(--highlight-accent-color); .menu-button { color: var(--accent-color); } @@ -164,7 +164,7 @@ .split { width: 100%; height: 1px; - background-color: var(--highlight-accent-color); + background: var(--highlight-accent-color); margin: 2px 0; } } diff --git a/app/src/styles/components/moduleToggle.scss b/app/src/styles/components/moduleToggle.scss index a6a77c8..c864cbf 100644 --- a/app/src/styles/components/moduleToggle.scss +++ b/app/src/styles/components/moduleToggle.scss @@ -18,7 +18,8 @@ padding: 4px 12px; border-radius: #{$border-radius-extra-large}; box-shadow: var(--box-shadow-medium); - background-color: var(--background-color); + background: var(--background-color); + backdrop-filter: blur(8px); cursor: pointer; overflow: hidden; position: relative; @@ -37,7 +38,7 @@ left: 0; width: 0%; height: 100%; - background-color: var(--highlight-accent-color); + background: var(--highlight-accent-color); transition: width 0.2s; border-radius: #{$border-radius-extra-large}; } @@ -49,15 +50,15 @@ } .active { cursor: default; - background-color: var(--accent-color); + background: var(--background-color-button); &::after{ display: none; } &:hover { - background-color: var(--accent-color); + background: var(--background-color-button); } .module { - color: var(--highlight-accent-color); + color: var(--icon-default-color-active); } } } diff --git a/app/src/styles/components/simulation/simulation.scss b/app/src/styles/components/simulation/simulation.scss index eb109c2..9f89d0a 100644 --- a/app/src/styles/components/simulation/simulation.scss +++ b/app/src/styles/components/simulation/simulation.scss @@ -17,11 +17,11 @@ gap: 2px; padding: 6px 8px; min-width: 64px; - background-color: var(--background-color); + background: var(--background-color); border-radius: #{$border-radius-small}; cursor: pointer; &:hover { - background-color: var(--highlight-accent-color); + background: var(--highlight-accent-color); color: var(--accent-color); path { stroke: var(--accent-color); @@ -75,7 +75,7 @@ } .marker{ position: absolute; - background-color: var(--text-disabled); + background: var(--text-disabled); width: 2px; height: 12px; border-radius: 1px; diff --git a/app/src/styles/components/templates.scss b/app/src/styles/components/templates.scss index bd28d94..a2a3da5 100644 --- a/app/src/styles/components/templates.scss +++ b/app/src/styles/components/templates.scss @@ -8,7 +8,7 @@ outline-offset: -3px; border-radius: 16px; .follower-name{ - background-color: var(--user-color); + background: var(--user-color); color: #FFFFFF; padding: 4px 8px; padding-top: 16px; diff --git a/app/src/styles/components/tools.scss b/app/src/styles/components/tools.scss index 5a10518..c80caf5 100644 --- a/app/src/styles/components/tools.scss +++ b/app/src/styles/components/tools.scss @@ -13,14 +13,15 @@ border-radius: #{$border-radius-large}; width: fit-content; transition: width 0.2s; - background-color: var(--background-color); + background: var(--background-color); + backdrop-filter: blur(8px); z-index: #{$z-index-default}; .split { height: 20px; width: 2px; border-radius: 2px; - background: var(--highlight-accent-color); + background: var(--text-disabled); } .draw-tools, @@ -48,10 +49,10 @@ } .active { - background-color: var(--accent-color); + background: var(--accent-color); &:hover { - background-color: var(--accent-color); + background: var(--accent-color); } } } @@ -91,7 +92,7 @@ padding: 4px; &:hover { - background-color: var(--highlight-accent-color); + background: var(--highlight-accent-color); color: var(--accent-color); path { @@ -117,7 +118,7 @@ @include flex-center; padding: 3px; border-radius: #{$border-radius-small}; - background-color: var(--highlight-accent-color); + background: var(--highlight-accent-color); gap: 2px; position: relative; @@ -131,7 +132,7 @@ &::after { content: ""; position: absolute; - background-color: var(--accent-color); + background: var(--accent-color); left: 3px; top: 3px; height: 18px; @@ -161,7 +162,7 @@ width: 30px; height: 30px; border-radius: 50%; - background-color: var(--highlight-accent-color); + background: var(--highlight-accent-color); cursor: pointer; @include flex-center; position: fixed; @@ -174,7 +175,7 @@ font-weight: 700; &:hover { font-weight: 500; - background-color: var(--accent-color); + background: var(--accent-color); color: var(--highlight-accent-color); &::after{ animation: pulse 1s ease-out infinite; diff --git a/app/src/styles/components/visualization/floating/common.scss b/app/src/styles/components/visualization/floating/common.scss index d138959..0084e7a 100644 --- a/app/src/styles/components/visualization/floating/common.scss +++ b/app/src/styles/components/visualization/floating/common.scss @@ -3,7 +3,7 @@ .throughput-wrapper, .card { - background-color: var(--background-color); + background: var(--background-color); box-shadow: var(--box-shadow-heavy); @include flex-center; flex-direction: column; @@ -105,7 +105,7 @@ } .productionCapacity-wrapper { - background-color: var(--background-color); + background: var(--background-color); display: flex; flex-direction: column; gap: 6px; @@ -116,7 +116,7 @@ .headeproductionCapacityr-wrapper, .bar-chart { padding: 14px; - background-color: var(--background-color); + background: var(--background-color); display: flex; flex-direction: column; gap: 6px; @@ -276,7 +276,7 @@ .icon { width: 45px; height: 45px; - background-color: var(--accent-color); + background: var(--accent-color); display: flex; justify-content: center; align-items: center; @@ -289,7 +289,7 @@ display: flex; flex-direction: column; gap: 6px; - background-color: var(--background-color); + background: var(--background-color); padding: 14px; .header { @@ -307,7 +307,7 @@ .productivity-dashboard { width: 100%; - background-color: var(--background-color); + background: var(--background-color); color: white; padding: 20px; border-radius: 8px; @@ -324,7 +324,7 @@ } .options { - background-color: #343b47; + background: #343b47; width: 30px; height: 30px; display: flex; @@ -334,7 +334,7 @@ cursor: pointer; &:hover { - background-color: #49505a; + background: #49505a; } } } @@ -350,7 +350,7 @@ gap: 10px; .metric { - background-color: #2c3e50; + background: #2c3e50; padding: 15px; border-radius: 4px; @@ -445,7 +445,7 @@ } .scaleLabels { - background-color: var(--background-color); + background: var(--background-color); box-shadow: var(--box-shadow-heavy); display: flex; justify-content: space-between; diff --git a/app/src/styles/components/visualization/ui/styledWidgets.scss b/app/src/styles/components/visualization/ui/styledWidgets.scss index 794b756..8262bb3 100644 --- a/app/src/styles/components/visualization/ui/styledWidgets.scss +++ b/app/src/styles/components/visualization/ui/styledWidgets.scss @@ -43,7 +43,7 @@ .icon { width: 16.95305824279785px; height: 16.95305824279785px; - background-color: var(--accent-color); + background: var(--accent-color); border-radius: 50%; display: flex; justify-content: center; diff --git a/app/src/styles/layout/loading.scss b/app/src/styles/layout/loading.scss index 0a13753..59354ff 100644 --- a/app/src/styles/layout/loading.scss +++ b/app/src/styles/layout/loading.scss @@ -4,7 +4,7 @@ .loading-wrapper { height: 100vh; width: 100vw; - background: var(--background-color); + background: var(--background-color-solid); .loading-container { position: relative; height: 100%; diff --git a/app/src/styles/layout/popup.scss b/app/src/styles/layout/popup.scss index b92d8cc..3b31442 100644 --- a/app/src/styles/layout/popup.scss +++ b/app/src/styles/layout/popup.scss @@ -5,13 +5,13 @@ height: 100vh; width: 100vw; background: var(--background-color-secondary); - backdrop-filter: blur(2px); @include flex-center; .collaboration-popup-container { max-width: 50vw; - width: 460px; - background-color: var(--background-color); + width: 520px; + background: var(--background-color); border-radius: #{$border-radius-large}; + backdrop-filter: blur(8px); .split { width: 100%; height: 1px; @@ -88,14 +88,14 @@ .your-name { @include flex-center; gap: 6px; - color: var(--accent-color); + color: var(--text-color); .user-profile{ height: 24px; width: 24px; text-align: center; line-height: 25px; - background-color: var(--accent-color); - color: var(--primary-color); + background: var(--background-color-accent); + color: var(--text-color); border-radius: #{$border-radius-circle}; } } diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss index a102feb..403b27a 100644 --- a/app/src/styles/layout/sidebar.scss +++ b/app/src/styles/layout/sidebar.scss @@ -6,9 +6,10 @@ position: fixed; top: 32px; left: 8px; - background-color: var(--background-color); + background: var(--background-color); backdrop-filter: blur(150px); - border-radius: #{$border-radius-extra-large}; + border-radius: #{$border-radius-xxx}; + outline: 1px solid var(--border-color); box-shadow: #{$box-shadow-medium}; z-index: #{$z-index-tools}; @@ -46,12 +47,12 @@ border-radius: #{$border-radius-small}; &:hover { - background-color: var(--background-color-secondary); + background: var(--background-color-secondary); } } .active { - background-color: var(--background-color-secondary); + background: var(--background-color-secondary); outline: 1px solid var(--accent-color); outline-offset: -1px; } @@ -174,7 +175,7 @@ .stock { padding: 13px 5px; - background-color: var(--background-color-secondary); + background: var(--background-color-secondary); border-radius: 6.33px; display: flex; justify-content: space-between; @@ -243,15 +244,17 @@ position: fixed; top: 32px; right: 8px; - background-color: var(--background-color); + background: var(--background-color); backdrop-filter: blur(150px); - border-radius: #{$border-radius-extra-large}; + border-radius: #{$border-radius-xxx}; + outline: 1px solid var(--border-color); box-shadow: #{$box-shadow-medium}; z-index: #{$z-index-tools}; .header-container { @include flex-space-between; padding: 10px; + padding-left: 16px; width: 100%; gap: 12px; height: 52px; @@ -262,8 +265,8 @@ .share-button { padding: 4px 12px; - color: var(--primary-color); - background-color: var(--accent-color); + color: var(--text-color); + background: var(--background-color-button); font-weight: var(--font-weight-regular); border-radius: #{$border-radius-large}; cursor: pointer; @@ -277,7 +280,7 @@ .split { height: 20px; width: 2px; - background: var(--background-color-secondary); + background: var(--text-disabled); } .users-container { @@ -353,26 +356,28 @@ height: 34px; width: 34px; border-radius: #{$border-radius-circle}; - background: var(--primary-color); + background: var(--background-color-secondary); + backdrop-filter: blur(8px); box-shadow: #{$box-shadow-medium}; } .active { - background: var(--accent-color); + background: var(--background-color-accent); } } .sidebar-right-container { min-height: 50vh; - padding-bottom: 12px; + padding: 8px; position: relative; overflow: auto; .sidebar-right-content-container { - border-bottom: 1px solid var(--border-color); height: calc(100% - 36px); position: relative; - width: 320px; + width: 304px; + padding-bottom: 10px; + .no-event-selected { color: #666; padding: 1.8rem 1rem; @@ -532,7 +537,7 @@ } button { - background-color: transparent; + background: transparent; box-shadow: none; color: #5273eb; padding: 6px; @@ -732,7 +737,7 @@ stroke: var(--primary-color); } &:disabled { - background-color: var(--text-disabled); + background: var(--text-disabled); } } } @@ -841,7 +846,7 @@ transform: translateX(4px); &:hover { - background-color: var(--accent-color); + background: var(--accent-color); path { stroke: var(--primary-color); @@ -983,11 +988,9 @@ .zone-properties-container { .header { @include flex-space-between; - padding: 8px 12px; - border-top: 1px solid var(--highlight-accent-color); - border-bottom: 1px solid var(--highlight-accent-color); - color: var(--accent-color); - + padding: 10px 12px; + color: var(--text-color); + margin-bottom: 4px; .input-value { color: inherit; } @@ -1004,7 +1007,7 @@ border-radius: 8px 0 0 8px; &:hover { - background-color: var(--accent-color); + background: var(--accent-color); path { stroke: var(--primary-color); @@ -1017,8 +1020,8 @@ .generate-report-button, .button-save { @include flex-center; - background-color: var(--accent-color); - color: var(--primary-color); + background: var(--background-color-button); + color: var(--text-button-color); border-radius: #{$border-radius-large}; padding: 2px; gap: 4px; @@ -1028,12 +1031,6 @@ margin-bottom: 8px; } - .split { - height: 1px; - background: var(--highlight-accent-color); - margin: 8px; - } - .custom-input-container { .header { @include flex-space-between; @@ -1162,14 +1159,14 @@ flex-direction: row; flex-wrap: wrap; height: 100%; - gap: 3px; + gap: 8px; padding: 10px 0; .category { - width: 117px; + width: 121px; height: 95px; border-radius: 3.59px; - background-color: var(--background-color-gray); + background: var(--background-color-gray); padding: 8px; padding-top: 12px; font-weight: $bold-weight; @@ -1189,7 +1186,7 @@ width: 60px; height: 60px; border-radius: 50%; - background-color: var(--circle-color, #000); + background: var(--circle-color, #000); position: absolute; top: 60%; right: -10px; @@ -1270,7 +1267,7 @@ width: 117px; height: 95px; border-radius: #{$border-radius-small}; - background-color: var(--background-color-gray); + background: var(--background-color-gray); font-weight: $medium-weight; position: relative; overflow: hidden; @@ -1337,7 +1334,7 @@ width: 117px; height: 95px; border-radius: 3.59px; - background-color: var(--background-color-gray); + background: var(--background-color-gray); padding: 8px; padding-top: 12px; font-weight: $medium-weight; diff --git a/app/src/styles/layout/toast.scss b/app/src/styles/layout/toast.scss index 951a213..eb51c5a 100644 --- a/app/src/styles/layout/toast.scss +++ b/app/src/styles/layout/toast.scss @@ -51,19 +51,19 @@ } .toast.success { - background-color: #4caf50; + background: #4caf50; } .toast.error { - background-color: #f44336; + background: #f44336; } .toast.info { - background-color: #2196f3; + background: #2196f3; } .toast.warning { - background-color: #ff9800; + background: #ff9800; } @keyframes fadeIn { diff --git a/app/src/styles/pages/dashboard.scss b/app/src/styles/pages/dashboard.scss index 3fc9a05..a41dc50 100644 --- a/app/src/styles/pages/dashboard.scss +++ b/app/src/styles/pages/dashboard.scss @@ -43,7 +43,7 @@ padding: 12px 16px; cursor: not-allowed; color: var(--accent-color); - background-color: var(--background-color-secondary); + background: var(--background-color-secondary); border-radius: #{$border-radius-large}; } .side-bar-content-container { @@ -66,9 +66,9 @@ .active { color: var(--accent-color); font-weight: var(--font-weight-medium); - background-color: var(--highlight-accent-color); + background: var(--highlight-accent-color); &:hover { - background-color: var(--highlight-accent-color); + background: var(--highlight-accent-color); } } } @@ -161,7 +161,7 @@ width: 26px; line-height: 26px; text-align: center; - background-color: var(--accent-color); + background: var(--accent-color); color: var(--primary-color); border-radius: #{$border-radius-circle}; } diff --git a/app/src/styles/pages/home.scss b/app/src/styles/pages/home.scss index 4139cc1..a2db6f7 100644 --- a/app/src/styles/pages/home.scss +++ b/app/src/styles/pages/home.scss @@ -1,38 +1,3 @@ -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: var(--primary-color); - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: 282c34; -} - -.App-link { - color: var(--button-action-color); -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - .navbar{ position: absolute; top: 0; diff --git a/app/src/styles/pages/realTimeViz.scss b/app/src/styles/pages/realTimeViz.scss index 1efa2d4..617e39f 100644 --- a/app/src/styles/pages/realTimeViz.scss +++ b/app/src/styles/pages/realTimeViz.scss @@ -3,7 +3,7 @@ // Main Container .realTime-viz { - background-color: #131313; + background: #131313; border-radius: 20px; box-shadow: $box-shadow-medium; width: calc(100% - (320px + 270px + 90px)); @@ -66,7 +66,7 @@ .zone-wrapper { display: flex; - background-color: var(--background-color); + background: var(--background-color); position: absolute; bottom: 0px; left: 50%; @@ -84,7 +84,7 @@ } .arrow { - background-color: var(--highlight-accent-color); + background: var(--highlight-accent-color); color: var(--background-color); } @@ -109,7 +109,7 @@ .zone { width: auto; - background-color: var(--background-color); + background: var(--background-color); border-radius: 6px; padding: 4px 8px; white-space: nowrap; @@ -117,7 +117,7 @@ } .active { - background-color: var(--accent-color); + background: var(--accent-color); color: var(--background-color); // color: #FCFDFD !important; } @@ -138,13 +138,13 @@ position: relative; flex: 1; height: 600px; - background-color: rgb(235, 235, 235); + background: rgb(235, 235, 235); margin: 0 30px; transition: height 0.3s ease, margin 0.3s ease; .zone-wrapper { display: flex; - background-color: rgba(224, 223, 255, 0.5); + background: rgba(224, 223, 255, 0.5); position: absolute; // bottom: 10px; left: 50%; @@ -162,7 +162,7 @@ .zone { width: auto; - background-color: $background-color; + background: $background-color; border-radius: 6px; padding: 4px 8px; white-space: nowrap; @@ -170,7 +170,7 @@ transition: background-color 0.3s ease; &.active { - background-color: var(--primary-color); + background: var(--primary-color); color: var(--accent-color); } } @@ -203,7 +203,7 @@ display: flex; flex-direction: column; gap: 6px; - background-color: var(--background-color); + background: var(--background-color); &::-webkit-scrollbar { display: none; @@ -217,7 +217,7 @@ border-radius: 8px; box-shadow: var(--box-shadow-medium); padding: 6px 0; - background-color: var(--background-color); + background: var(--background-color); position: relative; padding: 0 10px; @@ -237,7 +237,7 @@ top: 18px; right: 5px; transform: translate(0px, 0); - background-color: var(--background-color); + background: var(--background-color); z-index: 10; display: flex; @@ -261,7 +261,7 @@ } &:hover { - background-color: var(--highlight-accent-color); + background: var(--highlight-accent-color); width: 100%; svg { @@ -353,7 +353,7 @@ border-radius: 8px; box-shadow: var(--box-shadow-medium); padding: 6px 0; - background-color: var(--background-color); + background: var(--background-color); position: relative; } } @@ -377,7 +377,7 @@ .side-button-container { position: absolute; display: flex; - background-color: var(--background-color); + background: var(--background-color); padding: 2px; border-radius: 2px; transition: transform 0.3s ease; @@ -398,7 +398,7 @@ } .active { - background-color: var(--accent-color); + background: var(--accent-color); } &:hover { @@ -414,7 +414,7 @@ display: flex; justify-content: center; // align-items: center; - background-color: var(--accent-color); + background: var(--accent-color); border: none; color: var(--background-color); border-radius: 4px; @@ -494,7 +494,7 @@ padding: 12px; box-shadow: 1px -3px 4px 0px rgba(0, 0, 0, 0.11); border-radius: 8px; - background-color: white; + background: white; position: absolute; top: 20px; right: -100%; @@ -530,7 +530,7 @@ left: 1px; width: 10px; height: 10px; - background-color: var(--primary-color); + background: var(--primary-color); border-radius: 50%; } } @@ -584,7 +584,7 @@ } .zone.active { - background-color: #007bff; + background: #007bff; color: white; } @@ -592,7 +592,7 @@ .icon { // width: 25px !important; // height: 25px !important; - // background-color: transparent; + // background: transparent; } .kebab { @@ -604,7 +604,7 @@ z-index: 10; cursor: pointer; @include flex-center; - background-color: transparent !important; + background: transparent !important; } .kebab-options { @@ -612,7 +612,7 @@ top: 18px; right: 5px; transform: translate(0px, 0); - background-color: var(--background-color); + background: var(--background-color); z-index: 10; display: flex; @@ -625,7 +625,7 @@ .icon { width: 25px !important; height: 25px !important; - background-color: transparent; + background: transparent; } .btn { @@ -643,7 +643,7 @@ } &:hover { - background-color: var(--highlight-accent-color); + background: var(--highlight-accent-color); width: 100%; svg { @@ -675,7 +675,7 @@ /* Label styles for displaying distance values */ .distance-label { position: absolute; - background-color: var(--accent-color); + background: var(--accent-color); color: white; font-size: 12px; padding: 2px 6px; @@ -769,7 +769,7 @@ .editWidgetOptions { position: absolute; - background-color: var(--background-color); + background: var(--background-color); z-index: 3; display: flex; flex-direction: column; @@ -786,7 +786,7 @@ cursor: pointer; &:hover { - background-color: var(--highlight-accent-color); + background: var(--highlight-accent-color); color: var(--accent-color); } @@ -794,7 +794,7 @@ color: #f65648; &:hover { - background-color: #f657484d; + background: #f657484d; color: #f65648; } } diff --git a/app/src/styles/pages/userAuth.scss b/app/src/styles/pages/userAuth.scss index 6e86ac1..9d07dcf 100644 --- a/app/src/styles/pages/userAuth.scss +++ b/app/src/styles/pages/userAuth.scss @@ -9,7 +9,7 @@ padding: 20px; color: var(--text-color); height: 100vh; - background-color: var(--background-color); + background: var(--background-color); position: relative; z-index: 1; .logo-icon { diff --git a/app/src/styles/scene/scene.scss b/app/src/styles/scene/scene.scss index fc3b824..ab8f787 100644 --- a/app/src/styles/scene/scene.scss +++ b/app/src/styles/scene/scene.scss @@ -14,9 +14,8 @@ // style font-size: var(--font-size-large); padding: 2px 8px; - background: var(--primary-color); - color: var(--accent-color); - outline: 1px solid var(--accent-color); + background: var(--background-color-accent); + color: var(--text-color); border-radius: #{$border-radius-medium}; box-shadow: var(--box-shadow-light); } From 0b0e1e3d8b03ba6d186939456df5aaa0d3b4a9c1 Mon Sep 17 00:00:00 2001 From: Vishnu Date: Tue, 29 Apr 2025 18:19:03 +0530 Subject: [PATCH 7/9] Refactor event properties components to use section elements for better semantics and styling consistency; update mechanics components to enhance layout and improve user experience; modify simulation component to manage open/close state for event lists; enhance file menu with project icon; improve input toggle styles; standardize color variables in SCSS; adjust sidebar styles for better visual hierarchy; implement backdrop filters for improved UI aesthetics; and refine overall component styling for consistency across the application. --- .../components/icons/ExportCommonIcons.tsx | 4 +- app/src/components/icons/ExportToolsIcons.tsx | 126 ++++---- app/src/components/icons/SimulationIcons.tsx | 30 +- .../components/layout/sidebarLeft/Outline.tsx | 36 ++- .../layout/sidebarRight/analysis/Analysis.tsx | 2 +- .../customInput/PositionInputs.tsx | 3 +- .../properties/AssetProperties.tsx | 80 ++--- .../properties/GlobalProperties.tsx | 116 +++---- .../properties/ZoneProperties.tsx | 84 ++--- .../eventProperties/EventProperties.tsx | 4 +- .../mechanics/conveyorMechanics.tsx | 123 +++---- .../mechanics/machineMechanics.tsx | 4 +- .../mechanics/roboticArmMechanics.tsx | 67 ++-- .../mechanics/storageMechanics.tsx | 4 +- .../mechanics/vehicleMechanics.tsx | 302 +++++++++--------- .../sidebarRight/simulation/Simulations.tsx | 20 +- app/src/components/ui/FileMenu.tsx | 4 + app/src/components/ui/inputs/InputToggle.tsx | 9 +- app/src/styles/abstracts/variables.scss | 90 ++++-- app/src/styles/base/base.scss | 6 +- app/src/styles/base/global.scss | 4 +- app/src/styles/components/input.scss | 40 ++- app/src/styles/components/menu/menu.scss | 23 +- app/src/styles/components/tools.scss | 4 +- app/src/styles/layout/sidebar.scss | 64 ++-- app/src/styles/pages/realTimeViz.scss | 1 + 26 files changed, 680 insertions(+), 570 deletions(-) diff --git a/app/src/components/icons/ExportCommonIcons.tsx b/app/src/components/icons/ExportCommonIcons.tsx index f6f0287..0377e23 100644 --- a/app/src/components/icons/ExportCommonIcons.tsx +++ b/app/src/components/icons/ExportCommonIcons.tsx @@ -9,7 +9,7 @@ export function SearchIcon() { > ); @@ -24,7 +24,7 @@ export function ArrowIcon() { fill="none" xmlns="http://www.w3.org/2000/svg" > - + ); } diff --git a/app/src/components/icons/ExportToolsIcons.tsx b/app/src/components/icons/ExportToolsIcons.tsx index cfe56ba..4dc7a5b 100644 --- a/app/src/components/icons/ExportToolsIcons.tsx +++ b/app/src/components/icons/ExportToolsIcons.tsx @@ -11,13 +11,13 @@ export function ZoneIcon({ isActive }: { isActive: boolean }) { @@ -41,27 +41,27 @@ export function AsileIcon({ isActive }: { isActive: boolean }) { > ); @@ -87,36 +87,36 @@ export function FloorIcon({ isActive }: { isActive: boolean }) { ); @@ -134,7 +134,7 @@ export function WallIcon({ isActive }: { isActive: boolean }) { @@ -212,56 +212,56 @@ export function WallIcon({ isActive }: { isActive: boolean }) { @@ -286,7 +286,7 @@ export function WindowIcon({ isActive }: { isActive: boolean }) { > @@ -324,11 +324,11 @@ export function DoorIcon({ isActive }: { isActive: boolean }) { > ); @@ -374,11 +374,11 @@ export function PillerIcon({ isActive }: { isActive: boolean }) { > @@ -393,17 +393,17 @@ export function PillerIcon({ isActive }: { isActive: boolean }) { > @@ -421,7 +421,7 @@ export function CommentIcon({ isActive }: { isActive: boolean }) { > @@ -471,8 +471,8 @@ export function FreeMoveIcon({ isActive }: { isActive: boolean }) { > ) : ( @@ -485,7 +485,7 @@ export function FreeMoveIcon({ isActive }: { isActive: boolean }) { > ); @@ -502,17 +502,17 @@ export function DeleteIcon({ isActive }: { isActive: boolean }) { > @@ -533,7 +533,7 @@ export function DeleteIcon({ isActive }: { isActive: boolean }) { > @@ -552,7 +552,7 @@ export function CursorIcon({ isActive }: { isActive: boolean }) { > ) : ( @@ -565,7 +565,7 @@ export function CursorIcon({ isActive }: { isActive: boolean }) { > @@ -584,8 +584,8 @@ export function PlayIcon({ isActive }: { isActive: boolean }) { > ); @@ -603,7 +603,7 @@ export function PenIcon({ isActive }: { isActive: boolean }) { @@ -623,13 +623,13 @@ export function SaveTemplateIcon({ isActive }: { isActive: boolean }) { @@ -648,19 +648,19 @@ export function MeasureToolIcon({ isActive }: { isActive: boolean }) { > ); diff --git a/app/src/components/icons/SimulationIcons.tsx b/app/src/components/icons/SimulationIcons.tsx index 67a1a51..b4aa881 100644 --- a/app/src/components/icons/SimulationIcons.tsx +++ b/app/src/components/icons/SimulationIcons.tsx @@ -9,13 +9,13 @@ export function AnalysisIcon({ isActive }: { isActive: boolean }) { > @@ -34,11 +34,11 @@ export function MechanicsIcon({ isActive }: { isActive: boolean }) { > ); @@ -55,15 +55,15 @@ export function PropertiesIcon({ isActive }: { isActive: boolean }) { > ); @@ -82,13 +82,13 @@ export function SimulationIcon({ isActive }: { isActive: boolean }) { fillRule="evenodd" clipRule="evenodd" d="M6.44104 7.04762C6.57815 6.98413 6.73614 6.98413 6.87325 7.04762L12.0161 9.42958C12.198 9.51377 12.3143 9.69589 12.3143 9.89624V15.8512C12.3143 16.0347 12.2165 16.2043 12.0577 16.2962L6.9148 19.2736C6.75547 19.3659 6.55881 19.3659 6.39949 19.2736L1.25661 16.2962C1.09779 16.2043 1 16.0347 1 15.8512V9.89624C1 9.69589 1.11635 9.51377 1.29815 9.42958L6.44104 7.04762ZM2.02857 10.7297L6.14286 12.794V17.9366L2.02857 15.5546V10.7297ZM7.17143 17.9366L11.2857 15.5546V10.7297L7.17143 12.794V17.9366ZM6.65714 11.9013L10.6163 9.91477L6.65714 8.08106L2.69798 9.91477L6.65714 11.9013Z" - fill={isActive ? "var(--icon-default-color-active)" : "var(--icon-default-color)"} + fill={"var(--icon-default-color-active)"} /> ); @@ -107,21 +107,21 @@ export function ResetIcon() { > @@ -140,7 +140,7 @@ export function PlayStopIcon() { > @@ -159,7 +159,7 @@ export function ExitIcon() { > diff --git a/app/src/components/layout/sidebarLeft/Outline.tsx b/app/src/components/layout/sidebarLeft/Outline.tsx index b7d5803..417f069 100644 --- a/app/src/components/layout/sidebarLeft/Outline.tsx +++ b/app/src/components/layout/sidebarLeft/Outline.tsx @@ -24,22 +24,26 @@ const Outline: React.FC = () => {
) : (
- - +
+ +
+
+ +
)}
diff --git a/app/src/components/layout/sidebarRight/analysis/Analysis.tsx b/app/src/components/layout/sidebarRight/analysis/Analysis.tsx index d806740..9d2889f 100644 --- a/app/src/components/layout/sidebarRight/analysis/Analysis.tsx +++ b/app/src/components/layout/sidebarRight/analysis/Analysis.tsx @@ -100,7 +100,7 @@ const Analysis: React.FC = () => {
Generate Report
-
+
Create Analysis
diff --git a/app/src/components/layout/sidebarRight/customInput/PositionInputs.tsx b/app/src/components/layout/sidebarRight/customInput/PositionInputs.tsx index 01b4ab3..8cc47d7 100644 --- a/app/src/components/layout/sidebarRight/customInput/PositionInputs.tsx +++ b/app/src/components/layout/sidebarRight/customInput/PositionInputs.tsx @@ -22,7 +22,7 @@ const PositionInput: React.FC = ({ value2 = "number", disabled = false, // Default disabled value isEyedrop = false, // Default isEyedrop value - handleEyeDropClick = () => { }, // Default function for eye drop click + handleEyeDropClick = () => {}, // Default function for eye drop click }) => { return (
@@ -39,6 +39,7 @@ const PositionInput: React.FC = ({ disabled={disabled} // Apply disabled prop />
+
Y :
{
{/* Name */}
{selectedFloorItem.userData.name}
+
+ {}} + value1={selectedFloorItem.position.x.toFixed(5)} + value2={selectedFloorItem.position.z.toFixed(5)} + /> + {}} + value={parseFloat( + THREE.MathUtils.radToDeg(selectedFloorItem.rotation.y).toFixed(5) + )} + /> +
- {}} - value1={selectedFloorItem.position.x.toFixed(5)} - value2={selectedFloorItem.position.z.toFixed(5)} - /> - {}} - value={parseFloat( - THREE.MathUtils.radToDeg(selectedFloorItem.rotation.y).toFixed(5) - )} - /> +
+
Render settings
+ + +
-
- - - - -
User Data
- - {/* Map through userData and render InputWithDropDown for each entry */} - {userData.map((data) => ( -
- handleUserDataChange(data.id, newValue)} // Pass the change handler - /> -
handleRemoveUserData(data.id)} - > - +
+
User Data
+ {userData.map((data) => ( +
+ handleUserDataChange(data.id, newValue)} // Pass the change handler + /> +
handleRemoveUserData(data.id)} + > + +
-
- ))} + ))} - {/* Add new user data */} -
- + Add -
+ {/* Add new user data */} +
+ + Add +
+
); }; diff --git a/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx b/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx index 251ada3..8b91afc 100644 --- a/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx +++ b/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx @@ -32,9 +32,7 @@ const GlobalProperties: React.FC = () => { const { renderDistance, setRenderDistance } = useRenderDistance(); const { setPlaneValue, setGridValue, planeValue, gridValue } = useTileDistance(); - useEffect(() => { - - }, [gridValue, planeValue]); + useEffect(() => {}, [gridValue, planeValue]); const { socket } = useSocketStore(); const { limitDistance, setLimitDistance } = useLimitDistance(); const [distance, setDistance] = useState(40); @@ -224,65 +222,66 @@ const GlobalProperties: React.FC = () => { // } return (
-
Environment
-
- - Optimize -
+
+
Environment
+
+ + Optimize +
-
+
- - - - + + + + -
- {/* //visibleEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor} */} - { - // setLimitDistance(!limitDistance); - // // setDistance(75); - // // setRenderDistance(75); - // }} - onClick={async () => { - await limitRenderDistance(); // Call the function here - }} - /> - updateDistance(value)} - onPointerUp={updatedDist} - key={"6"} - /> +
+ {/* //visibleEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor} */} + { + // setLimitDistance(!limitDistance); + // // setDistance(75); + // // setRenderDistance(75); + // }} + onClick={async () => { + await limitRenderDistance(); // Call the function here + }} + /> + updateDistance(value)} + onPointerUp={updatedDist} + key={"6"} + /> - {/*
+ {/*
{ onChange={(value: number) => updateGridDistance(value)} onPointerUp={updatedGrid} /> */} +
); }; diff --git a/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx b/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx index a9f8cc0..1bb9400 100644 --- a/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx +++ b/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx @@ -2,7 +2,12 @@ import React, { useEffect, useState } from "react"; import RenameInput from "../../../ui/inputs/RenameInput"; import Vector3Input from "../customInput/Vector3Input"; import { useSelectedZoneStore } from "../../../../store/visualization/useZoneStore"; -import { useEditPosition, usezonePosition, useZones, usezoneTarget } from "../../../../store/store"; +import { + useEditPosition, + usezonePosition, + useZones, + usezoneTarget, +} from "../../../../store/store"; import { zoneCameraUpdate } from "../../../../services/visulization/zone/zoneCameraUpdation"; const ZoneProperties: React.FC = () => { @@ -13,9 +18,9 @@ const ZoneProperties: React.FC = () => { const { zones, setZones } = useZones(); useEffect(() => { - setZonePosition(selectedZone.zoneViewPortPosition) - setZoneTarget(selectedZone.zoneViewPortTarget) - }, [selectedZone?.zoneViewPortPosition, selectedZone?.zoneViewPortTarget]) + setZonePosition(selectedZone.zoneViewPortPosition); + setZoneTarget(selectedZone.zoneViewPortTarget); + }, [selectedZone?.zoneViewPortPosition, selectedZone?.zoneViewPortTarget]); async function handleSetView() { try { @@ -25,7 +30,7 @@ const ZoneProperties: React.FC = () => { let zonesdata = { zoneId: selectedZone.zoneId, viewPortposition: zonePosition, - viewPortCenter: zoneTarget + viewPortCenter: zoneTarget, }; let response = await zoneCameraUpdate(zonesdata, organization); @@ -34,14 +39,11 @@ const ZoneProperties: React.FC = () => { } else { // console.log(response); } - - } catch (error) { - - } + } catch (error) {} } function handleEditView() { - setEdit(!Edit); // This will toggle the `Edit` state correctly + setEdit(!Edit); // This will toggle the `Edit` state correctly } async function handleZoneNameChange(newName: string) { @@ -49,11 +51,11 @@ const ZoneProperties: React.FC = () => { const organization = email?.split("@")[1]?.split(".")[0]; const zonesdata = { zoneId: selectedZone.zoneId, - zoneName: newName + zoneName: newName, }; // Call your API to update the zone let response = await zoneCameraUpdate(zonesdata, organization); - console.log('response: ', response); + console.log("response: ", response); if (response.message === "updated successfully") { setZones((prevZones: any[]) => prevZones.map((zone) => @@ -66,7 +68,10 @@ const ZoneProperties: React.FC = () => { // console.log(response?.message); } } - function handleVectorChange(key: "zoneViewPortTarget" | "zoneViewPortPosition", newValue: [number, number, number]) { + function handleVectorChange( + key: "zoneViewPortTarget" | "zoneViewPortPosition", + newValue: [number, number, number] + ) { setSelectedZone((prev) => ({ ...prev, [key]: newValue })); } const checkZoneNameDuplicate = (name: string) => { @@ -79,33 +84,40 @@ const ZoneProperties: React.FC = () => { return (
-
- -
- {Edit ? "Cancel" : "Edit"} +
+
+ +
+ {Edit ? "Cancel" : "Edit"} +
-
- handleVectorChange("zoneViewPortTarget", value)} - header="Viewport Target" - value={zoneTarget as [number, number, number]} - disabled={!Edit} - /> - handleVectorChange("zoneViewPortPosition", value)} - header="Viewport Position" - value={zonePosition as [number, number, number]} - disabled={!Edit} - /> + handleVectorChange("zoneViewPortTarget", value)} + header="Viewport Target" + value={zoneTarget as [number, number, number]} + disabled={!Edit} + /> + + handleVectorChange("zoneViewPortPosition", value) + } + header="Viewport Position" + value={zonePosition as [number, number, number]} + disabled={!Edit} + /> - {Edit && ( -
- Set View -
- )} + {Edit && ( +
+ Set View +
+ )} +
); }; export default ZoneProperties; - diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx index 87d3bf6..88ae240 100644 --- a/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx +++ b/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx @@ -81,7 +81,7 @@ const EventProperties: React.FC = () => { )} {!currentEventData && selectedEventSphere && ( -
+

Oops! It looks like this object doesn't have an event assigned yet. To continue, please link it to one of the @@ -118,7 +118,7 @@ const EventProperties: React.FC = () => {

)} {!selectedEventSphere && ( -
+

Oops! It looks like you haven't selected an event point yet. Please select an event to view its properties. diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/conveyorMechanics.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/conveyorMechanics.tsx index b370b3e..7a0bc07 100644 --- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/conveyorMechanics.tsx +++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/conveyorMechanics.tsx @@ -135,7 +135,7 @@ function ConveyorMechanics() { <> {selectedEventData && ( <> -

+
+
+ - - -
-
- +
+
+ +
+
+ + {activeOption === "default" && } + {activeOption === "spawn" && ( + + )} + {activeOption === "swap" && ( + + )} + {activeOption === "despawn" && } + {activeOption === "delay" && ( + + )} +
-
- - {activeOption === "default" && } - {activeOption === "spawn" && ( - - )} - {activeOption === "swap" && ( - - )} - {activeOption === "despawn" && } - {activeOption === "delay" && ( - - )} +
+
-
-
- -
+
)} diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/machineMechanics.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/machineMechanics.tsx index fa2cfdf..db785da 100644 --- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/machineMechanics.tsx +++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/machineMechanics.tsx @@ -85,7 +85,7 @@ function MachineMechanics() { return ( <> {selectedEventData && ( - <> +
- +
)} ); diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/roboticArmMechanics.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/roboticArmMechanics.tsx index 7c20ce5..acf65ae 100644 --- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/roboticArmMechanics.tsx +++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/roboticArmMechanics.tsx @@ -134,7 +134,7 @@ function RoboticArmMechanics() { <> {selectedEventData && selectedPointData && ( <> -
+
+
+ - - - {selectedAction.actionId && currentAction && ( -
-
- + {selectedAction.actionId && currentAction && ( +
+
+ +
+
+ {}} + disabled={true} + /> + +
+
+ +
-
- {}} - disabled={true} - /> - -
-
- -
-
- )} + )} +
)} diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/storageMechanics.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/storageMechanics.tsx index d92ed80..ae7a498 100644 --- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/storageMechanics.tsx +++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/storageMechanics.tsx @@ -74,7 +74,7 @@ function StorageMechanics() { return ( <> {selectedEventData && ( - <> +
- + )} ); diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx index 93fa3c7..d8456e5 100644 --- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx +++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx @@ -4,182 +4,186 @@ import RenameInput from "../../../../../ui/inputs/RenameInput"; import LabledDropdown from "../../../../../ui/inputs/LabledDropdown"; import Trigger from "../trigger/Trigger"; import { - useSelectedEventData, - useSelectedProduct, + useSelectedEventData, + useSelectedProduct, } from "../../../../../../store/simulation/useSimulationStore"; import { useProductStore } from "../../../../../../store/simulation/useProductStore"; import TravelAction from "../actions/TravelAction"; import ActionsList from "../components/ActionsList"; function VehicleMechanics() { - const [activeOption, setActiveOption] = useState<"default" | "travel">( - "default" - ); - const [selectedPointData, setSelectedPointData] = useState(); - const { selectedEventData } = useSelectedEventData(); - const { getPointByUuid, updateEvent, updateAction } = useProductStore(); - const { selectedProduct } = useSelectedProduct(); + const [activeOption, setActiveOption] = useState<"default" | "travel">( + "default" + ); + const [selectedPointData, setSelectedPointData] = useState< + VehiclePointSchema | undefined + >(); + const { selectedEventData } = useSelectedEventData(); + const { getPointByUuid, updateEvent, updateAction } = useProductStore(); + const { selectedProduct } = useSelectedProduct(); - useEffect(() => { - if (selectedEventData) { - const point = getPointByUuid( - selectedProduct.productId, - selectedEventData.data.modelUuid, - selectedEventData.selectedPoint - ) as VehiclePointSchema | undefined; + useEffect(() => { + if (selectedEventData) { + const point = getPointByUuid( + selectedProduct.productId, + selectedEventData.data.modelUuid, + selectedEventData.selectedPoint + ) as VehiclePointSchema | undefined; - if (point) { - setSelectedPointData(point); - setActiveOption(point.action.actionType as "travel"); - } - } - }, [selectedProduct, selectedEventData, getPointByUuid]); + if (point) { + setSelectedPointData(point); + setActiveOption(point.action.actionType as "travel"); + } + } + }, [selectedProduct, selectedEventData, getPointByUuid]); - const handleSpeedChange = (value: string) => { - if (!selectedEventData) return; - updateEvent(selectedProduct.productId, selectedEventData.data.modelUuid, { - speed: parseFloat(value), - }); - }; + const handleSpeedChange = (value: string) => { + if (!selectedEventData) return; + updateEvent(selectedProduct.productId, selectedEventData.data.modelUuid, { + speed: parseFloat(value), + }); + }; - const handleActionTypeChange = (option: string) => { - if (!selectedEventData || !selectedPointData) return; - const validOption = option as "travel"; - setActiveOption(validOption); + const handleActionTypeChange = (option: string) => { + if (!selectedEventData || !selectedPointData) return; + const validOption = option as "travel"; + setActiveOption(validOption); - updateAction(selectedPointData.action.actionUuid, { - actionType: validOption, - }); - }; + updateAction(selectedPointData.action.actionUuid, { + actionType: validOption, + }); + }; - const handleRenameAction = (newName: string) => { - if (!selectedPointData) return; - updateAction(selectedPointData.action.actionUuid, { actionName: newName }); - }; + const handleRenameAction = (newName: string) => { + if (!selectedPointData) return; + updateAction(selectedPointData.action.actionUuid, { actionName: newName }); + }; - const handleLoadCapacityChange = (value: string) => { - if (!selectedPointData) return; - updateAction(selectedPointData.action.actionUuid, { - loadCapacity: parseFloat(value), - }); - }; + const handleLoadCapacityChange = (value: string) => { + if (!selectedPointData) return; + updateAction(selectedPointData.action.actionUuid, { + loadCapacity: parseFloat(value), + }); + }; - const handleUnloadDurationChange = (value: string) => { - if (!selectedPointData) return; - updateAction(selectedPointData.action.actionUuid, { - unLoadDuration: parseFloat(value), - }); - }; + const handleUnloadDurationChange = (value: string) => { + if (!selectedPointData) return; + updateAction(selectedPointData.action.actionUuid, { + unLoadDuration: parseFloat(value), + }); + }; - const handlePickPointChange = (value: string) => { - if (!selectedPointData) return; - }; + const handlePickPointChange = (value: string) => { + if (!selectedPointData) return; + }; - const handleUnloadPointChange = (value: string) => { - if (!selectedPointData) return; - }; + const handleUnloadPointChange = (value: string) => { + if (!selectedPointData) return; + }; - // Get current values from store - const currentSpeed = - selectedEventData?.data.type === "vehicle" - ? selectedEventData.data.speed.toString() - : "0.5"; + // Get current values from store + const currentSpeed = + selectedEventData?.data.type === "vehicle" + ? selectedEventData.data.speed.toString() + : "0.5"; - const currentActionName = selectedPointData - ? selectedPointData.action.actionName - : "Action Name"; + const currentActionName = selectedPointData + ? selectedPointData.action.actionName + : "Action Name"; - const currentLoadCapacity = selectedPointData - ? selectedPointData.action.loadCapacity.toString() - : "1"; + const currentLoadCapacity = selectedPointData + ? selectedPointData.action.loadCapacity.toString() + : "1"; - const currentUnloadDuration = selectedPointData - ? selectedPointData.action.unLoadDuration.toString() - : "1"; + const currentUnloadDuration = selectedPointData + ? selectedPointData.action.unLoadDuration.toString() + : "1"; - const currentPickPoint = selectedPointData?.action.pickUpPoint; + const currentPickPoint = selectedPointData?.action.pickUpPoint; - const currentUnloadPoint = selectedPointData?.action.unLoadPoint; + const currentUnloadPoint = selectedPointData?.action.unLoadPoint; - const availableActions = { - defaultOption: "travel", - options: ["travel"], - }; + const availableActions = { + defaultOption: "travel", + options: ["travel"], + }; - return ( + return ( + <> + {selectedEventData && ( <> - {selectedEventData && ( - <> -
-
-
- { }} - onChange={handleSpeedChange} - /> -
-
-
- -
-
- -
-
- +
+
+
+ {}} + onChange={handleSpeedChange} + /> +
+
+
+
+ +
+
+ +
+
+ - {activeOption === "travel" && ( - - )} -
-
-
- -
- - )} + {activeOption === "travel" && ( + + )} +
+
+
+ +
+ - ); + )} + + ); } export default VehicleMechanics; diff --git a/app/src/components/layout/sidebarRight/simulation/Simulations.tsx b/app/src/components/layout/sidebarRight/simulation/Simulations.tsx index b037098..a8957d1 100644 --- a/app/src/components/layout/sidebarRight/simulation/Simulations.tsx +++ b/app/src/components/layout/sidebarRight/simulation/Simulations.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef } from "react"; +import React, { useEffect, useRef, useState } from "react"; import { AddIcon, ArrowIcon, @@ -47,6 +47,8 @@ const Simulations: React.FC = () => { const { selectedProduct, setSelectedProduct } = useSelectedProduct(); const { selectedAsset, clearSelectedAsset } = useSelectedAsset(); + const [openObjects, setOpenObjects] = useState(true); + const handleAddProduct = () => { addProduct(`Product ${products.length + 1}`, generateUUID()); }; @@ -102,7 +104,7 @@ const Simulations: React.FC = () => {
Simulations
-
+
Products
@@ -164,16 +166,18 @@ const Simulations: React.FC = () => {
-
-
+
+
- {events.map((event, index) => ( - - ))} + + {openObjects && + events.map((event, index) => )}
diff --git a/app/src/components/ui/FileMenu.tsx b/app/src/components/ui/FileMenu.tsx index a7c876d..798cc62 100644 --- a/app/src/components/ui/FileMenu.tsx +++ b/app/src/components/ui/FileMenu.tsx @@ -2,12 +2,16 @@ import React, { useState } from "react"; import RenameInput from "./inputs/RenameInput"; import { ArrowIcon } from "../icons/ExportCommonIcons"; import MenuBar from "./menu/menu"; +import { ProjectIcon } from "../icons/HeaderIcons"; const FileMenu: React.FC = () => { const [openMenu, setOpenMenu] = useState(false); return (
+
+ +
= ({ -
+
diff --git a/app/src/styles/abstracts/variables.scss b/app/src/styles/abstracts/variables.scss index d1a6a5e..2913425 100644 --- a/app/src/styles/abstracts/variables.scss +++ b/app/src/styles/abstracts/variables.scss @@ -16,72 +16,91 @@ $text-button-color: #f3f3fd; $text-color-dark: #f3f3fd; $text-disabled-dark: #6f6f7a; $input-text-color-dark: #b5b5c8; -$highlight-text-color-dark: #B392F0; +$highlight-text-color-dark: #b392f0; $text-button-color-dark: #f3f3fd; // background colors // ---------- light mode ---------- -$background-color: linear-gradient(-45deg, #FCFDFDCC 0%, #FCFDFD99 100%); +$background-color: linear-gradient(-45deg, #fcfdfdcc 0%, #fcfdfd99 100%); $background-color-solid: #fcfdfd; -$background-color-secondary: #FCFDFD4D; +$background-color-secondary: #fcfdfd4d; $background-color-accent: #6f42c1; $background-color-button: #6f42c1; -$background-color-drop-down: #6F42C14D; -$background-color-input: #FFFFFF4D; -$background-color-input-focus: #F2F2F7; -$background-color-drop-down-gradient: linear-gradient(-45deg, #75649366 0%, #40257266 100%); -$background-color-selected: #E0DFFF; -$background-radial-gray-gradient: radial-gradient(circle, #bfe0f8 0%, #e9ebff 46%, #e2acff 100%); +$background-color-drop-down: #6f42c14d; +$background-color-input: #ffffff4d; +$background-color-input-focus: #f2f2f7; +$background-color-drop-down-gradient: linear-gradient( + -45deg, + #75649366 0%, + #40257266 100% +); +$background-color-selected: #e0dfff; +$background-radial-gray-gradient: radial-gradient( + circle, + #bfe0f8 0%, + #e9ebff 46%, + #e2acff 100% +); // ---------- dark mode ---------- -$background-color-dark: linear-gradient(-45deg, #333333B3 0%, #2D2437B3 100%); +$background-color-dark: linear-gradient(-45deg, #333333b3 0%, #2d2437b3 100%); $background-color-solid-dark: #19191d; -$background-color-secondary-dark: #19191D99; +$background-color-secondary-dark: #19191d99; $background-color-accent-dark: #6f42c1; $background-color-button-dark: #6f42c1; $background-color-drop-down-dark: #50505080; -$background-color-input-dark: #FFFFFF33; +$background-color-input-dark: #ffffff33; $background-color-input-focus-dark: #333333; -$background-color-drop-down-gradient-dark: linear-gradient(-45deg, #8973B166 0%, #53427366 100%); -$background-color-selected-dark: #403E66; -$background-radial-gray-gradient-dark: radial-gradient(circle, #31373b 0%, #48494b 46%, #52415c 100%); +$background-color-drop-down-gradient-dark: linear-gradient( + -45deg, + #8973b166 0%, + #53427366 100% +); +$background-color-selected-dark: #403e66; +$background-radial-gray-gradient-dark: radial-gradient( + circle, + #31373b 0%, + #48494b 46%, + #52415c 100% +); // border colors // ---------- light mode ---------- -$border-color: #E0DFFF; -$border-color-accent: #6F42C1; +$border-color: #e0dfff; +$input-border-color: #d5dddd80; +$border-color-accent: #6f42c1; // ---------- dark mode ---------- -$border-color-dark: #564B69; -$border-color-accent-dark: #6F42C1; +$border-color-dark: #564b69; +$input-border-color-dark: #d5dddd80; +$border-color-accent-dark: #6f42c1; // highlight colors // ---------- light mode ---------- -$highlight-accent-color: #E0DFFF; -$highlight-secondary-color: #6F42C1; +$highlight-accent-color: #e0dfff; +$highlight-secondary-color: #6f42c1; // ---------- dark mode ---------- -$highlight-accent-color-dark: #403E6A; -$highlight-secondary-color-dark: #C4ABF1; +$highlight-accent-color-dark: #403e6a; +$highlight-secondary-color-dark: #c4abf1; // icon colors // ---------- light mode ---------- -$icon-default-color: #6F42C1; +$icon-default-color: #6f42c1; $icon-default-color-hover: #7f4ddb; -$icon-default-color-active: #F2F2F7; +$icon-default-color-active: #f2f2f7; // ---------- dark mode ---------- -$icon-default-color-dark: #6F42C1; +$icon-default-color-dark: #6f42c1; $icon-default-color-hover-dark: #7f4ddb; -$icon-default-color-active-dark: #F2F2F7; +$icon-default-color-active-dark: #f2f2f7; // colors -$color1: #A392CD; +$color1: #a392cd; $color2: #7b4cd3; -$color3: #B186FF; -$color4: #8752E8; -$color5: #C7A8FF; - +$color3: #b186ff; +$color4: #8752e8; +$color5: #c7a8ff; // old variables $accent-color: #6f42c1; @@ -106,7 +125,12 @@ $acent-gradient-dark: linear-gradient(90deg, #b392f0 0%, #a676ff 100%); $acent-gradient: linear-gradient(90deg, #6f42c1 0%, #925df3 100%); $faint-gradient: radial-gradient(circle, #bfe0f8 0%, #e9ebff 46%, #e2acff 100%); -$faint-gradient-dark: radial-gradient(circle, #31373b 0%, #48494b 46%, #52415c 100%); +$faint-gradient-dark: radial-gradient( + circle, + #31373b 0%, + #48494b 46%, + #52415c 100% +); $font-inter: "Inter", sans-serif; $font-josefin-sans: "Josefin Sans", sans-serif; diff --git a/app/src/styles/base/base.scss b/app/src/styles/base/base.scss index bd1403e..10fb87c 100644 --- a/app/src/styles/base/base.scss +++ b/app/src/styles/base/base.scss @@ -23,6 +23,7 @@ // border colors --border-color: #{$border-color}; + --input-border-color: #{$input-border-color}; --border-color-accent: #{$border-color-accent}; // highlight colors @@ -73,6 +74,7 @@ // border colors --border-color: #{$border-color}; + --input-border-color: #{$input-border-color-dark}; --border-color-accent: #{$border-color-accent-dark}; // highlight colors @@ -136,8 +138,8 @@ body { } ::-webkit-scrollbar { - width: 4px; - height: 4px; + width: 0px; + height: 0px; } ::-webkit-scrollbar-track { diff --git a/app/src/styles/base/global.scss b/app/src/styles/base/global.scss index d1bf505..d90e6fb 100644 --- a/app/src/styles/base/global.scss +++ b/app/src/styles/base/global.scss @@ -2,8 +2,10 @@ @use "../abstracts/mixins" as *; section, .section{ - padding: 12px; + padding: 4px; outline: 1px solid var(--border-color); + outline-offset: -1px; border-radius: #{$border-radius-large}; background: var(--background-color); + margin: 4px 0; } diff --git a/app/src/styles/components/input.scss b/app/src/styles/components/input.scss index 48d6ee8..b4e7651 100644 --- a/app/src/styles/components/input.scss +++ b/app/src/styles/components/input.scss @@ -5,12 +5,12 @@ input { width: 100%; - padding: 2px 4px; - border-radius: #{$border-radius-small}; - outline: 1px solid var(--border-color); + padding: 4px 8px; + border-radius: #{$border-radius-large}; + outline: 1px solid var(--input-border-color); outline-offset: -1px; border: none; - background: transparent; + background: var(--background-color-input); color: var(--input-text-color); &:focus, @@ -44,6 +44,18 @@ input { } } +input[type="number"] { + // Chrome, Safari, Edge, Opera + &::-webkit-outer-spin-button, + &::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; + } + + // Firefox + -moz-appearance: textfield; +} + .input-value { color: var(--input-text-color); font-size: var(--font-size-regular); @@ -61,9 +73,7 @@ input { color: var(--input-text-color); font-size: var(--font-size-regular); font-weight: var(--font-weight-regular); - border: 1px solid var(--accent-color); outline: none; - border-radius: #{$border-radius-small}; line-height: 26px; padding: 0 8px; } @@ -102,10 +112,11 @@ input { .search-container { @include flex-center; width: 100%; - border-radius: #{$border-radius-small}; - padding: 6px 2px; + border-radius: #{$border-radius-extra-large}; + padding: 3px 2px; position: relative; border: 1px solid var(--border-color); + background: var(--background-color-input-focus); .icon-container { @include flex-center; @@ -220,7 +231,6 @@ input { justify-content: space-between; cursor: pointer; border-radius: 6px; - background: var(--background-color); } .dropdown-options { @@ -469,7 +479,7 @@ input { .check-box { height: 24px; width: 38px; - background: var(--background-color-secondary); + background: var(--background-color); border-radius: #{$border-radius-large}; position: relative; cursor: pointer; @@ -480,7 +490,7 @@ input { width: 20px; top: 2px; left: 2px; - background: var(--accent-color); + background: var(--text-button-color); border-radius: #{$border-radius-circle}; transition: left 0.3s ease; } @@ -726,17 +736,17 @@ input { @include flex-center; } } - .upload-custom-asset-button{ + .upload-custom-asset-button { padding: 6px 12px; @include flex-space-between; - .title{ + .title { white-space: nowrap; width: 40%; } - input{ + input { display: none; } - .upload-button{ + .upload-button { width: 60%; background: var(--highlight-accent-color); color: var(--accent-color); diff --git a/app/src/styles/components/menu/menu.scss b/app/src/styles/components/menu/menu.scss index 34c56d1..be9e17f 100644 --- a/app/src/styles/components/menu/menu.scss +++ b/app/src/styles/components/menu/menu.scss @@ -6,15 +6,31 @@ align-items: center; gap: 2px; position: relative; - height: 32px; + border-radius: #{$border-radius-extra-large}; + background: var(--background-color-drop-down); + padding: 3px 8px; + width: fit-content; + max-width: 100%; .project-name { - line-height: 32px; + @include flex-center; height: 100%; + line-height: 26px; + .icon{ + @include flex-center; + height: 20px; + width: 20px; + } + .input-value{ + max-width: 120px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } } .more-options-button { @include flex-center; border-radius: #{$border-radius-small}; - height: 28px; + height: 22px; position: relative; &:hover { background: var(--highlight-accent-color); @@ -41,6 +57,7 @@ box-shadow: var(--box-shadow-light); border-radius: 8px; border: 1px solid var(--border-color); + backdrop-filter: blur(10px); .menu-buttons { display: flex; flex-direction: column; diff --git a/app/src/styles/components/tools.scss b/app/src/styles/components/tools.scss index c80caf5..abea736 100644 --- a/app/src/styles/components/tools.scss +++ b/app/src/styles/components/tools.scss @@ -49,10 +49,10 @@ } .active { - background: var(--accent-color); + background: var(--background-color-accent); &:hover { - background: var(--accent-color); + background: var(--background-color-accent); } } } diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss index 403b27a..8e84d78 100644 --- a/app/src/styles/layout/sidebar.scss +++ b/app/src/styles/layout/sidebar.scss @@ -44,33 +44,40 @@ width: 32px; min-height: 32px; min-width: 32px; - border-radius: #{$border-radius-small}; + border-radius: #{$border-radius-large}; &:hover { - background: var(--background-color-secondary); + outline: 1px solid var(--border-color); + outline-offset: -1px; + background: var(--background-color-drop-down); } } .active { - background: var(--background-color-secondary); - outline: 1px solid var(--accent-color); + background: var(--background-color-accent); + outline: 1px solid var(--border-color); outline-offset: -1px; + rect { + stroke: var(--icon-default-color-active); + } + circle { + fill: var(--icon-default-color-active); + } + &:hover { + background: var(--background-color-secondary); + } } } .sidebar-left-container { min-height: 50vh; - padding-bottom: 12px; + padding-bottom: 4px; position: relative; display: flex; flex-direction: column; .sidebar-left-content-container { - border-bottom: 1px solid var(--border-color); - // flex: 1; - // height: calc(100% - 36px); position: relative; - // overflow: auto; .template-list { display: flex; @@ -232,8 +239,12 @@ .outline-content-container { position: relative; height: 100%; - overflow: auto; - max-height: 60vh; + padding: 8px; + .overflow { + height: calc(100% - 16px); + max-height: 46vh; + overflow: auto; + } } } } @@ -323,8 +334,8 @@ display: flex; .user-profile { - background: var(--accent-color); - color: var(--primary-color); + background: var(--background-color-accent); + color: var(--text-button-color); } .user-organization { @@ -349,6 +360,8 @@ .sidebar-actions-container { position: absolute; left: -40px; + background: transparent; + overflow: visible; .sidebar-action-list { margin-bottom: 12px; @@ -359,6 +372,8 @@ background: var(--background-color-secondary); backdrop-filter: blur(8px); box-shadow: #{$box-shadow-medium}; + outline: 1px solid var(--border-color); + outline-offset: -1px; } .active { @@ -715,10 +730,10 @@ .machine-mechanics-content-container, .simulations-container, .event-proprties-wrapper { + position: relative; max-height: calc(60vh - (47px - 35px)); - overflow: auto; - overflow-y: scroll; - + width: calc(100% - 4px); + overflow-x: hidden; .header { @include flex-space-between; padding: 6px 12px; @@ -904,9 +919,8 @@ .collapse-header-container { @include flex-space-between; padding-right: 12px; - margin-top: 8px; - border-top: 1px solid var(--border-color); - border-bottom: 1px solid var(--border-color); + margin: 8px 0; + width: 100%; .header { color: var(--accent-color); @@ -990,7 +1004,6 @@ @include flex-space-between; padding: 10px 12px; color: var(--text-color); - margin-bottom: 4px; .input-value { color: inherit; } @@ -998,7 +1011,6 @@ .input-container { @include flex-center; - .remove-button { @include flex-center; height: 18px; @@ -1032,6 +1044,13 @@ } .custom-input-container { + @include flex-space-between; + .split { + height: 20px; + width: 2px; + border-radius: 2px; + background: var(--text-disabled); + } .header { @include flex-space-between; border: none; @@ -1043,11 +1062,9 @@ .inputs-container { @include flex-space-between; - padding-bottom: 8px; .input-container { padding: 0 12px; - margin-top: 6px; gap: 6px; } } @@ -1065,7 +1082,6 @@ .dropdown-header-container, .dropdown-content-container { padding: 6px 12px; - border-top: 1px solid var(--highlight-accent-color); } .input-range-container { diff --git a/app/src/styles/pages/realTimeViz.scss b/app/src/styles/pages/realTimeViz.scss index 617e39f..64b0f0c 100644 --- a/app/src/styles/pages/realTimeViz.scss +++ b/app/src/styles/pages/realTimeViz.scss @@ -770,6 +770,7 @@ .editWidgetOptions { position: absolute; background: var(--background-color); + backdrop-filter: blur(10px); z-index: 3; display: flex; flex-direction: column; From 949dbbca8d4e73aba920dd599b9510c7bf5de76a Mon Sep 17 00:00:00 2001 From: Vishnu Date: Tue, 29 Apr 2025 18:32:25 +0530 Subject: [PATCH 8/9] refactor: Enhance FileMenu component with click handling and outside click detection --- app/src/components/ui/FileMenu.tsx | 42 +++++++++++++++++++++++------- 1 file changed, 33 insertions(+), 9 deletions(-) diff --git a/app/src/components/ui/FileMenu.tsx b/app/src/components/ui/FileMenu.tsx index 798cc62..da85e54 100644 --- a/app/src/components/ui/FileMenu.tsx +++ b/app/src/components/ui/FileMenu.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useState, useEffect, useRef } from "react"; import RenameInput from "./inputs/RenameInput"; import { ArrowIcon } from "../icons/ExportCommonIcons"; import MenuBar from "./menu/menu"; @@ -6,24 +6,48 @@ import { ProjectIcon } from "../icons/HeaderIcons"; const FileMenu: React.FC = () => { const [openMenu, setOpenMenu] = useState(false); + const containerRef = useRef(null); + let clickTimeout: NodeJS.Timeout | null = null; + + const handleClick = () => { + if (clickTimeout) return; + setOpenMenu((prev) => !prev); + clickTimeout = setTimeout(() => { + clickTimeout = null; + }, 800); + }; + + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if ( + containerRef.current && + !containerRef.current.contains(event.target as Node) + ) { + setOpenMenu(false); + } + }; + + document.addEventListener("mousedown", handleClickOutside); + return () => document.removeEventListener("mousedown", handleClickOutside); + }, []); + return ( -
+ ); }; From 529771712353bc2a64c47f0f3986c77c6e5d55ec Mon Sep 17 00:00:00 2001 From: Vishnu Date: Tue, 29 Apr 2025 18:41:31 +0530 Subject: [PATCH 9/9] fix: Update loading progress condition in Project component and correct border-radius in sidebar styles --- app/src/modules/visualization/RealTimeVisulization.tsx | 2 +- app/src/pages/Project.tsx | 2 +- app/src/styles/layout/sidebar.scss | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/app/src/modules/visualization/RealTimeVisulization.tsx b/app/src/modules/visualization/RealTimeVisulization.tsx index 71faefb..05f7371 100644 --- a/app/src/modules/visualization/RealTimeVisulization.tsx +++ b/app/src/modules/visualization/RealTimeVisulization.tsx @@ -335,7 +335,7 @@ const RealTimeVisulization: React.FC = () => { onDrop={(event) => handleDrop(event)} onDragOver={(event) => event.preventDefault()} > - {/* */} +
{activeModule === "visualization" && selectedZone.zoneName !== "" && ( diff --git a/app/src/pages/Project.tsx b/app/src/pages/Project.tsx index d88e425..c491583 100644 --- a/app/src/pages/Project.tsx +++ b/app/src/pages/Project.tsx @@ -64,7 +64,7 @@ const Project: React.FC = () => {
*/} - {/* {loadingProgress && } */} + {loadingProgress > 0 && } {!isPlaying && ( <> {toggleThreeD && } diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss index eb4e2c0..01715ec 100644 --- a/app/src/styles/layout/sidebar.scss +++ b/app/src/styles/layout/sidebar.scss @@ -8,7 +8,7 @@ left: 8px; background: var(--background-color); backdrop-filter: blur(150px); - border-radius: #{$border-radius-xxx}; + border-radius: #{$border-radius-extra-large}; outline: 1px solid var(--border-color); box-shadow: #{$box-shadow-medium}; z-index: #{$z-index-tools}; @@ -257,7 +257,7 @@ right: 8px; background: var(--background-color); backdrop-filter: blur(150px); - border-radius: #{$border-radius-xxx}; + border-radius: #{$border-radius-extra-large}; outline: 1px solid var(--border-color); box-shadow: #{$box-shadow-medium}; z-index: #{$z-index-tools};