Add icons to the BIM view toggler

app/assets/stylesheets/fonts/_openproject_icon_definitions.scss

@@ -1432,81 +1432,87 @@
 .icon-view-split:before {
 	content: "\f1ee";
 }
-@mixin icon-mixin-view-timeline {
+@mixin icon-mixin-view-split2 {
     content: "\f1ef";
 }
-.icon-view-timeline:before {
+.icon-view-split2:before {
 	content: "\f1ef";
 }
-@mixin icon-mixin-warning {
+@mixin icon-mixin-view-timeline {
     content: "\f1f0";
 }
-.icon-warning:before {
+.icon-view-timeline:before {
 	content: "\f1f0";
 }
-@mixin icon-mixin-watched {
+@mixin icon-mixin-warning {
     content: "\f1f1";
 }
-.icon-watched:before {
+.icon-warning:before {
 	content: "\f1f1";
 }
-@mixin icon-mixin-wiki-edit {
+@mixin icon-mixin-watched {
     content: "\f1f2";
 }
-.icon-wiki-edit:before {
+.icon-watched:before {
 	content: "\f1f2";
 }
-@mixin icon-mixin-wiki {
+@mixin icon-mixin-wiki-edit {
     content: "\f1f3";
 }
-.icon-wiki:before {
+.icon-wiki-edit:before {
 	content: "\f1f3";
 }
-@mixin icon-mixin-wiki2 {
+@mixin icon-mixin-wiki {
     content: "\f1f4";
 }
-.icon-wiki2:before {
+.icon-wiki:before {
 	content: "\f1f4";
 }
-@mixin icon-mixin-work-packages {
+@mixin icon-mixin-wiki2 {
     content: "\f1f5";
 }
-.icon-work-packages:before {
+.icon-wiki2:before {
 	content: "\f1f5";
 }
-@mixin icon-mixin-workflow {
+@mixin icon-mixin-work-packages {
     content: "\f1f6";
 }
-.icon-workflow:before {
+.icon-work-packages:before {
 	content: "\f1f6";
 }
-@mixin icon-mixin-yes {
+@mixin icon-mixin-workflow {
     content: "\f1f7";
 }
-.icon-yes:before {
+.icon-workflow:before {
 	content: "\f1f7";
 }
-@mixin icon-mixin-zen-mode {
+@mixin icon-mixin-yes {
     content: "\f1f8";
 }
-.icon-zen-mode:before {
+.icon-yes:before {
 	content: "\f1f8";
 }
-@mixin icon-mixin-zoom-auto {
+@mixin icon-mixin-zen-mode {
     content: "\f1f9";
 }
-.icon-zoom-auto:before {
+.icon-zen-mode:before {
 	content: "\f1f9";
 }
-@mixin icon-mixin-zoom-in {
+@mixin icon-mixin-zoom-auto {
     content: "\f1fa";
 }
-.icon-zoom-in:before {
+.icon-zoom-auto:before {
 	content: "\f1fa";
 }
-@mixin icon-mixin-zoom-out {
+@mixin icon-mixin-zoom-in {
     content: "\f1fb";
 }
-.icon-zoom-out:before {
+.icon-zoom-in:before {
 	content: "\f1fb";
 }
+@mixin icon-mixin-zoom-out {
+    content: "\f1fc";
+}
+.icon-zoom-out:before {
+	content: "\f1fc";
+}

app/assets/stylesheets/fonts/_openproject_icon_font.lsg

@@ -241,6 +241,7 @@
 <li><span class="icon icon-view-fullscreen"></span>view-fullscreen</li>
 <li><span class="icon icon-view-list"></span>view-list</li>
 <li><span class="icon icon-view-split"></span>view-split</li>
+<li><span class="icon icon-view-split2"></span>view-split2</li>
 <li><span class="icon icon-view-timeline"></span>view-timeline</li>
 <li><span class="icon icon-warning"></span>warning</li>
 <li><span class="icon icon-watched"></span>watched</li>

frontend/src/app/modules/bim/ifc_models/pages/viewer/bim-view.service.ts

@@ -45,11 +45,17 @@ export class BimViewService implements OnDestroy {
   private _state = input<BimViewState>();
 
   public text:any = {
-    list: this.I18n.t('js.ifc_models.views.list'),
+    list: this.I18n.t('js.views.card'),
     viewer: this.I18n.t('js.ifc_models.views.viewer'),
     split: this.I18n.t('js.ifc_models.views.split')
   };
 
+  public icon:any = {
+    list: 'icon-view-card',
+    viewer: 'icon-modules',
+    split: 'icon-view-split2'
+  };
+
   private transitionFn:Function;
 
   constructor(readonly I18n:I18nService,

frontend/src/app/modules/bim/ifc_models/toolbar/view-toggle/bim-view-toggle-button.component.ts

@@ -37,6 +37,7 @@ import {BimViewService} from "core-app/modules/bim/ifc_models/pages/viewer/bim-v
       <button class="button"
               id="bim-view-toggle-button"
               bimViewDropdown>
+        <op-icon icon-classes="button--icon {{bimView.icon[current]}}"></op-icon>
         <span class="button--text"
               aria-hidden="true"
               [textContent]="bimView.text[current]">

frontend/src/app/modules/bim/ifc_models/toolbar/view-toggle/bim-view-toggle-dropdown.directive.ts

@@ -74,6 +74,7 @@ export class BimViewToggleDropdownDirective extends OpContextMenuTrigger {
         return {
           hidden: key === current,
           linkText: this.bimView.text[key],
+          icon: this.bimView.icon[key],
           onClick: () => {
             // Close filter section
             if (this.wpFiltersService.visible) {

modules/bim/config/locales/js-en.yml

@@ -9,6 +9,5 @@ en:
         default: 'Default IFC models'
         manage: 'Manage models'
       views:
-        list: 'List only'
-        viewer: 'Viewer only'
-        split: 'Viewer and list'
+        viewer: 'Viewer'
+        split: 'Viewer and cards'

modules/bim/spec/features/bcf/create_spec.rb

@@ -84,7 +84,7 @@ describe 'Create BCF', type: :feature, js: true, with_mail: false do
       let(:view_route) { 'list' }
       before do
         index_page.visit!
-        index_page.switch_view 'List'
+        index_page.switch_view 'Cards'
         expect(page).to have_current_path /\/bcf\/list$/, ignore_query: true
       end
 

modules/bim/spec/features/bim_filter_spec.rb

@@ -75,7 +75,7 @@ describe 'BIM filter spec', type: :feature, js: true do
     it 'shows a filter button when there is a list shown' do
       model_page.page_shows_a_filter_button true
 
-      model_page.switch_view 'Viewer only'
+      model_page.switch_view 'Viewer'
       model_page.page_shows_a_filter_button false
     end
 

modules/bim/spec/features/bim_navigation_spec.rb

@@ -87,13 +87,13 @@ describe 'BIM navigation spec', type: :feature, js: true do
         details_view.expect_closed
 
         # Go to viewer only
-        model_page.switch_view 'Viewer only'
+        model_page.switch_view 'Viewer'
 
         model_page.model_viewer_visible true
         expect(page).to have_no_selector('.wp-cards-container')
 
         # Go to list only
-        model_page.switch_view 'List only'
+        model_page.switch_view 'Cards'
 
         model_page.model_viewer_visible false
         expect(page).to have_selector('.wp-cards-container')

vendor/openproject-icon-font/src/view-split2.svg

@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 640" width="640" height="640"><defs><path d="M640 520L400 520L400 440L640 440L640 520ZM640 400L400 400L400 320L640 320L640 400ZM640 280L400 280L400 200L640 200L640 280ZM640 160L400 160L400 80L640 80L640 160ZM360 520L0 520L0 80L360 80L360 520Z" id="c4bW0ThDgS"></path></defs><g><g><g><use xlink:href="#c4bW0ThDgS" opacity="1" fill="#000000" fill-opacity="1"></use><g><use xlink:href="#c4bW0ThDgS" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g></g></g></svg>