sxhundred/ISA-Frontend
1
0
Fork 0
mirror of https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend synced 2025-12-28 22:42:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

[HIMA-751] Perfect scrollbar package introduced in order to properly display scrollbar on ios devices

Browse Source
This commit is contained in:
Mikuta Aleksandras
2020-04-03 09:09:28 +02:00
parent f7804645c8
commit 0e8b095973
18 changed files with 60 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/sales/src/app/app-routing.module.ts
View File

@@ -4,7 +4,6 @@ import { LogInComponent } from './components/log-in/log-in.component';
import { DashboardComponent } from './modules/dashboard/pages/dashboard.component';
const routes: Routes = [
// { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
{
path: 'login',
children: [
@@ -12,7 +11,6 @@ const routes: Routes = [
{ path: ':token', component: LogInComponent }
]
},
//{ path: '', component: DashboardComponent },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'product', loadChildren: './modules/product/product.module#ProductModule' },
{ path: 'customer', loadChildren: './modules/customer/customer.module#CustomerModule' },

3
apps/sales/src/app/modules/customer/components/customer-orders-card/customer-orders-card.component.html
View File

@@ -3,7 +3,8 @@
<span>Bestellungen</span>
</div>
<div class="fixed-card-container order-container scrollbar-visible">
<div class="fixed-card-container order-container"
[perfectScrollbar]="{minScrollbarLength: 20}">
<div class="fixed-header-description">
<span>Übersicht aller offenen und früheren Bestellungen</span>
</div>

2
apps/sales/src/app/modules/customer/customer.module.ts
View File

@@ -39,6 +39,7 @@ import { ShelfModule } from '../shelf/shelf.module';
import { COMPONENTS, EXPORT_COMPONENTS } from './components';
import { CustomerSearchEmptyModalComponent } from './components/customer-search-empty-modal/customer-search-empty-modal.component';
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
@NgModule({
imports: [
@@ -59,6 +60,7 @@ import { CustomerSearchEmptyModalComponent } from './components/customer-search-
CheckboxModule,
DropdownModule,
DeleteDropdownFixedModule,
PerfectScrollbarModule,
IconModule,
CustomerRoutingModule,
SelectModule,

3
apps/sales/src/app/modules/customer/pages/customer-search-result/customer-search-result.component.html
View File

@@ -39,7 +39,8 @@
<app-button (action)="redirectToCustomerCreate()">Neue Kundendaten erfassen</app-button>
</div>
</div>
<cdk-virtual-scroll-viewport itemSize="144" class="scrollbar-visible" #viewport>
<cdk-virtual-scroll-viewport itemSize="144" #viewport
[perfectScrollbar]="{minScrollbarLength: 20}">
<div *cdkVirtualFor="let customer of ds; let i = index; let last = last" class="virtual-item">
<div class="user">
<div class="user-info-container" *ngIf="customer != null; else loadingComponent" (click)="details(customer, i)">

2
apps/sales/src/app/modules/goods-in/goods-in.module.ts
View File

@@ -21,6 +21,7 @@ import { SharedModule } from '../../shared/shared.module';
import { GoodsInOrderTagComponent } from './components/goods-in-order-tag/goods-in-order-tag.component';
import { GoodsInArticleDetailsComponent } from './components/goods-in-article-details/goods-in-article-details.component';
import { FormsModule } from '@angular/forms';
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
@NgModule({
declarations: [
@@ -37,6 +38,7 @@ import { FormsModule } from '@angular/forms';
GoodsInRoutingModule,
SearchInputModule,
ScrollingModule,
PerfectScrollbarModule,
LoadingModule,
SharedModule,
IconModule,

3
apps/sales/src/app/modules/goods-in/pages/goods-in-search-results/goods-in-search-results.component.html
View File

@@ -1,6 +1,7 @@
<div class="result-container">
<ng-container>
<cdk-virtual-scroll-viewport itemSize="190" class="scrollbar-visible" #scroller>
<cdk-virtual-scroll-viewport itemSize="190" #scroller
[perfectScrollbar]="{minScrollbarLength: 20}">
<div *cdkVirtualFor="let order of ds; let first = first; let last = last; let index = index">
<ng-container *ngIf="order != null; else loadingComponent">
<app-goods-in-order-card

4
apps/sales/src/app/modules/product/pages/product-results/product-results.component.html
View File

@@ -25,8 +25,8 @@
<cdk-virtual-scroll-viewport
autosize
#scroller
class="scrollbar-visible"
[ngClass]="{ 'cdk-stop-scrolling': scrollDisabled }">
[ngClass]="{ 'cdk-stop-scrolling': scrollDisabled }"
[perfectScrollbar]="{minScrollbarLength: 20}">
<ng-container *cdkVirtualFor="let product of ds; let i = index; let last = last">
<div class="product-item">
<app-product-card

3
apps/sales/src/app/modules/product/product.module.ts
View File

@@ -6,7 +6,7 @@ import { CommonModule } from '@angular/common';
import { ProductCardComponent } from './components/product-card/product-card.component';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { ScrollingModule as ExperimentalScrollingModule } from '@angular/cdk-experimental/scrolling';
// import { ScrollingModule as ExperimentalScrollingModule } from '@angular/cdk-experimental/scrolling';
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { LoadingModule, PhotoGalleryModule, CardModule, SearchInputModule, DeleteDropdownModule } from '@libs/ui';
import { SharedModule } from './../../shared/shared.module';
import { ModalModule, ButtonModule, InputModule, DropdownModule, IconModule } from '@libs/ui';
@@ -45,6 +45,7 @@ import { SmallDoubleChoiceSwitchModule } from '@libs/ui/lib/small-double-choice-
CommonModule,
ScrollingModule,
ExperimentalScrollingModule,
PerfectScrollbarModule,
LoadingModule,
ModalModule,
ButtonModule,

3
apps/sales/src/app/modules/remission/pages/remission-list-create/remission-list-create.component.html
View File

@@ -1,7 +1,8 @@
<div
#remissionListContainer
id="remission-list-container"
class="remission-list-container scrollbar-visible"
class="remission-list-container"
[perfectScrollbar]="{minScrollbarLength: 20}"
(scroll)="onScroll()"
>
<div class="headers" *ngIf="resourceTypeSwitch">

1
apps/sales/src/app/modules/remission/pages/remission-list-create/remission-list-create.component.scss
View File

@@ -1,4 +1,5 @@
.remission-list-container {
position: relative;
height: calc(100% - 30px);
overflow-y: auto;
overflow-x: hidden;

3
apps/sales/src/app/modules/remission/pages/remission-list-started/remission-list-started.component.html
View File

@@ -25,6 +25,7 @@
id="remission-list-container"
#remissionListContainer
class="remission-list-container"
[perfectScrollbar]="{minScrollbarLength: 20}"
(scroll)="scrollHandler($event)"
*ngIf="!shippingDocumentCreationPage && loaded"
>
@@ -127,7 +128,7 @@
[fetchLastProducts$]="fetchLastProducts$"
[hits]="remissionListHits"
started="true"
(fullListLoaded)="fullListLoaded(true)"
(fullListLoaded)="fullListLoaded()"
#remissionList
></app-remission-list>
</div>

1
apps/sales/src/app/modules/remission/pages/remission-list-started/remission-list-started.component.scss
View File

@@ -1,4 +1,5 @@
.remission-list-container {
position: relative;
height: calc(100% - 20px);
overflow: scroll;
padding-bottom: 10px;

2
apps/sales/src/app/modules/remission/remission-client.module.ts
View File

@@ -67,6 +67,7 @@ import { RemissionsOverviewCardContentComponent } from './components/remissions-
import { RemissionDetailsComponent } from './pages/remission-details/remission-details.component';
import { RemissionDetailsProductComponent } from './components/remission-details-product/remission-details-product.component';
import { RemissionDetailsPrimaryCtaComponent } from './components/remission-details-primary-cta/remission-details-primary-cta.component';
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
@NgModule({
declarations: [
@@ -109,6 +110,7 @@ import { RemissionDetailsPrimaryCtaComponent } from './components/remission-deta
RemissionClientRoutingModule,
DoubleChoiceSwitchModule,
ProgressBarModule,
PerfectScrollbarModule,
SmallDoubleChoiceSwitchModule,
IconModule,
ButtonModule,

3
apps/sales/src/app/modules/shelf/pages/shelf-search-results/shelf-search-results.component.html
View File

@@ -1,6 +1,7 @@
<div class="result-container">
<ng-container>
<cdk-virtual-scroll-viewport itemSize="180" class="scrollbar-visible" #scroller>
<cdk-virtual-scroll-viewport itemSize="300" #scroller
[perfectScrollbar]="{minScrollbarLength: 20}">
<div *cdkVirtualFor="let order of ds; let last = last; let index = index">
<app-shelf-customer-order
*ngIf="order != null; else loadingComponent"

2
apps/sales/src/app/modules/shelf/shelf.module.ts
View File

@@ -27,6 +27,7 @@ import { OrderLoadingComponent } from './components/order-loading/order-loading.
import { ShelfEditOrderComponent } from './pages/shelf-edit-order/shelf-edit-order.component';
import { OrderItemEditComponent } from './components/order-item-edit/order-item-edit.component';
import { OrderOverviewEditComponent } from './components/order-overview-edit/order-overview-edit.component';
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
@NgModule({
declarations: [
@@ -56,6 +57,7 @@ import { OrderOverviewEditComponent } from './components/order-overview-edit/ord
CollectingShelfScannerModule,
SharedModule,
ScrollingModule,
PerfectScrollbarModule,
CardModule,
DropdownModule,
SearchInputModule,

7
apps/sales/src/styles.scss
View File

@@ -1,10 +1,9 @@
:not(.scrollbar-visible)::-webkit-scrollbar {
@import '~perfect-scrollbar/css/perfect-scrollbar.css';
::-webkit-scrollbar {
width: 0; // remove scrollbar space
background: transparent; // optional: just make scrollbar invisible */
}
.scrollbar-visible {
-webkit-overflow-scrolling: touch;
}
body {
font-family: 'Open Sans';

60
package-lock.json generated
View File

@@ -4473,8 +4473,7 @@
},
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"optional": true
"bundled": true
},
"aproba": {
"version": "1.2.0",
@@ -4492,13 +4491,11 @@
},
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"optional": true
"bundled": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@@ -4511,18 +4508,15 @@
},
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"optional": true
"bundled": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"optional": true
"bundled": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"optional": true
"bundled": true
},
"core-util-is": {
"version": "1.0.2",
@@ -4625,8 +4619,7 @@
},
"inherits": {
"version": "2.0.3",
"bundled": true,
"optional": true
"bundled": true
},
"ini": {
"version": "1.3.5",
@@ -4636,7 +4629,6 @@
"is-fullwidth-code-point": {
"version": "1.0.0",
"bundled": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@@ -4649,20 +4641,17 @@
"minimatch": {
"version": "3.0.4",
"bundled": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
},
"minimist": {
"version": "0.0.8",
"bundled": true,
"optional": true
"bundled": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@@ -4679,7 +4668,6 @@
"mkdirp": {
"version": "0.5.1",
"bundled": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@@ -4752,8 +4740,7 @@
},
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"optional": true
"bundled": true
},
"object-assign": {
"version": "4.1.1",
@@ -4763,7 +4750,6 @@
"once": {
"version": "1.4.0",
"bundled": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@@ -4839,8 +4825,7 @@
},
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"optional": true
"bundled": true
},
"safer-buffer": {
"version": "2.1.2",
@@ -4870,7 +4855,6 @@
"string-width": {
"version": "1.0.2",
"bundled": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@@ -4888,7 +4872,6 @@
"strip-ansi": {
"version": "3.0.1",
"bundled": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@@ -4927,13 +4910,11 @@
},
"wrappy": {
"version": "1.0.2",
"bundled": true,
"optional": true
"bundled": true
},
"yallist": {
"version": "3.0.3",
"bundled": true,
"optional": true
"bundled": true
}
}
},
@@ -7548,6 +7529,15 @@
"opencollective-postinstall": "^2.0.2"
}
},
"ngx-perfect-scrollbar": {
"version": "7.2.1",
"resolved": "https://pkgs.dev.azure.com/hugendubel/_packaging/hugendubel/npm/registry/ngx-perfect-scrollbar/-/ngx-perfect-scrollbar-7.2.1.tgz",
"integrity": "sha1-csu7prx1tINvoDAHYNLWntQdJBw=",
"requires": {
"perfect-scrollbar": "^1.4.0",
"resize-observer-polyfill": "^1.5.0"
}
},
"ngx-toggle-switch": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/ngx-toggle-switch/-/ngx-toggle-switch-2.0.5.tgz",
@@ -8407,6 +8397,11 @@
"sha.js": "^2.4.8"
}
},
"perfect-scrollbar": {
"version": "1.5.0",
"resolved": "https://pkgs.dev.azure.com/hugendubel/_packaging/hugendubel/npm/registry/perfect-scrollbar/-/perfect-scrollbar-1.5.0.tgz",
"integrity": "sha1-gh0iTtj/YZkMI/JttjBIzcdba4M="
},
"performance-now": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
@@ -9206,6 +9201,11 @@
"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
"dev": true
},
"resize-observer-polyfill": {
"version": "1.5.1",
"resolved": "https://pkgs.dev.azure.com/hugendubel/_packaging/hugendubel/npm/registry/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
"integrity": "sha1-DpAg3T0hAkRY1OvSfiPkAmmBBGQ="
},
"resolve": {
"version": "1.1.7",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz",

1
package.json
View File

@@ -52,6 +52,7 @@
"ng-circle-progress": "^1.4.0",
"ng-connection-service": "^1.0.4",
"ngx-infinite-scroll": "^7.2.0",
"ngx-perfect-scrollbar": "^7.2.1",
"ngx-toggle-switch": "^2.0.5",
"node-sass": "^4.12.0",
"rxjs": "~6.4.0",