mirror of
https://github.com/opf/openproject.git
synced 2026-06-14 03:30:14 +00:00
Alexander Brandon Coles
6c1dc64d88
Aligns the look and behaviour of counters on the Notifications page by rendering the aggregated-notification count badge with the new `primer-counter-label` component in place of the bespoke `indicator-bubble` span, so IAN entries inherit the shared limit and delimiting behaviour.
143 lines
3.6 KiB
Sass
143 lines
3.6 KiB
Sass
@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
|