From ddf521dc6ae830cc21d3534e603c18e033e5303c Mon Sep 17 00:00:00 2001 From: Vishnu Date: Fri, 22 Aug 2025 17:43:16 +0530 Subject: [PATCH] refactor: optimized contextmenu, style update, ui bug fixes --- app/src/components/footer/shortcutHelper.tsx | 16 +- .../components/icons/ExportCommonIcons.tsx | 488 +- .../properties/AssetProperties.tsx | 216 +- .../components/ui/inputs/RegularDropDown.tsx | 133 +- app/src/components/ui/list/List.tsx | 619 +-- app/src/components/ui/menu/contextMenu.tsx | 373 +- .../components/contextMenu/_contextMenu.scss | 120 +- app/src/styles/components/footer/footer.scss | 1 + app/src/styles/components/input.scss | 70 +- app/src/styles/components/logs/logs.scss | 3 + app/src/styles/layout/sidebar.scss | 4480 +++++++++-------- 11 files changed, 3471 insertions(+), 3048 deletions(-) diff --git a/app/src/components/footer/shortcutHelper.tsx b/app/src/components/footer/shortcutHelper.tsx index 405963e..afbaa0e 100644 --- a/app/src/components/footer/shortcutHelper.tsx +++ b/app/src/components/footer/shortcutHelper.tsx @@ -30,7 +30,11 @@ import { DuplicateInstanceIcon, PlayIcon, } from "../icons/ShortcutIcons"; -import { CloseIcon, EyeCloseIcon } from "../icons/ExportCommonIcons"; +import { + CloseIcon, + EyeCloseIcon, + PerformanceStatsIcon, +} from "../icons/ExportCommonIcons"; interface ShortcutItem { keys: string[]; @@ -76,8 +80,8 @@ const ShortcutHelper: React.FC = ({ }, { keys: ["CTRL", "+", "H"], - name: "Help", - description: "Open Help", + name: "Version History", + description: "Open Version History", icon: , }, { @@ -278,6 +282,12 @@ const ShortcutHelper: React.FC = ({ description: "Hide Simulation Player", icon: , }, + { + keys: ["F1"], + name: "Stats", + description: "Show Scene Stats", + icon: , + }, ], }, ]; diff --git a/app/src/components/icons/ExportCommonIcons.tsx b/app/src/components/icons/ExportCommonIcons.tsx index a042b36..00f7f22 100644 --- a/app/src/components/icons/ExportCommonIcons.tsx +++ b/app/src/components/icons/ExportCommonIcons.tsx @@ -1357,42 +1357,99 @@ export const GreenTickIcon = () => { ); }; - export const SuccessIcon = () => { return ( - - - + + + - - ) -} - + ); +}; export const AlertIcon = () => { return ( - - - + + + - - ) -} + ); +}; export const NavigationIcon = () => { return ( - - - - + + + + - - ) -} + ); +}; export const HangTagIcon = () => { return ( - + - + @@ -1400,140 +1457,363 @@ export const HangTagIcon = () => { - - ) -} + ); +}; export const DecalInfoIcon = () => { return ( - - - - + + + + - - ) -} - + ); +}; export const LayeringBottomIcon = () => { return ( - - - - + + + + - ) -} + ); +}; export const LayeringTopIcon = () => { return ( - - - - + + + + - - ) -} + ); +}; export const ValueUpdateIcon = () => { return ( - - - + + + - - - ) -} - + ); +}; export const ListTaskIcon = () => { return ( - - + + - ) -} + ); +}; export const LocationPinIcon = () => { return ( - - - + + + - ) -} + ); +}; export const ClockThreeIcon = () => { return ( - - + + - - ) -} + ); +}; export const SlectedTickIcon = () => { return ( - - - + + + - ) -} + ); +}; export const HourGlassIcon = () => { return ( - - + + - ) -} + ); +}; export const TargetIcon = () => { return ( - - + + - ) -} + ); +}; export const ForkLiftIcon = () => { return ( - + - - - - - + + + + + - - - - - + + + + + - + - - + + - + - - ) -} + ); +}; export const RightHalfFillCircleIcon = () => { return ( - - + + - ) -} \ No newline at end of file + ); +}; + +export const PerformanceStatsIcon = () => { + return ( + + + + ); +}; diff --git a/app/src/components/layout/sidebarRight/properties/AssetProperties.tsx b/app/src/components/layout/sidebarRight/properties/AssetProperties.tsx index 6607937..7d50298 100644 --- a/app/src/components/layout/sidebarRight/properties/AssetProperties.tsx +++ b/app/src/components/layout/sidebarRight/properties/AssetProperties.tsx @@ -4,130 +4,134 @@ import InputWithDropDown from "../../../ui/inputs/InputWithDropDown"; import { RemoveIcon } from "../../../icons/ExportCommonIcons"; import PositionInput from "../customInput/PositionInputs"; import RotationInput from "../customInput/RotationInput"; -import { useSelectedFloorItem, useObjectPosition, useObjectRotation } from "../../../../store/builder/store"; +import { + useSelectedFloorItem, + useObjectPosition, + useObjectRotation, +} from "../../../../store/builder/store"; import { useSceneContext } from "../../../../modules/scene/sceneContext"; import { useBuilderStore } from "../../../../store/builder/useBuilderStore"; interface UserData { - id: number; - label: string; - value: string; + id: number; + label: string; + value: string; } const AssetProperties: React.FC = () => { - const [userData, setUserData] = useState([]); - const { selectedFloorItem } = useSelectedFloorItem(); - const { objectPosition } = useObjectPosition(); - const { objectRotation } = useObjectRotation(); - const { assetStore } = useSceneContext(); - const { assets, setCurrentAnimation } = assetStore(); - const { loopAnimation } = useBuilderStore(); - const [hoveredIndex, setHoveredIndex] = useState(null); + const [userData, setUserData] = useState([]); + const { selectedFloorItem } = useSelectedFloorItem(); + const { objectPosition } = useObjectPosition(); + const { objectRotation } = useObjectRotation(); + const { assetStore } = useSceneContext(); + const { assets, setCurrentAnimation } = assetStore(); + const { loopAnimation } = useBuilderStore(); + const [hoveredIndex, setHoveredIndex] = useState(null); - const handleAddUserData = () => { - }; + const handleAddUserData = () => { + setUserData([]); + }; - const handleUserDataChange = (id: number, newValue: string) => { - }; + const handleUserDataChange = (id: number, newValue: string) => {}; - const handleRemoveUserData = (id: number) => { - }; + const handleRemoveUserData = (id: number) => {}; - const handleAnimationClick = (animation: string) => { - if (selectedFloorItem) { - setCurrentAnimation(selectedFloorItem.uuid, animation, true, loopAnimation, true); - } + const handleAnimationClick = (animation: string) => { + if (selectedFloorItem) { + setCurrentAnimation( + selectedFloorItem.uuid, + animation, + true, + loopAnimation, + true + ); } + }; - if (!selectedFloorItem) return null; + if (!selectedFloorItem) return null; - return ( -
- {/* Name */} -
{selectedFloorItem.userData.modelName}
-
- {objectPosition && - { }} - value1={parseFloat(objectPosition.x.toFixed(5))} - value2={parseFloat(objectPosition.z.toFixed(5))} - /> - } - {objectRotation && - { }} - value={parseFloat(objectRotation.y.toFixed(5))} - /> - } -
+ return ( +
+ {/* Name */} +
{selectedFloorItem.userData.modelName}
+
+ {objectPosition && ( + {}} + value1={parseFloat(objectPosition.x.toFixed(5))} + value2={parseFloat(objectPosition.z.toFixed(5))} + /> + )} + {objectRotation && ( + {}} + value={parseFloat(objectRotation.y.toFixed(5))} + /> + )} +
-
-
Render settings
- - -
+
Render settings
+
+ + +
-
-
User Data
- {userData.map((data) => ( -
- handleUserDataChange(data.id, newValue)} - /> -
handleRemoveUserData(data.id)} - > - -
-
- ))} - - {/* Add new user data */} -
- + Add -
-
-
- {selectedFloorItem.uuid &&
Animations
} - {assets.map((asset) => ( -
- {asset.modelUuid === selectedFloorItem.uuid && - asset.animations && - asset.animations.length > 0 && - asset.animations.map((animation, index) => ( -
-
handleAnimationClick(animation)} - onMouseEnter={() => setHoveredIndex(index)} - onMouseLeave={() => setHoveredIndex(null)} - style={{ - height: "20px", - width: "100%", - borderRadius: "5px", - background: - hoveredIndex === index - ? "#7b4cd3" - : "transparent", - }} - > - {animation.charAt(0).toUpperCase() + - animation.slice(1).toLowerCase()} -
-
- ))} -
- ))} +
+
User Data
+ {userData.map((data) => ( +
+ handleUserDataChange(data.id, newValue)} + /> +
handleRemoveUserData(data.id)} + > +
+
+ ))} + + {/* Add new user data */} +
+ + Add
- ); +
+
Animations
+
+ {assets.map((asset) => ( + <> + {asset.modelUuid === selectedFloorItem.uuid && + asset.animations && + asset.animations.length > 0 && + asset.animations.map((animation, index) => ( +
+
handleAnimationClick(animation)} + onMouseEnter={() => setHoveredIndex(index)} + onMouseLeave={() => setHoveredIndex(null)} + className="animations-list" + style={{ + background: + hoveredIndex === index + ? "#7b4cd3" + : "var(--background-color)", + }} + > + {animation.charAt(0).toUpperCase() + + animation.slice(1).toLowerCase()} +
+
+ ))} + + ))} +
+
+ ); }; export default AssetProperties; diff --git a/app/src/components/ui/inputs/RegularDropDown.tsx b/app/src/components/ui/inputs/RegularDropDown.tsx index f1be25c..b198ede 100644 --- a/app/src/components/ui/inputs/RegularDropDown.tsx +++ b/app/src/components/ui/inputs/RegularDropDown.tsx @@ -1,4 +1,5 @@ import React, { useState, useEffect, useRef } from "react"; +import { createPortal } from "react-dom"; interface DropdownProps { header: string; @@ -14,32 +15,35 @@ const RegularDropDown: React.FC = ({ options, onSelect, search = true, - onClick, - onChange, }) => { const [isOpen, setIsOpen] = useState(false); const [selectedOption, setSelectedOption] = useState(null); - const [searchTerm, setSearchTerm] = useState(""); // State to store search term - const [filteredOptions, setFilteredOptions] = useState(options); // State for filtered options - const dropdownRef = useRef(null); // Ref for the dropdown container + const [searchTerm, setSearchTerm] = useState(""); + const [filteredOptions, setFilteredOptions] = useState(options); + const dropdownRef = useRef(null); + const [position, setPosition] = useState<{ top: number; left: number; width: number }>({ + top: 0, + left: 0, + width: 0, + }); - // Reset selectedOption when the dropdown closes + // Reset when closed useEffect(() => { if (!isOpen) { setSelectedOption(null); - setSearchTerm(""); // Clear the search term when the dropdown closes - setFilteredOptions(options); // Reset filtered options when the dropdown closes + setSearchTerm(""); + setFilteredOptions(options); } }, [isOpen, options]); - // Reset selectedOption when the header prop changes + // Reset when header changes useEffect(() => { setSelectedOption(null); - setSearchTerm(""); // Reset search term if header changes - setFilteredOptions(options); // Reset options if header changes + setSearchTerm(""); + setFilteredOptions(options); }, [header, options]); - // Close dropdown if clicked outside + // Close if clicked outside useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if ( @@ -49,77 +53,88 @@ const RegularDropDown: React.FC = ({ setIsOpen(false); } }; - document.addEventListener("click", handleClickOutside); - - return () => { - document.removeEventListener("click", handleClickOutside); - }; + return () => document.removeEventListener("click", handleClickOutside); }, []); - // Toggle the dropdown - const toggleDropdown = () => { - setIsOpen((prev) => !prev); - }; + // Recalculate position when opening + useEffect(() => { + if (isOpen && dropdownRef.current) { + const rect = dropdownRef.current.getBoundingClientRect(); + setPosition({ + top: rect.bottom + window.scrollY, + left: rect.left + window.scrollX, + width: rect.width, + }); + } + }, [isOpen]); + + const toggleDropdown = () => setIsOpen((prev) => !prev); - // Handle option selection const handleOptionClick = (option: string) => { setSelectedOption(option); onSelect(option); setIsOpen(false); }; - // Handle search input change const handleSearchChange = (event: React.ChangeEvent) => { const term = event.target.value; setSearchTerm(term); - - // Filter options based on the search term - const filtered = options.filter((option) => - option.toLowerCase().includes(term.toLowerCase()) + setFilteredOptions( + options.filter((option) => + option.toLowerCase().includes(term.toLowerCase()) + ) ); - setFilteredOptions(filtered); }; return (
- {/* Dropdown Header */} + {/* Header */}
{selectedOption || header}
▾
- {/* Dropdown Options */} - {isOpen && ( -
- {/* Search Bar */} - {search && ( -
- -
- )} - - {/* Filtered Options */} - {filteredOptions.length > 0 ? ( - filteredOptions.map((option, index) => ( -
handleOptionClick(option)} - > - {option} + {/* Options rendered in portal */} + {isOpen && + createPortal( +
+ {search && ( +
+
- )) - ) : ( -
No options found
- )} -
- )} + )} + {filteredOptions.length > 0 ? ( + filteredOptions.map((option, index) => ( +
handleOptionClick(option)} + title={option} + > + {option} +
+ )) + ) : ( +
No options found
+ )} +
, + document.body + )}
); }; diff --git a/app/src/components/ui/list/List.tsx b/app/src/components/ui/list/List.tsx index 53f0af1..6792fa4 100644 --- a/app/src/components/ui/list/List.tsx +++ b/app/src/components/ui/list/List.tsx @@ -4,13 +4,13 @@ import RenameInput from "../inputs/RenameInput"; import { useSelectedZoneStore } from "../../../store/visualization/useZoneStore"; import { getZoneData } from "../../../services/visulization/zone/getZones"; import useModuleStore, { - useSubModuleStore, + useSubModuleStore, } from "../../../store/useModuleStore"; import { - ArrowIcon, - EyeIcon, - LockIcon, - RemoveIcon, + ArrowIcon, + EyeIcon, + LockIcon, + RemoveIcon, } from "../../icons/ExportCommonIcons"; import { useZoneAssetId } from "../../../store/builder/store"; import { zoneCameraUpdate } from "../../../services/visulization/zone/zoneCameraUpdation"; @@ -21,324 +21,347 @@ import { useSceneContext } from "../../../modules/scene/sceneContext"; import { useVersionContext } from "../../../modules/builder/version/versionContext"; interface Asset { - id: string; - name: string; - position?: [number, number, number]; // Proper 3D vector - rotation?: { x: number; y: number; z: number }; // Proper rotation format + id: string; + name: string; + position?: [number, number, number]; // Proper 3D vector + rotation?: { x: number; y: number; z: number }; // Proper rotation format } interface ZoneItem { - id: string; - name: string; - assets?: Asset[]; - active?: boolean; + id: string; + name: string; + assets?: Asset[]; + active?: boolean; } interface ListProps { - items?: ZoneItem[]; - remove?: boolean; + items?: ZoneItem[]; + remove?: boolean; } const List: React.FC = ({ items = [], remove }) => { - const { activeModule } = useModuleStore(); - const { selectedZone, setSelectedZone } = useSelectedZoneStore(); - const { zoneAssetId, setZoneAssetId } = useZoneAssetId(); + const { activeModule } = useModuleStore(); + const { selectedZone, setSelectedZone } = useSelectedZoneStore(); + const { zoneAssetId, setZoneAssetId } = useZoneAssetId(); - const { setSubModule } = useSubModuleStore(); - const [expandedZones, setExpandedZones] = useState>({}); - const { projectId } = useParams(); - const { assetStore } = useSceneContext(); - const { setName } = assetStore(); - const { organization } = getUserData(); - const { selectedVersionStore } = useVersionContext(); - const { selectedVersion } = selectedVersionStore(); - const { zoneStore } = useSceneContext(); - const { zones, setZoneName } = zoneStore(); + const { setSubModule } = useSubModuleStore(); + const [expandedZones, setExpandedZones] = useState>( + {} + ); + const { projectId } = useParams(); + const { assetStore } = useSceneContext(); + const { setName } = assetStore(); + const { organization } = getUserData(); + const { selectedVersionStore } = useVersionContext(); + const { selectedVersion } = selectedVersionStore(); + const { zoneStore } = useSceneContext(); + const { zones, setZoneName } = zoneStore(); - useEffect(() => { - useSelectedZoneStore.getState().setSelectedZone({ + useEffect(() => { + useSelectedZoneStore.getState().setSelectedZone({ + zoneName: "", + activeSides: [], + panelOrder: [], + lockedPanels: [], + zoneUuid: "", + zoneViewPortTarget: [], + zoneViewPortPosition: [], + widgets: [], + }); + }, [activeModule]); + + useEffect(() => { + const expanded: Record = { "unassigned-zone": true }; + if (zones.length > 0) { + zones.forEach((zone: any) => { + expanded[zone.zoneUuid] = true; + }); + } + setExpandedZones(expanded); + // eslint-disable-next-line + }, [zones.length]); + + const toggleZoneExpansion = (zoneUuid: string) => { + setExpandedZones((prev) => ({ + ...prev, + [zoneUuid]: !prev[zoneUuid], + })); + }; + + async function handleSelectZone(id: string) { + try { + if (selectedZone?.zoneUuid === id || id === "unassigned-zone") { + return; + } + + setSubModule("zoneProperties"); + + let response = await getZoneData( + id, + organization, + projectId, + selectedVersion?.versionId || "" + ); + + if (!response) return; + + setSelectedZone({ + zoneName: response?.zoneName, + activeSides: response?.activeSides ?? [], + panelOrder: response?.panelOrder ?? [], + lockedPanels: response?.lockedPanels ?? [], + widgets: response?.widgets ?? [], + zoneUuid: response?.zoneUuid, + zoneViewPortTarget: response?.viewPortTarget ?? [], + zoneViewPortPosition: response?.viewPortPosition ?? [], + }); + } catch (error) { + echo.error("Failed to select zone"); + } + } + + function handleAssetClick(asset: Asset) { + setZoneAssetId(asset); + } + + async function handleZoneNameChange(newName: string) { + const isDuplicate = zones.some( + (zone: any) => + zone.zoneName?.trim().toLowerCase() === newName?.trim().toLowerCase() && + zone.zoneUuid !== selectedZone.zoneUuid + ); + + if (isDuplicate) { + alert("Zone name already exists. Please choose a different name."); + return; // DO NOT update state + } + const zonesdata = { + zoneUuid: selectedZone.zoneUuid, + zoneName: newName, + }; + const response = await zoneCameraUpdate( + zonesdata, + organization, + projectId, + selectedVersion?.versionId || "" + ); + if (response.message === "zone updated") { + setSelectedZone((prev) => ({ ...prev, zoneName: newName })); + setZoneName(selectedZone.zoneUuid, newName); + } + } + + async function handleZoneAssetName(newName: string) { + if (zoneAssetId?.id) { + let response = await setAssetsApi({ + modelUuid: zoneAssetId.id, + modelName: newName, + projectId, + }); + // console.log("response: ", response); + + setName(zoneAssetId.id, response.modelName); + } + } + const checkZoneNameDuplicate = (name: string) => { + return zones.some( + (zone: any) => + zone.zoneName?.trim().toLowerCase() === name?.trim().toLowerCase() && + zone.zoneUuid !== selectedZone.zoneUuid + ); + }; + + useEffect(() => { + let drag = false; + let isLeftMouseDown = false; + + const contextClassNames = [ + "list-wrapper", + "zone-properties-container", + "list-container", + ]; + + const isOutsideClick = (target: EventTarget | null) => { + if (!(target instanceof HTMLElement)) return true; + return !contextClassNames.some((className) => + target.closest(`.${className}`) + ); + }; + + const onMouseDown = (evt: MouseEvent) => { + if (evt.button === 0) { + isLeftMouseDown = true; + drag = false; + } + }; + + const onMouseMove = () => { + if (isLeftMouseDown) { + drag = true; + } + }; + + const onMouseUp = (evt: MouseEvent) => { + if (evt.button === 0) { + isLeftMouseDown = false; + if (drag) return; + + if (isOutsideClick(evt.target)) { + // Clear selected zone + setSelectedZone({ + zoneUuid: "", zoneName: "", activeSides: [], panelOrder: [], lockedPanels: [], - zoneUuid: "", + widgets: [], zoneViewPortTarget: [], zoneViewPortPosition: [], - widgets: [], - }); - }, [activeModule]); - - useEffect(() => { - const expanded: Record = { "unassigned-zone": true }; - if (zones.length > 0) { - zones.forEach((zone: any) => { - expanded[zone.zoneUuid] = true; - }); + }); + setZoneAssetId({ + id: "", + name: "", + }); + setSubModule("properties"); } - setExpandedZones(expanded); - }, [zones.length]); - - const toggleZoneExpansion = (zoneUuid: string) => { - setExpandedZones((prev) => ({ - ...prev, - [zoneUuid]: !prev[zoneUuid], - })); + } }; - async function handleSelectZone(id: string) { - - try { - if (selectedZone?.zoneUuid === id || id === 'unassigned-zone') { - return; - } - - setSubModule("zoneProperties"); - - let response = await getZoneData( - id, - organization, - projectId, - selectedVersion?.versionId || "" - ); - - if (!response) return; - - setSelectedZone({ - zoneName: response?.zoneName, - activeSides: response?.activeSides ?? [], - panelOrder: response?.panelOrder ?? [], - lockedPanels: response?.lockedPanels ?? [], - widgets: response?.widgets ?? [], - zoneUuid: response?.zoneUuid, - zoneViewPortTarget: response?.viewPortTarget ?? [], - zoneViewPortPosition: response?.viewPortPosition ?? [], - }); - } catch (error) { - echo.error("Failed to select zone"); - } + if (selectedZone.zoneName! === "" && activeModule === "Builder") { + document.addEventListener("mousedown", onMouseDown); + document.addEventListener("mousemove", onMouseMove); + document.addEventListener("mouseup", onMouseUp); } - function handleAssetClick(asset: Asset) { - setZoneAssetId(asset); - } - - async function handleZoneNameChange(newName: string) { - const isDuplicate = zones.some( - (zone: any) => - zone.zoneName?.trim().toLowerCase() === newName?.trim().toLowerCase() && - zone.zoneUuid !== selectedZone.zoneUuid - ); - - if (isDuplicate) { - alert("Zone name already exists. Please choose a different name."); - return; // DO NOT update state - } - const zonesdata = { - zoneUuid: selectedZone.zoneUuid, - zoneName: newName, - }; - const response = await zoneCameraUpdate( - zonesdata, - organization, - projectId, - selectedVersion?.versionId || "" - ); - if (response.message === "zone updated") { - setSelectedZone((prev) => ({ ...prev, zoneName: newName })); - setZoneName(selectedZone.zoneUuid, newName); - } - } - - async function handleZoneAssetName(newName: string) { - if (zoneAssetId?.id) { - let response = await setAssetsApi({ - modelUuid: zoneAssetId.id, - modelName: newName, - projectId, - }); - // console.log("response: ", response); - - setName(zoneAssetId.id, response.modelName); - } - } - const checkZoneNameDuplicate = (name: string) => { - return zones.some( - (zone: any) => - zone.zoneName?.trim().toLowerCase() === name?.trim().toLowerCase() && - zone.zoneUuid !== selectedZone.zoneUuid - ); + return () => { + document.removeEventListener("mousedown", onMouseDown); + document.removeEventListener("mousemove", onMouseMove); + document.removeEventListener("mouseup", onMouseUp); }; + // eslint-disable-next-line + }, [selectedZone, activeModule]); - useEffect(() => { - let drag = false; - let isLeftMouseDown = false; - - const contextClassNames = [ - "list-wrapper", - "zone-properties-container", - "list-container", - ]; - - const isOutsideClick = (target: EventTarget | null) => { - if (!(target instanceof HTMLElement)) return true; - return !contextClassNames.some((className) => - target.closest(`.${className}`) - ); - }; - - const onMouseDown = (evt: MouseEvent) => { - if (evt.button === 0) { - isLeftMouseDown = true; - drag = false; - } - }; - - const onMouseMove = () => { - if (isLeftMouseDown) { - drag = true; - } - }; - - const onMouseUp = (evt: MouseEvent) => { - if (evt.button === 0) { - isLeftMouseDown = false; - if (drag) return; - - if (isOutsideClick(evt.target)) { - // Clear selected zone - setSelectedZone({ - zoneUuid: "", - zoneName: "", - activeSides: [], - panelOrder: [], - lockedPanels: [], - widgets: [], - zoneViewPortTarget: [], - zoneViewPortPosition: [], - }); - setZoneAssetId({ - id: "", - name: "", - }); - setSubModule("properties"); - } - } - }; - - if (selectedZone.zoneName! === "" && activeModule === "Builder") { - document.addEventListener("mousedown", onMouseDown); - document.addEventListener("mousemove", onMouseMove); - document.addEventListener("mouseup", onMouseUp); - } - - return () => { - document.removeEventListener("mousedown", onMouseDown); - document.removeEventListener("mousemove", onMouseMove); - document.removeEventListener("mouseup", onMouseUp); - }; - }, [selectedZone, activeModule]); - - return ( - <> - {items?.length > 0 ? ( -
    - {items?.map((item) => ( - -
  • { - handleSelectZone(item.id); - toggleZoneExpansion(item.id); - }} - > -
    -
    - -
    -
    -
    - -
    -
    - -
    - {remove && ( -
    - -
    - )} - {item.assets && item.assets.length > 0 && ( - - )} -
    -
    -
    • - {/* Nested assets list - only shown when expanded */} - {item.assets && - item.assets.length > 0 && - expandedZones[item.id] && ( -
      - {item.assets.map((asset) => ( -
    • -
      - -
      - - - {remove && ( - - )} -
      -
      -
      • - ))} -
    - )} -     - ))} -
- ) : ( -
-
No items to display
+ return ( + <> + {items?.length > 0 ? ( +
    + {items?.map((item) => ( + +
  • { + handleSelectZone(item.id); + toggleZoneExpansion(item.id); + }} + > +
    +
    + +
    +
    +
    + +
    +
    + +
    + {remove && ( +
    + +
    + )} + {item.assets && item.assets.length > 0 && ( + + )} +
    - )} - - ); +
    • + {/* Nested assets list - only shown when expanded */} + {item.assets && + item.assets.length > 0 && + expandedZones[item.id] && ( +
      + {item.assets.map((asset) => ( +
    • handleAssetClick(asset)} + > +
      + +
      + + + {remove && ( + + )} +
      +
      +
      • + ))} +
    + )} +     + ))} +
+ ) : ( +
+
No items to display
+
+ )} + + ); }; export default List; diff --git a/app/src/components/ui/menu/contextMenu.tsx b/app/src/components/ui/menu/contextMenu.tsx index 9069da8..db98c21 100644 --- a/app/src/components/ui/menu/contextMenu.tsx +++ b/app/src/components/ui/menu/contextMenu.tsx @@ -1,187 +1,216 @@ import React from "react"; -import { ArrayIcon, CopyIcon, DeleteIcon, DublicateIcon, FlipXAxisIcon, FlipZAxisIcon, FocusIcon, GroupIcon, ModifiersIcon, MoveIcon, PasteIcon, RenameIcon, RotateIcon, SubMenuIcon, TransformIcon } from "../../icons/ContextMenuIcons"; +import { + ArrayIcon, + CopyIcon, + DeleteIcon, + DublicateIcon, + FlipXAxisIcon, + FlipZAxisIcon, + FocusIcon, + GroupIcon, + ModifiersIcon, + MoveIcon, + PasteIcon, + RenameIcon, + RotateIcon, + SubMenuIcon, + TransformIcon, +} from "../../icons/ContextMenuIcons"; + +// Union of valid visibility keys +type VisibilityKey = + | "rename" + | "focus" + | "flipX" + | "flipZ" + | "move" + | "rotate" + | "duplicate" + | "copy" + | "paste" + | "modifier" + | "group" + | "array" + | "delete" + | "transform" // virtual key for submenu + | "groupArray"; // virtual key for submenu type ContextMenuProps = { - visibility: { - rename: boolean; - focus: boolean; - flipX: boolean; - flipZ: boolean; - move: boolean; - rotate: boolean; - duplicate: boolean; - copy: boolean; - paste: boolean; - modifier: boolean; - group: boolean; - array: boolean; - delete: boolean; - }; - onRename: () => void; - onFocus: () => void; - onFlipX: () => void; - onFlipZ: () => void; - onMove: () => void; - onRotate: () => void; - onDuplicate: () => void; - onCopy: () => void; - onPaste: () => void; - onGroup: () => void; - onArray: () => void; - onDelete: () => void; + visibility: Record< + Exclude, + boolean + >; + onRename: () => void; + onFocus: () => void; + onFlipX: () => void; + onFlipZ: () => void; + onMove: () => void; + onRotate: () => void; + onDuplicate: () => void; + onCopy: () => void; + onPaste: () => void; + onGroup: () => void; + onArray: () => void; + onDelete: () => void; +}; + +type MenuItem = { + key: VisibilityKey; + label: string; + icon?: React.ReactNode; + shortcut?: string; + onClick?: () => void; + submenuIcon?: React.ReactNode; + children?: MenuItem[]; }; const ContextMenu: React.FC = ({ - visibility, - onRename, - onFocus, - onFlipX, - onFlipZ, - onMove, - onRotate, - onDuplicate, - onCopy, - onPaste, - onGroup, - onArray, - onDelete, + visibility, + onRename, + onFocus, + onFlipX, + onFlipZ, + onMove, + onRotate, + onDuplicate, + onCopy, + onPaste, + onGroup, + onArray, + onDelete, }) => { + const items: MenuItem[] = [ + { + key: "rename", + label: "Rename", + icon: , + shortcut: "F2", + onClick: onRename, + }, + { + key: "focus", + label: "Focus", + icon: , + shortcut: "F", + onClick: onFocus, + }, + { + key: "flipX", + label: "Flip to X axis", + icon: , + onClick: onFlipX, + }, + { + key: "flipZ", + label: "Flip to Z axis", + icon: , + onClick: onFlipZ, + }, + { + key: "transform", + label: "Transform", + icon: , + submenuIcon: , + children: [ + { + key: "move", + label: "Move", + icon: , + shortcut: "G", + onClick: onMove, + }, + { + key: "rotate", + label: "Rotate", + icon: , + shortcut: "R", + onClick: onRotate, + }, + ], + }, + { + key: "duplicate", + label: "Duplicate", + icon: , + shortcut: "Ctrl + D", + onClick: onDuplicate, + }, + { + key: "copy", + label: "Copy Objects", + icon: , + shortcut: "Ctrl + C", + onClick: onCopy, + }, + { + key: "paste", + label: "Paste Objects", + icon: , + shortcut: "Ctrl + V", + onClick: onPaste, + }, + { key: "modifier", label: "Modifiers", icon: }, + { + key: "groupArray", + label: "Group / Array", + children: [ + { + key: "group", + label: "Group", + icon: , + shortcut: "Ctrl + G", + onClick: onGroup, + }, + { key: "array", label: "Array", icon: , onClick: onArray }, + ], + }, + { + key: "delete", + label: "Delete", + icon: , + shortcut: "X", + onClick: onDelete, + }, + ]; + const renderItem = (item: MenuItem): React.ReactNode => { + if (item.children) { + const children = item.children.filter( + (child) => visibility[child.key as keyof typeof visibility] + ); + if (!children.length) return null; + return ( +
+ +
{children.map(renderItem)}
+
+ ); + } + + if (!visibility[item.key as keyof typeof visibility]) return null; return ( -
- {visibility.rename && ( -
- - F2 -
- )} - {visibility.focus && ( -
- - F -
- )} - {visibility.flipX && ( -
- -
- )} - {visibility.flipZ && ( -
- -
- )} - {(visibility.move || visibility.rotate) && ( -
- -
-
- {visibility.move && ( -
- - G -
- )} - {visibility.rotate && ( -
- - R -
- )} -
-
- )} - {visibility.duplicate && ( -
- - Ctrl + D -
- )} - {visibility.copy && ( -
- - Ctrl + C -
- )} - {visibility.paste && ( -
- - Ctrl + V -
- )} - {visibility.modifier && ( -
-
- -
- )} - {(visibility.group || visibility.array) && ( -
- -
- {visibility.group && ( -
- - Ctrl + G -
- )} - {visibility.array && ( -
- -
- )} -
-
- )} - {visibility.delete && ( -
- - X -
- )} -
+
+ + {item.shortcut && {item.shortcut}} +
); + }; + + return
{items.map(renderItem)}
; }; export default ContextMenu; diff --git a/app/src/styles/components/contextMenu/_contextMenu.scss b/app/src/styles/components/contextMenu/_contextMenu.scss index 1b52e4b..3a812a8 100644 --- a/app/src/styles/components/contextMenu/_contextMenu.scss +++ b/app/src/styles/components/contextMenu/_contextMenu.scss @@ -2,61 +2,75 @@ @use "../../abstracts/mixins" as *; .context-menu { - position: absolute; - top: 0; - left: 0; - background: var(--background-color); - backdrop-filter: blur(50px); - color: var(--text-button-color); - box-shadow: var(--box-shadow-light); - border-radius: 6px; - z-index: 1000; - min-width: 200px; - padding: 4px; + position: absolute; + top: 0; + left: 0; + background: var(--background-color); + backdrop-filter: blur(50px); + color: var(--text-button-color); + box-shadow: var(--box-shadow-light); + border-radius: 10px; + z-index: 1000; + min-width: 200px; + padding: 4px; + display: flex; + flex-direction: column; + gap: 2px; + + .menuItem { + position: relative; display: flex; - flex-direction: column; - gap: 2px; + justify-content: space-between; + cursor: pointer; + .submenu { + display: none; + min-width: 178px; + position: absolute; + top: 0; + left: 100%; // place directly beside - .menuItem { - position: relative; - display: flex; - justify-content: space-between; - padding: 6px 8px; - border-radius: 10px; - cursor: pointer; - - .submenu { - display: none; - min-width: 178px; - position: absolute; - top: 0; - left: 100%; // place directly beside - - background: var(--background-color); - backdrop-filter: blur(50px); - color: var(--text-button-color); - box-shadow: var(--box-shadow-light); - - padding: 4px; - border-radius: 6px; - z-index: 1000; - } - - .button { - display: flex; - gap: 6px; - } - - // Keep submenu open while hovering parent OR submenu - &:hover .submenu, - .submenu:hover { - display: block; - } - - &:hover { - background-color: var(--background-color-button); - } + background: var(--background-color); + backdrop-filter: blur(50px); + color: var(--text-button-color); + box-shadow: var(--box-shadow-light); + padding: 4px; + border-radius: 6px; + z-index: 1000; + } + .value { + display: flex; + } + .button { + display: flex; + gap: 6px; + padding: 5px 8px; + width: 100%; + border-radius: 10px; + &:hover { + color: var(--text-button-color); + background-color: var(--background-color-button); + } + } + .button.delete { + &:hover { + background-color: #e02e16; + } + } + .button.more { + justify-content: space-between; } + .shortcut { + position: absolute; + right: 8px; + top: 6px; + pointer-events: none; + } -} \ No newline at end of file + // Keep submenu open while hovering parent OR submenu + &:hover .submenu, + .submenu:hover { + display: block; + } + } +} diff --git a/app/src/styles/components/footer/footer.scss b/app/src/styles/components/footer/footer.scss index 7bf951a..152a39f 100644 --- a/app/src/styles/components/footer/footer.scss +++ b/app/src/styles/components/footer/footer.scss @@ -86,6 +86,7 @@ height: 100%; color: var(--text-color); gap: 6px; + cursor: pointer; } .logs-detail { diff --git a/app/src/styles/components/input.scss b/app/src/styles/components/input.scss index a370d56..e628dcb 100644 --- a/app/src/styles/components/input.scss +++ b/app/src/styles/components/input.scss @@ -231,43 +231,49 @@ input[type="number"] { justify-content: space-between; cursor: pointer; border-radius: #{$border-radius-large}; - } - - .dropdown-options { - position: absolute; - width: 100%; - background: var(--background-color); - border: 1px solid var(--border-color); - border-radius: #{$border-radius-large}; - z-index: 10; - max-height: 200px; - overflow-y: auto; - left: 0; - top: 110%; - padding: 4px; - backdrop-filter: blur(8px); - - .dropdown-search { - margin-bottom: 4px; + .key{ + width: calc(100% - 18px); + overflow: hidden; + text-overflow: ellipsis; } - - .option { - padding: 2px 4px; - cursor: pointer; - flex-direction: row !important; - border-radius: #{$border-radius-medium}; - - &:hover { - color: var(--highlight-text-color); - background: var(--highlight-accent-color); - } - } - } - + } .icon { height: auto; } } +.dropdown-options { + position: absolute; + width: 100%; + background: var(--background-color); + border: 1px solid var(--border-color); + border-radius: #{$border-radius-large}; + z-index: 10; + max-height: 200px; + overflow-y: auto; + left: 0; + top: 110%; + padding: 4px; + backdrop-filter: blur(8px); + + .dropdown-search { + margin-bottom: 4px; + } + + .option { + padding: 2px 4px; + cursor: pointer; + flex-direction: row !important; + border-radius: #{$border-radius-medium}; + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + + &:hover { + color: var(--highlight-text-color); + background: var(--highlight-accent-color); + } + } +} .input.default { width: 100%; diff --git a/app/src/styles/components/logs/logs.scss b/app/src/styles/components/logs/logs.scss index ab41771..41c6f70 100644 --- a/app/src/styles/components/logs/logs.scss +++ b/app/src/styles/components/logs/logs.scss @@ -144,4 +144,7 @@ .log-nav-container{ margin-bottom: 10px; } + .log-entry-wrapper{ + height: calc(100% - 50px); + } } \ No newline at end of file diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss index ef5aaee..255e7f7 100644 --- a/app/src/styles/layout/sidebar.scss +++ b/app/src/styles/layout/sidebar.scss @@ -2,2409 +2,2447 @@ @use "../abstracts/mixins" as *; .toggle-sidebar-ui-button { - @include flex-center; - cursor: pointer; - height: 32px; - width: 32px; - min-height: 32px; - min-width: 32px; - border-radius: #{$border-radius-large}; - position: relative; + @include flex-center; + cursor: pointer; + height: 32px; + width: 32px; + min-height: 32px; + min-width: 32px; + border-radius: #{$border-radius-large}; + position: relative; + + .tooltip { + top: 6px; + right: -168px; + + &::after { + left: 0px; + bottom: 50%; + } + } + + &:hover { + outline: 1px solid var(--border-color); + outline-offset: -1px; + background: var(--background-color-solid); .tooltip { + opacity: 1; + transform: translateX(2px); + } + } +} + +.toggle-sidebar-ui-button.active { + background: var(--background-color-accent); + + rect { + stroke: var(--icon-default-color-active); + } + + circle { + fill: var(--icon-default-color-active); + } + + &:hover { + filter: saturate(0.8); + background: var(--background-color-accent); + } +} + +.sidebar-left-wrapper { + width: 270px; + position: fixed; + top: 22px; + left: 8px; + background: var(--background-color); + backdrop-filter: blur(20px); + border-radius: #{$border-radius-extra-large}; + outline: 1px solid var(--border-color); + box-shadow: #{$box-shadow-medium}; + z-index: #{$z-index-tools}; + + .header-container { + @include flex-space-between; + padding: 10px; + width: 100%; + + .header-content { + @include flex-center; + width: calc(100% - 34px); + + .logo-container { + @include flex-center; + cursor: pointer; + } + + .header-title { + padding: 0 8px; + width: 100%; + max-width: calc(100% - 32px); + } + } + + .toggle-sidebar-ui-button { + .tooltip { top: 6px; right: -168px; &::after { - left: 0px; - bottom: 50%; + left: 0px; + bottom: 50%; } + } } + } - &:hover { - outline: 1px solid var(--border-color); - outline-offset: -1px; - background: var(--background-color-solid); + .sidebar-left-container { + min-height: 50vh; + max-width: 100%; + padding-bottom: 4px; + position: relative; + display: flex; + flex-direction: column; - .tooltip { - opacity: 1; - transform: translateX(2px); - } - } -} + .sidebar-left-content-container { + position: relative; -.toggle-sidebar-ui-button.active { - background: var(--background-color-accent); - - rect { - stroke: var(--icon-default-color-active); - } - - circle { - fill: var(--icon-default-color-active); - } - - &:hover { - filter: saturate(0.8); - background: var(--background-color-accent); - } -} - -.sidebar-left-wrapper { - width: 270px; - position: fixed; - top: 22px; - left: 8px; - background: var(--background-color); - backdrop-filter: blur(20px); - border-radius: #{$border-radius-extra-large}; - outline: 1px solid var(--border-color); - box-shadow: #{$box-shadow-medium}; - z-index: #{$z-index-tools}; - - .header-container { - @include flex-space-between; - padding: 10px; - width: 100%; - - .header-content { - @include flex-center; - width: calc(100% - 34px); - - .logo-container { - @include flex-center; - cursor: pointer; - } - - .header-title { - padding: 0 8px; - width: 100%; - max-width: calc(100% - 32px); - } - } - - .toggle-sidebar-ui-button { - .tooltip { - top: 6px; - right: -168px; - - &::after { - left: 0px; - bottom: 50%; - } - } - } - } - - .sidebar-left-container { - min-height: 50vh; - max-width: 100%; - padding-bottom: 4px; - position: relative; + .template-list { display: flex; flex-direction: column; + gap: 1rem; + padding: 1rem; + min-height: 50vh; + max-height: 60vh; + } - .sidebar-left-content-container { - position: relative; + .template-item { + border: 1px solid #e0e0e0; + border-radius: #{$border-radius-medium}; - .template-list { + padding: 1rem; + transition: box-shadow 0.3s ease; + } + + .template-image-container { + position: relative; + padding-bottom: 56.25%; // 16:9 aspect ratio + } + + .template-image { + position: absolute; + width: 100%; + height: 100%; + object-fit: contain; + border-radius: #{$border-radius-small}; + + cursor: pointer; + transition: transform 0.3s ease; + } + + .template-details { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 0.5rem; + } + + .template-name { + cursor: pointer; + font-weight: 500; + } + + .delete-button { + padding: 0.25rem 0.5rem; + background: #ff4444; + color: white; + border: none; + border-radius: #{$border-radius-small}; + + cursor: pointer; + transition: opacity 0.3s ease; + } + + .no-templates { + text-align: center; + color: #666; + grid-column: 1 / -1; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 6px; + + h2 { + font-weight: 600; + } + } + + .widgets-wrapper { + min-height: 50vh; + max-height: 60vh; + overflow: auto; + } + + .widget-left-sideBar { + .widget2D { + overflow: auto; + + .chart-container { + display: flex; + flex-direction: column; + gap: 8px; + padding: 6px; + flex-wrap: nowrap; + overflow: auto; + + .chart { + min-height: 170px; + background: var(--background-color); + border: 1.23px solid var(--border-color); + box-shadow: 0px 4.91px 4.91px 0px #0000001c; + border-radius: $border-radius-medium; + padding: 12px 6px; + } + + .progressBar { + height: auto !important; + padding: 12px 10px 41px 10px; + display: flex; + flex-direction: column; + gap: 16px; + + .header { display: flex; - flex-direction: column; - gap: 1rem; - padding: 1rem; - min-height: 50vh; - max-height: 60vh; - } + justify-content: start; + align-items: center; + border-bottom: none; + } - .template-item { - border: 1px solid #e0e0e0; + .stock { + padding: 13px 5px; + background: var(--background-color-secondary); border-radius: #{$border-radius-medium}; - - padding: 1rem; - transition: box-shadow 0.3s ease; - } - - .template-image-container { - position: relative; - padding-bottom: 56.25%; // 16:9 aspect ratio - } - - .template-image { - position: absolute; - width: 100%; - height: 100%; - object-fit: contain; - border-radius: #{$border-radius-small}; - - cursor: pointer; - transition: transform 0.3s ease; - } - - .template-details { + box-shadow: var(--box-shadow-light); display: flex; justify-content: space-between; - align-items: center; - margin-top: 0.5rem; - } - .template-name { - cursor: pointer; - font-weight: 500; - } - - .delete-button { - padding: 0.25rem 0.5rem; - background: #ff4444; - color: white; - border: none; - border-radius: #{$border-radius-small}; - - cursor: pointer; - transition: opacity 0.3s ease; - } - - .no-templates { - text-align: center; - color: #666; - grid-column: 1 / -1; - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 6px; - - h2 { - font-weight: 600; - } - } - - .widgets-wrapper { - min-height: 50vh; - max-height: 60vh; - overflow: auto; - } - - .widget-left-sideBar { - .widget2D { - overflow: auto; - - .chart-container { - display: flex; - flex-direction: column; - gap: 8px; - padding: 6px; - flex-wrap: nowrap; - overflow: auto; - - .chart { - min-height: 170px; - background: var(--background-color); - border: 1.23px solid var(--border-color); - box-shadow: 0px 4.91px 4.91px 0px #0000001c; - border-radius: $border-radius-medium; - padding: 12px 6px; - } - - .progressBar { - height: auto !important; - padding: 12px 10px 41px 10px; - display: flex; - flex-direction: column; - gap: 16px; - - .header { - display: flex; - justify-content: start; - align-items: center; - border-bottom: none; - } - - .stock { - padding: 13px 5px; - background: var(--background-color-secondary); - border-radius: #{$border-radius-medium}; - box-shadow: var(--box-shadow-light); - display: flex; - justify-content: space-between; - - .stock-item { - .stockValues { - display: flex; - flex-direction: row-reverse; - align-items: flex-end; - gap: 3px; - - .value { - color: var(--accent-color); - font-size: var(--font-size-large); - } - } - - .stock-description { - font-size: var(--font-size-small); - } - } - } - } - } - } - - .widget3D { + .stock-item { + .stockValues { display: flex; - flex-direction: column; - gap: 6px; - padding: 6px; + flex-direction: row-reverse; + align-items: flex-end; + gap: 3px; - .widget-item { - height: 170px; - background: var(--background-color); - border: 1.23px solid var(--border-color); - box-shadow: 0px 4.91px 4.91px 0px #0000001c; - border-radius: $border-radius-medium; - padding: 12px 6px; - - .widget-image { - width: 100%; - height: 90%; - object-fit: contain; - } + .value { + color: var(--accent-color); + font-size: var(--font-size-large); } + } + + .stock-description { + font-size: var(--font-size-small); + } } + } } + } } - .outline-container { - height: 100%; + .widget3D { + display: flex; + flex-direction: column; + gap: 6px; + padding: 6px; - .outline-content-container { - position: relative; - height: 100%; - padding: 8px; + .widget-item { + height: 170px; + background: var(--background-color); + border: 1.23px solid var(--border-color); + box-shadow: 0px 4.91px 4.91px 0px #0000001c; + border-radius: $border-radius-medium; + padding: 12px 6px; - .overflow { - height: calc(100% - 16px); - max-height: 46vh; - overflow: auto; - margin: 0; - } + .widget-image { + width: 100%; + height: 90%; + object-fit: contain; } + } } + } } + + .outline-container { + height: 100%; + + .outline-content-container { + position: relative; + height: 100%; + padding: 8px; + + .overflow { + height: calc(100% - 16px); + max-height: 46vh; + overflow: auto; + margin: 0; + } + } + } + } } .sidebar-right-wrapper { - width: 320px; - position: fixed; - top: 22px; - right: 8px; - background: var(--background-color); - backdrop-filter: blur(20px); - border-radius: #{$border-radius-extra-large}; - outline: 1px solid var(--border-color); - box-shadow: #{$box-shadow-medium}; - z-index: #{$z-index-tools}; + width: 320px; + position: fixed; + top: 22px; + right: 8px; + background: var(--background-color); + backdrop-filter: blur(20px); + border-radius: #{$border-radius-extra-large}; + outline: 1px solid var(--border-color); + box-shadow: #{$box-shadow-medium}; + z-index: #{$z-index-tools}; - .header-container { - @include flex-space-between; - padding: 10px; - width: 100%; - gap: 8px; - height: 52px; + .header-container { + @include flex-space-between; + padding: 10px; + width: 100%; + gap: 8px; + height: 52px; - .options-container { - @include flex-center; - gap: 8px; + .options-container { + @include flex-center; + gap: 8px; - .share-button { - padding: 4px 12px; - color: var(--text-button-color); - background: var(--background-color-button); - font-weight: var(--font-weight-regular); - border-radius: #{$border-radius-large}; - cursor: pointer; - } + .share-button { + padding: 4px 12px; + color: var(--text-button-color); + background: var(--background-color-button); + font-weight: var(--font-weight-regular); + border-radius: #{$border-radius-large}; + cursor: pointer; + } - .app-docker-button { - @include flex-center; - } - } - - .split { - height: 20px; - min-width: 1px; - background: var(--text-disabled); - } - - .users-container { - width: 100%; - @include flex-space-between; - - .user-profile { - @include flex-center; - height: 26px; - width: 26px; - min-height: 26px; - min-width: 26px; - border-radius: #{$border-radius-circle}; - - font-weight: var(--font-weight-bold); - color: white; - text-transform: capitalize; - } - - .guest-users-container { - display: flex; - width: 100%; - justify-content: flex-end; - - .other-guest { - @include flex-center; - height: 26px; - width: 26px; - min-height: 26px; - min-width: 26px; - border-radius: #{$border-radius-circle}; - - background: var(--highlight-accent-color); - font-weight: var(--font-weight-bold); - color: var(--accent-color); - outline: 1px solid var(--accent-color); - outline-offset: -1px; - } - } - - .user-profile-container { - display: flex; - - .user-profile { - background: var(--background-color-accent); - color: var(--text-button-color); - } - - .user-organization { - height: 26px; - width: 52px; - max-width: 52px; - border-radius: #{$border-radius-extra-large}; - - overflow: hidden; - margin-left: 2px; - - img { - height: 100%; - width: 100%; - object-fit: cover; - vertical-align: top; - } - } - } - } + .app-docker-button { + @include flex-center; + } } - .sidebar-actions-container { - position: absolute; - left: -40px; - background: transparent; - overflow: visible; + .split { + height: 20px; + min-width: 1px; + background: var(--text-disabled); + } + + .users-container { + width: 100%; + @include flex-space-between; + + .user-profile { + @include flex-center; + height: 26px; + width: 26px; + min-height: 26px; + min-width: 26px; + border-radius: #{$border-radius-circle}; + + font-weight: var(--font-weight-bold); + color: white; + text-transform: capitalize; + } + + .guest-users-container { + display: flex; + width: 100%; + justify-content: flex-end; + + .other-guest { + @include flex-center; + height: 26px; + width: 26px; + min-height: 26px; + min-width: 26px; + border-radius: #{$border-radius-circle}; + + background: var(--highlight-accent-color); + font-weight: var(--font-weight-bold); + color: var(--accent-color); + outline: 1px solid var(--accent-color); + outline-offset: -1px; + } + } + + .user-profile-container { + display: flex; + + .user-profile { + background: var(--background-color-accent); + color: var(--text-button-color); + } + + .user-organization { + height: 26px; + width: 52px; + max-width: 52px; + border-radius: #{$border-radius-extra-large}; + + overflow: hidden; + margin-left: 2px; + + img { + height: 100%; + width: 100%; + object-fit: cover; + vertical-align: top; + } + } + } + } + } + + .sidebar-actions-container { + position: absolute; + left: -40px; + background: transparent; + overflow: visible; + + .tooltip { + top: 6px; + right: calc(100% + 6px); + + &::after { + left: 100%; + bottom: 50%; + } + } + + .sidebar-action-list { + margin-bottom: 12px; + @include flex-center; + height: 34px; + width: 34px; + border-radius: #{$border-radius-circle}; + background: var(--background-color-solid-gradient); + backdrop-filter: blur(12px); + outline: 1px solid var(--border-color); + outline-offset: -1px; + transition: all 0.2s; + + &:hover { + outline-color: var(--border-color-accent); + + svg { + transition: all 0.2s; + scale: 1.1; + } .tooltip { - top: 6px; - right: calc(100% + 6px); - - &::after { - left: 100%; - bottom: 50%; - } - } - - .sidebar-action-list { - margin-bottom: 12px; - @include flex-center; - height: 34px; - width: 34px; - border-radius: #{$border-radius-circle}; - background: var(--background-color-solid-gradient); - backdrop-filter: blur(12px); - outline: 1px solid var(--border-color); - outline-offset: -1px; - transition: all 0.2s; - - &:hover { - outline-color: var(--border-color-accent); - - svg { - transition: all 0.2s; - scale: 1.1; - } - - .tooltip { - opacity: 1; - transform: translateX(-2px); - } - } - } - - .active { - background: var(--background-color-accent); - outline: none; - - &:hover { - svg { - scale: 1; - } - - background: var(--background-color-accent); - } + opacity: 1; + transform: translateX(-2px); } + } } - .sidebar-right-container { - min-height: 50vh; - padding: 8px; - position: relative; - overflow: auto; + .active { + background: var(--background-color-accent); + outline: none; - .sidebar-right-content-container { - height: calc(100% - 36px); - position: relative; - width: 304px; - - .decal-transformation-container { - display: flex; - flex-direction: column; - gap: 4px; - - .transformation-wrapper { - display: flex; - align-items: center; - justify-content: space-between; - padding: 6px 12px; - - .header { - flex: 1; - text-transform: capitalize; - } - - .input-wrapppers { - display: flex; - align-items: center; - gap: 6px; - flex: 1.5; - - svg { - stroke: #CCACFF; - } - - .icon { - display: flex; - justify-content: center; - align-items: center; - } - - input { - min-width: 43px; - } - } - - .layers { - display: flex; - gap: 6px; - align-items: center; - - .icon { - display: flex; - justify-content: center; - align-items: center; - outline: 1px solid var(--border-color); - padding: 4px 16px; - width: 50px; - border-radius: 100px; - } - } - } - - .opacity { - input { - min-width: 190px !important; - } - } - - .preview { - width: 100%; - height: 150px; - border-radius: 20px; - outline: 1px solid var(--border-color); - position: relative; - - img { - width: 100%; - height: 100%; - object-fit: contain; - } - - .replace-btn { - background-color: #6F42C1; - border-radius: 100px; - color: #FFFFFF; - padding: 4px 16px; - width: fit-content; - cursor: pointer; - font-size: 12px; - text-transform: capitalize; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - } - } - } - - .version-history-container { - max-height: calc(62vh - 12px); - display: flex; - flex-direction: column; - padding: 0 8px; - gap: 10px; - - .version-history-header { - display: flex; - justify-content: space-between; - align-items: center; - - .version-history-icons { - display: flex; - align-items: center; - gap: 6px; - - .add-icon { - transform: scale(1.1); - } - - .kebab-icon { - display: flex; - transform: rotate(90deg) scale(0.8); - } - - .close-icon { - transform: scale(1.5); - } - } - } - - .version-history-shortcut-info { - display: flex; - gap: 6px; - border: 1px solid var(--border-color); - - background: var(--background-color); - padding: 10px 8px; - border-radius: 13px; - - .info-icon { - width: 12px; - height: 12px; - display: flex; - justify-content: center; - align-items: center; - border-radius: 50%; - border: 1px solid var(--border-color); - padding: 4px; - font-size: 10px; - } - - .shortcut-text { - color: var(--text-disabled); - } - } - - .version-history-location { - display: flex; - align-items: center; - gap: 12px; - - .location-details { - display: flex; - flex-direction: column; - gap: 4px; - - .saved-history-count { - font-size: var(--font-size-tiny); - } - } - } - - .saved-versions-list { - padding-top: 16px; - display: flex; - flex-direction: column; - gap: 20px; - - .saved-version { - display: flex; - align-items: center; - gap: 12px; - - .version-name { - background: var(--background-color); - border: 1px solid var(--border-color); - color: var(--text-color); - border-radius: 13px; - padding: 4px 8px; - position: relative; - font-size: var(--font-size-small); - text-wrap: nowrap; - } - - &:not(:first-child) .version-name::after { - content: ""; - position: absolute; - top: -35px; - left: 50%; - transform: translateX(-50%); - width: 1px; - height: 32px; - background-color: var(--text-disabled); - } - - .version-details { - width: 100%; - display: flex; - justify-content: space-between; - align-items: center; - gap: 6px; - - .details { - display: flex; - flex-direction: column; - gap: 6px; - } - - .saved-by { - display: flex; - align-items: center; - gap: 6px; - - .user-profile { - background: var(--background-color-accent); - color: var(--text-button-color); - width: 20px; - height: 20px; - border-radius: 50%; - - display: flex; - justify-content: center; - align-items: center; - text-transform: uppercase; - } - - .user-name { - text-transform: capitalize; - } - } - - .timestamp { - .input-value { - color: var(--text-color); - text-align: start; - } - } - } - } - } - } - - .no-event-selected { - color: #666; - padding: 16px; - grid-column: 1 / -1; - border-radius: #{$border-radius-large}; - background: var(--background-color); - - .products-list { - padding-top: 1rem; - - .product-item { - text-align: start; - margin-top: 8px; - padding: 2px 0; - text-decoration: none; - display: flex; - flex-wrap: wrap; - gap: 6px; - - button { - width: fit-content; - position: relative; - @include flex-center; - gap: 4px; - background: var(--background-color); - padding: 8px 12px; - border-radius: #{$border-radius-extra-large}; - outline: 1px solid var(--border-color); - - &:hover { - background: var(--background-color-accent); - color: var(--text-button-color); - outline: none; - - path { - stroke: var(--text-button-color); - strokewidth: 1.3; - } - } - } - } - - .products-list-title { - text-align: start; - color: var(--accent-color); - font-size: var(--font-size-regular); - } - } - } + &:hover { + svg { + scale: 1; } + + background: var(--background-color-accent); + } } + } - .visualization-right-sideBar { - min-height: 50vh; - max-height: 60vh; + .sidebar-right-container { + min-height: 50vh; + padding: 8px; + position: relative; + overflow: auto; - .sidebar-right-content-container { - .dataSideBar { - .inputs-wrapper { - display: flex; - flex-direction: column; - gap: 6px; + .sidebar-right-content-container { + height: calc(100% - 36px); + position: relative; + width: 304px; - .datas { - .input-value { - padding: 5px 10px; - } + .decal-transformation-container { + display: flex; + flex-direction: column; + gap: 4px; - .input-value, - .rename-input { - margin-right: 24px; - width: 170px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - } - } + .transformation-wrapper { + display: flex; + align-items: center; + justify-content: space-between; + padding: 6px 12px; - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - gap: 12px; - padding: 10px 12px; + .header { + flex: 1; + text-transform: capitalize; + } - .datas { - display: flex; - align-items: center; - justify-content: space-between; - - .datas__class { - display: flex; - align-items: center; - gap: 12px; - - .multi-level-dropdown { - width: 170px; - - .dropdown-button { - display: flex; - justify-content: space-between; - gap: 6px; - } - - .disable { - cursor: not-allowed; - pointer-events: none; - /* Disables all mouse interactions */ - opacity: 0.5; - /* Optional: Makes the button look visually disabled */ - } - } - } - } - - .sideBarHeader { - color: var(--accent-color); - border-bottom: 1px solid var(--border-color); - padding-bottom: 6px; - } - - .selectedMain-container { - display: flex; - flex-direction: column; - gap: 6px; - border-bottom: 1px solid var(--border-color); - padding-bottom: 10px; - - .selectedMain { - display: flex; - align-items: center; - gap: 6px; - - main { - width: 35%; - white-space: nowrap; - /* Prevent wrapping */ - } - - .icon { - padding: 0; - cursor: pointer; - } - - button { - background: transparent; - box-shadow: none; - color: #5273eb; - padding: 6px; - font-size: var(--font-size-xlarge); - } - - .bulletPoint { - color: #5273eb; - font-size: var(--font-size-large); - } - - .regularDropdown-container { - width: 100%; - } - - &:first-child { - gap: 4px; - } - } - } - - .child { - width: 100%; - gap: 6px; - } - - .infoBox { - display: flex; - align-items: flex-start; - gap: 6px; - color: #444; - border-radius: #{$border-radius-medium}; - font-size: var(--font-weight-regular); - - .infoIcon { - padding: 0px 7px; - border-radius: #{$border-radius-circle}; - - border: 1px solid gray; - } - - p { - margin: 0; - } - } - } - - .design { - width: 100%; - display: flex; - flex-direction: column; - gap: 15px; - font-size: var(--font-weight-regular); - color: var(--text-color); - padding: 12px; - - .appearance-container, - .element-container { - background: var(--background-color); - backdrop-filter: blur(20px); - border-radius: 15px; - outline: 1px solid var(--border-color); - - padding: 10px; - - display: flex; - flex-direction: column; - gap: 12px; - - .header-container { - padding: 0; - height: auto; - } - - .appearance-style { - display: flex; - align-items: center; - justify-content: space-between; - flex-direction: column; - gap: 12px; - - .regularDropdown-container { - .dropdown-options { - width: 130%; - left: -15%; - } - - .dropdown-header { - gap: 12px; - } - } - - .color-wrapper, - .opacity-wrapper, - .blurEffect-wrapper, - .theme-wrapper { - width: 100%; - display: flex; - justify-content: space-between; - align-items: center; - flex-direction: column; - - .input-range-container { - width: 100%; - padding: 0; - } - } - - .theme-wrapper { - width: 100%; - display: flex; - flex-direction: row; - justify-content: space-between; - } - - .color-wrapper { - flex-direction: row; - - .value { - display: flex; - align-items: center; - - input { - width: 34px; - height: 24px; - border-radius: 12px; - padding: 0; - } - } - } - } - } - - .element-container { - padding: 8px; - - .display-element { - width: 100%; - height: 150px; - @include flex-center; - background: var(--background-color); - backdrop-filter: blur(20px); - border-radius: 5px; - outline: 1px solid var(--border-color); - } - - .name-wrapper, - .element-wrapper { - display: flex; - align-items: center; - justify-content: space-between; - - .value { - width: 60%; - } - } - } - } - - .reviewChart { - width: 100%; - height: 150px; - background: var(--background-color); - display: flex; - align-items: center; - } - - .optionsContainer { - display: flex; - flex-direction: column; - gap: 10px; - padding: 0 12px; - - .option { - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; - - .regularDropdown-container, - input { - width: 160px; - } - - &:last-child { - flex-direction: column; - - .header { - width: 100%; - display: flex; - justify-content: space-between; - } - - .colorDisplayer { - width: 100%; - display: flex; - justify-content: start; - align-items: center; - - input[type="color"] { - border: none; - outline: none; - background: none; - width: 24px; - height: 26px; - border-radius: #{$border-radius-small}; - padding: 0; - } - } - } - - span { - min-width: 100px; - } - } - } - } - } - - .machine-mechanics-container { - .machine-mechanics-header { - padding: 8px 12px; - border-top: 1px solid var(--border-color); - border-bottom: 1px solid var(--border-color); - color: var(--accent-color); - } - - .process-list-container { + .input-wrapppers { display: flex; align-items: center; - gap: 4px; - padding: 8px; - border-bottom: 1px solid var(--border-color); + gap: 6px; + flex: 1.5; - .label { - margin-right: 8px; + svg { + stroke: #ccacff; } - .add-new-process { - @include flex-center; - height: 24px; - min-width: 24px; - cursor: pointer; - background: var(--background-color-secondary); - border-radius: #{$border-radius-medium}; - - path { - stroke: var(--accent-color); - strokewidth: 1.5px; - } - - &:hover { - background: var(--accent-color); - - path { - stroke: var(--highlight-accent-color); - } - } + .icon { + display: flex; + justify-content: center; + align-items: center; } + + input { + min-width: 43px; + } + } + + .layers { + display: flex; + gap: 6px; + align-items: center; + + .icon { + display: flex; + justify-content: center; + align-items: center; + outline: 1px solid var(--border-color); + padding: 4px 16px; + width: 50px; + border-radius: 100px; + } + } } - } - .machine-mechanics-content-container, - .simulations-container, - .event-proprties-wrapper { - position: relative; - max-height: calc(62vh - (47px - 35px)); - width: 304px; - border-radius: #{$border-radius-large}; - overflow-x: hidden; + .opacity { + input { + min-width: 190px !important; + } + } - .header { - @include flex-space-between; - padding: 6px 12px; - padding-right: 6px; + .preview { + width: 100%; + height: 150px; + border-radius: 20px; + outline: 1px solid var(--border-color); + position: relative; + + img { + width: 100%; + height: 100%; + object-fit: contain; + } + + .replace-btn { + background-color: #6f42c1; + border-radius: 100px; + color: #ffffff; + padding: 4px 16px; + width: fit-content; + cursor: pointer; + font-size: 12px; text-transform: capitalize; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + } + } - .add-button { - @include flex-center; - padding: 4px 8px; - background: var(--background-color-button); - color: var(--text-button-color); - border-radius: #{$border-radius-large}; - cursor: pointer; - outline: none; - border: none; + .version-history-container { + max-height: calc(62vh - 12px); + display: flex; + flex-direction: column; + padding: 0 8px; + gap: 10px; - path { - stroke: var(--text-button-color); - } + .version-history-header { + display: flex; + justify-content: space-between; + align-items: center; - &:disabled { - background: var(--text-disabled); - } + .version-history-icons { + display: flex; + align-items: center; + gap: 0px; + + .add-icon, + .kebab-icon, + .close-icon { + height: 24px; + min-width: 24px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + border-radius: 8px; + &:hover { + background: var(--background-color); + outline: 1px solid #aaaaaa29; + } } + + .add-icon { + svg { + transform: scale(1.1); + } + } + + .kebab-icon { + display: flex; + svg { + transform: rotate(90deg) scale(0.8); + } + } + + .close-icon { + svg { + transform: scale(1.5); + } + } + } } - .global-props { - .property-list-container { - .property-item { - .value-field-container { - margin: 0; + .version-history-shortcut-info { + display: flex; + gap: 6px; + border: 1px solid var(--border-color); - input { - padding: 5px 10px; - } + background: var(--background-color); + padding: 10px 8px; + border-radius: 13px; - .dropdown { - top: 4px; - right: 4px; - } - } - } - } + .info-icon { + width: 12px; + height: 12px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 50%; + border: 1px solid var(--border-color); + padding: 4px; + font-size: 10px; + } + + .shortcut-text { + color: var(--text-disabled); + } } - .selected-actions-details { - .selected-actions-header .input-value { - padding: 8px 12px; - color: var(--accent-color); - } + .version-history-location { + display: flex; + align-items: center; + gap: 12px; - .selected-actions-list { - margin-bottom: 8px; - - .eye-dropper-input-container { - padding: 6px 12px; - - .regularDropdown-container { - padding: 5px 8px; - outline: 1px solid var(--border-color); - outline-offset: -1px; - border: none; - } - } - - .value-field-container { - margin: 0; - - input { - padding: 5px 4px; - text-align: center; - } - - .dropdown { - top: 4px; - right: 4px; - } - } - } - } - - .lists-main-container { - margin: 2px; - width: calc(100% - 4px); - background: var(--background-color-gray); - border-radius: #{$border-radius-medium}; - - min-height: 120px; - - .list-container { - padding: 4px; - height: calc(100% - 16px); - overflow-y: scroll; - - .list-item { - @include flex-space-between; - padding: 4px 12px; - width: 100%; - border-radius: #{$border-radius-medium}; - - .value { - display: flex; - justify-content: flex-start; - align-items: center; - min-width: 80%; - gap: 6px; - - .input-value { - text-align: start; - } - - input { - width: fit-content; - outline: none; - accent-color: var(--accent-color); - } - } - } - - .active { - background: var(--highlight-accent-color); - - .value .input-value { - color: var(--accent-color); - } - - path { - stroke: var(--accent-color); - } - } - - .remove-button { - @include flex-center; - height: 18px; - width: 18px; - cursor: pointer; - border-radius: #{$border-radius-small}; - transform: translateX(4px); - - &:hover { - background: var(--background-color-accent); - - path { - stroke: var(--text-button-color); - } - } - } - } - - .resize-icon { - @include flex-center; - padding: 4px; - cursor: grab; - width: 100%; - - &:active { - cursor: grabbing; - } - } - } - - .selected-properties-container { - padding: 12px; - - .properties-header { - color: var(--accent-color); - font-weight: var(--font-weight-regular); - padding: 8px 0; - } - - .input-toggle-container { - padding: 0; - margin-bottom: 6px; - } - - .value-field-container { - margin-bottom: 6px; - padding: 0; - @include flex-space-between; - - .label { - width: 40%; - } - - .regularDropdown-container { - width: 60%; - } - - .default { - width: 60%; - } - } - } - - .simulation-process { - .collapse-header-container { - @include flex-space-between; - padding-right: 12px; - margin: 8px 0; - width: 100%; - - .header { - color: var(--accent-color); - } - } - - .process-container { - padding: 0 12px; - margin: 6px 0; - padding-left: 16px; - position: relative; - - &::after { - content: "↶"; - rotate: -90deg; - transform: translate(-16px, 4px) scaleX(1); - height: 100%; - width: 1px; - position: absolute; - color: var(--accent-color); - font-size: var(--font-size-regular); - outline-offset: -1px; - top: 0; - left: 4px; - } - - &:last-child { - &::after { - display: none; - } - } - - .value { - @include flex-space-between; - - .arrow-container { - height: 16px; - width: 16px; - } - - .active { - rotate: 90deg; - } - } - - .children-drop { - .value { - padding: 6px; - border-left: 1px solid var(--border-color); - } - } - } - } - - .trigger-wrapper { - .trigger-item { - .trigger-name { - padding: 8px; - margin-top: 4px; - } - - .value-field-container { - margin: 0; - } - } - } - - .footer { - @include flex-center; - justify-content: flex-start; + .location-details { + display: flex; + flex-direction: column; gap: 4px; - padding: 12px; - font-size: var(--font-size-tiny); + + .saved-history-count { + font-size: var(--font-size-tiny); + } + } } - .compare-simulations-container { - background: var(--background-color); - padding: 12px; - border-radius: #{$border-radius-large}; + .saved-versions-list { + padding-top: 16px; + display: flex; + flex-direction: column; + gap: 20px; - .compare-simulations-header { - font-weight: var(--font-weight-medium); + .saved-version { + display: flex; + align-items: center; + gap: 12px; + + .version-name { + background: var(--background-color); + border: 1px solid var(--border-color); + color: var(--text-color); + border-radius: 13px; + padding: 4px 8px; + position: relative; + font-size: var(--font-size-small); + text-wrap: nowrap; } - .content { - padding: 12px 0; - font-size: var(--font-size-small); - - span { - font-size: inherit; - color: var(--accent-color); - } + &:not(:first-child) .version-name::after { + content: ""; + position: absolute; + top: -35px; + left: 50%; + transform: translateX(-50%); + width: 1px; + height: 32px; + background-color: var(--text-disabled); } - .input { - width: 100%; + .version-details { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + gap: 6px; + + .details { display: flex; - flex-direction: row-reverse; - justify-content: flex-start; + flex-direction: column; + gap: 6px; + } - input { - width: fit-content; - background: var(--background-color-button); - color: var(--text-button-color); - padding: 3px 10px; - cursor: pointer; - border: none; - outline: none; - } - } - } - } - - .aisle-properties-container { - max-height: 65vh; - overflow: auto; - - .aisle-texture-container { - max-height: 40vh; - overflow: auto; - - .aisle-list { - width: calc(100% - 8px); - text-align: start; - padding: 4px 6px; + .saved-by { display: flex; align-items: center; gap: 6px; - border-radius: #{$border-radius-large}; - margin: 2px 6px; - .texture-display { - height: 34px; - width: 34px; - background: #7e7e7e86; - border-radius: #{$border-radius-large}; - margin-right: 4px; - overflow: hidden; + .user-profile { + background: var(--background-color-accent); + color: var(--text-button-color); + width: 20px; + height: 20px; + border-radius: 50%; + + display: flex; + justify-content: center; + align-items: center; + text-transform: uppercase; } - .aisle-color { - text-transform: capitalize; + .user-name { + text-transform: capitalize; } + } - .aisle-brief { - font-size: var(--font-size-small); - color: var(--input-text-color); - } - - &.selected { - background: var(--highlight-accent-color); - - .aisle-color { - // color: var(--text-button-color); - } - - &:hover { - // background: var(--background-color-accent); - } - } - - &:hover { - background: var(--highlight-accent-color); - // background: var(--background-color-secondary); + .timestamp { + .input-value { + color: var(--text-color); + text-align: start; } + } } + } + } + } + + .no-event-selected { + color: #666; + padding: 16px; + grid-column: 1 / -1; + border-radius: #{$border-radius-large}; + background: var(--background-color); + + .products-list { + padding-top: 1rem; + + .product-item { + text-align: start; + margin-top: 8px; + padding: 2px 0; + text-decoration: none; + display: flex; + flex-wrap: wrap; + gap: 6px; + + button { + width: fit-content; + position: relative; + @include flex-center; + gap: 4px; + background: var(--background-color); + padding: 8px 12px; + border-radius: #{$border-radius-extra-large}; + outline: 1px solid var(--border-color); + + &:hover { + background: var(--background-color-accent); + color: var(--text-button-color); + outline: none; + + path { + stroke: var(--text-button-color); + stroke-width: 1.3; + } + } + } + } + + .products-list-title { + text-align: start; + color: var(--accent-color); + font-size: var(--font-size-regular); + } + } + } + } + } + + .visualization-right-sideBar { + min-height: 50vh; + max-height: 60vh; + + .sidebar-right-content-container { + .dataSideBar { + .inputs-wrapper { + display: flex; + flex-direction: column; + gap: 6px; + + .datas { + .input-value { + padding: 5px 10px; + } + + .input-value, + .rename-input { + margin-right: 24px; + width: 170px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + } + + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + gap: 12px; + padding: 10px 12px; + + .datas { + display: flex; + align-items: center; + justify-content: space-between; + + .datas__class { + display: flex; + align-items: center; + gap: 12px; + + .multi-level-dropdown { + width: 170px; + + .dropdown-button { + display: flex; + justify-content: space-between; + gap: 6px; + } + + .disable { + cursor: not-allowed; + pointer-events: none; + /* Disables all mouse interactions */ + opacity: 0.5; + /* Optional: Makes the button look visually disabled */ + } + } + } + } + + .sideBarHeader { + color: var(--accent-color); + border-bottom: 1px solid var(--border-color); + padding-bottom: 6px; + } + + .selectedMain-container { + display: flex; + flex-direction: column; + gap: 6px; + border-bottom: 1px solid var(--border-color); + padding-bottom: 10px; + + .selectedMain { + display: flex; + align-items: center; + gap: 6px; + + main { + width: 35%; + white-space: nowrap; + /* Prevent wrapping */ + } + + .icon { + padding: 0; + cursor: pointer; + } + + button { + background: transparent; + box-shadow: none; + color: #5273eb; + padding: 6px; + font-size: var(--font-size-xlarge); + } + + .bulletPoint { + color: #5273eb; + font-size: var(--font-size-large); + } + + .regularDropdown-container { + width: 100%; + } + + &:first-child { + gap: 4px; + } + } + } + + .child { + width: 100%; + gap: 6px; + } + + .infoBox { + display: flex; + align-items: flex-start; + gap: 6px; + color: #444; + border-radius: #{$border-radius-medium}; + font-size: var(--font-weight-regular); + + .infoIcon { + padding: 0px 7px; + border-radius: #{$border-radius-circle}; + + border: 1px solid gray; + } + + p { + margin: 0; + } + } + } + + .design { + width: 100%; + display: flex; + flex-direction: column; + gap: 15px; + font-size: var(--font-weight-regular); + color: var(--text-color); + padding: 12px; + + .appearance-container, + .element-container { + background: var(--background-color); + backdrop-filter: blur(20px); + border-radius: 15px; + outline: 1px solid var(--border-color); + + padding: 10px; + + display: flex; + flex-direction: column; + gap: 12px; + + .header-container { + padding: 0; + height: auto; + } + + .appearance-style { + display: flex; + align-items: center; + justify-content: space-between; + flex-direction: column; + gap: 12px; + + .regularDropdown-container { + .dropdown-options { + width: 130%; + left: -15%; + } + + .dropdown-header { + gap: 12px; + } + } + + .color-wrapper, + .opacity-wrapper, + .blurEffect-wrapper, + .theme-wrapper { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + flex-direction: column; + + .input-range-container { + width: 100%; + padding: 0; + } + } + + .theme-wrapper { + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-between; + } + + .color-wrapper { + flex-direction: row; + + .value { + display: flex; + align-items: center; + + input { + width: 34px; + height: 24px; + border-radius: 12px; + padding: 0; + } + } + } + } + } + + .element-container { + padding: 8px; + + .display-element { + width: 100%; + height: 150px; + @include flex-center; + background: var(--background-color); + backdrop-filter: blur(20px); + border-radius: 5px; + outline: 1px solid var(--border-color); + } + + .name-wrapper, + .element-wrapper { + display: flex; + align-items: center; + justify-content: space-between; + + .value { + width: 60%; + } + } + } + } + + .reviewChart { + width: 100%; + height: 150px; + background: var(--background-color); + display: flex; + align-items: center; + } + + .optionsContainer { + display: flex; + flex-direction: column; + gap: 10px; + padding: 0 12px; + + .option { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + + .regularDropdown-container, + input { + width: 160px; + } + + &:last-child { + flex-direction: column; + + .header { + width: 100%; + display: flex; + justify-content: space-between; + } + + .colorDisplayer { + width: 100%; + display: flex; + justify-content: start; + align-items: center; + + input[type="color"] { + border: none; + outline: none; + background: none; + width: 24px; + height: 26px; + border-radius: #{$border-radius-small}; + padding: 0; + } + } + } + + span { + min-width: 100px; + } + } + } + } + } + + .machine-mechanics-container { + .machine-mechanics-header { + padding: 8px 12px; + border-top: 1px solid var(--border-color); + 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; + min-width: 24px; + cursor: pointer; + background: var(--background-color-secondary); + border-radius: #{$border-radius-medium}; + + path { + stroke: var(--accent-color); + stroke-width: 1.5px; + } + + &:hover { + background: var(--accent-color); + + path { + stroke: var(--highlight-accent-color); + } + } + } + } + } + + .machine-mechanics-content-container, + .simulations-container, + .event-proprties-wrapper { + position: relative; + max-height: calc(62vh - (47px - 35px)); + width: 304px; + border-radius: #{$border-radius-large}; + overflow-x: hidden; + + .header { + @include flex-space-between; + padding: 6px 12px; + padding-right: 6px; + text-transform: capitalize; + + .add-button { + @include flex-center; + padding: 4px 8px; + background: var(--background-color-button); + color: var(--text-button-color); + border-radius: #{$border-radius-large}; + cursor: pointer; + outline: none; + border: none; + + path { + stroke: var(--text-button-color); + } + + &:disabled { + background: var(--text-disabled); + cursor: not-allowed; + } + } + } + + .global-props { + .property-list-container { + .property-item { + .value-field-container { + margin: 0; + + input { + padding: 5px 10px; + } + + .dropdown { + top: 4px; + right: 4px; + } + } + } + } + } + + .selected-actions-details { + .selected-actions-header .input-value { + padding: 8px 12px; + color: var(--accent-color); + } + + .selected-actions-list { + margin-bottom: 8px; + + .eye-dropper-input-container { + padding: 6px 12px; + + .regularDropdown-container { + padding: 5px 8px; + outline: 1px solid var(--border-color); + outline-offset: -1px; + border: none; + } } .value-field-container { - margin: 0; - } - - .presets-list-container { - display: flex; - flex-wrap: wrap; - gap: 6px; - padding: 6px; - padding-left: 7px; - - .preset-list { - background: #444; - height: 90px; - width: 90px; - border-radius: #{$border-radius-large}; - overflow: hidden; - - .thumbnail { - height: 100%; - width: 100%; - border-radius: #{$border-radius-large}; - outline-offset: -1px; - - img { - height: 100%; - width: 100%; - object-fit: cover; - transition: all 0.2s; - } - - &.selected { - outline: 2px solid var(--border-color-accent); - outline-offset: -2px; - - &:hover { - outline: 2px solid var(--border-color-accent); - - img { - transform: scale(1); - } - } - } - - &:hover { - outline: 1px solid var(--border-color); - - img { - transform: scale(1.1); - } - } - } - } + margin: 0; + + input { + padding: 5px 4px; + text-align: center; + } + + .dropdown { + top: 4px; + right: 4px; + } } + } } - .global-properties-container, - .analysis-main-container, - .asset-properties-container, - .zone-properties-container, - .aisle-properties-container { - .header { - @include flex-space-between; - padding: 10px 12px; - color: var(--text-color); - width: 100%; + .lists-main-container { + margin: 2px; + width: calc(100% - 4px); + background: var(--background-color-gray); + border-radius: #{$border-radius-medium}; + + min-height: 120px; + + .list-container { + padding: 4px; + height: calc(100% - 16px); + overflow-y: scroll; + + .list-item { + @include flex-space-between; + padding: 4px 12px; + width: 100%; + border-radius: #{$border-radius-medium}; + + .value { + display: flex; + justify-content: flex-start; + align-items: center; + min-width: 80%; + gap: 6px; .input-value { - color: inherit; + text-align: start; } - } - - .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: var(--background-color-accent); - - path { - stroke: var(--text-button-color); - } - } - } - } - - .optimize-button, - .generate-report-button, - .button-save { - @include flex-center; - background: var(--background-color-button); - color: var(--text-button-color); - border-radius: #{$border-radius-large}; - padding: 2px; - gap: 4px; - margin: 4px 12px; - cursor: pointer; - font-size: var(--font-size-small); - margin-bottom: 8px; - } - - .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; - - .eyedrop-button { - @include flex-center; - } - } - - .inputs-container { - @include flex-space-between; - - .input-container { - padding: 0 4px; - gap: 6px; - } - } - - .custom-input-label { - white-space: nowrap; - } - } - - .analysis-content-container { - min-height: 48vh; - max-height: 56vh; - overflow-y: auto; - - .dropdown-header-container, - .dropdown-content-container { - padding: 6px 12px; - } - - .value-field-container { - padding: 6px; - - .dropdown { - min-width: 44px; - text-align: center; - } - } - - .input-range-container { - .input-container { - width: 75%; - } - } - } - - .buttons-container { - @include flex-space-between; - padding: 12px; - gap: 12px; input { - border: none; - outline: none; - cursor: pointer; - - &:hover { - box-shadow: #{$box-shadow-medium}; - outline: 1px solid var(--input-border-color); - } - } - - .cancel { - background: transparent; - background: var(--background-color-secondary); - color: var(--text-color); - } - - .submit { - background: var(--background-color-button); - color: var(--text-button-color); + width: fit-content; + outline: none; + accent-color: var(--accent-color); } + } } - .create-custom-analysis-container { - margin: 6px; - background: var(--background-color); - padding: 12px; - border-radius: #{$border-radius-large}; + .active { + background: var(--highlight-accent-color); - .custom-analysis-header { - font-weight: var(--font-weight-medium); - } + .value .input-value { + color: var(--accent-color); + } - .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(--background-color-button); - color: var(--text-button-color); - padding: 3px 10px; - cursor: pointer; - border: none; - outline: none; - } - } + path { + stroke: var(--accent-color); + } } + + .remove-button { + @include flex-center; + height: 18px; + width: 18px; + cursor: pointer; + border-radius: #{$border-radius-small}; + transform: translateX(4px); + + &:hover { + background: var(--background-color-accent); + + path { + stroke: var(--text-button-color); + } + } + } + } + + .resize-icon { + @include flex-center; + padding: 4px; + cursor: grab; + width: 100%; + + &:active { + cursor: grabbing; + } + } } - .toggle-sidebar-ui-button { - svg { - transform: scaleX(-1); + .selected-properties-container { + padding: 12px; + + .properties-header { + color: var(--accent-color); + font-weight: var(--font-weight-regular); + padding: 8px 0; + } + + .input-toggle-container { + padding: 0; + margin-bottom: 6px; + } + + .value-field-container { + margin-bottom: 6px; + padding: 0; + @include flex-space-between; + + .label { + width: 40%; } - .tooltip { - right: 56px; - - &::after { - left: 100%; - bottom: 50%; - } + .regularDropdown-container { + width: 60%; } + + .default { + width: 60%; + } + } } + + .simulation-process { + .collapse-header-container { + @include flex-space-between; + padding-right: 12px; + margin: 8px 0; + width: 100%; + + .header { + color: var(--accent-color); + } + } + + .process-container { + padding: 0 12px; + margin: 6px 0; + padding-left: 16px; + position: relative; + + &::after { + content: "↶"; + rotate: -90deg; + transform: translate(-16px, 4px) scaleX(1); + height: 100%; + width: 1px; + position: absolute; + color: var(--accent-color); + font-size: var(--font-size-regular); + outline-offset: -1px; + top: 0; + left: 4px; + } + + &:last-child { + &::after { + display: none; + } + } + + .value { + @include flex-space-between; + + .arrow-container { + height: 16px; + width: 16px; + } + + .active { + rotate: 90deg; + } + } + + .children-drop { + .value { + padding: 6px; + border-left: 1px solid var(--border-color); + } + } + } + } + + .trigger-wrapper { + .trigger-item { + .trigger-name { + padding: 8px; + margin-top: 4px; + } + + .value-field-container { + margin: 0; + } + } + } + + .footer { + @include flex-center; + justify-content: flex-start; + gap: 4px; + padding: 12px; + font-size: var(--font-size-tiny); + } + + .compare-simulations-container { + background: var(--background-color); + padding: 12px; + border-radius: #{$border-radius-large}; + + .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 { + width: 100%; + display: flex; + flex-direction: row-reverse; + justify-content: flex-start; + + input { + width: fit-content; + background: var(--background-color-button); + color: var(--text-button-color); + padding: 3px 10px; + cursor: pointer; + border: none; + outline: none; + } + } + } + } + + .aisle-properties-container { + max-height: 65vh; + overflow: auto; + + .aisle-texture-container { + max-height: 40vh; + overflow: auto; + + .aisle-list { + width: calc(100% - 8px); + text-align: start; + padding: 4px 6px; + display: flex; + align-items: center; + gap: 6px; + border-radius: #{$border-radius-large}; + margin: 2px 6px; + + .texture-display { + height: 34px; + width: 34px; + background: #7e7e7e86; + border-radius: #{$border-radius-large}; + margin-right: 4px; + overflow: hidden; + } + + .aisle-color { + text-transform: capitalize; + } + + .aisle-brief { + font-size: var(--font-size-small); + color: var(--input-text-color); + } + + &.selected { + background: var(--highlight-accent-color); + + // .aisle-color { + // color: var(--text-button-color); + // } + + // &:hover { + // background: var(--background-color-accent); + // } + } + + &:hover { + background: var(--highlight-accent-color); + // background: var(--background-color-secondary); + } + } + } + + .value-field-container { + margin: 0; + } + + .presets-list-container { + display: flex; + flex-wrap: wrap; + gap: 6px; + padding: 6px; + padding-left: 7px; + + .preset-list { + background: #444; + height: 90px; + width: 90px; + border-radius: #{$border-radius-large}; + overflow: hidden; + + .thumbnail { + height: 100%; + width: 100%; + border-radius: #{$border-radius-large}; + outline-offset: -1px; + + img { + height: 100%; + width: 100%; + object-fit: cover; + transition: all 0.2s; + } + + &.selected { + outline: 2px solid var(--border-color-accent); + outline-offset: -2px; + + &:hover { + outline: 2px solid var(--border-color-accent); + + img { + transform: scale(1); + } + } + } + + &:hover { + outline: 1px solid var(--border-color); + + img { + transform: scale(1.1); + } + } + } + } + } + } + + .global-properties-container, + .analysis-main-container, + .asset-properties-container, + .zone-properties-container, + .aisle-properties-container { + .header { + @include flex-space-between; + padding: 10px 12px; + color: var(--text-color); + width: 100%; + + .input-value { + color: inherit; + } + } + + .animations-lists { + max-height: 210px; + overflow: auto; + .animations-list-wrapper { + padding: 0 4px; + .animations-list { + margin: 2px 0; + padding: 4px 12px; + border-radius: 8px; + } + } + } + + .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: var(--background-color-accent); + + path { + stroke: var(--text-button-color); + } + } + } + } + + .optimize-button, + .generate-report-button, + .button-save { + @include flex-center; + background: var(--background-color-button); + color: var(--text-button-color); + border-radius: #{$border-radius-large}; + padding: 2px; + gap: 4px; + margin: 4px 12px; + cursor: pointer; + font-size: var(--font-size-small); + margin-bottom: 8px; + } + + .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; + + .eyedrop-button { + @include flex-center; + } + } + + .inputs-container { + @include flex-space-between; + + .input-container { + padding: 0 4px; + gap: 6px; + } + } + + .custom-input-label { + white-space: nowrap; + } + } + + .analysis-content-container { + min-height: 48vh; + max-height: 56vh; + overflow-y: auto; + + .dropdown-header-container, + .dropdown-content-container { + padding: 6px 12px; + } + + .value-field-container { + padding: 6px; + + .dropdown { + min-width: 44px; + text-align: center; + } + } + + .input-range-container { + .input-container { + width: 75%; + } + } + } + + .buttons-container { + @include flex-space-between; + padding: 12px; + gap: 12px; + + input { + border: none; + outline: none; + cursor: pointer; + + &:hover { + box-shadow: #{$box-shadow-medium}; + outline: 1px solid var(--input-border-color); + } + } + + .cancel { + background: transparent; + background: var(--background-color-secondary); + color: var(--text-color); + } + + .submit { + background: var(--background-color-button); + color: var(--text-button-color); + } + } + + .create-custom-analysis-container { + margin: 6px; + background: var(--background-color); + padding: 12px; + border-radius: #{$border-radius-large}; + + .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(--background-color-button); + color: var(--text-button-color); + padding: 3px 10px; + cursor: pointer; + border: none; + outline: none; + } + } + } + } + + .toggle-sidebar-ui-button { + svg { + transform: scaleX(-1); + } + + .tooltip { + right: 56px; + + &::after { + left: 100%; + bottom: 50%; + } + } + } } .sidebar-right-wrapper { - .wall-properties-container { - .wall-properties-section { - padding: 14px; - padding-bottom: 0; - margin-bottom: 8px; - } - - .header { - color: var(--text-color); - } - - .wall-properties { - padding: 12px 0; - - .value-field-container { - padding: 0; - - .input { - input { - text-align: center; - } - } - } - } - - section { - padding: 0; - margin: 0; - max-height: 50vh; - overflow: hidden; - - .header-wrapper { - display: flex; - justify-content: space-between; - padding: 12px; - } - - .material-preview { - display: flex; - flex-direction: column; - align-items: center; - gap: 15px; - background: var(--background-color-secondary); - padding: 18px 25px; - - .sides-wrapper { - display: flex; - justify-content: space-between; - width: 100%; - background-color: #fcfdfd; - border-radius: 4px; - overflow: hidden; - - .side-wrapper { - flex: 1; - display: flex; - justify-content: center; - align-items: center; - gap: 8px; - padding: 8px 0; - cursor: pointer; - - .label { - color: var(--background-color-button); - } - - &.active { - background-color: #e0dfff; - } - - .texture-image { - width: 20px; - height: 20px; - border-radius: 50%; - overflow: hidden; - - img { - width: 100%; - height: 100%; - object-fit: cover; - } - } - } - } - - .preview { - width: 100%; - height: 111px; - border-radius: 20px; - overflow: hidden; - - img { - width: 100%; - height: 100%; - object-fit: cover; - } - } - } - - .materials { - max-height: 250px; - overflow: auto; - margin-top: 12px; - margin-bottom: 16px; - padding: 0 12px; - - .material-container { - display: flex; - flex-direction: column; - gap: 6px; - - .material-wrapper { - display: flex; - justify-content: space-between; - align-items: center; - padding: 4px 6px; - border-radius: 12px; - - &:hover { - background: var(--highlight-accent-color); - } - - &.selectedMaterial { - background: var(--highlight-accent-color); - } - - .material-property { - display: flex; - align-items: center; - gap: 6px; - - .material-image { - width: 34px; - height: 34px; - border-radius: 6px; - overflow: hidden; - - img { - width: 100%; - height: 100%; - object-fit: cover; - } - } - } - - .delete-material { - cursor: pointer; - } - } - } - } - } + .wall-properties-container { + .wall-properties-section { + padding: 14px; + padding-bottom: 0; + margin-bottom: 8px; } + + .header { + color: var(--text-color); + } + + .wall-properties { + padding: 12px 0; + + .value-field-container { + padding: 0; + + .input { + input { + text-align: center; + } + } + } + } + + section { + padding: 0; + margin: 0; + max-height: 50vh; + overflow: hidden; + + .header-wrapper { + display: flex; + justify-content: space-between; + padding: 12px; + } + + .material-preview { + display: flex; + flex-direction: column; + align-items: center; + gap: 15px; + background: var(--background-color-secondary); + padding: 18px 25px; + + .sides-wrapper { + display: flex; + justify-content: space-between; + width: 100%; + background-color: #fcfdfd; + border-radius: 4px; + overflow: hidden; + + .side-wrapper { + flex: 1; + display: flex; + justify-content: center; + align-items: center; + gap: 8px; + padding: 8px 0; + cursor: pointer; + + .label { + color: var(--background-color-button); + } + + &.active { + background-color: #e0dfff; + } + + .texture-image { + width: 20px; + height: 20px; + border-radius: 50%; + overflow: hidden; + + img { + width: 100%; + height: 100%; + object-fit: cover; + } + } + } + } + + .preview { + width: 100%; + height: 111px; + border-radius: 20px; + overflow: hidden; + + img { + width: 100%; + height: 100%; + object-fit: cover; + } + } + } + + .materials { + max-height: 250px; + overflow: auto; + margin-top: 12px; + margin-bottom: 16px; + padding: 0 12px; + + .material-container { + display: flex; + flex-direction: column; + gap: 6px; + + .material-wrapper { + display: flex; + justify-content: space-between; + align-items: center; + padding: 4px 6px; + border-radius: 12px; + + &:hover { + background: var(--highlight-accent-color); + } + + &.selectedMaterial { + background: var(--highlight-accent-color); + } + + .material-property { + display: flex; + align-items: center; + gap: 6px; + + .material-image { + width: 34px; + height: 34px; + border-radius: 6px; + overflow: hidden; + + img { + width: 100%; + height: 100%; + object-fit: cover; + } + } + } + + .delete-material { + cursor: pointer; + } + } + } + } + } + } } .assets-container-main { + width: 100%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + height: 100%; + gap: 3px; + + .assets-result { width: 100%; - display: flex; - flex-direction: row; - flex-wrap: wrap; - height: 100%; - gap: 3px; - - .assets-result { - width: 100%; - - .assets-wrapper { - margin: 0; - } - } - - .assets-list-section { - width: 100%; - padding: 4px; - } .assets-wrapper { - width: 100%; - position: relative; - max-height: 50vh; - overflow: auto; - - h2, - .searched-content { - color: var(--text-color); - font-family: $large; - font-weight: $bold-weight; - padding: 8px; - @include flex-space-between; - - .back-button { - cursor: pointer; - } - } - - .categories-container { - width: 100%; - display: flex; - flex-direction: row; - flex-wrap: wrap; - height: 100%; - gap: 4px; - padding: 2px; - - .category { - width: 123px; - height: 95px; - border-radius: #{$border-radius-large}; - background: var(--background-color); - outline: 1px solid var(--border-color); - outline-offset: -1px; - padding: 8px; - padding-top: 12px; - font-weight: $bold-weight; - position: relative; - overflow: hidden; - - &:hover { - outline: 1px solid var(--border-color-accent); - cursor: pointer; - - img { - transition: all 0.2s; - scale: 1.3; - } - - &::after { - top: 80px; - right: 0; - scale: 2; - } - } - - .category-name { - position: relative; - z-index: 3; - font-size: var(--font-size-regular); - } - - &::after { - content: ""; - width: 60px; - height: 60px; - border-radius: #{$border-radius-circle}; - background: var(--circle-color, #000); - position: absolute; - top: 60%; - right: -10px; - transform: translate(0, -50%); - transition: all 0.2s ease-in-out; - } - - &:nth-child(1), - &:nth-child(8) { - &::after { - @include gradient-by-child(1); // First child uses the first color - } - } - - &:nth-child(2) { - &::after { - - // @include gradient-by-child(4); // Second child uses the second color - background: linear-gradient(144.19deg, rgba(197, 137, 26, 0.7) 16.62%, rgba(69, 48, 10, 0.7) 85.81%); - - } - - } - - &:nth-child(3), - &:nth-child(9) { - &::after { - @include gradient-by-child(3); // Second child uses the second color - } - } - - &:nth-child(3), - &:nth-child(10) { - &::after { - @include gradient-by-child(3); // Third child uses the third color - } - } - - &:nth-child(4), - &:nth-child(11) { - &::after { - @include gradient-by-child(4); // Fourth child uses the fourth color - } - } - - &:nth-child(5), - &:nth-child(12) { - &::after { - @include gradient-by-child(5); // Fifth child uses the fifth color - } - } - - &:nth-child(6), - &:nth-child(13) { - &::after { - @include gradient-by-child(6); // Fifth child uses the fifth color - } - } - - &:nth-child(7), - &:nth-child(14) { - &::after { - @include gradient-by-child(7); // Fifth child uses the fifth color - } - } - - .category-image { - position: absolute; - bottom: 0; - right: -10px; - transform: translate(0, 0%) scale(0.8); - z-index: 2; - height: 80%; - } - } - } - - .catogory-asset-filter { - display: flex; - flex-wrap: wrap; - gap: 12px; - border: 1px solid #564B69; - padding: 12px 10px; - border-radius: 15px; - - .catogory-asset-filter-wrapper { - display: flex; - align-items: center; - gap: 2px; - border: 1px solid #564B69; - padding: 4px 8px; - border-radius: 100px; - cursor: pointer; - - .sub-catagory { - display: flex; - } - - &.active { - background-color: #6F42C1; - - .sub-catagory { - - color: #FFFFFF; - } - - // svg { - // stroke: white; - // fill: white; - // } - } - } - } - - .assets-container { - width: 100%; - display: flex; - flex-direction: row; - flex-wrap: wrap; - height: 100%; - gap: 6px; - padding: 2px; - - .no-asset { - text-align: center; - margin: 12px; - width: 100%; - } - - .assets { - width: 122px; - height: 95px; - border-radius: #{$border-radius-large}; - background: var(--background-color); - outline: 1px solid var(--border-color); - font-weight: $medium-weight; - position: relative; - overflow: hidden; - padding: 0; - - &:hover { - .asset-name { - opacity: 1; - } - - .asset-image { - scale: 1.2; - } - } - - .asset-name { - position: absolute; - top: 0; - z-index: 3; - padding: 8px; - width: 100%; - height: 100%; - font-size: var(--font-size-regular); - background: linear-gradient(0deg, - rgba(37, 24, 51, 0) 0%, - rgba(52, 41, 61, 0.5) 100%); - pointer-events: none; - backdrop-filter: blur(8px); - opacity: 0; - transition: opacity 0.3s ease; - display: -webkit-box; - -webkit-line-clamp: 3; - line-clamp: 3; - -webkit-box-orient: vertical; - overflow: hidden; - text-overflow: ellipsis; - } - - .asset-image { - height: 100%; - width: 100%; - z-index: 2; - object-fit: cover; - transition: all 0.2s; - } - } - } + margin: 0; } + } + + .assets-list-section { + width: 100%; + padding: 4px; + } + + .assets-wrapper { + width: 100%; + position: relative; + max-height: 50vh; + overflow: auto; + + h2, + .searched-content { + color: var(--text-color); + font-family: $large; + font-weight: $bold-weight; + padding: 8px; + @include flex-space-between; + + .back-button { + cursor: pointer; + } + } + + .categories-container { + width: 100%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + height: 100%; + gap: 4px; + padding: 2px; + + .category { + width: 123px; + height: 95px; + border-radius: #{$border-radius-large}; + background: var(--background-color); + outline: 1px solid var(--border-color); + outline-offset: -1px; + padding: 8px; + padding-top: 12px; + font-weight: $bold-weight; + position: relative; + overflow: hidden; + + &:hover { + outline: 1px solid var(--border-color-accent); + cursor: pointer; + + img { + transition: all 0.2s; + scale: 1.3; + } + + &::after { + top: 80px; + right: 0; + scale: 2; + } + } + + .category-name { + position: relative; + z-index: 3; + font-size: var(--font-size-regular); + } + + &::after { + content: ""; + width: 60px; + height: 60px; + border-radius: #{$border-radius-circle}; + background: var(--circle-color, #000); + position: absolute; + top: 60%; + right: -10px; + transform: translate(0, -50%); + transition: all 0.2s ease-in-out; + } + + &:nth-child(1), + &:nth-child(8) { + &::after { + @include gradient-by-child(1); // First child uses the first color + } + } + + &:nth-child(2) { + &::after { + // @include gradient-by-child(4); // Second child uses the second color + background: linear-gradient( + 144.19deg, + rgba(197, 137, 26, 0.5) 16.62%, + rgba(69, 48, 10, 0.5) 85.81% + ); + } + } + + &:nth-child(3), + &:nth-child(9) { + &::after { + @include gradient-by-child(3); // Second child uses the second color + } + } + + &:nth-child(3), + &:nth-child(10) { + &::after { + @include gradient-by-child(3); // Third child uses the third color + } + } + + &:nth-child(4), + &:nth-child(11) { + &::after { + @include gradient-by-child(4); // Fourth child uses the fourth color + } + } + + &:nth-child(5), + &:nth-child(12) { + &::after { + @include gradient-by-child(5); // Fifth child uses the fifth color + } + } + + &:nth-child(6), + &:nth-child(13) { + &::after { + @include gradient-by-child(6); // Fifth child uses the fifth color + } + } + + &:nth-child(7), + &:nth-child(14) { + &::after { + @include gradient-by-child(7); // Fifth child uses the fifth color + } + } + + .category-image { + position: absolute; + bottom: 0; + right: -10px; + transform: translate(0, 0%) scale(0.8); + z-index: 2; + height: 80%; + } + } + } + + .catogory-asset-filter { + display: flex; + flex-wrap: wrap; + gap: 12px; + border: 1px solid #564b69; + padding: 12px 10px; + border-radius: 15px; + + .catogory-asset-filter-wrapper { + display: flex; + align-items: center; + gap: 2px; + border: 1px solid #564b69; + padding: 4px 8px; + border-radius: 100px; + cursor: pointer; + + .sub-catagory { + display: flex; + } + + &.active { + background-color: #6f42c1; + + .sub-catagory { + color: #ffffff; + } + + // svg { + // stroke: white; + // fill: white; + // } + } + } + } + + .assets-container { + width: 100%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + height: 100%; + gap: 6px; + padding: 2px; + + .no-asset { + text-align: center; + margin: 12px; + width: 100%; + } + + .assets { + width: 122px; + height: 95px; + border-radius: #{$border-radius-large}; + background: var(--background-color); + outline: 1px solid var(--border-color); + font-weight: $medium-weight; + position: relative; + overflow: hidden; + padding: 0; + + &:hover { + .asset-name { + opacity: 1; + } + + .asset-image { + scale: 1.2; + } + } + + .asset-name { + position: absolute; + top: 0; + z-index: 3; + padding: 8px; + width: 100%; + height: 100%; + font-size: var(--font-size-regular); + background: linear-gradient( + 0deg, + rgba(37, 24, 51, 0) 0%, + rgba(52, 41, 61, 0.5) 100% + ); + pointer-events: none; + backdrop-filter: blur(8px); + opacity: 0; + transition: opacity 0.3s ease; + display: -webkit-box; + -webkit-line-clamp: 3; + line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + } + + .asset-image { + height: 100%; + width: 100%; + z-index: 2; + object-fit: cover; + transition: all 0.2s; + } + } + } + } } .sidebar-left-wrapper, .sidebar-right-wrapper { - transition: height 0.2s ease-in-out; + transition: height 0.2s ease-in-out; } .sidebar-left-wrapper.closed, .sidebar-right-wrapper.closed { - animation: closeSidebar 0.2s linear forwards; + animation: closeSidebar 0.2s linear forwards; } .sidebar-left-wrapper.open, .sidebar-right-wrapper.open { - height: fit-content; - animation: openSidebar 0.2s linear; + height: fit-content; + animation: openSidebar 0.2s linear; - .sidebar-right-container, - .sidebar-left-container { - opacity: 0; - animation: revealSmooth 0.3s 0.1s linear forwards; - } + .sidebar-right-container, + .sidebar-left-container { + opacity: 0; + animation: revealSmooth 0.3s 0.1s linear forwards; + } } @keyframes revealSmooth { - from { - opacity: 0; - } + from { + opacity: 0; + } - to { - opacity: 1; - } + to { + opacity: 1; + } } @keyframes closeSidebar { - from { - height: 60%; - } + from { + height: 60%; + } - to { - height: 52px; - } + to { + height: 52px; + } } @keyframes openSidebar { - from { - height: 52px; - } + from { + height: 52px; + } - to { - height: 60%; - } + to { + height: 60%; + } } .versionSaved { - min-width: 449px; - position: fixed; - bottom: 45px; - right: 10px; - z-index: 10; + min-width: 449px; + position: fixed; + bottom: 45px; + right: 10px; + z-index: 10; + display: flex; + flex-direction: column; + gap: 18px; + + .versionSaved-wrapper { + border-radius: 20px; + + padding: 8px 10px; + background: var(--background-color); + backdrop-filter: blur(20px); + } + + .version-header { display: flex; + justify-content: space-between; + align-items: center; + + .header-wrapper { + display: flex; + align-items: center; + gap: 6px; + } + } + + .version-details { + width: 100%; + + display: flex; + justify-content: center; + align-items: center; flex-direction: column; gap: 18px; - .versionSaved-wrapper { - border-radius: 20px; + .details { + width: 100%; - padding: 8px 10px; - background: var(--background-color); - backdrop-filter: blur(20px); - } + background: var(--background-color); + backdrop-filter: blur(20px); + border-radius: 20px; + outline: 1px solid var(--border-color); + display: flex; + justify-content: space-between; + align-items: center; + padding: 7px 12px; - .version-header { - display: flex; - justify-content: space-between; - align-items: center; - - .header-wrapper { - display: flex; - align-items: center; - gap: 6px; - } - } - - .version-details { - width: 100%; + .details-wrapper { + font-size: var(--font-size-small); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + button { + font-size: var(--font-size-small); display: flex; justify-content: center; align-items: center; - flex-direction: column; - gap: 18px; - - .details { - width: 100%; - - background: var(--background-color); - backdrop-filter: blur(20px); - border-radius: 20px; - outline: 1px solid var(--border-color); - display: flex; - justify-content: space-between; - align-items: center; - padding: 7px 12px; - - .details-wrapper { - font-size: var(--font-size-small); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - button { - font-size: var(--font-size-small); - display: flex; - justify-content: center; - align-items: center; - background: var(--background-color-button); - color: var(--text-button-color); - border-radius: 12px; - padding: 5px 6px; - cursor: pointer; - } - } + background: var(--background-color-button); + color: var(--text-button-color); + border-radius: 12px; + padding: 5px 6px; + cursor: pointer; + } } + } } .dismissing { - display: none; + display: none; } .edit-version-popup-wrapper, .finishEdit-version-popup-wrapper { - height: 100vh; - width: 100vw; - background: var(--background-color-secondary); - @include flex-center; + height: 100vh; + width: 100vw; + background: var(--background-color-secondary); + @include flex-center; - .details-wrapper-popup-container, - .finishEdit-wrapper-popup-container { - min-width: 535px; - width: 520px; - background: var(--background-color); - border-radius: #{$border-radius-large}; - backdrop-filter: blur(15px); - outline: 1px solid var(--border-color); - display: flex; - flex-direction: column; - gap: 30px; - padding: 20px; + .details-wrapper-popup-container, + .finishEdit-wrapper-popup-container { + min-width: 535px; + width: 520px; + background: var(--background-color); + border-radius: #{$border-radius-large}; + backdrop-filter: blur(15px); + outline: 1px solid var(--border-color); + display: flex; + flex-direction: column; + gap: 30px; + padding: 20px; - .header-wrapper { - display: flex; - align-items: center; - gap: 6px; - } - - .details-wrapper { - display: flex; - flex-direction: column; - gap: 10px; - - .version-name, - .version-description { - background: var(--background-color); - backdrop-filter: blur(20px); - border-radius: 20px; - outline: 1px solid var(--border-color); - display: flex; - justify-content: space-between; - align-items: center; - padding: 4px 12px; - position: relative; - - .label { - position: absolute; - right: 8px; - font-size: var(--font-size-tiny); - color: var(--text-disabled); - } - - input { - border: none; - background: none; - outline: none; - color: var(--text-color); - } - } - - .version-description { - textarea { - padding: 4px 8px; - width: 100%; - min-height: 101px; - background: transparent; - border: none; - outline: none; - } - } - } - - .btn-wrapper { - display: flex; - justify-content: flex-end; - gap: 20px; - - .save { - display: flex; - justify-content: center; - align-items: center; - background: var(--background-color-button); - color: var(--text-button-color); - border-radius: 12px; - padding: 5px 12px; - cursor: pointer; - } - } + .header-wrapper { + display: flex; + align-items: center; + gap: 6px; } - .finishEdit-wrapper-popup-container { - min-height: 250px; + .details-wrapper { + display: flex; + flex-direction: column; + gap: 10px; + + .version-name, + .version-description { + background: var(--background-color); + backdrop-filter: blur(20px); + border-radius: 20px; + outline: 1px solid var(--border-color); + display: flex; + justify-content: space-between; + align-items: center; + padding: 4px 12px; + position: relative; + + .label { + position: absolute; + right: 8px; + font-size: var(--font-size-tiny); + color: var(--text-disabled); + } + + input { + border: none; + background: none; + outline: none; + color: var(--text-color); + } + } + + .version-description { + textarea { + padding: 4px 8px; + width: 100%; + min-height: 101px; + background: transparent; + border: none; + outline: none; + } + } + } + + .btn-wrapper { + display: flex; + justify-content: flex-end; + gap: 20px; + + .save { display: flex; justify-content: center; align-items: center; - gap: 12px; - - .versionname { - font-size: var(--font-size-large); - color: var(--background-color-accent); - color: #ccacff; - text-transform: capitalize; - } + background: var(--background-color-button); + color: var(--text-button-color); + border-radius: 12px; + padding: 5px 12px; + cursor: pointer; + } } -} \ No newline at end of file + } + + .finishEdit-wrapper-popup-container { + min-height: 250px; + display: flex; + justify-content: center; + align-items: center; + gap: 12px; + + .versionname { + font-size: var(--font-size-large); + color: var(--background-color-accent); + color: #ccacff; + text-transform: capitalize; + } + } +}