From 69a7f28d71c428ff04038bec84a026f96fade169 Mon Sep 17 00:00:00 2001 From: Vishnu Date: Wed, 21 May 2025 17:42:40 +0530 Subject: [PATCH 1/5] refactor: update import statements for useToggleStore to named import --- app/src/components/layout/sidebarLeft/Header.tsx | 2 +- .../components/layout/sidebarLeft/SideBarLeft.tsx | 2 +- app/src/components/layout/sidebarRight/Header.tsx | 2 +- .../components/layout/sidebarRight/SideBarRight.tsx | 2 +- .../layout/sidebarRight/simulation/Simulations.tsx | 2 +- app/src/components/ui/ModuleToggle.tsx | 2 +- app/src/components/ui/Tools.tsx | 2 +- app/src/pages/Project.tsx | 2 +- app/src/store/useUIToggleStore.ts | 13 +++++++++++-- app/src/utils/shortcutkeys/handleShortcutKeys.ts | 10 +++++++++- 10 files changed, 28 insertions(+), 11 deletions(-) diff --git a/app/src/components/layout/sidebarLeft/Header.tsx b/app/src/components/layout/sidebarLeft/Header.tsx index 45df499..c2c1bff 100644 --- a/app/src/components/layout/sidebarLeft/Header.tsx +++ b/app/src/components/layout/sidebarLeft/Header.tsx @@ -2,7 +2,7 @@ import React from "react"; import { ToggleSidebarIcon } from "../../icons/HeaderIcons"; import { LogoIcon } from "../../icons/Logo"; import FileMenu from "../../ui/FileMenu"; -import useToggleStore from "../../../store/useUIToggleStore"; +import {useToggleStore} from "../../../store/useUIToggleStore"; import useModuleStore from "../../../store/useModuleStore"; const Header: React.FC = () => { diff --git a/app/src/components/layout/sidebarLeft/SideBarLeft.tsx b/app/src/components/layout/sidebarLeft/SideBarLeft.tsx index e50c76e..4a15466 100644 --- a/app/src/components/layout/sidebarLeft/SideBarLeft.tsx +++ b/app/src/components/layout/sidebarLeft/SideBarLeft.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react"; import ToggleHeader from "../../ui/inputs/ToggleHeader"; import Outline from "./Outline"; import Header from "./Header"; -import useToggleStore from "../../../store/useUIToggleStore"; +import {useToggleStore} from "../../../store/useUIToggleStore"; import Assets from "./Assets"; import useModuleStore from "../../../store/useModuleStore"; import Widgets from "./visualization/widgets/Widgets"; diff --git a/app/src/components/layout/sidebarRight/Header.tsx b/app/src/components/layout/sidebarRight/Header.tsx index 2673671..c806074 100644 --- a/app/src/components/layout/sidebarRight/Header.tsx +++ b/app/src/components/layout/sidebarRight/Header.tsx @@ -5,7 +5,7 @@ import { ActiveUser } from "../../../types/users"; import CollaborationPopup from "../../templates/CollaborationPopup"; import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor"; import { useSelectedUserStore } from "../../../store/useCollabStore"; -import useToggleStore from "../../../store/useUIToggleStore"; +import {useToggleStore} from "../../../store/useUIToggleStore"; import { ToggleSidebarIcon } from "../../icons/HeaderIcons"; import useModuleStore from "../../../store/useModuleStore"; diff --git a/app/src/components/layout/sidebarRight/SideBarRight.tsx b/app/src/components/layout/sidebarRight/SideBarRight.tsx index a5d4629..9ad3606 100644 --- a/app/src/components/layout/sidebarRight/SideBarRight.tsx +++ b/app/src/components/layout/sidebarRight/SideBarRight.tsx @@ -9,7 +9,7 @@ import { PropertiesIcon, SimulationIcon, } from "../../icons/SimulationIcons"; -import useToggleStore from "../../../store/useUIToggleStore"; +import {useToggleStore} from "../../../store/useUIToggleStore"; import Visualization from "./visualization/Visualization"; import Analysis from "./analysis/Analysis"; import Simulations from "./simulation/Simulations"; diff --git a/app/src/components/layout/sidebarRight/simulation/Simulations.tsx b/app/src/components/layout/sidebarRight/simulation/Simulations.tsx index f64a419..8464106 100644 --- a/app/src/components/layout/sidebarRight/simulation/Simulations.tsx +++ b/app/src/components/layout/sidebarRight/simulation/Simulations.tsx @@ -28,7 +28,7 @@ import { useSaveVersion, } from "../../../../store/builder/store"; import CompareLayOut from "../../../ui/compareVersion/CompareLayOut"; -import useToggleStore from "../../../../store/useUIToggleStore"; +import {useToggleStore} from "../../../../store/useUIToggleStore"; interface Event { modelName: string; diff --git a/app/src/components/ui/ModuleToggle.tsx b/app/src/components/ui/ModuleToggle.tsx index 456cfec..070e143 100644 --- a/app/src/components/ui/ModuleToggle.tsx +++ b/app/src/components/ui/ModuleToggle.tsx @@ -6,7 +6,7 @@ import { SimulationIcon, VisualizationIcon, } from "../icons/ExportModuleIcons"; -import useToggleStore from "../../store/useUIToggleStore"; +import {useToggleStore} from "../../store/useUIToggleStore"; import useVersionHistoryStore from "../../store/builder/store"; const ModuleToggle: React.FC = () => { diff --git a/app/src/components/ui/Tools.tsx b/app/src/components/ui/Tools.tsx index bb99cc8..fcc40b8 100644 --- a/app/src/components/ui/Tools.tsx +++ b/app/src/components/ui/Tools.tsx @@ -32,7 +32,7 @@ import { useActiveSubTool, useShortcutStore, } from "../../store/builder/store"; -import useToggleStore from "../../store/useUIToggleStore"; +import {useToggleStore} from "../../store/useUIToggleStore"; import { use3DWidget, useFloatingWidget, diff --git a/app/src/pages/Project.tsx b/app/src/pages/Project.tsx index 8419e13..d40a831 100644 --- a/app/src/pages/Project.tsx +++ b/app/src/pages/Project.tsx @@ -34,7 +34,7 @@ import Footer from "../components/footer/Footer"; import SelectFloorPlan from "../components/temporary/SelectFloorPlan"; import ControlsPlayer from "../components/layout/controls/ControlsPlayer"; import CompareLayOut from "../components/ui/compareVersion/CompareLayOut"; -import useToggleStore from "../store/useUIToggleStore"; +import {useToggleStore} from "../store/useUIToggleStore"; import RegularDropDown from "../components/ui/inputs/RegularDropDown"; import VersionSaved from "../components/layout/sidebarRight/versionHisory/VersionSaved"; import SimulationPlayer from "../components/ui/simulation/simulationPlayer"; diff --git a/app/src/store/useUIToggleStore.ts b/app/src/store/useUIToggleStore.ts index 9f5f583..1afef0e 100644 --- a/app/src/store/useUIToggleStore.ts +++ b/app/src/store/useUIToggleStore.ts @@ -6,7 +6,7 @@ interface ToggleState { setToggleUI: (value1: boolean, value2: boolean) => void; } -const useToggleStore = create((set) => ({ +export const useToggleStore = create((set) => ({ toggleUILeft: true, toggleUIRight: false, setToggleUI: (value1: boolean, value2: boolean) => { @@ -14,4 +14,13 @@ const useToggleStore = create((set) => ({ }, })); -export default useToggleStore; +interface PlayerState { + hidePlayer: boolean; + setHidePlayer: (hide: boolean) => void; +} + +// Create the Zustand store +export const usePlayerStore = create((set) => ({ + hidePlayer: false, // initial state + setHidePlayer: (hide) => set({ hidePlayer: hide }), // state updater +})); diff --git a/app/src/utils/shortcutkeys/handleShortcutKeys.ts b/app/src/utils/shortcutkeys/handleShortcutKeys.ts index df27712..860519b 100644 --- a/app/src/utils/shortcutkeys/handleShortcutKeys.ts +++ b/app/src/utils/shortcutkeys/handleShortcutKeys.ts @@ -1,6 +1,6 @@ import React, { useEffect } from "react"; import useModuleStore, { useThreeDStore } from "../../store/useModuleStore"; -import useToggleStore from "../../store/useUIToggleStore"; +import {useToggleStore} from "../../store/useUIToggleStore"; import { useActiveSubTool, useActiveTool, @@ -17,6 +17,7 @@ import useCameraModeStore, { } from "../../store/usePlayButtonStore"; import { detectModifierKeys } from "./detectModifierKeys"; import { useSelectedZoneStore } from "../../store/visualization/useZoneStore"; +import { useLogger } from "../../components/ui/log/LoggerContext"; const KeyPressListener: React.FC = () => { const { activeModule, setActiveModule } = useModuleStore(); @@ -34,6 +35,8 @@ const KeyPressListener: React.FC = () => { const { showShortcuts, setShowShortcuts } = useShortcutStore(); const { setWalkMode } = useCameraModeStore(); const { setIsVersionSaved } = useSaveVersion(); + const { isLogListVisible, setIsLogListVisible } = useLogger(); + const isTextInput = (element: Element | null): boolean => element instanceof HTMLInputElement || @@ -175,6 +178,10 @@ const KeyPressListener: React.FC = () => { setIsPlaying(true); } + if (keyCombination === "L") { + setIsLogListVisible(!isLogListVisible); + } + if (keyCombination === "ESCAPE") { setWalkMode(false); setActiveTool("cursor"); @@ -210,6 +217,7 @@ const KeyPressListener: React.FC = () => { toggleView, showShortcuts, isPlaying, + isLogListVisible ]); return null; From fb635198530ee1bb076f2c27d0005b7643b01e86 Mon Sep 17 00:00:00 2001 From: Vishnu Date: Wed, 21 May 2025 17:50:15 +0530 Subject: [PATCH 2/5] refactor: replace local state with usePlayerStore for hidePlayer in ControlsPlayer, SimulationPlayer, and KeyPressListener --- .../layout/controls/ControlsPlayer.tsx | 5 +++-- .../ui/simulation/simulationPlayer.tsx | 18 +++--------------- .../utils/shortcutkeys/handleShortcutKeys.ts | 13 +++++++++---- 3 files changed, 15 insertions(+), 21 deletions(-) diff --git a/app/src/components/layout/controls/ControlsPlayer.tsx b/app/src/components/layout/controls/ControlsPlayer.tsx index 724c3bb..484cd35 100644 --- a/app/src/components/layout/controls/ControlsPlayer.tsx +++ b/app/src/components/layout/controls/ControlsPlayer.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect } from "react"; import useCameraModeStore, { usePlayButtonStore, } from "../../../store/usePlayButtonStore"; @@ -8,12 +8,13 @@ import InputToggle from "../../ui/inputs/InputToggle"; import { EyeCloseIcon, WalkIcon } from "../../icons/ExportCommonIcons"; import { ExitIcon } from "../../icons/SimulationIcons"; import { useCamMode } from "../../../store/builder/store"; +import { usePlayerStore } from "../../../store/useUIToggleStore"; const ControlsPlayer: React.FC = () => { const { setIsPlaying } = usePlayButtonStore(); const { activeModule } = useModuleStore(); const { walkMode, toggleWalkMode } = useCameraModeStore(); - const [hidePlayer, setHidePlayer] = useState(false); + const { hidePlayer, setHidePlayer } = usePlayerStore(); const { camMode } = useCamMode(); const changeCamMode = () => { diff --git a/app/src/components/ui/simulation/simulationPlayer.tsx b/app/src/components/ui/simulation/simulationPlayer.tsx index 0a0efc7..2825014 100644 --- a/app/src/components/ui/simulation/simulationPlayer.tsx +++ b/app/src/components/ui/simulation/simulationPlayer.tsx @@ -23,6 +23,7 @@ import { useSubModuleStore } from "../../../store/useModuleStore"; import ProductionCapacity from "../analysis/ThroughputSummary"; import ThroughputSummary from "../analysis/ProductionCapacity"; import ROISummary from "../analysis/ROISummary"; +import { usePlayerStore } from "../../../store/useUIToggleStore"; const SimulationPlayer: React.FC = () => { const MAX_SPEED = 4; // Maximum speed @@ -31,7 +32,7 @@ const SimulationPlayer: React.FC = () => { const sliderRef = useRef(null); const [expand, setExpand] = useState(true); const [playSimulation, setPlaySimulation] = useState(false); - const [hidePlayer, setHidePlayer] = useState(false); + const { hidePlayer, setHidePlayer } = usePlayerStore(); const { speed, setSpeed } = useAnimationPlaySpeed(); const { setIsPlaying } = usePlayButtonStore(); @@ -111,22 +112,9 @@ const SimulationPlayer: React.FC = () => { const hourlySimulation = 25; const dailyProduction = 75; const monthlyROI = 50; - const { processBar, setProcessBar } = useProcessBar(); - // const process = [ - // { name: "process 1", completed: 0 }, // 0% completed - // { name: "process 2", completed: 20 }, // 20% completed - // { name: "process 3", completed: 40 }, // 40% completed - // { name: "process 4", completed: 60 }, // 60% completed - // { name: "process 5", completed: 80 }, // 80% completed - // { name: "process 6", completed: 100 }, // 100% completed - // { name: "process 7", completed: 0 }, // 0% completed - // { name: "process 8", completed: 50 }, // 50% completed - // { name: "process 9", completed: 90 }, // 90% completed - // { name: "process 10", completed: 30 }, // 30% completed - // ]; + const { processBar } = useProcessBar(); useEffect(() => { - // console.log('processBar: ', processBar); }, [processBar]) const intervals = [50, 20, 30, 40, 50, 60]; // in minutes diff --git a/app/src/utils/shortcutkeys/handleShortcutKeys.ts b/app/src/utils/shortcutkeys/handleShortcutKeys.ts index 860519b..b52c223 100644 --- a/app/src/utils/shortcutkeys/handleShortcutKeys.ts +++ b/app/src/utils/shortcutkeys/handleShortcutKeys.ts @@ -1,6 +1,6 @@ import React, { useEffect } from "react"; import useModuleStore, { useThreeDStore } from "../../store/useModuleStore"; -import {useToggleStore} from "../../store/useUIToggleStore"; +import { usePlayerStore, useToggleStore } from "../../store/useUIToggleStore"; import { useActiveSubTool, useActiveTool, @@ -36,7 +36,7 @@ const KeyPressListener: React.FC = () => { const { setWalkMode } = useCameraModeStore(); const { setIsVersionSaved } = useSaveVersion(); const { isLogListVisible, setIsLogListVisible } = useLogger(); - + const { hidePlayer, setHidePlayer } = usePlayerStore(); const isTextInput = (element: Element | null): boolean => element instanceof HTMLInputElement || @@ -182,6 +182,10 @@ const KeyPressListener: React.FC = () => { setIsLogListVisible(!isLogListVisible); } + if (keyCombination === "H") { + setHidePlayer(!hidePlayer); + } + if (keyCombination === "ESCAPE") { setWalkMode(false); setActiveTool("cursor"); @@ -198,7 +202,7 @@ const KeyPressListener: React.FC = () => { // Placeholder for future implementation if ( - ["Ctrl+Z", "Ctrl+Y", "Ctrl+Shift+Z", "Ctrl+H", "Ctrl+F"].includes( + ["Ctrl+Z", "Ctrl+Y", "Ctrl+Shift+Z", "Ctrl+F"].includes( keyCombination ) ) { @@ -217,7 +221,8 @@ const KeyPressListener: React.FC = () => { toggleView, showShortcuts, isPlaying, - isLogListVisible + isLogListVisible, + hidePlayer ]); return null; From 369fad07e286936995c6bf9f3bf031c5b3a87c57 Mon Sep 17 00:00:00 2001 From: Vishnu Date: Wed, 21 May 2025 17:59:55 +0530 Subject: [PATCH 3/5] feat: enhance shortcut helper with new shortcuts and icons for better navigation --- app/src/components/footer/shortcutHelper.tsx | 22 ++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/app/src/components/footer/shortcutHelper.tsx b/app/src/components/footer/shortcutHelper.tsx index aa927c5..405963e 100644 --- a/app/src/components/footer/shortcutHelper.tsx +++ b/app/src/components/footer/shortcutHelper.tsx @@ -30,7 +30,7 @@ import { DuplicateInstanceIcon, PlayIcon, } from "../icons/ShortcutIcons"; -import { CloseIcon } from "../icons/ExportCommonIcons"; +import { CloseIcon, EyeCloseIcon } from "../icons/ExportCommonIcons"; interface ShortcutItem { keys: string[]; @@ -52,6 +52,7 @@ const ShortcutHelper: React.FC = ({ setShowShortcuts, }) => { const shortcuts: ShortcutGroup[] = [ + // Essential { category: "Essential", items: [ @@ -86,13 +87,20 @@ const ShortcutHelper: React.FC = ({ icon: , }, { - keys: ["CTRL", "+", "?"], + keys: ["CTRL", "+", "SHIFT", "+", "?"], name: "Info", description: "Show Shortcut Info", icon: , }, + { + keys: ["L"], + name: "Log", + description: "Show Log list", + icon: , + }, ], }, + // Tools { category: "Tools", items: [ @@ -158,6 +166,7 @@ const ShortcutHelper: React.FC = ({ }, ], }, + // View & Navigation { category: "View & Navigation", items: [ @@ -193,6 +202,7 @@ const ShortcutHelper: React.FC = ({ }, ], }, + // Module Switching { category: "Module Switching", items: [ @@ -222,6 +232,7 @@ const ShortcutHelper: React.FC = ({ }, ], }, + // Selection { category: "Selection", items: [ @@ -251,6 +262,7 @@ const ShortcutHelper: React.FC = ({ }, ], }, + // Simulation { category: "Simulation", items: [ @@ -260,6 +272,12 @@ const ShortcutHelper: React.FC = ({ description: "Play Simulation", icon: , }, + { + keys: ["H"], + name: "Hide Player", + description: "Hide Simulation Player", + icon: , + }, ], }, ]; From 43f02efe9c2e04210d5cb36e0116309bcc442d24 Mon Sep 17 00:00:00 2001 From: Vishnu Date: Wed, 21 May 2025 18:00:52 +0530 Subject: [PATCH 4/5] feat: update KeyPressListener to hide log list on module switch --- app/src/utils/shortcutkeys/handleShortcutKeys.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/app/src/utils/shortcutkeys/handleShortcutKeys.ts b/app/src/utils/shortcutkeys/handleShortcutKeys.ts index b52c223..eb0e3c3 100644 --- a/app/src/utils/shortcutkeys/handleShortcutKeys.ts +++ b/app/src/utils/shortcutkeys/handleShortcutKeys.ts @@ -194,6 +194,7 @@ const KeyPressListener: React.FC = () => { clearSelectedZone(); setShowShortcuts(false); setIsVersionSaved(false); + setIsLogListVisible(false); } if (keyCombination === "Ctrl+Shift+?") { From ddbacf0353d8b32e90a8586b77aa6db7ee826d8c Mon Sep 17 00:00:00 2001 From: Vishnu Date: Thu, 22 May 2025 15:07:09 +0530 Subject: [PATCH 5/5] feat: implement CommentThreads component with styling and interaction logic --- .../layout/sidebarLeft/SideBarLeft.tsx | 6 +- .../layout/sidebarRight/SideBarRight.tsx | 6 +- .../ui/collaboration/CommentThreads.tsx | 59 ++++++++++++++ app/src/pages/Project.tsx | 2 + app/src/styles/main.scss | 76 +++++++++---------- app/src/styles/scene/comments.scss | 72 ++++++++++++++++++ 6 files changed, 175 insertions(+), 46 deletions(-) create mode 100644 app/src/components/ui/collaboration/CommentThreads.tsx create mode 100644 app/src/styles/scene/comments.scss diff --git a/app/src/components/layout/sidebarLeft/SideBarLeft.tsx b/app/src/components/layout/sidebarLeft/SideBarLeft.tsx index 4a15466..e983f9a 100644 --- a/app/src/components/layout/sidebarLeft/SideBarLeft.tsx +++ b/app/src/components/layout/sidebarLeft/SideBarLeft.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react"; import ToggleHeader from "../../ui/inputs/ToggleHeader"; import Outline from "./Outline"; import Header from "./Header"; -import {useToggleStore} from "../../../store/useUIToggleStore"; +import { useToggleStore } from "../../../store/useUIToggleStore"; import Assets from "./Assets"; import useModuleStore from "../../../store/useModuleStore"; import Widgets from "./visualization/widgets/Widgets"; @@ -36,9 +36,7 @@ const SideBarLeft: React.FC = () => { return (
diff --git a/app/src/components/layout/sidebarRight/SideBarRight.tsx b/app/src/components/layout/sidebarRight/SideBarRight.tsx index 9ad3606..582b085 100644 --- a/app/src/components/layout/sidebarRight/SideBarRight.tsx +++ b/app/src/components/layout/sidebarRight/SideBarRight.tsx @@ -9,7 +9,7 @@ import { PropertiesIcon, SimulationIcon, } from "../../icons/SimulationIcons"; -import {useToggleStore} from "../../../store/useUIToggleStore"; +import { useToggleStore } from "../../../store/useUIToggleStore"; import Visualization from "./visualization/Visualization"; import Analysis from "./analysis/Analysis"; import Simulations from "./simulation/Simulations"; @@ -63,9 +63,7 @@ const SideBarRight: React.FC = () => { return (
diff --git a/app/src/components/ui/collaboration/CommentThreads.tsx b/app/src/components/ui/collaboration/CommentThreads.tsx new file mode 100644 index 0000000..82cd6fb --- /dev/null +++ b/app/src/components/ui/collaboration/CommentThreads.tsx @@ -0,0 +1,59 @@ +import React, { useState } from "react"; +import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor"; + +const CommentThreads: React.FC = () => { + const [expand, setExpand] = useState(true); + const commentsedUsers = [ + { + userId: "1", + userName: "user", + }, + { + userId: "1", + userName: "Admin", + }, + ]; + + function getDetails(type?: "clicked") { + if (type === "clicked") { + setExpand(true); + } else { + setExpand((prev) => !prev); + } + } + + return ( +
+ +
+ ); +}; + +export default CommentThreads; diff --git a/app/src/pages/Project.tsx b/app/src/pages/Project.tsx index d40a831..1437021 100644 --- a/app/src/pages/Project.tsx +++ b/app/src/pages/Project.tsx @@ -38,6 +38,7 @@ import {useToggleStore} from "../store/useUIToggleStore"; import RegularDropDown from "../components/ui/inputs/RegularDropDown"; import VersionSaved from "../components/layout/sidebarRight/versionHisory/VersionSaved"; import SimulationPlayer from "../components/ui/simulation/simulationPlayer"; +import CommentThreads from "../components/ui/collaboration/CommentThreads"; const Project: React.FC = () => { let navigate = useNavigate(); @@ -180,6 +181,7 @@ const Project: React.FC = () => { )} +
); }; diff --git a/app/src/styles/main.scss b/app/src/styles/main.scss index 0e284e6..4ba72c7 100644 --- a/app/src/styles/main.scss +++ b/app/src/styles/main.scss @@ -1,48 +1,48 @@ // abstracts -@use 'abstracts/variables'; -@use 'abstracts/mixins'; -@use 'abstracts/functions'; +@use "abstracts/variables"; +@use "abstracts/mixins"; +@use "abstracts/functions"; // base -@use 'base/reset'; -@use 'base/typography'; -@use 'base/global'; -@use 'base/base'; +@use "base/reset"; +@use "base/typography"; +@use "base/global"; +@use "base/base"; // components -@use 'components/button'; -@use 'components/form'; -@use 'components/input'; -@use 'components/lists'; -@use 'components/moduleToggle'; -@use 'components/templates'; -@use 'components/tools'; -@use 'components/visualization/floating/energyConsumed'; -@use 'components/visualization/ui/styledWidgets'; -@use 'components/visualization/floating/common'; -@use 'components/marketPlace/marketPlace'; -@use 'components/menu/menu'; -@use 'components/confirmationPopUp'; -@use 'components/simulation/simulation'; -@use 'components/simulation/analysis'; -@use 'components/logs/logs'; -@use 'components/footer/footer.scss'; +@use "components/button"; +@use "components/form"; +@use "components/input"; +@use "components/lists"; +@use "components/moduleToggle"; +@use "components/templates"; +@use "components/tools"; +@use "components/visualization/floating/energyConsumed"; +@use "components/visualization/ui/styledWidgets"; +@use "components/visualization/floating/common"; +@use "components/marketPlace/marketPlace"; +@use "components/menu/menu"; +@use "components/confirmationPopUp"; +@use "components/simulation/simulation"; +@use "components/simulation/analysis"; +@use "components/logs/logs"; +@use "components/footer/footer.scss"; // layout -@use 'layout/loading'; -@use 'layout/sidebar'; -@use 'layout/popup'; -@use 'layout/toast'; -@use 'layout/skeleton'; -@use 'layout/compareLayoutPopUp'; -@use 'layout/compareLayout'; - +@use "layout/loading"; +@use "layout/sidebar"; +@use "layout/popup"; +@use "layout/toast"; +@use "layout/skeleton"; +@use "layout/compareLayoutPopUp"; +@use "layout/compareLayout"; // pages -@use 'pages/dashboard'; -@use 'pages/home'; -@use 'pages/realTimeViz'; -@use 'pages/userAuth'; +@use "pages/dashboard"; +@use "pages/home"; +@use "pages/realTimeViz"; +@use "pages/userAuth"; -// -@use './scene/scene' \ No newline at end of file +// +@use "./scene/scene"; +@use "./scene/comments"; diff --git a/app/src/styles/scene/comments.scss b/app/src/styles/scene/comments.scss new file mode 100644 index 0000000..af3bc99 --- /dev/null +++ b/app/src/styles/scene/comments.scss @@ -0,0 +1,72 @@ +@use "../abstracts/variables" as *; +@use "../abstracts/mixins" as *; + +.comments-threads-wrapper { + position: fixed; + top: 50%; + left: 50%; + padding: 4px; + background: var(--background-color); + border-radius: #{$border-radius-large} #{$border-radius-large} #{$border-radius-large} + 0; + backdrop-filter: blur(12px); + z-index: 1000; + transform: translateY(-100%); + outline: 1px solid var(--border-color); + transition: all 0.2s ease-out; + .comments-threads-container { + display: flex; + align-items: start; + flex-direction: column; + .users-commented { + @include flex-center; + .users { + height: 24px; + line-height: 24px; + width: 24px; + text-transform: uppercase; + border-radius: 50%; + } + } + .last-comment-details { + display: flex; + align-items: start; + flex-direction: column; + padding-top: 0; + height: 0; + width: 0; + overflow: hidden; + transition: all 0.2s; + .header { + @include flex-center; + gap: 10px; + .user-name { + text-transform: capitalize; + } + .time { + font-size: var(--font-size-small); + color: var(--input-text-color); + } + } + .message { + margin-top: 10px; + } + .replies { + margin-top: 10px; + font-size: var(--font-size-small); + color: var(--input-text-color); + } + } + .expand { + min-width: 200px; + max-width: 260px; + padding: 12px; + height: 100%; + } + } + .open { + .users-commented { + padding: 12px; + } + } +}