_Bastler/bstlboard-front
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update dependencies, improve views

Browse Source
This commit is contained in:
_Bastler 2022-12-07 18:25:03 +01:00
parent b602564781
commit 94b8792de8
25 changed files with 6563 additions and 5548 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
angular.json
View File

@ -121,5 +121,8 @@
} }
} }
}}, }},
"defaultProject": "bstlboard-angular" "defaultProject": "bstlboard-angular",
"cli": {
"analytics": false
}
} }

11756
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

61
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "bstlboard", "name": "bstlboard",
"version": "0.0.0", "version": "1.5.0",
"scripts": { "scripts": {
"ng": "ng", "ng": "ng",
"start": "ng serve", "start": "ng serve",
@ -11,44 +11,43 @@
}, },
"private": true, "private": true,
"dependencies": { "dependencies": {
"@angular-material-components/datetime-picker": "^7.0.1", "@angular-material-components/datetime-picker": "^9.0.0",
"@angular/animations": "^13.3.3", "@angular/animations": "^15.0.2",
"@angular/cdk": "^13.3.2", "@angular/cdk": "^15.0.1",
"@angular/common": "^13.3.3", "@angular/common": "^15.0.2",
"@angular/compiler": "^13.3.3", "@angular/compiler": "^15.0.2",
"@angular/core": "^13.3.3", "@angular/core": "^15.0.2",
"@angular/flex-layout": "^13.0.0-beta.38", "@angular/forms": "^15.0.2",
"@angular/forms": "^13.3.3", "@angular/material": "^15.0.1",
"@angular/material": "^13.3.2", "@angular/material-moment-adapter": "^15.0.1",
"@angular/material-moment-adapter": "^13.3.2", "@angular/platform-browser": "^15.0.2",
"@angular/platform-browser": "^13.3.3", "@angular/platform-browser-dynamic": "^15.0.2",
"@angular/platform-browser-dynamic": "^13.3.3", "@angular/router": "^15.0.2",
"@angular/router": "^13.3.3", "@angular/service-worker": "^15.0.2",
"@angular/service-worker": "^13.3.3", "moment": "^2.29.4",
"moment": "^2.29.2", "rxjs": "~7.6.0",
"rxjs": "~7.5.5", "tslib": "^2.4.1",
"tslib": "^2.3.1", "zone.js": "~0.12.0"
"zone.js": "~0.11.5"
}, },
"devDependencies": { "devDependencies": {
"@angular-devkit/build-angular": "^13.3.2", "@angular-devkit/build-angular": "^15.0.2",
"@angular/cli": "^13.3.2", "@angular/cli": "^15.0.2",
"@angular/compiler-cli": "^13.3.3", "@angular/compiler-cli": "^15.0.2",
"@angular/localize": "^13.3.3", "@angular/localize": "^15.0.2",
"@types/jasmine": "^4.0.2", "@types/jasmine": "^4.3.1",
"@types/jasminewd2": "^2.0.10", "@types/jasminewd2": "^2.0.10",
"@types/node": "^17.0.23", "@types/node": "^18.11.11",
"codelyzer": "^6.0.2", "codelyzer": "^6.0.2",
"jasmine-core": "~4.1.0", "jasmine-core": "~4.5.0",
"jasmine-spec-reporter": "~7.0.0", "jasmine-spec-reporter": "~7.0.0",
"karma": "^6.3.18", "karma": "^6.4.1",
"karma-chrome-launcher": "~3.1.1", "karma-chrome-launcher": "~3.1.1",
"karma-coverage-istanbul-reporter": "~3.0.3", "karma-coverage-istanbul-reporter": "~3.0.3",
"karma-jasmine": "~5.0.0", "karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "^1.7.0", "karma-jasmine-html-reporter": "^2.0.0",
"protractor": "~7.0.0", "protractor": "~7.0.0",
"ts-node": "~10.7.0", "ts-node": "~10.9.1",
"tslint": "~6.1.0", "tslint": "~6.1.0",
"typescript": "~4.6.3" "typescript": "~4.8.4"
} }
} }

42
src/app/app-routing.module.ts
View File

@ -25,32 +25,32 @@ import { UiMain } from './ui/main/main.ui';
const routes: Routes = [ const routes: Routes = [
{ {
path: '', component: UiMain, children: [ path: '', component: UiMain, children: [
{ path: '', component: PageView, canActivate: [ AuthenticatedGuard ] }, { path: '', component: PageView, canActivate: [AuthenticatedGuard] },
{ path: 'login', component: PageLogin, canActivate: [ AnonymousGuard ] }, { path: 'login', component: PageLogin, canActivate: [AnonymousGuard] },
{ path: 'search', component: PageSearch, canActivate: [ AuthenticatedGuard ] }, { path: 'search', component: PageSearch, canActivate: [AuthenticatedGuard] },
{ path: 'moderation/comments', component: PageModerationComments, canActivate: [ AuthenticatedGuard ] }, { path: 'moderation/comments', component: PageModerationComments, canActivate: [AuthenticatedGuard] },
{ path: 'moderation/entries', component: PageModerationEntries, canActivate: [ AuthenticatedGuard ] }, { path: 'moderation/entries', component: PageModerationEntries, canActivate: [AuthenticatedGuard] },
{ path: 'bookmarks', component: PageBookmarks, canActivate: [ AuthenticatedGuard ] }, { path: 'bookmarks', component: PageBookmarks, canActivate: [AuthenticatedGuard] },
{ path: 'settings', component: PageSettings, canActivate: [ AuthenticatedGuard ] }, { path: 'settings', component: PageSettings, canActivate: [AuthenticatedGuard] },
{ path: 'submit', component: PageEntryEdit, canActivate: [ AuthenticatedGuard ] }, { path: 'submit', component: PageEntryEdit, canActivate: [AuthenticatedGuard] },
{ path: 'e/:id', component: PageEntry, canActivate: [ AuthenticatedGuard ] }, { path: 'e/:id', component: PageEntry, canActivate: [AuthenticatedGuard] },
{ path: 'e/:id/edit', component: PageEntryEdit, canActivate: [ AuthenticatedGuard ] }, { path: 'e/:id/edit', component: PageEntryEdit, canActivate: [AuthenticatedGuard] },
{ path: 'c/:id', component: PageComment, canActivate: [ AuthenticatedGuard ] }, { path: 'c/:id', component: PageComment, canActivate: [AuthenticatedGuard] },
{ path: 'u/:username', component: PageUser, canActivate: [ AuthenticatedGuard ] }, { path: 'u/:username', component: PageUser, canActivate: [AuthenticatedGuard] },
{ path: 'u/c/:username', component: PageUserComments, canActivate: [ AuthenticatedGuard ] }, { path: 'u/c/:username', component: PageUserComments, canActivate: [AuthenticatedGuard] },
{ path: 'u/e/:username', component: PageUserEntries, canActivate: [ AuthenticatedGuard ] }, { path: 'u/e/:username', component: PageUserEntries, canActivate: [AuthenticatedGuard] },
{ path: 'unavailable', component: PageUnavailable }, { path: 'unavailable', component: PageUnavailable },
{ path: 'v', component: PageViewEdit, canActivate: [ AuthenticatedGuard ] }, { path: 'v', component: PageViewEdit, canActivate: [AuthenticatedGuard] },
{ path: 'v/:name', component: PageView, canActivate: [ AuthenticatedGuard ] }, { path: 'v/:name', component: PageView, canActivate: [AuthenticatedGuard] },
{ path: 'v/:name/edit', component: PageViewEdit, canActivate: [ AuthenticatedGuard ] }, { path: 'v/:name/edit', component: PageViewEdit, canActivate: [AuthenticatedGuard] },
{ path: 'v/:name/:username', component: PageView, canActivate: [ AuthenticatedGuard ] }, { path: 'v/:name/:username', component: PageView, canActivate: [AuthenticatedGuard] },
{ path: '**', component: PageNotFound, pathMatch: 'full', canActivate: [ AuthUpdateGuard ] }, { path: '**', component: PageNotFound, pathMatch: 'full', canActivate: [AuthUpdateGuard] },
] ]
}, },
]; ];
@NgModule({ @NgModule({
imports: [ RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload', relativeLinkResolution: 'legacy' }) ], imports: [RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload' })],
exports: [ RouterModule ] exports: [RouterModule]
}) })
export class AppRoutingModule { } export class AppRoutingModule { }

3
src/app/material/material.module.ts
View File

@ -43,7 +43,6 @@ import {MatPaginatorModule} from '@angular/material/paginator';
import {MatSortModule} from '@angular/material/sort'; import {MatSortModule} from '@angular/material/sort';
import {MatTableModule} from '@angular/material/table'; import {MatTableModule} from '@angular/material/table';
import {MatMomentDateModule} from '@angular/material-moment-adapter'; import {MatMomentDateModule} from '@angular/material-moment-adapter';
import {FlexLayoutModule} from '@angular/flex-layout';
import { import {
NgxMatDatetimePickerModule, NgxMatDatetimePickerModule,
@ -91,7 +90,6 @@ import {
MatSortModule, MatSortModule,
MatTableModule, MatTableModule,
MatMomentDateModule, MatMomentDateModule,
FlexLayoutModule,
NgxMatDatetimePickerModule, NgxMatDatetimePickerModule,
NgxMatNativeDateModule, NgxMatNativeDateModule,
NgxMatTimepickerModule NgxMatTimepickerModule
@ -132,7 +130,6 @@ import {
MatPaginatorModule, MatPaginatorModule,
MatSortModule, MatSortModule,
MatTableModule, MatTableModule,
FlexLayoutModule,
NgxMatDatetimePickerModule, NgxMatDatetimePickerModule,
NgxMatNativeDateModule, NgxMatNativeDateModule,
NgxMatTimepickerModule NgxMatTimepickerModule

2
src/app/pages/entry/entry.page.html
View File

@ -5,6 +5,6 @@
<ui-commentform [target]="entry.id" (replyCommentEvent)="replyCallback($event)"></ui-commentform> <ui-commentform [target]="entry.id" (replyCommentEvent)="replyCallback($event)"></ui-commentform>
<ui-comments #comments [target]="entry.id" [subcomments]="true"></ui-comments> <ui-comments #comments [target]="entry.id" [subcomments]="true" class="scroll-container"></ui-comments>
</ng-container> </ng-container>
</div> </div>

6
src/app/pages/login/login.page.html
View File

@ -1,4 +1,4 @@
<div fxLayout="column" fxFlexFill> <div class="flex column fill">
<div class="container"> <div class="container">
<mat-card *ngIf="externals && externals.length > 0" class="box"> <mat-card *ngIf="externals && externals.length > 0" class="box">
<mat-card-content> <mat-card-content>
@ -7,7 +7,7 @@
{{'login.external.invalid' | i18n}} {{'login.external.invalid' | i18n}}
</mat-error> </mat-error>
</mat-card-content> </mat-card-content>
<mat-card-actions> <mat-card-actions class="flex wrap">
<a class="external-login" (click)="externalLogin(client)" *ngFor="let client of externals" <a class="external-login" (click)="externalLogin(client)" *ngFor="let client of externals"
mat-raised-button color="accent">{{'login.external.client' | i18n:client.id}}</a> mat-raised-button color="accent">{{'login.external.client' | i18n:client.id}}</a>
<mat-slide-toggle [(ngModel)]="autologin"> <mat-slide-toggle [(ngModel)]="autologin">
@ -50,7 +50,7 @@
</mat-card> </mat-card>
</form> </form>
</div> </div>
<span fxFlexOffset="auto"></span> <span class="spacer"></span>
<div class="container" *ngIf="!internalLogin"> <div class="container" *ngIf="!internalLogin">
<small> <small>
<a href="javascript:" (click)="internalLogin = true;">{{'login.local' | i18n}}</a> <a href="javascript:" (click)="internalLogin = true;">{{'login.local' | i18n}}</a>

3
src/app/pages/login/login.page.scss
View File

@ -4,7 +4,8 @@ mat-form-field {
a.external-login { a.external-login {
margin: 15px 0; margin: 15px 0;
display: block; flex-basis: 100%;
flex-shrink: 0;
} }
.box { .box {

2
src/app/pages/moderation/comments/moderation.comments.page.html
View File

@ -1,7 +1,7 @@
<div class="container"> <div class="container">
<mat-progress-bar *ngIf="!comments || !comments.content" mode="indeterminate"></mat-progress-bar> <mat-progress-bar *ngIf="!comments || !comments.content" mode="indeterminate"></mat-progress-bar>
<div *ngIf="comments && comments.content" fxLayout="column" fxFlexFill class="comments"> <div *ngIf="comments && comments.content" class="comments flex column fill">
<ng-container *ngFor="let comment of comments.content; let i = index"> <ng-container *ngFor="let comment of comments.content; let i = index">
<mat-divider class="divider" *ngIf="i > 0"></mat-divider> <mat-divider class="divider" *ngIf="i > 0"></mat-divider>
<ui-comment class="comment" [comment]="comment" [subcomments]="false" [parentLink]="true" [change]="boundRefresh"> <ui-comment class="comment" [comment]="comment" [subcomments]="false" [parentLink]="true" [change]="boundRefresh">

20
src/app/pages/search/search.page.html
View File

@ -1,6 +1,6 @@
<div fxLayout="column" fxFlexFill> <div class="flex column fill">
<div class="container"> <div class="container flex wrap">
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<mat-label>{{'search.query' | i18n}}</mat-label> <mat-label>{{'search.query' | i18n}}</mat-label>
<input matInput [formControl]="searchFormControl"> <input matInput [formControl]="searchFormControl">
</mat-form-field> </mat-form-field>
@ -24,7 +24,8 @@
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<mat-select placeholder="{{'search.byDate' | i18n}}" [value]="byDate" (selectionChange)="byDate = $event.value; refresh()"> <mat-select placeholder="{{'search.byDate' | i18n}}" [value]="byDate"
(selectionChange)="byDate = $event.value; refresh()">
<mat-select-trigger> <mat-select-trigger>
<mat-icon>{{'search.byDate.' + byDate + '.icon' | i18n}}</mat-icon> {{'search.byDate.' + <mat-icon>{{'search.byDate.' + byDate + '.icon' | i18n}}</mat-icon> {{'search.byDate.' +
byDate | i18n}} byDate | i18n}}
@ -59,7 +60,7 @@
<mat-progress-bar *ngIf="!results || !results.content && !results.error" mode="indeterminate"></mat-progress-bar> <mat-progress-bar *ngIf="!results || !results.content && !results.error" mode="indeterminate"></mat-progress-bar>
<div *ngIf="results && results.error" fxLayout="column" fxFlexFill> <div *ngIf="results && results.error" class="flex column fill">
<mat-card class="accent box"> <mat-card class="accent box">
<mat-card-header> <mat-card-header>
<mat-card-title>{{ 'search.error.' + results.error.status | i18n}}</mat-card-title> <mat-card-title>{{ 'search.error.' + results.error.status | i18n}}</mat-card-title>
@ -73,8 +74,8 @@
</mat-card> </mat-card>
</div> </div>
<div class="results" *ngIf="results" fxLayout="column"> <ng-container *ngIf="results">
<mat-list *ngIf="results.content"> <mat-list *ngIf="results.content" class="scroll-container">
<ng-container *ngFor="let result of results.content; let i = index"> <ng-container *ngFor="let result of results.content; let i = index">
<mat-divider *ngIf="i > 0"></mat-divider> <mat-divider *ngIf="i > 0"></mat-divider>
<mat-list-item> <mat-list-item>
@ -94,10 +95,9 @@
</mat-list-item> </mat-list-item>
</mat-list> </mat-list>
<span fxFlexOffset="auto" fxFlexOffset.xs="none"></span> <span class="spacer"></span>
<mat-paginator [pageSizeOptions]="pageSizeOptions" [pageIndex]="results.number" [length]="results.totalElements" <mat-paginator [pageSizeOptions]="pageSizeOptions" [pageIndex]="results.number" [length]="results.totalElements"
[pageSize]="results.size" (page)="update && update($event)" showFirstLastButtons> [pageSize]="results.size" (page)="update && update($event)" showFirstLastButtons>
</mat-paginator> </mat-paginator>
</div> </ng-container>
</div> </div>

7
src/app/pages/search/search.page.scss
View File

@ -1,13 +1,12 @@
.results {
height: 100%;
}
mat-list mat-list-item { mat-list mat-list-item {
height: auto; height: auto;
} }
mat-form-field { mat-form-field {
margin-right: 15px; margin-right: 15px;
flex-basis: 0;
flex-grow: 1;
min-width: 100px;
} }
.container { .container {

22
src/app/pages/search/search.page.ts
View File

@ -10,20 +10,20 @@ import { SettingsService } from 'src/app/services/settings.service';
@Component({ @Component({
selector: 'page-search', selector: 'page-search',
templateUrl: './search.page.html', templateUrl: './search.page.html',
styleUrls: [ './search.page.scss' ] styleUrls: ['./search.page.scss']
}) })
export class PageSearch implements OnInit { export class PageSearch implements OnInit {
searchFormControl = new FormControl(); searchFormControl = new FormControl();
pageSizeOptions: number[] = [ 1, 2, 3, 4, 5, 10, 15, 30, 50, 100 ]; pageSizeOptions: number[] = [1, 2, 3, 4, 5, 10, 15, 30, 50, 100];
results: any; results: any;
asc: boolean = false; asc: boolean = false;
byDate: boolean = false; byDate: boolean = false;
settings: any; settings: any;
settingsSubscription: Subscription; settingsSubscription: Subscription;
boundRefresh: Function; boundRefresh: Function;
types: string[] = [ 'all', 'entry', 'comment' ]; types: string[] = ['all', 'entry', 'comment'];
searchType: string = this.types[ 1 ]; searchType: string = this.types[1];
constructor( constructor(
private searchService: SearchService, private searchService: SearchService,
@ -33,10 +33,16 @@ export class PageSearch implements OnInit {
ngOnInit(): void { ngOnInit(): void {
this.boundRefresh = this.refresh.bind(this); this.boundRefresh = this.refresh.bind(this);
this.asc = this.route.snapshot.queryParamMap.get('asc') == 'true';
this.byDate = this.route.snapshot.queryParamMap.get('byDate') == 'true'; this.route.queryParams.subscribe({
this.searchType = this.route.snapshot.queryParamMap.get('type') || this.types[ 1 ]; next: (params) => {
this.searchFormControl.setValue(this.route.snapshot.queryParamMap.get('q')); this.asc = params['asc'] == 'true';
this.byDate = params['byDate'] == 'true';
this.searchType = params['type'] || this.types[1];
this.searchFormControl.setValue(params['q']);
}
})
this.searchFormControl.valueChanges.pipe( this.searchFormControl.valueChanges.pipe(
debounceTime(300)).subscribe((value: string) => { debounceTime(300)).subscribe((value: string) => {
this.refresh(); this.refresh();

2
src/app/pages/user/usercomments/usercomments.page.html
View File

@ -2,7 +2,7 @@
<mat-progress-bar *ngIf="!comments || !comments.content" mode="indeterminate"></mat-progress-bar> <mat-progress-bar *ngIf="!comments || !comments.content" mode="indeterminate"></mat-progress-bar>
<div *ngIf="comments && comments.content" fxLayout="column" fxFlexFill class="comments"> <div *ngIf="comments && comments.content" class="comments flex column fill">
<p>{{'user.commentsBy' | i18n}}<a routerLink="/u/{{username}}">{{username}}</a></p> <p>{{'user.commentsBy' | i18n}}<a routerLink="/u/{{username}}">{{username}}</a></p>
<ng-container *ngFor="let comment of comments.content; let i = index"> <ng-container *ngFor="let comment of comments.content; let i = index">
<mat-divider class="divider" *ngIf="i > 0"></mat-divider> <mat-divider class="divider" *ngIf="i > 0"></mat-divider>

4
src/app/pages/user/userentries/userentries.page.html
View File

@ -1,6 +1,6 @@
<div fxLayout="column" fxFlexFill> <div class="flex column fill">
<div class="container"> <div class="container">
<p>{{'user.entriesBy' | i18n}}<a routerLink="/u/{{username}}">{{username}}</a></p> <p>{{'user.entriesBy' | i18n}}<a routerLink="/u/{{username}}">{{username}}</a></p>
</div> </div>
<page-entries [fetch]="boundFetch" fxFlex="grow"></page-entries> <page-entries [fetch]="boundFetch" class="grow"></page-entries>
</div> </div>

4
src/app/pages/view/edit/edit.page.html
View File

@ -65,13 +65,13 @@
</section> </section>
</mat-card-content> </mat-card-content>
<mat-card-actions fxLayout="row wrap" fxFlexFill> <mat-card-actions class="flex wrap fill">
<button *ngIf="!working" mat-raised-button color="primary" [disabled]="form.invalid"> <button *ngIf="!working" mat-raised-button color="primary" [disabled]="form.invalid">
<mat-icon>save</mat-icon> {{ (view.id ? 'views.update' : 'views.create') | i18n}} <mat-icon>save</mat-icon> {{ (view.id ? 'views.update' : 'views.create') | i18n}}
</button> </button>
<a mat-button color="primary" routerLink="/v/{{view.name}}" *ngIf="view.id">{{ 'views.goTo' | <a mat-button color="primary" routerLink="/v/{{view.name}}" *ngIf="view.id">{{ 'views.goTo' |
i18n}}</a> i18n}}</a>
<span fxFlexOffset="auto" fxFlexOffset.xs="none"></span> <span class="spacer"></span>
<a mat-raised-button color="warn" *ngIf="!working && view.id" (click)="deleteView()"> <a mat-raised-button color="warn" *ngIf="!working && view.id" (click)="deleteView()">
<mat-icon>delete</mat-icon> {{ <mat-icon>delete</mat-icon> {{
'views.delete' | 'views.delete' |

5
src/app/ui/comments/comments.ui.html
View File

@ -1,9 +1,10 @@
<mat-progress-bar *ngIf="!comments || !comments.content" mode="indeterminate"></mat-progress-bar> <mat-progress-bar *ngIf="!comments || !comments.content" mode="indeterminate"></mat-progress-bar>
<div *ngIf="comments && comments.content" fxLayout="column" fxFlexFill class="comments"> <div *ngIf="comments && comments.content" class="comments flex column fill">
<ng-container *ngFor="let comment of comments.content; let i = index"> <ng-container *ngFor="let comment of comments.content; let i = index">
<mat-divider class="divider" *ngIf="i > 0"></mat-divider> <mat-divider class="divider" *ngIf="i > 0"></mat-divider>
<ui-comment class="comment" [comment]="comment" [change]="boundRefresh" [subcomments]="subcomments" [ignore]="ignore" [parentLink]="parentLink"></ui-comment> <ui-comment class="comment" [comment]="comment" [change]="boundRefresh" [subcomments]="subcomments"
[ignore]="ignore" [parentLink]="parentLink"></ui-comment>
</ng-container> </ng-container>
<mat-list *ngIf="comments.totalElements == 0 && !parent"> <mat-list *ngIf="comments.totalElements == 0 && !parent">

16
src/app/ui/entries/entries.ui.html
View File

@ -1,7 +1,7 @@
<mat-progress-bar *ngIf="!entries || !entries.content && !entries.error" mode="indeterminate"></mat-progress-bar> <mat-progress-bar *ngIf="!entries || !entries.content && !entries.error" mode="indeterminate"></mat-progress-bar>
<div *ngIf="entries && entries.error" fxLayout="column" fxFlexFill> <div *ngIf="entries && entries.error" class="flex column fill">
<mat-card class="accent box"> <mat-card class="accent box">
<mat-card-header> <mat-card-header>
<mat-card-title>{{ 'entries.error.' + entries.error.status | i18n}}</mat-card-title> <mat-card-title>{{ 'entries.error.' + entries.error.status | i18n}}</mat-card-title>
@ -15,8 +15,8 @@
</mat-card> </mat-card>
</div> </div>
<div *ngIf="entries" fxLayout="column" fxFlexFill> <div *ngIf="entries" class="flex column fill">
<mat-list *ngIf="entries.content"> <mat-list *ngIf="entries.content" class="scroll-container">
<ng-container *ngFor="let entry of entries.content; let i = index"> <ng-container *ngFor="let entry of entries.content; let i = index">
<mat-divider *ngIf="i > 0"></mat-divider> <mat-divider *ngIf="i > 0"></mat-divider>
<mat-list-item class="entry-item"> <mat-list-item class="entry-item">
@ -33,15 +33,15 @@
</mat-list-item> </mat-list-item>
</mat-list> </mat-list>
<span fxFlexOffset="auto"></span> <span class="spacer"></span>
<div class="mat-paginator" fxLayout="row" fxLayout.xs="column" fxLayoutAlign.xs="start start"> <div class="mat-mdc-paginator flex">
<div *ngIf="filter" class="filter-container"> <div *ngIf="filter" class="filter-container">
<a mat-icon-button mat-button (click)="filterOpen=!filterOpen" title="{{'entries.filter' | i18n}}" <a mat-icon-button (click)="filterOpen=!filterOpen" title="{{'entries.filter' | i18n}}"
[color]="filterOpen ? 'accent' : 'primary'"> [color]="filterOpen ? 'accent' : 'primary'">
<mat-icon>filter_alt</mat-icon> <mat-icon>filter_alt</mat-icon>
</a> </a>
<div *ngIf="filterOpen" fxLayout="row wrap"> <div *ngIf="filterOpen" class="flex">
<ui-tagspicker [(model)]="tags" placeholder="{{'entries.filter.tags' | i18n}}" [change]="boundTagsPickerChange"> <ui-tagspicker [(model)]="tags" placeholder="{{'entries.filter.tags' | i18n}}" [change]="boundTagsPickerChange">
</ui-tagspicker> </ui-tagspicker>
@ -87,7 +87,7 @@
</mat-form-field> </mat-form-field>
</div> </div>
</div> </div>
<span fxFlexOffset="auto" fxFlexOffset.xs="none"></span> <span class="spacer"></span>
<mat-paginator [pageSizeOptions]="pageSizeOptions" [pageIndex]="entries.number" [length]="entries.totalElements" <mat-paginator [pageSizeOptions]="pageSizeOptions" [pageIndex]="entries.number" [length]="entries.totalElements"
[pageSize]="entries.size" (page)="update && update($event)" showFirstLastButtons> [pageSize]="entries.size" (page)="update && update($event)" showFirstLastButtons>
</mat-paginator> </mat-paginator>

20
src/app/ui/main/main.ui.html
View File

@ -33,7 +33,7 @@
</mat-slide-toggle> </mat-slide-toggle>
</a> </a>
<mat-divider *ngIf="authenticated"></mat-divider> <mat-divider *ngIf="authenticated"></mat-divider>
<a *ngIf="authenticated" routerLink="/settings" routerLinkActive="active" mat-menu-item> <a *ngIf="authenticated" routerLink="/settings" routerLinkActive="active" mat-menu-item>
<mat-icon>tune</mat-icon> {{'settings' | i18n}} <mat-icon>tune</mat-icon> {{'settings' | i18n}}
</a> </a>
<mat-divider *ngIf="authenticated"></mat-divider> <mat-divider *ngIf="authenticated"></mat-divider>
@ -51,21 +51,31 @@
<ui-viewmenu *ngIf="authenticated"></ui-viewmenu> <ui-viewmenu *ngIf="authenticated"></ui-viewmenu>
<mat-divider *ngIf="moderator"></mat-divider> <mat-divider *ngIf="moderator"></mat-divider>
<a *ngIf="moderator" routerLink="/moderation/entries" routerLinkActive="active" mat-list-item> <a *ngIf="moderator" routerLink="/moderation/entries" routerLinkActive="active" mat-list-item>
<mat-icon>report</mat-icon> {{'moderation.entries' | i18n}} <mat-icon matListItemIcon>report</mat-icon>
<span>{{'moderation.entries' | i18n}}</span>
</a> </a>
<a *ngIf="moderator" routerLink="/moderation/comments" routerLinkActive="active" mat-list-item> <a *ngIf="moderator" routerLink="/moderation/comments" routerLinkActive="active" mat-list-item>
<mat-icon>feedback</mat-icon> {{'moderation.comments' | i18n}} <mat-icon matListItemIcon>feedback</mat-icon>
<span>{{'moderation.comments' | i18n}}</span>
</a> </a>
<mat-divider *ngIf="authenticated"></mat-divider> <mat-divider *ngIf="authenticated"></mat-divider>
<a *ngIf="authenticated" routerLink="/bookmarks" routerLinkActive="active" mat-list-item> <a *ngIf="authenticated" routerLink="/bookmarks" routerLinkActive="active" mat-list-item>
<mat-icon>bookmarks</mat-icon> {{'bookmarks' | i18n}} <mat-icon matListItemIcon>bookmarks</mat-icon>
<span>{{'bookmarks' | i18n}}</span>
</a> </a>
<mat-divider *ngIf="authenticated"></mat-divider> <mat-divider *ngIf="authenticated"></mat-divider>
<a (click)="openExternal('https://wiki.bstly.de/services/bstlboard#faq','_blank')" routerLinkActive="active" <a (click)="openExternal('https://wiki.bstly.de/services/bstlboard#faq','_blank')" routerLinkActive="active"
mat-list-item> mat-list-item>
<mat-icon>help</mat-icon> {{'page.faq' | i18n}} <mat-icon matListItemIcon>help</mat-icon>
<span>{{'page.faq' | i18n}}</span>
</a> </a>
</mat-nav-list> </mat-nav-list>
<mat-form-field *ngIf="authenticated">
<input matInput type="text" (change)="search($event.target && $event.target.value || undefined, $event)"
placeholder="{{'search' | i18n}}">
</mat-form-field>
<span class="spacer"></span> <span class="spacer"></span>
<mat-nav-list> <mat-nav-list>
<mat-divider></mat-divider> <mat-divider></mat-divider>

21
src/app/ui/main/main.ui.ts
View File

@ -13,7 +13,7 @@ import { SettingsService } from '../../services/settings.service';
@Component({ @Component({
selector: 'ui-main', selector: 'ui-main',
templateUrl: './main.ui.html', templateUrl: './main.ui.html',
styleUrls: [ './main.ui.scss' ] styleUrls: ['./main.ui.scss']
}) })
export class UiMain { export class UiMain {
@ -91,6 +91,13 @@ export class UiMain {
} }
} }
search(text, event) {
if (text) {
this.router.navigate(["search"], { queryParams: { q: text } });
}
event.target.value = '';
}
toggleDarkTheme() { toggleDarkTheme() {
this.darkTheme = !this.darkTheme; this.darkTheme = !this.darkTheme;
@ -112,7 +119,7 @@ export class UiMain {
logout() { logout() {
localStorage.removeItem("bstlboard.autologin"); localStorage.removeItem("bstlboard.autologin");
this.authService.logout().subscribe(data => { this.authService.logout().subscribe(data => {
this.router.navigate([ "" ]).then(() => { this.router.navigate([""]).then(() => {
window.location.reload(); window.location.reload();
}); });
}) })
@ -131,7 +138,7 @@ export class UiMain {
window.open(url, target); window.open(url, target);
} }
@HostListener('window:resize', [ '$event' ]) @HostListener('window:resize', ['$event'])
onResize(event) { onResize(event) {
if (event.target.innerWidth < 768) { if (event.target.innerWidth < 768) {
this.opened = false; this.opened = false;
@ -142,14 +149,14 @@ export class UiMain {
touchEvents(): void { touchEvents(): void {
fromEvent(document, 'touchstart').subscribe((event: TouchEvent) => { fromEvent(document, 'touchstart').subscribe((event: TouchEvent) => {
if (event.touches[ 0 ]) { if (event.touches[0]) {
this.touchStartX = event.touches[ 0 ].screenX; this.touchStartX = event.touches[0].screenX;
} }
}) })
fromEvent(document, 'touchmove').subscribe((event: TouchEvent) => { fromEvent(document, 'touchmove').subscribe((event: TouchEvent) => {
if (event.touches[ 0 ]) { if (event.touches[0]) {
this.touchX = event.touches[ 0 ].screenX; this.touchX = event.touches[0].screenX;
} }
}) })

8
src/app/ui/tags/tagspicker.ui.html
View File

@ -1,16 +1,16 @@
<mat-form-field> <mat-form-field>
<mat-chip-list #tagList> <mat-chip-grid #tagList>
<mat-chip *ngFor="let tag of tags" [removable]="true" (removed)="removeTag(tag)"> <mat-chip-row *ngFor="let tag of tags" [removable]="true" (removed)="removeTag(tag)">
<mat-icon inline="true">tag</mat-icon>{{tag}} <mat-icon inline="true">tag</mat-icon>{{tag}}
<button matChipRemove> <button matChipRemove>
<mat-icon>cancel</mat-icon> <mat-icon>cancel</mat-icon>
</button> </button>
</mat-chip> </mat-chip-row>
<input *ngIf="max == 0 || !tags || tags.length < max" #tagsInput placeholder="{{placeholder}}" <input *ngIf="max == 0 || !tags || tags.length < max" #tagsInput placeholder="{{placeholder}}"
[formControl]="searchFormControl" [matAutocomplete]="auto" [matChipInputFor]="tagList" [formControl]="searchFormControl" [matAutocomplete]="auto" [matChipInputFor]="tagList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes" (matChipInputTokenEnd)="addInputTag($event)"> [matChipInputSeparatorKeyCodes]="separatorKeysCodes" (matChipInputTokenEnd)="addInputTag($event)">
<mat-hint *ngIf="max > 1" align="end">{{tags && tags.length || 0}}/{{max}}</mat-hint> <mat-hint *ngIf="max > 1" align="end">{{tags && tags.length || 0}}/{{max}}</mat-hint>
</mat-chip-list> </mat-chip-grid>
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="addOptionTag($event)"> <mat-autocomplete #auto="matAutocomplete" (optionSelected)="addOptionTag($event)">
<mat-option *ngFor="let option of searchTags | async" [value]="option"> <mat-option *ngFor="let option of searchTags | async" [value]="option">
<mat-icon inline="true">tag</mat-icon>{{option}} <mat-icon inline="true">tag</mat-icon>{{option}}

15
src/app/ui/viewmenu/viewmenu.ui.html
View File

@ -1,16 +1,13 @@
<ng-container *ngIf="settings"> <ng-container *ngIf="settings">
<ng-container *ngFor="let view of views"> <ng-container *ngFor="let view of views">
<mat-divider *ngIf="view.divider"></mat-divider> <mat-divider *ngIf="view.divider"></mat-divider>
<mat-list-item> <a routerLink="/v/{{view.name}}" routerLinkActive="active" class="link" mat-list-item>
<a routerLink="/v/{{view.name}}" routerLinkActive="active" class="link"> <mat-icon matListItemIcon>{{'sorting.' + view.sorting + '.icon' | i18n}}</mat-icon>
<mat-icon>{{'sorting.' + view.sorting + '.icon' | i18n}}</mat-icon> {{'sorting.' + view.name | i18nEmpty}} <span>{{'sorting.' + view.name | i18nEmpty}}</span>
</a> <small color="primary" class="edit" matTooltip="{{'views.edit' | i18n}}" (click)="edit(view.name, $event)">
<small> <mat-icon inline="true">tune</mat-icon>
<a routerLink="/v/{{view.name}}/edit" matTooltip="{{'views.edit' | i18n}}" color="primary" class="edit">
<mat-icon inline="true">tune</mat-icon>
</a>
</small> </small>
</mat-list-item> </a>
</ng-container> </ng-container>
<mat-divider></mat-divider> <mat-divider></mat-divider>
<a *ngIf="views.length < settings.maxViews" routerLink="/v" routerLinkActive="active" mat-list-item <a *ngIf="views.length < settings.maxViews" routerLink="/v" routerLinkActive="active" mat-list-item

19
src/app/ui/viewmenu/viewmenu.ui.scss
View File

@ -2,23 +2,26 @@ mat-form-field {
display: block; display: block;
} }
mat-list-item { .link {
a.link {
flex-grow: 1;
}
a.edit { position: relative;
.edit {
display: none; display: none;
position: absolute;
right: 1em;
top: 50%;
transform: translateY(-50%);
} }
} }
mat-list-item:hover { .link:hover {
a.edit { .edit {
opacity: 0.6; opacity: 0.6;
display: inline-block; display: inline-block;
} }
a.edit:hover { .edit:hover {
opacity: 1; opacity: 1;
} }
} }

11
src/app/ui/viewmenu/viewmenu.ui.ts
View File

@ -1,4 +1,5 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Subscription } from 'rxjs'; import { Subscription } from 'rxjs';
import { SettingsService } from 'src/app/services/settings.service'; import { SettingsService } from 'src/app/services/settings.service';
import { ViewService } from 'src/app/services/view.service'; import { ViewService } from 'src/app/services/view.service';
@ -6,7 +7,7 @@ import { ViewService } from 'src/app/services/view.service';
@Component({ @Component({
selector: 'ui-viewmenu', selector: 'ui-viewmenu',
templateUrl: 'viewmenu.ui.html', templateUrl: 'viewmenu.ui.html',
styleUrls: [ './viewmenu.ui.scss' ] styleUrls: ['./viewmenu.ui.scss']
}) })
export class UiViewMenu implements OnInit { export class UiViewMenu implements OnInit {
@ -15,7 +16,7 @@ export class UiViewMenu implements OnInit {
settings: any; settings: any;
settingsSubscription: Subscription; settingsSubscription: Subscription;
constructor(private viewService: ViewService, private settingsService: SettingsService) { constructor(private viewService: ViewService, private settingsService: SettingsService, private router: Router) {
} }
ngOnInit(): void { ngOnInit(): void {
@ -28,5 +29,11 @@ export class UiViewMenu implements OnInit {
}) })
} }
edit(name, event) {
this.router.navigateByUrl('/v/' + name + '/edit');
event.preventDefault();
event.stopPropagation();
}
} }

43
src/styles.scss
View File

@ -15,15 +15,15 @@
// (imported above). For each palette, you can optionally specify a default, lighter, and darker // (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/ // hue. Available color palettes: https://material.io/design/color/
$light-theme: mat.define-light-theme((color: (primary: $light-primary, $light-theme: mat.define-light-theme((color: (primary: $light-primary,
accent: $light-accent, accent: $light-accent,
warn: $light-warn, warn: $light-warn,
))); )));
// Define an alternate dark theme. // Define an alternate dark theme.
$dark-theme: mat.define-dark-theme((color: (primary: $dark-primary, $dark-theme: mat.define-dark-theme((color: (primary: $dark-primary,
accent: $light-accent, accent: $light-accent,
warn: $light-warn, warn: $light-warn,
))); )));
@ -50,6 +50,7 @@ $dark-theme: mat.define-dark-theme((color: (primary: $dark-primary,
a { a {
color: $primary; color: $primary;
text-decoration: none;
} }
.material-icons { .material-icons {
@ -82,7 +83,8 @@ body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
} }
app-root, ui-main { app-root,
ui-main {
height: 100%; height: 100%;
max-height: 100%; max-height: 100%;
display: flex; display: flex;
@ -148,6 +150,33 @@ qrcode canvas {
max-width: 400px !important; max-width: 400px !important;
} }
.flex {
display: flex !important;
&.column {
flex-direction: column;
}
&.wrap {
flex-wrap: wrap;
}
&.fill {
height: 100%;
min-height: 100%;
min-width: 100%;
width: 100%;
}
.grow {
flex-grow: 1;
}
}
.scroll-container {
overflow: auto;
}
.spacer { .spacer {
flex: 1 1 auto; flex: 1 1 auto;
} }

6
tsconfig.json
View File

@ -10,10 +10,10 @@
"experimentalDecorators": true, "experimentalDecorators": true,
"moduleResolution": "node", "moduleResolution": "node",
"importHelpers": true, "importHelpers": true,
"target": "es2015", "target": "es2022",
"module": "es2020", "module": "es2022",
"lib": [ "lib": [
"es2018", "es2022",
"dom" "dom"
] ]
} }