Skip to content

Commit 6347d4e

Browse files
author
Mariela Tihova
authored
New Headers Implementation (#116)
1 parent 4bd624c commit 6347d4e

File tree

5 files changed

+303
-52
lines changed

5 files changed

+303
-52
lines changed

‎src/app/data/icons.ts‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
export const fileDownloadIcon = `
2+
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 24 24">
3+
<path
4+
fill="black"
5+
d="M10.41 11.21V3.616c0-.43.167-.84.466-1.144A1.578 1.578 0 0 1 12 2c.422 0 .826.17 1.125.473.298.304.466.715.466 1.144v7.586l2.195-2.282a1.49 1.49 0 0 1 1.05-.455 1.47 1.47 0 0 1 1.06.434l.022.021c.284.294.443.689.443 1.1 0 .412-.16.807-.443 1.1l-4.81 4.972a1.496 1.496 0 0 1-1.069.454h-.084a1.47 1.47 0 0 1-1.066-.454L6.076 11.12a1.586 1.586 0 0 1-.44-1.098c0-.41.158-.805.44-1.098a1.49 1.49 0 0 1 1.05-.457 1.47 1.47 0 0 1 1.06.432l.025.025 2.199 2.284Z" />
6+
<path
7+
fill="black"
8+
d="M20.41 14.729a1.59 1.59 0 0 0-1.592 1.591v1.613a.886.886 0 0 1-.884.884H6.07a.892.892 0 0 1-.89-.884V16.32a1.591 1.591 0 0 0-3.181 0v1.618A4.087 4.087 0 0 0 6.066 22h11.868A4.07 4.07 0 0 0 22 17.931V16.32a1.59 1.59 0 0 0-1.59-1.591Z" />
9+
</svg>`;
10+
11+
export const viewMoreIcon = `
12+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
13+
<path d="M7 17L17 7" />
14+
<path d="M17 7H7" />
15+
<path d="M17 7V17" />
16+
</svg>
17+
`;
18+
19+
export const fullScreenIcon = `
20+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
21+
stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
22+
xmlns="http://www.w3.org/2000/svg">
23+
<path d="M4 4h6M4 4v6M20 20h-6M20 20v-6M20 4h-6M20 4v6M4 20h6M4 20v-6"/>
24+
</svg>
25+
`;
26+
27+
export const exitFullScreenIcon = `
28+
<svg width="24" height="24" viewBox="0 0 20 20" fill="none"
29+
stroke="black" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter"
30+
xmlns="http://www.w3.org/2000/svg">
31+
<!-- Top-left corner -->
32+
<line x1="5.5" y1="2" x2="5.5" y2="6.5" />
33+
<line x1="5.5" y1="6.5" x2="1" y2="6.5" />
34+
<!-- Top-right corner -->
35+
<line x1="14.5" y1="2" x2="14.5" y2="6.5" />
36+
<line x1="14.5" y1="6.5" x2="19" y2="6.5" />
37+
<!-- Bottom-left corner -->
38+
<line x1="5.5" y1="17" x2="5.5" y2="12.5" />
39+
<line x1="5.5" y1="12.5" x2="1" y2="12.5" />
40+
<!-- Bottom-right corner -->
41+
<line x1="14.5" y1="17" x2="14.5" y2="12.5" />
42+
<line x1="14.5" y1="12.5" x2="19" y2="12.5" />
43+
</svg>
44+
`;

‎src/app/views/home/home.component.html‎

Lines changed: 73 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,85 @@
1-
<div class="demo-container">
2-
<div class="tab-container ">
3-
<div class="tab-item-container" routerLink="inventory" routerLinkActive #tab1="routerLinkActive" >
4-
<ng-container [ngTemplateOutlet]="tabItemTemplate" [ngTemplateOutletContext]="{ enabled: tab1.isActive, tabName: 'inventory' }"></ng-container>
5-
</div>
6-
<div class="tab-item-container" routerLink="hr-portal" routerLinkActive #tab2="routerLinkActive" >
7-
<ng-container [ngTemplateOutlet]="tabItemTemplate" [ngTemplateOutletContext]="{ enabled: tab2.isActive, tabName: 'hr-portal' }"></ng-container>
8-
</div>
9-
<div class="tab-item-container" routerLink="finance" routerLinkActive #tab3="routerLinkActive" >
10-
<ng-container [ngTemplateOutlet]="tabItemTemplate" [ngTemplateOutletContext]="{ enabled: tab3.isActive, tabName: 'finance' }"></ng-container>
11-
</div>
12-
<div class="tab-item-container" routerLink="sales" routerLinkActive #tab4="routerLinkActive" >
13-
<ng-container [ngTemplateOutlet]="tabItemTemplate" [ngTemplateOutletContext]="{ enabled: tab4.isActive, tabName: 'sales' }"></ng-container>
14-
</div>
15-
<div class="tab-item-container" routerLink="fleet" routerLinkActive #tab5="routerLinkActive" >
16-
<ng-container [ngTemplateOutlet]="tabItemTemplate" [ngTemplateOutletContext]="{ enabled: tab5.isActive, tabName: 'fleet' }"></ng-container>
1+
<div class="demo-container" #fullscreenElement>
2+
<div class="tabs-info-wrapper-element">
3+
<div class="tab-container" [class.hidden]="isFullscreen">
4+
<div
5+
class="tab-item-container"
6+
*ngFor="let tab of tabs"
7+
[routerLink]="tab.key"
8+
routerLinkActive
9+
#rla="routerLinkActive"
10+
>
11+
<ng-container
12+
[ngTemplateOutlet]="tabItemTemplate"
13+
[ngTemplateOutletContext]="{
14+
enabled: rla.isActive,
15+
tabName: tab.key
16+
}"
17+
></ng-container>
18+
</div>
1719
</div>
20+
21+
22+
<ng-container *ngFor="let tab of tabs">
23+
<ng-container
24+
*ngIf="router.url.includes(tab.key)"
25+
[ngTemplateOutlet]="tabItemInfoTemplate"
26+
[ngTemplateOutletContext]="{ tabName: tab.key }"
27+
></ng-container>
28+
</ng-container>
29+
1830
</div>
31+
1932
<div class="router-container">
2033
<router-outlet></router-outlet>
2134
</div>
2235
</div>
2336

24-
<ng-template #tabItemTemplate let-enabled="enabled" let-tabName="tabName">
25-
<div #tabItem class="tab-item" [ngClass]="{'tab-item--selected': enabled}">
26-
<div class="tab-header" [ngClass]="{'tab-header--disabled': !enabled}">
27-
{{ tabInfo.get(tabName)?.title }}
28-
<igx-chip [disabled]="!enabled">{{ tabInfo.get(tabName)?.theme }}</igx-chip>
37+
<ng-template #tabItemInfoTemplate let-tabName="tabName">
38+
<div #tabItemInfo class="current-tab-info">
39+
<div class="sample-info">
40+
<div class="tab-header">{{ tabInfo.get(tabName)?.title }}</div>
41+
<div class="tab-description">{{ tabInfo.get(tabName)?.content }}</div>
2942
</div>
30-
<div class="tab-content" [ngClass]="{'tab-content--disabled': !enabled}">
31-
<span>{{ tabInfo.get(tabName)?.content }}</span>
32-
</div>
33-
<div class="tab-actions">
34-
<a class="learn-text" href="{{ tabInfo.get(tabName)?.moreLink }}" (click)="onLinkClick($event)" [ngClass]="{'link--disabled': !enabled}">Learn more</a>
35-
<button igxRipple [igxIconButton]="'contained'" [ngClass]="{'button--disabled': !enabled}" (click)="onDownloadClick($event, tabName)" [igxTooltipTarget]="tooltipRef"><igx-icon name="file_download" family="internal_indigo"></igx-icon></button>
43+
44+
<div class="sample-actions">
45+
<div class="theme-info">Theme: {{ tabInfo.get(tabName)?.theme }}</div>
46+
<div class="theme-info">Mode: {{ tabInfo.get(tabName)?.themeMode }}</div>
47+
<div class="action-buttons">
48+
<button
49+
igxButton="outlined"
50+
class="custom-button"
51+
(click)="onDownloadClick($event, tabName)"
52+
>
53+
<igx-icon family="custom" name="file_download"></igx-icon>
54+
Download
55+
</button>
56+
57+
<button
58+
igxButton="outlined"
59+
class="custom-button"
60+
(click)="onViewMoreClick($event, tabName)"
61+
>
62+
<igx-icon family="custom" name="view_more"></igx-icon>
63+
View More
64+
</button>
65+
66+
<button
67+
igxButton="outlined"
68+
class="custom-button"
69+
(click)="onToggleFullscreen()"
70+
>
71+
<igx-icon family="custom" [name]="isFullscreen ? 'exit_fullscreen' : 'fullscreen'"></igx-icon>
72+
<span>{{ isFullscreen ? 'Exit Fullscreen' : 'Fullscreen' }}</span>
73+
</button>
74+
</div>
3675
</div>
3776
</div>
3877
</ng-template>
3978

40-
<div #tooltipRef="tooltip" igxTooltip>
41-
Download sample.
42-
</div>
79+
<ng-template #tabItemTemplate let-enabled="enabled" let-tabName="tabName">
80+
<div #tabItem class="tab-item" [ngClass]="{ 'tab-item--selected': enabled }">
81+
<div class="tab-header" [ngClass]="{ 'tab-header--disabled': !enabled }">
82+
{{ tabInfo.get(tabName)?.title?.toUpperCase() }}
83+
</div>
84+
</div>
85+
</ng-template>

‎src/app/views/home/home.component.scss‎

Lines changed: 87 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ $custom-icon-button-theme: icon-button-theme(
2626
}
2727

2828
.router-container {
29+
height: 100%;
2930
width: 100%;
3031
overflow: hidden;
3132
display: flex;
@@ -35,7 +36,6 @@ $custom-icon-button-theme: icon-button-theme(
3536

3637
.tab-container {
3738
width: 100%;
38-
min-height: 132px;
3939
flex-shrink: 0;
4040
padding: 16px;
4141
display: flex;
@@ -45,11 +45,13 @@ $custom-icon-button-theme: icon-button-theme(
4545
}
4646

4747
.tab-item-container {
48+
width: 100%;
4849
height: 100%;
4950
display: inline-flex;
5051
}
5152

5253
.tab-item {
54+
align-items: center;
5355
height: 100%;
5456
display: flex;
5557
flex-grow: 1;
@@ -60,7 +62,6 @@ $custom-icon-button-theme: icon-button-theme(
6062
padding: 12px;
6163
cursor: pointer;
6264
user-select: none;
63-
border-bottom: 1px solid var(--ig-gray-300);
6465

6566
&--selected {
6667
border-bottom: 3px solid var(--ig-primary-500);
@@ -161,3 +162,87 @@ $custom-icon-button-theme: icon-button-theme(
161162
font-family: "aktiv-grotesk", sans-serif;
162163
line-height: 20px;
163164
}
165+
166+
.current-tab-info {
167+
display: flex;
168+
justify-content: space-between;
169+
gap: 2rem;
170+
171+
width: 100%;
172+
height: 90px;
173+
padding: 20px 24px;
174+
border: 1px solid #D6D6D6;
175+
176+
177+
.sample-info {
178+
height: 58px;
179+
display: flex;
180+
flex-direction: column;
181+
row-gap: 8px;
182+
}
183+
184+
.tab-description {
185+
font-weight: 300;
186+
font-size: 12px;
187+
line-height: 100%;
188+
letter-spacing: 0%;
189+
}
190+
191+
.sample-actions {
192+
display: flex;
193+
gap: 16px;
194+
align-items: center;
195+
line-height: 100%;
196+
font-size: 14px;
197+
198+
.theme-info {
199+
font-weight: 600;
200+
letter-spacing: 0.15px;
201+
height: 40px;
202+
padding-right: 16px;
203+
border-right: 1px solid #D6D6D6;
204+
}
205+
206+
.action-buttons {
207+
display: flex;
208+
justify-content: space-between;
209+
gap: 16px;
210+
211+
.custom-button {
212+
color: black !important;
213+
border-color: #D6D6D6;
214+
text-transform: unset;
215+
216+
igx-icon {
217+
color: black;
218+
}
219+
}
220+
}
221+
222+
223+
}
224+
225+
.sample-actions > div {
226+
display: flex;
227+
gap: 0.5rem;
228+
align-items: center;
229+
}
230+
}
231+
232+
:fullscreen {
233+
width: 100vw;
234+
height: 100vh;
235+
overflow: auto;
236+
display: block;
237+
}
238+
239+
:-webkit-full-screen {
240+
width: 100vw;
241+
height: 100vh;
242+
overflow: auto;
243+
background: white;
244+
}
245+
246+
.hidden {
247+
display: none !important;
248+
}

0 commit comments

Comments
 (0)