v2-ui #94

Merged
Vishnu merged 38 commits from v2-ui into main 2025-05-26 05:09:47 +00:00
6 changed files with 175 additions and 46 deletions
Showing only changes of commit ddbacf0353 - Show all commits

View File

@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
import ToggleHeader from "../../ui/inputs/ToggleHeader"; import ToggleHeader from "../../ui/inputs/ToggleHeader";
import Outline from "./Outline"; import Outline from "./Outline";
import Header from "./Header"; import Header from "./Header";
import {useToggleStore} from "../../../store/useUIToggleStore"; import { useToggleStore } from "../../../store/useUIToggleStore";
import Assets from "./Assets"; import Assets from "./Assets";
import useModuleStore from "../../../store/useModuleStore"; import useModuleStore from "../../../store/useModuleStore";
import Widgets from "./visualization/widgets/Widgets"; import Widgets from "./visualization/widgets/Widgets";
@ -36,9 +36,7 @@ const SideBarLeft: React.FC = () => {
return ( return (
<div <div
className={`sidebar-left-wrapper ${ className={`sidebar-left-wrapper ${
(toggleUILeft && !isVersionSaved) || activeModule !== "simulation" toggleUILeft && !isVersionSaved ? "open" : "closed"
? "open"
: "closed"
}`} }`}
> >
<Header /> <Header />

View File

@ -9,7 +9,7 @@ import {
PropertiesIcon, PropertiesIcon,
SimulationIcon, SimulationIcon,
} from "../../icons/SimulationIcons"; } from "../../icons/SimulationIcons";
import {useToggleStore} from "../../../store/useUIToggleStore"; import { useToggleStore } from "../../../store/useUIToggleStore";
import Visualization from "./visualization/Visualization"; import Visualization from "./visualization/Visualization";
import Analysis from "./analysis/Analysis"; import Analysis from "./analysis/Analysis";
import Simulations from "./simulation/Simulations"; import Simulations from "./simulation/Simulations";
@ -63,9 +63,7 @@ const SideBarRight: React.FC = () => {
return ( return (
<div <div
className={`sidebar-right-wrapper ${ className={`sidebar-right-wrapper ${
(toggleUIRight && !isVersionSaved) || activeModule !== "simulation" toggleUIRight && !isVersionSaved ? "open" : "closed"
? "open"
: "closed"
}`} }`}
> >
<Header /> <Header />

View File

@ -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 (
<div className="comments-threads-wrapper">
<button
onPointerEnter={() => getDetails()}
onPointerLeave={() => getDetails()}
onClick={() => getDetails("clicked")}
className={`comments-threads-container ${expand ? "open" : "closed"}`}
>
<div className="users-commented">
{commentsedUsers.map((val, i) => (
<div
className="users"
key={val.userId}
style={{ background: getAvatarColor(i, val.userName) }}
>
{val.userName[0]}
</div>
))}
</div>
<div
className={`last-comment-details ${expand ? "expand" : ""}`}
>
<div className="header">
<div className="user-name">user</div>
<div className="time">4 mins, ago</div>
</div>
<div className="message">hello</div>
<div className="replies">0 replies</div>
</div>
</button>
</div>
);
};
export default CommentThreads;

View File

@ -38,6 +38,7 @@ import {useToggleStore} from "../store/useUIToggleStore";
import RegularDropDown from "../components/ui/inputs/RegularDropDown"; import RegularDropDown from "../components/ui/inputs/RegularDropDown";
import VersionSaved from "../components/layout/sidebarRight/versionHisory/VersionSaved"; import VersionSaved from "../components/layout/sidebarRight/versionHisory/VersionSaved";
import SimulationPlayer from "../components/ui/simulation/simulationPlayer"; import SimulationPlayer from "../components/ui/simulation/simulationPlayer";
import CommentThreads from "../components/ui/collaboration/CommentThreads";
const Project: React.FC = () => { const Project: React.FC = () => {
let navigate = useNavigate(); let navigate = useNavigate();
@ -180,6 +181,7 @@ const Project: React.FC = () => {
</> </>
)} )}
<VersionSaved /> <VersionSaved />
<CommentThreads />
</div> </div>
); );
}; };

View File

@ -1,48 +1,48 @@
// abstracts // abstracts
@use 'abstracts/variables'; @use "abstracts/variables";
@use 'abstracts/mixins'; @use "abstracts/mixins";
@use 'abstracts/functions'; @use "abstracts/functions";
// base // base
@use 'base/reset'; @use "base/reset";
@use 'base/typography'; @use "base/typography";
@use 'base/global'; @use "base/global";
@use 'base/base'; @use "base/base";
// components // components
@use 'components/button'; @use "components/button";
@use 'components/form'; @use "components/form";
@use 'components/input'; @use "components/input";
@use 'components/lists'; @use "components/lists";
@use 'components/moduleToggle'; @use "components/moduleToggle";
@use 'components/templates'; @use "components/templates";
@use 'components/tools'; @use "components/tools";
@use 'components/visualization/floating/energyConsumed'; @use "components/visualization/floating/energyConsumed";
@use 'components/visualization/ui/styledWidgets'; @use "components/visualization/ui/styledWidgets";
@use 'components/visualization/floating/common'; @use "components/visualization/floating/common";
@use 'components/marketPlace/marketPlace'; @use "components/marketPlace/marketPlace";
@use 'components/menu/menu'; @use "components/menu/menu";
@use 'components/confirmationPopUp'; @use "components/confirmationPopUp";
@use 'components/simulation/simulation'; @use "components/simulation/simulation";
@use 'components/simulation/analysis'; @use "components/simulation/analysis";
@use 'components/logs/logs'; @use "components/logs/logs";
@use 'components/footer/footer.scss'; @use "components/footer/footer.scss";
// layout // layout
@use 'layout/loading'; @use "layout/loading";
@use 'layout/sidebar'; @use "layout/sidebar";
@use 'layout/popup'; @use "layout/popup";
@use 'layout/toast'; @use "layout/toast";
@use 'layout/skeleton'; @use "layout/skeleton";
@use 'layout/compareLayoutPopUp'; @use "layout/compareLayoutPopUp";
@use 'layout/compareLayout'; @use "layout/compareLayout";
// pages // pages
@use 'pages/dashboard'; @use "pages/dashboard";
@use 'pages/home'; @use "pages/home";
@use 'pages/realTimeViz'; @use "pages/realTimeViz";
@use 'pages/userAuth'; @use "pages/userAuth";
// //
@use './scene/scene' @use "./scene/scene";
@use "./scene/comments";

View File

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