Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix issue with the admin sidebar scrollbar on Firefox/Windows #2976

Merged
merged 2 commits into from
Apr 30, 2024
Merged

Fix issue with the admin sidebar scrollbar on Firefox/Windows #2976

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f8194ab
[DURACOM-253] Detect browser and apply browser class
davide-negretti Apr 22, 2024
44464de
[DURACOM-253] Fix scrollbar issue on Firefox on Windows
davide-negretti Apr 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions src/app/admin/admin-sidebar/admin-sidebar.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,3 +138,9 @@
}
}
}

::ng-deep {
.browser-firefox-windows {
--ds-dark-scrollbar-width: 20px;
}
}
2 changes: 1 addition & 1 deletion src/app/root/root.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
{{ 'root.skip-to-content' | translate }}
</button>

<div class="outer-wrapper" [class.d-none]="shouldShowFullscreenLoader" [@slideSidebarPadding]="{
<div class="outer-wrapper" [class.d-none]="shouldShowFullscreenLoader" [ngClass]="browserOsClasses.asObservable() | async" [@slideSidebarPadding]="{
value: ((isSidebarVisible$ | async) !== true ? 'hidden' : (slideSidebarOver$ | async) ? 'unpinned' : 'pinned'),
params: { collapsedWidth: (collapsedSidebarWidth$ | async), expandedWidth: (expandedSidebarWidth$ | async) }
}">
Expand Down
55 changes: 54 additions & 1 deletion src/app/root/root.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import {
AsyncPipe,
NgClass,
NgIf,
} from '@angular/common';
import {
Component,
Inject,
Input,
OnInit,
} from '@angular/core';
Expand All @@ -13,6 +15,7 @@
} from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import {
BehaviorSubject,
combineLatest as combineLatestObservable,
Observable,
of,
Expand All @@ -30,6 +33,10 @@
import { ThemedAdminSidebarComponent } from '../admin/admin-sidebar/themed-admin-sidebar.component';
import { getPageInternalServerErrorRoute } from '../app-routing-paths';
import { ThemedBreadcrumbsComponent } from '../breadcrumbs/themed-breadcrumbs.component';
import {
NativeWindowRef,
NativeWindowService,
} from '../core/services/window.service';
import { ThemedFooterComponent } from '../footer/themed-footer.component';
import { ThemedHeaderNavbarWrapperComponent } from '../header-nav-wrapper/themed-header-navbar-wrapper.component';
import { slideSidebarPadding } from '../shared/animations/slide';
Expand All @@ -47,7 +54,20 @@
styleUrls: ['./root.component.scss'],
animations: [slideSidebarPadding],
standalone: true,
imports: [TranslateModule, ThemedAdminSidebarComponent, SystemWideAlertBannerComponent, ThemedHeaderNavbarWrapperComponent, ThemedBreadcrumbsComponent, NgIf, ThemedLoadingComponent, RouterOutlet, ThemedFooterComponent, NotificationsBoardComponent, AsyncPipe],
imports: [
TranslateModule,
ThemedAdminSidebarComponent,
SystemWideAlertBannerComponent,
ThemedHeaderNavbarWrapperComponent,
ThemedBreadcrumbsComponent,
NgIf,
NgClass,
ThemedLoadingComponent,
RouterOutlet,
ThemedFooterComponent,
NotificationsBoardComponent,
AsyncPipe,
],
})
export class RootComponent implements OnInit {
theme: Observable<ThemeConfig> = of({} as any);
Expand All @@ -58,6 +78,8 @@
notificationOptions: INotificationBoardOptions;
models: any;

browserOsClasses = new BehaviorSubject<string[]>([]);

/**
* Whether or not to show a full screen loader
*/
Expand All @@ -73,11 +95,23 @@
private cssService: CSSVariableService,
private menuService: MenuService,
private windowService: HostWindowService,
@Inject(NativeWindowService) private _window: NativeWindowRef,
) {
this.notificationOptions = environment.notifications;
}

ngOnInit() {
const browserName = this.getBrowserName();
if (browserName) {
const browserOsClasses = new Array<string>();
browserOsClasses.push(`browser-${browserName}`);
const osName = this.getOSName();
if (osName) {
browserOsClasses.push(`browser-${browserName}-${osName}`);

Check warning on line 110 in src/app/root/root.component.ts

View check run for this annotation

Codecov / codecov/patch

src/app/root/root.component.ts#L110 

Added line #L110 was not covered by tests
}
this.browserOsClasses.next(browserOsClasses);
}

this.isSidebarVisible$ = this.menuService.isMenuVisibleWithVisibleSections(MenuID.ADMIN);

this.expandedSidebarWidth$ = this.cssService.getVariable('--ds-admin-sidebar-total-width').pipe(
Expand Down Expand Up @@ -108,4 +142,23 @@
mainContent.focus();
}
}

getBrowserName(): string {
const userAgent = this._window.nativeWindow.navigator.userAgent;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@davide-negretti : After merging this PR, I'm now noticing that I can get an error on this line when run via SSR:

ERROR TypeError: Cannot read properties of undefined (reading 'userAgent')
    at RootComponent2.getBrowserName (C:\\dspace-angular\dist\server\main.js:1:1008203)
    at RootComponent2.ngOnInit (C:\\dspace-angular\dist\server\main.js:1:1006659)
    at callHookInternal (C:\\dspace-angular\dist\server\main.js:1:4134206)

To reproduce:

  1. Build in prod mode : yarn build:prod; yarn serve:ssr
  2. Access the homepage & that SSR error will appear in the console window where you ran yarn serve:ssr.

Could you possibly provide a quick fix so that I don't have to revert this PR?

if (/Firefox/.test(userAgent)) {
return 'firefox';

Check warning on line 149 in src/app/root/root.component.ts

View check run for this annotation

Codecov / codecov/patch

src/app/root/root.component.ts#L149 

Added line #L149 was not covered by tests
}
if (/Safari/.test(userAgent)) {
return 'safari';
}
return undefined;

Check warning on line 154 in src/app/root/root.component.ts

View check run for this annotation

Codecov / codecov/patch

src/app/root/root.component.ts#L154 

Added line #L154 was not covered by tests
}

getOSName(): string {
const userAgent = this._window.nativeWindow.navigator.userAgent;
if (/Windows/.test(userAgent)) {
return 'windows';

Check warning on line 160 in src/app/root/root.component.ts

View check run for this annotation

Codecov / codecov/patch

src/app/root/root.component.ts#L160 

Added line #L160 was not covered by tests
}
return undefined;
}
}
16 changes: 15 additions & 1 deletion src/themes/custom/app/root/root.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import {
AsyncPipe,
NgClass,
NgIf,
} from '@angular/common';
import { Component } from '@angular/core';
Expand All @@ -24,7 +25,20 @@ import { SystemWideAlertBannerComponent } from '../../../../app/system-wide-aler
templateUrl: '../../../../app/root/root.component.html',
animations: [slideSidebarPadding],
standalone: true,
imports: [TranslateModule, ThemedAdminSidebarComponent, SystemWideAlertBannerComponent, ThemedHeaderNavbarWrapperComponent, ThemedBreadcrumbsComponent, NgIf, ThemedLoadingComponent, RouterOutlet, ThemedFooterComponent, NotificationsBoardComponent, AsyncPipe],
imports: [
TranslateModule,
ThemedAdminSidebarComponent,
SystemWideAlertBannerComponent,
ThemedHeaderNavbarWrapperComponent,
ThemedBreadcrumbsComponent,
NgIf,
NgClass,
ThemedLoadingComponent,
RouterOutlet,
ThemedFooterComponent,
NotificationsBoardComponent,
AsyncPipe,
],
})
export class RootComponent extends BaseComponent {

Expand Down
Loading