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

Theme Cleanup (#1089)

Browse Source 
* Fixed e-ink theme not properly applying correctly

* Fixed some seed changes. Changed card checkboxes to use our themed ones

* Fixed recently added carousel not going to recently-added page

* Fixed an issue where no results found would show when searching for a library name

* Cleaned up list a bit, typeahead dropdown still needs work

* Added a TODO to streamline series-card component

* Removed ng-lazyload-image module since we don't use it. We use lazysizes

* Darken card on hover

* Fixing accordion focus style

* ux pass updates

- Fixed typeahead width
- Fixed changelog download buttons
- Fixed a select
- Fixed various input box-shadows
- Fixed all anchors to only have underline on hover
- Added navtab hover and active effects

* more ux pass

- Fixed spacing on theme cards
- Fixed some light theme issues
- Exposed text-muted-color for theme card subtitle color

* UX pass fixes

- Changed back to bright green for primary on dark theme
- Changed fa icon to black on e-ink

* Merged changelog component

* Fixed anchor buttons text decoration

* Changed nav tabs to have a background color instead of open active state

* When user is not authenticated, make sure we set default theme (dark)

* Cleanup on carousel

* Updated Users tab to use small buttons with icons to align with Library tab

* Cleaned up brand to not underline, removed default link underline on hover in dropdown and pill tabs

* Fixed collection detail posters not rendering

Co-authored-by: Robbie Davis <robbie@therobbiedavis.com>
This commit is contained in:
Joseph Milazzo 2022-02-18 07:03:19 -08:00 committed by GitHub
parent 70b85e0668
commit 4bd9f243f2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
51 changed files with 279 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
API/Data/Seed.cs
View File

@ -46,7 +46,7 @@ namespace API.Data
Name = "E-Ink",
NormalizedName = Parser.Parser.Normalize("E-Ink"),
Provider = ThemeProvider.System,
FileName = "eink.scss",
FileName = "e-ink.scss",
IsDefault = false,
},
};

8
UI/Web/package-lock.json generated
View File

@ -9173,14 +9173,6 @@
"tslib": "^2.0.0"
}
},
"ng-lazyload-image": {
"version": "9.1.2",
"resolved": "https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-9.1.2.tgz",
"integrity": "sha512-E5oz5HdTRtYW/TH+jceT4VMcRXKdX9Ut82eEwt2K0/bFAXKU14HluCFa8cMidPBgSa08Mlf+gmoKCTvAfUPgag==",
"requires": {
"tslib": "^2.3.0"
}
},
"ngx-file-drop": {
"version": "13.0.0",
"resolved": "https://registry.npmjs.org/ngx-file-drop/-/ngx-file-drop-13.0.0.tgz",

1
UI/Web/package.json
View File

@ -38,7 +38,6 @@
"file-saver": "^2.0.5",
"lazysizes": "^5.3.2",
"ng-circle-progress": "^1.6.0",
"ng-lazyload-image": "^9.1.2",
"ngx-file-drop": "^13.0.0",
"ngx-toastr": "^14.2.1",
"rxjs": "~7.5.4",

4
UI/Web/src/app/_models/events/refresh-metadata-event.ts
View File

@ -1,4 +0,0 @@
export interface RefreshMetadataEvent {
libraryId: number;
seriesId: number;
}

2
UI/Web/src/app/person-role.pipe.ts → UI/Web/src/app/_pipes/person-role.pipe.ts
View File

@ -1,5 +1,5 @@
import { Pipe, PipeTransform } from '@angular/core';
import { PersonRole } from './_models/person';
import { PersonRole } from '../_models/person';
@Pipe({
name: 'personRole'

2
UI/Web/src/app/publication-status.pipe.ts → UI/Web/src/app/_pipes/publication-status.pipe.ts
View File

@ -1,5 +1,5 @@
import { Pipe, PipeTransform } from '@angular/core';
import { PublicationStatus } from './_models/metadata/publication-status';
import { PublicationStatus } from '../_models/metadata/publication-status';
@Pipe({
name: 'publicationStatus'

2
UI/Web/src/app/_services/account.service.ts
View File

@ -84,6 +84,8 @@ export class AccountService implements OnDestroy {
} else {
this.themeService.setTheme(this.themeService.defaultTheme);
}
} else {
this.themeService.setTheme(this.themeService.defaultTheme);
}
this.currentUserSource.next(user);

1
UI/Web/src/app/_services/series.service.ts
View File

@ -149,6 +149,7 @@ export class SeriesService {
}
scan(libraryId: number, seriesId: number) {
// TODO: Pipe and put a toaster up: this.toastr.info('Scan queued for ' + series.name);
return this.httpClient.post(this.baseUrl + 'series/scan', {libraryId: libraryId, seriesId: seriesId});
}

8
UI/Web/src/app/admin/changelog/changelog.component.html
View File

@ -8,8 +8,12 @@
</h4>
<h6 class="card-subtitle mb-2 text-muted">Published: {{update.publishDate | date: 'short'}}</h6>
<pre class="card-text update-body" [innerHtml]="update.updateBody | safeHtml"></pre>
<a *ngIf="!update.isDocker" href="{{update.updateUrl}}" class="btn btn-{{indx === 0 ? 'primary' : 'secondary'}} float-end" target="_blank">Download</a>
<pre class="card-text update-body">
<app-read-more class="float-end" [text]="update.updateBody" [maxLength]="500"></app-read-more>
</pre>
<a *ngIf="!update.isDocker && update.updateVersion === installedVersion" href="{{update.updateUrl}}" class="btn disabled btn-{{indx === 0 ? 'primary' : 'secondary'}} float-end" target="_blank">Installed</a>
<a *ngIf="!update.isDocker && update.updateVersion !== installedVersion" href="{{update.updateUrl}}" class="btn btn-{{indx === 0 ? 'primary' : 'secondary'}} float-end" target="_blank">Download</a>
</div>
</div>
</ng-container>

6
UI/Web/src/app/admin/manage-users/manage-users.component.html
View File

@ -45,9 +45,9 @@
<span class="visually-hidden">(You)</span>
</span>
<div class="float-end" *ngIf="canEditMember(member)">
<button class="btn btn-danger me-2" (click)="deleteUser(member)" placement="top" ngbTooltip="Delete User" attr.aria-label="Delete User {{member.username | titlecase}}"><i class="fa fa-trash" aria-hidden="true"></i></button>
<button class="btn btn-secondary me-2" (click)="updatePassword(member)" placement="top" ngbTooltip="Change Password" attr.aria-label="Change Password for {{member.username | titlecase}}"><i class="fa fa-key" aria-hidden="true"></i></button>
<button class="btn btn-primary" (click)="openEditUser(member)" placement="top" ngbTooltip="Edit" attr.aria-label="Edit {{member.username | titlecase}}"><i class="fa fa-pen" aria-hidden="true"></i></button>
<button class="btn btn-danger btn-sm me-2" (click)="deleteUser(member)" placement="top" ngbTooltip="Delete User" attr.aria-label="Delete User {{member.username | titlecase}}"><i class="fa fa-trash" aria-hidden="true"></i></button>
<button class="btn btn-secondary btn-sm me-2" (click)="updatePassword(member)" placement="top" ngbTooltip="Change Password" attr.aria-label="Change Password for {{member.username | titlecase}}"><i class="fa fa-key" aria-hidden="true"></i></button>
<button class="btn btn-primary btn-sm" (click)="openEditUser(member)" placement="top" ngbTooltip="Edit" attr.aria-label="Edit {{member.username | titlecase}}"><i class="fa fa-pen" aria-hidden="true"></i></button>
</div>
</h4>
<div>Last Active:

7
UI/Web/src/app/app.module.ts
View File

@ -31,12 +31,12 @@ import { ReadingListModule } from './reading-list/reading-list.module';
import { SAVER, getSaver } from './shared/_providers/saver.provider';
import { ConfigData } from './_models/config-data';
import { NavEventsToggleComponent } from './nav-events-toggle/nav-events-toggle.component';
import { PersonRolePipe } from './person-role.pipe';
import { PersonRolePipe } from './_pipes/person-role.pipe';
import { SeriesMetadataDetailComponent } from './series-metadata-detail/series-metadata-detail.component';
import { AllSeriesComponent } from './all-series/all-series.component';
import { PublicationStatusPipe } from './publication-status.pipe';
import { RegistrationModule } from './registration/registration.module';
import { GroupedTypeaheadComponent } from './grouped-typeahead/grouped-typeahead.component';
import { PublicationStatusPipe } from './_pipes/publication-status.pipe';
import { ThemeTestComponent } from './theme-test/theme-test.component';
@ -71,7 +71,7 @@ import { ThemeTestComponent } from './theme-test/theme-test.component';
NgbDropdownModule, // Nav
NgbPopoverModule, // Nav Events toggle
NgbRatingModule, // Series Detail
NgbRatingModule, // Series Detail & Filter
NgbNavModule,
NgbPaginationModule,
@ -85,6 +85,7 @@ import { ThemeTestComponent } from './theme-test/theme-test.component';
ReadingListModule,
RegistrationModule,
ToastrModule.forRoot({
positionClass: 'toast-bottom-right',
preventDuplicates: true,

2
UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html
View File

@ -335,7 +335,7 @@
<i class="fa fa-arrow-down" title="Descending"></i>
</ng-template>
</button>
<select id="sort-options" class="form-control" formControlName="sortField" style="height: 38px;">
<select id="sort-options" class="form-select" formControlName="sortField" style="height: 38px;">
<option [value]="SortField.SortName">Sort Name</option>
<option [value]="SortField.Created">Created</option>
<option [value]="SortField.LastModified">Last Modified</option>

4
UI/Web/src/app/cards/card-item/card-item.component.html
View File

@ -23,7 +23,7 @@
<div class="not-read-badge" *ngIf="read === 0 && total > 0"></div>
<div class="bulk-mode {{bulkSelectionService.hasSelections() ? 'always-show' : ''}}" (click)="handleSelection($event)" *ngIf="allowSelection">
<input type="checkbox" attr.aria-labelledby="{{title}}_{{entity?.id}}" [ngModel]="selected" [ngModelOptions]="{standalone: true}">
<input type="checkbox" class="form-check-input" attr.aria-labelledby="{{title}}_{{entity?.id}}" [ngModel]="selected" [ngModelOptions]="{standalone: true}">
</div>
<div class="count" *ngIf="count > 1">
@ -34,7 +34,7 @@
<div class="card-body" *ngIf="title.length > 0 || actions.length > 0">
<div>
<span class="card-title" placement="top" id="{{title}}_{{entity?.id}}" [ngbTooltip]="tooltipTitle" (click)="handleClick()" tabindex="0">
<span class="card-title" placement="top" id="{{title}}_{{entity?.id}}" [ngbTooltip]="tooltipTitle" (click)="handleClick($event)" tabindex="0">
<span *ngIf="isPromoted()">
<i class="fa fa-angle-double-up" aria-hidden="true"></i>
<span class="visually-hidden">(promoted)</span>

7
UI/Web/src/app/cards/card-item/card-item.component.scss
View File

@ -97,6 +97,7 @@ $image-width: 160px;
input[type="checkbox"] {
width: 20px;
height: 20px;
color: var(--checkbox-bg-color);
}
}
@ -157,9 +158,5 @@ $image-width: 160px;
width: 100%;
height: 230px;
z-index: 10;
transition: opacity 0.2s;
}
.card-overlay:hover {
opacity: 0;
transition: all 0.2s;
}

2
UI/Web/src/app/cards/cards.module.ts
View File

@ -7,7 +7,6 @@ import { EditSeriesModalComponent } from './_modals/edit-series-modal/edit-serie
import { EditCollectionTagsComponent } from './_modals/edit-collection-tags/edit-collection-tags.component';
import { ChangeCoverImageModalComponent } from './_modals/change-cover-image/change-cover-image-modal.component';
import { BookmarksModalComponent } from './_modals/bookmarks-modal/bookmarks-modal.component';
import { LazyLoadImageModule } from 'ng-lazyload-image';
import { NgbTooltipModule, NgbCollapseModule, NgbPaginationModule, NgbDropdownModule, NgbProgressbarModule, NgbNavModule, NgbRatingModule } from '@ng-bootstrap/ng-bootstrap';
import { CardActionablesComponent } from './card-item/card-actionables/card-actionables.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@ -61,7 +60,6 @@ import { BookmarkComponent } from './bookmark/bookmark.component';
NgbRatingModule,
NgbNavModule, //Series Detail
LazyLoadImageModule,
NgbPaginationModule, // CardDetailLayoutComponent
NgbDropdownModule,
NgbProgressbarModule,

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

@ -1,6 +1,6 @@
<ng-container *ngIf="data !== undefined">
<app-card-item [title]="data.name" [actions]="actions" [supressLibraryLink]="suppressLibraryLink" [imageUrl]="imageUrl"
[entity]="data" [total]="data.pages" [read]="data.pagesRead" (clicked)="handleClick()"
[entity]="data" [total]="data.pages" [read]="data.pagesRead" (clicked)="handleClick()"
[allowSelection]="allowSelection" (selection)="selection.emit(selected)" [selected]="selected"
></app-card-item>
</ng-container>

3
UI/Web/src/app/cards/series-card/series-card.component.ts
View File

@ -2,7 +2,7 @@ import { Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output }
import { Router } from '@angular/router';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ToastrService } from 'ngx-toastr';
import { take, takeUntil, takeWhile } from 'rxjs/operators';
import { take } from 'rxjs/operators';
import { Series } from 'src/app/_models/series';
import { AccountService } from 'src/app/_services/account.service';
import { ImageService } from 'src/app/_services/image.service';
@ -11,7 +11,6 @@ import { SeriesService } from 'src/app/_services/series.service';
import { ConfirmService } from 'src/app/shared/confirm.service';
import { ActionService } from 'src/app/_services/action.service';
import { EditSeriesModalComponent } from '../_modals/edit-series-modal/edit-series-modal.component';
import { RefreshMetadataEvent } from 'src/app/_models/events/refresh-metadata-event';
import { MessageHubService } from 'src/app/_services/message-hub.service';
import { Subject } from 'rxjs';

2
UI/Web/src/app/carousel/carousel-reel/carousel-reel.component.html
View File

@ -8,8 +8,8 @@
</div>
<div>
<swiper
#swiper
[slidesPerView]="'auto'"
(init)="onSwiper($event)"
[freeMode]="true">
<ng-template *ngFor="let item of items; index as i;" swiperSlide>
<ng-container [ngTemplateOutlet]="carouselItemTemplate" [ngTemplateOutletContext]="{ $implicit: item, idx: i }"></ng-container>

1
UI/Web/src/app/carousel/carousel-reel/carousel-reel.component.ts
View File

@ -16,7 +16,6 @@ export class CarouselReelComponent implements OnInit {
swiper: Swiper | undefined;
trackByIdentity: (index: number, item: any) => string;
get isEnd() {

4
UI/Web/src/app/collections/collection-detail/collection-detail.component.html
View File

@ -1,7 +1,7 @@
<div class="container-fluid" *ngIf="collectionTag !== undefined" style="padding-top: 10px">
<div class="row mb-3">
<div class="col-md-2 col-xs-4 col-sm-6">
<app-image class="poster" maxWidth="481px" [imageUrl]="tagImage"></app-image>
<div class="col-md-2 col-xs-4 col-sm-6 poster">
<app-image maxWidth="481px" [imageUrl]="tagImage"></app-image>
</div>
<div class="col-md-10 col-xs-8 col-sm-6">
<div class="row g-0">

30
UI/Web/src/app/collections/collection-detail/collection-detail.component.scss
View File

@ -1,20 +1,16 @@
@import '~bootstrap/scss/mixins/breakpoints';
.poster {
width: 100%;
max-height: 481px;
width: 100%;
max-width: 300px;
}
@media(max-width: var(--grid-breakpoints-sm)) {
.poster {
display: none;
}
// Including breakpoint has issue with resovling variable, so copying gridpoints here
@include media-breakpoint-down(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) {
.poster {
display: none;
}
}
@media(max-width: var(--grid-breakpoints-sm)) {
.read-btn--text {
display: none;
}
@include media-breakpoint-down(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) {
.read-btn--text {
display: none;
}
}
}

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

@ -85,7 +85,8 @@
</ul>
</ng-container>
<ng-container *ngIf="noResultsTemplate != undefined && searchTerm.length > 0 && !grouppedData.persons.length && !grouppedData.collections.length && !grouppedData.series.length && !grouppedData.persons.length && !grouppedData.tags.length && !grouppedData.genres.length">
<ng-container *ngIf="noResultsTemplate != undefined && searchTerm.length > 0 && !grouppedData.persons.length && !grouppedData.collections.length
&& !grouppedData.series.length && !grouppedData.persons.length && !grouppedData.tags.length && !grouppedData.genres.length && !grouppedData.libraries.length">
<ul class="list-group results">
<li class="list-group-item">
<ng-container [ngTemplateOutlet]="noResultsTemplate"></ng-container>

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

@ -42,20 +42,6 @@ form {
display: flex;
}
// .close {
// cursor: pointer;
// position: absolute;
// top: 7px;
// right: 10px;
// }
// @media only screen and (max-width:650px) {
// .close {
// top: 50%;
// transform: translate(0, -60%);
// }
// }
input {
outline: 0 !important;
@ -67,7 +53,7 @@ form {
text-indent: 0 !important;
line-height: inherit !important;
box-shadow: none !important;
width: 200px;
width: 300px;
transition-property: all;
transition-duration: 0.3s;
display: block;

2
UI/Web/src/app/library/library.component.html
View File

@ -25,7 +25,7 @@
</ng-template>
</app-carousel-reel>
<app-carousel-reel [items]="recentlyAddedChapters" title="Recently Added">
<app-carousel-reel [items]="recentlyAddedChapters" title="Recently Added" (sectionClick)="handleSectionClick($event)">
<ng-template #carouselItem let-item let-position="idx">
<app-card-item [entity]="item" [title]="item.title" [subtitle]="item.seriesName" [imageUrl]="imageService.getRecentlyAddedItem(item)"
[supressArchiveWarning]="true" (clicked)="handleRecentlyAddedChapterClick(item)"></app-card-item>

1
UI/Web/src/app/library/library.component.ts
View File

@ -3,7 +3,6 @@ import { Title } from '@angular/platform-browser';
import { Router } from '@angular/router';
import { ReplaySubject, Subject } from 'rxjs';
import { debounceTime, take, takeUntil } from 'rxjs/operators';
import { RefreshMetadataEvent } from '../_models/events/refresh-metadata-event';
import { SeriesAddedEvent } from '../_models/events/series-added-event';
import { SeriesRemovedEvent } from '../_models/events/series-removed-event';
import { Library } from '../_models/library';

4
UI/Web/src/app/nav-header/nav-header.component.scss
View File

@ -39,6 +39,10 @@
font-family: var(--brand-font-family);
font-weight: bold;
&:hover {
text-decoration: none;
}
.logo {
max-height: 28px;
vertical-align: top;

1
UI/Web/src/app/series-detail/series-detail.component.ts
View File

@ -15,7 +15,6 @@ import { DownloadService } from '../shared/_services/download.service';
import { KEY_CODES, UtilityService } from '../shared/_services/utility.service';
import { ReviewSeriesModalComponent } from '../_modals/review-series-modal/review-series-modal.component';
import { Chapter } from '../_models/chapter';
import { RefreshMetadataEvent } from '../_models/events/refresh-metadata-event';
import { ScanSeriesEvent } from '../_models/events/scan-series-event';
import { SeriesRemovedEvent } from '../_models/events/series-removed-event';
import { LibraryType } from '../_models/library';

4
UI/Web/src/app/shared/image/image.component.html
View File

@ -1,3 +1,7 @@
<img #img class="lazyload" [src]="imageService.placeholderImage" [attr.data-src]="imageUrl"
(error)="imageService.updateErroredImage($event)"
aria-hidden="true">
<!-- <img #img [defaultImage]="imageService.placeholderImage" [lazyload]="imageUrl"
(error)="imageService.updateErroredImage($event)"
aria-hidden="true"> -->

26
UI/Web/src/app/shared/shared.module.ts
View File

@ -45,20 +45,18 @@ import { ImageComponent } from './image/image.component';
NgCircleProgressModule.forRoot(),
],
exports: [
SafeHtmlPipe,
SentenceCasePipe,
ReadMoreComponent,
DrawerComponent,
TagBadgeComponent,
ShowIfScrollbarDirective,
A11yClickDirective,
SeriesFormatComponent,
SeriesFormatComponent,
TagBadgeComponent,
CircularLoaderComponent,
PersonBadgeComponent,
BadgeExpanderComponent,
ImageComponent
SafeHtmlPipe, // Used globally
SentenceCasePipe, // Used globablly
ReadMoreComponent, // Used globably
DrawerComponent, // Can be replaced with boostrap offscreen canvas (v5)
ShowIfScrollbarDirective, // Used book reader only?
A11yClickDirective, // Used globally
SeriesFormatComponent, // Used globally
TagBadgeComponent, // Used globally
CircularLoaderComponent, // Used in Cards only
PersonBadgeComponent, // Used Series Detail
BadgeExpanderComponent, // Used globally
ImageComponent // Used globally
],
})
export class SharedModule { }

9
UI/Web/src/app/typeahead/typeahead.component.scss
View File

@ -1,3 +1,7 @@
form {
position: relative;
}
input {
width: 15px;
opacity: 1px;
@ -42,6 +46,7 @@ input {
.dropdown {
width: 100%;
min-width: 10rem;
background: var(--input-bg-color);
z-index:1000;
margin: 2px 0 0;
@ -56,6 +61,7 @@ input {
.list-group-item {
padding: 5px 10px;
width: 100%;
}
@ -64,9 +70,6 @@ input {
}
}
.list-group-item {
cursor: pointer;
}
.spinner-border {
position: absolute;

26
UI/Web/src/app/user-settings/_pipes/site-theme-provider.pipe.spec.ts Normal file
View File

@ -0,0 +1,26 @@
import { ThemeProvider } from '../../_models/preferences/site-theme';
import { SiteThemeProviderPipe } from './site-theme-provider.pipe';
describe('SiteThemeProviderPipe', () => {
let siteThemeProviderPipe: SiteThemeProviderPipe;
beforeEach(() => {
siteThemeProviderPipe = new SiteThemeProviderPipe();
})
it('translates system to System', () => {
expect(siteThemeProviderPipe.transform(ThemeProvider.System)).toBe('System');
});
it('translates user to User', () => {
expect(siteThemeProviderPipe.transform(ThemeProvider.User)).toBe('User');
});
it('translates null to empty string', () => {
expect(siteThemeProviderPipe.transform(null)).toBe('');
});
it('translates undefined to empty string', () => {
expect(siteThemeProviderPipe.transform(undefined)).toBe('');
});
});

22
UI/Web/src/app/user-settings/_pipes/site-theme-provider.pipe.ts Normal file
View File

@ -0,0 +1,22 @@
import { Pipe, PipeTransform } from '@angular/core';
import { ThemeProvider } from 'src/app/_models/preferences/site-theme';
@Pipe({
name: 'siteThemeProvider'
})
export class SiteThemeProviderPipe implements PipeTransform {
transform(provider: ThemeProvider | undefined | null): string {
if (provider === null || provider === undefined) return '';
switch(provider) {
case ThemeProvider.System:
return 'System';
case ThemeProvider.User:
return 'User';
default:
return '';
}
}
}

7
UI/Web/src/app/user-settings/theme-manager/theme-manager.component.html
View File

@ -10,13 +10,10 @@
<div class="row g-0">
<ng-container *ngFor="let theme of (themeService.themes$ | async)">
<div class="card col-auto me-3" style="width: 18rem;">
<div class="card col-auto me-3 mb-3" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">{{theme.name | sentenceCase}}</h5>
<h6 class="card-subtitle mb-2 text-muted">{{theme.provider === ThemeProvider.System ? 'System' : 'User'}}</h6>
<!-- <p class="card-text">
<i class="far fa-file-code" style="font-size: 24px" aria-hidden="true"></i>
</p> -->
<h6 class="card-subtitle mb-2 text-muted">{{theme.provider | siteThemeProvider}}</h6>
<button class="btn btn-secondary me-2" [disabled]="theme.isDefault" *ngIf="isAdmin" (click)="updateDefault(theme)">Set Default</button>
<button class="btn btn-primary" (click)="applyTheme(theme)" [disabled]="currentTheme?.id === theme.id">{{currentTheme?.id === theme.id ? 'Applied' : 'Apply'}}</button>
</div>

8
UI/Web/src/app/user-settings/user-settings.module.ts
View File

@ -9,6 +9,8 @@ import { UserSettingsRoutingModule } from './user-settings-routing.module';
import { ApiKeyComponent } from './api-key/api-key.component';
import { SharedModule } from '../shared/shared.module';
import { ThemeManagerComponent } from './theme-manager/theme-manager.component';
import { SiteThemeProviderPipe } from './_pipes/site-theme-provider.pipe';
@ -17,7 +19,8 @@ import { ThemeManagerComponent } from './theme-manager/theme-manager.component';
SeriesBookmarksComponent,
UserPreferencesComponent,
ApiKeyComponent,
ThemeManagerComponent
ThemeManagerComponent,
SiteThemeProviderPipe,
],
imports: [
CommonModule,
@ -28,6 +31,9 @@ import { ThemeManagerComponent } from './theme-manager/theme-manager.component';
NgxSliderModule,
UserSettingsRoutingModule,
SharedModule // SentenceCase pipe
],
exports: [
SiteThemeProviderPipe
]
})
export class UserSettingsModule { }

2
UI/Web/src/styles.scss
View File

@ -3,7 +3,7 @@
// Import themes which define the css variables we use to customize the app
@import './theme/themes/light';
@import './theme/themes/dark';
@import './theme/themes/eink';
@import './theme/themes/e-ink';
// Import colors for overrides of bootstrap theme
@import './theme/toastr';

2
UI/Web/src/theme/_variables.scss
View File

@ -9,6 +9,8 @@ $theme-colors: (
);
$form-select-indicator-color:#cecece;
$accordion-icon-color: #cecece;
$accordion-icon-active-color: #cecece;
$grid-breakpoints-xs: 0;
$grid-breakpoints-sm: 576px;

21
UI/Web/src/theme/components/_accordion.scss
View File

@ -13,12 +13,19 @@
}
}
.accordion-button:not(.collapsed) {
color: var(--accordion-header-text-color);
background-color: var(--accordion-body-bg-color);
}
.accordion-button {
&:not(.collapsed) {
color: var(--accordion-header-text-color);
background-color: var(--accordion-body-bg-color);
}
.accordion-button.collapsed {
color: var(--accordion-header-collapsed-text-color);
background-color: var(--accordion-header-collapsed-bg-color);
&.collapsed {
color: var(--accordion-header-collapsed-text-color);
background-color: var(--accordion-header-collapsed-bg-color);
}
&:focus {
border-color: var(--accordion-button-focus-border-color);
box-shadow: var(--accordion-button-focus-box-shadow);
}
}

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

@ -6,10 +6,27 @@ a:not(.dark-exempt) {
}
}
a.btn {
color: inherit;
text-decoration: none;
&:hover {
text-decoration: none;
}
}
a.read-more-link {
font-weight: bold;
text-decoration: none;
color: var(--body-text-color);
cursor: pointer;
color: var(--body-text-color) !important;
}
}
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}

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

@ -69,3 +69,7 @@ button:disabled, .form-control:disabled, .form-control[readonly], .disabled, :di
button i.fa {
color: var(--btn-fa-icon-color);
}
.btn-check:focus + .btn, .btn:focus {
box-shadow: 0 0 0 0.25rem var(--btn-focus-boxshadow-color);
}

10
UI/Web/src/theme/components/_card.scss
View File

@ -4,11 +4,11 @@
border-color: var(--card-border-color);
position: relative;
.overlay:hover {
background-color: var(--card-overlay-hover-bg-color);
}
.card-overlay {
background-color: var(--card-overlay-hover-bg-color);
background-color: var(--card-overlay-bg-color);
&:hover {
background-color: var(--card-overlay-hover-bg-color);
}
}
}

7
UI/Web/src/theme/components/_checkbox.scss
View File

@ -8,8 +8,13 @@
border-color: var(--checkbox-checked-bg-color);
}
&:focus, &:hover {
&:hover {
border-color: var(--checkbox-focus-border-color);
}
&:focus {
border-color: var(--checkbox-focus-border-color);
box-shadow: 0 0 0 0.25rem var(--checkbox-focus-boxshadow-color);
}
}

1
UI/Web/src/theme/components/_dropdown.scss
View File

@ -10,6 +10,7 @@
&:hover, &:focus {
color: var(--dropdown-item-hover-text-color);
background-color: var(--dropdown-item-hover-bg-color);
text-decoration: none;
}
}
}

1
UI/Web/src/theme/components/_input.scss
View File

@ -7,6 +7,7 @@ input, .form-control {
border-color: var(--input-focused-border-color);
background-color: var(--input-bg-color);
color: var(--input-text-color);
box-shadow: 0 0 0 0.25rem var(--input-focus-boxshadow-color);
}
&:read-only {

2
UI/Web/src/theme/components/_list.scss
View File

@ -3,7 +3,6 @@
background-color: var(--list-group-item-bg-color);
border-color: var(--list-group-item-border-color);
// TODO: We need a css class where we can exclude hover effects, like when list is just used for layout purposes
&:hover {
color: var(--list-group-hover-text-color);
background-color: var(--list-group-hover-bg-color);
@ -12,6 +11,7 @@
&.active {
color: var(--list-group-hover-text-color);
background-color: var(--list-group-hover-bg-color);
border-color: var(--list-group-active-border-color);
}
&.no-hover:hover {

30
UI/Web/src/theme/components/_nav.scss
View File

@ -3,6 +3,7 @@
&:hover, &:focus {
color: var(--nav-link-hover-text-color);
text-decoration: none;
}
&.active {
@ -21,6 +22,7 @@
.nav-link {
color: var(--nav-link-text-color);
position: relative;
&.active, &:focus {
color: var(--nav-tab-active-text-color);
@ -29,6 +31,11 @@
border-left-color: var(--nav-tab-border-left);
border-bottom-color: var(--nav-tab-border-bottom);
border-right-color: var(--nav-tab-border-right);
transform: scaleY(1);
}
&.active::before {
transform: scaleY(1);
}
&:hover {
@ -36,9 +43,26 @@
background-color: var(--nav-tab-hover-bg-color);
border-top-color: var(--nav-tab-hover-border-top);
border-left-color: var(--nav-tab-hover-border-left);
border-bottom-color: var(--nav-tab-border-hover-bottom);
border-right-color: var(--nav-tab-border-hover-right);
border-color: var(--nav-tab-border-hover-color);
border-bottom-color: var(--nav-tab-hover-border-bottom);
border-right-color: var(--nav-tab-hover-border-right);
}
&.active:hover {
background-color: var(--nav-tab-active-hover-bg-color);
}
&::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
transform: scaleY(0);
transform-origin: bottom center;
background: var(--nav-tab-active-hover-bg-color);
z-index: -1;
transition: transform 0.2s;
}
}

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

@ -4,4 +4,8 @@ input[type='radio'] {
&:hover {
accent-color: var(--radio-hover-accent-color);
}
&:focus {
box-shadow: 0 0 0 0.25rem var(--radio-focus-boxshadow-color);
}
}

1
UI/Web/src/theme/components/_selects.scss
View File

@ -7,6 +7,7 @@
border-color: var(--input-focused-border-color);
background-color: var(--input-bg-color);
color: var(--input-text-color);
box-shadow: 0 0 0 0.25rem var(--input-focus-boxshadow-color);
}
&:read-only {

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

@ -5,16 +5,16 @@
--primary-color-darker-shade: #338A67;
--primary-color-darkest-shade: #25624A;
--error-color: #BD362F;
--bs-body-bg: #343a40;
--bs-body-bg: #343a40;
--body-text-color: #efefef;
--btn-icon-filter: invert(1) grayscale(100%) brightness(200%);
/* Navbar */
--navbar-bg-color: black;
--navbar-text-color: white;
--navbar-fa-icon-color: white;
--navbar-btn-hover-outline-color: rgba(255, 255, 255, 1);
/* Inputs */
--input-bg-color: #343a40;
--input-bg-readonly-color: #434648;
@ -22,78 +22,81 @@
--input-text-color: #fff;
--input-placeholder-color: #aeaeae;
--input-border-color: #ccc;
--input-focus-boxshadow-color: rgb(255 255 255 / 50%);
/* Buttons */
--btn-focus-boxshadow-color: rgb(255 255 255 / 50%);
--btn-primary-text-color: white;
--btn-primary-bg-color: var(--primary-color-darker-shade);
--btn-primary-border-color: var(--primary-color-darker-shade);
--btn-primary-bg-color: var(--primary-color);
--btn-primary-border-color: var(--primary-color);
--btn-primary-hover-text-color: white;
--btn-primary-hover-bg-color: var(--primary-color-darkest-shade);
--btn-primary-hover-border-color: var(--primary-color-darkest-shade);
--btn-primary-hover-bg-color: var(--primary-color-darker-shade);
--btn-primary-hover-border-color: var(--primary-color-darker-shade);
--btn-alt-bg-color: #424c72;
--btn-alt-border-color: #444f75;
--btn-alt-hover-bg-color: #3b4466;
--btn-alt-focus-bg-color: #343c59;
--btn-alt-focus-boxshadow-color: rgb(68 79 117 / 50%);
--btn-alt-focus-boxshadow-color: rgb(255 255 255 / 50%);
--btn-fa-icon-color: white;
--btn-disabled-bg-color: #343a40;
--btn-disabled-text-color: white;
--btn-disabled-border-color: #6c757d;
/* Nav (Tabs) */
--nav-tab-border-color: rgba(44, 118, 88, 0.7);
--nav-tab-text-color: var(--body-text-color);
--nav-tab-bg-color: var(--bs-body-bg);
--nav-tab-hover-border-color: var(--primary-color-dark-shade);
--nav-tab-bg-color: var(--primary-color);
--nav-tab-hover-border-color: var(--primary-color);
--nav-tab-active-text-color: white;
--nav-tab-border-hover-color: transparent;
--nav-tab-hover-text-color: var(--body-text-color);
--nav-tab-hover-bg-color: var(--primary-color-dark-shade);
--nav-tab-hover-bg-color: transparent;
--nav-tab-border-top: rgba(44, 118, 88, 0.7);
--nav-tab-border-left: rgba(44, 118, 88, 0.7);
--nav-tab-border-bottom: var(--bs-body-bg);
--nav-tab-border-bottom: rgba(44, 118, 88, 0.7);
--nav-tab-border-right: rgba(44, 118, 88, 0.7);
--nav-tab-border-hover-top: var(--primary-color-dark-shade);
--nav-tab-border-hover-left: var(--primary-color-dark-shade);
--nav-tab-border-hover-bottom: rgba(44, 118, 88, 0.7);
--nav-tab-border-hover-right: var(--primary-color-dark-shade);
--nav-link-bg-color: var(--primary-color-dark-shade);
--nav-tab-hover-border-top: rgba(44, 118, 88, 0.7);
--nav-tab-hover-border-left: rgba(44, 118, 88, 0.7);
--nav-tab-hover-border-bottom: var(--bs-body-bg);
--nav-tab-hover-border-right: rgba(44, 118, 88, 0.7);
--nav-tab-active-hover-bg-color: var(--primary-color);
--nav-link-bg-color: var(--primary-color);
--nav-link-active-text-color: white;
--nav-link-text-color: white;
/* Header */
/* Header */
--nav-header-text-color: white;
--nav-header-bg-color: rgb(22, 27, 34);
/* Toasts */
--toast-success-bg-color: rgba(59, 158, 118, 0.9);
--toast-error-bg-color: #BD362F;
--toast-info-bg-color: #2F96B4;
--toast-warning-bg-color: #F89406;
/* Checkboxes */
--checkbox-checked-bg-color: var(--primary-color);
--checkbox-border-color: var(--input-focused-border-color);
--checkbox-focus-border-color: var(--primary-color);
--checkbox-focus-boxshadow-color: rgb(255 255 255 / 50%);
/* Tag Badge */
--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);
/* List items */
--list-group-item-text-color: var(--body-text-color); /*rgba(74, 198, 148, 0.9)*/
--list-group-item-bg-color: #343a40;
--list-group-item-border-color: rgba(239, 239, 239, 0.125);
--list-group-hover-text-color: white;
--list-group-hover-bg-color: var(--accordion-body-bg-color);
--list-group-active-border-color: none;
/* Popover */
--popover-body-bg-color: var(--navbar-bg-color);
--popover-body-text-color: var(--navbar-text-color);
/* Pagination */
--pagination-active-link-border-color: var(--primary-color);
--pagination-active-link-bg-color: var(--primary-color);
@ -102,14 +105,14 @@
--pagination-link-text-color: var(--primary-color);
--pagination-link-bg-color: rgba(1, 4, 9, 0.5);
--pagination-focus-border-color: var(--primary-color);
/* Dropdown */
--dropdown-item-hover-text-color: white;
--dropdown-item-hover-bg-color: var(--primary-color-dark-shade);
--dropdown-item-hover-bg-color: var(--primary-color);
--dropdown-item-text-color: var(--navbar-text-color);
--dropdown-item-bg-color: var(--navbar-bg-color);
--dropdown-overlay-color: rgba(0,0,0,0.5);
/* Accordion */
--accordion-header-text-color: rgba(74, 198, 148, 0.9);
--accordion-header-bg-color: rgba(52, 60, 70, 0.5); /* This is a good accent color */
@ -118,16 +121,18 @@
--accordion-body-text-color: var(--body-text-color);
--accordion-header-collapsed-text-color: rgba(74, 198, 148, 0.9);
--accordion-header-collapsed-bg-color: rgba(22,27,34,0.5);
--accordion-button-focus-border-color: unset;
--accordion-button-focus-box-shadow: unset;
/* Breadcrumb */
--breadcrumb-bg-color: #292d32;
--breadcrumb-item-text-color: var(--body-text-color);
/* Rating star */
--ratingstar-color: white;
--ratingstar-star-empty: #b0c4de;
--ratingstar-star-filled: var(--primary-color);
/* Global */
--hr-color: rgba(239, 239, 239, 0.125);
--accent-bg-color: rgba(1, 4, 9, 0.5);
@ -139,17 +144,18 @@
--grid-breakpoints-xl: $grid-breakpoint-xl;
--body-font-family: "EBGaramond", "Helvetica Neue", sans-serif;
--brand-font-family: "Spartan", sans-serif;
/* Card */
--card-bg-color: rgba(22,27,34,0.5);
--card-text-color: var(--body-text-color);
--card-border-color: rgba(239, 239, 239, 0.125);
--card-progress-bar-color: var(--primary-color);
--card-overlay-bg-color: rgba(0, 0, 0, 0);
--card-overlay-hover-bg-color: rgba(0, 0, 0, 0.2);
/* Slider */
--slider-text-color: white;
/* Manga Reader */
--manga-reader-overlay-filter: blur(10px);
--manga-reader-overlay-bg-color: rgba(0,0,0,0.5);
@ -157,10 +163,11 @@
--manga-reader-bg-color: black;
--manga-reader-next-highlight-bg-color: rgba(65, 225, 100, 0.5);
--manga-reader-prev-highlight-bg-color: rgba(65, 105, 225, 0.5);
/* Radios */
--radio-accent-color: var(--primary-color);
--radio-hover-accent-color: var(--primary-color-dark-shade);
--radio-hover-accent-color: var(--primary-color);
--radio-focus-boxshadow-color: rgb(255 255 255 / 50%);
/* Carousel */
--carousel-header-text-color: var(--body-text-color);

15
UI/Web/src/theme/themes/eink.scss → UI/Web/src/theme/themes/e-ink.scss
View File

@ -1,4 +1,4 @@
:root .bg-eink {
:root .bg-e-ink {
--color-scheme: light;
--primary-color: black;
--primary-color-dark-shade: #3B9E76;
@ -22,12 +22,22 @@
--input-border-color: #ccc;
/* Buttons */
--btn-primary-text-color: white;
--btn-primary-text-color: black;
--btn-primary-bg-color: white;
--btn-primary-border-color: black;
--btn-primary-hover-text-color: white;
--btn-primary-hover-bg-color: black;
--btn-primary-hover-border-color: black;
--btn-alt-bg-color: #424c72;
--btn-alt-border-color: #444f75;
--btn-alt-hover-bg-color: #3b4466;
--btn-alt-focus-bg-color: #343c59;
--btn-alt-focus-boxshadow-color: rgb(68 79 117 / 50%);
--btn-fa-icon-color: black;
--btn-disabled-bg-color: #020202;
--btn-disabled-text-color: white;
--btn-disabled-border-color: #6c757d;
/* Nav */
--nav-link-active-text-color: white;
@ -87,6 +97,7 @@
--list-group-hover-text-color: black;
--list-group-hover-bg-color: #eaeaea;
--list-group-item-border-color: rgba(239, 239, 239, 0.125);
--list-group-active-border-color: none;
/* Dropdown */
--dropdown-item-hover-text-color: white;

7
UI/Web/src/theme/themes/light.scss
View File

@ -22,7 +22,7 @@
--input-border-color: #ccc;
/* Buttons */
--btn-primary-text-color: white;
--btn-primary-text-color: black;
--btn-alt-bg-color: #424c72;
--btn-alt-border-color: #444f75;
--btn-alt-hover-bg-color: #3b4466;
@ -41,7 +41,7 @@
--nav-tab-border-hover-color: transparent;
/* Checkboxes */
--checkbox-checked-bg-color: var(--primary-color);
--checkbox-checked-bg-color: black;
--checkbox-bg-color: white;
--checkbox-border-color: var(--primary-color);
--checkbox-focus-border-color: var(--input-border-color);
@ -70,6 +70,7 @@
--grid-breakpoints-xl: $grid-breakpoint-xl;
--body-font-family: "EBGaramond", "Helvetica Neue", sans-serif;
--brand-font-family: "Spartan", sans-serif;
--text-muted-color: #aaa;
/* Breadcrumb */
--breadcrumb-bg-color: #eaeaea;
@ -79,6 +80,7 @@
--card-text-color: #000;
--card-border-color: #ccc;
--card-progress-bar-color: var(--primary-color);
--card-overlay-bg-color: rgba(0, 0, 0, 0);
--card-overlay-hover-bg-color: rgba(0, 0, 0, 0.2);
/* List items */
@ -87,6 +89,7 @@
--list-group-hover-text-color: inherit;
--list-group-hover-bg-color: #eaeaea;
--list-group-item-border-color: rgba(239, 239, 239, 0.125);
--list-group-active-border-color: none;
/* Dropdown */
--dropdown-item-hover-text-color: white;

2
UI/Web/src/theme/utilities/_global.scss
View File

@ -11,5 +11,5 @@ hr {
}
.text-muted {
color: #d7d7d7 !important;
color: var(--text-muted-color) !important;
}