First draft for notifications

[github/wallabag/wallabag.git] / src / Wallabag / CoreBundle / Resources / views / themes / material / layout.html.twig

diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/layout.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/material/layout.html.twig
index 2dab1c186d60e9fd6f2c9b372b2113f3f898928d..6e2828de438b03cdf429389bb121795f865594fb 100644 (file)
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/layout.html.twig
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/layout.html.twig
@@ -105,6 +105,13 @@
                         <i class="material-icons">search</i>
                     </a>
                 </li>
+                <li id="button_notifications">
+                    {% set unreadNotifs = app.user.notifications | unread_notif | length %}
+                    <a class="nav-panel-menu button-collapse-right tooltipped js-notifications-action" data-position="bottom" data-delay="50" data-tooltip="{{ 'menu.top.notifications' | trans }}" href="#" data-activates="notifications">
+                        <i class="material-icons">notifications{% if unreadNotifs == 0 %}_none{% endif %}</i>
+                        {% if unreadNotifs > 0 %}<span id="notifications-count" class="red-text text-accent-2">{{ unreadNotifs }}</span>{% endif %}
+                    </a>
+                </li>
                 <li id="button_filters">
                     <a class="nav-panel-menu button-collapse-right tooltipped js-filters-action" data-position="bottom" data-delay="50" data-tooltip="{{ 'menu.top.filter_entries'|trans }}" href="#" data-activates="filters">
                         <i class="material-icons">filter_list</i>
@@ -130,6 +137,44 @@
     </nav>
 {% endblock %}
 
+{% block content %}
+
+    <div id="notifications" class="side-nav">
+        <ul class="collection">
+            {% for notification in app.user.notifications | slice(0, 10) %}
+            <li class="notification collection-item avatar{% if not notification.read %} light-blue lighten-5{% else %} grey-text{% endif %}">
+                <i class="material-icons circle">{% spaceless %}
+                    {% if notification.type == constant('TYPE_ADMIN', notification) %}
+                        build
+                    {% elseif notification.type == constant('TYPE_USER', notification) %}
+                        person
+                    {% elseif notification.type == constant('TYPE_RELEASE', notification) %}
+                        new_releases
+                    {% endif %}
+                    {% endspaceless %}</i>
+                <span class="title">{{ notification.title }}</span>
+                <p><em>{{ notification.timestamp | date }}</em></p>
+                <div>
+                    {% for action in notification.actions %}
+                        <a class="btn waves-effect waves-light {% spaceless %}
+                               {% if action.type == constant('TYPE_OK', action) %}
+                               {% elseif action.type == constant('TYPE_YES', action) %}
+                                    cyan
+                               {% elseif action.type == constant('TYPE_NO', action) %}
+                                    red
+                               {% elseif action.type == constant('TYPE_INFO', action) %}
+                                    blue-grey
+                               {% endif %}
+                                {% endspaceless %}" href="{{ action.link }}">{{ action.label }}</a>
+                    {% endfor %}
+                </div>
+            </li>
+            {% endfor %}
+        </ul>
+        <a class="waves-effect waves-light btn" href="{{ path('notifications-all') }}">{{ 'notifications.sidebar.view_more' | trans }}</a>
+    </div>
+{% endblock %}
+
 {% block footer %}
     <footer class="page-footer cyan darken-2">
         <div class="footer-copyright">