From e744b8a76cf1265ab2a287d67b36c5bd5bb9922c Mon Sep 17 00:00:00 2001
From: OZGCloud <ozgcloud@mgm-tp.com>
Date: Tue, 28 Sep 2021 14:48:03 +0200
Subject: [PATCH] OZG-643 scrolling via keyboard
---
.../apps/goofy/src/app/app.component.html | 2 +-
.../apps/goofy/src/app/app.component.scss | 17 ++++++++++++++++-
.../apps/goofy/src/app/app.component.ts | 6 +++++-
.../apps/goofy/src/styles/layout/_main.scss | 13 +++++++++++--
.../lib/build-info/build-info.component.scss | 1 +
.../header/header.component.scss | 1 +
.../lib/navigation/navigation.component.scss | 5 +++++
.../postfach-page/postfach-page.component.html | 4 ++--
.../subnavigation/subnavigation.component.scss | 6 ++----
.../vorgang-detail-area.component.scss | 1 +
.../vorgang-detail-page.component.html | 4 ++--
.../vorgang-list-page.component.html | 2 +-
.../wiedervorlage-page.component.html | 4 ++--
13 files changed, 50 insertions(+), 16 deletions(-)
diff --git a/goofy-client/apps/goofy/src/app/app.component.html b/goofy-client/apps/goofy/src/app/app.component.html
index 0e1b8beb00..d5df7d2504 100644
--- a/goofy-client/apps/goofy/src/app/app.component.html
+++ b/goofy-client/apps/goofy/src/app/app.component.html
@@ -5,7 +5,7 @@
<div class="container">
<goofy-client-navigation></goofy-client-navigation>
- <main><router-outlet></router-outlet></main>
+ <main [ngClass]="{ small: navigationCollapse$ | async }"><router-outlet></router-outlet></main>
<section>
<goofy-client-build-info *ngIf="apiRoot.resource" [apiRoot]="apiRoot.resource"></goofy-client-build-info>
</section>
diff --git a/goofy-client/apps/goofy/src/app/app.component.scss b/goofy-client/apps/goofy/src/app/app.component.scss
index de26de1a5d..5d42337c5f 100644
--- a/goofy-client/apps/goofy/src/app/app.component.scss
+++ b/goofy-client/apps/goofy/src/app/app.component.scss
@@ -13,17 +13,32 @@
justify-content: space-between;
align-items: flex-start;
flex-grow: 1;
+ margin-top: 64px;
}
main {
position: relative;
flex-grow: 1;
- overflow-x: hidden;
+ max-width: calc(100vw - (40px + 256px));
+ //overflow-x: hidden;
+ transition: max-width 0.3s ease-in-out;
+ transition-delay: 0s;
+ background-color: #fff;
+
+ &.small {
+ max-width: calc(100vw - (40px + 72px));
+ transition-delay: 0.2s;
+ }
}
section {
width: 40px;
flex-shrink: 0;
+ position: sticky;
+ right: 0;
+ top: 64px;
+ z-index: 1;
+ height: calc(100vh - 64px);
@include media('>largeDesktop') {
//width: 360px;
diff --git a/goofy-client/apps/goofy/src/app/app.component.ts b/goofy-client/apps/goofy/src/app/app.component.ts
index 7453c803e7..bbd18e5366 100644
--- a/goofy-client/apps/goofy/src/app/app.component.ts
+++ b/goofy-client/apps/goofy/src/app/app.component.ts
@@ -9,6 +9,7 @@ import { AuthConfig, OAuthService } from 'angular-oauth2-oidc';
import { JwksValidationHandler } from 'angular-oauth2-oidc-jwks';
import { Environment } from 'libs/environment-shared/src/lib/environment.model';
import { Observable } from 'rxjs';
+import { AppService } from '@goofy-client/app-shared';
@Component({
selector: 'goofy-client-root',
@@ -25,14 +26,17 @@ export class AppComponent implements OnInit {
title = 'goofy';
apiRoot$: Observable<StateResource<ApiRootResource>>;
+ navigationCollapse$: Observable<boolean>;
constructor(
private apiRootService: ApiRootService,
private iconService: IconService,
private oAuthService: OAuthService,
- @Inject(ENVIRONMENT_CONFIG) private envConfig: Environment,
+ private appService: AppService,
+ @Inject(ENVIRONMENT_CONFIG) private envConfig: Environment
) {
this.iconService.registerIcons();
+ this.navigationCollapse$ = this.appService.getNavigationCollapse();
}
ngOnInit(): void {
diff --git a/goofy-client/apps/goofy/src/styles/layout/_main.scss b/goofy-client/apps/goofy/src/styles/layout/_main.scss
index 266cff8f1d..34648ec9cc 100644
--- a/goofy-client/apps/goofy/src/styles/layout/_main.scss
+++ b/goofy-client/apps/goofy/src/styles/layout/_main.scss
@@ -5,8 +5,17 @@
overflow: auto;
padding-bottom: 40px;
outline: 0;
+
+ &--full {
+ //background-color: #fff;
+ box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.08), inset 1px 0 0 rgba(0, 0, 0, 0.08), inset -1px 0 0 rgba(0, 0, 0, 0.08);
+ position: relative;
+ }
}
-body.dark .l-scroll-area {
- background-color: rgb(40, 40, 40);
+body.dark {
+ .l-scroll-area,
+ .l-scroll-area--full {
+ background-color: rgb(40, 40, 40);
+ }
}
diff --git a/goofy-client/libs/navigation/src/lib/build-info/build-info.component.scss b/goofy-client/libs/navigation/src/lib/build-info/build-info.component.scss
index 454bef4b83..206a83d14d 100644
--- a/goofy-client/libs/navigation/src/lib/build-info/build-info.component.scss
+++ b/goofy-client/libs/navigation/src/lib/build-info/build-info.component.scss
@@ -19,4 +19,5 @@
p {
margin: 0;
line-height: 1;
+ white-space: nowrap;
}
diff --git a/goofy-client/libs/navigation/src/lib/header-container/header/header.component.scss b/goofy-client/libs/navigation/src/lib/header-container/header/header.component.scss
index fc9c594f7e..281bcac46a 100644
--- a/goofy-client/libs/navigation/src/lib/header-container/header/header.component.scss
+++ b/goofy-client/libs/navigation/src/lib/header-container/header/header.component.scss
@@ -12,6 +12,7 @@ header {
display: flex;
align-items: center;
justify-content: space-between;
+ position: fixed;
.title {
font-size: 24px;
diff --git a/goofy-client/libs/navigation/src/lib/navigation/navigation.component.scss b/goofy-client/libs/navigation/src/lib/navigation/navigation.component.scss
index f129e02825..e99d86ce1d 100644
--- a/goofy-client/libs/navigation/src/lib/navigation/navigation.component.scss
+++ b/goofy-client/libs/navigation/src/lib/navigation/navigation.component.scss
@@ -2,6 +2,11 @@
@use '~@angular/material' as mat;
@import "variables";
+:host {
+ position: sticky;
+ top: 64px;
+}
+
nav {
width: 256px;
background-color: inherit;
diff --git a/goofy-client/libs/postfach/src/lib/postfach-page-container/postfach-page/postfach-page.component.html b/goofy-client/libs/postfach/src/lib/postfach-page-container/postfach-page/postfach-page.component.html
index 099a4892a0..be8ab61299 100644
--- a/goofy-client/libs/postfach/src/lib/postfach-page-container/postfach-page/postfach-page.component.html
+++ b/goofy-client/libs/postfach/src/lib/postfach-page-container/postfach-page/postfach-page.component.html
@@ -1,10 +1,10 @@
-<goofy-client-subnavigation>
+<goofy-client-subnavigation class="mat-app-background">
<a routerLink="../" mat-icon-button data-test-id="back-button" class="back-button" aria-label="back button with arrow icon" matTooltip="zurück zur Detailseite">
<mat-icon>arrow_back</mat-icon>
</a>
</goofy-client-subnavigation>
-<div class="l-scroll-area" tabindex="0" autofocus>
+<div class="l-scroll-area--full">
<goofy-client-vorgang-in-postfach-breadcrumb-container></goofy-client-vorgang-in-postfach-breadcrumb-container>
<goofy-client-postfach-page-mail-list [postfachMailListStateResource]="postfachMailListStateResource" data-test-id="postfach-mail-list"></goofy-client-postfach-page-mail-list>
</div>
diff --git a/goofy-client/libs/ui/src/lib/ui/subnavigation/subnavigation.component.scss b/goofy-client/libs/ui/src/lib/ui/subnavigation/subnavigation.component.scss
index 0ec3a5b02c..f2831aab4a 100644
--- a/goofy-client/libs/ui/src/lib/ui/subnavigation/subnavigation.component.scss
+++ b/goofy-client/libs/ui/src/lib/ui/subnavigation/subnavigation.component.scss
@@ -2,9 +2,8 @@
:host {
position: sticky;
- top: 0;
+ top: 64px;
height: 48px;
- background-color: inherit;
width: 100%;
z-index: 2;
box-shadow: $shadow-bottom;
@@ -13,9 +12,8 @@
align-items: center;
padding: 4px 16px;
-
&.shadow {
- overflow-x: hidden;
+ //overflow-x: hidden;
box-shadow: $shadow-bottom, 0 2px 2px -2px rgba(#000, 0.16);
}
}
diff --git a/goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-area.component.scss b/goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-area.component.scss
index 8295aadf7f..3b2a0f7fae 100644
--- a/goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-area.component.scss
+++ b/goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-area.component.scss
@@ -4,6 +4,7 @@
:host {
position: relative;
display: block;
+ background-color: inherit;
}
.header-spinner {
diff --git a/goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-page.component.html b/goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-page.component.html
index f79e4f209b..98eab02716 100644
--- a/goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-page.component.html
+++ b/goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-page.component.html
@@ -1,13 +1,13 @@
<ng-container *ngIf="vorgangStateResource$ | async as vorgangStateResource">
- <goofy-client-subnavigation>
+ <goofy-client-subnavigation class="mat-app-background">
<a routerLink="/" mat-icon-button data-test-id="back-button" class="back-button" aria-label="back button with arrow icon" matTooltip="zurück zur Vorgangsliste">
<mat-icon>arrow_back</mat-icon>
</a>
<goofy-client-vorgang-detail-action-buttons [vorgangWithEingang]="vorgangStateResource.resource"></goofy-client-vorgang-detail-action-buttons>
</goofy-client-subnavigation>
- <div class="l-scroll-area" tabindex="0" autofocus>
+ <div class="l-scroll-area--full">
<goofy-client-vorgang-detail-area [vorgangStateResource]="vorgangStateResource"></goofy-client-vorgang-detail-area>
</div>
diff --git a/goofy-client/libs/vorgang/src/lib/vorgang-list-page/vorgang-list-page.component.html b/goofy-client/libs/vorgang/src/lib/vorgang-list-page/vorgang-list-page.component.html
index 3964469edd..2bf1a8ddb3 100644
--- a/goofy-client/libs/vorgang/src/lib/vorgang-list-page/vorgang-list-page.component.html
+++ b/goofy-client/libs/vorgang/src/lib/vorgang-list-page/vorgang-list-page.component.html
@@ -1,2 +1,2 @@
-<goofy-client-subnavigation></goofy-client-subnavigation>
+<goofy-client-subnavigation class="mat-app-background"></goofy-client-subnavigation>
<goofy-client-vorgang-list-container></goofy-client-vorgang-list-container>
diff --git a/goofy-client/libs/wiedervorlage/src/lib/wiedervorlage-page-container/wiedervorlage-page/wiedervorlage-page.component.html b/goofy-client/libs/wiedervorlage/src/lib/wiedervorlage-page-container/wiedervorlage-page/wiedervorlage-page.component.html
index 267b6f94f5..878fbd3db9 100644
--- a/goofy-client/libs/wiedervorlage/src/lib/wiedervorlage-page-container/wiedervorlage-page/wiedervorlage-page.component.html
+++ b/goofy-client/libs/wiedervorlage/src/lib/wiedervorlage-page-container/wiedervorlage-page/wiedervorlage-page.component.html
@@ -1,11 +1,11 @@
<goofy-client-spinner [stateResource]="wiedervorlageStateResource">
- <goofy-client-subnavigation data-test-id="subnavigation-wiedervorlage">
+ <goofy-client-subnavigation data-test-id="subnavigation-wiedervorlage" class="mat-app-background">
<goofy-client-wiedervorlage-action-buttons [wiedervorlage]="wiedervorlageStateResource.resource">
</goofy-client-wiedervorlage-action-buttons>
</goofy-client-subnavigation>
- <div class="l-scroll-area" tabindex="0" autofocus>
+ <div class="l-scroll-area--full">
<div class="wrapper">
<goofy-client-breadcrumb [vorgang]="vorgang" [wiedervorlage]="wiedervorlageStateResource.resource">
</goofy-client-breadcrumb>
--
GitLab