Add new images and update styles for visualization components
This commit is contained in:
Nalvazhuthi
parent
893d01ee4e
commit
ad7f4bbfd6
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 |
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -163,7 +163,7 @@ const RealTimeVisulization: React.FC = () => {
|
|||
onDragOver={(event) => event.preventDefault()}
|
||||
>
|
||||
|
||||
<Scene />
|
||||
|
||||
</div>
|
||||
<DroppedObjects />
|
||||
{activeModule === "visualization" && (
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
||||
|
|
@ -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 */
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue