paradizelost/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-10-30 03:56:23 -05:00
Code Issues Packages Projects Releases Wiki Activity

many layout and theme changes

Browse Source
This commit is contained in:
Jonas Winkler
2020-11-22 16:33:26 +01:00
parent 25f88b7ae9
commit 8650af05f7
15 changed files with 114 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src-ui/src/app/components/app-frame/app-frame.component.html
View File

@@ -1,24 +1,14 @@
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
<nav class="navbar navbar-dark sticky-top bg-primary flex-md-nowrap p-0 shadow">
<span class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" href="#">Paperless-ng</span>
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse"
data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation"
(click)="isMenuCollapsed = !isMenuCollapsed">
<span class="navbar-toggler-icon"></span>
</button>
<form (ngSubmit)="search()" class="w-100">
<form (ngSubmit)="search()" class="w-100 m-1">
<input class="form-control form-control-dark" type="text" placeholder="Search" aria-label="Search"
[formControl]="searchField" [ngbTypeahead]="searchAutoComplete" (selectItem)="itemSelected($event)">
</form>
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="accounts/logout/">
<svg class="buttonicon" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#door-closed"/>
</svg>
Logout
</a>
</li>
</ul>
</nav>
<div class="container-fluid">
@@ -151,7 +141,15 @@
<svg class="sidebaricon" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#link"/>
</svg>
Github
GitHub
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="accounts/logout/">
<svg class="sidebaricon" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#door-open"/>
</svg>
Logout
</a>
</li>
</ul>

9
src-ui/src/app/components/app-frame/app-frame.component.scss
View File

@@ -1,4 +1,6 @@
@import "/src/theme";
/*
* Sidebar
*/
@@ -15,14 +17,15 @@
@media (max-width: 767.98px) {
.sidebar {
top: 5rem;
top: 3rem;
}
}
.sidebar-sticky {
position: relative;
top: 0;
height: calc(100vh - 48px);
/* height: calc(100vh - 48px); */
height: 100%;
padding-top: .5rem;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
@@ -46,7 +49,7 @@
}
.sidebar .nav-link.active {
color: #007bff;
color: $primary;
}
.sidebar .nav-link:hover .sidebaricon,

6
src-ui/src/app/components/common/input/check/check.component.html
View File

@@ -1,5 +1,5 @@
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" (blur)="onTouched()" [disabled]="disabled">
<label class="form-check-label" [for]="inputId">{{title}}</label>
<div class="form-group custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" (blur)="onTouched()" [disabled]="disabled">
<label class="custom-control-label" [for]="inputId">{{title}}</label>
<small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
</div>

5
src-ui/src/app/components/common/page-header/page-header.component.html
View File

@@ -1,6 +1,7 @@
<div class="row pt-3 pb-1 mb-3 border-bottom align-items-center" >
<div class="col text-truncate">
<h1 class="h2 text-truncate" style="line-height: 1.4">{{title}}</h1>
<div class="col-md text-truncate">
<p class="h2 text-truncate" style="line-height: 1.4">{{title}}</p>
<p *ngIf="subTitle" class="h5 text-truncate" style="line-height: 1.4">{{subTitle}}</p>
</div>
<div class="btn-toolbar col-auto">
<ng-content></ng-content>

3
src-ui/src/app/components/common/page-header/page-header.component.ts
View File

@@ -12,6 +12,9 @@ export class PageHeaderComponent implements OnInit {
@Input()
title: string = ""
@Input()
subTitle: string = ""
ngOnInit(): void {
}

94
src-ui/src/app/components/dashboard/dashboard.component.html
View File

@@ -1,50 +1,74 @@
<app-page-header title="Dashboard">
<app-page-header title="Dashboard" subTitle="Welcome to paperless-ng!">
<img src="assets/logo.svg" height="80" class="m-2">
</app-page-header>
<p>Welcome to paperless-ng!</p>
<div class='row'>
<div class="col-lg">
<ng-container *ngFor="let v of savedDashboardViews">
<h4>{{v.viewConfig.title}}</h4>
<table class="table table-sm table-hover table-borderless">
<thead>
<tr>
<th>Created</th>
<th scope="col">Title</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let doc of v.documents" routerLink="/documents/{{doc.id}}">
<td>{{doc.created | date}}</td>
<td>{{doc.title}}<app-tag [tag]="t" *ngFor="let t of doc.tags" class="ml-1"></app-tag>
</tr>
</tbody>
</table>
<div class="card mb-3">
<div class="card-header">
<h5 class="card-title mb-0">{{v.viewConfig.title}}</h5>
</div>
<div class="card-body text-dark">
<table class="table table-sm table-hover table-borderless">
<thead>
<tr>
<th>Created</th>
<th scope="col">Title</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let doc of v.documents" routerLink="/documents/{{doc.id}}">
<td>{{doc.created | date}}</td>
<td>{{doc.title}}<app-tag [tag]="t" *ngFor="let t of doc.tags" class="ml-1"></app-tag>
</tr>
</tbody>
</table>
</div>
</div>
</ng-container>
<ng-container *ngIf="savedDashboardViews.length == 0">
<h4>Saved views</h4>
<p>This space is reserved to display your saved views. Go to your documents and save a view to have it displayed here!</p>
<div class="card mb-3">
<div class="card-header">
<h5 class="card-title mb-0">Saved views</h5>
</div>
<div class="card-body text-dark">
<p class="card-text">This space is reserved to display your saved views. Go to your documents and save a view
to have it displayed
here!</p>
</div>
</div>
</ng-container>
</div>
<div class="col-lg">
<h4>Statistics</h4>
<p>Documents in inbox: {{statistics.documents_inbox}}</p>
<p>Total documents: {{statistics.documents_total}}</p>
<h4>Upload new Document</h4>
<form>
<ngx-file-drop
dropZoneLabel="Drop documents here"
(onFileDrop)="dropped($event)"
(onFileOver)="fileOver($event)"
(onFileLeave)="fileLeave($event)"
dropZoneClassName="bg-light mt-4 card">
</ngx-file-drop>
</form>
<div class="card mb-3">
<div class="card-header">
<h5 class="card-title mb-0">Statistics</h5>
</div>
<div class="card-body text-dark">
<p class="card-text">Documents in inbox: {{statistics.documents_inbox}}</p>
<p class="card-text">Total documents: {{statistics.documents_total}}</p>
</div>
</div>
<div class="card mb-3">
<div class="card-header">
<h5 class="card-title mb-0">Upload new documents</h5>
</div>
<div class="card-body text-dark">
<form>
<ngx-file-drop dropZoneLabel="Drop documents here" (onFileDrop)="dropped($event)"
(onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)" dropZoneClassName="bg-light mt-4 card">
</ngx-file-drop>
</form>
</div>
</div>
</div>
</div>
</div>

4
src-ui/src/app/components/document-detail/document-detail.component.html
View File

@@ -5,13 +5,13 @@
</svg>
<span class="d-none d-lg-inline"> Delete</span>
</button>
<a [href]="downloadUrl" class="btn btn-sm btn-outline-secondary mr-2">
<a [href]="downloadUrl" class="btn btn-sm btn-outline-primary mr-2">
<svg class="buttonicon" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#download" />
</svg>
<span class="d-none d-lg-inline"> Download</span>
</a>
<button type="button" class="btn btn-sm btn-outline-secondary" (click)="close()">
<button type="button" class="btn btn-sm btn-outline-primary" (click)="close()">
<svg class="buttonicon" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#x" />
</svg>

18
src-ui/src/app/components/document-list/document-list.component.html
View File

@@ -2,19 +2,19 @@
<div class="btn-group btn-group-toggle mr-2" ngbRadioGroup [(ngModel)]="displayMode"
(ngModelChange)="saveDisplayMode()">
<label ngbButtonLabel class="btn-outline-secondary btn-sm">
<label ngbButtonLabel class="btn-outline-primary btn-sm">
<input ngbButton type="radio" class="btn btn-sm" value="details">
<svg class="toolbaricon" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#list-ul" />
</svg>
</label>
<label ngbButtonLabel class="btn-outline-secondary btn-sm">
<label ngbButtonLabel class="btn-outline-primary btn-sm">
<input ngbButton type="radio" class="btn btn-sm" value="smallCards">
<svg class="toolbaricon" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#grid" />
</svg>
</label>
<label ngbButtonLabel class="btn-outline-secondary btn-sm">
<label ngbButtonLabel class="btn-outline-primary btn-sm">
<input ngbButton type="radio" class="btn btn-sm" value="largeCards">
<svg class="toolbaricon" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#hdd-stack" />
@@ -24,19 +24,19 @@
<div class="btn-group btn-group-toggle mr-2" ngbRadioGroup [(ngModel)]="docs.sortDirection"
*ngIf="!docs.viewId">
<div ngbDropdown class="btn-group">
<button class="btn btn-outline-secondary btn-sm" id="dropdownBasic1" ngbDropdownToggle>Sort by</button>
<button class="btn btn-outline-primary btn-sm" id="dropdownBasic1" ngbDropdownToggle>Sort by</button>
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
<button *ngFor="let f of getSortFields()" ngbDropdownItem (click)="setSort(f.field)"
[class.active]="docs.sortField == f.field">{{f.name}}</button>
</div>
</div>
<label ngbButtonLabel class="btn-outline-secondary btn-sm">
<label ngbButtonLabel class="btn-outline-primary btn-sm">
<input ngbButton type="radio" class="btn btn-sm" value="asc">
<svg class="toolbaricon" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#sort-alpha-down" />
</svg>
</label>
<label ngbButtonLabel class="btn-outline-secondary btn-sm">
<label ngbButtonLabel class="btn-outline-primary btn-sm">
<input ngbButton type="radio" class="btn btn-sm" value="des">
<svg class="toolbaricon" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#sort-alpha-up-alt" />
@@ -45,7 +45,7 @@
</div>
<div class="btn-group" *ngIf="!docs.viewId">
<button type="button" class="btn btn-sm btn-outline-secondary" (click)="showFilter=!showFilter">
<button type="button" class="btn btn-sm btn-outline-primary" (click)="showFilter=!showFilter">
<svg class="toolbaricon" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#funnel" />
</svg>
@@ -53,7 +53,7 @@
</button>
<div class="btn-group" ngbDropdown role="group">
<button class="btn btn-sm btn-outline-secondary dropdown-toggle-split" ngbDropdownToggle></button>
<button class="btn btn-sm btn-outline-primary dropdown-toggle-split" ngbDropdownToggle></button>
<div class="dropdown-menu" ngbDropdownMenu>
<button ngbDropdownItem *ngFor="let config of savedViewConfigService.getConfigs()" (click)="loadViewConfig(config)">{{config.title}}</button>
<div class="dropdown-divider" *ngIf="savedViewConfigService.getConfigs().length > 0"></div>
@@ -72,7 +72,7 @@
</div>
<ngb-pagination [pageSize]="docs.currentPageSize" [collectionSize]="docs.collectionSize" [(page)]="docs.currentPage" [maxSize]="5"
[rotate]="true" [boundaryLinks]="true" (pageChange)="reload()" aria-label="Default pagination"></ngb-pagination>
[rotate]="true" (pageChange)="reload()" aria-label="Default pagination"></ngb-pagination>
<div *ngIf="displayMode == 'largeCards'">
<app-document-card-large *ngFor="let d of docs.documents" [document]="d" [details]="d.content">

2
src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.html
View File

@@ -1,5 +1,5 @@
<app-page-header title="Correspondents">
<button type="button" class="btn btn-sm btn-outline-secondary" (click)="openCreateDialog()">
<button type="button" class="btn btn-sm btn-outline-primary" (click)="openCreateDialog()">
Create
</button>
</app-page-header>

2
src-ui/src/app/components/manage/document-type-list/document-type-list.component.html
View File

@@ -1,5 +1,5 @@
<app-page-header title="Document types">
<button type="button" class="btn btn-sm btn-outline-secondary" (click)="openCreateDialog()">
<button type="button" class="btn btn-sm btn-outline-primary" (click)="openCreateDialog()">
Create
</button>
</app-page-header>

2
src-ui/src/app/components/manage/logs/logs.component.html
View File

@@ -1,7 +1,7 @@
<app-page-header title="Logs">
<div ngbDropdown class="btn-group">
<button class="btn btn-outline-secondary btn-sm" id="dropdownBasic1" ngbDropdownToggle>
<button class="btn btn-outline-primary btn-sm" id="dropdownBasic1" ngbDropdownToggle>
<svg class="toolbaricon" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#funnel" />
</svg>

2
src-ui/src/app/components/manage/tag-list/tag-list.component.html
View File

@@ -1,5 +1,5 @@
<app-page-header title="Tags">
<button type="button" class="btn btn-sm btn-outline-secondary" (click)="openCreateDialog()">
<button type="button" class="btn btn-sm btn-outline-primary" (click)="openCreateDialog()">
Create
</button>
</app-page-header>

2
src-ui/src/index.html
View File

@@ -4,7 +4,7 @@
<meta charset="utf-8">
<title>PaperlessUi</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>

9
src-ui/src/styles.scss
View File

@@ -1,4 +1,6 @@
@import "bootstrap";
@import "theme";
@import "node_modules/bootstrap/scss/bootstrap";
.toolbaricon {
@@ -27,12 +29,15 @@ body {
border-color: rgba(255, 255, 255, .1);
}
.form-control-dark::placeholder {
color: #fff;
}
.form-control-dark:focus {
border-color: transparent;
box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}
.asc {
background-color: #f8f9fa!important;
}

6
src-ui/src/theme.scss Normal file
View File

@@ -0,0 +1,6 @@
$paperless-green: #17541f;
$primary: #17541f;
$theme-colors: (
"primary": $primary
);