Skip to content

Commit

Permalink
UI improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@wojciechpolak
wojciechpolak committed Sep 19, 2024
1 parent 8cc437a commit 33c2e0a
Show file tree
Hide file tree
Showing 4 changed files with 112 additions and 83 deletions.
2 changes: 2 additions & 0 deletions src/app/last-time/last-time.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@
title="Double click to edit">
{{ item.name }}
</span>
<mat-icon class="edit-icon" aria-hidden="true"
(click)="editTitle($event)">edit</mat-icon>
}
</mat-card-title>
<mat-card-subtitle class="time">
Expand Down
172 changes: 90 additions & 82 deletions src/app/settings/settings.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,100 +1,108 @@
<h2>Settings</h2>

<form id="settingsForm" [formGroup]="form" (ngSubmit)="save()">
<mat-tab-group dynamicHeight>
<mat-tab label="General">
<form id="settingsForm" [formGroup]="form" (ngSubmit)="save()">

<mat-form-field>
<mat-label>Database name</mat-label>
<input matInput formControlName="dbName">
</mat-form-field>
<mat-form-field>
<mat-label>Database name</mat-label>
<input matInput formControlName="dbName">
</mat-form-field>

<div class="mat-form-field">
<div class="mat-form-field-wrapper">
<mat-checkbox class="mat-form-field-flex" formControlName="redirectToHttps">
Redirect to HTTPS
</mat-checkbox>
</div>
</div>
<div class="mat-form-field">
<div class="mat-form-field-wrapper">
<mat-checkbox class="mat-form-field-flex" formControlName="redirectToHttps">
Redirect to HTTPS
</mat-checkbox>
</div>
</div>

<div class="mat-form-field">
<div class="mat-form-field-wrapper">
<mat-checkbox class="mat-form-field-flex" formControlName="showDebug">
Show DEBUG Tab
</mat-checkbox>
</div>
</div>
<div class="mat-form-field">
<div class="mat-form-field-wrapper">
<mat-checkbox class="mat-form-field-flex" formControlName="showDebug">
Show DEBUG Tab
</mat-checkbox>
</div>
</div>

<hr class="section">
<h3>Remote Sync</h3>
<hr class="section">
<h3>Remote Sync</h3>

<div class="mat-form-field">
<div class="mat-form-field-wrapper">
<mat-checkbox class="mat-form-field-flex" formControlName="enableRemoteSync">
Enable Remote Sync
</mat-checkbox>
</div>
</div>
<div class="mat-form-field">
<div class="mat-form-field-wrapper">
<mat-checkbox class="mat-form-field-flex" formControlName="enableRemoteSync">
Enable Remote Sync
</mat-checkbox>
</div>
</div>

<mat-form-field>
<mat-label>User</mat-label>
<input matInput formControlName="user"
autocomplete="username"
[required]="form.controls['enableRemoteSync'].value">
</mat-form-field>
<mat-form-field>
<mat-label>User</mat-label>
<input matInput formControlName="user"
autocomplete="username"
[required]="form.controls['enableRemoteSync'].value">
</mat-form-field>

<mat-form-field>
<mat-label>Password</mat-label>
<input matInput formControlName="password" type="password"
autocomplete="current-password"
[required]="form.controls['enableRemoteSync'].value">
</mat-form-field>
<mat-form-field>
<mat-label>Password</mat-label>
<input matInput formControlName="password" type="password"
autocomplete="current-password"
[required]="form.controls['enableRemoteSync'].value">
</mat-form-field>

<mat-form-field>
<mat-label>Remote database endpoint</mat-label>
<input matInput placeholder="CouchDB URL" formControlName="endpoint"
[required]="form.controls['enableRemoteSync'].value">
<button matSuffix mat-icon-button aria-label="Add default"
(click)="fillDefaultEndpoint($event)">
<mat-icon>add</mat-icon>
</button>
</mat-form-field>
<mat-form-field>
<mat-label>Remote database endpoint</mat-label>
<input matInput placeholder="CouchDB URL" formControlName="endpoint"
[required]="form.controls['enableRemoteSync'].value">
<button matSuffix mat-icon-button aria-label="Add default"
(click)="fillDefaultEndpoint($event)">
<mat-icon>add</mat-icon>
</button>
</mat-form-field>

<div>
<button mat-raised-button (click)="cancel($event)">Cancel</button>
<button mat-raised-button color="primary"
type="submit"
[disabled]="!form.valid || !form.dirty">
Save
</button>
</div>
<div>
<button mat-raised-button (click)="cancel($event)">Cancel</button>
<button mat-raised-button color="primary"
type="submit"
[disabled]="!form.valid || !form.dirty">
Save
</button>
</div>

<hr class="section">
</form>
</mat-tab>

<div>
<p><b>DB Info:</b> {{ storageEstimated }}</p>
<p>
<button mat-raised-button color="primary"
(click)="dbExport($event)">
DB Export
</button>
<mat-tab label="DB Export & Import">
<div>
<p><b>DB Info:</b> {{ storageEstimated }}</p>
<p>
<button mat-raised-button color="primary"
(click)="dbExport($event)">
DB Export
</button>
</p>
<p>
<button mat-raised-button color="warn"
[disabled]="!importFileReady"
(click)="dbImport($event)">
DB Import
</button>
<input id="fileSelector" type="file"
(change)="importFileChange($event)">
</p>
</div>
</mat-tab>

<mat-tab label="Info & Update">
<p>App Version:
<b matTooltip="{{ version.commit_date }}">{{ version.commit }}</b>
</p>
<p>
<button mat-raised-button color="warn"
[disabled]="!importFileReady"
(click)="dbImport($event)">
DB Import
<button mat-stroked-button color="primary"
(click)="checkForUpdate($event)"
[disabled]="!isOnline()">check for update
</button>
<input id="fileSelector" type="file"
(change)="importFileChange($event)">
</p>
</div>

<hr class="section">
</mat-tab>

<p>App Version:
<b matTooltip="{{ version.commit_date }}">{{ version.commit }}</b>
<button mat-stroked-button color="primary"
(click)="checkForUpdate($event)"
[disabled]="!isOnline()">check for update
</button>
</p>
</form>
</mat-tab-group>
2 changes: 2 additions & 0 deletions src/app/stopwatch/stopwatch.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@
title="Double click to edit">
{{ item.name }}
</span>
<mat-icon class="edit-icon" aria-hidden="true"
(click)="editTitle($event)">edit</mat-icon>
}
</mat-card-title>
<mat-card-subtitle class="time">
Expand Down
19 changes: 18 additions & 1 deletion src/app/styles/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,7 @@ form {
min-width: 150px;
max-width: 500px;
width: 100%;
margin-bottom: 1em;

button {
margin-left: 0.5em !important;
Expand All @@ -122,7 +123,7 @@ form {
form, .lastTimeItem, .stopwatchItem {
.mat-mdc-form-field {
width: 100%;
max-width: 300px;
max-width: 400px;
}
}

Expand Down Expand Up @@ -160,6 +161,10 @@ mat-toolbar {
height: 32px;
}

.mat-mdc-tab-body-wrapper {
margin-top: 2.5em;
}

#connection-status {
float: right;
padding: 2px;
Expand Down Expand Up @@ -214,6 +219,18 @@ mat-toolbar {
@media only screen and (min-width: 320px) and (max-width: 767px) {
font-size: 16px;
}
.edit-icon {
font-size: 16px;
margin-left: 8px;
cursor: pointer;
opacity: 0;
transition: opacity 0.2s ease-in-out;
}
&:hover {
.edit-icon {
opacity: 1;
}
}
}
.edit {
margin-bottom: 1em;
Expand Down

0 comments on commit 33c2e0a

Please sign in to comment.