openproject/frontend/src/app/features/in-app-notifications/entry/in-app-notification-entry.component.sass at 6c1dc64d881f0f72c1a89f801ba8a120dfa329c3 · opf/openproject · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
@import "helpers"

$ian-bg-color: var(--box-list-item-bg-color)
$ian-bg-hover-color: var(--box-list-item-bg-hover-color)
$ian-border-color: var(--box-list-item-border-color)
$ian-bg-read-color: var(--bgColor-muted)
$ian-bg-read-hover-color: hsl(from var(--bgColor-muted) h s calc(l - 3.5))
$ian-bg-selected-color: var(--box-list-item-selected-bg-color)
$ian-bg-selected-hover-color: var(--box-list-item-selected-bg-hover-color)
// Notification center is special as it does not allow multi-select. So the selected element is always the pressed one.
// We can therefore direclty set the pressed border color on the selected element
$ian-active-border-color: var(--box-list-item-pressed-border-color)
// This needs to be set in the itemSize of
// the virtual scroller
$ian-height: 100px
$subject-font-size: 14px

.op-ian-item
  display: block
  background: $ian-bg-color
  margin: 0
  padding: 15px 10px
  font-size: 0.9rem
  border-top: 1px solid $ian-border-color
  height: $ian-height

  &:hover
    background: $ian-bg-hover-color

  &:first-child
    border-top: none

  &:last-of-type
    border-bottom: 1px solid $ian-border-color

  &_selected
    background: $ian-bg-selected-color
    border-color: $ian-active-border-color
    &:hover
      background: $ian-bg-selected-hover-color

    // Since the ian only have a top border, we need to highlight the next sibling as well to
    // create the impression that the selected ian has a top and bottom border
    & + .op-ian-item
      border-top-color: $ian-active-border-color

    &:last-of-type
      border-bottom-color: $ian-active-border-color

  &_read
    background: $ian-bg-read-color
    &:hover
      background: $ian-bg-read-hover-color

  &--row
    @include unset-button-styles
    width: 100%
    height: 100%
    display: grid
    grid-template-rows: auto $subject-font-size auto
    grid-template-areas: "header" "body" "footer"
    grid-gap: 10px
    align-items: center
    cursor: pointer

  &--top-line
    grid-area: header
    display: grid
    grid-template-columns: max-content max-content minmax(0, max-content) minmax(0, max-content) auto minmax(20px, max-content)
    grid-template-areas: "status wpIdLink project reason count buttons"
    grid-column-gap: 5px
    font-size: var(--body-font-size)
    align-items: baseline

  &--middle-line
    grid-area: body
    display: grid
    grid-template-columns: auto 1fr
    grid-column-gap: 5px
    line-height: normal

  &--bottom-line
    grid-area: footer

  &--work-package-subject
    @include text-shortener
    font-weight: var(--base-text-weight-bold)
    &.-read
      font-weight: normal

  &--work-package-id-link
    grid-area: wpIdLink

  &--project
    grid-area: project
    color: var(--fgColor-muted)
    @include text-shortener

  &--project-link,
  &--work-package-id-link
    color: var(--fgColor-muted)
    font-weight: var(--base-text-weight-bold)

  &--reason-count
    grid-area: count
    justify-self: flex-end
    margin-right: 5px

  &--reason-wrapper
    grid-area: reason
    @include text-shortener
    color: var(--fgColor-muted)

  &--status
    grid-area: status
    margin-right: 5px

  &--buttons
    grid-area: buttons
    font-size: 16px

  &--button
    &:hover
      color: var(--accent-color)

    &_shown-on-focus
      @include show-on-focus

  &--loading-indicator
    height: 100%
    display: block
    grid-area: loadingIndicator

    svg
      // Height - padding
      height: calc(#{$ian-height} - 30px)

  &--loading
    display: grid
    grid-template-columns: max-content auto minmax(20px, max-content)
    grid-template-areas: "loadingIndicator count buttons"
    grid-column-gap: 5px