Skip to content

Commit

Permalink
fix bug
Browse files Browse the repository at this point in the history
  • Loading branch information
troyeguo committed Apr 16, 2023
1 parent c585eb4 commit 9ad1838
Show file tree
Hide file tree
Showing 17 changed files with 149 additions and 367 deletions.
3 changes: 1 addition & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@
},
"dependencies": {
"@iarna/rtf-to-html": "^1.1.0",
"@types/chardet": "^0.8.1",
"@vitalets/google-translate-api": "^8.0.0",
"adm-zip": "^0.5.2",
"axios": "^0.19.2",
Expand All @@ -41,6 +40,7 @@
"zip-a-folder": "^0.0.12"
},
"devDependencies": {
"@types/chardet": "^0.8.1",
"@types/express": "^4.17.15",
"@types/file-saver": "^2.0.1",
"@types/i18next": "^13.0.0",
Expand Down Expand Up @@ -79,7 +79,6 @@
"react-redux": "^7.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-tippy": "^1.4.0",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"sass-loader": "^8.0.0",
Expand Down
34 changes: 12 additions & 22 deletions src/components/dialogs/settingDialog/component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ import {
import { themeList } from "../../../constants/themeList";
import toast from "react-hot-toast";
import { openExternalUrl } from "../../../utils/serviceUtils/urlUtil";
import { getTooltip } from "../../../utils/commonUtil";
class SettingDialog extends React.Component<
SettingInfoProps,
SettingInfoState
Expand Down Expand Up @@ -316,28 +315,19 @@ class SettingDialog extends React.Component<
<div className="setting-dialog-new-title">
<Trans>Theme Color</Trans>
<ul className="theme-setting-container">
{themeList.map((item, index) =>
getTooltip(
(
<li
className={
index === this.state.currentThemeIndex
? "active-color theme-setting-item"
: "theme-setting-item"
}
onClick={() => {
this.handleTheme(item.name, index);
}}
style={{ backgroundColor: item.color }}
></li>
) as any,
{
title: item.title,
position: "top",
trigger: "mouseenter",
{themeList.map((item, index) => (
<li
className={
index === this.state.currentThemeIndex
? "active-color theme-setting-item"
: "theme-setting-item"
}
)
)}
onClick={() => {
this.handleTheme(item.name, index);
}}
style={{ backgroundColor: item.color }}
></li>
))}
</ul>
</div>

Expand Down
20 changes: 5 additions & 15 deletions src/components/importLocal/component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import BookUtil from "../../utils/fileUtils/bookUtil";
import { fetchFileFromPath } from "../../utils/fileUtils/fileUtil";
import toast from "react-hot-toast";
import StorageUtil from "../../utils/serviceUtils/storageUtil";
import { getTooltip } from "../../utils/commonUtil";

import ShelfUtil from "../../utils/readUtils/shelfUtil";
declare var window: any;
let clickFilePath = "";
Expand Down Expand Up @@ -267,20 +267,10 @@ class ImportLocal extends React.Component<ImportLocalProps, ImportLocalState> {
>
<div className="animation-mask-local"></div>
{this.props.isCollapsed && this.state.width < 950 ? (
getTooltip(
(
<span
className="icon-folder"
style={{ fontSize: "15px", fontWeight: 500 }}
></span>
) as any,
{
title: this.props.t("Import"),
position: "top",
style: { height: "20px" },
trigger: "mouseenter",
}
)
<span
className="icon-folder"
style={{ fontSize: "15px", fontWeight: 500 }}
></span>
) : (
<span>
<Trans>Import</Trans>
Expand Down
17 changes: 3 additions & 14 deletions src/components/popups/popupOption/component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import { getHightlightCoords } from "../../../utils/fileUtils/pdfUtil";
import { getIframeDoc } from "../../../utils/serviceUtils/docUtil";
import { openExternalUrl } from "../../../utils/serviceUtils/urlUtil";
import { isElectron } from "react-device-detect";
import { getTooltip } from "../../../utils/commonUtil";

declare var window: any;

Expand Down Expand Up @@ -244,19 +243,9 @@ class PopupOption extends React.Component<PopupOptionProps> {
}
}}
>
{getTooltip(
(
<span
className={`icon-${item.icon} ${item.name}-icon`}
></span>
) as any,
{
title: this.props.t(item.title),
position: "top",
style: { height: "20px" },
trigger: "mouseenter",
}
)}
<span
className={`icon-${item.icon} ${item.name}-icon`}
></span>
</div>
);
})}
Expand Down
89 changes: 28 additions & 61 deletions src/components/readerSettings/modeControl/component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import { Trans } from "react-i18next";

import { isElectron } from "react-device-detect";
import toast from "react-hot-toast";
import { getTooltip } from "../../../utils/commonUtil";

class ModeControl extends React.Component<ModeControlProps, ModeControlState> {
constructor(props: ModeControlProps) {
Expand Down Expand Up @@ -35,66 +34,34 @@ class ModeControl extends React.Component<ModeControlProps, ModeControlState> {
<Trans>View Mode</Trans>
</div>
<div className="single-control-container">
{getTooltip(
(
<div
className="single-mode-container"
onClick={() => {
this.handleChangeMode("single");
}}
style={
this.state.readerMode === "single" ? {} : { opacity: 0.4 }
}
>
<span className="icon-single-page single-page-icon"></span>
</div>
) as any,
{
title: this.props.t("Single-Page Mode"),
position: "top",
trigger: "mouseenter",
}
)}
{getTooltip(
(
<div
className="double-mode-container"
onClick={() => {
this.handleChangeMode("double");
}}
style={
this.state.readerMode === "double" ? {} : { opacity: 0.4 }
}
>
<span className="icon-two-page two-page-icon"></span>
</div>
) as any,
{
title: this.props.t("Double-Page Mode"),
position: "top",
trigger: "mouseenter",
}
)}
{getTooltip(
(
<div
className="double-mode-container"
onClick={() => {
this.handleChangeMode("scroll");
}}
style={
this.state.readerMode === "scroll" ? {} : { opacity: 0.4 }
}
>
<span className="icon-scroll two-page-icon"></span>
</div>
) as any,
{
title: this.props.t("Scroll Mode"),
position: "top",
trigger: "mouseenter",
}
)}
<div
className="single-mode-container"
onClick={() => {
this.handleChangeMode("single");
}}
style={this.state.readerMode === "single" ? {} : { opacity: 0.4 }}
>
<span className="icon-single-page single-page-icon"></span>
</div>

<div
className="double-mode-container"
onClick={() => {
this.handleChangeMode("double");
}}
style={this.state.readerMode === "double" ? {} : { opacity: 0.4 }}
>
<span className="icon-two-page two-page-icon"></span>
</div>
<div
className="double-mode-container"
onClick={() => {
this.handleChangeMode("scroll");
}}
style={this.state.readerMode === "scroll" ? {} : { opacity: 0.4 }}
>
<span className="icon-scroll two-page-icon"></span>
</div>
</div>
</div>
);
Expand Down
68 changes: 23 additions & 45 deletions src/components/readerSettings/themeList/component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import ThemeUtil from "../../../utils/readUtils/themeUtil";

import toast from "react-hot-toast";
import { isElectron } from "react-device-detect";
import { getTooltip } from "../../../utils/commonUtil";

class ThemeList extends React.Component<ThemeListProps, ThemeListState> {
constructor(props: ThemeListProps) {
Expand Down Expand Up @@ -167,28 +166,17 @@ class ThemeList extends React.Component<ThemeListProps, ThemeListState> {
<Trans>Background Color</Trans>
</div>
<ul className="background-color-list">
{getTooltip(
(
<li
className="background-color-circle"
onClick={() => {
this.handleColorBgPicker(!this.state.isShowBgPicker);
}}
>
<span
className={
this.state.isShowBgPicker ? "icon-check" : "icon-more"
}
></span>
</li>
) as any,
{
title: this.props.t("Customize"),
position: "top",
trigger: "mouseenter",
style: { display: "inline-block" },
}
)}
<li
className="background-color-circle"
onClick={() => {
this.handleColorBgPicker(!this.state.isShowBgPicker);
}}
>
<span
className={this.state.isShowBgPicker ? "icon-check" : "icon-more"}
></span>
</li>

{renderBackgroundColorList()}
</ul>
{this.state.isShowBgPicker && (
Expand All @@ -207,28 +195,18 @@ class ThemeList extends React.Component<ThemeListProps, ThemeListState> {
<Trans>Text Color</Trans>
</div>
<ul className="background-color-list">
{getTooltip(
(
<li
className="background-color-circle"
onClick={() => {
this.handleColorTextPicker(!this.state.isShowTextPicker);
}}
>
<span
className={
this.state.isShowTextPicker ? "icon-check" : "icon-more"
}
></span>
</li>
) as any,
{
title: this.props.t("Customize"),
position: "top",
trigger: "mouseenter",
style: { display: "inline-block" },
}
)}
<li
className="background-color-circle"
onClick={() => {
this.handleColorTextPicker(!this.state.isShowTextPicker);
}}
>
<span
className={
this.state.isShowTextPicker ? "icon-check" : "icon-more"
}
></span>
</li>

{renderTextColorList()}
</ul>
Expand Down
36 changes: 13 additions & 23 deletions src/components/viewMode/component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { ViewModeProps, ViewModeState } from "./interface";
import StorageUtil from "../../utils/serviceUtils/storageUtil";

import { viewMode } from "../../constants/viewMode";
import { getTooltip } from "../../utils/commonUtil";

class ViewMode extends React.Component<ViewModeProps, ViewModeState> {
constructor(props: ViewModeProps) {
Expand All @@ -18,28 +17,19 @@ class ViewMode extends React.Component<ViewModeProps, ViewModeState> {
render() {
return (
<div className="book-list-view">
{viewMode.map((item) =>
getTooltip(
(
<div
className="card-list-mode"
onClick={() => {
this.handleChange(item.mode);
}}
style={
this.props.viewMode !== item.mode ? { opacity: 0.5 } : {}
}
>
<span className={`icon-${item.icon}`}></span>
</div>
) as any,
{
title: this.props.t(item.name),
position: "top",
trigger: "mouseenter",
}
)
)}
{viewMode.map((item) => (
<>
<div
className="card-list-mode"
onClick={() => {
this.handleChange(item.mode);
}}
style={this.props.viewMode !== item.mode ? { opacity: 0.5 } : {}}
>
<span className={`icon-${item.icon}`}></span>
</div>
</>
))}
</div>
);
}
Expand Down
Loading

0 comments on commit 9ad1838

Please sign in to comment.