Skip to content

Commit 755b2df

Browse files
committed
fix(arc-lib): change in design
change in design GH-58
1 parent 5e2bdda commit 755b2df

File tree

9 files changed

+58
-25
lines changed

9 files changed

+58
-25
lines changed

projects/arc-lib/src/lib/components/gantt/components/gantt-bars/gantt-bars.component.html

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@
1616
class="bar actual-bar"
1717
[class.with-suballocations]="hasSubAllocation(item)"
1818
[class.closed-won]="item.payload?.['dealStage'] === 'closedwon'"
19+
[attr.gantt-tooltip-data]="'abc'"
20+
gantt-hover="tooltip"
1921
[ngClass]="item.classes ?? []"
2022
data-gantt-click="bar"
2123
>
@@ -32,7 +34,9 @@
3234
{{ formatter(item.payload?.['billingRate']) }}
3335
</div>
3436
<div *ngIf="hasSubAllocation(item)" class="bar-container">
35-
<ng-container *ngFor="let allocationBar of item.subAllocations">
37+
<ng-container
38+
*ngFor="let allocationBar of item.subAllocations; let i = index"
39+
>
3640
<div
3741
class="suballocation-bars"
3842
[attr.gantt-bar-data]="stringify(allocationBar)"
@@ -41,7 +45,15 @@
4145
[ngStyle]="{width: allocationBar.percent + '%'}"
4246
[class.empty]="!allocationBar.allocation"
4347
[class.over-allocated]="allocationBar.allocation > allocationBase"
48+
(mouseover)="showTooltip = i"
49+
(mouseout)="showTooltip = -1"
4450
>
51+
<div class="showTooltip-wrapper">
52+
<arc-gantt-tooltip
53+
*ngIf="i == showTooltip"
54+
[itemData]="allocationBar"
55+
></arc-gantt-tooltip>
56+
</div>
4557
<div class="actual-hours">
4658
{{
4759
formatAllocation(

projects/arc-lib/src/lib/components/gantt/components/gantt-bars/gantt-bars.component.scss

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,22 @@
1212
margin-right: 0.75rem;
1313
}
1414

15+
.bar {
16+
position: relative;
17+
.showTooltip-wrapper {
18+
position: absolute;
19+
top: 2rem;
20+
}
21+
}
22+
1523
.bar-container {
1624
display: flex;
1725
flex-grow: 1;
1826
background: white;
1927
}
20-
28+
.showTooltip-wrapper {
29+
position: absolute;
30+
}
2131
.bar {
2232
font-family: var(--font-family-primary);
2333
font-weight: map.get($font-weight, bold);

projects/arc-lib/src/lib/components/gantt/components/gantt-bars/gantt-bars.component.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export class GanttBarsComponent {
1010
@Input() item: Item;
1111
@Input() allocationTypes: any;
1212
@Input() allocationBase: number;
13+
showTooltip = -1;
1314

1415
formatAllocation(value: number): string {
1516
return `${value} hours`;
Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
11
<div class="header-wrapper">
2-
<h2 class="project-title">{{ name }}</h2>
2+
<div class="title-wrapper">
3+
<h2 class="project-title">{{ name }}</h2>
4+
<div class="desc-wrapper" *ngIf="desc">
5+
<p>Description is enabled.</p>
6+
</div>
7+
</div>
8+
39
<nb-card>
410
<nb-card-body>
511
<div class="search-wrapper" *ngIf="showSearch">
612
<input
713
nbInput
8-
fullWidth
914
fieldSize="medium"
1015
type="text"
1116
status="basic"
@@ -14,8 +19,4 @@ <h2 class="project-title">{{ name }}</h2>
1419
</div>
1520
</nb-card-body>
1621
</nb-card>
17-
18-
<div *ngIf="desc">
19-
<p>Description is enabled.</p>
20-
</div>
2122
</div>

projects/arc-lib/src/lib/components/gantt/components/gantt-header/gantt-header.component.scss

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -51,15 +51,23 @@
5151
nb-form-field nb-icon {
5252
color: map.get($color, icon);
5353
}
54-
55-
5654
}
55+
5756
.header-wrapper {
5857
display: flex;
59-
align-items: center;
60-
gap: 20px;
58+
justify-content: space-between;
59+
width: calc(100vw - 1rem);
6160
}
6261

63-
.project-title{
62+
.project-title {
6463
font-size: x-large;
65-
}
64+
margin-bottom: -2px;
65+
}
66+
67+
.desc-wrapper {
68+
margin-top: -8px;
69+
}
70+
71+
.search-wrapper {
72+
margin-top: 32px;
73+
}

projects/arc/src/app/app.module.ts

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,6 @@ import {GanttDemoComponent} from './components/gantt-demo/gantt-demo.component';
3838
ThemeModule.forRoot('default'),
3939
OverlayModule,
4040
SelectModule,
41-
4241
GanttModule,
4342
BrowserAnimationsModule,
4443
HeaderComponent,
@@ -52,7 +51,6 @@ import {GanttDemoComponent} from './components/gantt-demo/gantt-demo.component';
5251
SystemStoreFacadeService,
5352
EnvAdapterService,
5453
ApiService,
55-
GanttService,
5654
{
5755
provide: APP_CONFIG,
5856
useValue: environment,

projects/arc/src/app/components/gantt-demo/gantt-demo.component.html

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,17 +22,18 @@
2222
</div>
2323
</nb-sidebar>
2424
<nb-layout-column>
25-
<nb-card>
26-
<nb-card-header> </nb-card-header>
25+
<nb-card class="bar-wrapper">
2726
<nb-card-body>
2827
<arc-gantt-bars
2928
[item]="item"
3029
[allocationTypes]="allocationTypes"
3130
[allocationBase]="allocationBase"
31+
showTooltip="true"
3232
></arc-gantt-bars>
3333
</nb-card-body>
3434
</nb-card>
3535
</nb-layout-column>
36-
37-
<arc-gantt-tooltip [item]="selectedItem"></arc-gantt-tooltip>
3836
</nb-layout>
37+
38+
<arc-gantt-tooltip [itemData]="itemData" [allocationMap]="allocationMap">
39+
</arc-gantt-tooltip>
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.bar-wrapper {
2+
height: calc(100% - 1rem);
3+
}

projects/arc/src/app/components/gantt-demo/gantt-demo.component.spec.ts

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
1-
import { ComponentFixture, TestBed } from '@angular/core/testing';
1+
import {ComponentFixture, TestBed} from '@angular/core/testing';
22

3-
import { GanttDemoComponent } from './gantt-demo.component';
3+
import {GanttDemoComponent} from './gantt-demo.component';
44

55
describe('GanttDemoComponent', () => {
66
let component: GanttDemoComponent;
77
let fixture: ComponentFixture<GanttDemoComponent>;
88

99
beforeEach(async () => {
1010
await TestBed.configureTestingModule({
11-
declarations: [ GanttDemoComponent ]
12-
})
13-
.compileComponents();
11+
declarations: [GanttDemoComponent],
12+
}).compileComponents();
1413

1514
fixture = TestBed.createComponent(GanttDemoComponent);
1615
component = fixture.componentInstance;

0 commit comments

Comments
 (0)