v2-ui #94
|
@ -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 />
|
||||||
|
|
|
@ -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 />
|
||||||
|
|
|
@ -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;
|
|
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -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";
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue