diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.scss b/src/app/admin/admin-sidebar/admin-sidebar.component.scss index d3607ca625a..a679155c323 100644 --- a/src/app/admin/admin-sidebar/admin-sidebar.component.scss +++ b/src/app/admin/admin-sidebar/admin-sidebar.component.scss @@ -138,3 +138,9 @@ } } } + +::ng-deep { + .browser-firefox-windows { + --ds-dark-scrollbar-width: 20px; + } +} diff --git a/src/app/root/root.component.html b/src/app/root/root.component.html index 533efea9d18..4b950c01aee 100644 --- a/src/app/root/root.component.html +++ b/src/app/root/root.component.html @@ -2,7 +2,7 @@ {{ 'root.skip-to-content' | translate }} -
diff --git a/src/app/root/root.component.ts b/src/app/root/root.component.ts index d98fd85b0a7..b096f23d9da 100644 --- a/src/app/root/root.component.ts +++ b/src/app/root/root.component.ts @@ -1,9 +1,11 @@ import { AsyncPipe, + NgClass, NgIf, } from '@angular/common'; import { Component, + Inject, Input, OnInit, } from '@angular/core'; @@ -13,6 +15,7 @@ import { } from '@angular/router'; import { TranslateModule } from '@ngx-translate/core'; import { + BehaviorSubject, combineLatest as combineLatestObservable, Observable, of, @@ -30,6 +33,10 @@ import { environment } from '../../environments/environment'; 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'; @@ -47,7 +54,20 @@ import { SystemWideAlertBannerComponent } from '../system-wide-alert/alert-banne 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 = of({} as any); @@ -58,6 +78,8 @@ export class RootComponent implements OnInit { notificationOptions: INotificationBoardOptions; models: any; + browserOsClasses = new BehaviorSubject([]); + /** * Whether or not to show a full screen loader */ @@ -73,11 +95,23 @@ export class RootComponent implements OnInit { 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(); + browserOsClasses.push(`browser-${browserName}`); + const osName = this.getOSName(); + if (osName) { + browserOsClasses.push(`browser-${browserName}-${osName}`); + } + this.browserOsClasses.next(browserOsClasses); + } + this.isSidebarVisible$ = this.menuService.isMenuVisibleWithVisibleSections(MenuID.ADMIN); this.expandedSidebarWidth$ = this.cssService.getVariable('--ds-admin-sidebar-total-width').pipe( @@ -108,4 +142,23 @@ export class RootComponent implements OnInit { mainContent.focus(); } } + + getBrowserName(): string { + const userAgent = this._window.nativeWindow.navigator.userAgent; + if (/Firefox/.test(userAgent)) { + return 'firefox'; + } + if (/Safari/.test(userAgent)) { + return 'safari'; + } + return undefined; + } + + getOSName(): string { + const userAgent = this._window.nativeWindow.navigator.userAgent; + if (/Windows/.test(userAgent)) { + return 'windows'; + } + return undefined; + } } diff --git a/src/themes/custom/app/root/root.component.ts b/src/themes/custom/app/root/root.component.ts index 193595b3ed6..21120e25272 100644 --- a/src/themes/custom/app/root/root.component.ts +++ b/src/themes/custom/app/root/root.component.ts @@ -1,5 +1,6 @@ import { AsyncPipe, + NgClass, NgIf, } from '@angular/common'; import { Component } from '@angular/core'; @@ -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 {