diff --git a/README.md b/README.md index 4bd20c06..0b96f4e1 100644 --- a/README.md +++ b/README.md @@ -80,12 +80,18 @@ ## 使用方法 -桌面端:前往这里下载最新的安装包(技术原因暂不支持 Windows7 系统) [点我前往](https://koodo.960960.xyz/download) +桌面端:前往这里下载最新的安装包(暂不支持 Windows 7 系统) [点我前往](https://koodo.960960.xyz/download) (国内网络下载速度慢的解决办法,复制下载链接到这个网站:https://d.serctl.com/ ) 网页版:代码托管在 Vercel [点我前往](https://reader.960960.xyz) +[Homebrew](https://brew.sh/): + +```shell +brew install --cask koodo-reader +``` + ## 运行源码 请确保您电脑的 node 的版本大于 10.0.0,已配置好 yarn,git 的运行环境。 @@ -112,8 +118,8 @@ ## 后续更新 -我会根据大家的反馈不定时更新,当有新版本更新时,Github 会自动向您的客户端推送提醒 +我会根据大家的反馈不定时更新,当有新版本更新时,您将自动收到更新提示 ## 帮助 -您可以在 issue 区提问,或者通过邮箱 guo362429@gmail.com 与我取得联系 +您可以在[issue](https://github.com/troyeguo/koodo-reader/issues)提问,或者前往[这里]("https://koodo.960960.xyz/support")了解更多。 diff --git a/README_en.md b/README_en.md index a3723f68..9501da9a 100644 --- a/README_en.md +++ b/README_en.md @@ -80,7 +80,7 @@ ## Usage -Desktop : Download the latest software package(Windows7 is not supported yet) [Click me](https://koodo.960960.xyz/download) +Desktop : Download the latest software package(Windows 7 is not supported yet) [Click me](https://koodo.960960.xyz/download) Install with [Homebrew](https://brew.sh/): @@ -100,14 +100,14 @@ Make sure node's version on your computer is larger than 10.0.0, yarn and git is git clone https://github.com/troyeguo/koodo-reader.git ``` -2. Enter desktop version +2. Enter desktop mode ``` yarn yarn dev ``` -3. Enter web version +3. Enter web mode ``` yarn @@ -116,8 +116,8 @@ Make sure node's version on your computer is larger than 10.0.0, yarn and git is ## Update -Whenever there is a update, a short message will show up in the software's header +When an update is available, you will receive a notification when you open the software. ## Help -Click [here](https://github.com/troyeguo/koodo-reader/issues) to report your issue, or contact me with guo362429@gmail.com +Click [here](https://github.com/troyeguo/koodo-reader/issues) to report your issue, or visit https://koodo.960960.xyz/support for help. diff --git a/assets/launch-page.html b/assets/launch-page.html index 3f36bc91..359966cc 100644 --- a/assets/launch-page.html +++ b/assets/launch-page.html @@ -34,7 +34,7 @@ } .launching { font-size: 19px; - font-weight: bold; + font-weight: 600; line-height: 32px; color: #000000; margin-left: 10px; diff --git a/assets/writer.jpg b/assets/writer.jpg index ab877283..6030bbc6 100644 Binary files a/assets/writer.jpg and b/assets/writer.jpg differ diff --git a/main.js b/main.js index b7599a4a..794d3647 100644 --- a/main.js +++ b/main.js @@ -83,8 +83,8 @@ app.on("ready", () => { } else { dialog.showMessageBox({ type: "warning", - title: "Port is in use", - message: "Please don't open multiple software at the same time", + title: "Warning", + message: "Another Koodo Reader is already running", }); } }); diff --git a/package.json b/package.json index c52dac50..032eed7f 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "koodo-reader", "main": "main.js", - "version": "1.1.9", + "version": "1.2.0", "description": "A cross-platform open source Epub reader ", "author": { "name": "App by Troye", diff --git a/public/assets/_empty.svg b/public/assets/_empty.svg new file mode 100644 index 00000000..620b36cc --- /dev/null +++ b/public/assets/_empty.svg @@ -0,0 +1,83 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/empty.svg b/public/assets/empty.svg index 620b36cc..2a22a1bb 100644 --- a/public/assets/empty.svg +++ b/public/assets/empty.svg @@ -1,24 +1,19 @@ - + - + - - - - - - - - - - + + + + + @@ -67,7 +62,7 @@ - + @@ -79,5 +74,9 @@ + + + + diff --git a/public/assets/launch-page.html b/public/assets/launch-page.html index efb56b09..eb1e16db 100644 --- a/public/assets/launch-page.html +++ b/public/assets/launch-page.html @@ -41,7 +41,7 @@ } .launching { font-size: 19px; - font-weight: bold; + font-weight: 600; line-height: 32px; color: #000000; margin-left: 10px; @@ -93,10 +93,12 @@
+ {this.state.deleteKey === item.key ? ( + + ) : null} +
+
diff --git a/src/components/colorOption/colorOption.css b/src/components/colorOption/colorOption.css index 8da5b6df..b28354d2 100644 --- a/src/components/colorOption/colorOption.css +++ b/src/components/colorOption/colorOption.css @@ -1,20 +1,23 @@ .color-option-container { - width: 100%; + width: 90%; height: 40px; + margin-left: 5%; position: relative; - top: 8px; + top: 15px; display: flex; justify-content: space-around; } .color-option { - width: 30px; - height: 30px; + width: 25px; + height: 25px; background: rgba(228, 255, 154, 1); border-radius: 50%; opacity: 1; box-sizing: border-box; position: relative; bottom: 5px; + cursor: pointer; + animation: slide-left 0.2s ease-in-out 0s 1; } .popup-color-more { display: inline-block; @@ -36,6 +39,27 @@ display: flex; align-items: center; justify-content: center; + animation: slide-right 0.2s ease-in-out 0s 1; +} +@keyframes slide-right { + 0% { + transform: translateX(30px); + opacity: 0; + } + 100% { + transform: translateX(0px); + opacity: 1; + } +} +@keyframes slide-left { + 0% { + transform: translateX(-50px); + opacity: 0; + } + 100% { + transform: translateX(0px); + opacity: 1; + } } .demo-line { width: 100%; diff --git a/src/components/deleteIcon/deleteIcon.css b/src/components/deleteIcon/deleteIcon.css index 0c3c80a6..6365bc7e 100644 --- a/src/components/deleteIcon/deleteIcon.css +++ b/src/components/deleteIcon/deleteIcon.css @@ -10,6 +10,7 @@ top: 2px !important; right: 2px !important; z-index: 10; + animation: popup 0.1s ease-in-out 0s 1; } .delete-digest-icon { position: relative; diff --git a/src/components/dropdownList/component.tsx b/src/components/dropdownList/component.tsx index ab0f4599..b40d3faa 100644 --- a/src/components/dropdownList/component.tsx +++ b/src/components/dropdownList/component.tsx @@ -94,7 +94,6 @@ class DropdownList extends React.Component< value={[subItem, index.toString()]} className="general-setting-option" key={index} - style={item.id === 1 ? { fontFamily: subItem } : {}} > {subItem} diff --git a/src/components/dropdownList/dropdownList.css b/src/components/dropdownList/dropdownList.css index a6d9a7f6..b82243e5 100644 --- a/src/components/dropdownList/dropdownList.css +++ b/src/components/dropdownList/dropdownList.css @@ -8,7 +8,9 @@ .general-setting-title { font-size: 16px; color: rgba(75, 75, 75, 1); - margin: 15px 0px 17px 0px; + font-weight: 500; + margin-top: 15px; + margin-bottom: 10px; } .general-setting-dropdown { width: 220px; diff --git a/src/components/imageViewer/component.tsx b/src/components/imageViewer/component.tsx index a8693e35..ed471d70 100644 --- a/src/components/imageViewer/component.tsx +++ b/src/components/imageViewer/component.tsx @@ -40,6 +40,7 @@ class ImageViewer extends React.Component { this.props.handleLeaveReader("bottom"); } let href = + event.target || event.target.href || event.target.parentNode.href || event.target.parentNode.parentNode.href; diff --git a/src/components/importLocal/component.tsx b/src/components/importLocal/component.tsx index c31eace4..74a47c54 100644 --- a/src/components/importLocal/component.tsx +++ b/src/components/importLocal/component.tsx @@ -423,7 +423,9 @@ class ImportLocal extends React.Component { className="import-from-local" {...getRootProps()} style={ - OtherUtil.getReaderConfig("lang") === "en" ? { right: 390 } : {} + OtherUtil.getReaderConfig("lang") === "en" + ? { fontSize: "14px" } + : {} } > Import from Local diff --git a/src/components/importLocal/importLocal.css b/src/components/importLocal/importLocal.css index 251fbdc4..f260edb0 100644 --- a/src/components/importLocal/importLocal.css +++ b/src/components/importLocal/importLocal.css @@ -14,6 +14,7 @@ color: white; cursor: pointer; z-index: 50; + transition: 0.1s; } .import-from-local:hover { background-color: rgba(75, 75, 75, 0.9); diff --git a/src/components/modeControl/component.tsx b/src/components/modeControl/component.tsx index 080d1181..11cd747d 100644 --- a/src/components/modeControl/component.tsx +++ b/src/components/modeControl/component.tsx @@ -45,18 +45,7 @@ class ModeControl extends React.Component { Double-Page Mode
-
{ - this.handleChangeMode("scroll"); - }} - style={this.state.readerMode === "scroll" ? {} : { opacity: 0.4 }} - > - -
- Chapter Scroll -
-
+
{ diff --git a/src/components/modeControl/modeControl.css b/src/components/modeControl/modeControl.css index bbecbc1f..7db7fde9 100644 --- a/src/components/modeControl/modeControl.css +++ b/src/components/modeControl/modeControl.css @@ -1,13 +1,13 @@ .single-control-container { - width: calc(100% - 10px); + width: calc(100% - 30px); height: 80px; - margin: 0px 5px 0px 5px; + margin: 0px 15px 0px 15px; display: flex; justify-content: space-around; } .single-page-icon, .two-page-icon { - font-size: 50px; + font-size: 60px; color: rgba(75, 75, 75, 1); text-align: center; } diff --git a/src/components/noteTag/component.tsx b/src/components/noteTag/component.tsx index d74ec24e..8bead852 100644 --- a/src/components/noteTag/component.tsx +++ b/src/components/noteTag/component.tsx @@ -71,7 +71,9 @@ class NoteTag extends React.Component { this.props.handleTag(this.indextoTag([])); }; handleInput = () => { - this.setState({ isInput: true }); + this.setState({ isInput: true }, () => { + document.getElementById("newTag")?.focus(); + }); }; render() { const renderTag = () => { diff --git a/src/components/noteTag/noteTag.css b/src/components/noteTag/noteTag.css index 2f016890..9deacb31 100644 --- a/src/components/noteTag/noteTag.css +++ b/src/components/noteTag/noteTag.css @@ -24,7 +24,7 @@ color: #4b4b4b; opacity: 1; margin-left: 10px; - font-weight: bold; + font-weight: 600; } .tag-container { display: inline-block; diff --git a/src/components/popupNote/popupNote.css b/src/components/popupNote/popupNote.css index 192d1be8..9c35f701 100644 --- a/src/components/popupNote/popupNote.css +++ b/src/components/popupNote/popupNote.css @@ -57,7 +57,7 @@ position: absolute; bottom: 15px; right: 15px; - width: 100px; + width: 120px; display: flex; justify-content: space-between; } @@ -74,6 +74,7 @@ color: rgba(0, 0, 0, 1); opacity: 1; cursor: pointer; + margin-right: 20px; } .note-tags { width: 100%; diff --git a/src/components/popupOption/popupOption.css b/src/components/popupOption/popupOption.css index 6c30e1ec..a4493ce2 100644 --- a/src/components/popupOption/popupOption.css +++ b/src/components/popupOption/popupOption.css @@ -9,10 +9,9 @@ .digest-option, .translation-option, .copy-option { - height: 55px; + height: 69px; width: 69px; font-size: 14px !important; - line-height: 15px !important; color: rgba(0, 0, 0, 1); opacity: 1; @@ -20,10 +19,17 @@ display: flex; box-sizing: border-box; cursor: pointer; - + transition: 0.1s; /* align-items: center; */ justify-content: center; } +.note-option:hover, +.digest-option:hover, +.translation-option:hover, +.copy-option:hover { + background-color: rgba(75, 75, 75, 0.035); + border-radius: 8px; +} .digest-option { margin-top: 5px; margin-right: 10px; diff --git a/src/components/searchBox/component.tsx b/src/components/searchBox/component.tsx index 27daf941..a0d7f2d5 100644 --- a/src/components/searchBox/component.tsx +++ b/src/components/searchBox/component.tsx @@ -2,7 +2,7 @@ import React from "react"; import "./searchBox.css"; import OtherUtil from "../../utils/otherUtil"; -import { Trans } from "react-i18next"; +import { Trans, withNamespaces } from "react-i18next"; import { SearchBoxProps } from "./interface"; class SearchBox extends React.Component { componentDidMount() { @@ -100,12 +100,12 @@ class SearchBox extends React.Component { }} placeholder={ this.props.isNavSearch || this.props.mode === "nav" - ? "搜索全书" + ? this.props.t("Search the book") : this.props.tabMode === "note" - ? "搜索我的笔记" + ? this.props.t("Search my notes") : this.props.tabMode === "digest" - ? "搜索我的书摘" - : "搜索我的书库" + ? this.props.t("Search my digests") + : this.props.t("Search my library") } style={ this.props.mode === "nav" @@ -137,4 +137,4 @@ class SearchBox extends React.Component { } } -export default SearchBox; +export default withNamespaces()(SearchBox as any); diff --git a/src/components/searchBox/interface.tsx b/src/components/searchBox/interface.tsx index 161432c9..35ee98c7 100644 --- a/src/components/searchBox/interface.tsx +++ b/src/components/searchBox/interface.tsx @@ -16,4 +16,5 @@ export interface SearchBoxProps { handleSearch: (isSearch: boolean) => void; handleSearchState: (isSearch: boolean) => void; handleSearchList: (searchList: any) => void; + t: any; } diff --git a/src/components/settingDialog/component.tsx b/src/components/settingDialog/component.tsx index 3d87e543..f2aeba48 100644 --- a/src/components/settingDialog/component.tsx +++ b/src/components/settingDialog/component.tsx @@ -19,8 +19,6 @@ class SettingDialog extends React.Component< isTouch: OtherUtil.getReaderConfig("isTouch") === "yes", isOpenBook: OtherUtil.getReaderConfig("isOpenBook") === "yes", isExpandContent: OtherUtil.getReaderConfig("isExpandContent") === "yes", - isUseBackground: OtherUtil.getReaderConfig("isUseBackground") === "yes", - isShowFooter: OtherUtil.getReaderConfig("isShowFooter") !== "no", }; } componentDidMount() { @@ -79,28 +77,7 @@ class SettingDialog extends React.Component< : this.props.handleMessage("Turn On Successfully"); this.props.handleMessageBox(true); }; - handleChangeBackground = () => { - this.setState({ isUseBackground: !this.state.isUseBackground }); - OtherUtil.setReaderConfig( - "isUseBackground", - this.state.isUseBackground ? "no" : "yes" - ); - this.state.isUseBackground - ? this.props.handleMessage("Turn Off Successfully") - : this.props.handleMessage("Turn On Successfully"); - this.props.handleMessageBox(true); - }; - handleFooterHeader = () => { - this.setState({ isShowFooter: !this.state.isShowFooter }); - OtherUtil.setReaderConfig( - "isShowFooter", - this.state.isShowFooter ? "no" : "yes" - ); - this.state.isShowFooter - ? this.props.handleMessage("Turn On Successfully") - : this.props.handleMessage("Turn Off Successfully"); - this.props.handleMessageBox(true); - }; + render() { return (
@@ -115,12 +92,15 @@ class SettingDialog extends React.Component< Date {updateLog.date}

- { - this.props.handleSetting(false); - }} - > +
+ { + this.props.handleSetting(false); + }} + > +
+
{this.state.isTouch ? ( @@ -203,56 +183,6 @@ class SettingDialog extends React.Component< >
-
- Don't show footer and header - { - this.handleFooterHeader(); - }} - style={{ float: "right" }} - > - - -
-
- Dont't use mimical background - { - this.handleChangeBackground(); - }} - style={{ float: "right" }} - > - - -
语言 / Language @@ -294,23 +224,13 @@ class SettingDialog extends React.Component<
{ - this.handleJump("https://github.com/troyeguo"); + this.handleJump("https://960960.xyz"); }} > About author
- -
); } diff --git a/src/components/settingDialog/interface.tsx b/src/components/settingDialog/interface.tsx index c55c1783..21f43c71 100644 --- a/src/components/settingDialog/interface.tsx +++ b/src/components/settingDialog/interface.tsx @@ -7,7 +7,5 @@ export interface SettingInfoState { language: string; isTouch: boolean; isOpenBook: boolean; - isUseBackground: boolean; - isShowFooter: boolean; isExpandContent: boolean; } diff --git a/src/components/settingDialog/settingDialog.css b/src/components/settingDialog/settingDialog.css index 239e71db..7e763df3 100644 --- a/src/components/settingDialog/settingDialog.css +++ b/src/components/settingDialog/settingDialog.css @@ -13,7 +13,7 @@ } .setting-dialog-title { font-size: 20px; - font-weight: bold; + font-weight: 600; line-height: 15px; color: rgba(75, 75, 75, 1); opacity: 1; @@ -85,15 +85,23 @@ font-size: 25px; color: rgba(75, 75, 75, 1); } -.setting-close { +.setting-close-container { position: absolute; top: 10px; right: 10px; + transition: 0.1s; + width: 38px; + height: 38px; +} + +.setting-close-container:hover { + background-color: rgba(75, 75, 75, 0.035); + border-radius: 50%; } .about-this-project { position: absolute; bottom: 20px; - left: 40px; + left: 100px; width: 150px; cursor: pointer; z-index: 10; diff --git a/src/components/sliderList/component.tsx b/src/components/sliderList/component.tsx index 3b8ada03..f46962b1 100644 --- a/src/components/sliderList/component.tsx +++ b/src/components/sliderList/component.tsx @@ -12,7 +12,9 @@ class SliderList extends React.Component { value: this.props.mode === "fontSize" ? OtherUtil.getReaderConfig("fontSize") || "17" - : OtherUtil.getReaderConfig("scale") || "1", + : this.props.mode === "scale" + ? OtherUtil.getReaderConfig("scale") || "1" + : OtherUtil.getReaderConfig("margin") || "30", }; } @@ -26,11 +28,14 @@ class SliderList extends React.Component { "font-size": `${fontSize || 17}px !important`, }, }); - } else { + } else if (this.props.mode === "scale") { const scale = event.target.value; this.setState({ value: scale }); OtherUtil.setReaderConfig("scale", scale); - window.location.reload(); + } else { + const margin = event.target.value; + this.setState({ value: margin }); + OtherUtil.setReaderConfig("margin", margin); } }; //使进度百分比随拖动实时变化 @@ -46,25 +51,27 @@ class SliderList extends React.Component { Font Size     {this.state.value}px - ) : ( + ) : this.props.mode === "scale" ? ( <> Scale     {parseInt((parseFloat(this.state.value) * 100).toString())}% + ) : ( + <> + Margin     + {this.state.value}px + )}
- - {this.props.mode === "fontSize" ? "A" : "1"} + + {this.props.mode === "fontSize" + ? "A" + : this.props.mode === "scale" + ? "1" + : "0"}
{ type="range" max={this.props.maxValue} min={this.props.minValue} - step={this.props.mode === "fontSize" ? "1" : "0.1"} + step={ + this.props.mode === "fontSize" + ? "1" + : this.props.mode === "scale" + ? "0.1" + : "5" + } onInput={(event) => { this.onValueChange(event); }} onChange={(event) => { this.onValueInput(event); }} + onMouseUp={() => { + window.location.reload(); + }} />
{this.props.mode === "fontSize" ? ( A + ) : this.props.mode === "scale" ? ( + + 2 + ) : ( - 2 + 50 )}
diff --git a/src/components/sliderList/sliderList.css b/src/components/sliderList/sliderList.css index 55fe0ab8..455a6c37 100644 --- a/src/components/sliderList/sliderList.css +++ b/src/components/sliderList/sliderList.css @@ -8,12 +8,16 @@ line-height: 27px; color: rgba(75, 75, 75, 1); padding-bottom: 10px; + font-weight: 500; + margin-bottom: -5px; + margin-top: 15px; } .ultra-small-size { float: left; font-size: 16px; line-height: 27px; color: rgba(75, 75, 75, 1); + position: relative; } .ultra-large-size { @@ -23,7 +27,7 @@ color: rgba(75, 75, 75, 1); position: relative; bottom: 49px; - left: 5px; + text-align: left; } .font-size-selector { width: 205px; diff --git a/src/components/themeList/component.tsx b/src/components/themeList/component.tsx index 565fd53e..6bbdeb5b 100644 --- a/src/components/themeList/component.tsx +++ b/src/components/themeList/component.tsx @@ -24,7 +24,7 @@ class ThemeList extends React.Component { currentTextIndex: textList.findIndex((item) => { return ( item.theme === - (OtherUtil.getReaderConfig("textColor") || "rgba(255,255,255,1)") + (OtherUtil.getReaderConfig("textColor") || "rgba(0,0,0,1)") ); }), isShowTextPicker: false, @@ -42,6 +42,15 @@ class ThemeList extends React.Component { color: `white !important`, }, }); + } else if ( + index === 2 && + OtherUtil.getReaderConfig("backgroundColor") === "rgba(255,255,255,1)" + ) { + this.props.currentEpub.rendition.themes.default({ + "a, article, cite, code, div, li, p, pre, span, table": { + color: `black !important`, + }, + }); } else { this.props.currentEpub.rendition.themes.default({ "a, article, cite, code, div, li, p, pre, span, table": { diff --git a/src/components/themeList/themeList.css b/src/components/themeList/themeList.css index d4e8212e..45037d33 100644 --- a/src/components/themeList/themeList.css +++ b/src/components/themeList/themeList.css @@ -7,7 +7,9 @@ width: 100%; font-size: 16px; color: rgba(75, 75, 75, 1); - margin: 6px 0px; + font-weight: 500; + margin-bottom: -5px; + margin-top: 15px; } .background-color-list { margin: 10px 0px 0px; diff --git a/src/components/updataDialog/component.tsx b/src/components/updataDialog/component.tsx index 8a672aa8..5dacd7f5 100644 --- a/src/components/updataDialog/component.tsx +++ b/src/components/updataDialog/component.tsx @@ -59,21 +59,6 @@ class UpdateDialog extends React.Component { > Confirm -

- - Our Website - - koodo.960960.xyz -

- ); } diff --git a/src/components/updataDialog/updateDialog.css b/src/components/updataDialog/updateDialog.css index 93aed623..be7d84cd 100644 --- a/src/components/updataDialog/updateDialog.css +++ b/src/components/updataDialog/updateDialog.css @@ -13,7 +13,7 @@ } .update-dialog-title { font-size: 20px; - font-weight: bold; + font-weight: 600; line-height: 15px; color: rgba(75, 75, 75, 1); opacity: 1; @@ -44,7 +44,7 @@ } .update-dialog-info { margin-top: 10px; - height: 300px; + height: 330px; overflow-y: scroll; width: 346px; } diff --git a/src/containers/background/background.css b/src/containers/background/background.css index d9592094..ddbaae8d 100644 --- a/src/containers/background/background.css +++ b/src/containers/background/background.css @@ -32,12 +32,7 @@ place-content: center; */ overflow: hidden; } -/* 控制小于888px是书脊消失 */ -@media screen and (max-width: 888px) { - .background-box3 { - display: none; - } -} + .book-spine { position: absolute; width: 1px; @@ -86,7 +81,6 @@ position: absolute; top: 5px; line-height: 30px; - color: rgba(191, 191, 191, 1); text-align: center; } .progress-chapter-name { @@ -104,7 +98,6 @@ position: absolute; bottom: 10px; line-height: 30px; - color: rgba(191, 191, 191, 1); text-align: center; font-size: 14px; } diff --git a/src/containers/background/component.tsx b/src/containers/background/component.tsx index 7e9bc35d..7d965984 100644 --- a/src/containers/background/component.tsx +++ b/src/containers/background/component.tsx @@ -18,6 +18,7 @@ class Background extends React.Component { nextPage: 0, scale: OtherUtil.getReaderConfig("scale") || 1, isShowFooter: OtherUtil.getReaderConfig("isShowFooter") !== "no", + isShowHeader: OtherUtil.getReaderConfig("isShowHeader") !== "no", isUseBackground: OtherUtil.getReaderConfig("isUseBackground") === "yes", }; this.isFirst = true; @@ -53,8 +54,15 @@ class Background extends React.Component { render() { if (this.state.isUseBackground) { return ( -
- {this.state.isShowFooter && this.state.currentChapter && ( +
+ {this.state.isShowHeader && this.state.currentChapter && (

{ {this.state.currentChapter}

)} - {this.state.isShowFooter && !this.state.isSingle && ( + {this.state.isShowHeader && !this.state.isSingle && (

{ ); } return ( -

- {this.state.isShowFooter && this.state.currentChapter && ( +
+ {this.state.isShowHeader && this.state.currentChapter && (

{

)} - {this.state.isShowFooter && !this.state.isSingle && ( + {this.state.isShowHeader && !this.state.isSingle && (

) : null} - { - this.handleClose(); - }} - > +
+ { + this.handleClose(); + }} + > +
+ {this.state.currentStep === 1 ? (
{ ? this.handleShelf(this.props.books, this.props.shelfIndex) : this.props.mode === "favorite" && !this.props.isSort ? this.handleKeyFilter(this.props.books, AddFavorite.getAllFavorite()) - : this.props.mode === "favorite" && this.props.isSort + : this.props.mode === "favorite" && + this.props.isSort && + !this.props.noteSortCode ? this.handleIndexFilter( this.handleKeyFilter(this.props.books, AddFavorite.getAllFavorite()), //返回排序后的图书index SortUtil.sortBooks(this.props.books, this.props.bookSortCode) || [] ) - : this.props.isSort + : this.props.isSort && !this.props.noteSortCode ? this.handleIndexFilter( this.props.books, //返回排序后的图书index @@ -217,6 +219,7 @@ class BookList extends React.Component { this.setState({ isOpenDelete }); }; render() { + console.log(this.state.favoriteBooks, "this.state.favoriteBooks"); if ( (this.state.favoriteBooks === 0 && this.props.mode === "favorite") || !this.props.books || diff --git a/src/containers/bookList/index.tsx b/src/containers/bookList/index.tsx index 4c55cb28..b6d36cba 100644 --- a/src/containers/bookList/index.tsx +++ b/src/containers/bookList/index.tsx @@ -17,6 +17,7 @@ const mappropsToProps = (state: stateType) => { isSort: state.manager.isSort, isList: state.manager.isList, bookSortCode: state.manager.bookSortCode, + noteSortCode: state.manager.noteSortCode, }; }; const actionCreator = { diff --git a/src/containers/bookList/interface.tsx b/src/containers/bookList/interface.tsx index c5e64270..72aff3df 100644 --- a/src/containers/bookList/interface.tsx +++ b/src/containers/bookList/interface.tsx @@ -9,6 +9,7 @@ export interface BookListProps extends RouteComponentProps { isSort: boolean; isList: string; bookSortCode: { sort: number; order: number }; + noteSortCode: { sort: number; order: number }; handleFetchList: () => void; handleMode: (mode: string) => void; handleShelfIndex: (index: number) => void; diff --git a/src/containers/bookmarkPage/bookmarkPage.css b/src/containers/bookmarkPage/bookmarkPage.css index fbab6f7a..bd7ab4e2 100644 --- a/src/containers/bookmarkPage/bookmarkPage.css +++ b/src/containers/bookmarkPage/bookmarkPage.css @@ -47,7 +47,7 @@ height: 117px; background: rgba(0, 0, 0, 0); box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.22); - opacity: 0.73; + opacity: 1; margin: 10px; margin-left: 15px; cursor: pointer; diff --git a/src/containers/deleteDialog/deleteDialog.css b/src/containers/deleteDialog/deleteDialog.css index 97831606..60952fd2 100644 --- a/src/containers/deleteDialog/deleteDialog.css +++ b/src/containers/deleteDialog/deleteDialog.css @@ -1,14 +1,13 @@ .delete-dialog-container { - width: 309px; - height: 189px; + width: 319px; + height: 199px; background: rgba(255, 255, 255, 1); box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.34); opacity: 1; position: fixed; - left: calc(50% - 155px); - top: calc(50% - 95px); + left: calc(50% - 160px); + top: calc(50% - 100px); z-index: 10; - padding: 5px; animation: popup 0.1s ease-in-out 0s 1; } .delete-dialog-title { @@ -49,7 +48,9 @@ opacity: 1; position: absolute; top: 106px; - width: 100%; + padding-left: 5px; + padding-right: 5px; + width: calc(100% - 10px); /* margin-left: 25px; */ } .icon-check { @@ -69,7 +70,7 @@ opacity: 1; position: absolute; left: 147px; - top: 144px; + top: 154px; font-size: 14px; @@ -86,9 +87,8 @@ opacity: 1; position: absolute; left: 227px; - top: 144px; + top: 154px; font-size: 14px; - line-height: 30px; color: white; opacity: 1; diff --git a/src/containers/deletedBookList/booklist.css b/src/containers/deletedBookList/booklist.css index 3b481f73..5907323d 100644 --- a/src/containers/deletedBookList/booklist.css +++ b/src/containers/deletedBookList/booklist.css @@ -87,6 +87,7 @@ margin-left: 16px; font-size: 15px; line-height: 31px; + cursor: pointer; } .delete-shelf-icon { cursor: pointer; diff --git a/src/containers/deletedBookList/component.tsx b/src/containers/deletedBookList/component.tsx index e0ef2930..e82d1fbb 100644 --- a/src/containers/deletedBookList/component.tsx +++ b/src/containers/deletedBookList/component.tsx @@ -54,7 +54,7 @@ class BookList extends React.Component { //根据不同的场景获取不同的图书数据 let books = !this.props.isSort ? this.handleKeyFilter(this.props.deletedBooks, AddTrash.getAllTrash()) - : this.props.isSort + : this.props.isSort && !this.props.noteSortCode ? this.handleIndexFilter( this.handleKeyFilter(this.props.deletedBooks, AddTrash.getAllTrash()), //返回排序后的图书index @@ -63,7 +63,7 @@ class BookList extends React.Component { this.props.bookSortCode ) || [] ) - : this.props.isSort + : this.props.isSort && !this.props.noteSortCode ? this.handleIndexFilter( this.props.deletedBooks, //返回排序后的图书index diff --git a/src/containers/deletedBookList/index.tsx b/src/containers/deletedBookList/index.tsx index 65d35d3b..ff44ea2a 100644 --- a/src/containers/deletedBookList/index.tsx +++ b/src/containers/deletedBookList/index.tsx @@ -15,6 +15,7 @@ const mappropsToProps = (state: stateType) => { isSort: state.manager.isSort, isList: state.manager.isList, bookSortCode: state.manager.bookSortCode, + noteSortCode: state.manager.noteSortCode, }; }; const actionCreator = { diff --git a/src/containers/deletedBookList/interface.tsx b/src/containers/deletedBookList/interface.tsx index aedede5b..78317f29 100644 --- a/src/containers/deletedBookList/interface.tsx +++ b/src/containers/deletedBookList/interface.tsx @@ -7,6 +7,7 @@ export interface BookListProps extends RouteComponentProps { isSort: boolean; isList: string; bookSortCode: { sort: number; order: number }; + noteSortCode: { sort: number; order: number }; handleFetchList: () => void; handleMode: (mode: string) => void; handleDeleteDialog: (isShow: boolean) => void; diff --git a/src/containers/emptyPage/component.tsx b/src/containers/emptyPage/component.tsx index f3bbacf2..9b7bf0ba 100644 --- a/src/containers/emptyPage/component.tsx +++ b/src/containers/emptyPage/component.tsx @@ -29,15 +29,21 @@ class EmptyPage extends React.Component { }; return (
- +
+ +
+ {renderEmptyList()}
); diff --git a/src/containers/emptyPage/emptyPage.css b/src/containers/emptyPage/emptyPage.css index 652fcc9e..4f9e7470 100644 --- a/src/containers/emptyPage/emptyPage.css +++ b/src/containers/emptyPage/emptyPage.css @@ -7,11 +7,16 @@ overflow: hidden; } .empty-page-illustration { + height: 100%; +} +.empty-illustration-container { + height: 450px; position: absolute; right: 0; bottom: 0; - width: 787px; + z-index: -1; + overflow: hidden; } .empty-page-info-container { position: absolute; diff --git a/src/containers/epubViewer/component.tsx b/src/containers/epubViewer/component.tsx index 1f06f0a1..48b3b289 100644 --- a/src/containers/epubViewer/component.tsx +++ b/src/containers/epubViewer/component.tsx @@ -26,6 +26,7 @@ class Reader extends React.Component { isMessage: false, rendition: null, scale: OtherUtil.getReaderConfig("scale") || 1, + margin: OtherUtil.getReaderConfig("margin") || 30, time: ReadingTime.getTime(this.props.currentBook.key), isTouch: OtherUtil.getReaderConfig("isTouch") === "yes", readerMode: OtherUtil.getReaderConfig("readerMode") || "double", @@ -57,12 +58,7 @@ class Reader extends React.Component { this.rendition = epub.renderTo(page, { manager: this.state.readerMode === "continuous" ? "continuous" : "default", - flow: - this.state.readerMode === "scroll" - ? "scrolled-doc" - : this.state.readerMode === "continuous" - ? "scrolled" - : "auto", + flow: this.state.readerMode === "continuous" ? "scrolled" : "auto", width: "100%", height: "100%", snap: true, @@ -70,9 +66,7 @@ class Reader extends React.Component { OtherUtil.getReaderConfig("readerMode") === "single" ? "none" : "", }); this.setState({ rendition: this.rendition }); - this.state.readerMode !== "scroll" && - this.state.readerMode !== "continuous" && - MouseEvent(this.rendition); // 绑定事件 + this.state.readerMode !== "continuous" && MouseEvent(this.rendition); // 绑定事件 this.tickTimer = setInterval(() => { let time = this.state.time; time += 1; @@ -168,6 +162,17 @@ class Reader extends React.Component { >
+
{ + this.handleEnterReader("left"); + this.handleEnterReader("right"); + this.handleEnterReader("bottom"); + this.handleEnterReader("top"); + }} + > + +
{this.state.isMessage ? : null}
{ className="view-area-page" id="page-area" style={ - this.state.readerMode === "scroll" || this.state.readerMode === "continuous" ? { left: `calc(50vw - ${270 * parseFloat(this.state.scale)}px)`, @@ -307,6 +311,11 @@ class Reader extends React.Component { left: `calc(50vw - ${270 * parseFloat(this.state.scale)}px)`, right: `calc(50vw - ${270 * parseFloat(this.state.scale)}px)`, } + : this.state.readerMode === "double" + ? { + left: this.state.margin + "px", + right: this.state.margin + "px", + } : {} } >
diff --git a/src/containers/epubViewer/interface.tsx b/src/containers/epubViewer/interface.tsx index b3b3cf71..42b8331b 100644 --- a/src/containers/epubViewer/interface.tsx +++ b/src/containers/epubViewer/interface.tsx @@ -21,4 +21,5 @@ export interface ReaderState { rendition: any; time: number; scale: string; + margin: string; } diff --git a/src/containers/epubViewer/reader.css b/src/containers/epubViewer/reader.css index a6795bde..7edbbd2a 100644 --- a/src/containers/epubViewer/reader.css +++ b/src/containers/epubViewer/reader.css @@ -133,8 +133,8 @@ } .view-area-page { position: absolute; - left: 30px; - right: 30px; + left: 0px; + right: 0px; top: 30px; bottom: 30px; /* width: calc(100% - 100px); @@ -155,7 +155,7 @@ font-size: 30px; transform: rotate(90deg); cursor: pointer; - opacity: 0.1; + opacity: 0.05; display: flex; justify-content: center; align-items: center; @@ -173,7 +173,7 @@ right: 20px; transform: rotate(-90deg); cursor: pointer; - opacity: 0.1; + opacity: 0.05; display: flex; justify-content: center; align-items: center; @@ -193,3 +193,12 @@ font-size: 20px; height: 20px; } +.reader-setting-icon-container { + position: absolute; + top: 15px; + right: 20px; + font-size: 27px; + opacity: 0.1; + cursor: pointer; + z-index: 10; +} diff --git a/src/containers/header/component.tsx b/src/containers/header/component.tsx index e5a9fafc..bdd627d9 100644 --- a/src/containers/header/component.tsx +++ b/src/containers/header/component.tsx @@ -71,6 +71,11 @@ class Header extends React.Component { onClick={() => { this.props.handleBackupDialog(true); }} + style={ + OtherUtil.getReaderConfig("lang") === "en" + ? { fontSize: "14px" } + : {} + } > Backup and Restore
diff --git a/src/containers/header/header.css b/src/containers/header/header.css index ec3073bf..697c9fe7 100644 --- a/src/containers/header/header.css +++ b/src/containers/header/header.css @@ -10,6 +10,16 @@ left: 265px; top: 29px; cursor: pointer; + transition: 0.1s; + width: 48px; + height: 27px; + padding-left: 8px; + transition: 0.1s; +} +.header-sort-container:hover, +.setting-icon-container:hover { + background-color: rgba(75, 75, 75, 0.035); + border-radius: 8px; } .header-sort-text, .download-demo-book { @@ -73,6 +83,7 @@ color: #4b4b4b; box-sizing: border-box; cursor: pointer; + transition: 0.1s; } .import-from-cloud:hover { background-color: rgba(75, 75, 75, 0.035); @@ -113,12 +124,15 @@ font-size: 25px; } .setting-icon-container { - width: 25px; - height: 25px; + width: 32px; + height: 35px; font-size: 25px; + line-height: 37px; position: absolute; left: 335px; - top: 33px; + top: 25px; color: rgba(75, 75, 75, 1); cursor: pointer; + transition: 0.1s; + padding-left: 5px; } diff --git a/src/containers/navigationPanel/component.tsx b/src/containers/navigationPanel/component.tsx index 2a322728..5d6cef30 100644 --- a/src/containers/navigationPanel/component.tsx +++ b/src/containers/navigationPanel/component.tsx @@ -145,14 +145,17 @@ class NavigationPanel extends React.Component<
{this.state.isSearch ? ( <> - { - this.handleSearchState(false); - this.props.handleSearch(false); - this.setState({ searchList: null }); - }} - > +
+ { + this.handleSearchState(false); + this.props.handleSearch(false); + this.setState({ searchList: null }); + }} + > +
+
{ + this.setState({ isUseBackground: !this.state.isUseBackground }); + OtherUtil.setReaderConfig( + "isUseBackground", + this.state.isUseBackground ? "no" : "yes" + ); + this.state.isUseBackground + ? this.props.handleMessage("Turn Off Successfully") + : this.props.handleMessage("Turn On Successfully"); + this.props.handleMessageBox(true); + }; + handleFooter = () => { + this.setState({ isShowFooter: !this.state.isShowFooter }); + OtherUtil.setReaderConfig( + "isShowFooter", + this.state.isShowFooter ? "no" : "yes" + ); + this.state.isShowFooter + ? this.props.handleMessage("Turn On Successfully") + : this.props.handleMessage("Turn Off Successfully"); + this.props.handleMessageBox(true); + setTimeout(() => { + window.location.reload(); + }, 500); + }; + handleHeader = () => { + this.setState({ isShowHeader: !this.state.isShowHeader }); + OtherUtil.setReaderConfig( + "isShowHeader", + this.state.isShowHeader ? "no" : "yes" + ); + this.state.isShowHeader + ? this.props.handleMessage("Turn On Successfully") + : this.props.handleMessage("Turn Off Successfully"); + this.props.handleMessageBox(true); + setTimeout(() => { + window.location.reload(); + }, 500); + }; render() { return (
@@ -85,35 +127,6 @@ class SettingPanel extends React.Component<
- {this.state.isSupported ? ( -
- - {this.state.isAudioOn ? ( - Turn off audio - ) : ( - Turn on audio - )} - - - { - if (this.props.locations) { - this.handleChangeAudio(); - } else { - this.props.handleMessage("Audio is not ready yet"); - this.props.handleMessageBox(true); - } - }} - style={this.props.locations ? {} : { opacity: 0.5 }} - > - - -
- ) : null} + {this.state.readerMode && this.state.readerMode !== "double" ? ( + {this.state.isSupported ? ( +
+ + Turn on audio + + + { + if (this.props.locations) { + this.handleChangeAudio(); + } else { + this.props.handleMessage("Audio is not ready yet"); + this.props.handleMessageBox(true); + } + }} + style={ + this.props.locations + ? this.state.isAudioOn + ? { background: "rgba(46, 170, 220)" } + : {} + : { opacity: 0.5 } + } + > + + +
+ ) : null} +
+ + Don't show footer + + + { + this.handleFooter(); + }} + style={ + !this.state.isShowFooter + ? { background: "rgba(46, 170, 220)", float: "right" } + : { float: "right" } + } + > + + +
+
+ + Don't show header + + + { + this.handleHeader(); + }} + style={ + !this.state.isShowHeader + ? { background: "rgba(46, 170, 220)", float: "right" } + : { float: "right" } + } + > + + +
+
+ + Dont't use mimical background + + { + this.handleChangeBackground(); + }} + style={ + this.state.isUseBackground + ? { background: "rgba(46, 170, 220)", float: "right" } + : { float: "right" } + } + > + + +
); diff --git a/src/containers/settingPanel/interface.tsx b/src/containers/settingPanel/interface.tsx index 06598a70..b4ce607f 100644 --- a/src/containers/settingPanel/interface.tsx +++ b/src/containers/settingPanel/interface.tsx @@ -9,4 +9,7 @@ export interface SettingPanelState { isSupported: boolean; isAudioOn: boolean; readerMode: string; + isUseBackground: boolean; + isShowFooter: boolean; + isShowHeader: boolean; } diff --git a/src/containers/settingPanel/settingPanel.css b/src/containers/settingPanel/settingPanel.css index f2a8f04a..8f06b7f5 100644 --- a/src/containers/settingPanel/settingPanel.css +++ b/src/containers/settingPanel/settingPanel.css @@ -4,8 +4,8 @@ align-items: center; width: calc(100% - 44px); height: 38px; - font-size: 16px; color: rgba(75, 75, 75, 1); + font-weight: 500; margin: 6px 22px; } .setting-panel-parent { @@ -28,27 +28,27 @@ overflow-y: scroll; padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */ box-sizing: content-box; + /* display: none; */ } .single-control-switch-container { - margin: 10px 0px 15px; - margin-left: 50px; + margin: 15px 20px 10px; height: 20px; + display: flex; + justify-content: space-between; + cursor: pointer; } .single-control-switch-title { font-size: 16px; line-height: 16px; - color: #4b4b4b; - opacity: 1; - margin: 0px 10px 0px 30px; - position: relative; - bottom: 2px; + color: rgba(75, 75, 75, 1); + font-weight: 500; } .single-control-switch { display: inline-block; width: 40px; height: 20px; - background: #000000; + background: rgba(75, 75, 75, 1); opacity: 1; border-radius: 10px; position: relative; @@ -60,6 +60,6 @@ height: 16px; width: 16px; border-radius: 50%; - border: 2px solid black; background-color: white; + margin: 2px; } diff --git a/src/containers/sidebar/sidebar.css b/src/containers/sidebar/sidebar.css index f38b2ef0..2f160aeb 100644 --- a/src/containers/sidebar/sidebar.css +++ b/src/containers/sidebar/sidebar.css @@ -88,15 +88,7 @@ color: rgba(75, 75, 75, 0.5); opacity: 1; } -.icon-more { - margin-left: 93px; - /* line-height: 29px; */ - position: relative; - top: 6px; -} -.icon-shelf { - /* margin-right: 12px; */ -} + .sidebar-dropdown { font-size: 13px; } diff --git a/src/pages/manager/component.tsx b/src/pages/manager/component.tsx index e6c1ecb0..ebdd128f 100644 --- a/src/pages/manager/component.tsx +++ b/src/pages/manager/component.tsx @@ -154,23 +154,27 @@ class Manager extends React.Component { )}
-
- {this.props.isOpenDeleteDialog ? ( - - ) : this.props.isOpenEditDialog ? ( - - ) : this.props.isOpenAddDialog ? ( - - ) : null} -
- {this.props.isMessage ? : null} - {this.props.isSortDisplay ? : null} - {this.props.isBackup ? : null} - {this.props.isFirst === "yes" ? : null} - {this.state.isUpdated && this.props.isFirst === "no" ? ( + {this.props.isOpenDeleteDialog && } + {this.props.isOpenEditDialog && } + {this.props.isOpenAddDialog && } + {(this.props.isSettingOpen || + this.props.isBackup || + this.props.isOpenDeleteDialog || + this.props.isOpenEditDialog || + this.props.isOpenAddDialog || + this.props.isFirst === "yes" || + (this.state.isUpdated && this.props.isFirst === "no")) && ( +
+ )} + + {this.props.isMessage && } + {this.props.isSortDisplay && } + {this.props.isBackup && } + {this.props.isFirst === "yes" && } + {this.state.isUpdated && this.props.isFirst === "no" && ( - ) : null} - {this.props.isSettingOpen ? : null} + )} + {this.props.isSettingOpen && } {(!books || books.length === 0) && this.state.totalBooks ? ( ) : ( diff --git a/src/pages/manager/manager.css b/src/pages/manager/manager.css index 4bd9e953..33503f06 100644 --- a/src/pages/manager/manager.css +++ b/src/pages/manager/manager.css @@ -36,7 +36,7 @@ height: 100%; top: 0px; left: 0px; - z-index: 10; + z-index: 9; } .drag-info { width: 200px; @@ -50,7 +50,7 @@ text-align: center; margin: 50px 0px 20px; font-size: 40px; - font-weight: bold; + font-weight: 600; } .waring-pic { width: 100vw;