Dwinzo-Beta
/
Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: update loading styles and introduce faint gradient variables

This commit is contained in:
Vishnu 2025-03-29 19:02:02 +05:30
parent a327044b8b
commit 6cb8e1076e
8 changed files with 165 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/src/components/layout/sidebarRight/Header.tsx
View File

@ -1,4 +1,4 @@
import React, { useState } from "react"; import React, { useEffect, useState } from "react";
import { AppDockIcon } from "../../icons/HeaderIcons"; import { AppDockIcon } from "../../icons/HeaderIcons";
import orgImg from "../../../assets/orgTemp.png"; import orgImg from "../../../assets/orgTemp.png";
import { useActiveUsers } from "../../../store/store"; import { useActiveUsers } from "../../../store/store";
@ -14,6 +14,10 @@ const Header: React.FC = () => {
(user: ActiveUser) => user.userName !== userName (user: ActiveUser) => user.userName !== userName
); );
useEffect(() => {
console.log(activeUsers);
}, [])
const [userManagement, setUserManagement] = useState(false); const [userManagement, setUserManagement] = useState(false);
return ( return (

64
app/src/components/ui/componets/RealTimeVisulization.tsx
View File

@ -13,7 +13,6 @@ import { useAsset3dWidget, useZones } from "../../../store/store";
import { getZoneData } from "../../../services/realTimeVisulization/zoneData/getZones"; import { getZoneData } from "../../../services/realTimeVisulization/zoneData/getZones";
import { getZone2dData } from "../../../services/realTimeVisulization/zoneData/getZoneData"; import { getZone2dData } from "../../../services/realTimeVisulization/zoneData/getZoneData";
type Side = "top" | "bottom" | "left" | "right"; type Side = "top" | "bottom" | "left" | "right";
type FormattedZoneData = Record< type FormattedZoneData = Record<
@ -25,7 +24,7 @@ type FormattedZoneData = Record<
lockedPanels: Side[]; lockedPanels: Side[];
zoneId: string; zoneId: string;
zoneViewPortTarget: number[]; zoneViewPortTarget: number[];
zoneViewPortPosition: number[] zoneViewPortPosition: number[];
widgets: Widget[]; widgets: Widget[];
} }
>; >;
@ -45,8 +44,10 @@ const RealTimeVisulization: React.FC = () => {
const [droppedObjects, setDroppedObjects] = useState<any[]>([]); const [droppedObjects, setDroppedObjects] = useState<any[]>([]);
const [zonesData, setZonesData] = useState<FormattedZoneData>({}); const [zonesData, setZonesData] = useState<FormattedZoneData>({});
const { selectedZone, setSelectedZone } = useSelectedZoneStore(); const { selectedZone, setSelectedZone } = useSelectedZoneStore();
const { zones } = useZones() const { zones } = useZones();
const [floatingWidgets, setFloatingWidgets] = useState<Record<string, { zoneName: string; zoneId: string; objects: any[] }>>({}); const [floatingWidgets, setFloatingWidgets] = useState<
Record<string, { zoneName: string; zoneId: string; objects: any[] }>
>({});
const { widgetSelect, setWidgetSelect } = useAsset3dWidget(); const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
useEffect(() => { useEffect(() => {
async function GetZoneData() { async function GetZoneData() {
@ -57,28 +58,30 @@ const RealTimeVisulization: React.FC = () => {
if (!Array.isArray(response)) { if (!Array.isArray(response)) {
return; return;
} }
const formattedData = response.reduce<FormattedZoneData>((acc, zone) => { const formattedData = response.reduce<FormattedZoneData>(
acc[zone.zoneName] = { (acc, zone) => {
activeSides: [], acc[zone.zoneName] = {
panelOrder: [], activeSides: [],
lockedPanels: [], panelOrder: [],
zoneId: zone.zoneId, lockedPanels: [],
zoneViewPortTarget: zone.viewPortCenter, zoneId: zone.zoneId,
zoneViewPortPosition: zone.viewPortposition, zoneViewPortTarget: zone.viewPortCenter,
widgets: [], zoneViewPortPosition: zone.viewPortposition,
}; widgets: [],
return acc; };
}, {}); return acc;
},
{}
);
setZonesData(formattedData); setZonesData(formattedData);
} catch (error) { } catch (error) {
console.log('error: ', error); console.log("error: ", error);
} }
} }
GetZoneData(); GetZoneData();
}, []); // Removed `zones` from dependencies }, []); // Removed `zones` from dependencies
useEffect(() => { useEffect(() => {
setZonesData((prev) => { setZonesData((prev) => {
if (!selectedZone) return prev; if (!selectedZone) return prev;
@ -97,10 +100,8 @@ const RealTimeVisulization: React.FC = () => {
}; };
}); });
}, [selectedZone]); }, [selectedZone]);
useEffect(() => {
}, [floatingWidgets]) useEffect(() => {}, [floatingWidgets]);
const handleDrop = (event: React.DragEvent<HTMLDivElement>) => { const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
event.preventDefault(); event.preventDefault();
@ -121,24 +122,31 @@ const RealTimeVisulization: React.FC = () => {
position: [relativeY, relativeX], // Y first because of top/left style position: [relativeY, relativeX], // Y first because of top/left style
}; };
// Only set zone if it’s not already in the store (prevents overwriting objects) // Only set zone if it’s not already in the store (prevents overwriting objects)
const existingZone = useDroppedObjectsStore.getState().zones[selectedZone.zoneName]; const existingZone =
useDroppedObjectsStore.getState().zones[selectedZone.zoneName];
if (!existingZone) { if (!existingZone) {
useDroppedObjectsStore.getState().setZone(selectedZone.zoneName, selectedZone.zoneId); useDroppedObjectsStore
.getState()
.setZone(selectedZone.zoneName, selectedZone.zoneId);
} }
// Add the dropped object to the zone // Add the dropped object to the zone
useDroppedObjectsStore.getState().addObject(selectedZone.zoneName, newObject); useDroppedObjectsStore
.getState()
.addObject(selectedZone.zoneName, newObject);
setFloatingWidgets((prevWidgets) => ({ setFloatingWidgets((prevWidgets) => ({
...prevWidgets, ...prevWidgets,
[selectedZone.zoneName]: { [selectedZone.zoneName]: {
...prevWidgets[selectedZone.zoneName], ...prevWidgets[selectedZone.zoneName],
zoneName: selectedZone.zoneName, zoneName: selectedZone.zoneName,
zoneId: selectedZone.zoneId, zoneId: selectedZone.zoneId,
objects: [...(prevWidgets[selectedZone.zoneName]?.objects || []), newObject], objects: [
...(prevWidgets[selectedZone.zoneName]?.objects || []),
newObject,
],
}, },
})); }));
}; };
return ( return (
<div <div
ref={containerRef} ref={containerRef}
@ -149,7 +157,6 @@ const RealTimeVisulization: React.FC = () => {
width: isPlaying || activeModule !== "visualization" ? "100vw" : "", width: isPlaying || activeModule !== "visualization" ? "100vw" : "",
left: isPlaying || activeModule !== "visualization" ? "0%" : "", left: isPlaying || activeModule !== "visualization" ? "0%" : "",
}} }}
> >
<div <div
className="scene-container" className="scene-container"
@ -162,8 +169,7 @@ const RealTimeVisulization: React.FC = () => {
onDrop={(event) => handleDrop(event)} onDrop={(event) => handleDrop(event)}
onDragOver={(event) => event.preventDefault()} onDragOver={(event) => event.preventDefault()}
> >
<Scene />
</div> </div>
<DroppedObjects /> <DroppedObjects />
{activeModule === "visualization" && ( {activeModule === "visualization" && (

6
app/src/modules/collaboration/collabCams.tsx
View File

@ -147,6 +147,7 @@ const CamModelsGroup = () => {
const filteredData = data.cameraDatas.filter( const filteredData = data.cameraDatas.filter(
(camera: any) => camera.userData.email !== email (camera: any) => camera.userData.email !== email
); );
let a:any = [];
if (filteredData.length > 0) { if (filteredData.length > 0) {
loader.load(camModel, (gltf) => { loader.load(camModel, (gltf) => {
const newCams = filteredData.map((cam: any) => { const newCams = filteredData.map((cam: any) => {
@ -163,11 +164,10 @@ const CamModelsGroup = () => {
cam.rotation.z cam.rotation.z
); );
newModel.userData = cam.userData; newModel.userData = cam.userData;
if (!activeUsers.includes(cam.userData)) { a.push(cam.userData);
setActiveUsers([...activeUsers, cam.userData]);
}
return newModel; return newModel;
}); });
setActiveUsers(a);
setCams((prev) => [...prev, ...newCams]); setCams((prev) => [...prev, ...newCams]);
}); });
} }

3
app/src/styles/abstracts/variables.scss
View File

@ -58,6 +58,9 @@ $acent-gradient: linear-gradient(
#925df3 100% #925df3 100%
); // Light mode accent gradient ); // Light mode accent gradient
$faint-gradient: radial-gradient(circle, #bfe0f8 0%, #e9ebff 46%, #e2acff 100%);
$faint-gradient-dark: radial-gradient(circle, #31373b 0%, #48494b 46%, #52415c 100%);
// ======================================================================== // ========================================================================
// Typography // Typography
// ======================================================================== // ========================================================================

5
app/src/styles/base/base.scss
View File

@ -12,6 +12,7 @@
--accent-color: #{$accent-color}; // Primary accent color for light theme --accent-color: #{$accent-color}; // Primary accent color for light theme
--highlight-accent-color: #{$highlight-accent-color}; // Highlight color for light theme --highlight-accent-color: #{$highlight-accent-color}; // Highlight color for light theme
--accent-gradient-color: #{$acent-gradient}; // Primary accent color for light theme --accent-gradient-color: #{$acent-gradient}; // Primary accent color for light theme
--faint-gradient-color: #{$faint-gradient};
// Background colors // Background colors
--background-color: #{$background-color}; // Main background color --background-color: #{$background-color}; // Main background color
@ -46,6 +47,7 @@
--accent-color: #{$accent-color-dark}; // Primary accent color for dark theme --accent-color: #{$accent-color-dark}; // Primary accent color for dark theme
--highlight-accent-color: #{$highlight-accent-color-dark}; // Highlight color for dark theme --highlight-accent-color: #{$highlight-accent-color-dark}; // Highlight color for dark theme
--accent-gradient-color: #{$acent-gradient-dark}; // Primary accent color for light theme --accent-gradient-color: #{$acent-gradient-dark}; // Primary accent color for light theme
--faint-gradient-color: #{$faint-gradient-dark};
// Background colors // Background colors
--background-color: #{$background-color-dark}; // Main background color --background-color: #{$background-color-dark}; // Main background color
@ -84,7 +86,6 @@
} }
body { body {
background: var(--background-color); background: var(--background-color);
/* Font Sizes */ /* Font Sizes */
@ -134,4 +135,4 @@ body {
::-webkit-scrollbar-corner { ::-webkit-scrollbar-corner {
background: transparent; background: transparent;
/* Remove corner styling for scrollable containers */ /* Remove corner styling for scrollable containers */
} }

230
app/src/styles/components/menu/menu.scss
View File

@ -1,129 +1,127 @@
.menu-bar { .menu-bar {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
z-index: 5; z-index: 5;
background-color: var(--background-color); background-color: var(--background-color);
color: var(--text-color); color: var(--text-color);
box-shadow: var(--box-shadow-light); box-shadow: var(--box-shadow-light);
border-radius: 8px; border-radius: 8px;
.menu-buttons {
display: flex;
flex-direction: column;
height: 100%;
padding: 8px 4px;
min-width: 178px;
.menu-buttons { .menu-button-container {
position: relative;
height: 100%;
padding: 8px;
.menu-button {
width: 100%;
cursor: pointer;
transition: all 0.2s ease;
display: flex; display: flex;
flex-direction: column; align-items: center;
height: 100%; justify-content: space-between;
padding: 8px 4px; position: relative;
min-width: 178px;
.menu-button-container { .dropdown-icon {
position: relative; margin-left: 5px;
height: 100%; font-size: var(--font-size-small);
padding: 8px; color: #666666;
}
}
.menu-button { .dropdown-menu {
width: 100%; position: absolute;
cursor: pointer; top: 0;
transition: all 0.2s ease; left: 100%;
display: flex; background-color: var(--background-color);
align-items: center; min-width: 220px;
justify-content: space-between; border-radius: 4px;
position: relative; box-shadow: var(--box-shadow-light);
border: 1px solid var(--background-color);
z-index: 100;
padding: 5px 0;
.dropdown-icon { .menu-item-container {
margin-left: 5px; position: relative;
font-size: var(--font-size-small);
color: #666666;
}
}
.dropdown-menu { .menu-item {
position: absolute; display: flex;
top: 0; justify-content: space-between;
left: 100%; align-items: center;
background-color: var(--background-color); padding: 8px 20px;
min-width: 220px; cursor: pointer;
border-radius: 4px; white-space: nowrap;
box-shadow: var(--box-shadow-light); color: var(--text-color);
border: 1px solid var(--background-color);
z-index: 100;
padding: 5px 0;
.menu-item-container {
position: relative;
.menu-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 20px;
cursor: pointer;
white-space: nowrap;
color: var(--text-color);
&:hover {
background-color: var(--highlight-accent-color);
color: var(--highlight-accent-color);
}
.menu-item-right {
display: flex;
align-items: center;
gap: 15px;
.shortcut {
color: var(--text-color);
font-size: var(--font-size-small);
}
.icon {
font-size: var(--font-size-small);
color: var(--text-color);
}
}
}
.submenu {
position: absolute;
left: 100%;
top: 0;
background-color: var(--background-color);
min-width: 200px;
border-radius: 0 4px 4px 4px;
box-shadow: var(--box-shadow-light);
border: 1px solid var(--background-color);
z-index: 101;
.submenu-item {
padding: 8px 20px;
cursor: pointer;
display: flex;
justify-content: space-between;
color: var(--text-color);
&:hover {
background-color: var(--background-color-gray);
color: var(--highlight-accent-color);
}
.shortcut {
color: var(--text-color);
}
}
}
}
}
&:hover { &:hover {
background-color: var(--highlight-accent-color); background-color: var(--highlight-accent-color);
color: var(--highlight-accent-color); color: var(--highlight-accent-color);
} }
}
}
}
.split { .menu-item-right {
display: flex;
align-items: center;
gap: 15px;
.shortcut {
color: var(--text-color);
font-size: var(--font-size-small);
}
.icon {
font-size: var(--font-size-small);
color: var(--text-color);
}
}
}
.submenu {
position: absolute;
left: 100%;
top: 0;
background-color: var(--background-color);
min-width: 200px;
border-radius: 0 4px 4px 4px;
box-shadow: var(--box-shadow-light);
border: 1px solid var(--background-color);
z-index: 101;
.submenu-item {
padding: 8px 20px;
cursor: pointer;
display: flex;
justify-content: space-between;
color: var(--text-color);
&:hover {
background-color: var(--background-color-gray);
color: var(--highlight-accent-color);
}
.shortcut {
color: var(--text-color);
}
}
}
}
}
&:hover {
background-color: var(--highlight-accent-color);
color: var(--highlight-accent-color);
}
}
}
.split {
width: 100%; width: 100%;
height: 1px; height: 1px;
background-color: #E0DFFF; background-color: #e0dfff;
} }
}

7
app/src/styles/layout/loading.scss
View File

@ -18,12 +18,7 @@
&::after { &::after {
content: ""; content: "";
position: absolute; position: absolute;
background: radial-gradient( background: var(--faint-gradient-color);
circle,
#bfe0f8 0%,
#e9ebff 46%,
#e2acff 100%
);
height: 50vh; height: 50vh;
width: 50vw; width: 50vw;
top: 0; top: 0;

8
app/src/styles/pages/userAuth.scss
View File

@ -10,7 +10,6 @@
color: var(--text-color); color: var(--text-color);
height: 100vh; height: 100vh;
background-color: var(--background-color); background-color: var(--background-color);
background-color: #fcfdfd;
position: relative; position: relative;
z-index: 1; z-index: 1;
.logo-icon { .logo-icon {
@ -168,12 +167,7 @@
&::after { &::after {
content: ""; content: "";
position: absolute; position: absolute;
background: radial-gradient( background: var(--faint-gradient-color);
circle,
#bfe0f8 0%,
#e9ebff 46%,
#e2acff 100%
);
height: 50vh; height: 50vh;
width: 50vw; width: 50vw;
top: 0; top: 0;