diff --git a/app/src/assets/image/feneration.png b/app/src/assets/image/feneration.png new file mode 100644 index 0000000..c8b6521 Binary files /dev/null and b/app/src/assets/image/feneration.png differ diff --git a/app/src/assets/image/machines.png b/app/src/assets/image/machines.png new file mode 100644 index 0000000..199870d Binary files /dev/null and b/app/src/assets/image/machines.png differ diff --git a/app/src/assets/image/vehicles.png b/app/src/assets/image/vehicles.png new file mode 100644 index 0000000..5701c94 Binary files /dev/null and b/app/src/assets/image/vehicles.png differ diff --git a/app/src/assets/image/workStation.png b/app/src/assets/image/workStation.png new file mode 100644 index 0000000..6345487 Binary files /dev/null and b/app/src/assets/image/workStation.png differ diff --git a/app/src/assets/image/worker.png b/app/src/assets/image/worker.png new file mode 100644 index 0000000..7067644 Binary files /dev/null and b/app/src/assets/image/worker.png differ diff --git a/app/src/components/icons/ExportCommonIcons.tsx b/app/src/components/icons/ExportCommonIcons.tsx index d2c9970..86905b3 100644 --- a/app/src/components/icons/ExportCommonIcons.tsx +++ b/app/src/components/icons/ExportCommonIcons.tsx @@ -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" /> ); diff --git a/app/src/components/layout/sidebarLeft/Assets.tsx b/app/src/components/layout/sidebarLeft/Assets.tsx index bbf476c..01b8c8e 100644 --- a/app/src/components/layout/sidebarLeft/Assets.tsx +++ b/app/src/components/layout/sidebarLeft/Assets.tsx @@ -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(""); + const [selectedCategory, setSelectedCategory] = useState(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 (
@@ -15,11 +107,58 @@ const Assets: React.FC = () => {

Results for "{searchValue}"

+ ) : selectedCategory ? ( +
+ {/* Back Button */} +
setSelectedCategory(null)} + > + ← Back +
+

{selectedCategory}

+
+ {filteredAssets.map((asset, index) => ( +
+ {asset.assetName} +
{asset.assetName}
+
+ ))} +
+
) : ( - <> +
+

Categories

+
+ {uniqueCategories.map((category, index) => { + const categoryInfo = categoryList.find( + (asset) => asset.category === category + ); + return ( +
setSelectedCategory(category)} + > + {category} +
{category}
+
+ ); + })} +
+
)}
); }; export default Assets; + diff --git a/app/src/components/ui/componets/RealTimeVisulization.tsx b/app/src/components/ui/componets/RealTimeVisulization.tsx index 27044b1..346f114 100644 --- a/app/src/components/ui/componets/RealTimeVisulization.tsx +++ b/app/src/components/ui/componets/RealTimeVisulization.tsx @@ -163,7 +163,7 @@ const RealTimeVisulization: React.FC = () => { onDragOver={(event) => event.preventDefault()} > - + {activeModule === "visualization" && ( diff --git a/app/src/components/ui/inputs/MultiLevelDropDown.tsx b/app/src/components/ui/inputs/MultiLevelDropDown.tsx index 3385a5b..50f7fc8 100644 --- a/app/src/components/ui/inputs/MultiLevelDropDown.tsx +++ b/app/src/components/ui/inputs/MultiLevelDropDown.tsx @@ -253,7 +253,8 @@ const MultiLevelDropdown = ({ className={`dropdown-button ${open ? "open" : ""}`} onClick={() => setOpen(!open)} > - {displayLabel} ▾ +
{displayLabel}
+ ▾ {open && (
diff --git a/app/src/components/ui/menu/menu.tsx b/app/src/components/ui/menu/menu.tsx new file mode 100644 index 0000000..b374237 --- /dev/null +++ b/app/src/components/ui/menu/menu.tsx @@ -0,0 +1,604 @@ +import React, { useState } from "react"; + +const MenuBar = () => { + const [activeMenu, setActiveMenu] = useState(null); + const [activeSubMenu, setActiveSubMenu] = useState(null); + + // State to track selection for all menu items + const [selectedItems, setSelectedItems] = useState>( + {} + ); + + // Function to toggle selection for a specific item + const toggleSelection = (itemName: string) => { + setSelectedItems((prev) => ({ + ...prev, + [itemName]: !prev[itemName], // Toggle the selection state + })); + }; + + return ( +
+ {/* Top-level menu buttons */} +
+ {/* File Menu */} +
setActiveMenu("File")} + onMouseLeave={() => { + setActiveMenu(null); + setActiveSubMenu(null); + }} + > +
+ File + ▾ +
+ + {/* File Dropdown */} + {activeMenu === "File" && ( +
+ {/* New File */} +
toggleSelection("New File")} + > +
+ + {selectedItems["New File"] && "✓ "} + New File + +
+ Ctrl + N +
+
+
+ + {/* Open Local File */} +
toggleSelection("Open Local File")} + > +
+ + {selectedItems["Open Local File"] && "✓ "} + Open Local File + +
+ Ctrl + O +
+
+
+ + {/* Save Version */} +
toggleSelection("Save Version")} + > +
+ + {selectedItems["Save Version"] && "✓ "} + Save Version + +
+
+
+ + {/* Make a Copy */} +
toggleSelection("Make a Copy")} + > +
+ + {selectedItems["Make a Copy"] && "✓ "} + Make a Copy + +
+
+ + {/* Share */} +
toggleSelection("Share")} + > +
+ + {selectedItems["Share"] && "✓ "} + Share + +
+
+ + {/* Rename */} +
toggleSelection("Rename")} + > +
+ + {selectedItems["Rename"] && "✓ "} + Rename + +
+
+
+ + {/* Import */} +
toggleSelection("Import")} + > +
+ + {selectedItems["Import"] && "✓ "} + Import + +
+
+ + {/* Close File */} +
toggleSelection("Close File")} + > +
+ + {selectedItems["Close File"] && "✓ "} + Close File + +
+
+
+ )} +
+ + {/* Edit Menu */} +
setActiveMenu("Edit")} + onMouseLeave={() => { + setActiveMenu(null); + setActiveSubMenu(null); + }} + > +
+ Edit + ▾ +
+ + {/* Edit Dropdown */} + {activeMenu === "Edit" && ( +
+ {/* Undo */} +
toggleSelection("Undo")} + > +
+ + {selectedItems["Undo"] && "✓ "} + Undo + +
+ Ctrl + Z +
+
+
+ + {/* Redo */} +
toggleSelection("Redo")} + > +
+ + {selectedItems["Redo"] && "✓ "} + Redo + +
+ Ctrl + Shift + Z +
+
+
+
+ + {/* Undo History */} +
toggleSelection("Undo History")} + > +
+ + {selectedItems["Undo History"] && "✓ "} + Undo History + +
+
+ + {/* Redo History */} +
toggleSelection("Redo History")} + > +
+ + {selectedItems["Redo History"] && "✓ "} + Redo History + +
+
+
+ + {/* Find */} +
toggleSelection("Find")} + > +
+ + {selectedItems["Find"] && "✓ "} + Find + +
+ Ctrl + F +
+
+
+ + {/* Delete */} +
toggleSelection("Delete")} + > +
+ + {selectedItems["Delete"] && "✓ "} + Delete + +
+
+ + {/* Select by... */} +
toggleSelection("Select by...")} + > +
+ + {selectedItems["Select by..."] && "✓ "} + Select by... + +
+
+ + {/* Keymap */} +
toggleSelection("Keymap")} + > +
+ + {selectedItems["Keymap"] && "✓ "} + Keymap + +
+
+
+ )} +
+ + {/* View Menu */} +
setActiveMenu("View")} + onMouseLeave={() => { + setActiveMenu(null); + setActiveSubMenu(null); + }} + > +
+ View + ▾ +
+ + {/* View Dropdown */} + {activeMenu === "View" && ( +
+ {/* Grid */} +
toggleSelection("Grid")} + > +
+ + {selectedItems["Grid"] && "✓ "} + Grid + +
+
+ + {/* Gizmo */} +
setActiveSubMenu("View-Gizmo")} + onMouseLeave={() => setActiveSubMenu(null)} + > +
+ + {selectedItems["Gizmo"] && "✓ "} + Gizmo + + ▾ +
+
+ + {/* Gizmo Submenu */} + {activeSubMenu === "View-Gizmo" && ( +
+ {/* Visibility */} +
toggleSelection("Visibility")} + > + + {selectedItems["Visibility"] && "✓ "} + Visibility + +
+ + {/* Cube view */} +
toggleSelection("Cube view")} + > + + {selectedItems["Cube view"] && "✓ "} + Cube view + +
+ + {/* Sphere view */} +
toggleSelection("Sphere view")} + > + + {selectedItems["Sphere view"] && "✓ "} + Sphere view + +
+ + {/* Custom settings */} +
toggleSelection("Custom settings")} + > + + {selectedItems["Custom settings"] && "✓ "} + Custom settings + +
+
+ )} +
+ + {/* Zoom */} +
toggleSelection("Zoom")} + > +
+ + {selectedItems["Zoom"] && "✓ "} + Zoom + +
+
+ + {/* Full Screen */} +
toggleSelection("Full Screen")} + > +
+ + {selectedItems["Full Screen"] && "✓ "} + Full Screen + +
+ F11 +
+
+
+
+ )} +
+ + {/* Version History Menu */} +
setActiveMenu("Version history")} + onMouseLeave={() => { + setActiveMenu(null); + setActiveSubMenu(null); + }} + > +
+ Version history +
+ + +
+ + {/* Export As Menu */} +
setActiveMenu("Export as...")} + onMouseLeave={() => { + setActiveMenu(null); + setActiveSubMenu(null); + }} + > +
+ Export as... +
+ +
+ + {/* Apps Menu */} +
setActiveMenu("Apps")} + onMouseLeave={() => { + setActiveMenu(null); + setActiveSubMenu(null); + }} + > +
+ Apps + ▾ +
+ + {/* Apps Dropdown */} + {activeMenu === "Apps" && ( +
+ {/* New App */} +
toggleSelection("New App")} + > +
+ + {selectedItems["New App"] && "✓ "} + New App + +
+
+ +
+ + {/* Work-flow Monitor */} +
toggleSelection("Work-flow Monitor")} + > +
+ + {selectedItems["Work-flow Monitor"] && "✓ "} + Work-flow Monitor + +
+
+ + {/* Temperature Visualizer */} +
toggleSelection("Temperature Visualizer")} + > +
+ + {selectedItems["Temperature Visualizer"] && "✓ "} + Temperature Visualizer + +
+
+ + {/* View all */} +
toggleSelection("View all")} + > +
+ + {selectedItems["View all"] && "✓ "} + View all + +
+
+
+ )} +
+ + {/* Help Menu */} +
setActiveMenu("Help")} + onMouseLeave={() => { + setActiveMenu(null); + setActiveSubMenu(null); + }} + > +
+ Help + ▾ +
+ + {/* Help Dropdown */} + {activeMenu === "Help" && ( +
+ {/* Shortcuts */} +
toggleSelection("Shortcuts")} + > +
+ + {selectedItems["Shortcuts"] && "✓ "} + Shortcuts + +
+ Ctrl + Shift + ? +
+
+
+ + {/* Manual */} +
toggleSelection("Manual")} + > +
+ + {selectedItems["Manual"] && "✓ "} + Manual + +
+
+ + {/* Video Tutorials */} +
toggleSelection("Video Tutorials")} + > +
+ + {selectedItems["Video Tutorials"] && "✓ "} + Video Tutorials + +
+
+ + {/* Report a bug */} +
toggleSelection("Report a bug")} + > +
+ + {selectedItems["Report a bug"] && "✓ "} + Report a bug + +
+
+
+ )} +
+
+
+ ); +}; + +export default MenuBar; + + diff --git a/app/src/styles/base/base.scss b/app/src/styles/base/base.scss index f7bf4b0..73e602b 100644 --- a/app/src/styles/base/base.scss +++ b/app/src/styles/base/base.scss @@ -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 */ +} \ No newline at end of file diff --git a/app/src/styles/components/input.scss b/app/src/styles/components/input.scss index 36ac8ff..f60aca6 100644 --- a/app/src/styles/components/input.scss +++ b/app/src/styles/components/input.scss @@ -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,11 +359,12 @@ 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{ + + .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,13 +644,15 @@ 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); } -} +} \ No newline at end of file diff --git a/app/src/styles/components/menu/menu.scss b/app/src/styles/components/menu/menu.scss new file mode 100644 index 0000000..60b760f --- /dev/null +++ b/app/src/styles/components/menu/menu.scss @@ -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; +} \ No newline at end of file diff --git a/app/src/styles/components/visualization/floating/common.scss b/app/src/styles/components/visualization/floating/common.scss index 00c88a5..7c74d54 100644 --- a/app/src/styles/components/visualization/floating/common.scss +++ b/app/src/styles/components/visualization/floating/common.scss @@ -92,7 +92,7 @@ align-items: center; .value { - font-size: 30px; + font-size: var(--font-size-xxxlarge); color: var(--accent-color); } @@ -170,15 +170,16 @@ } } } - .bar-chart{ - padding:14px 0; + + .bar-chart { + padding: 14px 0; } } .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; diff --git a/app/src/styles/components/visualization/floating/energyConsumed.scss b/app/src/styles/components/visualization/floating/energyConsumed.scss index a5b9cee..5ef39de 100644 --- a/app/src/styles/components/visualization/floating/energyConsumed.scss +++ b/app/src/styles/components/visualization/floating/energyConsumed.scss @@ -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; } diff --git a/app/src/styles/components/visualization/ui/styledWidgets.scss b/app/src/styles/components/visualization/ui/styledWidgets.scss index 9c72fae..794b756 100644 --- a/app/src/styles/components/visualization/ui/styledWidgets.scss +++ b/app/src/styles/components/visualization/ui/styledWidgets.scss @@ -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); } } } diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss index b248ad2..228a44c 100644 --- a/app/src/styles/layout/sidebar.scss +++ b/app/src/styles/layout/sidebar.scss @@ -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; + } + + } +} \ No newline at end of file diff --git a/app/src/styles/main.scss b/app/src/styles/main.scss index 34c0074..a0ce207 100644 --- a/app/src/styles/main.scss +++ b/app/src/styles/main.scss @@ -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'; diff --git a/app/src/styles/pages/realTimeViz.scss b/app/src/styles/pages/realTimeViz.scss index 020d6b7..69df460 100644 --- a/app/src/styles/pages/realTimeViz.scss +++ b/app/src/styles/pages/realTimeViz.scss @@ -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; } @@ -527,4 +541,4 @@ .zone.active { background-color: #007bff; color: white; -} +} \ No newline at end of file