From 9f943508e6bb7038aa6addd599114522a3897830 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Benqu=C3=A9?= <david.benque@xwiki.com>
Date: Tue, 15 Mar 2022 16:09:58 +0000
Subject: [PATCH] Show notification dot when toolbar is collapsed

---
 customize.dist/src/less2/include/toolbar.less | 16 +++++++++++++++-
 www/common/toolbar.js                         |  9 ++++++++-
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less
index 71bcb53cc..134368945 100644
--- a/customize.dist/src/less2/include/toolbar.less
+++ b/customize.dist/src/less2/include/toolbar.less
@@ -1045,10 +1045,24 @@
         is very small, which makes it unlikely that you'll see the title unless
         you hover perfectly. The same is true of the drive's grid/list view toggle.
 */
-
+            position: relative;
             .fa {
                 margin-right: 0px;
             }
+            .cp-collapsed-notif {
+                display: inline-block;
+                width: 12px;
+                height: 12px;
+                background-color: @cryptpad_color_red;
+                position: absolute;
+                bottom: -3px;
+                right: -3px;
+                border: 2px solid @cp_toolbar-bg;
+                border-radius: 50%;
+            }
+            &:not(.cp-toolbar-button-active) .cp-collapsed-notif {
+                display: none;
+            }
         }
 
         &.cp-toolbar-small {
diff --git a/www/common/toolbar.js b/www/common/toolbar.js
index c5c142c0c..0c702dabf 100644
--- a/www/common/toolbar.js
+++ b/www/common/toolbar.js
@@ -463,15 +463,18 @@ MessengerUI, Messages, Pages) {
     createCollapse = function (toolbar) {
         var up = h('i.fa.fa-chevron-up', {title: Messages.toolbar_collapse});
         var down = h('i.fa.fa-chevron-down', {title: Messages.toolbar_expand});
+        var notif = h('span.cp-collapsed-notif');
 
         var $button = $(h('button.cp-toolbar-collapse',[
             up,
-            down
+            down,
+            notif
         ]));
         var $up = $(up);
         var $down = $(down);
         toolbar.$bottomR.prepend($button);
         $down.hide();
+        $(notif).hide();
         $button.click(function () {
             toolbar.$top.toggleClass('toolbar-hidden');
             var hidden = toolbar.$top.hasClass('toolbar-hidden');
@@ -482,6 +485,7 @@ MessengerUI, Messages, Pages) {
             } else {
                 $up.show();
                 $down.hide();
+                $(notif).hide();
             }
         });
     };
@@ -1173,6 +1177,9 @@ MessengerUI, Messages, Pages) {
 
         Common.mailbox.subscribe(['notifications', 'team', 'broadcast', 'reminders'], {
             onMessage: function (data, el) {
+                if (toolbar.$top.hasClass('toolbar-hidden')) {
+                    $('.cp-collapsed-notif').css('display', '');
+                }
                 if (el) {
                     $(div).prepend(el);
                 }