diff --git a/src-ui/src/app/app.component.ts b/src-ui/src/app/app.component.ts index 1c2001043..30ecb40d0 100644 --- a/src-ui/src/app/app.component.ts +++ b/src-ui/src/app/app.component.ts @@ -9,8 +9,8 @@ import { AppViewService } from './services/app-view.service'; export class AppComponent { constructor (appViewService: AppViewService) { - appViewService.updateDarkModeSettings() (window as any).pdfWorkerSrc = '/assets/js/pdf.worker.min.js'; + appViewService.updateDarkModeSettings() } 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 6fd2a579e..46065a102 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 @@ -1,19 +1,52 @@
@@ -107,13 +140,6 @@  Logs -
  • - - - -  Settings - -
  • @@ -141,13 +167,6 @@  GitHub
    • -
  • - - - -  Logout - -
    • 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 5ace8a2ff..6809875eb 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 @@ -1,36 +1,30 @@ - @import "/src/theme"; - - /* +/* * Sidebar */ - - .sidebar { +.sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 100; /* Behind the navbar */ - padding: 48px 0 0; /* Height of navbar */ + padding: 50px 0 0; /* Height of navbar */ box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1); } - @media (max-width: 767.98px) { .sidebar { - top: 3rem; + top: 3.5rem; } } .sidebar-sticky { position: relative; top: 0; - /* height: calc(100vh - 48px); */ height: 100%; - padding-top: .5rem; + padding-top: 0.5rem; overflow-x: hidden; overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ } - @supports ((position: -webkit-sticky) or (position: sticky)) { .sidebar-sticky { position: -webkit-sticky; @@ -53,36 +47,85 @@ font-weight: bold; } -.sidebar .nav-link:hover .sidebaricon, -.sidebar .nav-link.active .sidebaricon { +.sidebar .nav-link.active .sidebaricon, +.sidebar .nav-link:hover .sidebaricon { color: inherit; } .sidebar-heading { - font-size: .75rem; + font-size: 0.75rem; text-transform: uppercase; } - /* * Navbar */ - .navbar-brand { - padding-top: .75rem; - padding-bottom: .75rem; +.navbar-brand { + padding-top: 0.75rem; + padding-bottom: 0.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; +.dropdown.show .dropdown-toggle, +.dropdown-toggle:hover { + opacity: 0.7; } -.navbar .form-control { - padding: .75rem 1rem; - border-width: 0; - border-radius: 0; +.dropdown-toggle::after { + margin-left: 0.4em; + vertical-align: 0.155em; +} + +.navbar .dropdown-menu { + font-size: 0.875rem; // body size + + a svg { + opacity: 0.6; + } +} + +.navbar .search-form-container { + max-width: 550px; + + form { + position: relative; + } + + svg { + position: absolute; + left: 0.6rem; + color: rgba(255, 255, 255, 0.6); + } + + &:focus-within { + svg { + display: none; + } + + .form-control::placeholder { + color: rgba(255, 255, 255, 0); + } + } + + .form-control { + color: rgba(255, 255, 255, 0.3); + background-color: rgba(0, 0, 0, 0.15); + padding-left: 1.8rem; + border-color: rgba(255, 255, 255, 0.2); + transition: flex 0.3s ease; + max-width: 600px; + min-width: 300px; // 1/2 max + + &::placeholder { + color: rgba(255, 255, 255, 0.4); + } + + &:focus { + background-color: #fff; + color: #212529; + flex-grow: 1; + padding-left: 0.5rem; + } + } } 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 c4c00843d..dca0d9106 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 @@ -9,7 +9,8 @@ import { SavedViewService } from 'src/app/services/rest/saved-view.service'; import { SearchService } from 'src/app/services/rest/search.service'; import { environment } from 'src/environments/environment'; import { DocumentDetailComponent } from '../document-detail/document-detail.component'; - +import { Meta } from '@angular/platform-browser'; + @Component({ selector: 'app-app-frame', templateUrl: './app-frame.component.html', @@ -22,8 +23,11 @@ export class AppFrameComponent implements OnInit, OnDestroy { private activatedRoute: ActivatedRoute, private openDocumentsService: OpenDocumentsService, private searchService: SearchService, - public savedViewService: SavedViewService + public savedViewService: SavedViewService, + private meta: Meta ) { + console.log(meta); + } versionString = `${environment.appTitle} ${environment.version}` @@ -55,7 +59,7 @@ export class AppFrameComponent implements OnInit, OnDestroy { term.length < 2 ? from([[]]) : this.searchService.autocomplete(term) ) ) - + itemSelected(event) { event.preventDefault() let currentSearch: string = this.searchField.value @@ -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 + } + } + } diff --git a/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.scss b/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.scss index e69de29bb..40d1c836b 100644 --- a/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.scss +++ b/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.scss @@ -0,0 +1,7 @@ +table { + overflow-wrap: anywhere; +} + +th:first-child { + min-width: 5rem; +} diff --git a/src-ui/src/app/services/app-view.service.ts b/src-ui/src/app/services/app-view.service.ts index 6af2e43af..67a429ffe 100644 --- a/src-ui/src/app/services/app-view.service.ts +++ b/src-ui/src/app/services/app-view.service.ts @@ -18,7 +18,7 @@ export class AppViewService { this.updateDarkModeSettings() } - updateDarkModeSettings() { + updateDarkModeSettings(): void { let darkModeUseSystem = this.settings.get(SETTINGS_KEYS.DARK_MODE_USE_SYSTEM) let darkModeEnabled = this.settings.get(SETTINGS_KEYS.DARK_MODE_ENABLED) diff --git a/src-ui/src/theme_dark.scss b/src-ui/src/theme_dark.scss index a122f1d86..5f08583e8 100644 --- a/src-ui/src/theme_dark.scss +++ b/src-ui/src/theme_dark.scss @@ -36,6 +36,10 @@ $border-color-dark-mode: #47494f; } } + .text-light { + color: $text-color-dark-mode !important; + } + .border { border-color: $border-color-dark-mode !important; }