notification centre improvements

web/css/styles.min.css

@@ -595,6 +595,15 @@ a {
   text-decoration: line-through;
 }
 
+.unselectable {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
 .clearfix:before,
 .clearfix:after {
   content: '';
@@ -830,6 +839,8 @@ input[type="checkbox"] {
   font-size: 12px;
   padding: 0;
   color: #7f7f7f;
+  max-height: 95%;
+  overflow: auto;
 }
 .notification-container .unseen {
   color: #ABABAB;
@@ -840,21 +851,33 @@ input[type="checkbox"] {
   border-bottom: 1px solid #555;
   padding: 10px 15px 24px;
 }
+.notification-container li.empty {
+  padding-top: 50px;
+  height: 50px;
+  font-size: 15px;
+  font-style: italic;
+  text-align: center;
+  color: #999;
+}
+
 .notification-container .mark-seen {
-  background-color: #abc04b;
-  border: 2px solid #454545;
-  border-radius: 10px;
+  background: rgba(0, 0, 0, 0) url("/images/sprite.png?1446554103") repeat scroll -426px 165px;
+  border: 3px solid #454545;
   cursor: pointer;
   display: none;
   float: right;
-  height: 7px;
+  height:11px;
   margin-right: -5px;
   margin-top: 0;
-  width: 7px;
+  width: 11px;
+  opacity: 0.5;
+  border-radius: 10px;
 }
 .notification-container .mark-seen:hover {
   background-color: #333;
-  border-color: #abc04b;
+  border-color: #333;
+
+  opacity: 0.8;
 }
 .notification-container .mark-seen:active {
   background-color: #777;

web/inc/i18n/ar.php

@@ -751,6 +751,8 @@ $LANG['ar'] = array(
 
     'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',
 
+    'no notifications' => 'no notifications',
+
 // Texts below doesn't exist in en.php
     '%s rule' => 'قواعد %s',
     'MainDomain' => 'النطاق الرئيسي',

web/inc/i18n/bs.php

@@ -750,4 +750,5 @@ $LANG['bs'] = array(
 
     'maximum characters length, including prefix' => 'maksimalna dužina sme biti %s karaktera, uključujući i prefix',
 
+    'no notifications' => 'no notifications',
 );

web/inc/i18n/cn.php

@@ -751,4 +751,5 @@ $LANG['cn'] = array(
 
     'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',
 
+    'no notifications' => 'no notifications',
 );

web/inc/i18n/cz.php

@@ -752,4 +752,5 @@ $LANG['cz'] = array(
 
     'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',
 
+    'no notifications' => 'no notifications',
 );

web/inc/i18n/da.php

@@ -753,4 +753,5 @@ $LANG['da'] = array(
 
     'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',
 
+    'no notifications' => 'no notifications',
 );

web/inc/i18n/de.php

@@ -751,4 +751,5 @@ $LANG['de'] = array(
 
     'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',
 
+    'no notifications' => 'no notifications',
 );

web/inc/i18n/el.php

@@ -752,4 +752,5 @@ $LANG['el'] = array(
 
     'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',
 
+    'no notifications' => 'no notifications',
 );

web/inc/i18n/en.php

@@ -751,4 +751,5 @@ $LANG['en'] = array(
 
     'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',
 
+    'no notifications' => 'no notifications',
 );

web/inc/i18n/es.php

@@ -749,4 +749,5 @@ $LANG['es'] = array(
 
     'maximum characters length, including prefix' => 'usar un máximo de %s, incluyendo prefijo',
 
+    'no notifications' => 'no notifications',
 );

web/inc/i18n/fa.php

@@ -754,6 +754,8 @@ $LANG['fa'] = [
 
     'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',
 
+    'no notifications' => 'no notifications',
+
 // Texts below doesn't exist in en.php
     '70 خط اخر  %s.%s.log' => 'هفتاد خط انتهايي از %s.%s.log',
 ];

web/inc/i18n/fi.php

@@ -753,6 +753,7 @@ $LANG['fi'] = array(
 
     'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',
 
+    'no notifications' => 'no notifications',
 // Texts below doesn't exist in en.php
     'traffic' => 'tiedonsiirto',
     'disk' => 'levytila',

web/inc/i18n/fr.php

@@ -751,6 +751,7 @@ $LANG['fr'] = array(
 
     'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',
 
+    'no notifications' => 'no notifications',
 // Texts below doesn't exist in en.php
     'disk' => 'disque',
     'traffic' => 'traffic',

web/inc/i18n/hu.php

@@ -755,6 +755,7 @@ $LANG['hu'] = array(
 
     'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',
 
+    'no notifications' => 'no notifications',
 // Texts below doesn't exist in en.php
     'Bandwidth Usage eth1' => 'eth1 sávszélesség használat',
 );

web/inc/i18n/id.php

@@ -754,4 +754,5 @@ $LANG['id'] = array(
 
     'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',
 
+    'no notifications' => 'no notifications',
 );

web/inc/i18n/it.php

@@ -752,4 +752,5 @@ $LANG['it'] = array(
 
     'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',
 
+    'no notifications' => 'no notifications',
 );

web/inc/i18n/ja.php

@@ -751,4 +751,5 @@ $LANG['ja'] = array(
 
     'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',
 
+    'no notifications' => 'no notifications',
 );

web/inc/i18n/ka.php

@@ -751,4 +751,5 @@ $LANG['ka'] = array(
 
     'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',
 
+    'no notifications' => 'no notifications',
 );

web/inc/i18n/nl.php

@@ -752,4 +752,5 @@ $LANG['nl'] = array(
 
     'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',
 
+    'no notifications' => 'no notifications',
 );

web/inc/i18n/no.php

@@ -752,4 +752,5 @@ $LANG['no'] = array(
 
     'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',
 
+    'no notifications' => 'no notifications',
 );

web/inc/i18n/pl.php

@@ -751,4 +751,5 @@ $LANG['pl'] = array(
 
     'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',
 
+    'no notifications' => 'no notifications',
 );

web/inc/i18n/pt-BR.php

@@ -751,4 +751,5 @@ $LANG['pt-BR'] = array(
 
     'maximum characters length, including prefix' => 'comprimento máximo de % caracteres, incluindo o prefixo',
 
+    'no notifications' => 'no notifications',
 );

web/inc/i18n/pt.php

@@ -751,4 +751,5 @@ $LANG['pt'] = array(
 
     'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',
 
+    'no notifications' => 'no notifications',
 );

web/inc/i18n/ro.php

@@ -753,4 +753,5 @@ $LANG['ro'] = array(
 
     'maximum characters length, including prefix' => 'maximum %s caractere, incluzând prefixul',
 
+    'no notifications' => 'no notifications',
 );

web/inc/i18n/ru.php

@@ -752,4 +752,5 @@ $LANG['ru'] = array(
 
     'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',
 
+    'no notifications' => 'no notifications',
 );

web/inc/i18n/se.php

@@ -751,4 +751,5 @@ $LANG['se'] = array(
 
     'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',
 
+    'no notifications' => 'no notifications',
 );

web/inc/i18n/tr.php

@@ -752,4 +752,5 @@ $LANG['tr'] = array(
 
     'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',
 
+    'no notifications' => 'no notifications',
 );

web/inc/i18n/tw.php

@@ -774,4 +774,5 @@ $LANG['tw'] = array(
 
     'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',
 
+    'no notifications' => 'no notifications',
 );

web/inc/i18n/ua.php

@@ -752,4 +752,5 @@ $LANG['ua'] = array(
 
     'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',
 
+    'no notifications' => 'no notifications',
 );

web/inc/i18n/vi.php

@@ -750,4 +750,5 @@ $LANG['vi'] = array(
 
     'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',
 
+    'no notifications' => 'no notifications',
 );

web/js/events.js

@@ -406,12 +406,16 @@ VE.notifications.get_list = function(){
             acc.push(tpl.finalize());
         });
 
+        if(!Object.keys(data).length){
+            var tpl = Tpl.get('notification_empty', 'WEB');
+            acc.push(tpl.finalize());
+        }
+
         $('.notification-container').html(acc.done()).show();
 
         $('.notification-container .mark-seen').click(function(event){
-            /// TODO add token
-            VE.notifications.mark_seen($(event.target).attr('id').replace("notification-", ""));
-//            VE.notifications.delete($(event.target).attr('id').replace("notification-", ""));
+//            VE.notifications.mark_seen($(event.target).attr('id').replace("notification-", ""));
+            VE.notifications.delete($(event.target).attr('id').replace("notification-", ""));
         });
 
     });
@@ -419,10 +423,12 @@ VE.notifications.get_list = function(){
 
 
 VE.notifications.delete = function(id){
-    $('#notification-'+id).parents('li').remove();
+    $('#notification-'+id).parents('li').hide();
     $.ajax({
         url: "/delete/notification/?delete=1&notification_id="+id+"&token="+$('#token').attr('token')
     });
+    if($('.notification-container li:visible').length == 0)
+        $('.l-profile__notifications').removeClass('updates').removeClass('active');
 }
 
 VE.notifications.mark_seen = function(id){

web/js/i18n.js.php

@@ -63,3 +63,4 @@ App.Constants.FM_READ_BY_OTHERS                 = '<?=__('read by others')?>';
 App.Constants.FM_WRITE_BY_OTHERS                = '<?=__('write by others')?>';
 App.Constants.FM_EXECUTE_BY_OTHERS              = '<?=__('execute/search by others')?>';
 
+App.Constants.NOTIFICATIONS_EMPTY               = '<?=__('no notifications')?>';

web/js/templates.js

@@ -6,13 +6,18 @@ App.Templates.html = {
     WEB: {
         hint: [''],
         notification: [
-                    '<li class="~!:UNSEEN~!"><span class="mark-seen" id="notification-~!:ID~!">&nbsp;</span>\
-                        <span class="title"><span class="icon ~!:TYPE~!">&nbsp;</span>~!:TOPIC~!</span>\
+                    '<li class="~!:UNSEEN~!"><span class="unselectable mark-seen" id="notification-~!:ID~!">&nbsp;</span>\
+                        <span class="title"><span class="unselectable icon ~!:TYPE~!">&nbsp;</span>~!:TOPIC~!</span>\
                         ~!:NOTICE~!\
                     </li>'
+        ],
+        notification_empty: [
+                    '<li class="empty">\
+                        '+App.Constants.NOTIFICATIONS_EMPTY+'\
+                    </li>'
         ]
-
     },
+
     // file manager
     //
 

web/templates/scripts.html

@@ -5,6 +5,7 @@
   <script type="text/javascript" src="/js/events.js?<?=JS_LATEST_UPDATE?>"></script>
   <script type="text/javascript" src="/js/app.js?<?=JS_LATEST_UPDATE?>"></script>
   <script type="text/javascript" src="/js/init.js?<?=JS_LATEST_UPDATE?>"></script>
+  <script type="text/javascript" src="/js/i18n.js.php?<?=JS_LATEST_UPDATE?>"></script>
   <script type="text/javascript" src="/js/templates.js?<?=JS_LATEST_UPDATE?>"></script>
   <script type="text/javascript" src="/js/jquery.finder.js?<?=JS_LATEST_UPDATE?>"></script>