Merge branch 'fix/issue-603' into dev

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"/>

src-ui/src/app/components/app-frame/app-frame.component.scss

@@ -62,16 +62,45 @@
   flex-wrap: nowrap;
 }
 
-.nav-item .nav-link-additional {
+.nav-item {
-  margin-top: 0.2rem;
+  position: relative;
-  margin-left: 0.25rem;
-  padding-top: 0.5rem;
 
-  svg {
+  &:hover .close {
-    margin-bottom: 2px;
+    display: block;
+  }
+
+  .close {
+    display: none;
+    position: absolute;
+    cursor: pointer;
+    opacity: 1;
+    top: 0;
+    padding: .25rem .3rem 0;
+    right: .4rem;
+    width: 1.8rem;
+    height: 100%;
+
+    svg {
+      opacity: 0.5;
+    }
+
+    &:hover svg {
+      opacity: 1;
+    }
+  }
+
+  .nav-link-additional {
+    margin-top: 0.2rem;
+    margin-left: 0.25rem;
+    padding-top: 0.5rem;
+
+    svg {
+      margin-bottom: 2px;
+    }
   }
 }
 
+
 /*
  * Navbar
  */

src-ui/src/app/components/app-frame/app-frame.component.ts

@@ -1,7 +1,7 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { FormControl } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router, Params } from '@angular/router';
-import { from, Observable, Subscription } from 'rxjs';
+import { from, Observable, Subscription, BehaviorSubject } from 'rxjs';
 import { debounceTime, distinctUntilChanged, map, switchMap } from 'rxjs/operators';
 import { PaperlessDocument } from 'src/app/data/paperless-document';
 import { OpenDocumentsService } from 'src/app/services/open-documents.service';
@@ -16,7 +16,7 @@ import { Meta } from '@angular/platform-browser';
   templateUrl: './app-frame.component.html',
   styleUrls: ['./app-frame.component.scss']
 })
-export class AppFrameComponent implements OnInit, OnDestroy {
+export class AppFrameComponent implements OnInit {
 
   constructor (
     public router: Router,
@@ -39,9 +39,9 @@ export class AppFrameComponent implements OnInit, OnDestroy {
 
   searchField = new FormControl('')
 
-  openDocuments: PaperlessDocument[] = []
+  get openDocuments(): PaperlessDocument[] {
-
+    return this.openDocumentsService.getOpenDocuments()
-  openDocumentsSubscription: Subscription
+  }
 
   searchAutoComplete = (text$: Observable<string>) =>
     text$.pipe(
@@ -77,12 +77,24 @@ export class AppFrameComponent implements OnInit, OnDestroy {
     this.router.navigate(['search'], {queryParams: {query: this.searchField.value}})
   }
 
+  closeDocument(d: PaperlessDocument) {
+    this.closeMenu()
+    this.openDocumentsService.closeDocument(d)
+
+    let route = this.activatedRoute.snapshot
+    while (route.firstChild) {
+      route = route.firstChild
+    }
+    if (route.component == DocumentDetailComponent && route.params['id'] == d.id) {
+      this.router.navigate([""])
+    }
+  }
+
   closeAll() {
     this.closeMenu()
     this.openDocumentsService.closeAll()
 
-    // TODO: is there a better way to do this?
+    let route = this.activatedRoute.snapshot
-    let route = this.activatedRoute
     while (route.firstChild) {
       route = route.firstChild
     }
@@ -92,13 +104,6 @@ export class AppFrameComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
-    this.openDocuments = this.openDocumentsService.getOpenDocuments()
-  }
-
-  ngOnDestroy() {
-    if (this.openDocumentsSubscription) {
-      this.openDocumentsSubscription.unsubscribe()
-    }
   }
 
   get displayName() {

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 {

src/tox.ini

@@ -1,21 +0,0 @@
-# Tox (http://tox.testrun.org/) is a tool for running tests
-# in multiple virtualenvs. This configuration file will run the
-# test suite on all supported python versions. To use it, "pip install tox"
-# and then run "tox" from this directory.
-
-[tox]
-skipsdist = True
-envlist = py34, py35, py36, py37, pycodestyle, doc
-
-[testenv]
-commands = pytest
-deps = -r{toxinidir}/../requirements.txt
-
-[testenv:pycodestyle]
-commands=pycodestyle
-deps=pycodestyle
-
-[testenv:doc]
-deps =
-  -r {toxinidir}/../requirements.txt
-commands=sphinx-build -b html ../docs ../docs/_build -W