Merge pull request #15301 from opf/fix/octicons-bim-viewer

[fix] replace xeokit toolbar icons with octicons
opf · Apr 18, 2024 · aa0e905 · aa0e905
2 parents d666ec0 + c12b3af
commit aa0e905
Show file tree

Hide file tree

Showing 10 changed files with 178 additions and 78 deletions.
diff --git a/Gemfile b/Gemfile
@@ -381,6 +381,6 @@ gemfiles.each do |file|
   send(:eval_gemfile, file) if File.readable?(file)
 end
 
-gem "openproject-octicons", "~>19.9.0"
-gem "openproject-octicons_helper", "~>19.9.0"
+gem "openproject-octicons", "~>19.10.0"
+gem "openproject-octicons_helper", "~>19.10.0"
 gem "openproject-primer_view_components", "~>0.28.1"
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -773,10 +773,10 @@ GEM
       validate_email
       validate_url
       webfinger (~> 2.0)
-    openproject-octicons (19.9.0)
-    openproject-octicons_helper (19.9.0)
+    openproject-octicons (19.10.0)
+    openproject-octicons_helper (19.10.0)
       actionview
-      openproject-octicons (= 19.9.0)
+      openproject-octicons (= 19.10.0)
       railties
     openproject-primer_view_components (0.28.1)
       actionview (>= 5.0.0)
@@ -1271,8 +1271,8 @@ DEPENDENCIES
   openproject-job_status!
   openproject-ldap_groups!
   openproject-meeting!
-  openproject-octicons (~> 19.9.0)
-  openproject-octicons_helper (~> 19.9.0)
+  openproject-octicons (~> 19.10.0)
+  openproject-octicons_helper (~> 19.10.0)
   openproject-openid_connect!
   openproject-primer_view_components (~> 0.28.1)
   openproject-recaptcha!

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -97,7 +97,7 @@
     "@ng-select/ng-select": "^11.0.0",
     "@ngneat/content-loader": "^7.0.0",
     "@ngx-formly/core": "^6.1.4",
-    "@openproject/octicons-angular": "^19.8.0",
+    "@openproject/octicons-angular": "^19.10.0",
     "@openproject/primer-view-components": "^0.28.1",
     "@openproject/reactivestates": "^3.0.1",
     "@primer/css": "^21.1.1",

diff --git a/frontend/src/app/features/bim/ifc_models/ifc-viewer/ifc-viewer.component.html b/frontend/src/app/features/bim/ifc_models/ifc-viewer/ifc-viewer.component.html
@@ -21,15 +21,49 @@
        data-test-selector="op-ifc-viewer--container">
 
     <div class="op-ifc-viewer--toolbar op-ifc-viewer--model-canvas-overlay">
+      <div #xeokitToolbarIcons class="xeokit-toolbar-icon-replacements">
+        <button id="xeokit-replace-reset">
+          <svg home-icon size="small"></svg>
+        </button>
+        <button id="xeokit-replace-threeD">
+          <svg package-icon size="small"></svg>
+        </button>
+        <button id="xeokit-replace-ortho">
+          <svg op-grid-menu-icon size="small"></svg>
+        </button>
+        <button id="xeokit-replace-fit">
+          <svg screen-full-icon size="small"></svg>
+        </button>
+        <button id="xeokit-replace-firstPerson">
+          <svg person-icon size="small"></svg>
+        </button>
+        <button id="xeokit-replace-showSpaces">
+          <svg op-view-modal-icon size="small"></svg>
+        </button>
+        <button id="xeokit-replace-hide">
+          <svg op-erase-icon size="small"></svg>
+        </button>
+        <button id="xeokit-replace-select">
+          <svg op-cursor-select-icon size="small"></svg>
+        </button>
+        <button id="xeokit-replace-marquee">
+          <svg op-cursor-rectangle-select-icon size="small"></svg>
+        </button>
+        <button id="xeokit-replace-section">
+          <svg op-scissors-icon size="small"></svg>
+        </button>
+      </div>
+
       <div #toolbar
            class="op-ifc-viewer--toolbar-container"
            data-test-selector="op-ifc-viewer--toolbar-container">
       </div>
 
       <div class="op-ifc-viewer--toolbar-info-button">
-        <button class="icon-info1 xeokit-btn"
+        <button class="xeokit-btn"
                 [class.active]="inspectorVisible$ | async"
                 (click)="toggleInspector()">
+          <svg info-icon size="small"></svg>
         </button>
       </div>
     </div>

diff --git a/frontend/src/app/features/bim/ifc_models/ifc-viewer/ifc-viewer.component.ts b/frontend/src/app/features/bim/ifc_models/ifc-viewer/ifc-viewer.component.ts
@@ -44,9 +44,9 @@ import { CurrentProjectService } from 'core-app/core/current-project/current-pro
 import {
   BehaviorSubject,
   combineLatest,
-  Subject,
+  Subject, Subscription,
 } from 'rxjs';
-import { take } from 'rxjs/operators';
+import { filter, take } from 'rxjs/operators';
 
 @Component({
   selector: 'op-ifc-viewer',
@@ -83,15 +83,15 @@ export class IFCViewerComponent implements OnInit, OnDestroy, AfterViewInit {
 
   @ViewChild('inspectorPane') inspectorElement:ElementRef;
 
+  @ViewChild('xeokitToolbarIcons') xeokitToolbarIcons:ElementRef;
+
   constructor(
-    private I18n:I18nService,
-    private elementRef:ElementRef,
     public ifcData:IfcModelsDataService,
+    private I18n:I18nService,
     private ifcViewerService:IFCViewerService,
     private currentUserService:CurrentUserService,
     private currentProjectService:CurrentProjectService,
-  ) {
-  }
+  ) { }
 
   ngOnInit():void {
     if (this.modelCount === 0) {
@@ -130,6 +130,37 @@ export class IFCViewerComponent implements OnInit, OnDestroy, AfterViewInit {
           this.ifcData.projects,
         );
       });
+
+    this.insertXeokitToolbarIcons();
+  }
+
+  /**
+   * Inserts xeokit toolbar icons into each element. We need to render buttons with the octicon svg, hide the button
+   * container and insert the rendered SVG into the toolbar elements.
+   * This is necessary, as we do not use the xeokit icon font, but want to have a consistent look and feel of
+   * interaction elements with icons.
+   * @private
+   */
+  private insertXeokitToolbarIcons():Subscription {
+    return this.ifcViewerService.viewerVisible$
+      .pipe(
+        filter((visible) => visible),
+        take(1),
+      )
+      .subscribe(() => {
+        const toolbarIcons = this.xeokitToolbarIcons.nativeElement as HTMLElement;
+        const toolbar = this.toolbarElement.nativeElement as HTMLElement;
+
+        for (let i = 0; i < toolbarIcons.children.length; i++) {
+          const replacer = toolbarIcons.children[i];
+          const target = replacer.id.replace('xeokit-replace-', '');
+
+          const targetElement = toolbar.querySelector(`.xeokit-btn.xeokit-${target}`);
+          if (targetElement !== null) {
+            targetElement.insertAdjacentHTML('afterbegin', replacer.innerHTML);
+          }
+        }
+      });
   }
 
   ngAfterViewInit():void {

diff --git a/frontend/src/app/features/bim/ifc_models/openproject-ifc-models.module.ts b/frontend/src/app/features/bim/ifc_models/openproject-ifc-models.module.ts
@@ -26,14 +26,22 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 import { NgModule } from '@angular/core';
-import { OpenprojectWorkPackagesModule } from 'core-app/features/work-packages/openproject-work-packages.module';
 import { UIRouterModule } from '@uirouter/angular';
+
 import { OpSharedModule } from 'core-app/shared/shared.module';
+import { IconModule } from 'core-app/shared/components/icon/icon.module';
 import { IFC_ROUTES } from 'core-app/features/bim/ifc_models/openproject-ifc-models.routes';
+import { OpenprojectWorkPackagesModule } from 'core-app/features/work-packages/openproject-work-packages.module';
 import { IFCViewerPageComponent } from 'core-app/features/bim/ifc_models/pages/viewer/ifc-viewer-page.component';
-import { BcfViewToggleButtonComponent } from 'core-app/features/bim/ifc_models/toolbar/view-toggle/bcf-view-toggle-button.component';
-import { BcfViewToggleDropdownDirective } from 'core-app/features/bim/ifc_models/toolbar/view-toggle/bcf-view-toggle-dropdown.directive';
-import { BimManageIfcModelsButtonComponent } from 'core-app/features/bim/ifc_models/toolbar/manage-ifc-models-button/bim-manage-ifc-models-button.component';
+import {
+  BcfViewToggleButtonComponent,
+} from 'core-app/features/bim/ifc_models/toolbar/view-toggle/bcf-view-toggle-button.component';
+import {
+  BcfViewToggleDropdownDirective,
+} from 'core-app/features/bim/ifc_models/toolbar/view-toggle/bcf-view-toggle-dropdown.directive';
+import {
+  BimManageIfcModelsButtonComponent,
+} from 'core-app/features/bim/ifc_models/toolbar/manage-ifc-models-button/bim-manage-ifc-models-button.component';
 import { IFCViewerService } from 'core-app/features/bim/ifc_models/ifc-viewer/ifc-viewer.service';
 import { OpenprojectFieldsModule } from 'core-app/shared/components/fields/openproject-fields.module';
 import { BcfListComponent } from 'core-app/features/bim/ifc_models/bcf/list/bcf-list.component';
@@ -54,6 +62,7 @@ import { BcfSplitRightComponent } from 'core-app/features/bim/ifc_models/bcf/spl
     UIRouterModule.forChild({
       states: IFC_ROUTES,
     }),
+    IconModule,
   ],
   providers: [
     IFCViewerService,

diff --git a/frontend/src/app/features/bim/ifc_models/pages/viewer/ifc-viewer-page.component.ts b/frontend/src/app/features/bim/ifc_models/pages/viewer/ifc-viewer-page.component.ts
@@ -37,26 +37,46 @@ import {
   PartitionedQuerySpacePageComponent,
   ToolbarButtonComponentDefinition,
 } from 'core-app/features/work-packages/routing/partitioned-query-space-page/partitioned-query-space-page.component';
-import { WorkPackageFilterButtonComponent } from 'core-app/features/work-packages/components/wp-buttons/wp-filter-button/wp-filter-button.component';
-import { ZenModeButtonComponent } from 'core-app/features/work-packages/components/wp-buttons/zen-mode-toggle-button/zen-mode-toggle-button.component';
+import {
+  WorkPackageFilterButtonComponent,
+} from 'core-app/features/work-packages/components/wp-buttons/wp-filter-button/wp-filter-button.component';
+import {
+  ZenModeButtonComponent,
+} from 'core-app/features/work-packages/components/wp-buttons/zen-mode-toggle-button/zen-mode-toggle-button.component';
 import {
   bcfSplitViewCardsIdentifier,
   bcfViewerViewIdentifier,
   BcfViewService,
 } from 'core-app/features/bim/ifc_models/pages/viewer/bcf-view.service';
-import { BcfViewToggleButtonComponent } from 'core-app/features/bim/ifc_models/toolbar/view-toggle/bcf-view-toggle-button.component';
+import {
+  BcfViewToggleButtonComponent,
+} from 'core-app/features/bim/ifc_models/toolbar/view-toggle/bcf-view-toggle-button.component';
 import { IfcModelsDataService } from 'core-app/features/bim/ifc_models/pages/viewer/ifc-models-data.service';
-import { QueryParamListenerService } from 'core-app/features/work-packages/components/wp-query/query-param-listener.service';
-import { BimManageIfcModelsButtonComponent } from 'core-app/features/bim/ifc_models/toolbar/manage-ifc-models-button/bim-manage-ifc-models-button.component';
-import { WorkPackageCreateButtonComponent } from 'core-app/features/work-packages/components/wp-buttons/wp-create-button/wp-create-button.component';
+import {
+  QueryParamListenerService,
+} from 'core-app/features/work-packages/components/wp-query/query-param-listener.service';
+import {
+  BimManageIfcModelsButtonComponent,
+} from 'core-app/features/bim/ifc_models/toolbar/manage-ifc-models-button/bim-manage-ifc-models-button.component';
+import {
+  WorkPackageCreateButtonComponent,
+} from 'core-app/features/work-packages/components/wp-buttons/wp-create-button/wp-create-button.component';
 import { of } from 'rxjs';
-import { BcfImportButtonComponent } from 'core-app/features/bim/ifc_models/toolbar/import-export-bcf/bcf-import-button.component';
-import { BcfExportButtonComponent } from 'core-app/features/bim/ifc_models/toolbar/import-export-bcf/bcf-export-button.component';
-import { RefreshButtonComponent } from 'core-app/features/bim/ifc_models/toolbar/import-export-bcf/refresh-button.component';
+import {
+  BcfImportButtonComponent,
+} from 'core-app/features/bim/ifc_models/toolbar/import-export-bcf/bcf-import-button.component';
+import {
+  BcfExportButtonComponent,
+} from 'core-app/features/bim/ifc_models/toolbar/import-export-bcf/bcf-export-button.component';
+import {
+  RefreshButtonComponent,
+} from 'core-app/features/bim/ifc_models/toolbar/import-export-bcf/refresh-button.component';
 import { ViewerBridgeService } from 'core-app/features/bim/bcf/bcf-viewer-bridge/viewer-bridge.service';
 import { UntilDestroyedMixin } from 'core-app/shared/helpers/angular/until-destroyed.mixin';
 import { QueryResource } from 'core-app/features/hal/resources/query-resource';
-import { WorkPackageSettingsButtonComponent } from 'core-app/features/work-packages/components/wp-buttons/wp-settings-button/wp-settings-button.component';
+import {
+  WorkPackageSettingsButtonComponent,
+} from 'core-app/features/work-packages/components/wp-buttons/wp-settings-button/wp-settings-button.component';
 
 @Component({
   templateUrl: '../../../../work-packages/routing/partitioned-query-space-page/partitioned-query-space-page.component.html',
@@ -134,10 +154,12 @@ export class IFCViewerPageComponent extends PartitionedQuerySpacePageComponent i
     },
   ];
 
-  constructor(readonly ifcData:IfcModelsDataService,
+  constructor(
+    readonly ifcData:IfcModelsDataService,
     readonly bcfView:BcfViewService,
     readonly injector:Injector,
-    readonly viewerBridgeService:ViewerBridgeService) {
+    readonly viewerBridgeService:ViewerBridgeService,
+  ) {
     super(injector);
   }
 

diff --git a/frontend/src/app/features/bim/ifc_models/pages/viewer/styles/toolbar.sass b/frontend/src/app/features/bim/ifc_models/pages/viewer/styles/toolbar.sass
@@ -1,49 +1,22 @@
+// -------------------------- ICONS ----------------------------
+
+.xeokit-toolbar-icon-replacements
+  display: none
+
 // -------------------------- GENERIC --------------------------
 .op-ifc-viewer--toolbar-container
   pointer-events: none
 
+
   button
     pointer-events: all
     outline: none
 
-  // Use our own icon font instead of including Xeokit's FontAwesome
-  button[class^="fa-"],
-  button[class*=" fa-"]
-    &::before
-      font-family: "openproject-icon-font" !important
-  .fa-home::before
-    @include icon-mixin-home
-  .fa-crop::before
-    @include icon-mixin-zoom-auto
-  .fa-male::before
-    @include icon-mixin-user
-  .fa-info-circle::before
-    @include icon-mixin-info2
-  .fa-cut::before
-    @include icon-mixin-cut
-  .fa-cube::before
-    @include icon-mixin-modules
-  .fa-eraser::before
-    @include icon-mixin-rubber
-  .fa-mouse-pointer::before
-    @include icon-mixin-cursor
-  .fa-th::before
-    @include icon-mixin-menu
-  .fa-codepen::before
-    @include icon-mixin-view-model
-  .fa-object-group::before
-    @include icon-mixin-image2
-  .fa-ruler::before
-    @include icon-mixin-to-fullscreen
-  .fa-chevron-left::before
-    @include icon-mixin-arrow-left2
-
 // -------------------------- XEOKIT Section tool ----------------------
 .xeokit-section-counter
   opacity: 1.0
   padding: 1px
-  margin: 0
-  margin-left: 10px
+  margin: 0 0 0 10px
   width: 20px
   height: 16px
   float: right
@@ -53,8 +26,7 @@
   border-radius: 5px
   border: 0
   padding: 1px
-  margin: 0
-  margin-left: 10px
+  margin: 0 0 0 10px
   width: 20px
   height: 16px
   float: right