Cutlery/Kavita
1
0
Fork 0
mirror of https://github.com/Kareadita/Kavita.git synced 2025-07-09 03:04:19 -04:00
Code Issues Packages Projects Releases Wiki Activity

Bugfix/ux pass 2 (#1107)

Browse Source 
* 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 <joseph.v.milazzo@gmail.com>
This commit is contained in:
Robbie Davis 2022-02-24 07:53:20 -05:00 committed by GitHub
parent cd0af70a37
commit d0c255de68
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 41 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
UI/Web/src/app/_services/action.service.ts
View File

@ -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);
}

2
UI/Web/src/app/admin/_modals/directory-picker/directory-picker.component.ts
View File

@ -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[] = [];

3
UI/Web/src/app/admin/_modals/library-editor-modal/library-editor-modal.component.ts
View File

@ -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;

2
UI/Web/src/app/admin/manage-library/manage-library.component.ts
View File

@ -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);
});
}

6
UI/Web/src/app/book-reader/book-reader/book-reader.component.ts
View File

@ -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();

2
UI/Web/src/app/grouped-typeahead/grouped-typeahead.component.html
View File

@ -8,7 +8,7 @@
<div class="spinner-border spinner-border-sm" role="status" *ngIf="isLoading">
<span class="visually-hidden">Loading...</span>
</div>
<button type="button" class="btn-close float-end" aria-label="Close" (click)="resetField()">
<button type="button" class="btn-close" aria-label="Close" (click)="resetField()">
</button>
</div>

5
UI/Web/src/app/grouped-typeahead/grouped-typeahead.component.scss
View File

@ -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 {

2
UI/Web/src/app/series-detail/series-detail.component.html
View File

@ -61,7 +61,7 @@
<ng-container>
<app-bulk-operations [actionCallback]="bulkActionCallback"></app-bulk-operations>
<ul ngbNav #nav="ngbNav" [(activeId)]="activeTabId" class="nav nav-tabs" [destroyOnHide]="false" (navChange)="onNavChange($event)">
<ul ngbNav #nav="ngbNav" [(activeId)]="activeTabId" class="nav nav-tabs mb-2" [destroyOnHide]="false" (navChange)="onNavChange($event)">
<li [ngbNavItem]="TabID.Specials" *ngIf="hasSpecials">
<a ngbNavLink>Specials</a>
<ng-template ngbNavContent>

4
UI/Web/src/app/series-metadata-detail/series-metadata-detail.component.html
View File

@ -57,8 +57,8 @@
</div>
<div class="row g-0">
<hr class="col-md-11" *ngIf="hasExtendedProperites" >
<a [class.hidden]="hasExtendedProperites" *ngIf="hasExtendedProperites" class="col-md-1 read-more-link" (click)="toggleView()">&nbsp;<i aria-hidden="true" class="fa fa-caret-{{isCollapsed ? 'down' : 'up'}}" aria-controls="extended-series-metadata"></i>&nbsp;See {{isCollapsed ? 'More' : 'Less'}}</a>
<hr class="col mt-3" *ngIf="hasExtendedProperites" >
<a [class.hidden]="hasExtendedProperites" *ngIf="hasExtendedProperites" class="col col-md-auto align-self-end read-more-link" (click)="toggleView()">&nbsp;<i aria-hidden="true" class="fa fa-caret-{{isCollapsed ? 'down' : 'up'}}" aria-controls="extended-series-metadata"></i>&nbsp;See {{isCollapsed ? 'More' : 'Less'}}</a>
</div>
<div #collapse="ngbCollapse" [(ngbCollapse)]="isCollapsed" id="extended-series-metadata">

2
UI/Web/src/app/shared/tag-badge/tag-badge.component.scss
View File

@ -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;

5
UI/Web/src/app/user-settings/api-key/api-key.component.html
View File

@ -5,7 +5,10 @@
<input #apiKey type="text" readonly class="form-control" id="api-key--{{title}}" aria-describedby="button-addon4" [value]="key" (click)="selectAll()">
<div id="button-addon4">
<button class="btn btn-outline-secondary" type="button" (click)="copy()"><span class="visually-hidden">Copy</span><i class="fa fa-copy" aria-hidden="true"></i></button>
<button class="btn btn-danger" type="button" (click)="refresh()" *ngIf="showRefresh"><span class="visually-hidden">Regenerate</span><i class="fa fa-sync-alt" aria-hidden="true"></i></button>
<button class="btn btn-danger" type="button" [ngbTooltip]="tipContent" (click)="refresh()" *ngIf="showRefresh"><span class="visually-hidden">Regenerate</span><i class="fa fa-sync-alt" aria-hidden="true"></i></button>
</div>
<ng-template #tipContent>
Regenerating your API key will invalidate any existing clients.
</ng-template>
</div>
</div>

2
UI/Web/src/app/user-settings/series-bookmarks/series-bookmarks.component.html
View File

@ -1,5 +1,5 @@
<p *ngIf="series.length === 0 && !loadingBookmarks">
There are no bookmarks. Try creating <a href="https://wiki.kavitareader.com/guides/webreader/bookmarks" target="_blank">one&nbsp;<i class="fa fa-external-link-alt" aria-hidden="true"></i></a>.
There are no bookmarks. Try creating <a href="https://wiki.kavitareader.com/en/guides/get-started-using-your-library/bookmarks" target="_blank">one&nbsp;<i class="fa fa-external-link-alt" aria-hidden="true"></i></a>.
</p>
<ul class="list-group">
<li *ngFor="let series of series" class="list-group-item">

2
UI/Web/src/app/user-settings/user-preferences/user-preferences.component.html
View File

@ -9,7 +9,7 @@
These are global settings that are bound to your account.
</p>
<ngb-accordion [closeOthers]="true" activeIds="site-panel" #acc="ngbAccordion">
<ngb-accordion [closeOthers]="true" activeIds="reading-panel" #acc="ngbAccordion">
<!-- <ngb-panel id="site-panel" title="Site">
<ng-template ngbPanelHeader>
<h2 class="accordion-header">

4
UI/Web/src/theme/components/_anchors.scss
View File

@ -21,6 +21,10 @@ a.read-more-link {
color: var(--body-text-color);
cursor: pointer;
color: var(--body-text-color) !important;
&:hover {
text-decoration: none;
}
}
a {

6
UI/Web/src/theme/components/_tagbadge.scss
View File

@ -3,3 +3,9 @@
color: var(--tagbadge-text-color);
background-color: var(--tagbadge-bg-color);
}
.typeahead-input .tagbadge {
border-color: var(--tagbadge-typeahead-border-color);
color: var(--tagbadge-typeahead-text-color);
background-color: var(--tagbadge-typeahead-bg-color);
}

4
UI/Web/src/theme/themes/dark.scss
View File

@ -84,6 +84,10 @@
--tagbadge-border-color: rgba(239, 239, 239, 0.125);
--tagbadge-text-color: var(--body-text-color);
--tagbadge-bg-color: var(--nav-tab-hover-bg-color);
--tagbadge-typeahead-border-color: rgba(239, 239, 239, 0.125);
--tagbadge-typeahead-text-color: var(--body-text-color);
--tagbadge-typeahead-bg-color: var(--primary-color);
/* List items */
--list-group-item-text-color: var(--body-text-color); /*rgba(74, 198, 148, 0.9)*/