From 548b1ea7ecd8cde98c69ef2ab343093f85f9553c Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Thu, 25 Feb 2021 07:43:02 -0800
Subject: [PATCH] Allow closing individual documents from sidebar

---
 .../app-frame/app-frame.component.html        |  7 +++-
 .../app-frame/app-frame.component.scss        | 33 +++++++++++++++----
 .../app-frame/app-frame.component.ts          | 14 ++++++++
 src-ui/src/theme_dark.scss                    |  4 +++
 4 files changed, 51 insertions(+), 7 deletions(-)

diff --git a/src-ui/src/app/components/app-frame/app-frame.component.html b/src-ui/src/app/components/app-frame/app-frame.component.html
index 5692d9f78..c59bc3e0a 100644
--- a/src-ui/src/app/components/app-frame/app-frame.component.html
+++ b/src-ui/src/app/components/app-frame/app-frame.component.html
@@ -92,9 +92,14 @@
               <svg class="sidebaricon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#file-text"/>
               </svg>&nbsp;{{d.title | documentTitle}}
+              <span class="close bg-light" (click)="closeDocument(d); $event.preventDefault()">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
+                  <use xlink:href="assets/bootstrap-icons.svg#x"/>
+                </svg>
+              </span>
             </a>
           </li>
-          <li class="nav-item w-100" *ngIf="openDocuments.length >= 1">
+          <li class="nav-item w-100" *ngIf="openDocuments.length > 1">
             <a class="nav-link text-truncate" [routerLink]="" (click)="closeAll()">
               <svg class="sidebaricon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#x"/>
diff --git a/src-ui/src/app/components/app-frame/app-frame.component.scss b/src-ui/src/app/components/app-frame/app-frame.component.scss
index b6181b364..efae6cdd4 100644
--- a/src-ui/src/app/components/app-frame/app-frame.component.scss
+++ b/src-ui/src/app/components/app-frame/app-frame.component.scss
@@ -62,16 +62,37 @@
   flex-wrap: nowrap;
 }
 
-.nav-item .nav-link-additional {
-  margin-top: 0.2rem;
-  margin-left: 0.25rem;
-  padding-top: 0.5rem;
+.nav-item {
+  position: relative;
 
-  svg {
-    margin-bottom: 2px;
+  &:hover .close {
+    display: block;
+  }
+
+  .close {
+    display: none;
+    position: absolute;
+    cursor: pointer;
+    opacity: 1;
+    top: 0;
+    padding: .25rem .3rem 0;
+    right: .4rem;
+    width: 1.8rem;
+    height: 100%;
+  }
+
+  .nav-item .nav-link-additional {
+    margin-top: 0.2rem;
+    margin-left: 0.25rem;
+    padding-top: 0.5rem;
+
+    svg {
+      margin-bottom: 2px;
+    }
   }
 }
 
+
 /*
  * Navbar
  */
diff --git a/src-ui/src/app/components/app-frame/app-frame.component.ts b/src-ui/src/app/components/app-frame/app-frame.component.ts
index 0709a83ca..05b1f3f68 100644
--- a/src-ui/src/app/components/app-frame/app-frame.component.ts
+++ b/src-ui/src/app/components/app-frame/app-frame.component.ts
@@ -77,6 +77,20 @@ export class AppFrameComponent implements OnInit {
     this.router.navigate(['search'], {queryParams: {query: this.searchField.value}})
   }
 
+  closeDocument(d: PaperlessDocument) {
+    this.closeMenu()
+    this.openDocumentsService.closeDocument(d)
+
+    // TODO: is there a better way to do this? (taken from closeAll)
+    let route = this.activatedRoute
+    while (route.firstChild) {
+      route = route.firstChild
+    }
+    if (route.component == DocumentDetailComponent) {
+      this.router.navigate([""])
+    }
+  }
+
   closeAll() {
     this.closeMenu()
     this.openDocumentsService.closeAll()
diff --git a/src-ui/src/theme_dark.scss b/src-ui/src/theme_dark.scss
index 751ff2b15..11ea88c28 100644
--- a/src-ui/src/theme_dark.scss
+++ b/src-ui/src/theme_dark.scss
@@ -63,6 +63,10 @@ $border-color-dark-mode: #47494f;
       background-color: $bg-dark-mode;
       color: $text-color-dark-mode;
       border-color: $border-color-dark-mode $border-color-dark-mode $bg-dark-mode;
+
+      .close {
+        background-color: inherit !important;
+      }
     }
 
     &:hover {