From d0c255de68c801c1c0bd03b37d89c02596ff7c4d Mon Sep 17 00:00:00 2001 From: Robbie Davis Date: Thu, 24 Feb 2022 07:53:20 -0500 Subject: [PATCH] Bugfix/ux pass 2 (#1107) * Adding margin bottom to series detail tabs * Styling tag badges with green on dark - Added 3 new css vars * Removing underline from readmore * Fixing see more to be on one line * adding gutter to see more * Changing queue toasts to info * adding api key tooltip * Updating active accordion on user preference. * Fixing search bar and close btn position * Fixed a bug where entering book reader in dark mode then closing out, would leave you in a broken white state. * Fixed broken wiki links Co-authored-by: Joseph Milazzo --- UI/Web/src/app/_services/action.service.ts | 8 ++++---- .../directory-picker/directory-picker.component.ts | 2 +- .../library-editor-modal.component.ts | 3 ++- .../app/admin/manage-library/manage-library.component.ts | 2 +- .../app/book-reader/book-reader/book-reader.component.ts | 6 +++--- .../grouped-typeahead/grouped-typeahead.component.html | 2 +- .../grouped-typeahead/grouped-typeahead.component.scss | 5 ++++- UI/Web/src/app/series-detail/series-detail.component.html | 2 +- .../series-metadata-detail.component.html | 4 ++-- UI/Web/src/app/shared/tag-badge/tag-badge.component.scss | 4 +--- .../src/app/user-settings/api-key/api-key.component.html | 5 ++++- .../series-bookmarks/series-bookmarks.component.html | 2 +- .../user-preferences/user-preferences.component.html | 4 ++-- UI/Web/src/theme/components/_anchors.scss | 4 ++++ UI/Web/src/theme/components/_tagbadge.scss | 6 ++++++ UI/Web/src/theme/themes/dark.scss | 4 ++++ 16 files changed, 41 insertions(+), 22 deletions(-) diff --git a/UI/Web/src/app/_services/action.service.ts b/UI/Web/src/app/_services/action.service.ts index 8ec3b396d..b6fc00704 100644 --- a/UI/Web/src/app/_services/action.service.ts +++ b/UI/Web/src/app/_services/action.service.ts @@ -58,7 +58,7 @@ export class ActionService implements OnDestroy { return; } this.libraryService.scan(library?.id).pipe(take(1)).subscribe((res: any) => { - this.toastr.success('Scan queued for ' + library.name); + this.toastr.info('Scan queued for ' + library.name); if (callback) { callback(library); } @@ -84,7 +84,7 @@ export class ActionService implements OnDestroy { } this.libraryService.refreshMetadata(library?.id).pipe(take(1)).subscribe((res: any) => { - this.toastr.success('Scan queued for ' + library.name); + this.toastr.info('Scan queued for ' + library.name); if (callback) { callback(library); } @@ -128,7 +128,7 @@ export class ActionService implements OnDestroy { */ scanSeries(series: Series, callback?: SeriesActionCallback) { this.seriesService.scan(series.libraryId, series.id).pipe(take(1)).subscribe((res: any) => { - this.toastr.success('Scan queued for ' + series.name); + this.toastr.info('Scan queued for ' + series.name); if (callback) { callback(series); } @@ -149,7 +149,7 @@ export class ActionService implements OnDestroy { } this.seriesService.refreshMetadata(series).pipe(take(1)).subscribe((res: any) => { - this.toastr.success('Refresh covers queued for ' + series.name); + this.toastr.info('Refresh covers queued for ' + series.name); if (callback) { callback(series); } diff --git a/UI/Web/src/app/admin/_modals/directory-picker/directory-picker.component.ts b/UI/Web/src/app/admin/_modals/directory-picker/directory-picker.component.ts index 82e7b5791..fe3db20e3 100644 --- a/UI/Web/src/app/admin/_modals/directory-picker/directory-picker.component.ts +++ b/UI/Web/src/app/admin/_modals/directory-picker/directory-picker.component.ts @@ -21,7 +21,7 @@ export class DirectoryPickerComponent implements OnInit { /** * Url to give more information about selecting directories. Passing nothing will suppress. */ - @Input() helpUrl: string = 'https://wiki.kavitareader.com/en/guides/adding-a-library'; + @Input() helpUrl: string = 'https://wiki.kavitareader.com/en/guides/first-time-setup#adding-a-library-to-kavita'; currentRoot = ''; folders: string[] = []; diff --git a/UI/Web/src/app/admin/_modals/library-editor-modal/library-editor-modal.component.ts b/UI/Web/src/app/admin/_modals/library-editor-modal/library-editor-modal.component.ts index 441a1ca2a..767299381 100644 --- a/UI/Web/src/app/admin/_modals/library-editor-modal/library-editor-modal.component.ts +++ b/UI/Web/src/app/admin/_modals/library-editor-modal/library-editor-modal.component.ts @@ -66,7 +66,8 @@ export class LibraryEditorModalComponent implements OnInit { model.folders = model.folders.map((item: string) => item.startsWith('\\') ? item.substr(1, item.length) : item); model.type = parseInt(model.type, 10); this.libraryService.create(model).subscribe(() => { - this.toastr.success('Library created, a scan has been started'); + this.toastr.success('Library created successfully.'); + this.toastr.info('A scan has been started.'); this.close(true); }, err => { this.errorMessage = err; diff --git a/UI/Web/src/app/admin/manage-library/manage-library.component.ts b/UI/Web/src/app/admin/manage-library/manage-library.component.ts index d8c7c63ba..698013e2f 100644 --- a/UI/Web/src/app/admin/manage-library/manage-library.component.ts +++ b/UI/Web/src/app/admin/manage-library/manage-library.component.ts @@ -109,7 +109,7 @@ export class ManageLibraryComponent implements OnInit, OnDestroy { scanLibrary(library: Library) { this.libraryService.scan(library.id).pipe(take(1)).subscribe(() => { - this.toastr.success('A scan has been queued for ' + library.name); + this.toastr.info('A scan has been queued for ' + library.name); }); } diff --git a/UI/Web/src/app/book-reader/book-reader/book-reader.component.ts b/UI/Web/src/app/book-reader/book-reader/book-reader.component.ts index 6f5bd20ee..9b5a5f5f3 100644 --- a/UI/Web/src/app/book-reader/book-reader/book-reader.component.ts +++ b/UI/Web/src/app/book-reader/book-reader/book-reader.component.ts @@ -383,9 +383,9 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy { const bodyNode = this.document.querySelector('body'); if (bodyNode !== undefined && bodyNode !== null && this.originalBodyColor !== undefined) { bodyNode.style.background = this.originalBodyColor; - if (this.themeService.isDarkTheme()) { - bodyNode.classList.add('bg-dark'); - } + this.themeService.currentTheme$.pipe(take(1)).subscribe(theme => { + this.themeService.setTheme(theme.name); + }); } this.navService.showNavBar(); diff --git a/UI/Web/src/app/grouped-typeahead/grouped-typeahead.component.html b/UI/Web/src/app/grouped-typeahead/grouped-typeahead.component.html index 38fab78d6..30ec66ce2 100644 --- a/UI/Web/src/app/grouped-typeahead/grouped-typeahead.component.html +++ b/UI/Web/src/app/grouped-typeahead/grouped-typeahead.component.html @@ -8,7 +8,7 @@ - diff --git a/UI/Web/src/app/grouped-typeahead/grouped-typeahead.component.scss b/UI/Web/src/app/grouped-typeahead/grouped-typeahead.component.scss index 86c48a42d..776f8663b 100644 --- a/UI/Web/src/app/grouped-typeahead/grouped-typeahead.component.scss +++ b/UI/Web/src/app/grouped-typeahead/grouped-typeahead.component.scss @@ -17,6 +17,8 @@ form { .btn-close { margin-top: 8px; font-size: 0.8rem; + position: absolute; + right: 5px; } @@ -40,6 +42,7 @@ form { .search { display: flex; + position: relative; } @@ -63,7 +66,7 @@ form { border: none; &:focus-visible { - width: calc(100vw - 400px); + width: calc(100vw - 175px); } &:empty { diff --git a/UI/Web/src/app/series-detail/series-detail.component.html b/UI/Web/src/app/series-detail/series-detail.component.html index d9771695f..5eb8c1706 100644 --- a/UI/Web/src/app/series-detail/series-detail.component.html +++ b/UI/Web/src/app/series-detail/series-detail.component.html @@ -61,7 +61,7 @@ -
    +
    • Specials diff --git a/UI/Web/src/app/series-metadata-detail/series-metadata-detail.component.html b/UI/Web/src/app/series-metadata-detail/series-metadata-detail.component.html index 5c35e4069..58ec5ac8a 100644 --- a/UI/Web/src/app/series-metadata-detail/series-metadata-detail.component.html +++ b/UI/Web/src/app/series-metadata-detail/series-metadata-detail.component.html @@ -57,8 +57,8 @@
      -
      -   See {{isCollapsed ? 'More' : 'Less'}} +
      +   See {{isCollapsed ? 'More' : 'Less'}}
      diff --git a/UI/Web/src/app/shared/tag-badge/tag-badge.component.scss b/UI/Web/src/app/shared/tag-badge/tag-badge.component.scss index 27cde4d82..69d67964f 100644 --- a/UI/Web/src/app/shared/tag-badge/tag-badge.component.scss +++ b/UI/Web/src/app/shared/tag-badge/tag-badge.component.scss @@ -1,11 +1,9 @@ .tagbadge { - background-color: var(--tagbadge-bg-color); transition: all .3s ease-out; margin: 3px 5px 3px 0px; padding: 2px 10px; border-radius: 6px; font-size: 14px; - border: 1px solid var(--tagbadge-border-color); display: inline-block; cursor: default; width: auto; @@ -40,4 +38,4 @@ i { cursor: pointer !important; } -} \ No newline at end of file +} diff --git a/UI/Web/src/app/user-settings/api-key/api-key.component.html b/UI/Web/src/app/user-settings/api-key/api-key.component.html index 65fce608a..588181ef9 100644 --- a/UI/Web/src/app/user-settings/api-key/api-key.component.html +++ b/UI/Web/src/app/user-settings/api-key/api-key.component.html @@ -5,7 +5,10 @@
      - +
      + + Regenerating your API key will invalidate any existing clients. +
      \ No newline at end of file diff --git a/UI/Web/src/app/user-settings/series-bookmarks/series-bookmarks.component.html b/UI/Web/src/app/user-settings/series-bookmarks/series-bookmarks.component.html index 6bca242f9..53bc85356 100644 --- a/UI/Web/src/app/user-settings/series-bookmarks/series-bookmarks.component.html +++ b/UI/Web/src/app/user-settings/series-bookmarks/series-bookmarks.component.html @@ -1,5 +1,5 @@

      - There are no bookmarks. Try creating one . + There are no bookmarks. Try creating one .

      • diff --git a/UI/Web/src/app/user-settings/user-preferences/user-preferences.component.html b/UI/Web/src/app/user-settings/user-preferences/user-preferences.component.html index 492a615b0..babb4984b 100644 --- a/UI/Web/src/app/user-settings/user-preferences/user-preferences.component.html +++ b/UI/Web/src/app/user-settings/user-preferences/user-preferences.component.html @@ -8,8 +8,8 @@

        These are global settings that are bound to your account.

        - - + +