From 5a4b7e286707a78382748021e8b590b49b8a0aee Mon Sep 17 00:00:00 2001 From: Mariela Tihova Date: Thu, 3 Jul 2025 16:19:38 +0300 Subject: [PATCH 01/29] Edited headers as per the new design --- src/app/data/icons/file_download.svg | 9 +- src/app/data/icons/full_screen.svg | 5 + src/app/data/icons/view_more.svg | 5 + src/app/views/home/home-view.scss | 70 +++++++++---- src/app/views/home/home-view.tsx | 147 ++++++++++++++++++++------- 5 files changed, 184 insertions(+), 52 deletions(-) create mode 100644 src/app/data/icons/full_screen.svg create mode 100644 src/app/data/icons/view_more.svg diff --git a/src/app/data/icons/file_download.svg b/src/app/data/icons/file_download.svg index 2bb823e..39005de 100644 --- a/src/app/data/icons/file_download.svg +++ b/src/app/data/icons/file_download.svg @@ -1 +1,8 @@ - \ No newline at end of file + + + + diff --git a/src/app/data/icons/full_screen.svg b/src/app/data/icons/full_screen.svg new file mode 100644 index 0000000..db8e4f7 --- /dev/null +++ b/src/app/data/icons/full_screen.svg @@ -0,0 +1,5 @@ + + + diff --git a/src/app/data/icons/view_more.svg b/src/app/data/icons/view_more.svg new file mode 100644 index 0000000..65c149d --- /dev/null +++ b/src/app/data/icons/view_more.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/app/views/home/home-view.scss b/src/app/views/home/home-view.scss index c3e569e..f1b25ce 100644 --- a/src/app/views/home/home-view.scss +++ b/src/app/views/home/home-view.scss @@ -28,7 +28,7 @@ .tab-container { width: 100%; - min-height: 132px; + min-height: 104px; overflow: hidden; flex-shrink: 0; padding: 16px; @@ -52,6 +52,7 @@ } .tab-item { + align-items: center; height: 100%; display: flex; flex-grow: 1; @@ -62,7 +63,6 @@ padding: 12px; cursor: pointer; user-select: none; - border-bottom: 1px solid var(--ig-gray-300); &--selected { border-bottom: 3px solid var(--ig-primary-500); @@ -89,21 +89,6 @@ } } -.tab-content { - display: flex; - flex-direction: column; - gap: 4px; - color: var(--ig-gray-900); - font-size: 14px; - font-weight: 400; - font-family: "aktiv-grotesk", sans-serif; - line-height: 20px; - letter-spacing: 0.25px; - - &--disabled { - color: var(--ig-gray-700) !important; - } -} .tab-actions { display: flex; @@ -192,3 +177,54 @@ transition-delay: 1s; } } + +.current-tab-info { + display: flex; + justify-content: space-between; + gap: 2rem; + width: 100%; + height: 90px; + padding: 20px 24px; + border: 1px solid #D6D6D6; + + .sample-info { + height: 58px; + display: flex; + flex-direction: column; + row-gap: 8px; + } + + .tab-description { + font-weight: 300; + font-size: 12px; + line-height: 100%; + letter-spacing: 0%; + } + + .sample-actions { + display: flex; + gap: 8px; + align-items: center; + flex-wrap: wrap; + line-height: 100%; + font-size: 14px; + + .theme-info { + font-weight: 600; + letter-spacing: 0.15px; + height: 40px; + padding-right: 8px; + border-right: 1px solid #D6D6D6; + } + + .custom-button::part(base) { + color: black; + border-color: #D6D6D6; + text-transform: unset; + + igc-icon::part(icon) { + color: black; + } + } + } +} \ No newline at end of file diff --git a/src/app/views/home/home-view.tsx b/src/app/views/home/home-view.tsx index 3cf3045..2b05f82 100644 --- a/src/app/views/home/home-view.tsx +++ b/src/app/views/home/home-view.tsx @@ -1,15 +1,18 @@ import { useEffect, useState } from 'react'; import { NavLink, useLocation } from 'react-router-dom'; -import { IgrChip, IgrIcon, IgrIconButton, IgrRipple, registerIcon } from 'igniteui-react'; +import { IgrButton, IgrIcon, registerIcon } from 'igniteui-react'; import 'igniteui-react-grids/grids/themes/light/material.css'; import './home-view.scss'; import FILE_DOWNLOAD from '../../data/icons/file_download.svg'; +import VIEW_MORE from '../../data/icons/view_more.svg'; +import FULL_SCREEN from '../../data/icons/full_screen.svg'; export interface TabInfo { title: string; - theme: string; content: string; + theme: string; + themeMode: string; moreLink: string; downloadLink: string; } @@ -19,40 +22,72 @@ interface TabItemProps { tabInfo?: TabInfo, } -export function TabItem({isActive, tabInfo}: TabItemProps) { - - function onLinkClick(event: any) { - window.open(tabInfo?.moreLink, "_blank")?.focus(); - event.preventDefault(); - event.stopPropagation(); - } +interface TabItemInfoProps { + tabName: string; + tabInfo: Map; + onDownloadClick: (event: React.MouseEvent, tabName: string) => void; + onViewMoreClick: (event: React.MouseEvent, tabName: string) => void; + onFullscreenClick: () => void; +} - function onDownloadClick(event: any) { - const downloadLink = tabInfo?.downloadLink; - window.open(downloadLink, "_blank")?.focus(); - event.preventDefault(); - event.stopPropagation(); - } +export function TabItem({isActive, tabInfo}: TabItemProps) { return (
- {tabInfo?.title} - {tabInfo?.theme} -
-
- {tabInfo?.content} + {tabInfo?.title.toUpperCase()}
-
- Learn more -
- - - - - Download sample. -
+
+
+ ); +}; + +export function TabItemInfo({ + tabName, + tabInfo, + onDownloadClick, + onViewMoreClick, + onFullscreenClick, +}: TabItemInfoProps) { + const info = tabInfo.get(tabName); + + return ( +
+
+
{info?.title}
+
{info?.content}
+
+ +
+
Theme: {info?.theme}
+
Mode: {info?.themeMode}
+ +
+ onDownloadClick(e, tabName)} + > + + Download + + + onViewMoreClick(e, tabName)} + > + + View More + + + + + Fullscreen +
@@ -65,7 +100,8 @@ export default function HomeView() { "inventory", { title: "ERP/ Inventory", - theme: "Material Light", + theme: "Material", + themeMode: 'Light', content: "Tracking and managing quantity, location and details of products in stock.", moreLink: "https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/hierarchical-grid", downloadLink: "https://www.infragistics.com/resources/sample-applications/erp-inventory-sample-app-react", @@ -75,7 +111,8 @@ export default function HomeView() { "hr-portal", { title: "Org Chart/HR Portal", - theme: "Fluent Light", + theme: "Fluent", + themeMode: 'Light', content: "Displaying company's hierarchical structure and showing employees data.", moreLink: "https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/tree-grid", downloadLink: "https://www.infragistics.com/resources/sample-applications/org-charthr-portal-sample-app-react", @@ -85,7 +122,8 @@ export default function HomeView() { "finance", { title: "Financial Portfolio", - theme: "Bootstrap Light", + theme: "Bootstrap", + themeMode: 'Light', content: "Asset tracking, profit and loss analysis, featuring interactive dynamic charts.", moreLink: "https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid", downloadLink: "https://www.infragistics.com/resources/sample-applications/financial-portfolio-sample-app-react", @@ -95,7 +133,8 @@ export default function HomeView() { "sales", { title: "Sales Dashboard", - theme: "Indigo Light", + theme: "Indigo", + themeMode: 'Light', content: "For trend analysis, KPIs and viewing sales summaries by region, product, etc.", moreLink: "https://www.infragistics.com/products/ignite-ui-angular/angular/components/pivotGrid/pivot-grid", downloadLink: "https://www.infragistics.com/resources/sample-applications/sales-grid-sample-app-react", @@ -105,7 +144,8 @@ export default function HomeView() { "fleet", { title: "Fleet Management", - theme: "Material Dark", + theme: "Material", + themeMode: 'Dark', content: "A master-detail grid for managing vehicle acquisition, operations, and maintenance.", moreLink: "https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/master-detail", downloadLink: "https://www.infragistics.com/resources/sample-applications/fleet-management-sample-app-react", @@ -117,12 +157,43 @@ export default function HomeView() { useEffect(() => { registerIcon("file_download", FILE_DOWNLOAD, "custom"); + registerIcon("view_more", VIEW_MORE, "custom"); + registerIcon("full_screen", FULL_SCREEN, "custom"); }, []); useEffect(() => { setGridView(location.pathname.replace("/home/", "")); }, [location]); + + const onDownloadClick = (event: React.MouseEvent, tabName: string) => { + event.preventDefault(); + event.stopPropagation(); + + const downloadLink = tabInfo.get(tabName)?.downloadLink; + if (downloadLink) { + window.open(downloadLink, '_blank')?.focus(); + } + }; + + const onViewMoreClick = (event: React.MouseEvent, tabName: string) => { + event.preventDefault(); + event.stopPropagation(); + + const moreLink = tabInfo.get(tabName)?.moreLink; + if (moreLink) { + window.open(moreLink, '_blank')?.focus(); + } + }; + + const onFullscreenClick = () => { + const origin = window.location.origin; + const pathname = window.location.pathname; + const trimmedPath = pathname.replace('/home', ''); + const url = origin + trimmedPath; + window.open(url, '_blank'); + }; + return (
@@ -134,6 +205,14 @@ export default function HomeView() { )}
+ + +