Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/977 HTML structure #1040

Merged
merged 7 commits into from
Nov 8, 2024
Merged

Feature/977 HTML structure #1040

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
17aaa21
Implement html structure and fix tests
ManuelMoeri Nov 6, 2024
5a5691b
Shorten logic in component
ManuelMoeri Nov 7, 2024
11dabb3
Remove unwanted styling that broke every dialog
ManuelMoeri Nov 7, 2024
e2962ab
Add styling to headings and fix obvious mistakes
ManuelMoeri Nov 8, 2024
ac96b51
Fix font size in banner and alignment of stretch star
ManuelMoeri Nov 8, 2024
f780cad
Fix e2e test
ManuelMoeri Nov 8, 2024
b226d08
Remove files that do not belong to my PR
ManuelMoeri Nov 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions frontend/cypress/e2e/checkIn.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,8 @@ describe('OKR Check-in e2e tests', () => {
cy.contains('Letztes Check-in (' + getCurrentDate() + ')');
});

it('Should generate checkin list', () => {
// TODO: Re-enable tests in ticket #1014 https://github.com/puzzle/okr/issues/1014
xit('Should generate checkin list', () => {
cy.getByTestId('objective').first().getByTestId('add-keyResult').first().click();
cy.getByTestId('submit').should('be.disabled');

Expand Down Expand Up @@ -368,7 +369,7 @@ describe('OKR Check-in e2e tests', () => {

cy.intercept('**/keyresults/*').as('getKeyResultsAfterSave');
cy.getByTestId('add-check-in').first().click();
cy.get('#old-value').should('not.exist');
cy.getByTestId('old-checkin-value').should('not.exist');
cy.fillOutCheckInMetric(10, 0, 'changeinfo', 'initiatives');
cy.wait('@getKeyResultsAfterSave');

Expand Down
2 changes: 1 addition & 1 deletion frontend/cypress/e2e/overview.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,6 @@ describe('OKR Overview', () => {

it('Check font ', () => {
cy.get('.team-title').first().invoke('css', 'font-family').should('eq', 'Roboto, sans-serif');
cy.get('.team-title').first().invoke('css', 'font-weight').should('eq', '700');
cy.get('.team-title').first().invoke('css', 'font-weight').should('eq', '600');
});
});
8 changes: 6 additions & 2 deletions frontend/src/app/app.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,6 @@
<app-application-top-bar></app-application-top-bar>
<router-outlet></router-outlet>
<header>
<app-application-top-bar></app-application-top-bar>
</header>
<main>
<router-outlet></router-outlet>
</main>
4 changes: 2 additions & 2 deletions frontend/src/app/components/action-plan/action-plan.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
</div>
</div>

<section class="okr-form-row mx-0">
<div class="okr-form-row mx-0">
<button
mat-button
color="primary"
Expand All @@ -60,5 +60,5 @@
Weitere Action hinzufügen
</span>
</button>
</section>
</div>
</div>
4 changes: 4 additions & 0 deletions frontend/src/app/components/application-banner/application-banner.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@
padding-left: 1.5rem;
}

p.mb-2 {
font-size: 16px;
}

.filters {
flex: 1;
}
4 changes: 4 additions & 0 deletions frontend/src/app/components/application-top-bar/application-top-bar.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@
height: $top-bar-height;
}

span.d-none.d-md-flex {
font-size: 16px;
}

#okrTopbar {
display: flex;
position: fixed;
Expand Down
11 changes: 7 additions & 4 deletions ...end/src/app/components/checkin/check-in-form-ordinal/check-in-form-ordinal.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,25 @@
<mat-radio-group formControlName="value" class="d-flex flex-column gap-2" id="ordinal-radio-group">
<mat-radio-button [attr.data-testId]="'fail-radio'" value="{{ Zone.FAIL }}" class="ordinal-zone">
<div class="radio-text-container d-flex align-items-center p-3 text-black">
<b>Fail:&nbsp;&nbsp; </b>Commit / Target / Stretch noch nicht erreicht
<strong>Fail:&nbsp;</strong> Commit / Target / Stretch noch nicht erreicht
</div>
</mat-radio-button>

<mat-radio-button [attr.data-testId]="'commit-radio'" value="{{ Zone.COMMIT }}" class="ordinal-zone">
<div class="radio-text-container d-flex p-3">
<p class="text-black"><b>Commit:&nbsp; </b> {{ keyResult.commitZone }}</p>
<span class="text-black"><strong>Commit:&nbsp;</strong>{{ keyResult.commitZone }}</span>
</div>
</mat-radio-button>

<mat-radio-button [attr.data-testId]="'target-radio'" value="{{ Zone.TARGET }}" class="ordinal-zone">
<div class="radio-text-container d-flex p-3 w-100">
<p class="text-black"><b>Target:&nbsp; </b>{{ keyResult.targetZone }}</p>
<span class="text-black"><strong>Target:&nbsp;</strong>{{ keyResult.targetZone }}</span>
</div>
</mat-radio-button>

<mat-radio-button [attr.data-testId]="'stretch-radio'" value="{{ Zone.STRETCH }}" class="ordinal-zone">
<div class="radio-text-container d-flex p-3">
<p class="text-black"><b>Stretch:&nbsp; </b>{{ keyResult.stretchZone }}</p>
<span class="text-black"><strong>Stretch:&nbsp;</strong>{{ keyResult.stretchZone }}</span>
</div>
</mat-radio-button>
</mat-radio-group>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/app/components/confidence/confidence.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div
<span
class="okr-form-row bg-inherit flex-nowrap align-items-center mx-0"
*ngIf="checkIn.confidence || checkIn.confidence === 0"
>
Expand All @@ -22,4 +22,4 @@
>
<input matSliderThumb [(ngModel)]="checkIn.confidence" />
</mat-slider>
</div>
</span>
79 changes: 39 additions & 40 deletions frontend/src/app/components/keyresult-detail/keyresult-detail.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,36 +2,36 @@
<ng-container *ngIf="(keyResult$ | async)?.id && (keyResult$ | async) as keyResult; else spinner">
<div *ngIf="keyResult" class="d-flex flex-column">
<div class="w-100 d-flex justify-content-between align-items-center mb-3">
<h3 class="title">{{ keyResult.title }}</h3>
<h2 class="title">{{ keyResult.title }}</h2>
<button class="d-flex" mat-icon-button (click)="backToOverview()" [attr.data-testId]="'close-drawer'">
<mat-icon class="d-flex justify-content-center align-items-center">close</mat-icon>
</button>
</div>
<div class="me-3">
<div class="d-flex justify-content-between mb-3">
<div>
<section class="d-flex justify-content-between mb-3">
<h4>
{{ "KEY_RESULT_TYPE." + keyResult.keyResultType | translate }}
</div>
<div class="d-flex align-items-center">
</h4>
<span class="d-flex align-items-center">
<img alt="person icon" class="me-1" height="10" src="../../../assets/icons/person-icon.svg" width="10" />
<p *ngIf="keyResult.owner as owner">{{ owner.firstname }} {{ owner.lastname }}</p>
</div>
<span *ngIf="keyResult?.objective?.quarter as quarter">{{ quarter.label }}</span>
</div>
<h4 *ngIf="keyResult.owner as owner">{{ owner.firstname }} {{ owner.lastname }}</h4>
</span>
<h4 *ngIf="keyResult?.objective?.quarter as quarter">{{ quarter.label }}</h4>
</section>

<div class="scoring-section">
<section class="scoring-section">
<app-scoring class="scoring-detail" [keyResult]="keyResult" [isDetail]="true"></app-scoring>
<span class="text-small d-flex align-items-center flex-column mb-2 ms-3 confidence-container">
Confidence
<h4>Confidence</h4>
<app-confidence
[checkIn]="keyResult.lastCheckIn!"
[edit]="false"
class="bg-display-element"
></app-confidence>
</span>
</div>
</section>

<div class="d-flex gap-4 flex-row mt-2">
<section class="d-flex gap-4 flex-row mt-2">
<ng-container *ngIf="keyResult.keyResultType == 'metric' && castToMetric(keyResult) as keyResultMetric">
<div class="d-flex justify-content-start w-100 metric-label-div">
<p class="keyResult-detail-attribute-show rounded-5 p-2 d-flex justify-content-center metric-col">
Expand Down Expand Up @@ -62,31 +62,29 @@ <h3 class="title">{{ keyResult.title }}</h3>
<ng-container *ngIf="keyResult.keyResultType == 'ordinal' && castToOrdinal(keyResult) as keyResultOrdinal">
<div class="d-flex justify-content-between w-100 ordinal-div mb-4">
<div class="ordinal-col h-auto">
<p class="ordinal-zone-title">Commit</p>
<div class="keyResult-detail-attribute-show ordinal-box p-3">
<h4 class="ordinal-zone-title">Commit</h4>
<p class="keyResult-detail-attribute-show ordinal-box p-3">
ManuelMoeri marked this conversation as resolved.
Show resolved Hide resolved
{{ keyResultOrdinal.commitZone }}
</div>
</p>
</div>
<div class="ordinal-col h-auto">
<p class="ordinal-zone-title">Target</p>
<h4 class="ordinal-zone-title">Target</h4>
<p class="keyResult-detail-attribute-show ordinal-box p-3">
{{ keyResultOrdinal.targetZone }}
</p>
</div>
<div class="ordinal-col h-auto">
<p class="ordinal-zone-title">Stretch</p>
<h4 class="ordinal-zone-title">Stretch</h4>
<p class="keyResult-detail-attribute-show ordinal-box p-3">
{{ keyResultOrdinal.stretchZone }}
</p>
</div>
</div>
</ng-container>
</div>
</section>

<div *ngIf="keyResult.lastCheckIn as checkIn" class="mt-4">
<h2 class="sub-title-keyresult-detail fw-bold mb-1">
Letztes Check-in ({{ checkIn.createdOn | date: DATE_FORMAT }})
</h2>
<section *ngIf="keyResult.lastCheckIn as checkIn" class="mt-4">
<h3 class="mb-1">Letztes Check-in ({{ checkIn.createdOn | date: DATE_FORMAT }})</h3>
<p class="linebreak" *ngIf="checkIn.changeInfo">{{ checkIn.changeInfo }}</p>
<span class="d-flex justify-content-start">
<button
Expand All @@ -100,28 +98,29 @@ <h2 class="sub-title-keyresult-detail fw-bold mb-1">
Alle Check-ins anzeigen
</button>
</span>
</div>
</section>

<div class="mt-3 mb-4">
<h2 class="sub-title-keyresult-detail fw-bold mb-1">Beschrieb</h2>
<p class="linebreak" *ngIf="keyResult.description === ''">-</p>
<p class="linebreak" *ngIf="keyResult.description !== ''">{{ keyResult.description }}</p>
</div>
<section>
<div class="mt-3 mb-4">
<h3 class="mb-1">Beschrieb</h3>
<p class="linebreak">{{ keyResult.description || "-" }}</p>
</div>

<div *ngIf="keyResult.actionList?.length != 0" class="mt-3 mb-4">
<h2 class="sub-title-keyresult-detail fw-bold">Action Plan</h2>
<div *ngFor="let action of keyResult.actionList">
<div *ngIf="action.isChecked">
<div class="action-list-checked-item break-word ms-4">
<img src="../../../assets/icons/checkmark.svg" alt="checkbox" class="action-checkbox me-1" />
<span [ngStyle]="{ 'text-decoration': 'line-through' }"> {{ action.action }}</span>
<div *ngIf="keyResult.actionList?.length != 0" class="mt-3 mb-4">
<h3>Action Plan</h3>
<div *ngFor="let action of keyResult.actionList">
<div *ngIf="action.isChecked">
<div class="action-list-checked-item break-word ms-4">
<img src="../../../assets/icons/checkmark.svg" alt="checkbox" class="action-checkbox me-1" />
<p [ngStyle]="{ 'text-decoration': 'line-through' }">{{ action.action }}</p>
</div>
</div>
<div *ngIf="!action.isChecked">
<div class="action-list-item break-word ms-4"><span class="me-2">-</span> {{ action.action }}</div>
</div>
</div>
<div *ngIf="!action.isChecked">
<div class="action-list-item break-word ms-4"><span class="me-2">-</span> {{ action.action }}</div>
</div>
</div>
</div>
</section>

<div class="d-flex align-items-center flex-row justify-content-start">
<button
Expand Down
21 changes: 9 additions & 12 deletions frontend/src/app/components/keyresult/keyresult.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,18 @@
class="key-result rounded-2 p-3 w-100 focus-outline"
tabindex="0"
>
<h3 class="keyresult-title linebreak mb-2">{{ keyResult.title }}</h3>
<h3 class="fw-normal linebreak mb-2">{{ keyResult.title }}</h3>
<app-scoring [keyResult]="keyResult" [isDetail]="false" [attr.data-testId]="'scoring-component'"></app-scoring>
<div class="d-flex justify-content-between mt-1">
<div class="d-flex justify-content-center">
<span class="d-flex align-items-center flex-wrap sub-title-keyresult">
<span class="me-1 text-nowrap me-2">Letztes Check-in</span>
<span class="keyResult-attribute-show" *ngIf="keyResult.lastCheckIn != null">{{
keyResult!.lastCheckIn!.createdOn | date: DATE_FORMAT
}}</span>
<span class="keyResult-attribute-show" *ngIf="keyResult.lastCheckIn == null">Keines</span>
</span>
<div class="d-flex justify-content-between mt-2">
<div class="d-flex justify-content-center align-items-center flex-wrap">
<h5 class="text-nowrap me-2">Letztes Check-in</h5>
<span class="keyResult-attribute-show">{{
keyResult.lastCheckIn == null ? "Keines" : (keyResult!.lastCheckIn!.createdOn | date: DATE_FORMAT)
}}</span>
</div>

<div class="d-flex align-items-center flex-wrap justify-content-end">
<p class="sub-title-keyresult">Confidence</p>
<div class="d-flex align-items-center flex-wrap justify-content-end keyResult-overview-attribute">
<h5 class="me-2">Confidence</h5>
<app-confidence
[edit]="false"
[isDetail]="false"
Expand Down
7 changes: 0 additions & 7 deletions frontend/src/app/components/keyresult/keyresult.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,3 @@
cursor: pointer;
}
}

.keyresult-title {
font-size: 1rem;
font-weight: normal;
word-wrap: anywhere;
color: black;
}
16 changes: 8 additions & 8 deletions frontend/src/app/components/objective-detail/objective-detail.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
<div class="w-100" [cdkTrapFocus]="true" [cdkTrapFocusAutoCapture]="true">
<ng-container *ngIf="(objective$ | async)?.id && (objective$ | async) as objective; else spinner">
<div *ngIf="objective" class="d-flex flex-column">
<div class="w-100 d-flex justify-content-between align-items-center mb-3">
<h2 class="title">{{ objective.title }}</h2>
<section class="w-100 d-flex justify-content-between align-items-center mb-3">
<h2 class="title" [attr.data-testId]="'objective-title'">{{ objective.title }}</h2>
<button
class="d-flex align-items-center justify-content-center"
mat-icon-button
(click)="backToOverview()"
data-test-id="closeDrawer"
[attr.data-testId]="'closeDrawer'"
>
<mat-icon class="d-flex justify-content-center align-items-center">close</mat-icon>
</button>
</div>
</section>

<div class="me-3">
<p class="sub-title-objective fw-bold mb-1">Beschrieb</p>
<section class="me-3">
<h3 class="mb-1">Beschrieb</h3>
<div class="linebreak" *ngIf="objective.description === ''"><p>-</p></div>
<div *ngIf="objective.description !== ''" data-test-id="description" class="linebreak">
<div *ngIf="objective.description !== ''" [attr.data-testId]="'description'" class="linebreak">
<p>{{ objective.description }}</p>
</div>

Expand Down Expand Up @@ -47,7 +47,7 @@ <h2 class="title">{{ objective.title }}</h2>
Objective bearbeiten
</button>
</div>
</div>
</section>
</div>
</ng-container>

Expand Down
4 changes: 0 additions & 4 deletions frontend/src/app/components/objective-detail/objective-detail.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
:host {
width: 100%;
}

.sub-title-objective {
font-size: 1rem;
}
4 changes: 2 additions & 2 deletions frontend/src/app/components/objective-detail/objective-detail.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,8 @@ describe('ObjectiveDetailComponent', () => {
it('get data from backend', () => {
fixture.detectChanges();
component.objectiveId = 2;
const title = fixture.debugElement.query(By.css('.title')).nativeElement.innerHTML;
const description = fixture.debugElement.query(By.css('[data-test-id="description"]')).nativeElement.innerHTML;
const title = fixture.debugElement.query(By.css('[data-testId="objective-title"]'))?.nativeElement.innerHTML;
const description = fixture.debugElement.query(By.css('[data-testId="description"]'))?.nativeElement.innerHTML;
expect(title).toContain(objective.title);
expect(description).toContain(objective.description);
});
Expand Down
5 changes: 3 additions & 2 deletions frontend/src/app/components/objective-filter/objective-filter.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<form class="d-flex search-form" (ngSubmit)="this.refresh.next()">
<form class="d-flex search-form" (ngSubmit)="refresh.next()">
<mat-form-field
id="objective-form-field"
class="bg-white header-form-field"
Expand All @@ -11,7 +11,7 @@
[type]="'text'"
[placeholder]="'Nach Objectives suchen'"
[(ngModel)]="query"
(input)="this.refresh.next()"
(input)="refresh.next()"
[ngModelOptions]="{ standalone: true }"
[attr.data-testId]="'objectiveSearch'"
/>
Expand All @@ -20,6 +20,7 @@
<button
class="bg-pz-dark-blue d-flex justify-content-start align-items-center icon-button px-3 focus-outline"
type="submit"
aria-label="Search Objectives"
>
<img src="../assets/icons/search-icon.svg" alt="search icon" class="text-white search-scale" />
</button>
Expand Down
4 changes: 4 additions & 0 deletions frontend/src/app/components/objective-filter/objective-filter.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
#objective-form-field {
width: 300px;
}

.search-scale {
transform: scale(1.2);
}
Loading
Loading