fix bug

koodo-reader · Nov 4, 2023 · 1822874 · 1822874
1 parent c3152ad
commit 1822874
Show file tree

Hide file tree

Showing 36 changed files with 527 additions and 225 deletions.
diff --git a/public/assets/styles/dark.css b/public/assets/styles/dark.css
@@ -8,6 +8,7 @@ body {
 .booklist-shelf-list,
 .lang-setting-dropdown,
 .delete-tag-container,
+.add-dialog-shelf-list-option,
 .setting-subtitle,
 .book-subcontent-name {
   color: rgba(235, 235, 235, 1);

diff --git a/public/lib/kookit/kookit.min.js b/public/lib/kookit/kookit.min.js
diff --git a/src/assets/locales/en/translation.json b/src/assets/locales/en/translation.json
@@ -105,7 +105,7 @@
   "Night Mode": "Night Mode",
   "Turn on Bionic Reading": "Turn on Bionic Reading",
   "This process is inreversible, and will completely overwrite your current library, make sure you know what you're doing before proceeding": "This process is inreversible, and will completely overwrite your current library, make sure you know what you're doing before proceeding",
-  "Lemmatize words when looking up in a dictionary": "查询单词前将词性还原",
+  "Lemmatize words when looking up in a dictionary": "Lemmatize words when looking up in a dictionary",
   "To reduce the different forms of a word to one single form, for example, reducing builds, building or built to build, reducing cats to cat, reducing fastest to fast": "To reduce the different forms of a word to one single form, for example, reducing builds, building or built to build, reducing cats to cat, reducing fastest to fast",
   "Export All Books": "Export All Books",
   "Export All Notes": "Export All Notes",
@@ -179,7 +179,7 @@
   "Turn Off Successfully": "Turn Off Successfully",
   "Turn off touch screen mode": "Turn off touch screen mode(preventing accidentally touch)",
   "Use built-in font": "Use built-in font",
-  "Setting": "Setting",
+  "Setting": "Settings",
   "Turn on touch screen mode": "Turn on touch screen mode",
   "Auto open last-read book": "Auto open last-read book",
   "About Project": "About Project",

diff --git a/src/assets/lotties/loading.json b/src/assets/lotties/loading.json
diff --git a/src/assets/styles/fonts/icomoon.eot b/src/assets/styles/fonts/icomoon.eot
diff --git a/src/assets/styles/fonts/icomoon.svg b/src/assets/styles/fonts/icomoon.svg
diff --git a/src/assets/styles/fonts/icomoon.ttf b/src/assets/styles/fonts/icomoon.ttf
diff --git a/src/assets/styles/fonts/icomoon.woff b/src/assets/styles/fonts/icomoon.woff
diff --git a/src/assets/styles/style.css b/src/assets/styles/style.css
@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'icomoon';
-  src:  url('fonts/icomoon.eot?i48bgd');
-  src:  url('fonts/icomoon.eot?i48bgd#iefix') format('embedded-opentype'),
-    url('fonts/icomoon.ttf?i48bgd') format('truetype'),
-    url('fonts/icomoon.woff?i48bgd') format('woff'),
-    url('fonts/icomoon.svg?i48bgd#icomoon') format('svg');
+  src:  url('fonts/icomoon.eot?3o4448');
+  src:  url('fonts/icomoon.eot?3o4448#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?3o4448') format('truetype'),
+    url('fonts/icomoon.woff?3o4448') format('woff'),
+    url('fonts/icomoon.svg?3o4448#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -25,6 +25,9 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-archive:before {
+  content: "\e951";
+}
 .icon-browser:before {
   content: "\e950";
 }

diff --git a/src/components/bookCardItem/bookCardItem.css b/src/components/bookCardItem/bookCardItem.css
@@ -36,7 +36,9 @@
   overflow: hidden;
   position: relative;
 }
-
+.book-selected-icon {
+  opacity: 0.5;
+}
 @keyframes fade-in {
   0% {
     opacity: 0;

diff --git a/src/components/bookCardItem/component.tsx b/src/components/bookCardItem/component.tsx
@@ -22,6 +22,7 @@ class BookCardItem extends React.Component<BookCardProps, BookCardState> {
       left: 0,
       top: 0,
       direction: "horizontal",
+      isHover: false,
     };
   }
 
@@ -134,6 +135,12 @@ class BookCardItem extends React.Component<BookCardProps, BookCardState> {
             onClick={() => {
               this.handleJump();
             }}
+            onMouseEnter={() => {
+              this.setState({ isHover: true });
+            }}
+            onMouseLeave={() => {
+              this.setState({ isHover: false });
+            }}
             style={
               StorageUtil.getReaderConfig("isDisableCrop") === "yes"
                 ? {
@@ -164,9 +171,9 @@ class BookCardItem extends React.Component<BookCardProps, BookCardState> {
               </div>
             ) : (
               <img
-                src={this.props.book.cover}
+                data-src={this.props.book.cover}
                 alt=""
-                className="book-item-image"
+                className="lazy-image book-item-image"
                 style={
                   this.state.direction === "horizontal" ||
                   StorageUtil.getReaderConfig("isDisableCrop") === "yes"
@@ -186,10 +193,28 @@ class BookCardItem extends React.Component<BookCardProps, BookCardState> {
               ></img>
             )}
           </div>
-          {this.props.isSelectBook ? (
+          {this.props.isSelectBook || this.state.isHover ? (
             <span
               className="icon-message book-selected-icon"
-              style={this.props.isSelected ? {} : { color: "#eee" }}
+              onMouseEnter={() => {
+                this.setState({ isHover: true });
+              }}
+              onClick={() => {
+                if (this.props.isSelectBook) {
+                  this.props.handleSelectedBooks(
+                    this.props.isSelected
+                      ? this.props.selectedBooks.filter(
+                          (item) => item !== this.props.book.key
+                        )
+                      : [...this.props.selectedBooks, this.props.book.key]
+                  );
+                } else {
+                  this.props.handleSelectBook(true);
+                  this.props.handleSelectedBooks([this.props.book.key]);
+                }
+                this.setState({ isHover: false });
+              }}
+              style={this.props.isSelected ? { opacity: 1 } : { color: "#eee" }}
             ></span>
           ) : null}
 

diff --git a/src/components/bookCardItem/index.tsx b/src/components/bookCardItem/index.tsx
@@ -4,6 +4,7 @@ import {
   handleReadingBook,
   handleDragItem,
   handleDeleteDialog,
+  handleSelectBook,
   handleSelectedBooks,
 } from "../../store/actions";
 import { withTranslation } from "react-i18next";
@@ -25,6 +26,7 @@ const actionCreator = {
   handleReadingBook,
   handleActionDialog,
   handleDragItem,
+  handleSelectBook,
   handleDeleteDialog,
   handleSelectedBooks,
 };

diff --git a/src/components/bookCardItem/interface.tsx b/src/components/bookCardItem/interface.tsx
@@ -10,7 +10,7 @@ export interface BookCardProps extends RouteComponentProps<any> {
   dragItem: string;
   selectedBooks: string[];
   mode: string;
-
+  handleSelectBook: (isSelectBook: boolean) => void;
   handleReadingBook: (book: BookModel) => void;
   handleActionDialog: (isShowActionDialog: boolean) => void;
   t: (title: string) => string;
@@ -20,6 +20,7 @@ export interface BookCardProps extends RouteComponentProps<any> {
 }
 export interface BookCardState {
   isFavorite: boolean;
+  isHover: boolean;
   left: number;
   top: number;
   direction: string;

diff --git a/src/components/bookCoverItem/component.tsx b/src/components/bookCoverItem/component.tsx
@@ -24,6 +24,7 @@ class BookCoverItem extends React.Component<BookCoverProps, BookCoverState> {
       top: 0,
       direction: "horizontal",
       desc: "",
+      isHover: false,
     };
   }
 
@@ -178,6 +179,12 @@ class BookCoverItem extends React.Component<BookCoverProps, BookCoverState> {
             onClick={() => {
               this.handleJump();
             }}
+            onMouseEnter={() => {
+              this.setState({ isHover: true });
+            }}
+            onMouseLeave={() => {
+              this.setState({ isHover: false });
+            }}
             style={
               StorageUtil.getReaderConfig("isDisableCrop") === "yes"
                 ? {
@@ -211,15 +218,15 @@ class BookCoverItem extends React.Component<BookCoverProps, BookCoverState> {
               </div>
             ) : (
               <img
-                src={this.props.book.cover}
+                data-src={this.props.book.cover}
                 alt=""
                 style={
                   this.state.direction === "horizontal" ||
                   StorageUtil.getReaderConfig("isDisableCrop") === "yes"
                     ? { width: "100%" }
                     : { height: "100%" }
                 }
-                className="book-item-image"
+                className="lazy-image book-item-image"
                 onLoad={(res: any) => {
                   if (
                     res.target.naturalHeight / res.target.naturalWidth >
@@ -232,13 +239,39 @@ class BookCoverItem extends React.Component<BookCoverProps, BookCoverState> {
                 }}
               />
             )}
-            {this.props.isSelectBook ? (
+            {this.props.isSelectBook || this.state.isHover ? (
               <span
                 className="icon-message book-selected-icon"
+                onMouseEnter={() => {
+                  this.setState({ isHover: true });
+                }}
+                onClick={() => {
+                  if (this.props.isSelectBook) {
+                    this.props.handleSelectedBooks(
+                      this.props.isSelected
+                        ? this.props.selectedBooks.filter(
+                            (item) => item !== this.props.book.key
+                          )
+                        : [...this.props.selectedBooks, this.props.book.key]
+                    );
+                  } else {
+                    this.props.handleSelectBook(true);
+                    this.props.handleSelectedBooks([this.props.book.key]);
+                  }
+                  this.setState({ isHover: false });
+                }}
                 style={
                   this.props.isSelected
-                    ? { right: "274px", top: "30px" }
-                    : { right: "274px", top: "30px", color: "#eee" }
+                    ? {
+                        right: "274px",
+                        top: "30px",
+                        opacity: 1,
+                      }
+                    : {
+                        right: "274px",
+                        top: "30px",
+                        color: "#eee",
+                      }
                 }
               ></span>
             ) : null}

diff --git a/src/components/bookCoverItem/index.tsx b/src/components/bookCoverItem/index.tsx
@@ -5,6 +5,7 @@ import {
   handleDragItem,
   handleDeleteDialog,
   handleSelectedBooks,
+  handleSelectBook,
 } from "../../store/actions";
 import BookCoverItem from "./component";
 import { stateType } from "../../store";
@@ -27,6 +28,7 @@ const actionCreator = {
   handleActionDialog,
   handleDragItem,
   handleDeleteDialog,
+  handleSelectBook,
   handleSelectedBooks,
 };
 export default connect(

diff --git a/src/components/bookCoverItem/interface.tsx b/src/components/bookCoverItem/interface.tsx
@@ -12,6 +12,8 @@ export interface BookCoverProps extends RouteComponentProps<any> {
   isSelectBook: boolean;
   isSelected: boolean;
   selectedBooks: string[];
+  handleSelectBook: (isSelectBook: boolean) => void;
+
   handleReadingBook: (book: BookModel) => void;
   handleActionDialog: (isShowActionDialog: boolean) => void;
   t: (title: string) => string;
@@ -20,6 +22,8 @@ export interface BookCoverProps extends RouteComponentProps<any> {
   handleDeleteDialog: (isShow: boolean) => void;
 }
 export interface BookCoverState {
+  isHover: boolean;
+
   isFavorite: boolean;
   left: number;
   top: number;

diff --git a/src/components/bookListItem/component.tsx b/src/components/bookListItem/component.tsx
@@ -24,6 +24,7 @@ class BookListItem extends React.Component<BookItemProps, BookItemState> {
       direction: "horizontal",
       left: 0,
       top: 0,
+      isHover: false,
     };
   }
   componentDidMount() {
@@ -177,6 +178,12 @@ class BookListItem extends React.Component<BookItemProps, BookItemState> {
                 this.handleJump();
               }}
               style={{ height: "65px" }}
+              onMouseEnter={() => {
+                this.setState({ isHover: true });
+              }}
+              onMouseLeave={() => {
+                this.setState({ isHover: false });
+              }}
             >
               <div className="book-item-image" style={{ height: "65px" }}>
                 <EmptyCover
@@ -194,11 +201,17 @@ class BookListItem extends React.Component<BookItemProps, BookItemState> {
               onClick={() => {
                 this.handleJump();
               }}
+              onMouseEnter={() => {
+                this.setState({ isHover: true });
+              }}
+              onMouseLeave={() => {
+                this.setState({ isHover: false });
+              }}
             >
               <img
-                src={this.props.book.cover}
+                data-src={this.props.book.cover}
                 alt=""
-                className="book-item-image"
+                className="lazy-image book-item-image"
                 style={{ width: "100%" }}
                 onLoad={(res: any) => {
                   if (
@@ -213,12 +226,30 @@ class BookListItem extends React.Component<BookItemProps, BookItemState> {
               />
             </div>
           )}
-          {this.props.isSelectBook ? (
+          {this.props.isSelectBook || this.state.isHover ? (
             <span
               className="icon-message book-selected-icon"
+              onMouseEnter={() => {
+                this.setState({ isHover: true });
+              }}
+              onClick={() => {
+                if (this.props.isSelectBook) {
+                  this.props.handleSelectedBooks(
+                    this.props.isSelected
+                      ? this.props.selectedBooks.filter(
+                          (item) => item !== this.props.book.key
+                        )
+                      : [...this.props.selectedBooks, this.props.book.key]
+                  );
+                } else {
+                  this.props.handleSelectBook(true);
+                  this.props.handleSelectedBooks([this.props.book.key]);
+                }
+                this.setState({ isHover: false });
+              }}
               style={
                 this.props.isSelected
-                  ? { left: "20px", bottom: "5px" }
+                  ? { left: "20px", bottom: "5px", opacity: 1 }
                   : { left: "20px", bottom: "5px", color: "#eee" }
               }
             ></span>

diff --git a/src/components/bookListItem/index.tsx b/src/components/bookListItem/index.tsx
@@ -7,6 +7,7 @@ import {
   handleDragItem,
   handleFetchBooks,
   handleSelectedBooks,
+  handleSelectBook,
   handleActionDialog,
 } from "../../store/actions";
 import { withTranslation } from "react-i18next";
@@ -32,6 +33,7 @@ const actionCreator = {
   handleAddDialog,
   handleActionDialog,
   handleDragItem,
+  handleSelectBook,
   handleFetchBooks,
   handleSelectedBooks,
 };

diff --git a/src/components/bookListItem/interface.tsx b/src/components/bookListItem/interface.tsx
@@ -12,6 +12,8 @@ export interface BookItemProps extends RouteComponentProps<any> {
   isSelectBook: boolean;
   isSelected: boolean;
   selectedBooks: string[];
+  handleSelectBook: (isSelectBook: boolean) => void;
+
   handleReadingBook: (book: BookModel) => void;
   handleEditDialog: (isShow: boolean) => void;
   handleDeleteDialog: (isShow: boolean) => void;
@@ -24,6 +26,8 @@ export interface BookItemProps extends RouteComponentProps<any> {
   handleSelectedBooks: (selectedBooks: string[]) => void;
 }
 export interface BookItemState {
+  isHover: boolean;
+
   isDeleteDialog: boolean;
   isFavorite: boolean;
   direction: string;

diff --git a/src/components/dialogs/actionDialog/actionDialog.css b/src/components/dialogs/actionDialog/actionDialog.css
@@ -31,6 +31,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   padding-left: 10px;
+  border-radius: 3px;
 }
 
 .action-name {