Merge pull request #9768 from opf/feature/39148-Optimise-mobile-view-of-Notification-Center

[39148] Optimise mobile view of Notification Center

app/cells/projects/table_cell.rb

@@ -39,7 +39,7 @@ module Projects
 
     def deactivate_class_on_lft_sort
       if sorted_by_lft?
-        '-inactive'
+        'op-link_inactive'
       end
     end
 

app/cells/views/projects/table/show.erb

@@ -33,21 +33,21 @@ See COPYRIGHT and LICENSE files for more details.
       <table class="generic-table" <%= table_id ? "id=\"#{table_id}\"" : '' %>>
         <colgroup>
           <% headers.each do |_name, _options| %>
-            <col opHighlightCol>
+            <col <%= "opHighlightCol" unless _name == :hierarchy %> >
           <% end %>
-          <col>
+          <col opHighlightCol>
         </colgroup>
         <thead  class="-sticky">
         <tr>
           <% headers.each do |name, options| %>
             <% if name == :hierarchy %>
               <th id="project-table--hierarchy-header">
-                <div class="generic-table--sort-header-outer">
+                <div class="generic-table--sort-header-outer generic-table--sort-header-outer_no-highlighting">
                   <div class="generic-table--sort-header">
                     <%= content_tag :a,
                                     op_icon("icon-hierarchy"),
                                     href: href_only_when_not_sort_lft,
-                                    class: deactivate_class_on_lft_sort,
+                                    class: "op-link #{deactivate_class_on_lft_sort}",
                                     title: t(:label_sort_by, value: %("#{t(:label_project_hierarchy)}")) %>
                   </div>
                 </div>

frontend/src/app/features/in-app-notifications/entry/in-app-notification-entry.component.html

@@ -11,7 +11,8 @@
       </div>
 
       <a
-        class="op-ian-item--work-package-id-link"
+        class="op-ian-item--work-package-id-link op-link"
+        [class.op-link_inactive]="isMobile()"
         [attr.title]="workPackage.subject"
         uiSref="work-packages.show"
         [uiParams]="{workPackageId: workPackage.id}"
@@ -23,7 +24,9 @@
         class="op-ian-item--project"
       >
         - <a
-        class="op-ian-item--project-link" [href]="project.showUrl"
+        class="op-ian-item--project-link"
+        [class.op-link_inactive]="isMobile()"
+        [href]="project.showUrl"
         [textContent]="project.title"
         (click)="projectClicked($event)"
         target="_blank"
@@ -94,6 +97,7 @@
           [principal]="actors[0]"
           [hide-name]="false"
           [hide-avatar]="true"
+          [link]="!isMobile()"
         ></op-principal>
         <span
           *ngIf="actors.length > 1"

frontend/src/app/features/in-app-notifications/entry/in-app-notification-entry.component.ts

@@ -27,6 +27,7 @@ import { HalResource } from 'core-app/features/hal/resources/hal-resource';
 import { BackRouteOptions } from 'core-app/features/work-packages/components/back-routing/back-routing.service';
 import { InAppNotification } from 'core-app/core/state/in-app-notifications/in-app-notification.model';
 import { IanCenterService } from 'core-app/features/in-app-notifications/center/state/ian-center.service';
+import { DeviceService } from 'core-app/core/browser/device.service';
 
 @Component({
   selector: 'op-in-app-notification-entry',
@@ -77,6 +78,7 @@ export class InAppNotificationEntryComponent implements OnInit {
     readonly timezoneService:TimezoneService,
     readonly pathHelper:PathHelperService,
     readonly state:StateService,
+    readonly deviceService:DeviceService,
   ) {
   }
 
@@ -146,6 +148,10 @@ export class InAppNotificationEntryComponent implements OnInit {
     return hint;
   }
 
+  isMobile():boolean {
+    return this.deviceService.isMobile;
+  }
+
   private buildActors() {
     const actors = this
       .aggregatedNotifications

frontend/src/global_styles/common/link/link.sass

@@ -13,6 +13,10 @@
   &:focus
     color: var(--content-link-hover-active-color)
 
+  &_inactive
+    pointer-events: none
+    cursor: default
+
   // Ensure op-icon within a link gets inline-block
   // to avoid it receiving any text-decoration on hover
   .op-icon--wrapper

frontend/src/global_styles/content/_links.sass

@@ -77,10 +77,6 @@ a.icon, a.icon-context
 a.icon:hover, a.icon-context:hover
   text-decoration: none
 
-a.-inactive
-  pointer-events: none
-  cursor: default
-
 #content table th a.no-decoration-on-hover:hover, a.no-decoration-on-hover:hover
   text-decoration: none
 

frontend/src/global_styles/content/_projects_list.sass

@@ -138,11 +138,6 @@ form.project-filters
   .project-description.-expanded
     display: table-row
 
-  // Avoid hover effect
-  .generic-table--sort-header-outer:hover,
-  .generic-table--header-outer:hover
-    background: initial
-
   td.name
     @include text-shortener
     a
@@ -158,8 +153,7 @@ form.project-filters
       @include calc-indentation-description($i)
 
 #project-table--hierarchy-header
-  font-size: 1rem
-  max-width: 0.875rem
+  max-width: 1rem
 
   .generic-table--sort-header
     min-width: 1rem

frontend/src/global_styles/content/_table.sass

@@ -243,6 +243,11 @@ thead.-sticky th
   &.hover
     background:   #f8f8f8
 
+  &_no-highlighting
+    &:hover,
+    &.hover
+      background: initial
+
 .generic-table--empty-header
   padding:       0 6px
   height:        var(--generic-table--header-height)
@@ -278,7 +283,7 @@ thead.-sticky th
     width: 100%
     font-weight: bold
     @include text-shortener
-    &.-inactive
+    &.op-link_inactive
       color: var(--button--active-font-color)
 
   & > op-icon