Skip to content

Commit 0b19baa

Browse files
gdimtsasgdimtsas
committed
Refactor presentation options component layout and styles for improved clarity and usability
1 parent 5b184fe commit 0b19baa

6 files changed

Lines changed: 177 additions & 150 deletions

File tree

‎src/app/features/presentation-request-preparation/components/attribute-selection/attribute-selection.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div class="component-root">
22
<ng-container *ngFor="let selection of attestationsSelection">
3-
<mat-card appearance="outlined">
3+
<mat-card >
44
<mat-card-header>
55
<mat-card-title>{{ nameOf(selection.type) }}</mat-card-title>
66
<mat-card-subtitle>

‎src/app/features/presentation-request-preparation/components/presentation-options/presentation-options.component.html‎

Lines changed: 66 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,73 @@
1-
<section class="request-options-panel">
2-
<header class="request-options-header">
3-
<h5>Presentation Options</h5>
4-
<p>Decide how wallets should respond and which transport is used.</p>
5-
</header>
1+
<mat-card>
2+
<mat-card-header>
3+
<mat-card-title>Presentation Options</mat-card-title>
4+
<mat-card-subtitle>
5+
Configure the options for your presentation request.
6+
</mat-card-subtitle>
7+
</mat-card-header>
68

7-
<div class="request-options-grid">
8-
<div class="request-options-row">
9-
<div class="request-options-label">
10-
<span>Presentation Profile</span>
11-
<p class="request-options-helper">
12-
Pick the protocol the verifier expects from the wallet.
13-
</p>
9+
<mat-card-content>
10+
<div class="request-options-grid">
11+
<div class="request-options-row">
12+
<div class="request-options-label">
13+
<span>Presentation Profile</span>
14+
<p class="request-options-helper">
15+
Defines the rules and constraints of the presentation
16+
</p>
17+
</div>
18+
<div class="request-options-control">
19+
<mat-button-toggle-group
20+
[formControl]="presentationProfileControl"
21+
(valueChange)="profileChange.emit($event)"
22+
aria-label="Presentation Profile"
23+
>
24+
<mat-button-toggle value="openid4vp">OpenID4VP</mat-button-toggle>
25+
<mat-button-toggle value="haip">HAIP</mat-button-toggle>
26+
</mat-button-toggle-group>
27+
</div>
1428
</div>
15-
<div class="request-options-control">
16-
<mat-button-toggle-group
17-
[formControl]="presentationProfileControl"
18-
(valueChange)="profileChange.emit($event)"
19-
aria-label="Presentation Profile"
20-
>
21-
<mat-button-toggle value="openid4vp">OpenID4VP</mat-button-toggle>
22-
<mat-button-toggle value="haip">HAIP</mat-button-toggle>
23-
</mat-button-toggle-group>
24-
</div>
25-
</div>
2629

27-
<div class="request-options-row">
28-
<div class="request-options-label">
29-
<span>Request URI Method</span>
30-
<p class="request-options-helper">
31-
Choose how the wallet fetches the request URI from the verifier.
32-
</p>
33-
</div>
34-
<div class="request-options-control">
35-
<mat-button-toggle-group
36-
[formControl]="requestUriMethodControl"
37-
(valueChange)="requestUriMethodChange.emit($event)"
38-
aria-label="Request URI Method"
39-
>
40-
<mat-button-toggle value="get">GET</mat-button-toggle>
41-
<mat-button-toggle value="post">POST</mat-button-toggle>
42-
</mat-button-toggle-group>
30+
<div class="request-options-row">
31+
<div class="request-options-label">
32+
<span>Request URI Method</span>
33+
<p class="request-options-helper">
34+
Choose how the wallet fetches the authorization request
35+
</p>
36+
</div>
37+
<div class="request-options-control">
38+
<mat-button-toggle-group
39+
[formControl]="requestUriMethodControl"
40+
(valueChange)="requestUriMethodChange.emit($event)"
41+
aria-label="Request URI Method"
42+
>
43+
<mat-button-toggle value="get">GET</mat-button-toggle>
44+
<mat-button-toggle value="post">POST</mat-button-toggle>
45+
</mat-button-toggle-group>
46+
</div>
4347
</div>
44-
</div>
4548

46-
<div class="request-options-row">
47-
<div class="request-options-label">
48-
<span>Authorization URI Scheme</span>
49-
<p class="request-options-helper">
50-
Define the deep-link scheme wallets should launch when invoking
51-
authorization.
52-
</p>
53-
</div>
54-
<div class="request-options-control">
55-
<mat-form-field appearance="outline" class="config-option-field">
56-
<mat-label>Authorization URI Scheme</mat-label>
57-
<input
58-
matInput
59-
placeholder="scheme://"
60-
[formControl]="authorizationSchemeControl"
61-
autocomplete="off"
62-
(input)="authorizationSchemeChange.emit(authorizationSchemeControl.value)"
63-
/>
64-
</mat-form-field>
49+
<div class="request-options-row">
50+
<div class="request-options-label">
51+
<span>Authorization URI Scheme</span>
52+
<p class="request-options-helper">
53+
Specify a custom URI for the authorization request
54+
</p>
55+
</div>
56+
<div class="request-options-control">
57+
<mat-form-field appearance="outline" class="config-option-field">
58+
<mat-label>Authorization URI Scheme</mat-label>
59+
<input
60+
matInput
61+
placeholder="scheme://"
62+
[formControl]="authorizationSchemeControl"
63+
autocomplete="off"
64+
(input)="
65+
authorizationSchemeChange.emit(authorizationSchemeControl.value)
66+
"
67+
/>
68+
</mat-form-field>
69+
</div>
6570
</div>
6671
</div>
67-
</div>
68-
</section>
72+
</mat-card-content>
73+
</mat-card>

‎src/app/features/presentation-request-preparation/components/presentation-options/presentation-options.component.scss‎

Lines changed: 25 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,47 @@
11
:host {
2-
display: block;
3-
}
4-
5-
.request-options-panel {
6-
margin-bottom: 24px;
7-
padding: 24px;
8-
border: 1px solid var(--mat-sys-color-outline, #d9d9d9);
9-
border-radius: 12px;
10-
background: var(--mat-sys-color-surface, #fff);
11-
box-shadow: 0 6px 18px rgb(24 39 75 / 6%);
12-
13-
.request-options-header {
14-
margin-bottom: 16px;
15-
16-
h5 {
17-
margin: 0;
18-
font-size: 1rem;
19-
font-weight: 600;
20-
}
21-
22-
p {
23-
margin: 4px 0 0;
24-
color: rgba(0, 0, 0, 0.6);
25-
font-size: 0.9rem;
26-
}
27-
}
2+
display: block;
283
}
294

305
.request-options-grid {
31-
display: flex;
32-
flex-direction: column;
33-
gap: 24px;
6+
display: flex;
7+
flex-direction: column;
8+
gap: 24px;
9+
padding-top: 16px;
3410
}
3511

3612
.request-options-row {
37-
display: grid;
38-
grid-template-columns: 220px minmax(0, 1fr);
39-
gap: 16px;
40-
align-items: center;
13+
display: grid;
14+
grid-template-columns: 220px minmax(0, 1fr);
15+
gap: 16px;
4116
}
4217

4318
.request-options-label {
44-
text-align: right;
19+
text-align: right;
4520

46-
span {
47-
display: block;
48-
font-weight: 600;
49-
}
21+
span {
22+
display: block;
23+
font-weight: 500;
24+
}
5025
}
5126

5227
.request-options-helper {
53-
margin: 4px 0 0;
54-
font-size: 0.85rem;
55-
color: rgba(0, 0, 0, 0.6);
28+
margin: 4px 0 0;
29+
font-size: 0.85rem;
30+
color: rgba(0, 0, 0, 0.6);
5631
}
5732

5833
.request-options-control {
59-
display: flex;
60-
flex-direction: column;
61-
gap: 8px;
34+
display: flex;
35+
flex-direction: column;
36+
gap: 8px;
6237
}
6338

6439
@media (max-width: 768px) {
65-
.request-options-row {
66-
grid-template-columns: 1fr;
67-
}
40+
.request-options-row {
41+
grid-template-columns: 1fr;
42+
}
6843

69-
.request-options-label {
70-
text-align: left;
71-
}
44+
.request-options-label {
45+
text-align: left;
46+
}
7247
}

‎src/app/features/presentation-request-preparation/components/presentation-options/presentation-options.component.ts‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,12 @@ import { FormControl, ReactiveFormsModule } from '@angular/forms';
44
import { MatButtonToggleModule } from '@angular/material/button-toggle';
55
import { MatFormFieldModule } from '@angular/material/form-field';
66
import { MatInputModule } from '@angular/material/input';
7-
import { Profile, RequestUriMethod } from '@app/core/models/TransactionInitializationRequest';
7+
import { MatCardModule, MatCardHeader, MatCardSubtitle, MatCard, MatCardTitle, MatCardContent } from '@angular/material/card';
8+
9+
import {
10+
Profile,
11+
RequestUriMethod,
12+
} from '@app/core/models/TransactionInitializationRequest';
813

914
@Component({
1015
selector: 'vc-presentation-options',
@@ -14,9 +19,14 @@ import { Profile, RequestUriMethod } from '@app/core/models/TransactionInitializ
1419
MatButtonToggleModule,
1520
MatFormFieldModule,
1621
MatInputModule,
17-
],
22+
MatCardHeader,
23+
MatCard,
24+
MatCardTitle,
25+
MatCardSubtitle,
26+
MatCardContent
27+
],
1828
templateUrl: './presentation-options.component.html',
19-
styleUrl: './presentation-options.component.scss'
29+
styleUrl: './presentation-options.component.scss',
2030
})
2131
export class PresentationOptionsComponent {
2232
@Input() presentationProfileControl!: FormControl<Profile>;

0 commit comments

Comments
 (0)