From 4152e611a9f0081c8edaf3f5b1ff503190e96796 Mon Sep 17 00:00:00 2001 From: Vishnu Date: Wed, 30 Apr 2025 10:10:39 +0530 Subject: [PATCH 1/6] refactor: Update dropdown items to include active state, enhance List and DropDownList components, and improve sidebar styles for better layout and accessibility --- .../components/layout/sidebarLeft/Outline.tsx | 2 +- app/src/components/ui/list/DropDownList.tsx | 63 ++++---- app/src/components/ui/list/List.tsx | 74 ++++----- app/src/styles/abstracts/variables.scss | 6 +- app/src/styles/components/lists.scss | 26 ++-- app/src/styles/layout/sidebar.scss | 140 ++++++------------ 6 files changed, 139 insertions(+), 172 deletions(-) diff --git a/app/src/components/layout/sidebarLeft/Outline.tsx b/app/src/components/layout/sidebarLeft/Outline.tsx index 417f069..152c357 100644 --- a/app/src/components/layout/sidebarLeft/Outline.tsx +++ b/app/src/components/layout/sidebarLeft/Outline.tsx @@ -11,7 +11,7 @@ const Outline: React.FC = () => { }; const dropdownItems = [ - { id: "1", name: "Ground Floor" }, + { id: "1", name: "Ground Floor", active: true }, // { id: "2", name: "Floor 1" }, ]; // Example dropdown items diff --git a/app/src/components/ui/list/DropDownList.tsx b/app/src/components/ui/list/DropDownList.tsx index 0416a9e..20c6951 100644 --- a/app/src/components/ui/list/DropDownList.tsx +++ b/app/src/components/ui/list/DropDownList.tsx @@ -3,7 +3,6 @@ import List from "./List"; import { AddIcon, ArrowIcon, FocusIcon } from "../../icons/ExportCommonIcons"; import KebabMenuListMultiSelect from "./KebebMenuListMultiSelect"; import { useFloorItems, useZones } from "../../../store/store"; -import { useSelectedZoneStore } from "../../../store/visualization/useZoneStore"; interface DropDownListProps { value?: string; // Value to display in the DropDownList @@ -17,6 +16,17 @@ interface DropDownListProps { remove?: boolean; } +interface Zone { + zoneId: string; + zoneName: string; + points: [number, number, number][]; // polygon vertices +} +interface ZoneData { + id: string; + name: string; + assets: { id: string; name: string; position?: []; rotation?: {} }[]; +} + const DropDownList: React.FC = ({ value = "Dropdown", items = [], @@ -33,38 +43,30 @@ const DropDownList: React.FC = ({ remove, }) => { const [isOpen, setIsOpen] = useState(defaultOpen); - const { zones, setZones } = useZones(); + const { zones } = useZones(); const handleToggle = () => { setIsOpen((prev) => !prev); // Toggle the state }; - interface Asset { - id: string; - name: string; - position: [number, number, number]; // x, y, z - } - interface Zone { - zoneId: string; - zoneName: string; - points: [number, number, number][]; // polygon vertices - } - interface ZoneData { - id: string; - name: string; - assets: { id: string; name: string; position?: []; rotation?: {} }[]; - } const [zoneDataList, setZoneDataList] = useState([]); const { floorItems } = useFloorItems(); - const isPointInsidePolygon = (point: [number, number], polygon: [number, number][]) => { + const isPointInsidePolygon = ( + point: [number, number], + polygon: [number, number][] + ) => { let inside = false; for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) { - const xi = polygon[i][0], zi = polygon[i][1]; - const xj = polygon[j][0], zj = polygon[j][1]; + const xi = polygon[i][0], + zi = polygon[i][1]; + const xj = polygon[j][0], + zj = polygon[j][1]; - const intersect = ((zi > point[1]) !== (zj > point[1])) && - (point[0] < (xj - xi) * (point[1] - zi) / (zj - zi + 0.000001) + xi); + const intersect = + // eslint-disable-next-line no-mixed-operators + zi > point[1] !== zj > point[1] && + point[0] < ((xj - xi) * (point[1] - zi)) / (zj - zi + 0.000001) + xi; if (intersect) inside = !inside; } @@ -73,18 +75,21 @@ const DropDownList: React.FC = ({ useEffect(() => { const updatedZoneList: ZoneData[] = zones?.map((zone: Zone) => { - const polygon2D = zone.points.map((p: [number, number, number]) => [p[0], p[2]]) as [number, number][]; + const polygon2D = zone.points.map((p: [number, number, number]) => [ + p[0], + p[2], + ]); const assetsInZone = floorItems .filter((item: any) => { const [x, , z] = item.position; - return isPointInsidePolygon([x, z], polygon2D); + return isPointInsidePolygon([x, z], polygon2D as [number, number][]); }) .map((item: any) => ({ id: item.modeluuid, name: item.modelname, position: item.position, - rotation: item.rotation + rotation: item.rotation, })); return { @@ -99,9 +104,9 @@ const DropDownList: React.FC = ({ return (
-
+
+
{showFocusIcon && (
@@ -118,13 +123,13 @@ const DropDownList: React.FC = ({
)} -
-
+
{isOpen && ( diff --git a/app/src/components/ui/list/List.tsx b/app/src/components/ui/list/List.tsx index 06419af..bd8725b 100644 --- a/app/src/components/ui/list/List.tsx +++ b/app/src/components/ui/list/List.tsx @@ -12,7 +12,6 @@ import { LockIcon, RemoveIcon, } from "../../icons/ExportCommonIcons"; -import { useThree } from "@react-three/fiber"; import { useFloorItems, useZoneAssetId, useZones } from "../../../store/store"; import { zoneCameraUpdate } from "../../../services/visulization/zone/zoneCameraUpdation"; import { setFloorItemApi } from "../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi"; @@ -32,20 +31,19 @@ interface ZoneItem { interface ListProps { items?: ZoneItem[]; - placeholder?: string; remove?: boolean; } const List: React.FC = ({ items = [], remove }) => { - const { activeModule, setActiveModule } = useModuleStore(); + const { activeModule } = useModuleStore(); const { selectedZone, setSelectedZone } = useSelectedZoneStore(); const { zoneAssetId, setZoneAssetId } = useZoneAssetId(); - const { zones, setZones } = useZones(); + const { zones } = useZones(); const { setSubModule } = useSubModuleStore(); const [expandedZones, setExpandedZones] = useState>( {} ); - const { floorItems, setFloorItems } = useFloorItems(); + const { setFloorItems } = useFloorItems(); useEffect(() => { useSelectedZoneStore.getState().setSelectedZone({ @@ -70,39 +68,36 @@ const List: React.FC = ({ items = [], remove }) => { async function handleSelectZone(id: string) { try { if (selectedZone?.zoneId === id) { - return; } setSubModule("zoneProperties"); const email = localStorage.getItem("email"); - const organization = email?.split("@")[1]?.split(".")[0] || ""; + const organization = email?.split("@")[1]?.split(".")[0] ?? ""; let response = await getZoneData(id, organization); setSelectedZone({ zoneName: response?.zoneName, - activeSides: response?.activeSides || [], - panelOrder: response?.panelOrder || [], - lockedPanels: response?.lockedPanels || [], - widgets: response?.widgets || [], + activeSides: response?.activeSides ?? [], + panelOrder: response?.panelOrder ?? [], + lockedPanels: response?.lockedPanels ?? [], + widgets: response?.widgets ?? [], zoneId: response?.zoneId, - zoneViewPortTarget: response?.viewPortCenter || [], - zoneViewPortPosition: response?.viewPortposition || [], + zoneViewPortTarget: response?.viewPortCenter ?? [], + zoneViewPortPosition: response?.viewPortposition ?? [], }); - - } catch (error) { - + console.log(error); } } function handleAssetClick(asset: Asset) { - setZoneAssetId(asset) + setZoneAssetId(asset); } async function handleZoneNameChange(newName: string) { - const email = localStorage.getItem("email") || ""; + const email = localStorage.getItem("email") ?? ""; const organization = email?.split("@")[1]?.split(".")[0]; const isDuplicate = zones.some( @@ -128,12 +123,16 @@ const List: React.FC = ({ items = [], remove }) => { } async function handleZoneAssetName(newName: string) { - const email = localStorage.getItem("email") || ""; + const email = localStorage.getItem("email") ?? ""; const organization = email?.split("@")[1]?.split(".")[0]; if (zoneAssetId?.id) { - let response = await setFloorItemApi(organization, zoneAssetId.id, newName) - console.log('response: ', response); + let response = await setFloorItemApi( + organization, + zoneAssetId.id, + newName + ); + console.log("response: ", response); setFloorItems((prevFloorItems: any[]) => prevFloorItems.map((floorItems) => floorItems.modeluuid === zoneAssetId.id @@ -160,7 +159,7 @@ const List: React.FC = ({ items = [], remove }) => {
  • -
    handleSelectZone(item.id)} > @@ -169,8 +168,7 @@ const List: React.FC = ({ items = [], remove }) => { onRename={handleZoneNameChange} checkDuplicate={checkZoneNameDuplicate} /> - -
    +
    @@ -185,12 +183,12 @@ const List: React.FC = ({ items = [], remove }) => {
    )} {item.assets && item.assets.length > 0 && ( -
    toggleZoneExpansion(item.id)} > -
    + )}
    @@ -206,20 +204,26 @@ const List: React.FC = ({ items = [], remove }) => { className="list-container asset-item" >
    -
    handleAssetClick(asset)} > - -
    +
    -
    +
    -
    + +
    + {remove && ( -
    +
    + )}
    diff --git a/app/src/styles/abstracts/variables.scss b/app/src/styles/abstracts/variables.scss index 2913425..37d9971 100644 --- a/app/src/styles/abstracts/variables.scss +++ b/app/src/styles/abstracts/variables.scss @@ -16,7 +16,7 @@ $text-button-color: #f3f3fd; $text-color-dark: #f3f3fd; $text-disabled-dark: #6f6f7a; $input-text-color-dark: #b5b5c8; -$highlight-text-color-dark: #b392f0; +$highlight-text-color-dark: #d2baff; $text-button-color-dark: #f3f3fd; // background colors @@ -105,8 +105,8 @@ $color5: #c7a8ff; // old variables $accent-color: #6f42c1; $accent-color-dark: #c4abf1; -$highlight-accent-color: #e0dfff; -$highlight-accent-color-dark: #403e6a; +// $highlight-accent-color: #e0dfff; +// $highlight-accent-color-dark: #403e6a; // $background-color: #fcfdfd; // $background-color-dark: #19191d; diff --git a/app/src/styles/components/lists.scss b/app/src/styles/components/lists.scss index 3b52e69..894eac1 100644 --- a/app/src/styles/components/lists.scss +++ b/app/src/styles/components/lists.scss @@ -34,9 +34,8 @@ padding: 12px; } - .list-container { + li.list-container { padding: 2px; - // margin-left: 10px; overflow: hidden; .list-item { @@ -45,11 +44,13 @@ text-align: center; padding: 4px 8px; border-radius: #{$border-radius-large}; - - .value { - width: 100%; - text-align: start; - max-width: 180px; + .zone-header{ + @include flex-center; + .value { + width: 100%; + text-align: start; + max-width: 180px; + } } .options-container { @@ -61,11 +62,18 @@ cursor: pointer; } } + &:first-child{ + background: var(--highlight-accent-color); + .input-value{ + color: var(--highlight-text-color); + } + } } - .active { background: var(--highlight-accent-color); - color: var(--primary-color); + .input-value{ + color: var(--highlight-text-color); + } } } diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss index 01715ec..583dc0a 100644 --- a/app/src/styles/layout/sidebar.scss +++ b/app/src/styles/layout/sidebar.scss @@ -434,7 +434,7 @@ button { path { stroke: var(--accent-color); - strokeWidth: 1.5px; + stroke-width: 1.5px; } color: var(--accent-color); &:before { @@ -456,6 +456,9 @@ .sidebar-right-content-container { .dataSideBar { .inputs-wrapper { + display: flex; + flex-direction: column; + gap: 6px; .datas { .input-value { padding: 5px 10px; @@ -487,6 +490,7 @@ .datas__class { display: flex; align-items: center; + gap: 12px; .multi-level-dropdown { width: 170px; @@ -496,22 +500,13 @@ justify-content: space-between; gap: 6px; } - } - } - - .datas__class { - display: flex; - gap: 12px; - - // .datas__separator { - // } - - .disable { - cursor: not-allowed; - pointer-events: none; - /* Disables all mouse interactions */ - opacity: 0.5; - /* Optional: Makes the button look visually disabled */ + .disable { + cursor: not-allowed; + pointer-events: none; + /* Disables all mouse interactions */ + opacity: 0.5; + /* Optional: Makes the button look visually disabled */ + } } } } @@ -522,12 +517,6 @@ padding-bottom: 6px; } - .inputs-wrapper { - display: flex; - flex-direction: column; - gap: 6px; - } - .selectedMain-container { display: flex; flex-direction: column; @@ -627,10 +616,8 @@ width: 100%; height: 150px; background: #f0f0f0; - // border-radius: 8px; display: flex; align-items: center; - // justify-content: center; } .optionsContainer { @@ -713,7 +700,7 @@ path { stroke: var(--accent-color); - strokeWidth: 1.5px; + stroke-width: 1.5px; } &:hover { @@ -742,14 +729,14 @@ .add-button { @include flex-center; padding: 2px 4px; - background: var(--accent-color); - color: var(--primary-color); + background: var(--background-color-button); + color: var(--text-button-color); border-radius: #{$border-radius-small}; cursor: pointer; outline: none; border: none; path { - stroke: var(--primary-color); + stroke: var(--text-button-color); } &:disabled { background: var(--text-disabled); @@ -804,11 +791,10 @@ } .lists-main-container { - margin: 2px 8px; - width: calc(100% - 12px); - margin-right: 4px; + margin: 2px; + width: calc(100% - 4px); background: var(--background-color-gray); - border-radius: #{$border-radius-small}; + border-radius: 8px; min-height: 120px; .list-container { @@ -818,10 +804,10 @@ .list-item { @include flex-space-between; - padding: 2px 12px; + padding: 4px 12px; width: 100%; margin: 2px 0; - border-radius: #{$border-radius-small}; + border-radius: #{$border-radius-medium}; .value { display: flex; justify-content: flex-start; @@ -1156,7 +1142,13 @@ } .assets-container { - padding: 0 6px; + width: 100%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + height: 100%; + gap: 3px; + padding: 10px 0; .assets-wrapper { width: 100%; @@ -1175,14 +1167,16 @@ flex-direction: row; flex-wrap: wrap; height: 100%; - gap: 8px; + gap: 0px 4px; padding: 10px 0; .category { - width: 121px; + width: 123px; height: 95px; - border-radius: 3.59px; - background: var(--background-color-gray); + border-radius: #{$border-radius-large}; + background: var(--background-color); + outline: 1px solid var(--border-color); + outline-offset: -1px; padding: 8px; padding-top: 12px; font-weight: $bold-weight; @@ -1193,8 +1187,6 @@ position: relative; z-index: 3; font-size: var(--font-size-regular); - // -webkit-text-fill-color: transparent; - // -webkit-text-stroke: 1px black; } &::after { @@ -1260,7 +1252,6 @@ .category-image { position: absolute; - // top: 50%; bottom: 0; right: -10px; transform: translate(0, 0%) scale(0.8); @@ -1276,14 +1267,15 @@ flex-direction: row; flex-wrap: wrap; height: 100%; - gap: 3px; + gap: 0px 4px; padding: 10px 0; .assets { - width: 117px; + width: 123px; height: 95px; - border-radius: #{$border-radius-small}; - background: var(--background-color-gray); + border-radius: #{$border-radius-large}; + background: var(--background-color); + outline: 1px solid var(--border-color); font-weight: $medium-weight; position: relative; overflow: hidden; @@ -1301,18 +1293,16 @@ z-index: 3; padding: 8px; width: 100%; - max-height: 38px; + height: 100%; font-size: var(--font-size-regular); - background: color-mix( - in srgb, - var(--background-color) 40%, - transparent - ); - backdrop-filter: blur(5px); + background: linear-gradient(0deg,rgba(37, 24, 51, 0) 0%, rgba(78, 22, 128, 0.4) 100%); + pointer-events: none; + backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.3s ease; display: -webkit-box; - -webkit-line-clamp: 2; + -webkit-line-clamp: 3; + line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; @@ -1337,46 +1327,6 @@ } } -.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: 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 { - height: 100%; - width: 100%; - position: absolute; - // top: 50%; - // right: 5px; - // transform: translate(0, -50%); - top: 0; - left: 0; - z-index: 2; - } - } -} - .assets-result { width: 100%; height: 100%; From 5119b014b711a3db7ebd61f39b0b399714fdd088 Mon Sep 17 00:00:00 2001 From: Vishnu Date: Wed, 30 Apr 2025 16:23:24 +0530 Subject: [PATCH 2/6] Refactor Assets component layout and styling; enhance Trigger dropdowns with labels; update MenuBar theme retrieval; fix icon import in AssetPreview; adjust Card component star rating display; modify AddButtons styles and functionality; improve variable definitions in SCSS files; streamline input component styles; refine marketplace card layout; enhance menu dropdown styles; update module toggle styles; adjust tools component styles; improve visualization floating styles; clean up sidebar styles; optimize realTimeViz styles for better responsiveness. --- app/src/components/icons/ContextMenuIcons.tsx | 35 +-- app/src/components/icons/DashboardIcon.tsx | 86 +++---- .../components/icons/ExportCommonIcons.tsx | 93 +++---- .../components/icons/ExportModuleIcons.tsx | 38 +-- app/src/components/icons/HeaderIcons.tsx | 10 +- .../icons/RealTimeVisulationIcons.tsx | 14 +- app/src/components/icons/marketPlaceIcons.tsx | 8 +- .../components/layout/sidebarLeft/Assets.tsx | 230 +++++++++--------- .../eventProperties/trigger/Trigger.tsx | 64 +++-- app/src/components/ui/menu/menu.tsx | 2 +- app/src/modules/market/AssetPreview.tsx | 4 +- app/src/modules/market/Card.tsx | 9 +- .../widgets/panel/AddButtons.tsx | 6 +- app/src/styles/abstracts/variables.scss | 13 +- app/src/styles/base/base.scss | 2 + app/src/styles/components/input.scss | 82 +++---- .../components/marketPlace/marketPlace.scss | 16 +- app/src/styles/components/menu/menu.scss | 32 +-- app/src/styles/components/moduleToggle.scss | 2 +- app/src/styles/components/tools.scss | 33 ++- .../visualization/floating/common.scss | 3 +- app/src/styles/layout/sidebar.scss | 122 +++++----- app/src/styles/pages/realTimeViz.scss | 65 ++--- 23 files changed, 470 insertions(+), 499 deletions(-) diff --git a/app/src/components/icons/ContextMenuIcons.tsx b/app/src/components/icons/ContextMenuIcons.tsx index f48cf3b..e249bad 100644 --- a/app/src/components/icons/ContextMenuIcons.tsx +++ b/app/src/components/icons/ContextMenuIcons.tsx @@ -9,31 +9,31 @@ export function FlipXAxisIcon() { > @@ -52,37 +52,38 @@ export function FlipYAxisIcon() { > ); } + export function FlipZAxisIcon() { return ( ); diff --git a/app/src/components/icons/DashboardIcon.tsx b/app/src/components/icons/DashboardIcon.tsx index 314a3c8..f1f4d7d 100644 --- a/app/src/components/icons/DashboardIcon.tsx +++ b/app/src/components/icons/DashboardIcon.tsx @@ -9,13 +9,13 @@ export function NotificationIcon() { > @@ -34,7 +34,7 @@ export function HomeIcon() { > ); @@ -51,7 +51,7 @@ export function ProjectsIcon() { > ); @@ -70,103 +70,103 @@ export function TutorialsIcon() { cx="8.157" cy="8.35866" r="6.17928" - stroke="var(--icon-default-color)" + stroke="var(--text-color)" strokeWidth="0.562865" /> @@ -184,12 +184,12 @@ export function DocumentationIcon() { > @@ -208,7 +208,7 @@ export function HelpIcon() { @@ -236,17 +236,17 @@ export function LogoutIcon() { > diff --git a/app/src/components/icons/ExportCommonIcons.tsx b/app/src/components/icons/ExportCommonIcons.tsx index c78261e..9a9d96c 100644 --- a/app/src/components/icons/ExportCommonIcons.tsx +++ b/app/src/components/icons/ExportCommonIcons.tsx @@ -24,7 +24,7 @@ export function ArrowIcon() { fill="none" xmlns="http://www.w3.org/2000/svg" > - + ); } @@ -40,14 +40,14 @@ export function FocusIcon() { > @@ -65,7 +65,7 @@ export function LockIcon({ isLocked }: { isLocked: boolean }) { > @@ -80,7 +80,7 @@ export function LockIcon({ isLocked }: { isLocked: boolean }) { > @@ -100,7 +100,7 @@ export function EyeIcon({ isClosed }: { isClosed: boolean }) { @@ -119,13 +119,13 @@ export function EyeIcon({ isClosed }: { isClosed: boolean }) { > @@ -142,9 +142,9 @@ export function KebebIcon() { fill="none" xmlns="http://www.w3.org/2000/svg" > - - - + + + ); } @@ -160,7 +160,7 @@ export function AddIcon() { > @@ -179,12 +179,12 @@ export function CloseIcon() { > @@ -203,11 +203,11 @@ export function SettingsIcon() { @@ -255,7 +255,7 @@ export function TrashIcon() { @@ -280,32 +280,32 @@ export function FilterIcon() { > @@ -324,7 +324,7 @@ export function EyeDroperIcon({ isActive }: { isActive: boolean }) { @@ -442,7 +442,7 @@ export function RemoveIcon() { fill="none" xmlns="http://www.w3.org/2000/svg" > - + ); } @@ -462,7 +462,7 @@ export function InfoIcon() { /> { cy="1.35112" rx="1.4993" ry="1.27477" - fill="var(--icon-default-color)" + fill="var(--text-color)" /> ); @@ -562,31 +562,31 @@ export const DeleteIcon = () => { > @@ -784,21 +784,4 @@ export const SpeedIcon = () => { ); }; -// export const DublicateIcon = () => { -// return ( -// -// -// -// ); -// }; + diff --git a/app/src/components/icons/ExportModuleIcons.tsx b/app/src/components/icons/ExportModuleIcons.tsx index 1dda323..c1a8432 100644 --- a/app/src/components/icons/ExportModuleIcons.tsx +++ b/app/src/components/icons/ExportModuleIcons.tsx @@ -10,7 +10,7 @@ export function BuilderIcon({ isActive }: { isActive: boolean }) { > @@ -29,41 +29,41 @@ export function SimulationIcon({ isActive }: { isActive: boolean }) { > @@ -81,19 +81,19 @@ export function VisualizationIcon({ isActive }: { isActive: boolean }) { > @@ -112,20 +112,20 @@ export function CartIcon({ isActive }: { isActive: boolean }) { > diff --git a/app/src/components/icons/HeaderIcons.tsx b/app/src/components/icons/HeaderIcons.tsx index ef02f02..c2a0f62 100644 --- a/app/src/components/icons/HeaderIcons.tsx +++ b/app/src/components/icons/HeaderIcons.tsx @@ -9,7 +9,7 @@ export function ProjectIcon() { > @@ -31,26 +31,26 @@ export function ToggleSidebarIcon() { width="17" height="13.7273" rx="3.59091" - stroke="var(--accent-color)" + stroke="var(--text-color)" /> ); diff --git a/app/src/components/icons/RealTimeVisulationIcons.tsx b/app/src/components/icons/RealTimeVisulationIcons.tsx index d418247..84d8cca 100644 --- a/app/src/components/icons/RealTimeVisulationIcons.tsx +++ b/app/src/components/icons/RealTimeVisulationIcons.tsx @@ -10,43 +10,43 @@ export function CleanPannel() { diff --git a/app/src/components/icons/marketPlaceIcons.tsx b/app/src/components/icons/marketPlaceIcons.tsx index 6952ae1..5a9f293 100644 --- a/app/src/components/icons/marketPlaceIcons.tsx +++ b/app/src/components/icons/marketPlaceIcons.tsx @@ -52,13 +52,13 @@ export function EyeIconBig() { > @@ -80,7 +80,7 @@ export function CommentsIcon() { fillRule="evenodd" clipRule="evenodd" d="M8 13C7.416 13 6.852 12.932 6.31 12.8165L3.956 14.2315L3.9875 11.912C2.183 10.827 1 9.033 1 7C1 3.6865 4.134 1 8 1C11.866 1 15 3.6865 15 7C15 10.314 11.866 13 8 13ZM8 0C3.582 0 0 3.1345 0 7C0 9.2095 1.1725 11.177 3 12.4595V16L6.5045 13.8735C6.9895 13.9535 7.4885 14 8 14C12.418 14 16 10.866 16 7C16 3.1345 12.418 0 8 0ZM11.5 5.5H4.5C4.224 5.5 4 5.724 4 6C4 6.2765 4.224 6.5 4.5 6.5H11.5C11.776 6.5 12 6.2765 12 6C12 5.724 11.776 5.5 11.5 5.5ZM10.5 8.5H5.5C5.224 8.5 5 8.7235 5 9C5 9.2765 5.224 9.5 5.5 9.5H10.5C10.776 9.5 11 9.2765 11 9C11 8.7235 10.776 8.5 10.5 8.5Z" - fill="var(--icon-default-color)" + fill="var(--text-color)" /> @@ -131,7 +131,7 @@ export function StarsIconSmall() { ); } -export function FiileedStarsIconSmall() { +export function FilledStarsIconSmall() { return ( { } }; return ( -
    +
    - {searchValue ? ( -
    -
    -
    -

    Results for {searchValue}

    +
    +
    + {searchValue ? ( +
    +
    +
    +

    Results for {searchValue}

    +
    +
    + {categoryAssets && + categoryAssets?.map((asset: any, index: number) => ( +
    + {asset.filename} + +
    + {asset.filename + .split("_") + .map( + (word: any) => + word.charAt(0).toUpperCase() + word.slice(1) + ) + .join(" ")} +
    +
    + ))} +
    +
    -
    -
    - {categoryAssets && - categoryAssets?.map((asset: any, index: number) => ( + ) : selectedCategory ? ( +
    +

    + {selectedCategory}{" "}
    { + setSelectedCategory(null); + setCategoryAssets([]); + }} > - {asset.filename} + ← Back +
    +

    +
    + {categoryAssets && + categoryAssets?.map((asset: any, index: number) => ( +
    + {asset.filename} { + setSelectedItem({ + name: asset.filename, + id: asset.AssetID, + type: + asset.type === "undefined" + ? undefined + : asset.type, + }); + }} + /> -
    - {asset.filename - .split("_") - .map( - (word: any) => - word.charAt(0).toUpperCase() + word.slice(1) - ) - .join(" ")} -
    -
    - ))} -
    -
    - ) : selectedCategory ? ( -
    -
    { - setSelectedCategory(null); - setCategoryAssets([]); - }} - > - ← Back -
    -

    {selectedCategory}

    -
    - {categoryAssets && - categoryAssets?.map((asset: any, index: number) => ( -
    - {asset.filename} { - setSelectedItem({ - name: asset.filename, - id: asset.AssetID, - type: - asset.type === "undefined" ? undefined : asset.type, - }); - }} - /> - -
    - {asset.filename - .split("_") - .map( - (word: any) => - word.charAt(0).toUpperCase() + word.slice(1) - ) - .join(" ")} -
    -
    - ))} -
    -
    - ) : ( -
    -

    Categories

    -
    - {Array.from( - new Set(categoryList.map((asset) => asset.category)) - ).map((category, index) => { - const categoryInfo = categoryList.find( - (asset) => asset.category === category - ); - return ( -
    fetchCategoryAssets(category)} - > - {category} -
    {category}
    -
    - ); - })} -
    -
    - )} +
    + {asset.filename + .split("_") + .map( + (word: any) => + word.charAt(0).toUpperCase() + word.slice(1) + ) + .join(" ")} +
    +
    + ))} +
    +
    + ) : ( +
    +

    Categories

    +
    + {Array.from( + new Set(categoryList.map((asset) => asset.category)) + ).map((category, index) => { + const categoryInfo = categoryList.find( + (asset) => asset.category === category + ); + return ( +
    fetchCategoryAssets(category)} + > + {category} +
    {category}
    +
    + ); + })} +
    +
    + )} + +
    ); }; diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx index 3b2549a..1434446 100644 --- a/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx +++ b/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx @@ -91,44 +91,42 @@ const Trigger: React.FC = () => {
    {selectedTrigger}
    setActiveOption(option)} />
    -
    - { - const newModel = [...triggeredModel]; - newModel[0] = option; - setTriggeredModel(newModel); - }} - /> -
    -
    - { - const newPoint = [...triggeredPoint]; - newPoint[0] = option; - setTriggeredPoint(newPoint); - }} - /> -
    -
    - { - const newAction = [...triggeredAction]; - newAction[0] = option; - setTriggeredAction(newAction); - }} - /> -
    + { + const newModel = [...triggeredModel]; + newModel[0] = option; + setTriggeredModel(newModel); + }} + /> + { + const newPoint = [...triggeredPoint]; + newPoint[0] = option; + setTriggeredPoint(newPoint); + }} + /> + { + const newAction = [...triggeredAction]; + newAction[0] = option; + setTriggeredAction(newAction); + }} + />
    diff --git a/app/src/components/ui/menu/menu.tsx b/app/src/components/ui/menu/menu.tsx index a416c2c..39508b6 100644 --- a/app/src/components/ui/menu/menu.tsx +++ b/app/src/components/ui/menu/menu.tsx @@ -28,7 +28,7 @@ const MenuBar: React.FC = ({ setOpenMenu }) => { window.location.reload(); } - const savedTheme: string | null = localStorage.getItem("theme") || "light"; + const savedTheme: string | null = localStorage.getItem("theme") ?? "light"; return (
    = ({
    - + {selectedCard.rating}
    {selectedCard.views} views
    diff --git a/app/src/modules/market/Card.tsx b/app/src/modules/market/Card.tsx index ec9db06..a7010cc 100644 --- a/app/src/modules/market/Card.tsx +++ b/app/src/modules/market/Card.tsx @@ -3,6 +3,7 @@ import { CommentsIcon, DownloadIcon, EyeIconBig, + FilledStarsIconSmall, StarsIconSmall, VerifiedIcon, } from "../../components/icons/marketPlaceIcons"; @@ -80,7 +81,13 @@ const Card: React.FC = ({
    {[...Array(5)].map((_, index) => ( - + <> + {index < 3 ? ( + + ) : ( + + )} + ))}
    diff --git a/app/src/modules/visualization/widgets/panel/AddButtons.tsx b/app/src/modules/visualization/widgets/panel/AddButtons.tsx index 4877824..963f44d 100644 --- a/app/src/modules/visualization/widgets/panel/AddButtons.tsx +++ b/app/src/modules/visualization/widgets/panel/AddButtons.tsx @@ -6,8 +6,6 @@ import { } from "../../../../components/icons/RealTimeVisulationIcons"; import { AddIcon } from "../../../../components/icons/ExportCommonIcons"; import { useSocketStore } from "../../../../store/store"; -import { clearPanel } from "../../../../services/visulization/zone/clearPanel"; -import { lockPanel } from "../../../../services/visulization/zone/lockPanel"; // Define the type for `Side` type Side = "top" | "bottom" | "left" | "right"; @@ -305,7 +303,7 @@ const AddButtons: React.FC = ({ fill={ hiddenPanels[selectedZone.zoneId]?.includes(side) ? "var(--icon-default-color-active)" - : "var(--icon-default-color)" + : "var(--text-color)" } />
    @@ -342,7 +340,7 @@ const AddButtons: React.FC = ({ fill={ selectedZone.lockedPanels.includes(side) ? "var(--icon-default-color-active)" - : "var(--icon-default-color)" + : "var(--text-color)" } />
    diff --git a/app/src/styles/abstracts/variables.scss b/app/src/styles/abstracts/variables.scss index 37d9971..f4a6495 100644 --- a/app/src/styles/abstracts/variables.scss +++ b/app/src/styles/abstracts/variables.scss @@ -21,7 +21,8 @@ $text-button-color-dark: #f3f3fd; // background colors // ---------- light mode ---------- -$background-color: linear-gradient(-45deg, #fcfdfdcc 0%, #fcfdfd99 100%); +$background-color: linear-gradient(-45deg, #fcfdfd71 0%, #fcfdfd79 100%); +$background-color-solid-gradient: linear-gradient(-45deg, #fcfdfd 0%, #fcfdfd 100%); $background-color-solid: #fcfdfd; $background-color-secondary: #fcfdfd4d; $background-color-accent: #6f42c1; @@ -44,6 +45,7 @@ $background-radial-gray-gradient: radial-gradient( // ---------- dark mode ---------- $background-color-dark: linear-gradient(-45deg, #333333b3 0%, #2d2437b3 100%); +$background-color-solid-gradient-dark: linear-gradient(-45deg, #333333 0%, #2d2437 100%); $background-color-solid-dark: #19191d; $background-color-secondary-dark: #19191d99; $background-color-accent-dark: #6f42c1; @@ -105,19 +107,10 @@ $color5: #c7a8ff; // old variables $accent-color: #6f42c1; $accent-color-dark: #c4abf1; -// $highlight-accent-color: #e0dfff; -// $highlight-accent-color-dark: #403e6a; -// $background-color: #fcfdfd; -// $background-color-dark: #19191d; -// $background-color-secondary: #e1e0ff80; -// $background-color-secondary-dark: #39394f99; $background-color-gray: #f3f3f3; $background-color-gray-dark: #232323; -// $border-color: #e0dfff; -// $border-color-dark: #403e6a; - $shadow-color: #3c3c431a; $shadow-color-dark: #8f8f8f1a; diff --git a/app/src/styles/base/base.scss b/app/src/styles/base/base.scss index 10fb87c..bf53164 100644 --- a/app/src/styles/base/base.scss +++ b/app/src/styles/base/base.scss @@ -11,6 +11,7 @@ // background colors --background-color: #{$background-color}; --background-color-solid: #{$background-color-solid}; + --background-color-solid-gradient: #{$background-color-solid-gradient}; --background-color-secondary: #{$background-color-secondary}; --background-color-accent: #{$background-color-accent}; --background-color-button: #{$background-color-button}; @@ -61,6 +62,7 @@ // background colors --background-color: #{$background-color-dark}; + --background-color-solid-gradient: #{$background-color-solid-gradient-dark}; --background-color-solid: #{$background-color-solid-dark}; --background-color-secondary: #{$background-color-secondary-dark}; --background-color-accent: #{$background-color-accent-dark}; diff --git a/app/src/styles/components/input.scss b/app/src/styles/components/input.scss index b4e7651..e3b9585 100644 --- a/app/src/styles/components/input.scss +++ b/app/src/styles/components/input.scss @@ -51,9 +51,6 @@ input[type="number"] { -webkit-appearance: none; margin: 0; } - - // Firefox - -moz-appearance: textfield; } .input-value { @@ -105,7 +102,7 @@ input[type="number"] { .search-wrapper { position: sticky; top: 0; - padding: 8px 10px; + padding: 0px 10px; width: 100%; z-index: 1; @@ -140,15 +137,16 @@ input[type="number"] { .clear-button { @include flex-center; position: absolute; + top: 4px; right: 4px; - width: 24px; - height: 24px; + width: 21px; + height: 21px; border: none; + border-radius: #{$border-radius-large}; cursor: pointer; background: transparent; - &:hover { - background: var(--highlight-accent-color); + background: var(--background-color-secondary); } } } @@ -219,9 +217,9 @@ input[type="number"] { .regularDropdown-container { width: 100%; min-width: 80px; - padding: 2px 4px; + padding: 4px 8px; border: 1px solid var(--border-color); - border-radius: 6px; + border-radius: #{$border-radius-large}; position: relative; cursor: pointer; @@ -230,7 +228,7 @@ input[type="number"] { display: flex; justify-content: space-between; cursor: pointer; - border-radius: 6px; + border-radius: #{$border-radius-large}; } .dropdown-options { @@ -238,7 +236,7 @@ input[type="number"] { width: 100%; background: var(--background-color); border: 1px solid var(--border-color); - border-radius: #{$border-radius-small}; + border-radius: #{$border-radius-large}; z-index: 10; max-height: 200px; overflow-y: auto; @@ -255,7 +253,7 @@ input[type="number"] { padding: 2px 4px; cursor: pointer; flex-direction: row !important; - border-radius: #{$border-radius-small}; + border-radius: #{$border-radius-medium}; &:hover { color: var(--highlight-text-color); @@ -272,17 +270,19 @@ input[type="number"] { .input.default { width: 100%; position: relative; + @include flex-center; + gap: 6px; .dropdown { - top: 2px; - right: 2px; - position: absolute; - background: var(--highlight-accent-color); - border-radius: #{$border-radius-small}; - padding: 1px 4px; + height: 100%; + background: var(--background-color-drop-down-gradient); + border-radius: #{$border-radius-extra-large}; + padding: 1px 8px; + outline: 1px solid var(--border-color); .active-option { - color: var(--accent-color); + line-height: 22px; + color: var(--text-color); font-size: var(--font-size-small); } } @@ -304,10 +304,10 @@ input[type="number"] { .eye-picker-button { height: 24px; - min-width: 24px; + min-width: 36px; @include flex-center; - border-radius: #{$border-radius-small}; - background: var(--background-color-secondary); + border-radius: #{$border-radius-large}; + background: var(--background-color-drop-down-gradient); cursor: pointer; } @@ -326,6 +326,9 @@ input[type="number"] { background: var(--background-color) !important; border: 1px solid var(--border-color) !important; padding: 5px 10px; + cursor: pointer; + border-radius: #{$border-radius-extra-large}; + transition: background-color 0.3s ease; .label { white-space: nowrap; @@ -333,12 +336,6 @@ input[type="number"] { max-width: 80%; text-overflow: ellipsis; } - - // font-size: 12px; - cursor: pointer; - border-radius: 5px; - transition: background-color 0.3s ease; - &:hover { background: #333333; } @@ -354,7 +351,8 @@ input[type="number"] { right: -16px; background: var(--background-color); border: 1px solid var(--border-color); - border-radius: 5px; + border-radius: #{$border-radius-large}; + backdrop-filter: blur(18px); box-shadow: #{$box-shadow-medium}; z-index: 1000; min-width: 200px; @@ -364,13 +362,11 @@ input[type="number"] { .dropdown-content { display: flex; flex-direction: column; - gap: 6px; + padding: 2px; .nested-dropdown { margin-left: 0; } - - padding: 10px; } .loading { @@ -409,15 +405,16 @@ input[type="number"] { .dropdown-item { display: block; - padding: 5px 10px; + padding: 4px 10px; text-decoration: none; color: var(--text-color); font-size: var(--font-size-regular); cursor: pointer; transition: background-color 0.3s ease; - + border-radius: #{$border-radius-large}; &:hover { - background: var(--background-color); + color: var(--accent-color); + background: var(--highlight-accent-color); } } @@ -428,24 +425,25 @@ input[type="number"] { display: flex; align-items: center; justify-content: space-between; - padding: 5px 10px; + padding: 4px 10px; cursor: pointer; font-size: var(--font-size-regular); color: var(--text-color); transition: background-color 0.3s ease; - border-radius: #{$border-radius-small}; + border-radius: #{$border-radius-large}; .arrow-container { @include flex-center; } &:hover { - background: var(--background-color); + color: var(--accent-color); + background: var(--highlight-accent-color); } &.open { - color: var(--accent-color); - background: var(--highlight-accent-color); + color: var(--text-button-color); + background: var(--background-color-accent); } .icon { @@ -649,7 +647,7 @@ input[type="number"] { padding: 2px 32px; border: none; border-radius: #{$border-radius-large}; - color: var(--text-color); + color: var(--text-button-color); background: var(--background-color-button); transition: all 0.2s; cursor: pointer; diff --git a/app/src/styles/components/marketPlace/marketPlace.scss b/app/src/styles/components/marketPlace/marketPlace.scss index b84a252..23b14b7 100644 --- a/app/src/styles/components/marketPlace/marketPlace.scss +++ b/app/src/styles/components/marketPlace/marketPlace.scss @@ -9,8 +9,8 @@ position: absolute; left: 0; top: 0; - padding: 100px 50px; - padding-bottom: 32px; + padding: 10px; + padding-top: 100px; .marketplace-container { position: relative; @@ -59,8 +59,9 @@ .regularDropdown-container { max-width: 159px; height: 100%; - border-radius: #{$border-radius-large}; + border-radius: #{$border-radius-extra-large}; border: 1px solid var(--border-color); + padding: 0 10px; .dropdown-header { align-items: center; } @@ -68,8 +69,9 @@ .button { padding: 5px 20px; - border: 1px solid var(--accent-color); border-radius: 14px; + background: var(--background-color-button); + color: var(--text-button-color); } .rating-container { @@ -106,14 +108,14 @@ .cards-wrapper-container { display: flex; flex-wrap: wrap; - gap: 28px; + gap: 18px; .card-container { - width: calc(25% - 23px); + width: calc(25% - 14px); border-radius: 18px; padding: 12px; box-shadow: 0px 2px 10.5px 0px #0000000d; - background: var(--background-color); + background: var(--background-color-solid-gradient); border: 1px solid var(--border-color); position: relative; display: flex; diff --git a/app/src/styles/components/menu/menu.scss b/app/src/styles/components/menu/menu.scss index be9e17f..dffc6a4 100644 --- a/app/src/styles/components/menu/menu.scss +++ b/app/src/styles/components/menu/menu.scss @@ -7,7 +7,7 @@ gap: 2px; position: relative; border-radius: #{$border-radius-extra-large}; - background: var(--background-color-drop-down); + background: var(--background-color-drop-down-gradient); padding: 3px 8px; width: fit-content; max-width: 100%; @@ -25,11 +25,12 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + color: var(--text-color); } } .more-options-button { @include flex-center; - border-radius: #{$border-radius-small}; + border-radius: #{$border-radius-medium}; height: 22px; position: relative; &:hover { @@ -52,7 +53,7 @@ top: 32px; left: 0; z-index: 5; - background: var(--background-color); + background: var(--background-color-solid); color: var(--text-color); box-shadow: var(--box-shadow-light); border-radius: 8px; @@ -69,7 +70,7 @@ position: relative; height: 100%; padding: 4px 8px 4px 12px; - border-radius: #{$border-radius-small}; + border-radius: #{$border-radius-medium}; .menu-button { width: 100%; cursor: pointer; @@ -89,19 +90,21 @@ .dropdown-menu { position: absolute; top: 0; - left: 100%; - background: var(--background-color); + left: 103%; + background: var(--background-color-solid); min-width: 220px; - border-radius: 4px; + border-radius: #{$border-radius-medium}; box-shadow: var(--box-shadow-light); - border: 1px solid var(--background-color); + outline: 1px solid var(--border-color); + backdrop-filter: blur(20px); + outline-offset: -1px; z-index: 100; padding: 4px; .menu-item-container { position: relative; .menu-item { padding: 4px 8px 4px 12px; - border-radius: #{$border-radius-small}; + border-radius: #{$border-radius-medium}; display: flex; justify-content: space-between; align-items: center; @@ -138,18 +141,19 @@ .submenu { position: absolute; - left: 100%; + left: 102%; top: 0; - background: var(--background-color); + background: var(--background-color-solid); min-width: 200px; - border-radius: 0 4px 4px 4px; + border-radius: #{$border-radius-medium}; box-shadow: var(--box-shadow-light); - border: 1px solid var(--background-color); + outline: 1px solid var(--border-color); + outline-offset: -1px; z-index: 101; padding: 4px; .submenu-item { padding: 4px 8px 4px 12px; - border-radius: #{$border-radius-small}; + border-radius: #{$border-radius-medium}; display: flex; justify-content: space-between; align-items: center; diff --git a/app/src/styles/components/moduleToggle.scss b/app/src/styles/components/moduleToggle.scss index c864cbf..7e5b727 100644 --- a/app/src/styles/components/moduleToggle.scss +++ b/app/src/styles/components/moduleToggle.scss @@ -38,7 +38,7 @@ left: 0; width: 0%; height: 100%; - background: var(--highlight-accent-color); + background: var(--background-color-solid-gradient); transition: width 0.2s; border-radius: #{$border-radius-extra-large}; } diff --git a/app/src/styles/components/tools.scss b/app/src/styles/components/tools.scss index abea736..54c21e7 100644 --- a/app/src/styles/components/tools.scss +++ b/app/src/styles/components/tools.scss @@ -16,6 +16,8 @@ background: var(--background-color); backdrop-filter: blur(8px); z-index: #{$z-index-default}; + outline: 1px solid var(--border-color); + outline-offset: -1px; .split { height: 20px; @@ -39,7 +41,7 @@ height: 28px; width: 28px; cursor: pointer; - border-radius: #{$border-radius-small}; + border-radius: #{$border-radius-medium}; &:hover { background: color-mix(in srgb, @@ -116,10 +118,10 @@ .toggle-threed-button { @include flex-center; - padding: 3px; - border-radius: #{$border-radius-small}; - background: var(--highlight-accent-color); - gap: 2px; + padding: 4px; + border-radius: #{$border-radius-medium}; + background: var(--background-color); + gap: 5px; position: relative; .toggle-option { @@ -132,30 +134,25 @@ &::after { content: ""; position: absolute; - background: var(--accent-color); - left: 3px; - top: 3px; - height: 18px; - width: 18px; - border-radius: #{$border-radius-small}; + background: var(--background-color-accent); + left: 2px; + top: 2px; + height: 23px; + width: 23px; + border-radius: #{$border-radius-medium}; transition: all 0.2s; } .active { - color: var(--highlight-accent-color); + color: var(--text-button-color); } } .toggled { &::after { - left: 24px; + left: 25px; } } - - - - - } .exitPlay { diff --git a/app/src/styles/components/visualization/floating/common.scss b/app/src/styles/components/visualization/floating/common.scss index 0084e7a..0bbbdc9 100644 --- a/app/src/styles/components/visualization/floating/common.scss +++ b/app/src/styles/components/visualization/floating/common.scss @@ -182,7 +182,6 @@ background: var(--background-color-secondary); border-radius: 20px; color: var(--text-color); - background: #252525cc; .header-wrapper { width: 100%; @@ -276,7 +275,7 @@ .icon { width: 45px; height: 45px; - background: var(--accent-color); + background: var(--background-color-accent); display: flex; justify-content: center; align-items: center; diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss index 583dc0a..70d3a5d 100644 --- a/app/src/styles/layout/sidebar.scss +++ b/app/src/styles/layout/sidebar.scss @@ -7,7 +7,7 @@ top: 32px; left: 8px; background: var(--background-color); - backdrop-filter: blur(150px); + backdrop-filter: blur(15px); border-radius: #{$border-radius-extra-large}; outline: 1px solid var(--border-color); box-shadow: #{$box-shadow-medium}; @@ -30,10 +30,6 @@ padding: 0 8px; width: 100%; max-width: calc(100% - 32px); - - .input-value { - color: var(--accent-color); - } } } @@ -235,7 +231,6 @@ .outline-container { height: 100%; - .outline-content-container { position: relative; height: 100%; @@ -256,7 +251,7 @@ top: 32px; right: 8px; background: var(--background-color); - backdrop-filter: blur(150px); + backdrop-filter: blur(15px); border-radius: #{$border-radius-extra-large}; outline: 1px solid var(--border-color); box-shadow: #{$box-shadow-medium}; @@ -276,7 +271,7 @@ .share-button { padding: 4px 12px; - color: var(--text-color); + color: var(--text-button-color); background: var(--background-color-button); font-weight: var(--font-weight-regular); border-radius: #{$border-radius-large}; @@ -750,7 +745,7 @@ .value-field-container { margin: 0; input { - padding: 5px 4px; + padding: 5px 10px; } .dropdown { top: 4px; @@ -772,8 +767,8 @@ padding: 6px 12px; .regularDropdown-container { padding: 5px 8px; - outline: 2px solid var(--border-color); - outline-offset: -2px; + outline: 1px solid var(--border-color); + outline-offset: -1px; border: none; } } @@ -806,7 +801,6 @@ @include flex-space-between; padding: 4px 12px; width: 100%; - margin: 2px 0; border-radius: #{$border-radius-medium}; .value { display: flex; @@ -939,6 +933,18 @@ } } + .trigger-wrapper { + .trigger-item { + .trigger-name { + padding: 8px; + margin-top: 4px; + } + .value-field-container { + margin: 0; + } + } + } + .footer { @include flex-center; justify-content: flex-start; @@ -948,10 +954,9 @@ } .compare-simulations-container { - margin: 6px; background: var(--background-color-gray); padding: 12px; - border-radius: #{$border-radius-medium}; + border-radius: #{$border-radius-large}; .compare-simulations-header { font-weight: var(--font-weight-medium); @@ -973,10 +978,12 @@ input { width: fit-content; - background: var(--accent-color); - color: var(--highlight-accent-color); - padding: 2px 8px; + background: var(--background-color-button); + color: var(--text-button-color); + padding: 3px 10px; cursor: pointer; + border: none; + outline: none; } } } @@ -1084,24 +1091,24 @@ input { border: none; + outline: none; cursor: pointer; - transition: all 0.2s; &:hover { - transform: translateY(-2px); box-shadow: #{$box-shadow-medium}; - outline: 1px solid var(--accent-color); + outline: 1px solid var(--input-border-color); } } .cancel { background: transparent; - color: var(--accent-color); + background: var(--background-color-secondary); + color: var(--text-color); } .submit { - background: var(--accent-color); - color: var(--highlight-accent-color); + background: var(--background-color-button); + color: var(--text-button-color); } } @@ -1109,7 +1116,7 @@ margin: 6px; background: var(--background-color-gray); padding: 12px; - border-radius: #{$border-radius-medium}; + border-radius: #{$border-radius-large}; .custom-analysis-header { font-weight: var(--font-weight-medium); @@ -1131,34 +1138,53 @@ input { width: fit-content; - background: var(--accent-color); - color: var(--highlight-accent-color); - padding: 2px 8px; + background: var(--background-color-button); + color: var(--text-button-color); + padding: 3px 10px; cursor: pointer; + border: none; + outline: none; } } } } } -.assets-container { +.assets-container-main { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; height: 100%; + max-height: 50vh; gap: 3px; - padding: 10px 0; + overflow: auto; + + .assets-result { + width: 100%; + .assets-wrapper { + margin: 0; + } + } + .assets-list-section { + width: 100%; + padding: 4px; + } .assets-wrapper { width: 100%; position: relative; - margin: 8px 10px; - h2 { + h2, + .searched-content { color: var(--text-color); font-family: $large; font-weight: $bold-weight; + padding: 8px; + @include flex-space-between; + .back-button { + cursor: pointer; + } } .categories-container { @@ -1167,8 +1193,8 @@ flex-direction: row; flex-wrap: wrap; height: 100%; - gap: 0px 4px; - padding: 10px 0; + gap: 4px; + padding: 2px; .category { width: 123px; @@ -1267,11 +1293,11 @@ flex-direction: row; flex-wrap: wrap; height: 100%; - gap: 0px 4px; - padding: 10px 0; + gap: 6px; + padding: 2px; .assets { - width: 123px; + width: 122px; height: 95px; border-radius: #{$border-radius-large}; background: var(--background-color); @@ -1295,7 +1321,11 @@ width: 100%; height: 100%; font-size: var(--font-size-regular); - background: linear-gradient(0deg,rgba(37, 24, 51, 0) 0%, rgba(78, 22, 128, 0.4) 100%); + background: linear-gradient( + 0deg, + rgba(37, 24, 51, 0) 0%, + rgba(78, 22, 128, 0.4) 100% + ); pointer-events: none; backdrop-filter: blur(8px); opacity: 0; @@ -1316,23 +1346,5 @@ } } } - - .back-button { - position: absolute; - top: 0; - right: 0; - @include flex-center; - cursor: pointer; - } - } -} - -.assets-result { - width: 100%; - height: 100%; - margin: 8px 10px; - - .assets-wrapper { - margin: 0; } } diff --git a/app/src/styles/pages/realTimeViz.scss b/app/src/styles/pages/realTimeViz.scss index 3aa1bd5..a9dba89 100644 --- a/app/src/styles/pages/realTimeViz.scss +++ b/app/src/styles/pages/realTimeViz.scss @@ -4,7 +4,6 @@ // Main Container .realTime-viz { background: #131313; - border-radius: 20px; box-shadow: $box-shadow-medium; width: calc(100% - (320px + 270px + 90px)); height: calc(100% - (250px)); @@ -24,19 +23,15 @@ } .floating { - - width: calc(var(--realTimeViz-container-width) * 0.2); height: calc(var(--realTimeViz-container-width) * 0.05); min-width: 250px; max-width: 300px; - // min-height: 83px !important; - // max-height: 100px !important; - background: var(--background-color); - border: 1.23px solid var(--border-color); + backdrop-filter: blur(10px); + border: 1px solid var(--border-color); box-shadow: 0px 4.91px 4.91px 0px #0000001c; border-radius: $border-radius-medium; padding: 18px; @@ -67,12 +62,12 @@ .zone-wrapper { display: flex; background: var(--background-color); + backdrop-filter: blur(10px); position: absolute; bottom: 0px; left: 50%; gap: 6px; border-radius: 8px; - max-width: 80%; overflow: auto; max-width: calc(100% - 500px); min-width: 150px; @@ -117,15 +112,13 @@ } .active { - background: var(--accent-color); + background: var(--background-color-accent); color: var(--background-color); - // color: #FCFDFD !important; } } .zone-wrapper.bottom { bottom: var(--bottomWidth); - // bottom: 200px; } .content-container { @@ -146,7 +139,6 @@ display: flex; background: rgba(224, 223, 255, 0.5); position: absolute; - // bottom: 10px; left: 50%; transform: translate(-50%, 0); gap: 6px; @@ -189,7 +181,6 @@ border-radius: 6px; overflow: auto; z-index: $z-index-tools; - overflow: auto; &::-webkit-scrollbar { display: none; @@ -204,6 +195,7 @@ flex-direction: column; gap: 6px; background: var(--background-color); + backdrop-filter: blur(10px); &::-webkit-scrollbar { display: none; @@ -211,12 +203,10 @@ .chart-container { width: 100%; - max-height: 100%; border: 1px dashed var(--background-color-gray); border-radius: 8px; box-shadow: var(--box-shadow-medium); - padding: 6px 0; background: var(--background-color); position: relative; padding: 0 10px; @@ -255,14 +245,11 @@ color: var(--text-color); &:hover { + background: var(--highlight-accent-color); + width: 100%; .label { color: var(--accent-color); } - } - - &:hover { - background: var(--highlight-accent-color); - width: 100%; svg { &:first-child { @@ -285,7 +272,6 @@ } } - .close-btn { position: absolute; top: 5px; @@ -369,7 +355,6 @@ .playingFlase { .zone-wrapper.bottom { bottom: var(--bottomWidth); - // bottom: 210px; } } @@ -398,7 +383,7 @@ } .active { - background: var(--accent-color); + background: var(--background-color-accent); } &:hover { @@ -413,8 +398,7 @@ height: 18px; display: flex; justify-content: center; - // align-items: center; - background: var(--accent-color); + background: var(--background-color-accent); border: none; color: var(--background-color); border-radius: 4px; @@ -425,20 +409,20 @@ } path { - stroke: var(--primary-color); + stroke: var(--text-color); stroke-width: 2; } } .active { - background: #ffe3e0; + background: #f657482f; .add-icon { rotate: 45deg; path { stroke: #f65648; - stroke-width: 2; + stroke-width: 1.3; } } } @@ -589,12 +573,6 @@ } .floating-wrapper { - .icon { - // width: 25px !important; - // height: 25px !important; - // background: transparent; - } - .kebab { width: 25px; height: 25px; @@ -640,9 +618,6 @@ .label { color: var(--accent-color); } - } - - &:hover { background: var(--highlight-accent-color); width: 100%; @@ -662,22 +637,19 @@ } .distance-line { - position: absolute; border-style: dashed; - border-color: var(--accent-color); - /* Green color for visibility */ + border-color: var(--background-color-accent); border-width: 1px; pointer-events: none; - /* Ensure lins don't interfere with dragging */ z-index: 10000; } /* Label styles for displaying distance values */ .distance-label { position: absolute; - background: var(--accent-color); - color: white; + background: var(--background-color-accent); + color: var(--text-button-color); font-size: 12px; padding: 2px 6px; border-radius: 3px; @@ -749,15 +721,12 @@ } .activeChart { - outline: 2px solid var(--accent-color); + outline: 1px solid var(--highlight-secondary-color); z-index: 2 !important; } .chart-container.notLinked { - outline: 1px solid red; - - } .connectionSuccess { @@ -801,4 +770,4 @@ } } } -} \ No newline at end of file +} From 5ea85f49f07bcde6d6d8d7a8efbfe2b9323daffa Mon Sep 17 00:00:00 2001 From: Vishnu Date: Wed, 30 Apr 2025 16:52:08 +0530 Subject: [PATCH 3/6] refactor: Update icon stroke and fill colors based on active state; modify EventProperties component structure; adjust styles in tools, sidebar, and realTimeViz for improved layout and responsiveness --- app/src/components/icons/SimulationIcons.tsx | 36 ++++++-- .../eventProperties/EventProperties.tsx | 8 +- app/src/styles/components/tools.scss | 2 +- app/src/styles/layout/sidebar.scss | 83 +++++++++---------- app/src/styles/pages/realTimeViz.scss | 7 +- 5 files changed, 75 insertions(+), 61 deletions(-) diff --git a/app/src/components/icons/SimulationIcons.tsx b/app/src/components/icons/SimulationIcons.tsx index b4aa881..ef23c8f 100644 --- a/app/src/components/icons/SimulationIcons.tsx +++ b/app/src/components/icons/SimulationIcons.tsx @@ -9,13 +9,17 @@ export function AnalysisIcon({ isActive }: { isActive: boolean }) { > @@ -34,11 +38,15 @@ export function MechanicsIcon({ isActive }: { isActive: boolean }) { > ); @@ -55,15 +63,21 @@ export function PropertiesIcon({ isActive }: { isActive: boolean }) { > ); @@ -82,13 +96,17 @@ export function SimulationIcon({ isActive }: { isActive: boolean }) { fillRule="evenodd" clipRule="evenodd" d="M6.44104 7.04762C6.57815 6.98413 6.73614 6.98413 6.87325 7.04762L12.0161 9.42958C12.198 9.51377 12.3143 9.69589 12.3143 9.89624V15.8512C12.3143 16.0347 12.2165 16.2043 12.0577 16.2962L6.9148 19.2736C6.75547 19.3659 6.55881 19.3659 6.39949 19.2736L1.25661 16.2962C1.09779 16.2043 1 16.0347 1 15.8512V9.89624C1 9.69589 1.11635 9.51377 1.29815 9.42958L6.44104 7.04762ZM2.02857 10.7297L6.14286 12.794V17.9366L2.02857 15.5546V10.7297ZM7.17143 17.9366L11.2857 15.5546V10.7297L7.17143 12.794V17.9366ZM6.65714 11.9013L10.6163 9.91477L6.65714 8.08106L2.69798 9.91477L6.65714 11.9013Z" - fill={"var(--icon-default-color-active)"} + fill={ + isActive ? "var(--icon-default-color-active)" : "var(--text-color)" + } /> ); diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx index 88ae240..a307c86 100644 --- a/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx +++ b/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx @@ -92,9 +92,9 @@ const EventProperties: React.FC = () => {

    Here are some products you can add it to:

    -
      +
      {products.map((product) => ( -
    • +
      -
      • +
      ))} -
    +
    • )} diff --git a/app/src/styles/components/tools.scss b/app/src/styles/components/tools.scss index 54c21e7..0c1a9c3 100644 --- a/app/src/styles/components/tools.scss +++ b/app/src/styles/components/tools.scss @@ -30,7 +30,7 @@ .general-options, .activeDropicon { @include flex-center; - gap: 8px; + gap: 2px; interpolate-size: allow-keywords; width: 0; opacity: 0; diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss index 70d3a5d..c7f1694 100644 --- a/app/src/styles/layout/sidebar.scss +++ b/app/src/styles/layout/sidebar.scss @@ -51,8 +51,6 @@ .active { background: var(--background-color-accent); - outline: 1px solid var(--border-color); - outline-offset: -1px; rect { stroke: var(--icon-default-color-active); } @@ -60,7 +58,12 @@ fill: var(--icon-default-color-active); } &:hover { - background: var(--background-color-secondary); + rect { + stroke: var(--icon-default-color); + } + circle { + fill: var(--icon-default-color); + } } } } @@ -365,14 +368,14 @@ width: 34px; border-radius: #{$border-radius-circle}; background: var(--background-color-secondary); - backdrop-filter: blur(8px); - box-shadow: #{$box-shadow-medium}; + backdrop-filter: blur(12px); outline: 1px solid var(--border-color); outline-offset: -1px; } .active { background: var(--background-color-accent); + outline: none; } } @@ -390,55 +393,43 @@ .no-event-selected { color: #666; - padding: 1.8rem 1rem; + padding: 16px; grid-column: 1 / -1; .products-list { padding-top: 1rem; + .product-item { + text-align: start; + margin-top: 8px; + padding: 2px 0; + text-decoration: none; + display: flex; + flex-wrap: wrap; + gap: 6px; + button { + width: fit-content; + position: relative; + @include flex-center; + gap: 4px; + background: var(--background-color); + padding: 8px 12px; + border-radius: #{$border-radius-extra-large}; + outline: 1px solid var(--border-color); + &:hover { + background: var(--background-color-accent); + color: var(--text-button-color); + outline: none; + path { + stroke: var(--text-button-color); + stroke-width: 1.3; + } + } + } + } .products-list-title { text-align: start; color: var(--accent-color); font-size: var(--font-size-regular); } - ul { - li { - text-align: start; - margin: 8px 0; - padding: 2px 0; - text-decoration: none; - &::marker { - content: ""; - } - button { - width: fit-content; - position: relative; - transition: all 0.2s ease; - @include flex-center; - gap: 4px; - &:before { - content: ""; - position: absolute; - left: 0; - bottom: -4px; - background: var(--accent-color); - height: 1px; - width: 0%; - transition: all 0.3s ease; - } - } - &:hover { - button { - path { - stroke: var(--accent-color); - stroke-width: 1.5px; - } - color: var(--accent-color); - &:before { - width: 100%; - } - } - } - } - } } } } diff --git a/app/src/styles/pages/realTimeViz.scss b/app/src/styles/pages/realTimeViz.scss index a9dba89..665e44b 100644 --- a/app/src/styles/pages/realTimeViz.scss +++ b/app/src/styles/pages/realTimeViz.scss @@ -113,7 +113,9 @@ .active { background: var(--background-color-accent); - color: var(--background-color); + color: var(--text-button-color); + border: none; + outline: none; } } @@ -406,6 +408,9 @@ .add-icon { @include flex-center; transition: rotate 0.2s; + path{ + stroke: var(--text-button-color); + } } path { From bd402275b2781f34d560d37748e907d6a2bac8c0 Mon Sep 17 00:00:00 2001 From: Vishnu Date: Wed, 30 Apr 2025 17:05:28 +0530 Subject: [PATCH 4/6] refactor: Adjust styles for dropdown options; modify padding, margin, and border-radius for improved layout and appearance --- app/src/styles/components/tools.scss | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/app/src/styles/components/tools.scss b/app/src/styles/components/tools.scss index 0c1a9c3..5984dab 100644 --- a/app/src/styles/components/tools.scss +++ b/app/src/styles/components/tools.scss @@ -79,19 +79,20 @@ position: absolute; bottom: 40px; left: 0; - box-shadow: #{$box-shadow-medium}; - padding: 8px; - border-radius: #{$border-radius-large}; + padding: 2px 4px; + border-radius: #{$border-radius-medium}; background: var(--background-color); + backdrop-filter: blur(8px); .option-list { - margin: 4px 0; display: flex; align-items: center; white-space: nowrap; border-radius: #{$border-radius-medium}; gap: 6px; - padding: 4px; + padding: 2px; + padding-right: 12px; + margin: 2px 0; &:hover { background: var(--highlight-accent-color); From 6a51fbca610ba1b9e5794de36aa20eeb7cf2e416 Mon Sep 17 00:00:00 2001 From: Nalvazhuthi Date: Wed, 30 Apr 2025 18:20:36 +0530 Subject: [PATCH 5/6] updated realTime vis panel smooth transition --- .../components/icons/ExportCommonIcons.tsx | 33 +-- app/src/components/icons/analysis.tsx | 2 +- .../ui/analysis/ProductionCapacity.tsx | 2 +- .../ui/simulation/simulationPlayer.tsx | 4 +- .../visualization/RealTimeVisulization.tsx | 14 +- .../widgets/panel/AddButtons.tsx | 144 +++++++------ .../visualization/widgets/panel/Panel.tsx | 29 ++- app/src/pages/Project.tsx | 10 +- .../components/analysis/ROISummary.scss | 41 ++-- .../styles/components/analysis/analysis.scss | 6 +- .../components/simulation/simulation.scss | 46 +++-- app/src/styles/pages/realTimeViz.scss | 192 +++++++++++++++++- 12 files changed, 369 insertions(+), 154 deletions(-) diff --git a/app/src/components/icons/ExportCommonIcons.tsx b/app/src/components/icons/ExportCommonIcons.tsx index c78261e..757bf54 100644 --- a/app/src/components/icons/ExportCommonIcons.tsx +++ b/app/src/components/icons/ExportCommonIcons.tsx @@ -607,7 +607,7 @@ export const HourlySimulationIcon = () => { fillRule="evenodd" clipRule="evenodd" d="M9.22794 8.29297C9.22794 9.1131 9.69975 9.49575 10.1561 9.86512C10.7275 10.3286 11.371 10.8503 11.4375 12.4462H5.91087C5.97732 10.8503 6.62079 10.3286 7.19228 9.86512C7.64859 9.49575 8.1204 9.1131 8.1204 8.29297C8.1204 7.47284 7.64859 7.09018 7.19228 6.72082C6.62079 6.25732 5.97732 5.73567 5.91087 4.13971H11.4375C11.371 5.73567 10.7275 6.25732 10.1561 6.72082C9.69975 7.09018 9.22794 7.47284 9.22794 8.29297ZM10.5049 7.15054C11.1694 6.61173 11.9968 5.94112 11.9968 3.86282V3.58594H5.35156V3.86282C5.35156 5.94112 6.17889 6.61173 6.84342 7.15054C7.27867 7.50385 7.56663 7.73699 7.56663 8.29297C7.56663 8.84895 7.27867 9.08209 6.84342 9.4354C6.17889 9.97421 5.35156 10.6448 5.35156 12.7231V13H11.9968V12.7231C11.9968 10.6448 11.1695 9.97421 10.5049 9.4354C10.0697 9.08209 9.78171 8.84895 9.78171 8.29297C9.78171 7.73699 10.0697 7.50385 10.5049 7.15054ZM8.54764 9.83582L7.71588 10.5109C7.3515 10.806 7.03751 11.0602 6.86916 11.6156H10.4792C10.3108 11.0602 9.99685 10.806 9.63247 10.5109L8.80071 9.83582C8.72706 9.77602 8.62129 9.77602 8.54764 9.83582Z" - fill="#2B3344" + fill="var(--text-color)" /> ); @@ -624,15 +624,15 @@ export const DailyProductionIcon = () => { > ); @@ -649,7 +649,7 @@ export const MonthlyROI = () => { > ); @@ -666,15 +666,15 @@ export const ExpandIcon = () => { > ); @@ -691,21 +691,21 @@ export const StartIcon = () => { > { > { /> { fillRule="evenodd" clipRule="evenodd" d="M9.55992 9.81727L4.10352 6.17969V14.7664L9.55992 11.1288V14.7664L16 10.4731L9.55992 6.17969V9.81727ZM5.1948 12.7273V8.21877L8.57624 10.4731L5.1948 12.7273ZM10.6512 12.7273V8.21877L14.0326 10.4731L10.6512 12.7273Z" - fill="#2B3344" + fill="var(--text-color)" /> ); }; + // export const DublicateIcon = () => { // return ( // ); diff --git a/app/src/components/ui/analysis/ProductionCapacity.tsx b/app/src/components/ui/analysis/ProductionCapacity.tsx index 192e009..31c3a02 100644 --- a/app/src/components/ui/analysis/ProductionCapacity.tsx +++ b/app/src/components/ui/analysis/ProductionCapacity.tsx @@ -2,7 +2,7 @@ import React, { useState } from "react"; import { ProductionCapacityIcon } from "../../icons/analysis"; const ProductionCapacity = ({ - progressPercent = 10, + progressPercent = 50, avgProcessTime = "28.4 Secs/unit", machineUtilization = "78%", throughputValue = 128, diff --git a/app/src/components/ui/simulation/simulationPlayer.tsx b/app/src/components/ui/simulation/simulationPlayer.tsx index 5313710..22ad9fe 100644 --- a/app/src/components/ui/simulation/simulationPlayer.tsx +++ b/app/src/components/ui/simulation/simulationPlayer.tsx @@ -120,7 +120,7 @@ const SimulationPlayer: React.FC = () => { const intervals = [10, 20, 30, 40, 50, 60]; // in minutes const totalSegments = intervals.length; - const progress = 80; // percent (example) + const progress = 20; // percent (example) const processPlayerRef = useRef(null); const processWrapperRef = useRef(null); @@ -294,7 +294,7 @@ const SimulationPlayer: React.FC = () => { Speed
    -
    0X
    +
    0.5X
    diff --git a/app/src/modules/visualization/RealTimeVisulization.tsx b/app/src/modules/visualization/RealTimeVisulization.tsx index 05f7371..caf37a1 100644 --- a/app/src/modules/visualization/RealTimeVisulization.tsx +++ b/app/src/modules/visualization/RealTimeVisulization.tsx @@ -11,10 +11,7 @@ import { useDroppedObjectsStore, useFloatingWidget, } from "../../store/visualization/useDroppedObjectsStore"; -import { - useSocketStore, - useWidgetSubOption, -} from "../../store/store"; +import { useSocketStore, useWidgetSubOption } from "../../store/store"; import { getZone2dData } from "../../services/visulization/zone/getZoneData"; import { generateUniqueId } from "../../functions/generateUniqueId"; import { determinePosition } from "./functions/determinePosition"; @@ -69,13 +66,17 @@ const RealTimeVisulization: React.FC = () => { const { selectedZone, setSelectedZone } = useSelectedZoneStore(); const { setRightSelect } = useRightSelected(); - const { editWidgetOptions, setEditWidgetOptions } = useEditWidgetOptionsStore(); + const { editWidgetOptions, setEditWidgetOptions } = + useEditWidgetOptionsStore(); const { rightClickSelected, setRightClickSelected } = useRightClickSelected(); const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false); const { setFloatingWidget } = useFloatingWidget(); const { widgetSubOption } = useWidgetSubOption(); const { visualizationSocket } = useSocketStore(); const { setSelectedChartId } = useWidgetStore(); + const [waitingPanels, setWaitingPanels] = useState(null); + + console.log("waitingPanels: ", waitingPanels); OuterClick({ contextClassName: [ @@ -377,6 +378,8 @@ const RealTimeVisulization: React.FC = () => { setHiddenPanels={setHiddenPanels} selectedZone={selectedZone} setSelectedZone={setSelectedZone} + waitingPanels={waitingPanels} + setWaitingPanels={setWaitingPanels} /> )} @@ -385,6 +388,7 @@ const RealTimeVisulization: React.FC = () => { setSelectedZone={setSelectedZone} hiddenPanels={hiddenPanels} setZonesData={setZonesData} + waitingPanels={waitingPanels} /> )} diff --git a/app/src/modules/visualization/widgets/panel/AddButtons.tsx b/app/src/modules/visualization/widgets/panel/AddButtons.tsx index 4877824..778ded1 100644 --- a/app/src/modules/visualization/widgets/panel/AddButtons.tsx +++ b/app/src/modules/visualization/widgets/panel/AddButtons.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState } from "react"; import { CleanPannel, EyeIcon, @@ -57,6 +57,8 @@ interface ButtonsProps { >; hiddenPanels: HiddenPanels; // Updated prop type setHiddenPanels: React.Dispatch>; // Updated prop type + waitingPanels: any; + setWaitingPanels: any; } const AddButtons: React.FC = ({ @@ -64,6 +66,8 @@ const AddButtons: React.FC = ({ setSelectedZone, setHiddenPanels, hiddenPanels, + waitingPanels, + setWaitingPanels, }) => { const { visualizationSocket } = useSocketStore(); @@ -174,65 +178,62 @@ const AddButtons: React.FC = ({ // Function to handle "+" button click const handlePlusButtonClick = async (side: Side) => { + const zoneId = selectedZone.zoneId; + if (selectedZone.activeSides.includes(side)) { - console.log("open"); - // Panel already exists: Remove widgets from that side and update activeSides - const email = localStorage.getItem("email") || ""; - const organization = email?.split("@")[1]?.split(".")[0]; // Fallback value + // Already active: Schedule removal - // Remove all widgets associated with the side and update active sides - const cleanedWidgets = selectedZone.widgets.filter( - (widget) => widget.panel !== side - ); - const newActiveSides = selectedZone.activeSides.filter((s) => s !== side); + setWaitingPanels(side); // Mark as waiting - const updatedZone = { - ...selectedZone, - widgets: cleanedWidgets, - activeSides: newActiveSides, - panelOrder: newActiveSides, - }; + setTimeout(() => { + console.log("Removing after wait..."); - let deletePanel = { - organization: organization, - panelName: side, - zoneId: selectedZone.zoneId, - }; - if (visualizationSocket) { - visualizationSocket.emit("v2:viz-panel:delete", deletePanel); - } - setSelectedZone(updatedZone); - - if (hiddenPanels[selectedZone.zoneId]?.includes(side)) { - setHiddenPanels((prev) => ({ - ...prev, - [selectedZone.zoneId]: prev[selectedZone.zoneId].filter( - (s) => s !== side - ), - })); - } - - // if(hiddenPanels[selectedZone.zoneId].includes(side)) - - // API call to delete the panel - // try { - // const response = await deletePanelApi(selectedZone.zoneId, side, organization); - // - // if (response.message === "Panel deleted successfully") { - // } else { - // - // } - // } catch (error) { - // - // } - } else { - // Panel does not exist: Create panel - try { - // Get email and organization safely with a default fallback const email = localStorage.getItem("email") || ""; - const organization = email?.split("@")[1]?.split(".")[0]; + const organization = email?.split("@")[1]?.split(".")[0] || ""; + + // Remove widgets for that side + const cleanedWidgets = selectedZone.widgets.filter( + (widget) => widget.panel !== side + ); + const newActiveSides = selectedZone.activeSides.filter( + (s) => s !== side + ); + + const updatedZone = { + ...selectedZone, + widgets: cleanedWidgets, + activeSides: newActiveSides, + panelOrder: newActiveSides, + }; + + const deletePanel = { + organization, + panelName: side, + zoneId, + }; + + if (visualizationSocket) { + visualizationSocket.emit("v2:viz-panel:delete", deletePanel); + } + + setSelectedZone(updatedZone); + + if (hiddenPanels[zoneId]?.includes(side)) { + setHiddenPanels((prev) => ({ + ...prev, + [zoneId]: prev[zoneId].filter((s) => s !== side), + })); + } + + // Remove from waiting state + setWaitingPanels(null); + }, 500); // Wait for 2 seconds + } else { + // Panel does not exist: Add it + try { + const email = localStorage.getItem("email") || ""; + const organization = email?.split("@")[1]?.split(".")[0] || ""; - // Prevent duplicate side entries const newActiveSides = selectedZone.activeSides.includes(side) ? [...selectedZone.activeSides] : [...selectedZone.activeSides, side]; @@ -242,32 +243,31 @@ const AddButtons: React.FC = ({ activeSides: newActiveSides, panelOrder: newActiveSides, }; - let addPanel = { - organization: organization, - zoneId: selectedZone.zoneId, + + const addPanel = { + organization, + zoneId, panelOrder: newActiveSides, }; + if (visualizationSocket) { visualizationSocket.emit("v2:viz-panel:add", addPanel); } - setSelectedZone(updatedZone); - // API call to create panels - // const response = await panelData(organization, selectedZone.zoneId, newActiveSides); - // - // if (response.message === "Panels created successfully") { - // } else { - // - // } - } catch (error) {} + setSelectedZone(updatedZone); + } catch (error) { + console.error("Error adding panel:", error); + } } }; + return ( <>
    {(["top", "right", "bottom", "left"] as Side[]).map((side) => (
    {/* "+" Button */} +
    -
    +
    -
    +
    + +
    @@ -306,53 +309,57 @@ const SimulationPlayer: React.FC = () => {
    -
    {speed.toFixed(1)}x -
    +
    -
    8x
    +
    4x
    -
    +
    00:00
    +
    24:00
    - {process.map((item, index) => ( -
    - ))} +
    + {process.map((item, index) => ( +
    +
    +
    + ))} +
    -
    diff --git a/app/src/styles/components/simulation/simulation.scss b/app/src/styles/components/simulation/simulation.scss index ec53e6f..0fc3df8 100644 --- a/app/src/styles/components/simulation/simulation.scss +++ b/app/src/styles/components/simulation/simulation.scss @@ -3,11 +3,11 @@ .simulation-player-wrapper { position: fixed; - bottom: 50px; + bottom: 12px; left: 50%; z-index: 2; transform: translate(-50%, 0); - width: 70%; + width: 70vw; .simulation-player-container { background: var(--background-color); @@ -16,24 +16,21 @@ display: flex; flex-direction: column; gap: 8px; + backdrop-filter: blur(10px); + outline: 1px solid var(--border-color); .progresser-wrapper { - outline: 1px solid var(--border-color); background: var(--background-color); - // background-color: var(--highlight-accent-color); - padding: 4px 5px; border-radius: 12px; display: flex; flex-direction: column; gap: 12px; - padding-top: 30px; + padding: 12px 5px; + padding-top: 38px; transition: height 0.2s linear; } - - - .controls-container { @include flex-center; gap: 12px; @@ -41,13 +38,12 @@ .production-details, .controls-wrapper { - display: flex; + @include flex-center; gap: 6px; } .production-details { .production-wrapper { - display: flex; align-items: center; flex-direction: column; @@ -56,33 +52,38 @@ .header { display: flex; flex-direction: row; - gap: 6px + gap: 6px; } .progress-wrapper { width: 164px; height: 8px; border-radius: 5px; - // overflow: hidden; - outline: 1px solid var(--border-color); - background: var(--background-color); + background: var(--background-color-solid); .progress { border-radius: 5px; height: 100%; - background-color: var(--accent-color); + background-color: var(--background-color-accent); } } } } + .expand-icon-container { + @include flex-center; + padding: 6px 8px; + cursor: pointer; + } + .simulation-button-container { @include flex-center; gap: 2px; - padding: 6px 8px; + padding: 4px 8px; min-width: 64px; background: var(--background-color); - border-radius: #{$border-radius-small}; + border-radius: #{$border-radius-extra-large}; + height: fit-content; cursor: pointer; &:hover { @@ -101,10 +102,8 @@ @include flex-center; gap: 32px; padding: 5px 16px; - // background: var(--background-color); border-radius: #{$border-radius-medium}; box-sizing: #{$box-shadow-medium}; - border-radius: 20px; position: relative; .min-value, @@ -118,11 +117,8 @@ width: 100%; max-width: 80vw; height: 28px; - // background: var(--background-color-gray); border-radius: #{$border-radius-small}; position: relative; - // padding: 4px 26px; - .speed-label { font-size: var(--font-size-tiny); @@ -135,13 +131,13 @@ } &:last-child { - right: 0; + right: -10px; } } &::after { content: ""; - background-color: #E5E5EA; + background-color: #e5e5ea; position: absolute; top: 50%; transform: translate(0, -50%); @@ -166,13 +162,15 @@ .slider-handle { position: absolute; top: 50%; - width: 42px; + min-width: 44px; + padding: 0 8px; line-height: 20px; text-align: center; - background: var(--accent-color); - color: var(--primary-color); - border-radius: #{$border-radius-small}; + background: var(--background-color-button); + color: var(--text-button-color); + border-radius: #{$border-radius-large}; transform: translate(-50%, -50%); + font-size: var(--font-size-small); cursor: pointer; z-index: 2; } @@ -226,23 +224,23 @@ } .time-displayer { - display: flex; - justify-content: space-between; + @include flex-space-between; + gap: 24px; height: auto; opacity: 1; - // overflow: hidden; - transition: all 0.5s ease; .start-time-wrappper, .end-time-wrappper { - display: flex; - align-items: center; - gap: 12px; + @include flex-center; + gap: 4px; + .icon { + @include flex-center; + } } .time-progresser { - width: 70%; + flex: 1; .timeline { padding: 16px; @@ -255,18 +253,15 @@ height: 33px; .label-dot-wrapper { - display: flex; - flex-direction: column; - align-items: center; - gap: 6px; + @include flex-center; position: relative; .label { position: absolute; - top: -200%; + top: -36px; transform: translate(0, -0); font-size: 12px; - color: #666; + color: var(--text-color); white-space: nowrap; } @@ -296,22 +291,32 @@ } } } - - - } - - } .processDisplayer { - border-radius: 5px; - // overflow: hidden; + border-radius: #{$border-radius-large}; outline: 1px solid var(--border-color); background: var(--background-color); - padding: 14px 6px; + padding: 20px 6px; position: relative; + .timmer { + width: auto; + position: absolute; + bottom: 0; + font-size: var(--font-size-tiny); + } + .start-displayer { + bottom: 4px; + left: 16px; + } + + .end-displayer { + bottom: 4px; + width: auto; + right: 16px; + } .process-player { position: absolute; top: 50%; @@ -321,29 +326,30 @@ left: 86.81px; border-radius: 14px; border-width: 1px; - background: var(--accent-color, #6F42C1); - + background: var(--background-color-accent, #6f42c1); } - - .process-wrapper { - display: flex; - // padding: 0px 16px; - - .process { - height: 5px; - background-color: #4caf50; - color: white; - text-align: center; - line-height: 30px; - transition: width 0.3s ease; + .process-wrapper{ + .process-container { + position: relative; + display: flex; + width: 100%; + + .process { + height: 5px; + border-radius: 4px; + color: white; + text-align: center; + line-height: 30px; + transition: width 0.3s ease; + } } } - } - .simulation-player-container.open { - + .timmer { + display: none; + } .progresser-wrapper { padding-top: 4px; } @@ -356,7 +362,7 @@ } .processDisplayer { - padding: 0; + padding: 0 8px; background: transparent; .process-player { @@ -364,5 +370,4 @@ display: none !important; } } - -} \ No newline at end of file +} diff --git a/app/src/styles/components/tools.scss b/app/src/styles/components/tools.scss index 5984dab..e476c3c 100644 --- a/app/src/styles/components/tools.scss +++ b/app/src/styles/components/tools.scss @@ -83,6 +83,8 @@ border-radius: #{$border-radius-medium}; background: var(--background-color); backdrop-filter: blur(8px); + contain: layout paint; + will-change: backdrop-filter; .option-list { display: flex; diff --git a/app/src/styles/components/visualization/floating/common.scss b/app/src/styles/components/visualization/floating/common.scss index 0bbbdc9..ee8adf2 100644 --- a/app/src/styles/components/visualization/floating/common.scss +++ b/app/src/styles/components/visualization/floating/common.scss @@ -121,10 +121,8 @@ flex-direction: column; gap: 6px; border-radius: 5.2px; - width: 100%; height: 150px; - display: flex; justify-content: center; align-items: center; @@ -254,7 +252,8 @@ gap: 5px; .header { - color: #a0aec0; + color: var(--text-color); + opacity: 0.8; } .data-values { @@ -413,7 +412,6 @@ /* FleetEfficiency.module.css */ .fleetEfficiency { - width: 100%; min-height: 240px !important; padding: 20px; background: var(--background-color); diff --git a/app/src/styles/components/visualization/floating/energyConsumed.scss b/app/src/styles/components/visualization/floating/energyConsumed.scss index 5ef39de..28f0861 100644 --- a/app/src/styles/components/visualization/floating/energyConsumed.scss +++ b/app/src/styles/components/visualization/floating/energyConsumed.scss @@ -5,8 +5,8 @@ display: flex; flex-direction: column; gap: 6px; - padding-top: 12px; padding: 6px; + padding-top: 12px; .floating { min-height: 170px; @@ -28,13 +28,6 @@ } } - - -.floatingWidgets-wrapper { - font-family: Arial, sans-serif; - color: #333; -} - .floating.working-state { width: 100%; height: 283px; @@ -51,7 +44,6 @@ justify-content: space-between; align-items: center; margin-bottom: 20px; - // flex-direction: column; } .state { diff --git a/app/src/styles/pages/realTimeViz.scss b/app/src/styles/pages/realTimeViz.scss index 7348eff..fa1b86c 100644 --- a/app/src/styles/pages/realTimeViz.scss +++ b/app/src/styles/pages/realTimeViz.scss @@ -177,8 +177,6 @@ .panel { position: absolute; - // background: var(--background-color); - // box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; border-radius: 6px; overflow: auto; @@ -415,7 +413,7 @@ } path { - stroke: var(--text-color); + stroke: var(--text-button-color); stroke-width: 2; } } @@ -920,8 +918,6 @@ // Add button -.extra-Bs {} - .extra-Bs-addopening { animation: slideDown 0.3s ease forwards; } diff --git a/app/src/styles/scene/scene.scss b/app/src/styles/scene/scene.scss index ab8f787..40743e0 100644 --- a/app/src/styles/scene/scene.scss +++ b/app/src/styles/scene/scene.scss @@ -15,7 +15,7 @@ font-size: var(--font-size-large); padding: 2px 8px; background: var(--background-color-accent); - color: var(--text-color); + color: var(--text-button-color); border-radius: #{$border-radius-medium}; box-shadow: var(--box-shadow-light); }