superdesk/superdesk-client-core

<div class="notification-pane" ng-class="{show: flags.notifications}" data-theme="dark-ui">
    <div class="notification-pane__header" ng-if="flags.notifications">
        <h3 class="notification-pane__title" translate>Notifications</h3>
        <button class="icn-btn" ng-click="toggleNotifications()"><i class="icon-close-small"></i></button>
    </div>
    <div class="notification-pane__content" ng-if="flags.notifications">
        <div class="content-state__empty-container content-state__empty-container--absolute" ng-show="notifications._items.length === 0">
            <div class="content-state__empty-info">
                <figure class="content-state__image content-state__image--small">
                    <img src="{{emptyState}}" alt="Empty state illustration">
                </figure>
                <h3 class="content-state__heading" translate>All good so far</h3>
                <p class="content-state__description" translate>You don't have any notifications</p>
            </div>
        </div>
        <div class="sd-loading-overlay" ng-show="notifications._items == null">
            <span class="a11y-only" translate>Loading</span>
        </div>
        <section class="module">
            <div class="notification-list">
                <ul>
                    <li ng-repeat="notification in notifications._items track by notification._id" ng-class="{unread: notification._unread}" sd-mark-as-read>
                        
                        <div class="sibling-spacer-10" style="display: flex;">
                            <div style="margin-right: -40px">
                                <sd-user-avatar data-user="notification.user"></sd-user-avatar>
                            </div>
                            <div>
                                <div class="content" ng-if="notification.name === 'notify'">
                                    <time sd-datetime data-date="notification._created"></time>
                                    <p class="text"><b>{{:: notification.user_name }}</b> <span translate>commented on</span> <i><a ng-href="#/authoring/{{ notification.item }}?_id={{ notification.item }}&comments={{ notification.data.comment_id }}" title="{{ notification.item_slugline }}">{{ :: notification.item_slugline }}</a></i>:<br>{{:: notification.data.comment }}</p>
                                </div>
                                <div class="content" ng-if="notification.name === 'user:mention'">
                                    <time sd-datetime data-date="notification._created"></time>
                                    <p class="text"><b>{{:: notification.user_name }}</b> <span translate>mentioned you</span> <i>
                                        <a title="{{ notification.item_slugline }}" ng-click="openArticle(notification)">
                                            {{:: notification.item_slugline}}
                                        </a></i>:<br>{{:: notification.data.comment }}</p>
                                </div>
                                <div class="content" ng-if="notification.name === 'translated:changed'">
                                    <time sd-datetime data-date="notification._created"></time>
                                    <p class="text"><b>{{:: notification.user_name }}</b> <span translate>changed the following original item. Please make sure to update the corresponding translated item accordingly</span> <i>
                                        <a title="{{ notification.item_slugline }}" ng-click="openArticle(notification)">{{ :: notification.item_slugline }}</a></i>
                                    </p>
                                </div>
                                <div
                                    ng-if="notificationsKeyed.hasOwnProperty(notification.name) === true"
                                    class="content"
                                >
                                    <time sd-datetime data-date="notification._created"></time>
                                    <p class="text">
                                        <sd-notification-from-extension data-notification="notification" handlers="notificationsKeyed"></sd-notification-from-extension>
                                    </p>
                                </div>
                                <div
                                    class="content" ng-if="notification.name !== 'notify' && notification.name !== 'user:mention' && notification.name !== 'translated:changed' && notificationsKeyed.hasOwnProperty(notification.name) !== true"
                                    ng-click="onNotificationClick(notification)"
                                >
                                    <time sd-datetime data-date="notification._created"></time>
                                    <a class="text" ng-if="notification.data.is_link"><b>{{:: notification.user_name || "System" }}</b>: <span sd-activity-message data-activity="notification"></span></a>
                                    <p class="text" ng-if="!notification.data.is_link"><b>{{:: notification.user_name || "System" }}</b>: <span sd-activity-message data-activity="notification"></span></p>
                                </div>
                            </div>
                        </div>
                    </li>
                    <!-- <li class="info" ng-show="notifications._items.length === 0" translate>All good so far.</li> -->
                    <!-- <li class="info" ng-show="notifications._items == null" translate>Loading...</li> -->
                </ul>
            </div>
        </section>
    </div>
</div>