Skip to content

Commit

Permalink
theme,ui and shortcut fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@mienaiyami
mienaiyami committed Nov 11, 2021
1 parent 9cf697e commit 35c671f
Show file tree
Hide file tree
Showing 8 changed files with 77 additions and 25 deletions.
45 changes: 36 additions & 9 deletions electron/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,18 @@ if (handleSquirrelEvent()) {
// declare const HOME_PRELOAD_WEBPACK_ENTRY: string;
const windowsCont: (BrowserWindow | null)[] = [];
let isFirstWindow = true;

app.setUserTasks([
{
program: process.execPath,
arguments: "--new-window",
iconPath: process.execPath,
iconIndex: 0,
title: "New Window",
description: "Create a new window",
},
]);

const createWindow = (link?: string) => {
const newWindow = new BrowserWindow({
width: 1200,
Expand Down Expand Up @@ -144,15 +156,16 @@ const registerListener = () => {
app.on("ready", async () => {
registerListener();
createWindow();
globalShortcut.register("f1", () => {
shell.openExternal("https://github.com/mienaiyami/react-ts-offline-manga-reader");
});
if (!app.isPackaged) {
const reactDevToolsPath = path.join(
homedir(),
"AppData\\local\\Microsoft\\Edge\\User Data\\Default\\Extensions\\gpphkfbcpidddadnkolkpfckpihlkkil\\4.20.2_0"
);
await session.defaultSession.loadExtension(reactDevToolsPath);
try {
const reactDevToolsPath = path.join(
homedir(),
"AppData\\local\\Microsoft\\Edge\\User Data\\Default\\Extensions\\gpphkfbcpidddadnkolkpfckpihlkkil\\4.20.2_0"
);
await session.defaultSession.loadExtension(reactDevToolsPath);
} catch (err) {
console.error(err);
}
}
const template: MenuItemConstructorOptions[] = [
{
Expand All @@ -177,7 +190,21 @@ app.on("ready", async () => {
{ role: "resetZoom" },
{ role: "zoomIn", accelerator: "CommandOrControl+=" },
{ role: "zoomOut" },
{ type: "separator" },
],
},
{
label: "Others",
submenu: [
{
role: "help",
accelerator: "F1",
click: () => shell.openExternal("https://github.com/mienaiyami/react-ts-offline-manga-reader"),
},
{
label: "New Window",
accelerator: process.platform === "darwin" ? "Cmd+N" : "Ctrl+N",
click: () => createWindow(),
},
],
},
];
Expand Down
8 changes: 4 additions & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "mangareader",
"productName": "Manga Reader",
"version": "2.1.4",
"version": "2.1.5",
"description": "App to read manga on desktop",
"main": "./.webpack/main/index.js",
"author": {
Expand Down Expand Up @@ -69,7 +69,7 @@
"config": {
"forge": {
"packagerConfig": {
"name": "MangaReader"
"name": "Manga Reader"
},
"plugins": [
[
Expand All @@ -94,8 +94,8 @@
"name": "@electron-forge/maker-squirrel",
"config": {
"name": "mangareader",
"exe": "MangaReader.exe",
"setupExe": "MangaReader.exe"
"exe": "Manga Reader.exe",
"setupExe": "Manga Reader.exe"
}
}
]
Expand Down
4 changes: 2 additions & 2 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,11 +63,11 @@ const getDataFiles = () => {
},
{
name: "theme2",
main: "--body-bg: #1e1e24;--icon-color: #fff8f0;--font-color: #fff8f0;--font-select-color: #fff8f0;--font-select-bg: #000;--color-primary: #111e4b;--color-secondary: #8f8f8f;--color-tertiary: #000000;--topBar-color: #17171c;--topBar-hover-color: #62636e;--input-bg: #3b3a3e;--btn-color1: #3b3a3e;--btn-color2: #62636e;--listItem-bg-color: #00000000;--listItem-hover-color: #3b3a3e;--listItem-alreadyRead-color: #3b3a3e;--listItem-current: #585a70;--toolbar-btn-bg: #000;--toolbar-btn-hover: #6b6b6b;--scrollbar-track-color: #00000000;--scrollbar-thumb-color: #545454;--scrollbar-thumb-color-hover: #878787;--divider-color: #3b3a3e;--context-menu-text: var(--font-color);--context-menu-bg: var(--color-tertiary);",
main: "--body-bg: #1e1e24;--icon-color: #fff8f0;--font-color: #fff8f0;--font-select-color: #fff8f0;--font-select-bg: #000;--color-primary: #111e4b;--color-secondary: #8f8f8f;--color-tertiary: #000000;--topBar-color: #17171c;--topBar-hover-color: #62636e;--input-bg: #3b3a3e;--btn-color1: #3b3a3e;--btn-color2: #62636e;--listItem-bg-color: #00000000;--listItem-hover-color: #55535b;--listItem-alreadyRead-color: #37343f;--listItem-current: #585a70;--toolbar-btn-bg: var(--topBar-color);--toolbar-btn-hover: var(--topBar-hover-color);--scrollbar-track-color: #00000000;--scrollbar-thumb-color: #545454;--scrollbar-thumb-color-hover: #878787;--divider-color: #3b3a3e;--context-menu-text: var(--font-color);--context-menu-bg: var(--color-tertiary);",
},
{
name: "theme3",
main: "--body-bg: #ffffff;--icon-color: #000c29;--font-color: #000c29;--font-select-color: #000c29;--font-select-bg: #fff8f0;--color-primary: #487fff;--color-secondary: #1f62ff;--color-tertiary: #93b4ff;--topBar-color: #e0e0e0;--topBar-hover-color: #b6ccfe;--input-bg: #b6ccfe;--btn-color1: #b6ccfe;--btn-color2: #709bff;--listItem-bg-color: #00000000;--listItem-hover-color: #b6ccfe;--listItem-alreadyRead-color: #b6ccfe;--listItem-current: #709bff;--toolbar-btn-bg: #b6ccfe;--toolbar-btn-hover: #487fff;--scrollbar-track-color: #b6ccfe00;--scrollbar-thumb-color: #b6ccfe;--scrollbar-thumb-color-hover: #709bff;--divider-color: #b6ccfe;--context-menu-text: var(--font-color);--context-menu-bg: var(--color-tertiary);",
main: "--body-bg: #ffffff;--icon-color: #000c29;--font-color: #000c29;--font-select-color: #000c29;--font-select-bg: #fff8f0;--color-primary: #487fff;--color-secondary: #1f62ff;--color-tertiary: #93b4ff;--topBar-color: #e0e0e0;--topBar-hover-color: #b6ccfe;--input-bg: #b6ccfe;--btn-color1: #b6ccfe;--btn-color2: #709bff;--listItem-bg-color: #00000000;--listItem-hover-color: #b6ccfe;--listItem-alreadyRead-color: #d0dcff;--listItem-current: #709bff;--toolbar-btn-bg: var(--topBar-color);--toolbar-btn-hover: var(--topBar-hover-color);--scrollbar-track-color: #b6ccfe00;--scrollbar-thumb-color: #b6ccfe;--scrollbar-thumb-color-hover: #709bff;--divider-color: #b6ccfe;--context-menu-text: var(--font-color);--context-menu-bg: var(--color-tertiary);",
},
];
if (window.fs.existsSync(themesPath)) {
Expand Down
2 changes: 1 addition & 1 deletion src/Components/Reader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const Reader = () => {
const [wideimages, setWideImages] = useState<string[]>([]);
const [imagesLength, setImagesLength] = useState(0);
const [imagesLoaded, setImagesLoaded] = useState(0);
const [isCtrlsOpen, setctrlOpen] = useState(false);
const [isCtrlsOpen, setctrlOpen] = useState(true);
const [isBookmarked, setBookmarked] = useState(false);
const sizePlusRef = useRef<HTMLButtonElement>(null);
const sizeMinusRef = useRef<HTMLButtonElement>(null);
Expand Down
30 changes: 26 additions & 4 deletions src/Components/ReaderSideList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,13 @@ const ReaderSideList = () => {
const [chapterData, setChapterData] = useState<{ name: string; pages: number }[]>([]);
const [filter, setfilter] = useState<string>("");
const [isListOpen, setListOpen] = useState(false);
const [preventListClose, setpreventListClose] = useState(false);
const prevMangaRef = useRef<string>("");
const [historySimple, sethistorySimple] = useState(history.map((e) => e.chapterName));
const currentLinkInListRef = useRef<HTMLAnchorElement>(null);
useEffect(() => {
if (!isContextMenuOpen) setListOpen(false);
if (!isContextMenuOpen) return setListOpen(false);
setpreventListClose(true);
}, [isContextMenuOpen]);
useEffect(() => {
sethistorySimple(history.map((e) => e.chapterName));
Expand Down Expand Up @@ -50,7 +52,7 @@ const ReaderSideList = () => {
const listData: { name: string; pages: number }[] = [];
let validFile = 0;
let responseCompleted = 0;
files.forEach((e, i) => {
files.forEach((e) => {
const path = dir + "\\" + e;
if (window.fs.lstatSync(path).isDirectory()) {
validFile++;
Expand Down Expand Up @@ -114,11 +116,26 @@ const ReaderSideList = () => {
<div
className={`currentMangaList listCont ${isListOpen ? "open" : ""}`}
onMouseEnter={() => {
setpreventListClose(true);
if (!isListOpen) setListOpen(true);
}}
onMouseLeave={() => {
if (!isContextMenuOpen) setListOpen(false);
onMouseLeave={(e) => {
if (preventListClose && !isContextMenuOpen && !e.currentTarget.contains(document.activeElement))
setListOpen(false);
setpreventListClose(false);
}}
onMouseDown={(e) => {
if (e.target instanceof Node && e.currentTarget.contains(e.target)) setpreventListClose(true);
}}
onBlur={(e) => {
if (!preventListClose && !e.currentTarget.contains(document.activeElement)) setListOpen(false);
}}
onKeyDown={(e) => {
if (e.key === "Escape") {
e.currentTarget.blur();
}
}}
tabIndex={-1}
>
<div className="indicator">
<FontAwesomeIcon icon={faChevronRight} />
Expand All @@ -141,6 +158,11 @@ const ReaderSideList = () => {
}
setfilter(filter);
}}
onKeyDown={(e) => {
if (e.key === "Escape") {
e.currentTarget.blur();
}
}}
/>
<button
id="inverseSort2"
Expand Down
2 changes: 1 addition & 1 deletion src/Components/Settings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,7 +216,7 @@ const Settings = ({ promptSetDefaultLocation }: { promptSetDefaultLocation: () =
className="postIssue"
onClick={() =>
window.electron.shell.openExternal(
"https://github.com/mienaiyami/react-ts-offline-manga-reader/issue"
"https://github.com/mienaiyami/react-ts-offline-manga-reader/issues"
)
}
tabIndex={-1}
Expand Down
6 changes: 3 additions & 3 deletions src/Components/TopBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,17 +22,17 @@ const TopBar = forwardRef((props, forwaredRef: React.ForwardedRef<HTMLInputEleme
if (mangaInReader) {
let mangaName = mangaInReader.mangaName;
let chapterName = mangaInReader.chapterName;
if (mangaName.length > 13) mangaName = mangaName.substr(0, 10) + "...";
if (mangaName.length > 13) mangaName = mangaName.substr(0, 20) + "...";
if (chapterName.length > 83) chapterName = chapterName.substr(0, 80) + "...";
const title = mangaName + " | " + chapterName;
setTitle(title);
setTitle(chapterName);
document.title = title;
return;
}
setTitle(window.electron.app.name);
document.title = window.electron.app.name;
};
const attachEventListener = (): any => {
const attachEventListener = () => {
setMaximized(window.electron.getCurrentWindow().isMaximized);
window.electron.getCurrentWindow()?.on("maximize", () => setMaximized(true));
window.electron.getCurrentWindow()?.on("unmaximize", () => setMaximized(false));
Expand Down
5 changes: 4 additions & 1 deletion src/styles/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -663,6 +663,9 @@ body {
scroll-behavior: smooth;
display: none;
overflow-x: hidden;
&::-webkit-scrollbar-track {
background: var(--topBar-color);
}
.currentMangaList {
background: var(--topBar-color);
height: 100%;
Expand All @@ -674,7 +677,7 @@ body {
display: flex;
flex-direction: column;
padding: 20px;
padding-top: 0;
padding-top: 5px;
box-sizing: border-box;
transform: translateX(-99%);
transition: 0.2s transform;
Expand Down

0 comments on commit 35c671f

Please sign in to comment.