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

[39148] Optimise mobile view of Notification Center
pull/9771/head
Henriette Darge 3 years ago committed by GitHub
commit b503049c0e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 2
      app/cells/projects/table_cell.rb
  2. 8
      app/cells/views/projects/table/show.erb
  3. 8
      frontend/src/app/features/in-app-notifications/entry/in-app-notification-entry.component.html
  4. 6
      frontend/src/app/features/in-app-notifications/entry/in-app-notification-entry.component.ts
  5. 4
      frontend/src/global_styles/common/link/link.sass
  6. 4
      frontend/src/global_styles/content/_links.sass
  7. 8
      frontend/src/global_styles/content/_projects_list.sass
  8. 7
      frontend/src/global_styles/content/_table.sass

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

@ -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>

@ -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"

@ -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

@ -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

@ -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

@ -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

@ -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

Loading…
Cancel
Save