Sire-Notifications

configuration.jsp

<%--
/**
 * Copyright (c) 2000-present Liferay, Inc. All rights reserved.
 *
 * This library is free software; you can redistribute it and/or modify it under
 * the terms of the GNU Lesser General Public License as published by the Free
 * Software Foundation; either version 2.1 of the License, or (at your option)
 * any later version.
 *
 * This library is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
 * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
 * details.
 */
--%>

<%@ include file="/init.jsp" %>

<div class="manage-notifications">
    <h3>
        <c:choose>
            <c:when test="<%= UserNotificationDeliveryLocalServiceUtil.getUserNotificationDeliveriesCount() > 0 %>">
                <span><liferay-ui:message key="receive-a-notification-when-someone" /></span>
            </c:when>
            <c:otherwise>
                <span><liferay-ui:message key="there-are-no-available-options-to-configure" /></span>
            </c:otherwise>
        </c:choose>
    </h3>

    <%
    Map<String, List<UserNotificationDefinition>> userNotificationDefinitionsMap = new TreeMap<String, List<UserNotificationDefinition>>(new PortletIdComparator(locale));

    userNotificationDefinitionsMap.putAll(UserNotificationManagerUtil.getUserNotificationDefinitions());

    for (Map.Entry<String, List<UserNotificationDefinition>> entry : userNotificationDefinitionsMap.entrySet()) {
    %>

        <table class="notification-deliveries table table-condensed">
            <caption><%= PortalUtil.getPortletTitle(entry.getKey(), locale) %></caption>
            <tbody>

            <%
            List<UserNotificationDefinition> userNotificationDefinitions = entry.getValue();

            for (UserNotificationDefinition userNotificationDefinition : userNotificationDefinitions) {
            %>

                <tr>
                    <td class="span10">
                        <liferay-ui:message key="<%= userNotificationDefinition.getDescription() %>" />
                    </td>

                    <%
                    Map<Integer, UserNotificationDeliveryType> userNotificationDeliveryTypesMap = userNotificationDefinition.getUserNotificationDeliveryTypes();

                    for (Map.Entry<Integer, UserNotificationDeliveryType> userNotificationDeliveryTypeEntry : userNotificationDeliveryTypesMap.entrySet()) {
                        UserNotificationDeliveryType userNotificationDeliveryType = userNotificationDeliveryTypeEntry.getValue();

                        UserNotificationDelivery userNotificationDelivery = UserNotificationDeliveryLocalServiceUtil.getUserNotificationDelivery(themeDisplay.getUserId(), entry.getKey(), userNotificationDefinition.getClassNameId(), userNotificationDefinition.getNotificationType(), userNotificationDeliveryType.getType(), userNotificationDeliveryType.isDefault());
                    %>

                        <td class="span2">
                            <aui:input cssClass="notification-delivery" data-userNotificationDeliveryId="<%= String.valueOf(userNotificationDelivery.getUserNotificationDeliveryId()) %>" disabled="<%= !userNotificationDeliveryType.isModifiable() %>" inlineLabel="true" label="<%= userNotificationDeliveryType.getName() %>" name="<%= String.valueOf(userNotificationDelivery.getUserNotificationDeliveryId()) %>" type="checkbox" value="<%= userNotificationDelivery.isDeliver() %>" />
                        </td>

                    <%
                    }
                    %>

                </tr>

            <%
            }
            %>

            </tbody>
        </table>

    <%
    }
    %>

</div>

<aui:script use="aui-base,aui-io-request">
    var userNotifications = A.one('#portlet_<%= PortletKeys.NOTIFICATIONS %>');

    var notificationDelivery = userNotifications.one('.manage-notifications');

    if (notificationDelivery) {
        notificationDelivery.delegate(
            'change',
            function(event) {
                event.preventDefault();

                var currentTarget = event.currentTarget;

                A.io.request(
                    '<portlet:actionURL name="updateUserNotificationDelivery" />',
                    {
                        data: {
                            <portlet:namespace />deliver: currentTarget.attr('checked'),
                            <portlet:namespace />userNotificationDeliveryId: currentTarget.attr('data-userNotificationDeliveryId')
                        }
                    }
                );
            },
            '.notification-deliveries .notification-delivery'
        );
    }
</aui:script>

main.scss

@mixin smallButton {
    background-color: #e7e7e7;
    border: none;
    color: #333;
    font-size: 11px;
    margin: 0;
    padding: 10px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    display: inline-block;
    border-radius: none;
}

.notifications-portlet {
    .user-notifications-container {
        .row-fluid {
            margin: 0;
            padding: 0;
            .user-notifications-list-container {
                padding-right: 0;
            }
        }
    }
    
    .user-notifications-list-container {
        border: none;
        @media #{$screen-sm} {
                padding: 0;
                margin: 0;
                width: 100%;
        }
        .user-notifications-list {
            .pagination {

                border: none;

                .page-info {
                    @include smallButton;
                    background-color: transparent;
                }
                .right-nav, .left-nav {
                    padding: 0;
                    a {
                        @include smallButton;
                        &:hover {
                            background-color: #b9b9b9;
                        }
                    }
                }
            }
            .mark-all-as-read {
                margin: 0;
                a {
                    margin: 15px 0;
                    @include smallButton;
                }
            }
        }

        .user-notifications {
            
            margin: 0;

            li.user-notification {

                padding: 0;    
                margin: 0 0 20px 0;
                border: none;

                &.archived {
                    filter: alpha(opacity=50);
                    opacity: 0.4;
                }

                .user-notification-link {
                    padding: 10px;
                    border-bottom: 1px solid #7f7f7f;
                    border-top: 1px solid #ddd;
                    border-right: 1px solid #ddd;
                    border-left: 2px solid #ed8611;
                    background: #f5f5f5;

                    .left-container {
                        margin: 0;
                    }

                    .sender {
                        float: right;
                        .user-thumbnail {
                            @media #{$screen-xxs} {
                                display: none;
                            }
                            @media #{$screen-xs} {
                                display: none;
                            }
                            height: initial;
                            width: initial;
                            display: inline-block;
                            border-radius: initial;
                            border: none;
                            border: none;
                            box-shadow: none;
                            img {
                                height: initial;
                                max-height: 50px;
                                width: initial;
                                border-radius: 0 50% 50%;
                                box-shadow: 2px 1px 4px 0 rgba(50, 50, 50, 0.25);
                                margin: 0 0 0 20px;
                            }
                        }
                    }
                    .content {
                        margin: 0;
                        .body-container {
                            float: none; 
                            .timestamp {
                                float: none;
                                text-align: right;
                                margin-top: 10px;
                            }
                        }

                    }
                }
            }
        }
    }

    .user-notifications-sidebar {

        border-style: solid;
        border-width: 1px;
        border-color: #dcdcdc;
        background: #f5f5f5;
        color: #333;
        padding: 0;
        margin-bottom: 20px;

        .nav {
            float: none;
            padding: 0;
            margin: 0;
            a {
                display: block;
                background: none;
                color: #4d4d4d;
                padding: 5px 10px;
                font-size: 14px;
                line-height: 24px;
                text-transform: capitalize;
                border-bottom: solid 1px #dcdcdc;
                border-radius: 0;
                position: relative;
                bottom: -1px;
                margin-top: -1px;

                &:hover {
                    background: #dbf1f9;
                }

                &.selected {
                    background: #008cba;
                    color: #fff;
                }

                span.count {
                    display: inline-block;
                    line-height: 1;
                    margin-bottom: auto;
                    position: relative;
                    text-align: center;
                    background-color: #e7e7e7;
                    margin-top: 2px;
                    color: #333;

                    border-radius: 3px;
                    white-space: nowrap;
                    padding: .26667rem .43333rem;
                    font-size: .73333rem;
                }
            }
        }
    }

    .notifications-configurations {
        .manage-notifications {
            
            padding: 0;

            h3 {
                font-size: 20px;
                margin: 0 0 10px 0;
                padding: 0;
            }

            .notification-deliveries.table {
                margin: 0;
                caption {
                    padding: 5px 0;
                    margin: 10px 0 0 0;
                }
                tr {
                    td {
                        padding: 5px 0;
                        &.span2 {
                            vertical-align: middle;
                            margin: 0;
                            padding: 5px;
                            .control-group {
                                margin: 0;
                            }
                        }
                    }
                }
            }
        }
    }

}

view.jsp

<%--
/**
 * Copyright (c) 2000-present Liferay, Inc. All rights reserved.
 *
 * This library is free software; you can redistribute it and/or modify it under
 * the terms of the GNU Lesser General Public License as published by the Free
 * Software Foundation; either version 2.1 of the License, or (at your option)
 * any later version.
 *
 * This library is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
 * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
 * details.
 */
--%>

<%@ include file="/init.jsp" %>

<%
boolean actionable = ParamUtil.getBoolean(request, "actionable");
%>

<div class="clearfix user-notifications-container <%= actionable ? "actionable" : "non-actionable" %>">
    <h2 class="portlet-header underlined">Notifications</h2>
    <aui:row>
        <aui:col cssClass="nav-bar user-notifications-sidebar" width="<%= 30 %>">
            <div class="nav">
                <a class="clearfix non-actionable <%= !actionable ? "selected" : "" %>" href="javascript:;">
                    <span class="title"><liferay-ui:message key="notifications" /> </span>

                    <%
                    int unreadNonActionableUserNotificationsCount = NotificationsUtil.getArchivedUserNotificationEventsCount(themeDisplay.getUserId(), false, false);
                    %>

                    <span class="count"><%= unreadNonActionableUserNotificationsCount %> </span>
                </a>
            </div>

            <div class="nav">
                <a class="actionable clearfix <%= actionable ? "selected" : "" %>" href="javascript:;">
                    <span class="title"><liferay-ui:message key="requests" /></span>

                    <%
                    int unreadActionableUserNotificationsCount = NotificationsUtil.getArchivedUserNotificationEventsCount(themeDisplay.getUserId(), true, false);
                    %>

                    <span class="count"><%= unreadActionableUserNotificationsCount %></span>
                </a>
            </div>

            <div class="nav">
                <a class="clearfix manage" href="javascript:;">
                    <span class="title"><liferay-ui:message key="notification-delivery" /></span>
                </a>
            </div>
        </aui:col>

        <aui:col cssClass="user-notifications-list-container" width="<%= 70 %>">
            <div class="unstyled user-notifications-list">

                <ul class="user-notifications"></ul>

                <div class="mark-all-as-read"><a class="hide" href="javascript:;"><liferay-ui:message key="mark-as-read" /></a></div>

                <div class="bottom clearfix pagination">
                    <span class="hide left-nav previous"><a href="javascript:;"><liferay-ui:message key="previous" /></a></span>

                    <span class="hide page-info"></span>

                    <span class="hide next right-nav"><a href="javascript:;"><liferay-ui:message key="next" /></a></span>
                </div>
            </div>

            <div class="hide notifications-configurations"></div>
        </aui:col>
    </aui:row>
</div>

<aui:script use="aui-base,liferay-plugin-notifications">
    var notificationsCount = '.non-actionable .count';

    if (<%= actionable %>) {
        notificationsCount = '.actionable .count'
    }

    var notificationsList = new Liferay.NotificationsList(
        {
            actionable: <%= actionable %>,
            baseActionURL: '<%= PortletURLFactoryUtil.create(request, portletDisplay.getId(), themeDisplay.getPlid(), PortletRequest.ACTION_PHASE) %>',
            baseRenderURL: '<%= PortletURLFactoryUtil.create(request, portletDisplay.getId(), themeDisplay.getPlid(), PortletRequest.RENDER_PHASE) %>',
            baseResourceURL: '<%= PortletURLFactoryUtil.create(request, portletDisplay.getId(), themeDisplay.getPlid(), PortletRequest.RESOURCE_PHASE) %>',
            delta: <%= fullViewDelta %>,
            fullView: <%= true %>,
            markAllAsReadNode: '.user-notifications-list .mark-all-as-read',
            namespace: '<portlet:namespace />',
            nextPageNode: '.pagination .next',
            notificationsContainer: '.notifications-portlet .user-notifications-container',
            notificationsCount: notificationsCount,
            notificationsNode: '.user-notifications-list .user-notifications',
            paginationInfoNode: '.pagination .page-info',
            previousPageNode: '.pagination .previous',
            portletKey: '<%= portletDisplay.getId() %>',
            start: 0
        }
    );

    new Liferay.Notifications(
        {
            baseRenderURL: '<%= PortletURLFactoryUtil.create(request, portletDisplay.getId(), themeDisplay.getPlid(), PortletRequest.RENDER_PHASE) %>',
            notificationsList: notificationsList
        }
    )
</aui:script>