feat(front): support miniSize monitor

And add preset3
SARDONYX-sard · Oct 29, 2023 · 84cdfb2 · 84cdfb2
1 parent 0fd25ee
commit 84cdfb2
Show file tree

Hide file tree

Showing 9 changed files with 87 additions and 23 deletions.
diff --git a/cspell.jsonc b/cspell.jsonc
@@ -7,11 +7,13 @@
     "Greatsword",
     "icns",
     "jwalk",
+    "Mincho",
     "mohidden",
     "multispace",
     "noconflict",
     "rfind",
     "Rustup",
+    "Shippori",
     "Skyrim",
     "splitn",
     "stperson",

diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
@@ -84,7 +84,6 @@ body {
   max-width: 100vw;
   min-height: 100vh;
   overflow-x: hidden;
-  height: 100%;
 }
 
 body {

diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -32,6 +32,8 @@ export default function RootLayout({
       <body className={inter.className}>
         <ThemeProvider>
           {children}
+          {/* To prevents the conversion button from being hidden because the menu is fixed. */}
+          <div style={{ height: "56px" }}></div>
           <Menu />
         </ThemeProvider>
       </body>

diff --git a/frontend/src/components/lists/style_list.tsx b/frontend/src/components/lists/style_list.tsx
@@ -36,6 +36,7 @@ export const SelectStyleList = ({ preset, setPreset, setStyle }: Props) => {
           <MenuItem value={"0"}>Custom</MenuItem>
           <MenuItem value={"1"}>Preset1</MenuItem>
           <MenuItem value={"2"}>Preset2</MenuItem>
+          <MenuItem value={"3"}>Preset3</MenuItem>
         </Select>
       </FormControl>
     </Tooltip>

diff --git a/frontend/src/components/navigation.tsx b/frontend/src/components/navigation.tsx
@@ -13,6 +13,7 @@ const Nav = styled(BottomNavigation)(() => {
     position: "fixed",
     bottom: 0,
     width: "100%",
+    zIndex: "100", // Because Ace-editor uses z-index and without it, it would be covered.
     ".Mui-selected": {
       color: "#99e4ee",
     },
@@ -25,9 +26,9 @@ export default function MenuNavigation() {
   const [value, setValue] = useState(0);
 
   useEffect(() => {
-    if (pathname=== "/") {
+    if (pathname === "/") {
       setValue(0);
-    } else if (pathname=== "/settings") {
+    } else if (pathname === "/settings") {
       setValue(1);
     }
   }, [setValue, pathname]);

diff --git a/frontend/src/components/pages/converter.tsx b/frontend/src/components/pages/converter.tsx
@@ -16,9 +16,9 @@ export default function Converter() {
         component="main"
         sx={{
           display: "grid",
-          placeItems: "center",
+          minHeight: "calc(100vh - 56px)",
           placeContent: "center",
-          height: "calc(100% - 56px)",
+          placeItems: "center",
           width: "100%",
         }}
       >

diff --git a/frontend/src/components/pages/settings.tsx b/frontend/src/components/pages/settings.tsx
@@ -1,9 +1,10 @@
 "use client";
 
 import AceEditor from "react-ace";
-import { Box } from "@mui/material";
 import InputLabel from "@mui/material/InputLabel";
+import packageJson from "@/../../package.json";
 import type { EditorMode } from "@/utils/editor";
+import { Box } from "@mui/material";
 import { SelectEditorMode } from "@/components/lists/editor_list";
 import { SelectStyleList } from "@/components/lists/style_list";
 import { Toaster } from "react-hot-toast";
@@ -34,7 +35,7 @@ export default function Settings() {
       component="main"
       sx={{
         display: "flex",
-        marginBottom: "20px",
+        marginBottom: "1rem",
         flexDirection: "column",
         alignItems: "center",
         width: "100%",
@@ -121,6 +122,19 @@ export default function Settings() {
         theme="one_dark"
         value={script}
       />
+
+      <div>
+        <p>Version: {packageJson.version}</p>
+        <p>
+          Source Code:{" "}
+          <a
+            style={{ cursor: "pointer", color: "#00c2ff" }}
+            onClick={() => open(packageJson.homepage)}
+          >
+            GitHub
+          </a>
+        </p>
+      </div>
     </Box>
   );
 }
diff --git a/frontend/src/utils/styles.ts b/frontend/src/utils/styles.ts
@@ -1,6 +1,7 @@
-const preset1 = `body {
+function createPreset() {
+  return `body {
   background-attachment: fixed;
-  background-image: url("https://i.redd.it/red-forest-1920-1080-v0-s9u8ki2rr70a1.jpg?s=139edf608c428656505a143635a0687dec086229");
+  background-image: var(--image-url);
   background-repeat: no-repeat;
   background-size: cover;
   background-color: #000;
@@ -12,7 +13,13 @@ const preset1 = `body {
 }
 
 p.Mui-error {
-  color: #ff1655;
+  color: var(--error-color);
+  background-color: #2f2e2eba;
+}
+
+main:has(.ace_editor) > .MuiInputLabel-animated {
+  padding-right: 1rem !important;
+  padding-left: 1rem !important;
   background-color: #2f2e2eba;
 }
 
@@ -21,13 +28,12 @@ span.Mui-checked > svg,
 .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-colorPrimary.Mui-focused > fieldset,
 .Mui-selected, /* Bottom Navigation */
 .MuiButton-outlined {
-  color: #ff8e16 !important;
-  border-color: #ff8e16;
+  color: var(--theme-color) !important;
+  border-color: var(--theme-color);
 }
 
-
 label.Mui-focused {
-  color: #ff8e16 !important;
+  color: var(--theme-color) !important;
 }
 
 .MuiButton-outlined {
@@ -36,45 +42,83 @@ label.Mui-focused {
 
 .MuiButton-outlined:hover {
   color: #fff !important;
-  background-color: #ff89898b;
+  background-color: var(--hover-btn-color);
 }
 
 .MuiLoadingButton-root {
   color: #fff;
-  background-color: #ab2b7e6e;
+  background-color: var(--convert-btn-color);
 }
 
 .MuiLoadingButton-root:hover {
-  background-color: #fd3b3b6e;
+  background-color: var(--hover-convert-btn-color);
 }`;
+}
+
+const preset1 = `:root {
+  --theme-color: #ff8e16;
+  --hover-btn-color: #ff89898b;
+  --convert-btn-color: #ab2b7e6e;
+  --hover-convert-btn-color: #fd3b3b6e;
+  --error-color: #ff1655;
+  --image-url: url("https://i.redd.it/red-forest-1920-1080-v0-s9u8ki2rr70a1.jpg?s=139edf608c428656505a143635a0687dec086229")
+}
 
-const preset2 = `body {
+${createPreset()}`;
+
+const preset2 = `:root {
+  --image-url: url("https://images.pexels.com/photos/2817421/pexels-photo-2817421.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750& dpr=1");
+}
+
+body {
   background-attachment: fixed;
-  background-image: url("https://images.pexels.com/photos/2817421/pexels-photo-2817421.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750& dpr=1");
+  background-image: var(--image-url);
   background-repeat: no-repeat;
   background-size: cover;
   background-color: #000;
 }
 
 .ace_gutter,
-.MuiButton-outlined,
 .MuiOutlinedInput-root {
-  background-color: #2424248c;
+  background-color: #2424248c !important;
 }
 
-.MuiButton-outlined:hover {
-  background-color: #0e0d0dc7;
+p.Mui-error {
+  color: var(--error-color);
+  background-color: #2f2e2eba;
+}
+
+main:has(.ace_editor) > .MuiInputLabel-animated {
+  padding-right: 1rem !important;
+  padding-left: 1rem !important;
+  background-color: #2f2e2eba;
+}
+
+.MuiButton-outlined {
+  background-color: #2424248c;
 }`;
 
+const preset3 = `:root {
+  --theme-color: #9644f1;
+  --hover-btn-color: #8b51fb8b;
+  --convert-btn-color: #ab2b7e6e;
+  --hover-convert-btn-color: #fd3b3b6e;
+  --image-url: url("https://images.pexels.com/photos/6162265/pexels-photo-6162265.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
+}
+
+${createPreset()}`;
+
 export const presetStyles = {
   "1": preset1,
   "2": preset2,
+  "3": preset3,
 } as const;
 
 export function selectPreset(select: string) {
   switch (select) {
     case "1":
     case "2":
+    case "3":
       return select;
     default:
       return "0";

diff --git a/package.json b/package.json
@@ -2,6 +2,7 @@
   "name": "dar-to-oar",
   "version": "0.1.6",
   "license": "MIT",
+  "homepage": "https://github.com/SARDONYX-sard/dar-to-oar",
   "private": true,
   "scripts": {
     "dev": "tauri dev",