prevent reload when typing, option to select variable width

mienaiyami · Dec 10, 2021 · e7de64e · e7de64e
1 parent 68f9f09
commit e7de64e
Show file tree

Hide file tree

Showing 9 changed files with 36 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "mangareader",
     "productName": "Manga Reader",
-    "version": "2.1.8",
+    "version": "2.1.9",
     "description": "App to read manga on desktop",
     "main": "./.webpack/main/index.js",
     "author": {

diff --git a/src/App.tsx b/src/App.tsx
@@ -22,6 +22,7 @@ if (!window.fs.existsSync(settingsPath)) {
         historyLimit: 60,
         locationListSortType: "normal",
         readerWidth: 60,
+        variableImageSize:true,
     };
     window.fs.writeFileSync(settingsPath, JSON.stringify(settingsData));
 }

diff --git a/src/Components/LocationsTab.tsx b/src/Components/LocationsTab.tsx
@@ -110,6 +110,7 @@ const LocationsTab = forwardRef(
                             title="Type to Search"
                             data-tooltip="Type to Search"
                             tabIndex={-1}
+                            onKeyDown={(e)=>e.stopPropagation()}
                             onChange={(e) => {
                                 const val = e.target.value;
                                 let filter = "";

diff --git a/src/Components/Reader.tsx b/src/Components/Reader.tsx
@@ -417,7 +417,7 @@ const Reader = () => {
                         }}
                         onLoad={(ev) => {
                             setImagesLoaded((init) => init + 1);
-                            if (ev.currentTarget.offsetHeight / ev.currentTarget.offsetWidth <= 1.2) {
+                            if (appSettings.variableImageSize && ev.currentTarget.offsetHeight / ev.currentTarget.offsetWidth <= 1.2) {
                                 setWideImages((init) => [...init, e]);
                             }
                         }}

diff --git a/src/Components/ReaderSideList.tsx b/src/Components/ReaderSideList.tsx
@@ -164,6 +164,7 @@ const ReaderSideList = () => {
                             setfilter(filter);
                         }}
                         onKeyDown={(e) => {
+                            e.stopPropagation()
                             if (e.key === "Escape") {
                                 e.currentTarget.blur();
                             }

diff --git a/src/Components/Settings.tsx b/src/Components/Settings.tsx
@@ -68,6 +68,7 @@ const Settings = ({ promptSetDefaultLocation }: { promptSetDefaultLocation: () =
                                 defaultValue={appSettings.historyLimit}
                                 ref={historyInputRef}
                                 onKeyDown={(e) => {
+                                    e.stopPropagation();
                                     if (e.key === "Enter") {
                                         historyBtnRef.current?.click();
                                     }
@@ -230,6 +231,20 @@ const Settings = ({ promptSetDefaultLocation }: { promptSetDefaultLocation: () =
                             <span>{window.electron.app.getVersion()}</span>
                         </div>
                     </div>
+                    <div className="settingItem defaultLocation">
+                        <div className="name">Other settings</div>
+                        <div className="current">
+                            <label className={appSettings.variableImageSize?'selected':''}>
+                                <input type="checkbox" defaultChecked={appSettings.variableImageSize} onChange={(e)=>{
+                                    setAppSettings((init)=>{
+                                        init.variableImageSize=e.currentTarget.checked;
+                                        return {...init};
+                                    })
+                                }}/>
+                                <p>Variable image size depending on width(prefered for manga where some images consist of 2 pages).</p>
+                            </label>
+                        </div>
+                    </div>
                     <div className="settingItem issue">
                         <div className="name">Issues? :</div>
                         <div className="current">

diff --git a/src/Components/TopBar.tsx b/src/Components/TopBar.tsx
@@ -112,6 +112,7 @@ const TopBar = forwardRef((props, forwaredRef: React.ForwardedRef<HTMLInputEleme
                             setPageNumChangeDisabled(false);
                         }}
                         onKeyDown={(e) => {
+                            e.stopPropagation();
                             if (
                                 !(
                                     /[0-9]/gi.test(e.key) ||

diff --git a/src/MainImports.ts b/src/MainImports.ts
@@ -35,6 +35,7 @@ declare global {
         historyLimit: number;
         locationListSortType: "normal" | "inverse";
         readerWidth: number;
+        variableImageSize:boolean;
     }
     interface ListItem {
         mangaName: string;

diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -283,7 +283,8 @@ body {
                 cursor: pointer;
             }
         }
-        input {
+        input[type="text"],
+        input[type="number"] {
             background: var(--input-bg);
             overflow: scroll;
             cursor: text;
@@ -592,6 +593,15 @@ body {
                                 height: 100%;
                                 border-radius: 3px;
                             }
+                            label {
+                                display: flex;
+                                cursor: pointer;
+                                background-color: var(--input-bg);
+                                padding: 5px;
+                                gap: 5px;
+                                border-radius: 3px;
+
+                            }
                             p {
                                 font-size: 12px;
                                 width: 100%;
@@ -605,11 +615,9 @@ body {
                             .enabled {
                                 background-color: #f003;
                             }
-                        }
-                    }
-                    .themeSelector {
-                        .selected {
-                            background-color: var(--btn-color2);
+                            .selected {
+                                background-color: var(--btn-color2);
+                            }
                         }
                     }
                 }