Add a link to notification settings on top dropdown list (#7073)

* Add a link to notification settings on top dropdown list

* Update styles for notification dropdown list

CHANGELOG.md

@@ -5,6 +5,7 @@ HumHub Changelog
 1.17.0 (TBA)
 ------------
 - Enh #7070: Add GitHub action for PHP CS Fixer
+- Enh #7073: Add a link to notification settings on top dropdown list
 
 
 1.16.0 (June 19, 2024)

protected/humhub/modules/notification/resources/js/humhub.notification.js

@@ -174,20 +174,17 @@ humhub.module('notification', function (module, require, $) {
             return;
         }
 
-        $('#badge-notifications').hide();
-
         event.trigger('humhub:notification:updateCount', [$count]);
 
         if (!$count) {
             updateTitle(false);
             $('#badge-notifications').html('0');
-            $('#mark-seen-link').hide();
+            $('#badge-notifications, #mark-seen-link').hide();
             $('#icon-notifications .fa').removeClass("animated swing");
         } else {
             updateTitle($count);
             $('#badge-notifications').html($count);
-            $('#mark-seen-link').show();
-            $('#badge-notifications').fadeIn('fast');
+            $('#badge-notifications, #mark-seen-link').fadeIn('fast');
 
             // Clone icon to retrigger animation
             var $icon = $('#icon-notifications .fa');
@@ -359,4 +356,3 @@ humhub.module('notification', function (module, require, $) {
         OverviewWidget: OverviewWidget
     });
 });
-

protected/humhub/modules/notification/widgets/views/overview.php

@@ -1,5 +1,7 @@
 <?php
 
+use humhub\widgets\Button;
+use humhub\widgets\Link;
 use humhub\widgets\LoaderWidget;
 use yii\helpers\Url;
 use yii\helpers\Html;
@@ -18,24 +20,33 @@ use yii\helpers\Html;
 <!-- container for ajax response -->
 <ul id="dropdown-notifications" class="dropdown-menu">
     <li class="dropdown-header">
-        <div class="arrow"></div><?= Yii::t('NotificationModule.base', 'Notifications'); ?>
-        <div class="dropdown-header-link">
-            <a id="mark-seen-link" data-action-click='markAsSeen'
-               data-action-url="<?= Url::to(['/notification/list/mark-as-seen']); ?>">
-                <?= Yii::t('NotificationModule.base', 'Mark all as seen'); ?>
-            </a>
+        <div class="arrow"></div>
+        <?= Yii::t('NotificationModule.base', 'Notifications') ?>
+        <div class="dropdown-header-actions">
+            <?= Button::defaultType()
+                ->icon('check')
+                ->action('markAsSeen', ['/notification/list/mark-as-seen'])
+                ->id('mark-seen-link')
+                ->style('display:none')
+                ->sm()
+                ->tooltip(Yii::t('NotificationModule.base', 'Mark all as seen')) ?>
+            <?= Button::defaultType()
+                ->icon('cog')
+                ->link(['/notification/user'])
+                ->sm()
+                ->tooltip(Yii::t('NotificationModule.base', 'Notification Settings')) ?>
         </div>
     </li>
     <li>
         <ul class="media-list"></ul>
     </li>
     <li id="loader_notifications">
-        <?= LoaderWidget::widget(); ?>
+        <?= LoaderWidget::widget() ?>
     </li>
     <li>
         <div class="dropdown-footer">
-            <a class="btn btn-default col-md-12" href="<?= Url::to(['/notification/overview']); ?>">
-                <?= Yii::t('NotificationModule.base', 'Show all notifications'); ?>
+            <a class="btn btn-default col-md-12" href="<?= Url::to(['/notification/overview']) ?>">
+                <?= Yii::t('NotificationModule.base', 'Show all') ?>
             </a>
         </div>
     </li>

static/less/media.less

@@ -22,7 +22,10 @@
 
     li.new {
         border-left: 3px solid @info;
-        background-color: lighten(@info, 45%);
+        background-color: @background-color-highlight;
+        &:hover {
+            background-color: @background-color-highlight-soft;
+        }
     }
 
     li:hover,

static/less/topbar.less

@@ -28,28 +28,23 @@
     }
 
     .dropdown-header {
-        font-size: 16px;
-        padding: 3px 10px;
+        font-size: 18px;
+        padding: 6px 16px;
         margin-bottom: 10px;
-        font-weight: 300;
-        color: @text-color-soft;
-
-        .dropdown-header-link {
-            position: absolute;
-            top: 2px;
-            right: 10px;
-
-            a {
-                color: @link !important;
-                font-size: 12px;
-                font-weight: normal;
+        font-weight: 600;
+        color: #000;
+        .dropdown-header-actions {
+            float: right;
+            a, button {
+                &:hover {
+                    background: @default;
+                }
+                i {
+                    margin: 0;
+                }
             }
         }
     }
-
-    .dropdown-header:hover {
-        color: @text-color-soft;
-    }
 }
 
 #topbar-first {
@@ -161,8 +156,8 @@
         }
 
         .dropdown-menu {
-            width: 350px;
-            margin-left: -148px;
+            width: 400px;
+            margin-left: -173px;
 
             ul.media-list {
                 max-height: 400px;
@@ -201,7 +196,7 @@
     }
 
     .dropdown-footer {
-        margin: 10px 10px 5px;
+        margin: 10px 20px 15px;
 
         .btn.btn-default {
             border: 1px solid @default;
@@ -248,7 +243,14 @@
         }
 
         li {
+            padding: 4px;
+            margin: 0 16px 5px;
             color: @text-color-highlight;
+            border-radius: 4px;
+            border: none;
+            &.new {
+                border: none;
+            }
 
             i.accepted {
                 color: @link !important;

static/less/variables.less

@@ -62,7 +62,7 @@
 
 // Informative highlighting color
 // (e.g. Comment Permalink, Shared Item, Calendar CurDay, Wiki Active Page Nav, Mail Module Speech Bubble)
-@background-color-highlight: lighten(desaturate(spin(@info, 2), 17), 49);
+@background-color-highlight: fade(@info, 20%);
 
 // Informative highlighting soft color
 // (e.g. Wiki Active Category)