notification centre improvements

Serghey Rodin · Serghey Rodin · commit addd9a8f02f2 · 2016-10-28T17:55:58.000+03:00
diff --git a/web/css/styles.min.css b/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;
diff --git a/web/inc/i18n/ar.php b/web/inc/i18n/ar.php
@@ -751,6 +751,8 @@
 
     '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' => 'النطاق الرئيسي',
diff --git a/web/inc/i18n/bs.php b/web/inc/i18n/bs.php
@@ -750,4 +750,5 @@
 
     'maximum characters length, including prefix' => 'maksimalna dužina sme biti %s karaktera, uključujući i prefix',
 
+    'no notifications' => 'no notifications',
 );
diff --git a/web/inc/i18n/cn.php b/web/inc/i18n/cn.php
@@ -751,4 +751,5 @@
 
     'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',
 
+    'no notifications' => 'no notifications',
 );
diff --git a/web/inc/i18n/cz.php b/web/inc/i18n/cz.php
@@ -752,4 +752,5 @@
 
     'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',
 
+    'no notifications' => 'no notifications',
 );
diff --git a/web/inc/i18n/da.php b/web/inc/i18n/da.php
@@ -753,4 +753,5 @@
 
     'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',
 
+    'no notifications' => 'no notifications',
 );
diff --git a/web/inc/i18n/de.php b/web/inc/i18n/de.php
@@ -751,4 +751,5 @@
 
     'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',
 
+    'no notifications' => 'no notifications',
 );
diff --git a/web/inc/i18n/el.php b/web/inc/i18n/el.php
@@ -752,4 +752,5 @@
 
     'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',
 
+    'no notifications' => 'no notifications',
 );
diff --git a/web/inc/i18n/en.php b/web/inc/i18n/en.php
@@ -751,4 +751,5 @@
 
     'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',
 
+    'no notifications' => 'no notifications',
 );
diff --git a/web/inc/i18n/es.php b/web/inc/i18n/es.php
@@ -749,4 +749,5 @@
 
     'maximum characters length, including prefix' => 'usar un máximo de %s, incluyendo prefijo',
 
+    'no notifications' => 'no notifications',
 );
diff --git a/web/inc/i18n/fa.php b/web/inc/i18n/fa.php
@@ -754,6 +754,8 @@
 
     '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',
 ];
diff --git a/web/inc/i18n/fi.php b/web/inc/i18n/fi.php
@@ -753,6 +753,7 @@
 
     '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',
diff --git a/web/inc/i18n/fr.php b/web/inc/i18n/fr.php
@@ -751,6 +751,7 @@
 
     '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',
diff --git a/web/inc/i18n/hu.php b/web/inc/i18n/hu.php
@@ -755,6 +755,7 @@
 
     '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',
 );
diff --git a/web/inc/i18n/id.php b/web/inc/i18n/id.php
@@ -754,4 +754,5 @@
 
     'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',
 
+    'no notifications' => 'no notifications',
 );
diff --git a/web/inc/i18n/it.php b/web/inc/i18n/it.php
@@ -752,4 +752,5 @@
 
     'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',
 
+    'no notifications' => 'no notifications',
 );
diff --git a/web/inc/i18n/ja.php b/web/inc/i18n/ja.php
@@ -751,4 +751,5 @@
 
     'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',
 
+    'no notifications' => 'no notifications',
 );
diff --git a/web/inc/i18n/ka.php b/web/inc/i18n/ka.php
@@ -751,4 +751,5 @@
 
     'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',
 
+    'no notifications' => 'no notifications',
 );
diff --git a/web/inc/i18n/nl.php b/web/inc/i18n/nl.php
@@ -752,4 +752,5 @@
 
     'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',
 
+    'no notifications' => 'no notifications',
 );
diff --git a/web/inc/i18n/no.php b/web/inc/i18n/no.php
@@ -752,4 +752,5 @@
 
     'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',
 
+    'no notifications' => 'no notifications',
 );
diff --git a/web/inc/i18n/pl.php b/web/inc/i18n/pl.php
@@ -751,4 +751,5 @@
 
     'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',
 
+    'no notifications' => 'no notifications',
 );
diff --git a/web/inc/i18n/pt-BR.php b/web/inc/i18n/pt-BR.php
@@ -751,4 +751,5 @@
 
     'maximum characters length, including prefix' => 'comprimento máximo de % caracteres, incluindo o prefixo',
 
+    'no notifications' => 'no notifications',
 );
diff --git a/web/inc/i18n/pt.php b/web/inc/i18n/pt.php
@@ -751,4 +751,5 @@
 
     'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',
 
+    'no notifications' => 'no notifications',
 );
diff --git a/web/inc/i18n/ro.php b/web/inc/i18n/ro.php
@@ -753,4 +753,5 @@
 
     'maximum characters length, including prefix' => 'maximum %s caractere, incluzând prefixul',
 
+    'no notifications' => 'no notifications',
 );
diff --git a/web/inc/i18n/ru.php b/web/inc/i18n/ru.php
@@ -752,4 +752,5 @@
 
     'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',
 
+    'no notifications' => 'no notifications',
 );
diff --git a/web/inc/i18n/se.php b/web/inc/i18n/se.php
@@ -751,4 +751,5 @@
 
     'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',
 
+    'no notifications' => 'no notifications',
 );
diff --git a/web/inc/i18n/tr.php b/web/inc/i18n/tr.php
@@ -752,4 +752,5 @@
 
     'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',
 
+    'no notifications' => 'no notifications',
 );
diff --git a/web/inc/i18n/tw.php b/web/inc/i18n/tw.php
@@ -774,4 +774,5 @@
 
     'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',
 
+    'no notifications' => 'no notifications',
 );
diff --git a/web/inc/i18n/ua.php b/web/inc/i18n/ua.php
@@ -752,4 +752,5 @@
 
     'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',
 
+    'no notifications' => 'no notifications',
 );
diff --git a/web/inc/i18n/vi.php b/web/inc/i18n/vi.php
@@ -750,4 +750,5 @@
 
     'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',
 
+    'no notifications' => 'no notifications',
 );
diff --git a/web/js/events.js b/web/js/events.js
@@ -406,23 +406,29 @@ 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-", ""));
         });
 
     });
 }
 
 
 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){
diff --git a/web/js/i18n.js.php b/web/js/i18n.js.php
@@ -63,3 +63,4 @@
 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')?>';
diff --git a/web/js/templates.js b/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
     //
 
diff --git a/web/templates/scripts.html b/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>
 

Original file line number	Diff line number	Diff line change
`@@ -750,4 +750,5 @@`
`750`	`750`
`751`	`751`	`'maximum characters length, including prefix' => 'maksimalna dužina sme biti %s karaktera, uključujući i prefix',`
`752`	`752`
	`753`	`+ 'no notifications' => 'no notifications',`
`753`	`754`	`);`
Original file line number	Diff line number	Diff line change
`@@ -751,4 +751,5 @@`
`751`	`751`
`752`	`752`	`'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',`
`753`	`753`
	`754`	`+ 'no notifications' => 'no notifications',`
`754`	`755`	`);`
Original file line number	Diff line number	Diff line change
`@@ -752,4 +752,5 @@`
`752`	`752`
`753`	`753`	`'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',`
`754`	`754`
	`755`	`+ 'no notifications' => 'no notifications',`
`755`	`756`	`);`
Original file line number	Diff line number	Diff line change
`@@ -753,4 +753,5 @@`
`753`	`753`
`754`	`754`	`'maximum characters length, including prefix' => 'maximum %s characters length, including prefix',`
`755`	`755`
	`756`	`+ 'no notifications' => 'no notifications',`
`756`	`757`	`);`
Original file line number	Diff line number	Diff line change
`@@ -749,4 +749,5 @@`
`749`	`749`
`750`	`750`	`'maximum characters length, including prefix' => 'usar un máximo de %s, incluyendo prefijo',`
`751`	`751`
	`752`	`+ 'no notifications' => 'no notifications',`
`752`	`753`	`);`