diff --git a/assets/agenda/components/AgendaCoverages.jsx b/assets/agenda/components/AgendaCoverages.jsx index 1bee5a9d8..669bf8815 100644 --- a/assets/agenda/components/AgendaCoverages.jsx +++ b/assets/agenda/components/AgendaCoverages.jsx @@ -33,8 +33,8 @@ function AgendaCoveragesComponent({item, coverages, wireItems, actions, user, on {'coverage-item--clickable': onClick})} key={coverage.coverage_id} onClick={onClick} title={onClick ? gettext('Open Agenda in new tab') : onClick} >
- - + + {`${getCoverageDisplayName(coverage.coverage_type)}${getSlugline(coverage)}`} {coverage.workflow_status !== WORKFLOW_STATUS.COMPLETED && diff --git a/assets/agenda/components/AgendaListCoverageItem.jsx b/assets/agenda/components/AgendaListCoverageItem.jsx index 3cdd0f513..2e52dd402 100644 --- a/assets/agenda/components/AgendaListCoverageItem.jsx +++ b/assets/agenda/components/AgendaListCoverageItem.jsx @@ -110,13 +110,13 @@ class AgendaListCoverageItem extends React.Component { (state.isCoverageForExtraDay && props.coverage.planning_id === get(props, 'planningItem.guid')) ) && ( - + {state.beingUpdated && } {state.isWatched && - } + } ); diff --git a/assets/agenda/utils.js b/assets/agenda/utils.js index c4facd7d7..8e3b2fc6d 100644 --- a/assets/agenda/utils.js +++ b/assets/agenda/utils.js @@ -86,11 +86,11 @@ export const WORKFLOW_STATUS_TEXTS = { }; export const WORKFLOW_COLORS = { - [WORKFLOW_STATUS.DRAFT]: 'icon--gray-dark', - [WORKFLOW_STATUS.ASSIGNED]: 'icon--main-blue', - [WORKFLOW_STATUS.ACTIVE]: 'icon--purple', - [WORKFLOW_STATUS.COMPLETED]: 'icon--green', - [WORKFLOW_STATUS.CANCELLED]: 'icon--red', + [WORKFLOW_STATUS.DRAFT]: 'coverage--draft', + [WORKFLOW_STATUS.ASSIGNED]: 'coverage--assigned', + [WORKFLOW_STATUS.ACTIVE]: 'coverage--active', + [WORKFLOW_STATUS.COMPLETED]: 'coverage--completed', + [WORKFLOW_STATUS.CANCELLED]: 'coverage--cancelled', }; export const SCHEDULE_TYPE = { diff --git a/assets/components/NotificationList.jsx b/assets/components/NotificationList.jsx index 9ed88be52..6f1ccd782 100644 --- a/assets/components/NotificationList.jsx +++ b/assets/components/NotificationList.jsx @@ -41,6 +41,7 @@ class NotificationList extends React.Component { render() { return (
+

Notification Bell

{this.props.notifications && this.props.notifications.length > 0 &&
{this.props.notifications && this.props.notifications.length} @@ -51,6 +52,7 @@ class NotificationList extends React.Component { className="notif__circle" ref={(elem) => this.elem = elem} title={gettext('Notifications')}> +

Notification bell

diff --git a/assets/styles/icon-font-small.scss b/assets/styles/icon-font-small.scss index 22f49f76a..e526033da 100644 --- a/assets/styles/icon-font-small.scss +++ b/assets/styles/icon-font-small.scss @@ -66,6 +66,10 @@ } } +[class^="icon-small--coverage-"], [class*=" icon-small--coverage-"] { + color: $gray-dark; +} + .icon-small--arrow-down:before { content: "\e600"; } diff --git a/assets/styles/icon-font.scss b/assets/styles/icon-font.scss index b9f840091..b9b89dfbf 100644 --- a/assets/styles/icon-font.scss +++ b/assets/styles/icon-font.scss @@ -18,7 +18,7 @@ width: $width; height: $height; line-height: $line-height; - font-family: 'aap_newsroom_icons'; + font-family: 'aap_newsroom_icons' !important; font-size: $font-size; color: $main_blue; speak: none; @@ -30,14 +30,6 @@ [class^="icon--"], [class*=" icon--"] { @include icon-base; - /* use !important to prevent issues with browser extensions that change fonts */ - font-family: 'aap_newsroom_icons' !important; - speak: none; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; @@ -83,6 +75,9 @@ color: $purple; } } +[class^="icon--coverage-"], [class*=" icon--coverage-"] { + color: $gray-dark; +} .icon--rotate-90 { transform: rotate(90deg); diff --git a/assets/styles/index.scss b/assets/styles/index.scss index ee9833439..c724b19cf 100644 --- a/assets/styles/index.scss +++ b/assets/styles/index.scss @@ -1987,6 +1987,7 @@ article.list { @include md { display: flex; + gap: 5px; } &--dashed-border { @@ -2017,6 +2018,52 @@ article.list { padding-right: 10px; border-right: 1px dotted #c4c4c4; } + &[class*=" coverage--"] { + &::after { + content: ''; + display: flex; + align-items: center; + justify-content: center; + border-radius: 999px; + height: 12px; + width: 12px; + position: absolute; + bottom: -4px; + right: -4px; + box-shadow: 0 0 0 2px hsl(0, 0%, 100%); + background-repeat: no-repeat; + background-size: 100%; + } + } + &.coverage--draft { + &::after { + display: none; + } + } + &.coverage--active { + &::after { + background-color: $purple; + background-image: url('/static/overlay_icon--active.svg'); + } + } + &.coverage--assigned { + &::after { + background-color: $mid-blue; + background-image: url('/static/overlay_icon--assigned.svg'); + } + } + &.coverage--cancelled { + &::after { + background-color: $red; + background-image: url('/static/overlay_icon--cancelled.svg'); + } + } + &.coverage--completed { + &::after { + background-color: $green; + background-image: url('/static/overlay_icon--completed.svg'); + } + } } .wire-articles__item__divider { @@ -2670,6 +2717,9 @@ a.wire-articles__versions { &--gray { color: #747474 !important; } + .icon-coverage-status { + margin: 2px 2px 0; + } } .coverage-item__column { display: flex; @@ -2691,6 +2741,59 @@ a.wire-articles__versions { margin-left: -6px !important; display: inline !important; } +.coverage-item__coverage-icon { + display: flex; + flex-grow: 1; + position: relative; + padding-left: 16px; + + &[class*=" coverage--"] { + &::before { + content: ''; + display: flex; + align-items: center; + justify-content: center; + border-radius: 999px; + height: 12px; + width: 12px; + position: absolute; + top: 2px; + left: 0px; + background-repeat: no-repeat; + background-size: 100%; + } + } + &.coverage--draft { + padding-left: 0px; + &::before { + display: none; + } + } + &.coverage--active { + &::before { + background-color: $purple; + background-image: url('/static/overlay_icon--active.svg'); + } + } + &.coverage--assigned { + &::before { + background-color: $mid-blue; + background-image: url('/static/overlay_icon--assigned.svg'); + } + } + &.coverage--cancelled { + &::before { + background-color: $red; + background-image: url('/static/overlay_icon--cancelled.svg'); + } + } + &.coverage--completed { + &::before { + background-color: $green; + background-image: url('/static/overlay_icon--completed.svg'); + } + } +} .column__preview__tags__column { @@ -3490,7 +3593,7 @@ a.wire-articles__versions { } &--pale { - background-color: #00adec; + background-color: $main-blue; } &--right { @@ -3500,6 +3603,9 @@ a.wire-articles__versions { right: -4px; } } + &--left { + left: 0; + } } .noselect { diff --git a/docker-compose.yml b/docker-compose.yml index 246d07748..b958cfc11 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -27,6 +27,7 @@ services: volumes: - ./dump:/opt/newsroom/dump - ./newsroom/templates:/opt/newsroom/templates + - ./newsroom/static:/opt/newsroom/static depends_on: - elastic - redis diff --git a/newsroom/templates/base_layout.html b/newsroom/templates/base_layout.html index 58ed4f0da..2024a633c 100644 --- a/newsroom/templates/base_layout.html +++ b/newsroom/templates/base_layout.html @@ -60,7 +60,7 @@

{{ gettext('Side Navigation') }}

{% for group in range(0, 10) %} {% for nav in sidenavs(request.blueprint)|selectattr("group", "equalto", group) %} {% if group > 0 and loop.first and loop.length %} -
    • +
    • {% endif %} {% include "sidenav_icon.html" %} diff --git a/newsroom/templates/logo.html b/newsroom/templates/logo.html index 23bf6b664..fad02c0bc 100644 --- a/newsroom/templates/logo.html +++ b/newsroom/templates/logo.html @@ -1,5 +1,6 @@