Merge pull request #16265 from guerler/add_activities

Adjust notifications activity item
galaxyproject · Jun 17, 2023 · 0cdcc64 · 0cdcc64
2 parents bff9656 + c2015c5
commit 0cdcc64
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 8 deletions.
diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
@@ -2,20 +2,20 @@
 import draggable from "vuedraggable";
 import { ref, type Ref } from "vue";
 import { storeToRefs } from "pinia";
+import { useConfig } from "@/composables/config";
 import { useUserStore } from "@/stores/userStore";
 import { useActivityStore, type Activity } from "@/stores/activityStore";
 import { useRoute } from "vue-router/composables";
 import { convertDropData } from "@/stores/activitySetup";
 import { useEventStore } from "@/stores/eventStore";
 import ContextMenu from "@/components/Common/ContextMenu.vue";
 import FlexPanel from "@/components/Panels/FlexPanel.vue";
-import { useConfig } from "@/composables/config";
+import ToolBox from "@/components/Panels/ProviderAwareToolBox.vue";
+import WorkflowBox from "@/components/Panels/WorkflowBox.vue";
 import ActivityItem from "./ActivityItem.vue";
-import UploadItem from "./Items/UploadItem.vue";
 import ActivitySettings from "./ActivitySettings.vue";
-import WorkflowBox from "@/components/Panels/WorkflowBox.vue";
-import ToolBox from "@/components/Panels/ProviderAwareToolBox.vue";
-import NotificationsBell from "@/components/Notifications/NotificationsBell.vue";
+import UploadItem from "./Items/UploadItem.vue";
+import NotificationItem from "./Items/NotificationItem.vue";
 
 const { config } = useConfig();
 
@@ -179,7 +179,14 @@ function toggleContextMenu(evt: MouseEvent) {
                 </draggable>
             </b-nav>
             <b-nav vertical class="flex-nowrap p-1">
-                <NotificationsBell v-if="!isAnonymous && config.enable_notification_system" tooltip-placement="right" />
+                <NotificationItem
+                    v-if="!isAnonymous && config.enable_notification_system"
+                    id="activity-notifications"
+                    icon="bell"
+                    :is-active="isActiveRoute('/user/notifications')"
+                    title="Notifications"
+                    to="/user/notifications"
+                    @click="onToggleSidebar()" />
                 <ActivityItem
                     id="activity-settings"
                     icon="cog"

diff --git a/client/src/components/ActivityBar/ActivityItem.vue b/client/src/components/ActivityBar/ActivityItem.vue
@@ -14,8 +14,8 @@ interface Option {
 export interface Props {
     id: string;
     title?: string;
-    indicator?: boolean;
     icon?: string | object;
+    indicator?: boolean;
     isActive?: boolean;
     tooltip?: string;
     tooltipPlacement?: string;
@@ -28,6 +28,7 @@ export interface Props {
 const props = withDefaults(defineProps<Props>(), {
     title: undefined,
     icon: "question",
+    indicator: false,
     isActive: false,
     options: undefined,
     progressPercentage: 0,
@@ -70,7 +71,7 @@ function onClick(evt: MouseEvent): void {
                     </span>
                     <span class="position-relative">
                         <div class="nav-icon">
-                            <span v-if="indicator" class="indicator"> </span>
+                            <span v-if="indicator" class="nav-indicator" />
                             <FontAwesomeIcon :icon="icon" />
                         </div>
                         <TextShort v-if="title" :text="title" class="nav-title" />
@@ -100,6 +101,16 @@ function onClick(evt: MouseEvent): void {
     font-size: 1rem;
 }
 
+.nav-indicator {
+    position: absolute;
+    top: 0px;
+    left: 2.2rem;
+    width: 0.6rem;
+    height: 0.6rem;
+    border-radius: 50%;
+    background: $brand-danger;
+}
+
 .nav-item {
     display: flex;
     align-items: center;

diff --git a/client/src/components/ActivityBar/Items/NotificationItem.vue b/client/src/components/ActivityBar/Items/NotificationItem.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { storeToRefs } from "pinia";
+import { useNotificationsStore } from "@/stores/notificationsStore";
+import ActivityItem from "components/ActivityBar/ActivityItem.vue";
+
+const { totalUnreadCount } = storeToRefs(useNotificationsStore());
+
+export interface Props {
+    id: string;
+    title: string;
+    icon: string;
+    isActive: boolean;
+    to: string;
+}
+
+defineProps<Props>();
+
+const emit = defineEmits<{
+    (e: "click"): void;
+}>();
+
+const tooltip = computed(() =>
+    totalUnreadCount.value > 0
+        ? `You have ${totalUnreadCount.value} unread notifications`
+        : "You have no unread notifications"
+);
+</script>
+
+<template>
+    <ActivityItem
+        :id="id"
+        :icon="icon"
+        :indicator="!!totalUnreadCount"
+        :is-active="isActive"
+        :title="title"
+        :tooltip="tooltip"
+        :to="to"
+        @click="emit('click')" />
+</template>
diff --git a/client/src/components/plugins/icons.js b/client/src/components/plugins/icons.js
@@ -2,6 +2,7 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import {
     faArrowUp,
+    faBell,
     faBolt,
     faBurn,
     faChartArea,
@@ -51,6 +52,7 @@ import {
 
 library.add(
     faArrowUp,
+    faBell,
     faBolt,
     faBurn,
     faChartArea,