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; + } + } +}