diff --git a/app/src/assets/image/banner.png b/app/src/assets/image/banner.png new file mode 100644 index 0000000..d267ac2 Binary files /dev/null and b/app/src/assets/image/banner.png differ diff --git a/app/src/assets/image/feneration.png b/app/src/assets/image/feneration.png new file mode 100644 index 0000000..c8b6521 Binary files /dev/null and b/app/src/assets/image/feneration.png differ diff --git a/app/src/assets/image/image.png b/app/src/assets/image/image.png index 61d4cdb..34d7e55 100644 Binary files a/app/src/assets/image/image.png and b/app/src/assets/image/image.png differ diff --git a/app/src/assets/image/machines.png b/app/src/assets/image/machines.png new file mode 100644 index 0000000..199870d Binary files /dev/null and b/app/src/assets/image/machines.png differ diff --git a/app/src/assets/image/vehicles.png b/app/src/assets/image/vehicles.png new file mode 100644 index 0000000..5701c94 Binary files /dev/null and b/app/src/assets/image/vehicles.png differ diff --git a/app/src/assets/image/workStation.png b/app/src/assets/image/workStation.png new file mode 100644 index 0000000..6345487 Binary files /dev/null and b/app/src/assets/image/workStation.png differ diff --git a/app/src/assets/image/worker.png b/app/src/assets/image/worker.png new file mode 100644 index 0000000..7067644 Binary files /dev/null and b/app/src/assets/image/worker.png differ diff --git a/app/src/components/icons/DashboardIcon.tsx b/app/src/components/icons/DashboardIcon.tsx new file mode 100644 index 0000000..83c997b --- /dev/null +++ b/app/src/components/icons/DashboardIcon.tsx @@ -0,0 +1,255 @@ +export function NotificationIcon() { + return ( + + + + + ); +} + +export function HomeIcon() { + return ( + + + + ); +} + +export function ProjectsIcon() { + return ( + + + + ); +} + +export function TutorialsIcon() { + return ( + + + + + + + + + + + + + + + + + + + + ); +} + +export function DocumentationIcon() { + return ( + + + + + ); +} + +export function HelpIcon() { + return ( + + + + + + + + + + + ); +} + +export function LogoutIcon() { + return ( + + + + + + ); +} diff --git a/app/src/components/icons/ExportCommonIcons.tsx b/app/src/components/icons/ExportCommonIcons.tsx index d2c9970..6e73c0e 100644 --- a/app/src/components/icons/ExportCommonIcons.tsx +++ b/app/src/components/icons/ExportCommonIcons.tsx @@ -526,21 +526,21 @@ export const KebabIcon = () => { cy="1.35112" rx="1.4993" ry="1.27477" - fill="#E1E1E1" + fill="var(--text-color)" /> ); @@ -559,7 +559,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="#6F42C1" + fill="var(--text-color)" /> ); @@ -576,31 +576,31 @@ export const DeleteIcon = () => { > diff --git a/app/src/components/icons/SimulationIcons.tsx b/app/src/components/icons/SimulationIcons.tsx index 28ce559..4879ea4 100644 --- a/app/src/components/icons/SimulationIcons.tsx +++ b/app/src/components/icons/SimulationIcons.tsx @@ -179,8 +179,8 @@ export function MoveArrowRight() { ); @@ -198,8 +198,8 @@ export function MoveArrowLeft() { ); diff --git a/app/src/components/layout/Dashboard/DashboardCard.tsx b/app/src/components/layout/Dashboard/DashboardCard.tsx new file mode 100644 index 0000000..0e5df0d --- /dev/null +++ b/app/src/components/layout/Dashboard/DashboardCard.tsx @@ -0,0 +1,25 @@ +import React from "react"; +import { KebabIcon } from "../../icons/ExportCommonIcons"; +import img from "../../../assets/image/image.png" + +const DashboardCard:React.FC = () => { + return ( +
+
+ +
+
+
+
Untitled
+
24-12-2025
+
+
+
V
+ +
+
+
+ ); +}; + +export default DashboardCard; diff --git a/app/src/components/layout/Dashboard/DashboardHome.tsx b/app/src/components/layout/Dashboard/DashboardHome.tsx new file mode 100644 index 0000000..9d6672c --- /dev/null +++ b/app/src/components/layout/Dashboard/DashboardHome.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import DashboardCard from "./DashboardCard"; +import DashboardNavBar from "./DashboardNavBar"; +import MarketPlaceBanner from "./MarketPlaceBanner"; + +const DashboardHome: React.FC = () => { + return ( +
+ + +
+
Recents
+
+ +
+
+
+ ); +}; + +export default DashboardHome; diff --git a/app/src/components/layout/Dashboard/DashboardNavBar.tsx b/app/src/components/layout/Dashboard/DashboardNavBar.tsx new file mode 100644 index 0000000..add0656 --- /dev/null +++ b/app/src/components/layout/Dashboard/DashboardNavBar.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import { CartIcon } from "../../icons/ExportModuleIcons"; +import Search from "../../ui/inputs/Search"; + +interface DashboardNavBarProps { + page: React.ReactNode; +} + +const DashboardNavBar: React.FC = ({ page }) => { + return ( +
+
{page}
+
+ Market Place +
+ {}} /> +
+ ); +}; + +export default DashboardNavBar; diff --git a/app/src/components/layout/Dashboard/MarketPlaceBanner.tsx b/app/src/components/layout/Dashboard/MarketPlaceBanner.tsx new file mode 100644 index 0000000..b0d151a --- /dev/null +++ b/app/src/components/layout/Dashboard/MarketPlaceBanner.tsx @@ -0,0 +1,44 @@ +import React from "react"; +import banner from "../../../assets/image/banner.png"; + +const MarketPlaceBanner = () => { + return ( +
+ {/* market place banner */} + +
+ NEW +
FALL +
COLLECTION +
+
Unlock Creativity with Premium 3D Assets!
+
+ + + + +
+
Explore Now
+
+ ); +}; + +export default MarketPlaceBanner; diff --git a/app/src/components/layout/Dashboard/SidePannel.tsx b/app/src/components/layout/Dashboard/SidePannel.tsx new file mode 100644 index 0000000..00e3e14 --- /dev/null +++ b/app/src/components/layout/Dashboard/SidePannel.tsx @@ -0,0 +1,69 @@ +import React from "react"; +import { + DocumentationIcon, + HelpIcon, + HomeIcon, + LogoutIcon, + NotificationIcon, + ProjectsIcon, + TutorialsIcon, +} from "../../icons/DashboardIcon"; +import { SettingsIcon, TrashIcon } from "../../icons/ExportCommonIcons"; + +const SidePannel: React.FC = () => { + const userName = localStorage.getItem("userName") || "Anonymous"; + return ( +
+
+
+
{userName[0]}
+
{userName}
+
+
+ +
+
+
+ New project
+
+
+
+ + Home +
+
+ + Projects +
+
+ + Trash +
+
+ + Tutorials +
+
+ + Documentation +
+
+
+
+ + Settings +
+
+ + Log out +
+
+ + Help & Feedback +
+
+
+
+ ); +}; + +export default SidePannel; diff --git a/app/src/components/layout/sidebarLeft/Assets.tsx b/app/src/components/layout/sidebarLeft/Assets.tsx index bbf476c..01b8c8e 100644 --- a/app/src/components/layout/sidebarLeft/Assets.tsx +++ b/app/src/components/layout/sidebarLeft/Assets.tsx @@ -1,13 +1,105 @@ import React, { useState } from "react"; import Search from "../../ui/inputs/Search"; - +import vehicle from "../../../assets/image/vehicles.png"; +import workStation from "../../../assets/image/workStation.png"; +import machines from "../../../assets/image/machines.png"; +import feneration from "../../../assets/image/feneration.png"; +import worker from "../../../assets/image/worker.png"; const Assets: React.FC = () => { const [searchValue, setSearchValue] = useState(""); + const [selectedCategory, setSelectedCategory] = useState(null); const handleSearchChange = (value: string) => { setSearchValue(value); - console.log(value); // Log the search value if needed + setSelectedCategory(null); // Reset selected category when search changes }; + + const categoryList = [ + { + assetName: "Doors", + assetImage: "", + category: "Feneration", + categoryImage: feneration, + }, + { + assetName: "Windows", + assetImage: "", + category: "Feneration", + categoryImage: feneration, + }, + { + assetName: "Pillars", + assetImage: "", + category: "Feneration", + categoryImage: feneration, + }, + { + assetName: "Forklift", + assetImage: "", + category: "Vehicles", + categoryImage: vehicle, + }, + { + assetName: "AGV", + assetImage: "", + category: "Vehicles", + categoryImage: vehicle, + }, + { + assetName: "Pallet", + assetImage: "", + category: "Workstation", + categoryImage: workStation, + }, + { + assetName: "Controller", + assetImage: "", + category: "Workstation", + categoryImage: workStation, + }, + { + assetName: "Conveyor", + assetImage: "", + category: "Workstation", + categoryImage: workStation, + }, + { + assetName: "VMC", + assetImage: "", + category: "Machines", + categoryImage: machines, + }, + { + assetName: "CMC", + assetImage: "", + category: "Machines", + categoryImage: machines, + }, + { + assetName: "Male Worker", + assetImage: "", + category: "Workers", + categoryImage: worker, + }, + { + assetName: "Female Worker", + assetImage: "", + category: "Workers", + categoryImage: worker, + }, + ]; + + // Get unique categories + const uniqueCategories = Array.from( + new Set(categoryList.map((asset) => asset.category)) + ); + + // Filter assets based on the selected category + const filteredAssets = + selectedCategory !== null + ? categoryList.filter((asset) => asset.category === selectedCategory) + : []; + return (
@@ -15,11 +107,58 @@ const Assets: React.FC = () => {

Results for "{searchValue}"

+ ) : selectedCategory ? ( +
+ {/* Back Button */} +
setSelectedCategory(null)} + > + ← Back +
+

{selectedCategory}

+
+ {filteredAssets.map((asset, index) => ( +
+ {asset.assetName} +
{asset.assetName}
+
+ ))} +
+
) : ( - <> +
+

Categories

+
+ {uniqueCategories.map((category, index) => { + const categoryInfo = categoryList.find( + (asset) => asset.category === category + ); + return ( +
setSelectedCategory(category)} + > + {category} +
{category}
+
+ ); + })} +
+
)}
); }; export default Assets; + diff --git a/app/src/components/layout/sidebarRight/Header.tsx b/app/src/components/layout/sidebarRight/Header.tsx index 46bfdaf..1da29a2 100644 --- a/app/src/components/layout/sidebarRight/Header.tsx +++ b/app/src/components/layout/sidebarRight/Header.tsx @@ -1,9 +1,10 @@ -import React, { useEffect } from "react"; +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 "../../../modules/collaboration/users/functions/getAvatarColor"; import { ActiveUser } from "../../../types/users"; +import CollaborationPopup from "../../templates/CollaborationPopup"; const Header: React.FC = () => { const { activeUsers } = useActiveUsers(); @@ -12,44 +13,58 @@ const Header: React.FC = () => { const guestUsers: ActiveUser[] = activeUsers.filter( (user: ActiveUser) => user.userName !== userName ); + + const [userManagement, setUserManagement] = useState(false); return ( -
-
-
Share
-
- -
-
-
-
-
- {guestUsers.length > 3 && ( -
+{guestUsers.length - 3}
- )} - {guestUsers.slice(0, 3).map((user, index) => ( -
- {user.userName[0]} -
- ))} -
-
+ <> + {userManagement && ( + + )} +
+
{ + setUserManagement(true); + }} > - {userName[0]} + Share
-
- +
+ +
+
+
+
+
+ {guestUsers.length > 3 && ( +
+{guestUsers.length - 3}
+ )} + {guestUsers.slice(0, 3).map((user, index) => ( +
+ {user.userName[0]} +
+ ))} +
+
+
+ {userName[0]} +
+
+ +
-
+ ); }; diff --git a/app/src/components/templates/CollaborationPopup.tsx b/app/src/components/templates/CollaborationPopup.tsx index 34e3669..8312fe7 100644 --- a/app/src/components/templates/CollaborationPopup.tsx +++ b/app/src/components/templates/CollaborationPopup.tsx @@ -50,7 +50,14 @@ const UserListTemplate: React.FC = ({ user }) => { ); }; -const CollaborationPopup: React.FC = () => { +interface CollaborateProps { + setUserManagement: (value: boolean) => void; +} + +const CollaborationPopup: React.FC = ({ + setUserManagement, +}) => { + const userName = localStorage.getItem("userName") || "Anonymous"; const users = [ { name: "Alice Johnson", @@ -81,16 +88,31 @@ const CollaborationPopup: React.FC = () => { access: "Viewer", }, ]; - return ( -
-
+
{ + setUserManagement(false); + }} + > +
{ + e.preventDefault(); + e.stopPropagation(); + }} + >
Share this file
copy link
-
+
{ + setUserManagement(false); + }} + >
@@ -111,7 +133,10 @@ const CollaborationPopup: React.FC = () => {
-
User 1
+
+
{userName[0]}
+ {userName} +
you
{users.map((user, index) => ( diff --git a/app/src/components/ui/componets/RealTimeVisulization.tsx b/app/src/components/ui/componets/RealTimeVisulization.tsx index d84e6e8..17dd452 100644 --- a/app/src/components/ui/componets/RealTimeVisulization.tsx +++ b/app/src/components/ui/componets/RealTimeVisulization.tsx @@ -13,7 +13,6 @@ import { useAsset3dWidget, useZones } from "../../../store/store"; import { getZoneData } from "../../../services/realTimeVisulization/zoneData/getZones"; import { getZone2dData } from "../../../services/realTimeVisulization/zoneData/getZoneData"; - type Side = "top" | "bottom" | "left" | "right"; type FormattedZoneData = Record< @@ -25,7 +24,7 @@ type FormattedZoneData = Record< lockedPanels: Side[]; zoneId: string; zoneViewPortTarget: number[]; - zoneViewPortPosition: number[] + zoneViewPortPosition: number[]; widgets: Widget[]; } >; @@ -45,8 +44,10 @@ const RealTimeVisulization: React.FC = () => { const [droppedObjects, setDroppedObjects] = useState([]); const [zonesData, setZonesData] = useState({}); const { selectedZone, setSelectedZone } = useSelectedZoneStore(); - const { zones } = useZones() - const [floatingWidgets, setFloatingWidgets] = useState>({}); + const { zones } = useZones(); + const [floatingWidgets, setFloatingWidgets] = useState< + Record + >({}); const { widgetSelect, setWidgetSelect } = useAsset3dWidget(); useEffect(() => { async function GetZoneData() { @@ -57,28 +58,30 @@ const RealTimeVisulization: React.FC = () => { if (!Array.isArray(response)) { return; } - const formattedData = response.reduce((acc, zone) => { - acc[zone.zoneName] = { - activeSides: [], - panelOrder: [], - lockedPanels: [], - zoneId: zone.zoneId, - zoneViewPortTarget: zone.viewPortCenter, - zoneViewPortPosition: zone.viewPortposition, - widgets: [], - }; - return acc; - }, {}); + const formattedData = response.reduce( + (acc, zone) => { + acc[zone.zoneName] = { + activeSides: [], + panelOrder: [], + lockedPanels: [], + zoneId: zone.zoneId, + zoneViewPortTarget: zone.viewPortCenter, + zoneViewPortPosition: zone.viewPortposition, + widgets: [], + }; + return acc; + }, + {} + ); setZonesData(formattedData); } catch (error) { - console.log('error: ', error); + console.log("error: ", error); } } GetZoneData(); }, [activeModule]); // Removed `zones` from dependencies - useEffect(() => { setZonesData((prev) => { if (!selectedZone) return prev; @@ -98,9 +101,7 @@ const RealTimeVisulization: React.FC = () => { }); }, [selectedZone]); - useEffect(() => { - - }, [floatingWidgets]) + useEffect(() => {}, [floatingWidgets]); const handleDrop = (event: React.DragEvent) => { event.preventDefault(); @@ -121,24 +122,31 @@ const RealTimeVisulization: React.FC = () => { position: [relativeY, relativeX], // Y first because of top/left style }; // Only set zone if it’s not already in the store (prevents overwriting objects) - const existingZone = useDroppedObjectsStore.getState().zones[selectedZone.zoneName]; + const existingZone = + useDroppedObjectsStore.getState().zones[selectedZone.zoneName]; if (!existingZone) { - useDroppedObjectsStore.getState().setZone(selectedZone.zoneName, selectedZone.zoneId); + useDroppedObjectsStore + .getState() + .setZone(selectedZone.zoneName, selectedZone.zoneId); } // Add the dropped object to the zone - useDroppedObjectsStore.getState().addObject(selectedZone.zoneName, newObject); + useDroppedObjectsStore + .getState() + .addObject(selectedZone.zoneName, newObject); setFloatingWidgets((prevWidgets) => ({ ...prevWidgets, [selectedZone.zoneName]: { ...prevWidgets[selectedZone.zoneName], zoneName: selectedZone.zoneName, zoneId: selectedZone.zoneId, - objects: [...(prevWidgets[selectedZone.zoneName]?.objects || []), newObject], + objects: [ + ...(prevWidgets[selectedZone.zoneName]?.objects || []), + newObject, + ], }, })); }; - return (
{ width: isPlaying || activeModule !== "visualization" ? "100vw" : "", left: isPlaying || activeModule !== "visualization" ? "0%" : "", }} - >
{ onFocus={() => setInputFocus(true)} onBlur={() => setInputFocus(false)} onKeyDown={handleKeyDown} - placeholder="Enter email and press Enter or comma" + placeholder="Enter email and press Enter or comma to seperate" />
Invite
+
+ {/* list available users */} +
); }; diff --git a/app/src/components/ui/inputs/MultiLevelDropDown.tsx b/app/src/components/ui/inputs/MultiLevelDropDown.tsx index 3385a5b..50f7fc8 100644 --- a/app/src/components/ui/inputs/MultiLevelDropDown.tsx +++ b/app/src/components/ui/inputs/MultiLevelDropDown.tsx @@ -253,7 +253,8 @@ const MultiLevelDropdown = ({ className={`dropdown-button ${open ? "open" : ""}`} onClick={() => setOpen(!open)} > - {displayLabel} ▾ +
{displayLabel}
+ ▾ {open && (
diff --git a/app/src/components/ui/menu/menu.tsx b/app/src/components/ui/menu/menu.tsx new file mode 100644 index 0000000..b374237 --- /dev/null +++ b/app/src/components/ui/menu/menu.tsx @@ -0,0 +1,604 @@ +import React, { useState } from "react"; + +const MenuBar = () => { + const [activeMenu, setActiveMenu] = useState(null); + const [activeSubMenu, setActiveSubMenu] = useState(null); + + // State to track selection for all menu items + const [selectedItems, setSelectedItems] = useState>( + {} + ); + + // Function to toggle selection for a specific item + const toggleSelection = (itemName: string) => { + setSelectedItems((prev) => ({ + ...prev, + [itemName]: !prev[itemName], // Toggle the selection state + })); + }; + + return ( +
+ {/* Top-level menu buttons */} +
+ {/* File Menu */} +
setActiveMenu("File")} + onMouseLeave={() => { + setActiveMenu(null); + setActiveSubMenu(null); + }} + > +
+ File + ▾ +
+ + {/* File Dropdown */} + {activeMenu === "File" && ( +
+ {/* New File */} +
toggleSelection("New File")} + > +
+ + {selectedItems["New File"] && "✓ "} + New File + +
+ Ctrl + N +
+
+
+ + {/* Open Local File */} +
toggleSelection("Open Local File")} + > +
+ + {selectedItems["Open Local File"] && "✓ "} + Open Local File + +
+ Ctrl + O +
+
+
+ + {/* Save Version */} +
toggleSelection("Save Version")} + > +
+ + {selectedItems["Save Version"] && "✓ "} + Save Version + +
+
+
+ + {/* Make a Copy */} +
toggleSelection("Make a Copy")} + > +
+ + {selectedItems["Make a Copy"] && "✓ "} + Make a Copy + +
+
+ + {/* Share */} +
toggleSelection("Share")} + > +
+ + {selectedItems["Share"] && "✓ "} + Share + +
+
+ + {/* Rename */} +
toggleSelection("Rename")} + > +
+ + {selectedItems["Rename"] && "✓ "} + Rename + +
+
+
+ + {/* Import */} +
toggleSelection("Import")} + > +
+ + {selectedItems["Import"] && "✓ "} + Import + +
+
+ + {/* Close File */} +
toggleSelection("Close File")} + > +
+ + {selectedItems["Close File"] && "✓ "} + Close File + +
+
+
+ )} +
+ + {/* Edit Menu */} +
setActiveMenu("Edit")} + onMouseLeave={() => { + setActiveMenu(null); + setActiveSubMenu(null); + }} + > +
+ Edit + ▾ +
+ + {/* Edit Dropdown */} + {activeMenu === "Edit" && ( +
+ {/* Undo */} +
toggleSelection("Undo")} + > +
+ + {selectedItems["Undo"] && "✓ "} + Undo + +
+ Ctrl + Z +
+
+
+ + {/* Redo */} +
toggleSelection("Redo")} + > +
+ + {selectedItems["Redo"] && "✓ "} + Redo + +
+ Ctrl + Shift + Z +
+
+
+
+ + {/* Undo History */} +
toggleSelection("Undo History")} + > +
+ + {selectedItems["Undo History"] && "✓ "} + Undo History + +
+
+ + {/* Redo History */} +
toggleSelection("Redo History")} + > +
+ + {selectedItems["Redo History"] && "✓ "} + Redo History + +
+
+
+ + {/* Find */} +
toggleSelection("Find")} + > +
+ + {selectedItems["Find"] && "✓ "} + Find + +
+ Ctrl + F +
+
+
+ + {/* Delete */} +
toggleSelection("Delete")} + > +
+ + {selectedItems["Delete"] && "✓ "} + Delete + +
+
+ + {/* Select by... */} +
toggleSelection("Select by...")} + > +
+ + {selectedItems["Select by..."] && "✓ "} + Select by... + +
+
+ + {/* Keymap */} +
toggleSelection("Keymap")} + > +
+ + {selectedItems["Keymap"] && "✓ "} + Keymap + +
+
+
+ )} +
+ + {/* View Menu */} +
setActiveMenu("View")} + onMouseLeave={() => { + setActiveMenu(null); + setActiveSubMenu(null); + }} + > +
+ View + ▾ +
+ + {/* View Dropdown */} + {activeMenu === "View" && ( +
+ {/* Grid */} +
toggleSelection("Grid")} + > +
+ + {selectedItems["Grid"] && "✓ "} + Grid + +
+
+ + {/* Gizmo */} +
setActiveSubMenu("View-Gizmo")} + onMouseLeave={() => setActiveSubMenu(null)} + > +
+ + {selectedItems["Gizmo"] && "✓ "} + Gizmo + + ▾ +
+
+ + {/* Gizmo Submenu */} + {activeSubMenu === "View-Gizmo" && ( +
+ {/* Visibility */} +
toggleSelection("Visibility")} + > + + {selectedItems["Visibility"] && "✓ "} + Visibility + +
+ + {/* Cube view */} +
toggleSelection("Cube view")} + > + + {selectedItems["Cube view"] && "✓ "} + Cube view + +
+ + {/* Sphere view */} +
toggleSelection("Sphere view")} + > + + {selectedItems["Sphere view"] && "✓ "} + Sphere view + +
+ + {/* Custom settings */} +
toggleSelection("Custom settings")} + > + + {selectedItems["Custom settings"] && "✓ "} + Custom settings + +
+
+ )} +
+ + {/* Zoom */} +
toggleSelection("Zoom")} + > +
+ + {selectedItems["Zoom"] && "✓ "} + Zoom + +
+
+ + {/* Full Screen */} +
toggleSelection("Full Screen")} + > +
+ + {selectedItems["Full Screen"] && "✓ "} + Full Screen + +
+ F11 +
+
+
+
+ )} +
+ + {/* Version History Menu */} +
setActiveMenu("Version history")} + onMouseLeave={() => { + setActiveMenu(null); + setActiveSubMenu(null); + }} + > +
+ Version history +
+ + +
+ + {/* Export As Menu */} +
setActiveMenu("Export as...")} + onMouseLeave={() => { + setActiveMenu(null); + setActiveSubMenu(null); + }} + > +
+ Export as... +
+ +
+ + {/* Apps Menu */} +
setActiveMenu("Apps")} + onMouseLeave={() => { + setActiveMenu(null); + setActiveSubMenu(null); + }} + > +
+ Apps + ▾ +
+ + {/* Apps Dropdown */} + {activeMenu === "Apps" && ( +
+ {/* New App */} +
toggleSelection("New App")} + > +
+ + {selectedItems["New App"] && "✓ "} + New App + +
+
+ +
+ + {/* Work-flow Monitor */} +
toggleSelection("Work-flow Monitor")} + > +
+ + {selectedItems["Work-flow Monitor"] && "✓ "} + Work-flow Monitor + +
+
+ + {/* Temperature Visualizer */} +
toggleSelection("Temperature Visualizer")} + > +
+ + {selectedItems["Temperature Visualizer"] && "✓ "} + Temperature Visualizer + +
+
+ + {/* View all */} +
toggleSelection("View all")} + > +
+ + {selectedItems["View all"] && "✓ "} + View all + +
+
+
+ )} +
+ + {/* Help Menu */} +
setActiveMenu("Help")} + onMouseLeave={() => { + setActiveMenu(null); + setActiveSubMenu(null); + }} + > +
+ Help + ▾ +
+ + {/* Help Dropdown */} + {activeMenu === "Help" && ( +
+ {/* Shortcuts */} +
toggleSelection("Shortcuts")} + > +
+ + {selectedItems["Shortcuts"] && "✓ "} + Shortcuts + +
+ Ctrl + Shift + ? +
+
+
+ + {/* Manual */} +
toggleSelection("Manual")} + > +
+ + {selectedItems["Manual"] && "✓ "} + Manual + +
+
+ + {/* Video Tutorials */} +
toggleSelection("Video Tutorials")} + > +
+ + {selectedItems["Video Tutorials"] && "✓ "} + Video Tutorials + +
+
+ + {/* Report a bug */} +
toggleSelection("Report a bug")} + > +
+ + {selectedItems["Report a bug"] && "✓ "} + Report a bug + +
+
+
+ )} +
+
+
+ ); +}; + +export default MenuBar; + + diff --git a/app/src/modules/collaboration/collabCams.tsx b/app/src/modules/collaboration/collabCams.tsx index a699bf3..5ebe1eb 100644 --- a/app/src/modules/collaboration/collabCams.tsx +++ b/app/src/modules/collaboration/collabCams.tsx @@ -142,6 +142,7 @@ const CamModelsGroup = () => { const filteredData = data.cameraDatas.filter( (camera: any) => camera.userData.email !== email ); + let a:any = []; if (filteredData.length > 0) { loader.load(camModel, (gltf) => { const newCams = filteredData.map((cam: any) => { @@ -158,9 +159,10 @@ const CamModelsGroup = () => { cam.rotation.z ); newModel.userData = cam.userData; - setActiveUsers([...activeUsers, cam.userData]); + a.push(cam.userData); return newModel; }); + setActiveUsers(a); setCams((prev) => [...prev, ...newCams]); }); } diff --git a/app/src/modules/market/AssetPreview.tsx b/app/src/modules/market/AssetPreview.tsx index db8d3c3..854ebc4 100644 --- a/app/src/modules/market/AssetPreview.tsx +++ b/app/src/modules/market/AssetPreview.tsx @@ -25,7 +25,7 @@ interface AssetPreviewProps { function Ui() { return ( - Loading your model... + Loading preview... ); } diff --git a/app/src/pages/Dashboard.tsx b/app/src/pages/Dashboard.tsx index 9df13a0..02ce030 100644 --- a/app/src/pages/Dashboard.tsx +++ b/app/src/pages/Dashboard.tsx @@ -1,8 +1,13 @@ import React from 'react'; +import SidePannel from '../components/layout/Dashboard/SidePannel'; +import DashboardHome from '../components/layout/Dashboard/DashboardHome'; const Dashboard: React.FC = () => { return ( -
Dashboard
+
+ + +
); }; diff --git a/app/src/styles/abstracts/variables.scss b/app/src/styles/abstracts/variables.scss index 18822b6..4d201ad 100644 --- a/app/src/styles/abstracts/variables.scss +++ b/app/src/styles/abstracts/variables.scss @@ -58,6 +58,9 @@ $acent-gradient: linear-gradient( #925df3 100% ); // Light mode accent gradient +$faint-gradient: radial-gradient(circle, #bfe0f8 0%, #e9ebff 46%, #e2acff 100%); +$faint-gradient-dark: radial-gradient(circle, #31373b 0%, #48494b 46%, #52415c 100%); + // ======================================================================== // Typography // ======================================================================== diff --git a/app/src/styles/base/base.scss b/app/src/styles/base/base.scss index f7bf4b0..86495f5 100644 --- a/app/src/styles/base/base.scss +++ b/app/src/styles/base/base.scss @@ -12,6 +12,7 @@ --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 + --faint-gradient-color: #{$faint-gradient}; // Background colors --background-color: #{$background-color}; // Main background color @@ -46,6 +47,7 @@ --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 + --faint-gradient-color: #{$faint-gradient-dark}; // Background colors --background-color: #{$background-color-dark}; // Main background color @@ -84,7 +86,6 @@ } body { - background: var(--background-color); /* Font Sizes */ @@ -104,25 +105,34 @@ body { /* Apply custom scrollbar styles globally */ ::-webkit-scrollbar { - width: 8px; /* Width of the scrollbar */ - height: 8px; /* Height for horizontal scrollbars */ + 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 */ + 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 #f4f4f4; /* Padding around the scrollbar handle */ + background: var(--accent-color); + /* Scrollbar handle color */ + border-radius: 4px; + /* Rounded corners */ + border: 2px solid #f4f4f4; + /* Padding around the scrollbar handle */ } ::-webkit-scrollbar-thumb:hover { - background: var(--accent-color); /* Handle color on hover */ + background: var(--accent-color); + /* Handle color on hover */ } ::-webkit-scrollbar-corner { - background: transparent; /* Remove corner styling for scrollable containers */ + background: transparent; + /* Remove corner styling for scrollable containers */ } diff --git a/app/src/styles/components/input.scss b/app/src/styles/components/input.scss index 36ac8ff..f60aca6 100644 --- a/app/src/styles/components/input.scss +++ b/app/src/styles/components/input.scss @@ -28,12 +28,14 @@ .toggle-header-container { @include flex-center; padding: 6px 12px; + .toggle-header-item { width: 100%; text-align: center; padding: 4px 12px; border-radius: #{$border-radius-large}; } + .active { background-color: var(--accent-color); color: var(--primary-color); @@ -46,6 +48,7 @@ padding: 8px 10px; background: var(--background-color); z-index: 1; + .search-container { @include flex-center; width: 100%; @@ -83,11 +86,13 @@ border: none; cursor: pointer; background-color: transparent; + &:hover { background-color: var(--highlight-accent-color); } } } + .active { border: 1px solid var(--accent-color); } @@ -96,9 +101,11 @@ .kebab-menu-container { position: relative; @include flex-center; + .kebab-icon { @include flex-center; } + .menu-list { position: absolute; left: 10px; @@ -109,6 +116,7 @@ z-index: 1; padding: 8px 4px; width: 170px; + .menu-item { margin: 2px 0; padding: 2px 4px; @@ -116,25 +124,31 @@ border-radius: #{$border-radius-small}; display: flex; gap: 2px; + &:hover { background-color: var(--background-color-secondary); } + .icon-container { @include flex-center; height: 18px; width: 18px; + path { stroke: var(--accent-color); } } } + .selected { background-color: var(--highlight-accent-color); color: var(--accent-color); + &:hover { background-color: var(--highlight-accent-color); } } + input { display: none; } @@ -144,6 +158,7 @@ .project-dropdowm-container { position: relative; height: 32px; + .project-name { line-height: 32px; height: 100%; @@ -158,6 +173,7 @@ border-radius: 6px; position: relative; cursor: pointer; + .dropdown-header { height: 100%; display: flex; @@ -180,14 +196,17 @@ left: 0; top: 110%; padding: 4px; + .dropdown-search { margin-bottom: 4px; } + .option { padding: 2px 4px; cursor: pointer; flex-direction: row !important; border-radius: #{$border-radius-small}; + &:hover { color: var(--accent-color); background-color: var(--highlight-accent-color); @@ -203,6 +222,7 @@ .input.default { width: 100%; position: relative; + .dropdown { top: 3px; right: 3px; @@ -210,6 +230,7 @@ background: var(--highlight-accent-color); border-radius: #{$border-radius-small}; padding: 1px 4px; + .active-option { color: var(--accent-color); font-size: var(--font-size-small); @@ -223,6 +244,7 @@ input { border-radius: #{$border-radius-small}; border: 1px solid var(--border-color); outline: none; + &:focus, &:active { border: 1px solid var(--accent-color); @@ -232,14 +254,17 @@ input { .eye-dropper-input-container { display: flex; align-items: center; + .label { width: 40%; } + .input-container { width: 60%; position: relative; @include flex-center; gap: 4px; + .eye-picker-button { height: 24px; min-width: 24px; @@ -248,6 +273,7 @@ input { background: var(--background-color-secondary); cursor: pointer; } + .active { background: var(--accent-color); } @@ -264,6 +290,13 @@ input { border: 1px solid var(--border-color) !important; padding: 5px 10px; + .label { + white-space: nowrap; + overflow: hidden; + max-width: 80%; + text-overflow: ellipsis; + } + // font-size: 12px; cursor: pointer; border-radius: 5px; @@ -295,9 +328,11 @@ input { display: flex; flex-direction: column; gap: 6px; + .nested-dropdown { margin-left: 0; } + padding: 10px; } @@ -306,7 +341,7 @@ input { padding: 5px 10px; text-decoration: none; color: var(--text-color); - font-size: 14px; + font-size: var(--font-size-regular); cursor: pointer; transition: background-color 0.3s ease; @@ -324,11 +359,12 @@ input { justify-content: space-between; padding: 5px 10px; cursor: pointer; - font-size: 14px; + font-size: var(--font-size-regular); color: var(--text-color); transition: background-color 0.3s ease; border-radius: #{$border-radius-small}; - .arrow-container{ + + .arrow-container { @include flex-center; } @@ -342,7 +378,7 @@ input { } .icon { - font-size: 12px; + font-size: var(--font-size-small); margin-left: 5px; } } @@ -429,6 +465,7 @@ input { outline: 3px solid var(--accent-color); outline-offset: -3px; transform: translateY(-5px); + &:hover { transform: scale(1.1) translateY(-5px); } @@ -530,6 +567,7 @@ input { .labeled-button-container { @include flex-space-between; padding: 6px 12px; + button { padding: 2px 32px; border: none; @@ -538,6 +576,7 @@ input { background: var(--accent-color); transition: all 0.2s; cursor: pointer; + &:hover { color: var(--primary-color); } @@ -548,12 +587,15 @@ input { margin-bottom: 6px; padding: 6px 12px; @include flex-space-between; + .label { width: 40%; } + .regularDropdown-container { width: 60%; } + .default { width: 60%; } @@ -562,6 +604,7 @@ input { .multi-email-invite-input-container { @include flex-space-between; gap: 20px; + .multi-email-invite-input { width: 100%; display: flex; @@ -571,24 +614,29 @@ input { flex-wrap: wrap; max-height: 180px; overflow: auto; + input { border: none; + &::placeholder { color: var(--text-disabled); } } + .entered-emails { @include flex-center; gap: 2px; background: var(--background-color-gray); padding: 0 4px; border-radius: #{$border-radius-large}; + span { height: 14px; width: 14px; line-height: 12px; text-align: center; border-radius: #{$border-radius-small}; + &:hover { background: var(--accent-color); color: var(--primary-color); @@ -596,13 +644,15 @@ input { } } } + .invite-button { padding: 4px 12px; border-radius: #{$border-radius-large}; background: var(--accent-color); color: var(--primary-color); } + .multi-email-invite-input.active { border: 1px solid var(--accent-color); } -} +} \ No newline at end of file diff --git a/app/src/styles/components/menu/menu.scss b/app/src/styles/components/menu/menu.scss new file mode 100644 index 0000000..a4348a3 --- /dev/null +++ b/app/src/styles/components/menu/menu.scss @@ -0,0 +1,127 @@ +.menu-bar { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 5; + background-color: var(--background-color); + color: var(--text-color); + box-shadow: var(--box-shadow-light); + border-radius: 8px; + .menu-buttons { + display: flex; + flex-direction: column; + height: 100%; + padding: 8px 4px; + min-width: 178px; + + .menu-button-container { + position: relative; + height: 100%; + padding: 8px; + + .menu-button { + width: 100%; + cursor: pointer; + transition: all 0.2s ease; + display: flex; + align-items: center; + justify-content: space-between; + position: relative; + + .dropdown-icon { + margin-left: 5px; + font-size: var(--font-size-small); + color: #666666; + } + } + + .dropdown-menu { + position: absolute; + top: 0; + left: 100%; + background-color: var(--background-color); + min-width: 220px; + border-radius: 4px; + box-shadow: var(--box-shadow-light); + border: 1px solid var(--background-color); + z-index: 100; + padding: 5px 0; + + .menu-item-container { + position: relative; + + .menu-item { + display: flex; + justify-content: space-between; + align-items: center; + padding: 8px 20px; + cursor: pointer; + white-space: nowrap; + color: var(--text-color); + + &:hover { + background-color: var(--highlight-accent-color); + color: var(--highlight-accent-color); + } + + .menu-item-right { + display: flex; + align-items: center; + gap: 15px; + + .shortcut { + color: var(--text-color); + font-size: var(--font-size-small); + } + + .icon { + font-size: var(--font-size-small); + color: var(--text-color); + } + } + } + + .submenu { + position: absolute; + left: 100%; + top: 0; + background-color: var(--background-color); + min-width: 200px; + border-radius: 0 4px 4px 4px; + box-shadow: var(--box-shadow-light); + border: 1px solid var(--background-color); + z-index: 101; + + .submenu-item { + padding: 8px 20px; + cursor: pointer; + display: flex; + justify-content: space-between; + color: var(--text-color); + + &:hover { + background-color: var(--background-color-gray); + color: var(--highlight-accent-color); + } + + .shortcut { + color: var(--text-color); + } + } + } + } + } + + &:hover { + background-color: var(--highlight-accent-color); + color: var(--highlight-accent-color); + } + } + } + .split { + width: 100%; + height: 1px; + background-color: #e0dfff; + } +} diff --git a/app/src/styles/components/visualization/floating/common.scss b/app/src/styles/components/visualization/floating/common.scss index 00c88a5..7c74d54 100644 --- a/app/src/styles/components/visualization/floating/common.scss +++ b/app/src/styles/components/visualization/floating/common.scss @@ -92,7 +92,7 @@ align-items: center; .value { - font-size: 30px; + font-size: var(--font-size-xxxlarge); color: var(--accent-color); } @@ -170,15 +170,16 @@ } } } - .bar-chart{ - padding:14px 0; + + .bar-chart { + padding: 14px 0; } } .stateWorking-wrapper { min-width: 445px; - font-size: 12px; + font-size: var(--font-size-small); backdrop-filter: blur(40px); background: var(--background-color-secondary); border-radius: 20px; @@ -195,7 +196,7 @@ flex-direction: column; span { - font-size: 27px; + font-size: var(--font-size-xxlarge); &:first-child { color: #FCFDFD; @@ -362,13 +363,13 @@ border-radius: 4px; .label { - font-size: 0.9rem; + font-size: var(--font-size-regular); margin: 0; opacity: 0.7; } .value { - font-size: 1.2rem; + font-size: var(--font-size-xlarge); font-weight: bold; margin: 0; } @@ -398,19 +399,19 @@ text-align: center; .title { - font-size: 1rem; + font-size: var(--font-size-large); margin: 0; opacity: 0.7; } .time { - font-size: 2.5rem; + font-size: var(--font-size-xxxlarge); font-weight: bold; margin: 0; } .subtitle { - font-size: 0.8rem; + font-size: var(--font-size-regular); margin: 0; opacity: 0.7; } @@ -461,7 +462,7 @@ display: flex; justify-content: space-between; color: #718096; - font-size: 12px; + font-size: var(--font-size-small); padding: 18px 10px; position: relative; z-index: 100; diff --git a/app/src/styles/components/visualization/floating/energyConsumed.scss b/app/src/styles/components/visualization/floating/energyConsumed.scss index a5b9cee..5ef39de 100644 --- a/app/src/styles/components/visualization/floating/energyConsumed.scss +++ b/app/src/styles/components/visualization/floating/energyConsumed.scss @@ -55,7 +55,7 @@ } .state { - font-size: 24px; + font-size: var(--font-size-xxlarge); font-weight: bold; } @@ -66,7 +66,7 @@ } .working { - font-size: 20px; + font-size: var(--font-size-xxlarge); color: #4CAF50; } @@ -95,7 +95,7 @@ display: flex; justify-content: space-between; align-items: center; - font-size: 16px; + font-size: var(--font-size-large); padding: 4px 0; } diff --git a/app/src/styles/components/visualization/ui/styledWidgets.scss b/app/src/styles/components/visualization/ui/styledWidgets.scss index 9c72fae..794b756 100644 --- a/app/src/styles/components/visualization/ui/styledWidgets.scss +++ b/app/src/styles/components/visualization/ui/styledWidgets.scss @@ -25,7 +25,7 @@ var(--highlight-accent-color) 60%, transparent ); - font-size: 16px; + font-size: var(--font-size-large); align-items: center; } .stock-item { @@ -36,7 +36,7 @@ color: var(--accent-color); } .stock-description { - font-size: 12px; + font-size: var(--font-size-small); } } } diff --git a/app/src/styles/layout/loading.scss b/app/src/styles/layout/loading.scss index a6e3bf5..0a13753 100644 --- a/app/src/styles/layout/loading.scss +++ b/app/src/styles/layout/loading.scss @@ -18,12 +18,7 @@ &::after { content: ""; position: absolute; - background: radial-gradient( - circle, - #bfe0f8 0%, - #e9ebff 46%, - #e2acff 100% - ); + background: var(--faint-gradient-color); height: 50vh; width: 50vw; top: 0; diff --git a/app/src/styles/layout/popup.scss b/app/src/styles/layout/popup.scss index 20ea3f2..9d22e64 100644 --- a/app/src/styles/layout/popup.scss +++ b/app/src/styles/layout/popup.scss @@ -86,7 +86,18 @@ } .project-name, .your-name { + @include flex-center; + gap: 6px; color: var(--accent-color); + .user-profile{ + height: 24px; + width: 24px; + text-align: center; + line-height: 25px; + background-color: var(--accent-color); + color: var(--primary-color); + border-radius: #{$border-radius-circle}; + } } .number-of-peoples-have-access { padding: 4px 12px; @@ -115,6 +126,7 @@ @include flex-center; flex-direction: column; gap: 6px; + transform: translateY(15px); .user-image-container{ height: 30px; width: 30px; diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss index b248ad2..1e2de3c 100644 --- a/app/src/styles/layout/sidebar.scss +++ b/app/src/styles/layout/sidebar.scss @@ -10,6 +10,7 @@ border-radius: #{$border-radius-extra-large}; box-shadow: #{$box-shadow-medium}; z-index: #{$z-index-tools}; + .header-container { @include flex-space-between; padding: 10px; @@ -75,6 +76,7 @@ .widget2D { overflow: auto; + .chart-container { display: flex; flex-direction: column; @@ -122,18 +124,19 @@ .value { color: var(--accent-color); - font-size: 16px; + font-size: var(--font-size-large); } } .stock-description { - font-size: 12px; + font-size: var(--font-size-small); } } } } } } + .widget3D { display: flex; flex-direction: column; @@ -232,6 +235,7 @@ display: flex; width: 100%; justify-content: flex-end; + .other-guest { @include flex-center; height: 26px; @@ -327,7 +331,7 @@ align-items: center; .multi-level-dropdown { - min-width: 170px; + width: 170px; .dropdown-button { display: flex; @@ -359,6 +363,7 @@ border-bottom: 1px solid var(--border-color); padding-bottom: 6px; } + .inputs-wrapper { display: flex; flex-direction: column; @@ -393,12 +398,12 @@ box-shadow: none; color: #5273eb; padding: 6px; - font-size: 18px; + font-size: var(--font-size-xlarge); } .bulletPoint { color: #5273eb; - font-size: 16px; + font-size: var(--font-size-large); } .regularDropdown-container { @@ -422,7 +427,7 @@ gap: 6px; color: #444; border-radius: 6px; - font-size: 14px; + font-size: var(--font-weight-regular); .infoIcon { padding: 0px 7px; @@ -442,7 +447,7 @@ flex-direction: column; gap: 15px; padding: 0; - font-size: 14px; + font-size: var(--font-weight-regular); color: #4a4a4a; .selectedWidget { @@ -508,6 +513,7 @@ } } } + .machine-mechanics-container { .machine-mechanics-header { padding: 8px 12px; @@ -515,15 +521,18 @@ border-bottom: 1px solid var(--border-color); color: var(--accent-color); } + .process-list-container { display: flex; align-items: center; gap: 4px; padding: 8px; border-bottom: 1px solid var(--border-color); + .label { margin-right: 8px; } + .add-new-process { @include flex-center; height: 24px; @@ -531,12 +540,15 @@ cursor: pointer; background: var(--background-color-secondary); border-radius: #{$border-radius-medium}; + path { stroke: var(--accent-color); - strokeWidth: 1.5px; + strokewidth: 1.5px; } + &:hover { background: var(--accent-color); + path { stroke: var(--highlight-accent-color); } @@ -544,11 +556,13 @@ } } } + .machine-mechanics-content-container, .simulations-container { max-height: calc(60vh - (47px - 35px)); overflow: auto; overflow-y: scroll; + .header { @include flex-space-between; padding: 6px 12px; @@ -588,17 +602,20 @@ margin: 2px 0; border-radius: #{$border-radius-small}; } + .value { display: flex; justify-content: flex-start; align-items: center; min-width: 80%; gap: 6px; + input { width: fit-content; accent-color: var(--accent-color); } } + .active { background: var(--highlight-accent-color); @@ -618,8 +635,10 @@ cursor: pointer; border-radius: #{$border-radius-small}; transform: translateX(4px); + &:hover { background-color: var(--accent-color); + path { stroke: var(--primary-color); } @@ -640,21 +659,26 @@ .selected-properties-container { padding: 12px; + .properties-header { color: var(--accent-color); font-weight: var(--font-weight-regular); padding: 8px 0; } + .value-field-container { margin-bottom: 6px; padding: 0; @include flex-space-between; + .label { width: 40%; } + .regularDropdown-container { width: 60%; } + .default { width: 60%; } @@ -668,23 +692,29 @@ margin-top: 8px; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); + .header { color: var(--accent-color); } } + .process-container { padding: 0 12px; margin: 6px 0; + .value { @include flex-space-between; + .arrow-container { height: 16px; width: 16px; } + .active { rotate: 90deg; } } + .children-drop { .value { padding: 6px; @@ -707,20 +737,25 @@ background: var(--background-color-gray); padding: 12px; border-radius: #{$border-radius-medium}; + .compare-simulations-header { font-weight: var(--font-weight-medium); } + .content { padding: 12px 0; font-size: var(--font-size-small); + span { font-size: inherit; color: var(--accent-color); } } + .input { display: flex; flex-direction: row-reverse; + input { width: fit-content; background: var(--accent-color); @@ -731,6 +766,7 @@ } } } + .global-properties-container, .analysis-main-container, .asset-properties-container, @@ -741,26 +777,32 @@ border-top: 1px solid var(--highlight-accent-color); border-bottom: 1px solid var(--highlight-accent-color); color: var(--accent-color); + .input-value { color: inherit; } } + .input-container { @include flex-center; + .remove-button { @include flex-center; height: 18px; width: 18px; margin-bottom: 6px; border-radius: 8px 0 0 8px; + &:hover { background-color: var(--accent-color); + path { stroke: var(--primary-color); } } } } + .optimize-button, .generate-report-button, .button-save { @@ -775,89 +817,109 @@ font-size: var(--font-size-small); margin-bottom: 8px; } + .split { height: 1px; background: var(--highlight-accent-color); margin: 8px; } + .custom-input-container { .header { @include flex-space-between; border: none; + .eyedrop-button { @include flex-center; } } + .inputs-container { @include flex-space-between; padding-bottom: 8px; + .input-container { padding: 0 12px; margin-top: 6px; gap: 6px; } } + .custom-input-label { white-space: nowrap; } } + .analysis-content-container { min-height: 50vh; max-height: 60vh; overflow-y: auto; + .dropdown-header-container, .dropdown-content-container { padding: 6px 12px; border-top: 1px solid var(--highlight-accent-color); } + .input-range-container { .input-container { width: 75%; } } } + .buttons-container { @include flex-space-between; padding: 12px; gap: 12px; + input { border: none; cursor: pointer; transition: all 0.2s; + &:hover { transform: translateY(-2px); box-shadow: #{$box-shadow-medium}; outline: 1px solid var(--accent-color); } } + .cancel { background: transparent; color: var(--accent-color); } + .submit { background: var(--accent-color); color: var(--highlight-accent-color); } } + .create-custom-analysis-container { margin: 6px; background: var(--background-color-gray); padding: 12px; border-radius: #{$border-radius-medium}; + .custom-analysis-header { font-weight: var(--font-weight-medium); } + .content { padding: 12px 0; font-size: var(--font-size-small); + span { font-size: inherit; color: var(--accent-color); } } + .input { display: flex; flex-direction: row-reverse; + input { width: fit-content; background: var(--accent-color); @@ -869,3 +931,119 @@ } } } + +.assets-container { + padding: 0 6px; + + .assets-wrapper { + position: relative; + margin: 8px 10px; + + h2 { + color: var(--text-color); + font-family: $large; + font-weight: $bold-weight; + } + + .categories-container { + width: 100%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + height: 100%; + gap: 3px; + padding: 10px 0; + + .category { + width: 117px; + height: 95px; + border-radius: 3.59px; + background-color: var(--background-color-gray); + padding: 8px; + padding-top: 12px; + font-weight: $bold-weight; + position: relative; + overflow: hidden; + + .category-name { + position: relative; + z-index: 3; + font-size: var(--font-size-large); + // -webkit-text-fill-color: transparent; + // -webkit-text-stroke: 1px black; + } + + &::after { + content: ""; + width: 50px; + height: 50px; + border-radius: 50%; + background-color: var(--circle-color, #000); + position: absolute; + top: 50%; + right: -10px; + transform: translate(0, -50%); + background: linear-gradient( + 144.19deg, + #f1e7cd 16.62%, + #fffaef 85.81% + ); + } + + .category-image { + position: absolute; + // top: 50%; + bottom: 0; + right: -10px; + transform: translate(0, 0%) scale(0.8); + z-index: 2; + height: 80%; + } + } + } + + .assets-container { + width: 100%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + height: 100%; + gap: 3px; + padding: 10px 0; + + .assets { + width: 117px; + height: 95px; + border-radius: 3.59px; + background-color: var(--background-color-gray); + padding: 8px; + padding-top: 12px; + font-weight: $medium-weight; + position: relative; + overflow: hidden; + + .asset-name { + position: relative; + z-index: 3; + font-size: var(--font-size-regular); + } + + .asset-image { + position: absolute; + top: 50%; + right: 5px; + transform: translate(0, -50%); + z-index: 2; + } + } + } + + .back-button { + position: absolute; + top: 0; + right: 0; + @include flex-center; + cursor: pointer; + } + } +} diff --git a/app/src/styles/main.scss b/app/src/styles/main.scss index 34c0074..9d4bde4 100644 --- a/app/src/styles/main.scss +++ b/app/src/styles/main.scss @@ -23,6 +23,7 @@ @use 'components/visualization/floating/common'; @use 'components/marketPlace/marketPlace'; @use 'components/simulation/simulation'; +@use 'components/menu/menu'; // layout @use 'layout/loading'; @@ -31,6 +32,7 @@ @use 'layout/toast'; // pages +@use 'pages/dashboard.scss'; @use 'pages/home'; @use 'pages/realTimeViz'; @use 'pages/userAuth'; \ No newline at end of file diff --git a/app/src/styles/pages/dashboard.scss b/app/src/styles/pages/dashboard.scss new file mode 100644 index 0000000..e5b07a4 --- /dev/null +++ b/app/src/styles/pages/dashboard.scss @@ -0,0 +1,221 @@ +@use "../abstracts/variables.scss" as *; +@use "../abstracts/mixins.scss" as *; + +.dashboard-main { + height: 100vh; + width: 100vw; + display: flex; + .side-pannel-container { + padding: 32px; + min-width: 240px; + height: 100vh; + display: flex; + flex-direction: column; + gap: 16px; + border-right: 1px solid var(--border-color); + .side-pannel-header { + @include flex-space-between; + .user-container { + @include flex-center; + gap: 6px; + .user-profile { + height: 32px; + width: 32px; + line-height: 32px; + text-align: center; + font-weight: var(--font-weight-medium); + background: var(--accent-color); + color: var(--primary-color); + border-radius: #{$border-radius-circle}; + } + .user-name { + color: var(--accent-color); + } + } + .notifications-container { + @include flex-center; + height: 24px; + width: 24px; + cursor: pointer; + } + } + .new-project-button { + padding: 12px 16px; + cursor: not-allowed; + color: var(--accent-color); + background-color: var(--background-color-secondary); + border-radius: #{$border-radius-large}; + } + .side-bar-content-container { + display: flex; + flex-direction: column; + justify-content: space-between; + height: 100%; + .side-bar-options-container { + .option-list { + display: flex; + align-items: center; + gap: 8px; + padding: 6px 10px; + margin: 4px 0; + border-radius: #{$border-radius-medium}; + &:hover { + background: var(--background-color-secondary); + } + } + .active { + color: var(--accent-color); + font-weight: var(--font-weight-medium); + background-color: var(--highlight-accent-color); + &:hover { + background-color: var(--highlight-accent-color); + } + } + } + } + } + .dashboard-home-container { + width: 100%; + .dashboard-navbar-container { + margin-top: 28px; + padding: 8px 34px 8px 12px; + @include flex-center; + .title { + text-transform: capitalize; + font-size: var(--font-size-large); + width: 100%; + } + .market-place-button { + @include flex-center; + gap: 6px; + padding: 8px 14px; + background: var(--accent-gradient-color); + white-space: nowrap; + border-radius: #{$border-radius-large}; + color: var(--primary-color); + } + .search-wrapper { + width: 400px; + } + } + .container { + margin: 22px 0; + width: 100%; + padding: 0 12px; + .header { + font-size: var(--font-size-large); + } + .cards-container { + display: flex; + flex-wrap: wrap; + position: relative; + width: 100%; + padding: 8px; + gap: 18px; + } + } + } +} + +.dashboard-card-container { + height: 242px; + width: calc((100% / 5) - 23px); + min-width: 260px; + position: relative; + border: 1px solid var(--border-color); + border-radius: #{$border-radius-large}; + overflow: hidden; + .preview-container { + height: 100%; + width: 100%; + img { + height: 100%; + width: 100%; + object-fit: cover; + vertical-align: top; + border: none; + outline: none; + } + } + .project-details-container { + @include flex-space-between; + position: absolute; + bottom: 0; + width: 100%; + padding: 8px 16px; + background: var(--primary-color); + border-radius: 10px; + .project-details { + .project-name { + margin-bottom: 2px; + } + .project-data { + color: var(--accent-color); + } + } + .users-list-container { + @include flex-center; + gap: 6px; + .user-profile { + height: 26px; + width: 26px; + line-height: 26px; + text-align: center; + background-color: var(--accent-color); + color: var(--primary-color); + border-radius: #{$border-radius-circle}; + } + } + } +} + +.market-place-banner-container { + width: 100%; + height: 230px; + overflow: hidden; + position: relative; + padding: 0 24px; + img { + height: 100%; + width: 100%; + object-fit: cover; + border-radius: 30px; + } + .hero-text { + position: absolute; + left: 52px; + bottom: 25px; + font-size: 48px; + font-family: #{$font-roboto}; + font-weight: 800; + color: #ffffff; + text-transform: uppercase; + } + .context { + position: absolute; + top: 20px; + right: 58px; + text-transform: uppercase; + font-size: 22px; + width: 300px; + color: #ffffff; + font-family: #{$font-roboto}; + } + .arrow-context { + position: absolute; + bottom: 27px; + right: 300px; + } + .explore-button { + position: absolute; + top: 95px; + right: 52px; + padding: 10px 20px; + text-transform: uppercase; + font-size: 24px; + border: 1px solid #ffffff; + color: #ffffff; + font-family: #{$font-roboto}; + cursor: pointer; + } +} diff --git a/app/src/styles/pages/realTimeViz.scss b/app/src/styles/pages/realTimeViz.scss index 020d6b7..69df460 100644 --- a/app/src/styles/pages/realTimeViz.scss +++ b/app/src/styles/pages/realTimeViz.scss @@ -15,6 +15,7 @@ border-radius: #{$border-radius-medium}; transition: all 0.2s; z-index: #{$z-index-default}; + .floating { width: 100%; max-width: 250px; @@ -27,6 +28,7 @@ position: absolute; z-index: 1000; } + .scene-container { overflow: hidden; } @@ -76,16 +78,19 @@ gap: 6px; border-radius: #{$border-radius-medium}; overflow-x: auto; + &::-webkit-scrollbar { display: none; } } + .no-zone { @include flex-center; gap: 4px; padding: 4px; color: var(--text-disabled); } + .zone { width: auto; background-color: var(--background-color); @@ -186,7 +191,7 @@ height: 25% !important; min-height: 150px; max-height: 100%; - border: 1px dotted #a9a9a9; + border: 1px dashed #a9a9a9; border-radius: 8px; box-shadow: 0px 2px 6px 0px rgba(60, 60, 67, 0.1); padding: 6px 0; @@ -206,8 +211,8 @@ .kebab-options { position: absolute; - top: 12px; - right: -100px; + top: 18px; + right: 5px; transform: translate(0px, 0); background-color: var(--background-color); z-index: 10; @@ -257,6 +262,10 @@ } } + .chart-container.notLinked { + border-color: red; + } + .close-btn { position: absolute; top: 5px; @@ -364,19 +373,24 @@ border: none; color: var(--background-color); border-radius: 4px; + .add-icon { @include flex-center; transition: rotate 0.2s; } + path { stroke: var(--primary-color); stroke-width: 2; } } + .active { background: #ffe3e0; + .add-icon { rotate: 45deg; + path { stroke: #f65648; stroke-width: 2; @@ -442,7 +456,7 @@ transform: translate(-0%, 0); h2 { - font-size: 12px; + font-size: var(--font-size-small); margin-bottom: 8px; color: #2b3344; } @@ -527,4 +541,4 @@ .zone.active { background-color: #007bff; color: white; -} +} \ No newline at end of file diff --git a/app/src/styles/pages/userAuth.scss b/app/src/styles/pages/userAuth.scss index fd4048c..1bf4c7e 100644 --- a/app/src/styles/pages/userAuth.scss +++ b/app/src/styles/pages/userAuth.scss @@ -10,7 +10,6 @@ color: var(--text-color); height: 100vh; background-color: var(--background-color); - background-color: #fcfdfd; position: relative; z-index: 1; .logo-icon { @@ -168,12 +167,7 @@ &::after { content: ""; position: absolute; - background: radial-gradient( - circle, - #bfe0f8 0%, - #e9ebff 46%, - #e2acff 100% - ); + background: var(--faint-gradient-color); height: 50vh; width: 50vw; top: 0;