fix bug

package.json

@@ -18,7 +18,6 @@
     "react-error-overlay": "6.0.9"
   },
   "dependencies": {
-    "@types/ws": "^8.5.5",
     "@vitalets/google-translate-api": "^8.0.0",
     "adm-zip": "^0.5.2",
     "axios": "^0.19.2",
@@ -28,6 +27,7 @@
     "electron-is-dev": "^1.1.0",
     "electron-store": "^8.0.1",
     "epub-cfi-resolver": "^1.0.2",
+    "fast-average-color": "^9.4.0",
     "font-list": "^1.4.5",
     "fs-extra": "^9.1.0",
     "howler": "^2.2.3",
@@ -49,6 +49,7 @@
     "@types/react-redux": "^7.1.7",
     "@types/react-router-dom": "^5.1.6",
     "@types/spark-md5": "^3.0.2",
+    "@types/ws": "^8.5.5",
     "classnames": "^2.2.6",
     "concurrently": "^5.0.1",
     "cross-env": "^6.0.3",

public/assets/styles/dark.css

@@ -148,6 +148,8 @@ body,
 .book-item-image,
 .book-item-cover,
 .book-cover,
+.detail-cover,
+.detail-cover-background-container,
 .book-cover-item-cover {
   background: rgba(235, 235, 235, 0.1);
   box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.18);

public/assets/styles/default.css

@@ -164,6 +164,8 @@ body,
 .book-item-image,
 .book-item-cover,
 .book-cover,
+.detail-cover,
+.detail-cover-background-container,
 .book-cover-item-cover {
   background: rgba(255, 255, 255, 1);
   box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.18);

public/index.html

@@ -42,10 +42,6 @@
       type="text/javascript"
       src="%PUBLIC_URL%/lib/fflate/fflate.min.js"
     ></script>
-    <script
-      type="text/javascript"
-      src="%PUBLIC_URL%/lib/xlsx/xlsx.mini.min.js"
-    ></script>
     <script
       type="text/javascript"
       src="%PUBLIC_URL%/lib/localforage/localforage.min.js"

src/assets/locales/cn/translation.json

@@ -92,6 +92,8 @@
   "Sort by Name": "按书名",
   "Turn on Bionic Reading": "开启仿生阅读",
   "Export All Books": "导出所有图书",
+  "Export All Dictionary History": "导出所有查词历史",
+  "Export Dictionary History": "导出查词历史",
   "Export All Notes": "导出所有笔记",
   "Export All Highlights": "导出所有高亮",
   "Export All": "导出全部",
@@ -192,7 +194,7 @@
   "Finish Reading Time": "读完本章需要：{{count}}分钟",
   "Book Page": "第{{count}}页",
   "Total books": "一共{{count}}本书",
-  "Pages": "本章页数",
+  "Pages": "页数",
   "Chapters": "章节数",
   "Translate": "翻译",
   "Continuous": "连续滚动",

src/assets/locales/en/translation.json

@@ -107,6 +107,8 @@
   "Export All Books": "Export All Books",
   "Export All Notes": "Export All Notes",
   "Export All Highlights": "Export All Highlights",
+  "Export All Dictionary History": "Export All Dictionary History",
+  "Export Dictionary History": "Export Dictionary History",
   "Export All": "Export All",
   "Export Books": "Export Books",
   "Export Notes": "Export Notes",

src/assets/locales/tw/translation.json

@@ -173,7 +173,7 @@
   "Finish Reading Time": "讀完本章需要：{{count}}分鐘",
   "Book Page": "第{{count}}頁",
   "Total books": "一共{{count}}本書",
-  "Pages": "本章頁數",
+  "Pages": "頁數",
   "Chapters": "章節跳轉",
   "Translate": "翻譯",
   "Continuous": "連續滾動",

src/components/bookCoverItem/bookCoverItem.css

@@ -44,7 +44,7 @@
   height: 18px;
   font-size: 13px;
   line-height: 17px;
-  opacity: 0.6;
+  opacity: 0.8;
   text-align: left;
   text-overflow: ellipsis;
   display: -webkit-box;
@@ -85,7 +85,7 @@
   margin-top: 5px;
   font-size: 13px;
   line-height: 17px;
-  opacity: 0.6;
+  opacity: 0.8;
   text-align: left;
   position: relative;
   float: left;

src/components/bookListItem/bookListItem.css

@@ -17,24 +17,44 @@
 .book-item-list-title {
   display: inline-block;
   width: calc(100% - 80px);
+  height: 100%;
   position: absolute;
   top: 0px;
   left: 60px;
-  font-size: 15px;
+}
+
+.book-item-list-author {
+  width: 150px;
+  float: right;
+}
+.book-item-list-percentage {
+  width: 50px;
+  float: right;
 }
 .book-item-list-subtitle,
 .book-item-list-author,
 .book-item-list-percentage {
-  height: 22px;
+  height: 100%;
   text-overflow: ellipsis;
-  white-space: nowrap;
   overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  line-height: 18px;
+  font-size: 15px;
+  display: flex;
+  align-items: center;
 }
-.book-item-list-author,
-.book-item-list-percentage {
-  opacity: 0.6;
-  font-size: 10px;
-  height: 18px;
+.book-item-list-subtitle {
+  width: calc(100% - 250px);
+  float: left;
+}
+.book-item-list-subtitle-text {
+  float: left;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .book-item-list-config {
   cursor: pointer;

src/components/bookListItem/component.tsx

@@ -224,15 +224,11 @@ class BookListItem extends React.Component<BookItemProps, BookItemState> {
             }}
           >
             <div className="book-item-list-subtitle">
-              {this.props.book.name}
-            </div>
-            <div className="book-item-list-author">
-              <Trans>
-                {this.props.book.author
-                  ? this.props.book.author
-                  : "Unknown Author"}
-              </Trans>
+              <div className="book-item-list-subtitle-text">
+                {this.props.book.name}
+              </div>
             </div>
+
             <p className="book-item-list-percentage">
               {percentage
                 ? Math.floor(parseFloat(percentage) * 100) === 0
@@ -248,8 +244,15 @@ class BookListItem extends React.Component<BookItemProps, BookItemState> {
                   <span>%</span>
                 )}
             </p>
+            <div className="book-item-list-author">
+              <Trans>
+                {this.props.book.author
+                  ? this.props.book.author
+                  : "Unknown Author"}
+              </Trans>
+            </div>
           </p>
-        </div>{" "}
+        </div>
         {this.props.isOpenActionDialog &&
         this.props.book.key === this.props.currentBook.key ? (
           <div className="action-dialog-parent">

src/components/dialogs/aboutDialog/component.tsx

@@ -6,12 +6,13 @@ import { openExternalUrl } from "../../../utils/serviceUtils/urlUtil";
 import toast from "react-hot-toast";
 import {
   exportBooks,
+  exportDictionaryHistory,
   exportHighlights,
   exportNotes,
 } from "../../../utils/syncUtils/exportUtil";
 import "./aboutDialog.css";
 import StorageUtil from "../../../utils/serviceUtils/storageUtil";
-
+declare var window: any;
 class AboutDialog extends React.Component<AboutDialogProps, AboutDialogState> {
   constructor(props: AboutDialogProps) {
     super(props);
@@ -233,6 +234,24 @@ class AboutDialog extends React.Component<AboutDialogProps, AboutDialogState> {
           >
             <Trans>Export All Highlights</Trans>
           </li>
+          <li
+            className="sort-by-category-list"
+            onClick={async () => {
+              let dictHistory =
+                (await window.localforage.getItem("dictHistory")) || [];
+              if (dictHistory.length > 0) {
+                exportDictionaryHistory(dictHistory, [
+                  ...this.props.books,
+                  ...this.props.deletedBooks,
+                ]);
+                toast.success(this.props.t("Export Successfully"));
+              } else {
+                toast(this.props.t("Nothing to export"));
+              }
+            }}
+          >
+            <Trans>Export All Dictionary History</Trans>
+          </li>
         </div>
       </>
     );

src/components/dialogs/actionDialog/actionDialog.css

@@ -40,38 +40,3 @@
   margin-left: 15px;
   font-weight: 500;
 }
-.action-dialog-book-info {
-  margin-left: 10px;
-  overflow-y: scroll;
-  height: 185px;
-  text-align: left;
-  overflow-x: hidden;
-}
-.action-dialog-book-info:hover::-webkit-scrollbar-thumb,
-.action-dialog-book-info:active::-webkit-scrollbar-thumb,
-.action-dialog-book-info:focus::-webkit-scrollbar-thumb {
-  display: block;
-}
-.action-dialog-book-info::-webkit-scrollbar-thumb {
-  display: none;
-}
-.action-dialog-book-title {
-  font-size: 15px;
-  font-weight: 500;
-  line-height: 17px;
-  max-height: 190px;
-  margin-bottom: 10px;
-}
-.action-dialog-book-author,
-.action-dialog-book-desc,
-.action-dialog-book-publisher,
-.action-dialog-book-added {
-  font-size: 15px;
-  line-height: 18px;
-}
-.action-dialog-book-detail {
-  /* width: 80%; */
-  margin-top: 5px;
-  max-height: 50px;
-  font-size: 15px;
-}

src/components/dialogs/actionDialog/component.tsx

@@ -7,6 +7,7 @@ import AddTrash from "../../../utils/readUtils/addTrash";
 import toast from "react-hot-toast";
 import BookUtil from "../../../utils/fileUtils/bookUtil";
 import {
+  exportDictionaryHistory,
   exportHighlights,
   exportNotes,
 } from "../../../utils/syncUtils/exportUtil";
@@ -332,6 +333,32 @@ class ActionDialog extends React.Component<
               <Trans>Export Highlights</Trans>
             </p>
           </div>
+          <div
+            className="action-dialog-edit"
+            onClick={async () => {
+              let dictHistory =
+                (await window.localforage.getItem("dictHistory")) || [];
+              if (
+                dictHistory.filter(
+                  (item) =>
+                    item.bookKey === this.props.currentBook.key &&
+                    item.notes === ""
+                ).length > 0
+              ) {
+                exportDictionaryHistory(dictHistory, [
+                  ...this.props.books,
+                  ...this.props.deletedBooks,
+                ]);
+                toast.success(this.props.t("Export Successfully"));
+              } else {
+                toast(this.props.t("Nothing to export"));
+              }
+            }}
+          >
+            <p className="action-name">
+              <Trans>Export Dictionary History</Trans>
+            </p>
+          </div>
           <div
             className="action-dialog-edit"
             onClick={() => {