paradizelost/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-04-02 13:45:10 -05:00
Code Issues Packages Projects Releases Wiki Activity

Reorganized navbar

Browse Source 
Updated search field, new user menu
This commit is contained in:
Michael Shamoon 2020-12-30 23:39:07 -08:00
parent 020696fb17
commit d42c13a9c6
2 changed files with 70 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,17 +1,43 @@
<nav class="navbar navbar-dark sticky-top bg-primary flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" routerLink="/dashboard">
<img src="assets/logo-dark-notext.svg" height="18px" class="mr-2">
<ng-container i18n="app title">Paperless-ng</ng-container>
</a>
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse"
<button class="navbar-toggler d-md-none collapsed border-0" 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 m-1">
<input class="form-control form-control-dark" type="text" placeholder="Search for documents" aria-label="Search"
<a class="navbar-brand col-auto col-md-3 col-lg-2 mr-0 px-3 py-3 order-sm-0" routerLink="/dashboard">
<img src="assets/logo-dark-notext.svg" height="18px" class="mr-2">
<ng-container i18n="app title">Paperless-ng</ng-container>
</a>
<div class="search-form-container flex-grow-1 py-2 pb-3 pb-sm-2 px-3 mr-sm-auto order-3 order-sm-1">
<form (ngSubmit)="search()" class="form-inline flex-grow-1">
<input class="form-control form-control-sm" type="text" placeholder="Search documents" aria-label="Search"
[formControl]="searchField" [ngbTypeahead]="searchAutoComplete" (selectItem)="itemSelected($event)" i18n-placeholder>
<svg width="1em" height="1em">
<use xlink:href="assets/bootstrap-icons.svg#search"/>
</svg>
</form>
</div>
<ul ngbNav class="order-sm-3">
<li ngbDropdown class="nav-item dropdown">
<button class="btn text-light" id="userDropdown" ngbDropdownToggle>
<svg width="1.3em" height="1.3em">
<use xlink:href="assets/bootstrap-icons.svg#person-circle"/>
</svg>
</button>
<div ngbDropdownMenu class="dropdown-menu-right shadow mr-2" aria-labelledby="userDropdown">
<a ngbDropdownItem class="nav-link" routerLink="settings" routerLinkActive="active" (click)="closeMenu()">
<svg class="sidebaricon" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#gear"/>
</svg>&nbsp;<ng-container i18n>Settings</ng-container>
</a>
<a ngbDropdownItem class="nav-link" href="accounts/logout/">
<svg class="sidebaricon" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#door-open"/>
</svg>&nbsp;<ng-container i18n>Logout</ng-container>
</a>
</div>
</li>
</ul>
</nav>
<div class="container-fluid">
@ -105,13 +131,6 @@
</svg>&nbsp;<ng-container i18n>Logs</ng-container>
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="settings" routerLinkActive="active" (click)="closeMenu()">
<svg class="sidebaricon" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#gear"/>
</svg>&nbsp;<ng-container i18n>Settings</ng-container>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="admin/">
<svg class="sidebaricon" fill="currentColor">
@ -139,13 +158,6 @@
</svg>&nbsp;<ng-container i18n>GitHub</ng-container>
</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>&nbsp;<ng-container i18n>Logout</ng-container>
</a>
</li>
</ul>
</div>
</nav>

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

@ -72,17 +72,42 @@
padding-top: .75rem;
padding-bottom: .75rem;
font-size: 1rem;
background-color: rgba(0, 0, 0, .25);
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}
.navbar .navbar-toggler {
top: .25rem;
right: 1rem;
}
.navbar .search-form-container {
max-width: 550px;
position: relative;
.navbar .form-control {
padding: .75rem 1rem;
border-width: 0;
border-radius: 0;
svg {
position: absolute;
left: 1.8em;
color: rgba(255, 255, 255, 0.6);
}
&:focus-within {
svg {
display: none;
}
}
.form-control {
color: rgba(255, 255, 255, 0.5);
background-color: rgba(0, 0, 0, 0.2);
padding-left: 1.8rem;
border-color: rgba(255, 255, 255, 0.5);
transition: flex 0.3s ease;
max-width: 600px;
min-width: 300px; // 1/2 max
&::placeholder {
color: rgba(255, 255, 255, 0.5);
}
&:focus {
background-color: #fff;
color: initial;
flex-grow: 1;
padding-left: 0.5rem;
}
}
}