AZEN-SGG/Kavita
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Book Reader Redesign with e-ink focus (#1246)

Browse source 
* Refactored the drawer into offcanvas component. Had to write some hacks to emulate how bootstrap's javascript implementation works as ngBootstrap doesn't have a component yet.

* Cleaned up some of the code

* Rewrote drawer to align it with the new design

* First pass, refactored table of content into it's own component

* Refactored all of the settings logic into a separate component. Everything is broken.

* More settings on on reactive form

* More code cleanup on settings

* Misc fixes around the drawer code. Fixed a bug where range sliders were inheriting background color of normal text inputs

* Fixed dark mode with book reader.

We now clear the theme from the main app so book reader is self-contained. Styles for dark mode are injected into the reading-section. Styles that were previously in scss are now only for the actual menu system.

* Cleaned up drawer styling on header

* Removed an ngIf statement for click to paginate

* Tweaked the accent style to have smaller font size and adjusted style on light mode. Cleaned up some clearTimeout code in a further effort to streamline codebase.

* Refactored Dark mode into a basic theme. Currently styles are hardcoded.

* Patched book theme in from themes branch

* Patched in the backend for Book Theme (not tested yet)

* Fixed a bug in seeding code for book themes. Started integration of themes into the reader settings

* Everything except managing themes is working. Themes are a bit shakey, having second thoughts if we should have them or not.

* Reverted the ability to do custom user book themes. Code is stable with system themes.

* Stablize the Styles (#1128)

* Fixed a bug where adding multiple series to reading list would throw an error on UI, but it was successful.

* When a series has a reading list, we now show the connection on Series detail.

* Removed all baseurl code from UI and not-connected component since we no longer use it.

* Fixed tag badges not showing a border. Added last read time to the series detail page

* Fixed up error interceptor to remove no-connection code

* Changed implementation for series detail. Book libraries will never send chapters back. Volume 0 volumes will not be sent in volumes ever. Fixed up more renaming logic on books to send more accurate representations to the UI.

* Cleaned up the selected tab and tab display logic

* Fixed a bad where statement in reading lists for series

* Fixed up tab logic again

* Fixed a small margin on search backdrop

* Made badge expander button smaller to align with badges

* Fixed a few UIs due to .form-group and .form-row being removed

* Updated Theme component page to help with style testing

* Added more components to theme tester

* Cleaned up some styling

* Fixed opacity on search item hover

* Bump versions by dotnet-bump-version.

* Tweaked the accordion styles for light mode

* Set dark book theme as default. Refactored resetSettings to be much cleaner

* Started the refactor to allow book themes to affect global css variables

* Fixed some issues with my css variable declarations

* Fixed a close model state update

* Lots of work, but dark mode on the book reader is basically done. We have to code the themes much like the site themes

* Some black theme enhancements

* Started working on column layout in book reader.

* Cleaned up the CSS on Reader Settings

* Hooked up reading direction

* Got column and double column layout working

* Implemented some basic virtual paging and hooked in book color theme and layout mode into user preferences.

* Migration wrote, can edit page layout and color theme on book reader. Removed book dark mode since no longer needed.

Fixed a bug on login/register forms where when input is focused, text is white and not black.

* When loading book reader, apply column layout.

* Lots of work around 2 column layout, working on images not splitting. Still not working, committing so i can merge develop in and validate code with new manga reader.

* Fixed images being split into 2 BUT regression on each page boundary, total reading height is smaller and smaller

* Fixed some rendering bugs where toggling column layouts would shrink images on screen constantly.

Fixed a bug where bottom bar wouldn't render on column layout in some conditions (this might need to be reworked)

* Started progress on progress work

* Updated .NET to 6.0.4

* Fixed a bug where DataContextModelSnapshot was being removed on build thus new migrations were broken.

* Tweaked the code around progress saving so that we don't loose track of last scroll element on page load

* Trying to restore progress, but stuck

* Extra merge stuff

* Fixed a bug where volumes that are a range fail to generate series detail

* No gutters on whole app. Book reader backend now applies the image class automatically at the backend.

* Added wiki documentation into invite user flow and register admin user to help users understand email isn't required and they can host their own service.

* Removed bottom padding

* Refactored the document height to be set and removed on nav service, so the book reader and manga reader aren't broken.

* Fixed the height of the action bar to simplify logic and keep the code cleaner. Refactored book service image scoping to be much more streamlined and efficient

* Fixed the height of action bar to 62px and adjusted code to use the hardcoded px. (code commented)

* Removed commented out code from fixed action bar height

* Progress restoration seems to be working

* Code cleanup

* Ensure the bottom action bar is at the bottom of the viewport on small pages

* Fixed book fonts not setting properly and added OpenDyslexic font.

* Fixed up some font issues

* Updated drawer so all sections are open by default

* Switched some LINQ to use MinBy

* When navigating between pages and column layout, adjust the shift for the user.

* Removed some debug code

* Blacklist .qpkg folders and don't scan Recently-Snapshot or recycle folders.

* Renamed the scale width to be scoped to kavita to avoid conflicts.

* Refactored ngx-sliders out to use normal range instead. Changed up the preferences to separate image and book settinngs into own accordion.

* updated user preferences for new migration options (not committed yet)

* Removed some debug code

* Remove console.logs

* Migration committed, let's release this to users.

* A lot of crazy code just to ensure that when you close drawer the toggle reflectst that state.
This commit is contained in:
Joseph Milazzo 2022-05-08 19:52:15 -05:00 • committed by GitHub
parent 641e0a71e9
commit 2723a6cd10
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
79 changed files with 3708 additions and 1190 deletions
Download patch file Download diff file Expand all files Collapse all files

27
UI/Web/src/app/shared/drawer/drawer.component.html
View file

@ -1,15 +1,18 @@
<div
class="drawer-container"
[ngStyle]="{'position': 'fixed','top': options.topOffset + 'px','height': 'calc(100% - ' + options.topOffset + 'px)'}"
[class.is-open]="isOpen"
[class.position-right]="position === 'right'"
[class.position-left]="position === 'left'"
[class.position-bottom]="position === 'bottom'"
>
<div class="header">
<ng-content select="[header]"></ng-content>
<div class="offcanvas offcanvas-{{position}}" [class.show]="isOpen" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel"
[ngStyle]="{'top': options.topOffset + 'px', 'visibility': isOpen ? 'visible' : 'hidden'}" role="dialog">
<div class="offcanvas-header">
<div class="offcanvas-title" id="offcanvasLabel">
<ng-content select="[header]"></ng-content>
</div>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close" (click)="close()"></button>
</div>
<div class="body">
<div class="offcanvas-header row hide-if-empty">
<ng-content select="[subheader]"></ng-content>
</div>
<div class="offcanvas-body">
<ng-content select="[body]"></ng-content>
</div>
</div>
</div>
<!-- TODO: Replace this with official component when released. This is some hacky solution to mimic Bootstrap 5 Javascript code -->
<div class="offcanvas-backdrop fade show" *ngIf="isOpen" (click)="close()"></div>

62
UI/Web/src/app/shared/drawer/drawer.component.scss
View file

@ -1,56 +1,8 @@
:host {
--drawer-height: 100vh;
--drawer-width: 400px;
--drawer-top-offset: 0px;
//--drawer-background-color: #fff;
}
.drawer-container {
position: absolute;
top: var(--drawer-top-offset);
right: 0;
width: var(--drawer-width);
height: 100vh;
background: var(--drawer-background-color, #fff);
transition: all 300ms;
box-shadow: 0 6px 4px 2px rgb(0 0 0 / 70%);
padding: 10px 10px;
z-index: 1021;
overflow: auto;
-webkit-overflow-scrolling: touch;
.offcanvas {
color: var(--drawer-text-color);
background-color: var(--drawer-bg-color);
}
&.position-right {
right: calc(-1 * var(--drawer-width));
&.is-open {
right: 0;
}
}
&.position-left {
left: calc(-1 * var(--drawer-width));
&.is-open {
left: 0;
}
}
&.position-bottom {
//top: calc(-1 * var(--drawer-height));
top: 100vh;
height: 0px;
&.is-open {
//bottom: 0;
top: 100vh;
height: var(--drawer-height);
}
}
&.position-top {
//bottom: calc(-1 * var(--drawer-height));
top: 0px;
height: 0px;
&.is-open {
//bottom: 0;
top: 0px;
height: var(--drawer-height);
}
}
}
.hide-if-empty:empty {
display: none !important;
}

8
UI/Web/src/app/shared/drawer/drawer.component.ts
View file

@ -14,18 +14,20 @@ export class DrawerOptions {
exportAs: "drawer"
})
export class DrawerComponent {
@Input() isOpen = false;
@Input() width: number = 400;
/**
* Side of the screen the drawer should animate from
*/
@Input() position: 'left' | 'right' | 'bottom' = 'left';
@Input() position: 'start' | 'end' | 'bottom' | 'top' = 'start';
@Input() options: Partial<DrawerOptions> = new DrawerOptions();
@Output() drawerClosed = new EventEmitter();
@Output() isOpenChange: EventEmitter<boolean> = new EventEmitter();
close() {
this.drawerClosed.emit();
this.isOpen = false;
this.isOpenChange.emit(false);
this.drawerClosed.emit(false);
}
}