From 1d813c9e13aa57593b352d42cc52fc56e5473ba5 Mon Sep 17 00:00:00 2001
From: JanAckermann <jackermann@owncloud.com>
Date: Mon, 7 Mar 2022 09:53:07 +0100
Subject: [PATCH] Added tag to left sidebar

remove padding

Adjust tag height

Add changelog item

lowercase beta tag

Change bg color for tag

Update snapshots

Adjustments according to PR review

Update changelog/unreleased/enhancement-sidebar-nav-tags

Co-authored-by: Jannik Stehle <50302941+JammingBen@users.noreply.github.com>

Fix linter
---
 .../unreleased/enhancement-sidebar-nav-tags   |  6 ++++++
 packages/web-app-files/src/index.js           |  1 +
 .../src/components/SidebarNav/SidebarNav.vue  |  1 +
 .../components/SidebarNav/SidebarNavItem.vue  | 19 ++++++++++++++++---
 .../__snapshots__/SidebarNavItem.spec.js.snap |  6 ++++--
 5 files changed, 28 insertions(+), 5 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-sidebar-nav-tags

diff --git a/changelog/unreleased/enhancement-sidebar-nav-tags b/changelog/unreleased/enhancement-sidebar-nav-tags
new file mode 100644
index 00000000000..8d9aad02cdc
--- /dev/null
+++ b/changelog/unreleased/enhancement-sidebar-nav-tags
@@ -0,0 +1,6 @@
+Enhancement: Side bar nav tags
+
+We have implemented a way to show a tag next to the sidebar navigation item link text
+
+https://github.com/owncloud/web/pull/6540
+https://github.com/owncloud/web/issues/6259
diff --git a/packages/web-app-files/src/index.js b/packages/web-app-files/src/index.js
index ccf5b0faffa..f7755568f88 100644
--- a/packages/web-app-files/src/index.js
+++ b/packages/web-app-files/src/index.js
@@ -80,6 +80,7 @@ const navItems = [
   {
     name: $gettext('Spaces'),
     icon: 'layout-grid',
+    tag: $gettext('beta'),
     route: {
       path: `/${appInfo.id}/spaces/projects`
     },
diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
index 0edda20154c..03cb01e768c 100644
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
@@ -27,6 +27,7 @@
           :fill-type="link.fillType"
           :name="link.name"
           :collapsed="navigation.closed"
+          :tag="link.tag"
         />
       </oc-list>
     </nav>
diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
index 58805d09f9e..eb5b3514c1d 100644
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
@@ -10,8 +10,11 @@
       :data-nav-id="index"
       :data-nav-name="navName"
     >
-      <oc-icon :name="icon" :fill-type="fillType" />
-      <span class="oc-ml-m text" :class="{ 'text-invisible': collapsed }" v-text="name" />
+      <span class="oc-flex">
+        <oc-icon :name="icon" :fill-type="fillType" />
+        <span class="oc-ml-m text" :class="{ 'text-invisible': collapsed }" v-text="name" />
+      </span>
+      <oc-tag v-if="tag" class="oc-py-rm">{{ tag }}</oc-tag>
       <sidebar-nav-item-highlight :index="index" :active="active" />
     </oc-button>
   </li>
@@ -56,6 +59,11 @@ export default {
       type: Boolean,
       required: false,
       default: false
+    },
+    tag: {
+      type: String,
+      required: false,
+      default: null
     }
   },
   computed: {
@@ -83,12 +91,17 @@ export default {
   position: relative;
   align-items: center !important;
   display: flex !important;
-  justify-content: flex-start !important;
+  justify-content: space-between !important;
   padding: var(--oc-space-small) !important;
   border-radius: 5px;
   white-space: nowrap;
   user-select: none;
 
+  .oc-tag {
+    color: var(--oc-color-text-default);
+    background-color: var(--oc-color-background-highlight);
+    min-height: 24px !important;
+  }
   .text {
     opacity: 1;
     transition: all 0s;
diff --git a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.js.snap b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.js.snap
index 50cc410d2fe..225a32e01b3 100644
--- a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.js.snap
+++ b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.js.snap
@@ -2,7 +2,8 @@
 
 exports[`OcSidebarNav renders navItem with toolTip if collapsed 1`] = `
 <li class="oc-sidebar-nav-item oc-pb-xs oc-px-s" id="123">
-  <router-link-stub to="/files/list/all" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-sidebar-nav-item-link" data-nav-id="5"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span> <span class="oc-ml-m text text-invisible">All files</span>
+  <router-link-stub to="/files/list/all" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-sidebar-nav-item-link" data-nav-id="5"><span class="oc-flex"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span> <span class="oc-ml-m text text-invisible">All files</span></span>
+    <!---->
     <!---->
   </router-link-stub>
 </li>
@@ -10,7 +11,8 @@ exports[`OcSidebarNav renders navItem with toolTip if collapsed 1`] = `
 
 exports[`OcSidebarNav renders navItem without toolTip if expanded 1`] = `
 <li class="oc-sidebar-nav-item oc-pb-xs oc-px-s" id="123">
-  <router-link-stub to="/files/list/all" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-sidebar-nav-item-link" data-nav-id="5"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span> <span class="oc-ml-m text">All files</span>
+  <router-link-stub to="/files/list/all" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-sidebar-nav-item-link" data-nav-id="5"><span class="oc-flex"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span> <span class="oc-ml-m text">All files</span></span>
+    <!---->
     <!---->
   </router-link-stub>
 </li>