paradizelost/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-07-28 18:24:38 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix: handle overflowing dropdowns on mobile (#7758)

Browse Source 
See https://github.com/ng-bootstrap/ng-bootstrap/pull/4760
This commit is contained in:
shamoon
2024-09-23 10:29:37 -07:00
committed by GitHub
parent 3aba68c09f
commit 870d6ee782
6 changed files with 56 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.html
View File

@@ -1,4 +1,4 @@
<div class="btn-group w-100" ngbDropdown role="group">
<div class="btn-group w-100" ngbDropdown role="group" [popperOptions]="popperOptions">
<button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="createdDateBefore || createdDateAfter ? 'btn-primary' : 'btn-outline-primary'" [disabled]="disabled">
<i-bs width="1em" height="1em" name="calendar-event-fill"></i-bs>
<div class="d-none d-sm-inline">&nbsp;{{title}}</div>

3
src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.ts
View File

@@ -11,6 +11,7 @@ import { Subject, Subscription } from 'rxjs'
import { debounceTime } from 'rxjs/operators'
import { SettingsService } from 'src/app/services/settings.service'
import { ISODateAdapter } from 'src/app/utils/ngb-iso-date-adapter'
import { popperOptionsReenablePreventOverflow } from 'src/app/utils/popper-options'
export interface DateSelection {
createdBefore?: string
@@ -35,6 +36,8 @@ export enum RelativeDate {
providers: [{ provide: NgbDateAdapter, useClass: ISODateAdapter }],
})
export class DatesDropdownComponent implements OnInit, OnDestroy {
public popperOptions = popperOptionsReenablePreventOverflow
constructor(settings: SettingsService) {
this.datePlaceHolder = settings.getLocalizedDateInputFormat()
}

2
src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
View File

@@ -1,4 +1,4 @@
<div class="btn-group w-100" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)" #dropdown="ngbDropdown" (keydown)="listKeyDown($event)">
<div class="btn-group w-100" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)" #dropdown="ngbDropdown" (keydown)="listKeyDown($event)" [popperOptions]="popperOptions">
<button class="btn btn-sm" id="dropdown_{{name}}" ngbDropdownToggle [ngClass]="!editing && selectionModel.selectionSize() > 0 ? 'btn-primary' : 'btn-outline-primary'" [disabled]="disabled">
<i-bs name="{{icon}}"></i-bs>
<div class="d-none d-sm-inline">&nbsp;{{title}}</div>

3
src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts
View File

@@ -16,6 +16,7 @@ import { Subject, filter, take, takeUntil } from 'rxjs'
import { SelectionDataItem } from 'src/app/services/rest/document.service'
import { ObjectWithPermissions } from 'src/app/data/object-with-permissions'
import { HotKeyService } from 'src/app/services/hot-key.service'
import { popperOptionsReenablePreventOverflow } from 'src/app/utils/popper-options'
export interface ChangedItems {
itemsToAdd: MatchingModel[]
@@ -330,6 +331,8 @@ export class FilterableDropdownComponent implements OnDestroy, OnInit {
@ViewChild('dropdown') dropdown: NgbDropdown
@ViewChild('buttonItems') buttonItems: ElementRef
public popperOptions = popperOptionsReenablePreventOverflow
filterText: string
@Input()