Add new images and update styles for visualization components

This commit is contained in:
Nalvazhuthi 2025-03-29 17:56:50 +05:30
parent 893d01ee4e
commit ad7f4bbfd6
19 changed files with 1178 additions and 49 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

View File

@ -559,7 +559,7 @@ export const DublicateIcon = () => {
fillRule="evenodd"
clipRule="evenodd"
d="M14.3125 11.375C14.3125 11.7545 14.0045 12.0625 13.625 12.0625H8.125C7.7455 12.0625 7.4375 11.7545 7.4375 11.375V5.875C7.4375 5.4955 7.7455 5.1875 8.125 5.1875H13.625C14.0045 5.1875 14.3125 5.4955 14.3125 5.875V11.375ZM13.625 4.5H8.125C7.36566 4.5 6.75 5.11566 6.75 5.875V11.375C6.75 12.1343 7.36566 12.75 8.125 12.75H13.625C14.3843 12.75 15 12.1343 15 11.375V5.875C15 5.11566 14.3843 4.5 13.625 4.5ZM11.5625 14.125C11.5625 14.5045 11.2545 14.8125 10.875 14.8125H5.375C4.9955 14.8125 4.6875 14.5045 4.6875 14.125V8.625C4.6875 8.2455 4.9955 7.9375 5.375 7.9375H6.0625V7.25H5.375C4.61566 7.25 4 7.86566 4 8.625V14.125C4 14.8843 4.61566 15.5 5.375 15.5H10.875C11.6343 15.5 12.25 14.8843 12.25 14.125V13.4375H11.5625V14.125Z"
fill="#6F42C1"
fill="#5D5F63"
/>
</svg>
);

View File

@ -1,13 +1,105 @@
import React, { useState } from "react";
import Search from "../../ui/inputs/Search";
import vehicle from "../../../assets/image/vehicles.png";
import workStation from "../../../assets/image/workStation.png";
import machines from "../../../assets/image/machines.png";
import feneration from "../../../assets/image/feneration.png";
import worker from "../../../assets/image/worker.png";
const Assets: React.FC = () => {
const [searchValue, setSearchValue] = useState<string>("");
const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
const handleSearchChange = (value: string) => {
setSearchValue(value);
console.log(value); // Log the search value if needed
setSelectedCategory(null); // Reset selected category when search changes
};
const categoryList = [
{
assetName: "Doors",
assetImage: "",
category: "Feneration",
categoryImage: feneration,
},
{
assetName: "Windows",
assetImage: "",
category: "Feneration",
categoryImage: feneration,
},
{
assetName: "Pillars",
assetImage: "",
category: "Feneration",
categoryImage: feneration,
},
{
assetName: "Forklift",
assetImage: "",
category: "Vehicles",
categoryImage: vehicle,
},
{
assetName: "AGV",
assetImage: "",
category: "Vehicles",
categoryImage: vehicle,
},
{
assetName: "Pallet",
assetImage: "",
category: "Workstation",
categoryImage: workStation,
},
{
assetName: "Controller",
assetImage: "",
category: "Workstation",
categoryImage: workStation,
},
{
assetName: "Conveyor",
assetImage: "",
category: "Workstation",
categoryImage: workStation,
},
{
assetName: "VMC",
assetImage: "",
category: "Machines",
categoryImage: machines,
},
{
assetName: "CMC",
assetImage: "",
category: "Machines",
categoryImage: machines,
},
{
assetName: "Male Worker",
assetImage: "",
category: "Workers",
categoryImage: worker,
},
{
assetName: "Female Worker",
assetImage: "",
category: "Workers",
categoryImage: worker,
},
];
// Get unique categories
const uniqueCategories = Array.from(
new Set(categoryList.map((asset) => asset.category))
);
// Filter assets based on the selected category
const filteredAssets =
selectedCategory !== null
? categoryList.filter((asset) => asset.category === selectedCategory)
: [];
return (
<div className="assets-container">
<Search onChange={handleSearchChange} />
@ -15,11 +107,58 @@ const Assets: React.FC = () => {
<div className="searched-content">
<p>Results for "{searchValue}"</p>
</div>
) : selectedCategory ? (
<div className="assets-wrapper">
{/* Back Button */}
<div
className="back-button"
onClick={() => setSelectedCategory(null)}
>
Back
</div>
<h2>{selectedCategory}</h2>
<div className="assets-container">
{filteredAssets.map((asset, index) => (
<div key={index} className="assets">
<img
src={asset.assetImage}
alt={asset.assetName}
className="asset-image"
/>
<div className="asset-name">{asset.assetName}</div>
</div>
))}
</div>
</div>
) : (
<></>
<div className="assets-wrapper">
<h2>Categories</h2>
<div className="categories-container">
{uniqueCategories.map((category, index) => {
const categoryInfo = categoryList.find(
(asset) => asset.category === category
);
return (
<div
key={index}
className="category"
onClick={() => setSelectedCategory(category)}
>
<img
src={categoryInfo?.categoryImage || ""}
alt={category}
className="category-image"
/>
<div className="category-name">{category}</div>
</div>
);
})}
</div>
</div>
)}
</div>
);
};
export default Assets;

View File

@ -163,7 +163,7 @@ const RealTimeVisulization: React.FC = () => {
onDragOver={(event) => event.preventDefault()}
>
<Scene />
</div>
<DroppedObjects />
{activeModule === "visualization" && (

View File

@ -253,7 +253,8 @@ const MultiLevelDropdown = ({
className={`dropdown-button ${open ? "open" : ""}`}
onClick={() => setOpen(!open)}
>
{displayLabel} <span className="icon"></span>
<div className="label">{displayLabel}</div>
<span className="icon"></span>
</button>
{open && (
<div className="dropdown-menu">

View File

@ -0,0 +1,604 @@
import React, { useState } from "react";
const MenuBar = () => {
const [activeMenu, setActiveMenu] = useState<string | null>(null);
const [activeSubMenu, setActiveSubMenu] = useState<string | null>(null);
// State to track selection for all menu items
const [selectedItems, setSelectedItems] = useState<Record<string, boolean>>(
{}
);
// Function to toggle selection for a specific item
const toggleSelection = (itemName: string) => {
setSelectedItems((prev) => ({
...prev,
[itemName]: !prev[itemName], // Toggle the selection state
}));
};
return (
<div className="menu-bar">
{/* Top-level menu buttons */}
<div className="menu-buttons">
{/* File Menu */}
<div
className="menu-button-container"
onMouseEnter={() => setActiveMenu("File")}
onMouseLeave={() => {
setActiveMenu(null);
setActiveSubMenu(null);
}}
>
<div className="menu-button">
File
<span className="dropdown-icon"></span>
</div>
{/* File Dropdown */}
{activeMenu === "File" && (
<div className="dropdown-menu">
{/* New File */}
<div
className="menu-item-container"
onClick={() => toggleSelection("New File")}
>
<div className="menu-item">
<span>
{selectedItems["New File"] && "✓ "}
New File
</span>
<div className="menu-item-right">
<span className="shortcut">Ctrl + N</span>
</div>
</div>
</div>
{/* Open Local File */}
<div
className="menu-item-container"
onClick={() => toggleSelection("Open Local File")}
>
<div className="menu-item">
<span>
{selectedItems["Open Local File"] && "✓ "}
Open Local File
</span>
<div className="menu-item-right">
<span className="shortcut">Ctrl + O</span>
</div>
</div>
</div>
{/* Save Version */}
<div
className="menu-item-container"
onClick={() => toggleSelection("Save Version")}
>
<div className="menu-item">
<span>
{selectedItems["Save Version"] && "✓ "}
Save Version
</span>
</div>
<div className="split"></div>
</div>
{/* Make a Copy */}
<div
className="menu-item-container"
onClick={() => toggleSelection("Make a Copy")}
>
<div className="menu-item">
<span>
{selectedItems["Make a Copy"] && "✓ "}
Make a Copy
</span>
</div>
</div>
{/* Share */}
<div
className="menu-item-container"
onClick={() => toggleSelection("Share")}
>
<div className="menu-item">
<span>
{selectedItems["Share"] && "✓ "}
Share
</span>
</div>
</div>
{/* Rename */}
<div
className="menu-item-container"
onClick={() => toggleSelection("Rename")}
>
<div className="menu-item">
<span>
{selectedItems["Rename"] && "✓ "}
Rename
</span>
</div>
<div className="split"></div>
</div>
{/* Import */}
<div
className="menu-item-container"
onClick={() => toggleSelection("Import")}
>
<div className="menu-item">
<span>
{selectedItems["Import"] && "✓ "}
Import
</span>
</div>
</div>
{/* Close File */}
<div
className="menu-item-container"
onClick={() => toggleSelection("Close File")}
>
<div className="menu-item">
<span>
{selectedItems["Close File"] && "✓ "}
Close File
</span>
</div>
</div>
</div>
)}
</div>
{/* Edit Menu */}
<div
className="menu-button-container"
onMouseEnter={() => setActiveMenu("Edit")}
onMouseLeave={() => {
setActiveMenu(null);
setActiveSubMenu(null);
}}
>
<div className="menu-button">
Edit
<span className="dropdown-icon"></span>
</div>
{/* Edit Dropdown */}
{activeMenu === "Edit" && (
<div className="dropdown-menu">
{/* Undo */}
<div
className="menu-item-container"
onClick={() => toggleSelection("Undo")}
>
<div className="menu-item">
<span>
{selectedItems["Undo"] && "✓ "}
Undo
</span>
<div className="menu-item-right">
<span className="shortcut">Ctrl + Z</span>
</div>
</div>
</div>
{/* Redo */}
<div
className="menu-item-container"
onClick={() => toggleSelection("Redo")}
>
<div className="menu-item">
<span>
{selectedItems["Redo"] && "✓ "}
Redo
</span>
<div className="menu-item-right">
<span className="shortcut">Ctrl + Shift + Z</span>
</div>
</div>
<div className="split"></div>
</div>
{/* Undo History */}
<div
className="menu-item-container"
onClick={() => toggleSelection("Undo History")}
>
<div className="menu-item">
<span>
{selectedItems["Undo History"] && "✓ "}
Undo History
</span>
</div>
</div>
{/* Redo History */}
<div
className="menu-item-container"
onClick={() => toggleSelection("Redo History")}
>
<div className="menu-item">
<span>
{selectedItems["Redo History"] && "✓ "}
Redo History
</span>
</div>
<div className="split"></div>
</div>
{/* Find */}
<div
className="menu-item-container"
onClick={() => toggleSelection("Find")}
>
<div className="menu-item">
<span>
{selectedItems["Find"] && "✓ "}
Find
</span>
<div className="menu-item-right">
<span className="shortcut">Ctrl + F</span>
</div>
</div>
</div>
{/* Delete */}
<div
className="menu-item-container"
onClick={() => toggleSelection("Delete")}
>
<div className="menu-item">
<span>
{selectedItems["Delete"] && "✓ "}
Delete
</span>
</div>
</div>
{/* Select by... */}
<div
className="menu-item-container"
onClick={() => toggleSelection("Select by...")}
>
<div className="menu-item">
<span>
{selectedItems["Select by..."] && "✓ "}
Select by...
</span>
</div>
</div>
{/* Keymap */}
<div
className="menu-item-container"
onClick={() => toggleSelection("Keymap")}
>
<div className="menu-item">
<span>
{selectedItems["Keymap"] && "✓ "}
Keymap
</span>
</div>
</div>
</div>
)}
</div>
{/* View Menu */}
<div
className="menu-button-container"
onMouseEnter={() => setActiveMenu("View")}
onMouseLeave={() => {
setActiveMenu(null);
setActiveSubMenu(null);
}}
>
<div className="menu-button">
View
<span className="dropdown-icon"></span>
</div>
{/* View Dropdown */}
{activeMenu === "View" && (
<div className="dropdown-menu">
{/* Grid */}
<div
className={"menu-item-container"}
onClick={() => toggleSelection("Grid")}
>
<div className="menu-item">
<span>
{selectedItems["Grid"] && "✓ "}
Grid
</span>
</div>
</div>
{/* Gizmo */}
<div
className="menu-item-container"
onMouseEnter={() => setActiveSubMenu("View-Gizmo")}
onMouseLeave={() => setActiveSubMenu(null)}
>
<div className="menu-item">
<span>
{selectedItems["Gizmo"] && "✓ "}
Gizmo
</span>
<span className="icon"></span>
</div>
<div className="split"></div>
{/* Gizmo Submenu */}
{activeSubMenu === "View-Gizmo" && (
<div className="submenu">
{/* Visibility */}
<div
className="submenu-item"
onClick={() => toggleSelection("Visibility")}
>
<span>
{selectedItems["Visibility"] && "✓ "}
Visibility
</span>
</div>
{/* Cube view */}
<div
className="submenu-item"
onClick={() => toggleSelection("Cube view")}
>
<span>
{selectedItems["Cube view"] && "✓ "}
Cube view
</span>
</div>
{/* Sphere view */}
<div
className="submenu-item"
onClick={() => toggleSelection("Sphere view")}
>
<span>
{selectedItems["Sphere view"] && "✓ "}
Sphere view
</span>
</div>
{/* Custom settings */}
<div
className="submenu-item"
onClick={() => toggleSelection("Custom settings")}
>
<span>
{selectedItems["Custom settings"] && "✓ "}
Custom settings
</span>
</div>
</div>
)}
</div>
{/* Zoom */}
<div
className="menu-item-container"
onClick={() => toggleSelection("Zoom")}
>
<div className="menu-item">
<span>
{selectedItems["Zoom"] && "✓ "}
Zoom
</span>
</div>
</div>
{/* Full Screen */}
<div
className="menu-item-container"
onClick={() => toggleSelection("Full Screen")}
>
<div className="menu-item">
<span>
{selectedItems["Full Screen"] && "✓ "}
Full Screen
</span>
<div className="menu-item-right">
<span className="shortcut">F11</span>
</div>
</div>
</div>
</div>
)}
</div>
{/* Version History Menu */}
<div
className="menu-button-container"
onMouseEnter={() => setActiveMenu("Version history")}
onMouseLeave={() => {
setActiveMenu(null);
setActiveSubMenu(null);
}}
>
<div className="menu-button">
Version history
</div>
</div>
{/* Export As Menu */}
<div
className="menu-button-container"
onMouseEnter={() => setActiveMenu("Export as...")}
onMouseLeave={() => {
setActiveMenu(null);
setActiveSubMenu(null);
}}
>
<div className="menu-button">
Export as...
</div>
</div>
{/* Apps Menu */}
<div
className="menu-button-container"
onMouseEnter={() => setActiveMenu("Apps")}
onMouseLeave={() => {
setActiveMenu(null);
setActiveSubMenu(null);
}}
>
<div className="menu-button">
Apps
<span className="dropdown-icon"></span>
</div>
{/* Apps Dropdown */}
{activeMenu === "Apps" && (
<div className="dropdown-menu">
{/* New App */}
<div
className="menu-item-container"
onClick={() => toggleSelection("New App")}
>
<div className="menu-item">
<span>
{selectedItems["New App"] && "✓ "}
New App
</span>
</div>
<div className="split"></div>
</div>
{/* Work-flow Monitor */}
<div
className="menu-item-container"
onClick={() => toggleSelection("Work-flow Monitor")}
>
<div className="menu-item">
<span>
{selectedItems["Work-flow Monitor"] && "✓ "}
Work-flow Monitor
</span>
</div>
</div>
{/* Temperature Visualizer */}
<div
className="menu-item-container"
onClick={() => toggleSelection("Temperature Visualizer")}
>
<div className="menu-item">
<span>
{selectedItems["Temperature Visualizer"] && "✓ "}
Temperature Visualizer
</span>
</div>
</div>
{/* View all */}
<div
className="menu-item-container"
onClick={() => toggleSelection("View all")}
>
<div className="menu-item">
<span>
{selectedItems["View all"] && "✓ "}
View all
</span>
</div>
</div>
</div>
)}
</div>
{/* Help Menu */}
<div
className="menu-button-container"
onMouseEnter={() => setActiveMenu("Help")}
onMouseLeave={() => {
setActiveMenu(null);
setActiveSubMenu(null);
}}
>
<div className="menu-button">
Help
<span className="dropdown-icon"></span>
</div>
{/* Help Dropdown */}
{activeMenu === "Help" && (
<div className="dropdown-menu">
{/* Shortcuts */}
<div
className="menu-item-container"
onClick={() => toggleSelection("Shortcuts")}
>
<div className="menu-item">
<span>
{selectedItems["Shortcuts"] && "✓ "}
Shortcuts
</span>
<div className="menu-item-right">
<span className="shortcut">Ctrl + Shift + ?</span>
</div>
</div>
</div>
{/* Manual */}
<div
className="menu-item-container"
onClick={() => toggleSelection("Manual")}
>
<div className="menu-item">
<span>
{selectedItems["Manual"] && "✓ "}
Manual
</span>
</div>
</div>
{/* Video Tutorials */}
<div
className="menu-item-container"
onClick={() => toggleSelection("Video Tutorials")}
>
<div className="menu-item">
<span>
{selectedItems["Video Tutorials"] && "✓ "}
Video Tutorials
</span>
</div>
</div>
{/* Report a bug */}
<div
className="menu-item-container"
onClick={() => toggleSelection("Report a bug")}
>
<div className="menu-item">
<span>
{selectedItems["Report a bug"] && "✓ "}
Report a bug
</span>
</div>
</div>
</div>
)}
</div>
</div>
</div>
);
};
export default MenuBar;

View File

@ -104,25 +104,34 @@ body {
/* Apply custom scrollbar styles globally */
::-webkit-scrollbar {
width: 8px; /* Width of the scrollbar */
height: 8px; /* Height for horizontal scrollbars */
width: 8px;
/* Width of the scrollbar */
height: 8px;
/* Height for horizontal scrollbars */
}
::-webkit-scrollbar-track {
background: transparent; /* Background of the scrollbar track */
border-radius: 4px; /* Rounded corners */
background: transparent;
/* Background of the scrollbar track */
border-radius: 4px;
/* Rounded corners */
}
::-webkit-scrollbar-thumb {
background: var(--accent-color); /* Scrollbar handle color */
border-radius: 4px; /* Rounded corners */
border: 2px solid #f4f4f4; /* Padding around the scrollbar handle */
background: var(--accent-color);
/* Scrollbar handle color */
border-radius: 4px;
/* Rounded corners */
border: 2px solid #f4f4f4;
/* Padding around the scrollbar handle */
}
::-webkit-scrollbar-thumb:hover {
background: var(--accent-color); /* Handle color on hover */
background: var(--accent-color);
/* Handle color on hover */
}
::-webkit-scrollbar-corner {
background: transparent; /* Remove corner styling for scrollable containers */
background: transparent;
/* Remove corner styling for scrollable containers */
}

View File

@ -28,12 +28,14 @@
.toggle-header-container {
@include flex-center;
padding: 6px 12px;
.toggle-header-item {
width: 100%;
text-align: center;
padding: 4px 12px;
border-radius: #{$border-radius-large};
}
.active {
background-color: var(--accent-color);
color: var(--primary-color);
@ -46,6 +48,7 @@
padding: 8px 10px;
background: var(--background-color);
z-index: 1;
.search-container {
@include flex-center;
width: 100%;
@ -83,11 +86,13 @@
border: none;
cursor: pointer;
background-color: transparent;
&:hover {
background-color: var(--highlight-accent-color);
}
}
}
.active {
border: 1px solid var(--accent-color);
}
@ -96,9 +101,11 @@
.kebab-menu-container {
position: relative;
@include flex-center;
.kebab-icon {
@include flex-center;
}
.menu-list {
position: absolute;
left: 10px;
@ -109,6 +116,7 @@
z-index: 1;
padding: 8px 4px;
width: 170px;
.menu-item {
margin: 2px 0;
padding: 2px 4px;
@ -116,25 +124,31 @@
border-radius: #{$border-radius-small};
display: flex;
gap: 2px;
&:hover {
background-color: var(--background-color-secondary);
}
.icon-container {
@include flex-center;
height: 18px;
width: 18px;
path {
stroke: var(--accent-color);
}
}
}
.selected {
background-color: var(--highlight-accent-color);
color: var(--accent-color);
&:hover {
background-color: var(--highlight-accent-color);
}
}
input {
display: none;
}
@ -144,6 +158,7 @@
.project-dropdowm-container {
position: relative;
height: 32px;
.project-name {
line-height: 32px;
height: 100%;
@ -158,6 +173,7 @@
border-radius: 6px;
position: relative;
cursor: pointer;
.dropdown-header {
height: 100%;
display: flex;
@ -180,14 +196,17 @@
left: 0;
top: 110%;
padding: 4px;
.dropdown-search {
margin-bottom: 4px;
}
.option {
padding: 2px 4px;
cursor: pointer;
flex-direction: row !important;
border-radius: #{$border-radius-small};
&:hover {
color: var(--accent-color);
background-color: var(--highlight-accent-color);
@ -203,6 +222,7 @@
.input.default {
width: 100%;
position: relative;
.dropdown {
top: 3px;
right: 3px;
@ -210,6 +230,7 @@
background: var(--highlight-accent-color);
border-radius: #{$border-radius-small};
padding: 1px 4px;
.active-option {
color: var(--accent-color);
font-size: var(--font-size-small);
@ -223,6 +244,7 @@ input {
border-radius: #{$border-radius-small};
border: 1px solid var(--border-color);
outline: none;
&:focus,
&:active {
border: 1px solid var(--accent-color);
@ -232,14 +254,17 @@ input {
.eye-dropper-input-container {
display: flex;
align-items: center;
.label {
width: 40%;
}
.input-container {
width: 60%;
position: relative;
@include flex-center;
gap: 4px;
.eye-picker-button {
height: 24px;
min-width: 24px;
@ -248,6 +273,7 @@ input {
background: var(--background-color-secondary);
cursor: pointer;
}
.active {
background: var(--accent-color);
}
@ -264,6 +290,13 @@ input {
border: 1px solid var(--border-color) !important;
padding: 5px 10px;
.label {
white-space: nowrap;
overflow: hidden;
max-width: 80%;
text-overflow: ellipsis;
}
// font-size: 12px;
cursor: pointer;
border-radius: 5px;
@ -295,9 +328,11 @@ input {
display: flex;
flex-direction: column;
gap: 6px;
.nested-dropdown {
margin-left: 0;
}
padding: 10px;
}
@ -306,7 +341,7 @@ input {
padding: 5px 10px;
text-decoration: none;
color: var(--text-color);
font-size: 14px;
font-size: var(--font-size-regular);
cursor: pointer;
transition: background-color 0.3s ease;
@ -324,10 +359,11 @@ input {
justify-content: space-between;
padding: 5px 10px;
cursor: pointer;
font-size: 14px;
font-size: var(--font-size-regular);
color: var(--text-color);
transition: background-color 0.3s ease;
border-radius: #{$border-radius-small};
.arrow-container {
@include flex-center;
}
@ -342,7 +378,7 @@ input {
}
.icon {
font-size: 12px;
font-size: var(--font-size-small);
margin-left: 5px;
}
}
@ -429,6 +465,7 @@ input {
outline: 3px solid var(--accent-color);
outline-offset: -3px;
transform: translateY(-5px);
&:hover {
transform: scale(1.1) translateY(-5px);
}
@ -530,6 +567,7 @@ input {
.labeled-button-container {
@include flex-space-between;
padding: 6px 12px;
button {
padding: 2px 32px;
border: none;
@ -538,6 +576,7 @@ input {
background: var(--accent-color);
transition: all 0.2s;
cursor: pointer;
&:hover {
color: var(--primary-color);
}
@ -548,12 +587,15 @@ input {
margin-bottom: 6px;
padding: 6px 12px;
@include flex-space-between;
.label {
width: 40%;
}
.regularDropdown-container {
width: 60%;
}
.default {
width: 60%;
}
@ -562,6 +604,7 @@ input {
.multi-email-invite-input-container {
@include flex-space-between;
gap: 20px;
.multi-email-invite-input {
width: 100%;
display: flex;
@ -571,24 +614,29 @@ input {
flex-wrap: wrap;
max-height: 180px;
overflow: auto;
input {
border: none;
&::placeholder {
color: var(--text-disabled);
}
}
.entered-emails {
@include flex-center;
gap: 2px;
background: var(--background-color-gray);
padding: 0 4px;
border-radius: #{$border-radius-large};
span {
height: 14px;
width: 14px;
line-height: 12px;
text-align: center;
border-radius: #{$border-radius-small};
&:hover {
background: var(--accent-color);
color: var(--primary-color);
@ -596,12 +644,14 @@ input {
}
}
}
.invite-button {
padding: 4px 12px;
border-radius: #{$border-radius-large};
background: var(--accent-color);
color: var(--primary-color);
}
.multi-email-invite-input.active {
border: 1px solid var(--accent-color);
}

View File

@ -0,0 +1,129 @@
.menu-bar {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 5;
background-color: var(--background-color);
color: var(--text-color);
box-shadow: var(--box-shadow-light);
border-radius: 8px;
.menu-buttons {
display: flex;
flex-direction: column;
height: 100%;
padding: 8px 4px;
min-width: 178px;
.menu-button-container {
position: relative;
height: 100%;
padding: 8px;
.menu-button {
width: 100%;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
.dropdown-icon {
margin-left: 5px;
font-size: var(--font-size-small);
color: #666666;
}
}
.dropdown-menu {
position: absolute;
top: 0;
left: 100%;
background-color: var(--background-color);
min-width: 220px;
border-radius: 4px;
box-shadow: var(--box-shadow-light);
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 {
background-color: var(--highlight-accent-color);
color: var(--highlight-accent-color);
}
}
}
}
.split {
width: 100%;
height: 1px;
background-color: #E0DFFF;
}

View File

@ -92,7 +92,7 @@
align-items: center;
.value {
font-size: 30px;
font-size: var(--font-size-xxxlarge);
color: var(--accent-color);
}
@ -170,6 +170,7 @@
}
}
}
.bar-chart {
padding: 14px 0;
}
@ -178,7 +179,7 @@
.stateWorking-wrapper {
min-width: 445px;
font-size: 12px;
font-size: var(--font-size-small);
backdrop-filter: blur(40px);
background: var(--background-color-secondary);
border-radius: 20px;
@ -195,7 +196,7 @@
flex-direction: column;
span {
font-size: 27px;
font-size: var(--font-size-xxlarge);
&:first-child {
color: #FCFDFD;
@ -362,13 +363,13 @@
border-radius: 4px;
.label {
font-size: 0.9rem;
font-size: var(--font-size-regular);
margin: 0;
opacity: 0.7;
}
.value {
font-size: 1.2rem;
font-size: var(--font-size-xlarge);
font-weight: bold;
margin: 0;
}
@ -398,19 +399,19 @@
text-align: center;
.title {
font-size: 1rem;
font-size: var(--font-size-large);
margin: 0;
opacity: 0.7;
}
.time {
font-size: 2.5rem;
font-size: var(--font-size-xxxlarge);
font-weight: bold;
margin: 0;
}
.subtitle {
font-size: 0.8rem;
font-size: var(--font-size-regular);
margin: 0;
opacity: 0.7;
}
@ -461,7 +462,7 @@
display: flex;
justify-content: space-between;
color: #718096;
font-size: 12px;
font-size: var(--font-size-small);
padding: 18px 10px;
position: relative;
z-index: 100;

View File

@ -55,7 +55,7 @@
}
.state {
font-size: 24px;
font-size: var(--font-size-xxlarge);
font-weight: bold;
}
@ -66,7 +66,7 @@
}
.working {
font-size: 20px;
font-size: var(--font-size-xxlarge);
color: #4CAF50;
}
@ -95,7 +95,7 @@
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
font-size: var(--font-size-large);
padding: 4px 0;
}

View File

@ -25,7 +25,7 @@
var(--highlight-accent-color) 60%,
transparent
);
font-size: 16px;
font-size: var(--font-size-large);
align-items: center;
}
.stock-item {
@ -36,7 +36,7 @@
color: var(--accent-color);
}
.stock-description {
font-size: 12px;
font-size: var(--font-size-small);
}
}
}

View File

@ -10,6 +10,7 @@
border-radius: #{$border-radius-extra-large};
box-shadow: #{$box-shadow-medium};
z-index: #{$z-index-tools};
.header-container {
@include flex-space-between;
padding: 10px;
@ -75,6 +76,7 @@
.widget2D {
overflow: auto;
.chart-container {
display: flex;
flex-direction: column;
@ -122,18 +124,19 @@
.value {
color: var(--accent-color);
font-size: 16px;
font-size: var(--font-size-large);
}
}
.stock-description {
font-size: 12px;
font-size: var(--font-size-small);
}
}
}
}
}
}
.widget3D {
display: flex;
flex-direction: column;
@ -232,6 +235,7 @@
display: flex;
width: 100%;
justify-content: flex-end;
.other-guest {
@include flex-center;
height: 26px;
@ -327,7 +331,7 @@
align-items: center;
.multi-level-dropdown {
min-width: 170px;
width: 170px;
.dropdown-button {
display: flex;
@ -359,6 +363,7 @@
border-bottom: 1px solid var(--border-color);
padding-bottom: 6px;
}
.inputs-wrapper {
display: flex;
flex-direction: column;
@ -393,12 +398,12 @@
box-shadow: none;
color: #5273eb;
padding: 6px;
font-size: 18px;
font-size: var(--font-size-xlarge);
}
.bulletPoint {
color: #5273eb;
font-size: 16px;
font-size: var(--font-size-large);
}
.regularDropdown-container {
@ -422,7 +427,7 @@
gap: 6px;
color: #444;
border-radius: 6px;
font-size: 14px;
font-size: var(--font-weight-regular);
.infoIcon {
padding: 0px 7px;
@ -442,7 +447,7 @@
flex-direction: column;
gap: 15px;
padding: 0;
font-size: 14px;
font-size: var(--font-weight-regular);
color: #4a4a4a;
.selectedWidget {
@ -508,6 +513,7 @@
}
}
}
.machine-mechanics-container {
.machine-mechanics-header {
padding: 8px 12px;
@ -515,15 +521,18 @@
border-bottom: 1px solid var(--border-color);
color: var(--accent-color);
}
.process-list-container {
display: flex;
align-items: center;
gap: 4px;
padding: 8px;
border-bottom: 1px solid var(--border-color);
.label {
margin-right: 8px;
}
.add-new-process {
@include flex-center;
height: 24px;
@ -531,12 +540,15 @@
cursor: pointer;
background: var(--background-color-secondary);
border-radius: #{$border-radius-medium};
path {
stroke: var(--accent-color);
strokeWidth: 1.5px;
}
&:hover {
background: var(--accent-color);
path {
stroke: var(--highlight-accent-color);
}
@ -544,11 +556,13 @@
}
}
}
.machine-mechanics-content-container,
.simulations-container {
max-height: calc(60vh - (47px - 35px));
overflow: auto;
overflow-y: scroll;
.header {
@include flex-space-between;
padding: 6px 12px;
@ -588,17 +602,20 @@
margin: 2px 0;
border-radius: #{$border-radius-small};
}
.value {
display: flex;
justify-content: flex-start;
align-items: center;
min-width: 80%;
gap: 6px;
input {
width: fit-content;
accent-color: var(--accent-color);
}
}
.active {
background: var(--highlight-accent-color);
@ -618,8 +635,10 @@
cursor: pointer;
border-radius: #{$border-radius-small};
transform: translateX(4px);
&:hover {
background-color: var(--accent-color);
path {
stroke: var(--primary-color);
}
@ -640,21 +659,26 @@
.selected-properties-container {
padding: 12px;
.properties-header {
color: var(--accent-color);
font-weight: var(--font-weight-regular);
padding: 8px 0;
}
.value-field-container {
margin-bottom: 6px;
padding: 0;
@include flex-space-between;
.label {
width: 40%;
}
.regularDropdown-container {
width: 60%;
}
.default {
width: 60%;
}
@ -668,23 +692,29 @@
margin-top: 8px;
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
.header {
color: var(--accent-color);
}
}
.process-container {
padding: 0 12px;
margin: 6px 0;
.value {
@include flex-space-between;
.arrow-container {
height: 16px;
width: 16px;
}
.active {
rotate: 90deg;
}
}
.children-drop {
.value {
padding: 6px;
@ -707,20 +737,25 @@
background: var(--background-color-gray);
padding: 12px;
border-radius: #{$border-radius-medium};
.compare-simulations-header {
font-weight: var(--font-weight-medium);
}
.content {
padding: 12px 0;
font-size: var(--font-size-small);
span {
font-size: inherit;
color: var(--accent-color);
}
}
.input {
display: flex;
flex-direction: row-reverse;
input {
width: fit-content;
background: var(--accent-color);
@ -731,6 +766,7 @@
}
}
}
.global-properties-container,
.analysis-main-container,
.asset-properties-container,
@ -741,26 +777,32 @@
border-top: 1px solid var(--highlight-accent-color);
border-bottom: 1px solid var(--highlight-accent-color);
color: var(--accent-color);
.input-value {
color: inherit;
}
}
.input-container {
@include flex-center;
.remove-button {
@include flex-center;
height: 18px;
width: 18px;
margin-bottom: 6px;
border-radius: 8px 0 0 8px;
&:hover {
background-color: var(--accent-color);
path {
stroke: var(--primary-color);
}
}
}
}
.optimize-button,
.generate-report-button,
.button-save {
@ -775,89 +817,109 @@
font-size: var(--font-size-small);
margin-bottom: 8px;
}
.split {
height: 1px;
background: var(--highlight-accent-color);
margin: 8px;
}
.custom-input-container {
.header {
@include flex-space-between;
border: none;
.eyedrop-button {
@include flex-center;
}
}
.inputs-container {
@include flex-space-between;
padding-bottom: 8px;
.input-container {
padding: 0 12px;
margin-top: 6px;
gap: 6px;
}
}
.custom-input-label {
white-space: nowrap;
}
}
.analysis-content-container {
min-height: 50vh;
max-height: 60vh;
overflow-y: auto;
.dropdown-header-container,
.dropdown-content-container {
padding: 6px 12px;
border-top: 1px solid var(--highlight-accent-color);
}
.input-range-container {
.input-container {
width: 75%;
}
}
}
.buttons-container {
@include flex-space-between;
padding: 12px;
gap: 12px;
input {
border: none;
cursor: pointer;
transition: all 0.2s;
&:hover {
transform: translateY(-2px);
box-shadow: #{$box-shadow-medium};
outline: 1px solid var(--accent-color);
}
}
.cancel {
background: transparent;
color: var(--accent-color);
}
.submit {
background: var(--accent-color);
color: var(--highlight-accent-color);
}
}
.create-custom-analysis-container {
margin: 6px;
background: var(--background-color-gray);
padding: 12px;
border-radius: #{$border-radius-medium};
.custom-analysis-header {
font-weight: var(--font-weight-medium);
}
.content {
padding: 12px 0;
font-size: var(--font-size-small);
span {
font-size: inherit;
color: var(--accent-color);
}
}
.input {
display: flex;
flex-direction: row-reverse;
input {
width: fit-content;
background: var(--accent-color);
@ -869,3 +931,122 @@
}
}
}
.assets-container {
padding: 0 6px;
.assets-wrapper {
position: relative;
margin: 8px 10px;
h2 {
color: var(--text-color);
font-family: $large;
font-weight: $bold-weight ;
}
.categories-container {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: 100%;
gap: 3px;
padding: 10px 0;
.category {
width: 117px;
height: 95px;
border-radius: 3.59px;
background-color: var(--background-color-gray);
padding: 8px;
padding-top: 12px;
font-weight: $bold-weight;
position: relative;
overflow: hidden;
.category-name {
position: relative;
z-index: 3;
font-size: var(--font-size-large);
// -webkit-text-fill-color: transparent;
// -webkit-text-stroke: 1px black;
}
&::after {
content: '';
width: 50px;
height: 50px;
border-radius: 50%;
background-color: var(--circle-color, #000);
position: absolute;
top: 50%;
right: -10px;
transform: translate(0, -50%);
background: linear-gradient(144.19deg, #F1E7CD 16.62%, #FFFAEF 85.81%);
}
.category-image {
position: absolute;
// top: 50%;
bottom: 0;
right: -10px;
transform: translate(0, 0%) scale(0.8);
z-index: 2;
height: 80%;
}
}
}
.assets-container {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: 100%;
gap: 3px;
padding: 10px 0;
.assets {
width: 117px;
height: 95px;
border-radius: 3.59px;
background-color: var(--background-color-gray);
padding: 8px;
padding-top: 12px;
font-weight: $medium-weight ;
position: relative;
overflow: hidden;
.asset-name {
position: relative;
z-index: 3;
font-size: var(--font-size-regular);
}
.asset-image {
position: absolute;
top: 50%;
right: 5px;
transform: translate(0, -50%);
z-index: 2;
}
}
}
.back-button {
position: absolute;
top: 0;
right: 0;
@include flex-center;
cursor: pointer;
}
}
}

View File

@ -23,6 +23,7 @@
@use 'components/visualization/floating/common';
@use 'components/marketPlace/marketPlace';
@use 'components/simulation/simulation';
@use 'components/menu/menu';
// layout
@use 'layout/loading';

View File

@ -15,6 +15,7 @@
border-radius: #{$border-radius-medium};
transition: all 0.2s;
z-index: #{$z-index-default};
.floating {
width: 100%;
max-width: 250px;
@ -27,6 +28,7 @@
position: absolute;
z-index: 1000;
}
.scene-container {
overflow: hidden;
}
@ -76,16 +78,19 @@
gap: 6px;
border-radius: #{$border-radius-medium};
overflow-x: auto;
&::-webkit-scrollbar {
display: none;
}
}
.no-zone {
@include flex-center;
gap: 4px;
padding: 4px;
color: var(--text-disabled);
}
.zone {
width: auto;
background-color: var(--background-color);
@ -186,7 +191,7 @@
height: 25% !important;
min-height: 150px;
max-height: 100%;
border: 1px dotted #a9a9a9;
border: 1px dashed #a9a9a9;
border-radius: 8px;
box-shadow: 0px 2px 6px 0px rgba(60, 60, 67, 0.1);
padding: 6px 0;
@ -206,8 +211,8 @@
.kebab-options {
position: absolute;
top: 12px;
right: -100px;
top: 18px;
right: 5px;
transform: translate(0px, 0);
background-color: var(--background-color);
z-index: 10;
@ -257,6 +262,10 @@
}
}
.chart-container.notLinked {
border-color: red;
}
.close-btn {
position: absolute;
top: 5px;
@ -364,19 +373,24 @@
border: none;
color: var(--background-color);
border-radius: 4px;
.add-icon {
@include flex-center;
transition: rotate 0.2s;
}
path {
stroke: var(--primary-color);
stroke-width: 2;
}
}
.active {
background: #ffe3e0;
.add-icon {
rotate: 45deg;
path {
stroke: #f65648;
stroke-width: 2;
@ -442,7 +456,7 @@
transform: translate(-0%, 0);
h2 {
font-size: 12px;
font-size: var(--font-size-small);
margin-bottom: 8px;
color: #2b3344;
}