pleroma-fe

commit: b27f696d77f772b9bf0c2e5376c27e315362c942
parent 5206609812c5420ddc7aebc818f89c34162f28fa
Author: tusooa <tusooa@kazv.moe>
Date:   Thu,  6 Apr 2023 12:35:51 -0400

Use neutral badge for drafts

Diffstat:
M
src/App.scss
7
+++++++
M
src/components/navigation/navigation.js
4
++++
M
src/components/navigation/navigation_entry.vue
1
+
M
src/components/navigation/navigation_pins.vue
11
+++++++++++
M
src/components/side_drawer/side_drawer.vue
2
+-

5 files changed, 24 insertions(+), 1 deletion(-)
diff --git a/src/App.scss b/src/App.scss
@@ -748,6 +748,13 @@ option {
     margin-left: 0.7em;
     margin-top: -1em;
   }
+
+  &.badge-neutral {
+    background-color: $fallback--cGreen;
+    background-color: var(--badgeNeutral, $fallback--cGreen);
+    color: white;
+    color: var(--badgeNeutralText, white);
+  }
 }
 
 .alert {
diff --git a/src/components/navigation/navigation.js b/src/components/navigation/navigation.js
@@ -56,6 +56,7 @@ export const ROOT_ITEMS = {
     route: 'chats',
     icon: 'comments',
     label: 'nav.chats',
+    badgeStyle: 'notification',
     badgeGetter: 'unreadChatCount',
     criteria: ['chats']
   },
@@ -63,6 +64,7 @@ export const ROOT_ITEMS = {
     route: 'friend-requests',
     icon: 'user-plus',
     label: 'nav.friend_requests',
+    badgeStyle: 'notification',
     criteria: ['lockedUser'],
     badgeGetter: 'followRequestCount'
   },
@@ -76,6 +78,7 @@ export const ROOT_ITEMS = {
     route: 'announcements',
     icon: 'bullhorn',
     label: 'nav.announcements',
+    badgeStyle: 'notification',
     badgeGetter: 'unreadAnnouncementCount',
     criteria: ['announcements']
   },
@@ -83,6 +86,7 @@ export const ROOT_ITEMS = {
     route: 'drafts',
     icon: 'file-pen',
     label: 'nav.drafts',
+    badgeStyle: 'neutral',
     badgeGetter: 'draftCount'
   }
 }
diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue
@@ -35,6 +35,7 @@
       <div
         v-if="item.badgeGetter && getters[item.badgeGetter]"
         class="badge -notification"
+        :class="[`badge-${item.badgeStyle}`]"
       >
         {{ getters[item.badgeGetter] }}
       </div>
diff --git a/src/components/navigation/navigation_pins.vue b/src/components/navigation/navigation_pins.vue
@@ -20,6 +20,7 @@
       <div
         v-if="item.badgeGetter && getters[item.badgeGetter]"
         class="badge -dot -notification"
+        :class="[`alert-dot-${item.badgeStyle}`]"
       />
     </router-link>
   </span>
@@ -34,6 +35,16 @@
   overflow: hidden;
   height: 100%;
 
+  &.alert-dot-notification {
+    background-color: $fallback--cRed;
+    background-color: var(--badgeNotification, $fallback--cRed);
+  }
+
+  &.alert-dot-neutral {
+    background-color: $fallback--cGreen;
+    background-color: var(--badgeNeutral, $fallback--cGreen);
+  }
+
   .pinned-item {
     position: relative;
     flex: 1 0 3em;
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
@@ -255,7 +255,7 @@
             /> {{ $t('nav.drafts') }}
             <span
               v-if="draftCount"
-              class="badge badge-notification"
+              class="badge badge-neutral"
             >
               {{ draftCount }}
             </span>