Skip to content

Commit 1b1963f

Browse files
NeoScriptNeoScript
authored
Merge pull request #27 from NeoScript/fix_ui_scaling
Fix UI scaling
2 parents 77866cd + 273bb1d commit 1b1963f

File tree

7 files changed

+79
-69
lines changed

7 files changed

+79
-69
lines changed

‎webapp/package-lock.json

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎webapp/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "webapp",
3-
"version": "0.0.3",
3+
"version": "0.0.4",
44
"scripts": {
55
"ng": "ng",
66
"start": "ng serve",

‎webapp/src/app/components/subscription-list/new-subscription-dialog/new-subscription-dialog.component.html

+34-33
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,42 @@
1-
<h3>Create a new subscription</h3>
1+
<mat-dialog-content>
2+
<h3>Create a new subscription</h3>
23

3-
<mat-horizontal-stepper>
4-
<mat-step color="accent">
5-
<ng-template matStepLabel>Subscription Type</ng-template>
6-
<p>Which type of subscription would you like to create?</p>
7-
<mat-action-list>
8-
<button mat-list-item matStepperNext (click)="setConfigType('pull')">
9-
<mat-icon mat-list-icon>move_to_inbox</mat-icon>
10-
<div mat-line>Pull Subscription</div>
11-
<div mat-line class="caption">Subscribers must pull messages manually.</div>
12-
</button>
4+
<mat-horizontal-stepper>
5+
<mat-step color="accent">
6+
<ng-template matStepLabel>Subscription Type</ng-template>
7+
<p>Which type of subscription would you like to create?</p>
8+
<mat-action-list>
9+
<button mat-list-item matStepperNext (click)="setConfigType('pull')">
10+
<mat-icon matListItemIcon>move_to_inbox</mat-icon>
11+
<div matListItemTitle>Pull Subscription</div>
12+
<div matListItemLine>Subscribers must pull messages manually.</div>
13+
</button>
1314

14-
<button mat-list-item matStepperNext (click)="setConfigType('push')">
15-
<mat-icon mat-list-icon>send</mat-icon>
16-
<div mat-line>Push Subscription</div>
17-
<div mat-line class="caption">Messages will be forwarded to an endpoint.</div>
18-
</button>
19-
</mat-action-list>
20-
</mat-step>
15+
<button mat-list-item matStepperNext (click)="setConfigType('push')">
16+
<mat-icon matListItemIcon>send</mat-icon>
17+
<div matListItemTitle>Push Subscription</div>
18+
<div matListItemLine>Messages will be forwarded to an endpoint.</div>
19+
</button>
20+
</mat-action-list>
21+
</mat-step>
2122

22-
<mat-step color="accent">
23-
<ng-template matStepLabel>Configuration</ng-template>
23+
<mat-step color="accent">
24+
<ng-template matStepLabel>Configuration</ng-template>
2425

25-
<div class="final-config">
26-
<mat-form-field appearance="outline" [style.width]="'100%'" class="nameInput">
27-
<mat-label>Enter subscription name</mat-label>
28-
<mat-hint>becomes '/projects/project-name/subscriptions/{{this.subscriptionForm.value}}'</mat-hint>
29-
<input matInput type="text" autocomplete="off" [formControl]="this.subscriptionForm">
30-
</mat-form-field>
26+
<div class="final-config">
27+
<mat-form-field appearance="outline" [style.width]="'100%'" class="nameInput">
28+
<mat-label>Enter subscription name</mat-label>
29+
<mat-hint>becomes '/projects/project-name/subscriptions/{{this.subscriptionForm.value}}'</mat-hint>
30+
<input matInput type="text" autocomplete="off" [formControl]="this.subscriptionForm">
31+
</mat-form-field>
3132

32-
@if (this.configType === 'pull') {
33+
@if (this.configType === 'pull') {
3334
<button mat-raised-button color="accent" (click)="createPullSubscription()"
3435
[disabled]="this.subscriptionForm.invalid">
3536
Create Pull Subscription
3637
<mat-icon>add</mat-icon>
3738
</button>
38-
} @else {
39+
} @else {
3940
<mat-form-field appearance="outline" [style.width]="'100%'" class="nameInput">
4041
<mat-label>Enter endpoint url</mat-label>
4142
<mat-hint>new messages will trigger this endpoint.</mat-hint>
@@ -46,9 +47,9 @@ <h3>Create a new subscription</h3>
4647
Create Push Subscription
4748
<mat-icon>add</mat-icon>
4849
</button>
49-
}
50-
</div>
51-
</mat-step>
52-
</mat-horizontal-stepper>
53-
50+
}
51+
</div>
52+
</mat-step>
53+
</mat-horizontal-stepper>
5454

55+
</mat-dialog-content>

‎webapp/src/app/components/subscription-list/new-subscription-dialog/new-subscription-dialog.component.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
.caption{
1+
.caption {
22
color: darkgray;
33
}
44

5-
.final-config{
5+
.final-config {
66
display: flex;
77
flex-direction: column;
88
}
99

10-
.nameInput{
10+
.nameInput {
1111
padding-bottom: 2em;
1212
}

‎webapp/src/app/components/subscription-list/new-subscription-dialog/new-subscription-dialog.component.ts

+9-7
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,23 @@
11
import { Component, OnInit, inject } from '@angular/core';
22
import { UntypedFormControl, Validators, ReactiveFormsModule } from '@angular/forms';
3-
import { MatDialogRef } from '@angular/material/dialog';
3+
import { MatDialogContainer, MatDialogContent, MatDialogRef } from '@angular/material/dialog';
44
import { PushConfig, Topic } from 'src/app/services/pubsub.service';
55
import { MatStepper, MatStep, MatStepLabel, MatStepperNext } from '@angular/material/stepper';
6-
import { MatActionList, MatListItem } from '@angular/material/list';
6+
import { MatActionList, MatListItem, MatListItemIcon, MatListItemLine, MatListItemTitle } from '@angular/material/list';
77
import { MatIcon } from '@angular/material/icon';
88
import { MatFormField, MatLabel, MatHint } from '@angular/material/form-field';
99
import { MatInput } from '@angular/material/input';
1010

1111
import { MatButton } from '@angular/material/button';
1212

1313
@Component({
14-
selector: 'app-new-subscription-dialog',
15-
templateUrl: './new-subscription-dialog.component.html',
16-
styleUrls: ['./new-subscription-dialog.component.scss'],
17-
standalone: true,
18-
imports: [MatStepper, MatStep, MatStepLabel, MatActionList, MatListItem, MatStepperNext, MatIcon, MatFormField, MatLabel, MatHint, MatInput, ReactiveFormsModule, MatButton]
14+
selector: 'app-new-subscription-dialog',
15+
templateUrl: './new-subscription-dialog.component.html',
16+
styleUrls: ['./new-subscription-dialog.component.scss'],
17+
standalone: true,
18+
imports: [MatStepper, MatStep, MatStepLabel, MatActionList, MatListItem, MatStepperNext, MatIcon, MatFormField, MatLabel, MatHint, MatInput, ReactiveFormsModule, MatButton, MatDialogContent,
19+
MatListItemIcon, MatListItemLine, MatListItemTitle
20+
]
1921
})
2022
export class NewSubscriptionDialogComponent implements OnInit {
2123
private ref = inject<MatDialogRef<NewSubscriptionDialogComponent, NewSubscriptionRequest>>(MatDialogRef);

‎webapp/src/app/components/topic-list/new-topic-dialog/new-topic-dialog.component.html

+19-12
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,20 @@
1-
<mat-card-header>
2-
<div class="column-layout">
3-
<mat-card-title>Create Topic</mat-card-title>
4-
<mat-card-subtitle>Topic will be created for: </mat-card-subtitle>
5-
</div>
6-
</mat-card-header>
1+
<mat-dialog-content>
2+
<mat-card-header>
3+
<div class="column-layout">
4+
<mat-card-title>Create Topic</mat-card-title>
5+
<mat-card-subtitle>Topic will be created for: </mat-card-subtitle>
6+
</div>
7+
</mat-card-header>
78

8-
<mat-card-content class="column-layout">
9-
<mat-form-field appearance="outline">
10-
<input matInput type="text" autocomplete="off" autofocus placeholder="New Topic ID" [formControl]="this.topicName">
11-
</mat-form-field>
12-
<button mat-raised-button color="accent" (click)="this.submit()">Create Topic</button>
13-
</mat-card-content>
9+
<mat-card-content class="column-layout">
10+
<form (ngSubmit)="this.submit()">
11+
<mat-form-field appearance="outline">
12+
<input matInput type="text" autocomplete="off" autofocus placeholder="New Topic ID"
13+
[formControl]="this.topicName">
14+
</mat-form-field>
15+
</form>
16+
</mat-card-content>
17+
<mat-card-actions>
18+
<button mat-raised-button color="accent" (click)="this.submit()">Create Topic</button>
19+
</mat-card-actions>
20+
</mat-dialog-content>

‎webapp/src/app/components/topic-list/new-topic-dialog/new-topic-dialog.component.ts

+11-11
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
import { Component, OnInit, inject } from '@angular/core';
2-
import { UntypedFormControl, Validators, ReactiveFormsModule } from '@angular/forms';
3-
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
4-
import { MatCardHeader, MatCardTitle, MatCardSubtitle, MatCardContent } from '@angular/material/card';
2+
import { UntypedFormControl, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
3+
import { MatDialog, MatDialogContent, MatDialogRef } from '@angular/material/dialog';
4+
import { MatCardHeader, MatCardTitle, MatCardSubtitle, MatCardContent, MatCardActions } from '@angular/material/card';
55
import { MatFormField } from '@angular/material/form-field';
66
import { MatInput } from '@angular/material/input';
77
import { MatButton } from '@angular/material/button';
88

99
@Component({
10-
selector: 'app-new-topic-dialog',
11-
templateUrl: './new-topic-dialog.component.html',
12-
styleUrls: ['./new-topic-dialog.component.scss'],
13-
standalone: true,
14-
imports: [MatCardHeader, MatCardTitle, MatCardSubtitle, MatCardContent, MatFormField, MatInput, ReactiveFormsModule, MatButton]
10+
selector: 'app-new-topic-dialog',
11+
templateUrl: './new-topic-dialog.component.html',
12+
styleUrls: ['./new-topic-dialog.component.scss'],
13+
standalone: true,
14+
imports: [MatCardHeader, MatCardTitle, MatCardSubtitle, MatCardContent, MatFormField, MatInput, ReactiveFormsModule, MatButton, MatDialogContent, MatCardActions, FormsModule]
1515
})
1616
export class NewTopicDialogComponent implements OnInit {
1717
private ref = inject<MatDialogRef<NewTopicDialogComponent>>(MatDialogRef);
@@ -22,9 +22,9 @@ export class NewTopicDialogComponent implements OnInit {
2222
ngOnInit(): void {
2323
}
2424

25-
submit(): void{
26-
if(this.topicName.valid){
27-
this.ref.close({newTopic: this.topicName.value})
25+
submit(): void {
26+
if (this.topicName.valid) {
27+
this.ref.close({ newTopic: this.topicName.value })
2828
}
2929
}
3030

0 commit comments

Comments
 (0)