Cutlery/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-11-03 19:17:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

tweak username display, dropdown size + spacing

Browse Source
This commit is contained in:
Michael Shamoon 2020-12-31 16:23:08 -08:00
parent be7bf5288b
commit f090537ef4
3 changed files with 49 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,21 +20,28 @@
<ul ngbNav class="order-sm-3"> <ul ngbNav class="order-sm-3">
<li ngbDropdown class="nav-item dropdown"> <li ngbDropdown class="nav-item dropdown">
<button class="btn text-light" id="userDropdown" ngbDropdownToggle> <button class="btn text-light" id="userDropdown" ngbDropdownToggle>
<span *ngIf="displayName" class="navbar-text small mr-2 text-light d-none d-sm-inline">
{{displayName}}
</span>
<svg width="1.3em" height="1.3em"> <svg width="1.3em" height="1.3em">
<use xlink:href="assets/bootstrap-icons.svg#person-circle"/> <use xlink:href="assets/bootstrap-icons.svg#person-circle"/>
</svg> </svg>
</button> </button>
<div ngbDropdownMenu class="dropdown-menu-right shadow mr-2" aria-labelledby="userDropdown"> <div ngbDropdownMenu class="dropdown-menu-right shadow mr-2" aria-labelledby="userDropdown">
<a ngbDropdownItem class="nav-link" routerLink="settings" routerLinkActive="active" (click)="closeMenu()"> <div *ngIf="displayName" class="d-sm-none">
<svg class="sidebaricon" fill="currentColor"> <p class="small mb-0 px-3" i18n>Logged in as {{displayName}}</p>
<use xlink:href="assets/bootstrap-icons.svg#gear"/> <div class="dropdown-divider"></div>
</svg>&nbsp;<ng-container i18n>Settings</ng-container> </div>
</a> <a ngbDropdownItem class="nav-link" routerLink="settings" routerLinkActive="active" (click)="closeMenu()">
<a ngbDropdownItem class="nav-link" href="accounts/logout/"> <svg class="sidebaricon mr-2" fill="currentColor">
<svg class="sidebaricon" fill="currentColor"> <use xlink:href="assets/bootstrap-icons.svg#gear"/>
<use xlink:href="assets/bootstrap-icons.svg#door-open"/> </svg><ng-container i18n>Settings</ng-container>
</svg>&nbsp;<ng-container i18n>Logout</ng-container> </a>
</a> <a ngbDropdownItem class="nav-link" href="accounts/logout/">
<svg class="sidebaricon mr-2" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#door-open"/>
</svg><ng-container i18n>Logout</ng-container>
</a>
</div> </div>
</li> </li>
</ul> </ul>

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

@ -62,13 +62,16 @@
/* /*
* Navbar * Navbar
*/ */
.navbar-brand { .navbar-brand {
padding-top: 0.75rem; padding-top: 0.75rem;
padding-bottom: 0.75rem; padding-bottom: 0.75rem;
font-size: 1rem; font-size: 1rem;
} }
.navbar-toggler { .dropdown.show .dropdown-toggle,
.dropdown-toggle:hover {
opacity: 0.7;
} }
.dropdown-toggle::after { .dropdown-toggle::after {
@ -76,6 +79,14 @@
vertical-align: 0.155em; vertical-align: 0.155em;
} }
.navbar .dropdown-menu {
font-size: 0.875rem; // body size
a svg {
opacity: 0.6;
}
}
.navbar .search-form-container { .navbar .search-form-container {
max-width: 550px; max-width: 550px;
position: relative; position: relative;

19
src-ui/src/app/components/app-frame/app-frame.component.ts
View File

@ -9,6 +9,7 @@ import { SavedViewService } from 'src/app/services/rest/saved-view.service';
import { SearchService } from 'src/app/services/rest/search.service'; import { SearchService } from 'src/app/services/rest/search.service';
import { environment } from 'src/environments/environment'; import { environment } from 'src/environments/environment';
import { DocumentDetailComponent } from '../document-detail/document-detail.component'; import { DocumentDetailComponent } from '../document-detail/document-detail.component';
import { Meta } from '@angular/platform-browser';
@Component({ @Component({
selector: 'app-app-frame', selector: 'app-app-frame',
@ -22,8 +23,11 @@ export class AppFrameComponent implements OnInit, OnDestroy {
private activatedRoute: ActivatedRoute, private activatedRoute: ActivatedRoute,
private openDocumentsService: OpenDocumentsService, private openDocumentsService: OpenDocumentsService,
private searchService: SearchService, private searchService: SearchService,
public savedViewService: SavedViewService public savedViewService: SavedViewService,
private meta: Meta
) { ) {
console.log(meta);
} }
versionString = `${environment.appTitle} ${environment.version}` versionString = `${environment.appTitle} ${environment.version}`
@ -98,4 +102,17 @@ export class AppFrameComponent implements OnInit, OnDestroy {
} }
} }
get displayName() {
// TODO: taken from dashboard component, is this the best way to pass around username?
let tagFullName = this.meta.getTag('name=full_name')
let tagUsername = this.meta.getTag('name=username')
if (tagFullName && tagFullName.content) {
return tagFullName.content
} else if (tagUsername && tagUsername.content) {
return tagUsername.content
} else {
return null
}
}
} }