add changeable font size in terminal

DerGoogler · May 21, 2024 · 4179cf5 · 4179cf5
1 parent 04301bb
commit 4179cf5
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 11 deletions.
diff --git a/Website/src/activitys/TerminalActivity.tsx b/Website/src/activitys/TerminalActivity.tsx
@@ -1,8 +1,10 @@
 import { Ansi } from "@Components/Ansi";
+import { GestureDetector } from "@Components/onsenui/GestureDetector";
 import { Page } from "@Components/onsenui/Page";
 import { Toolbar } from "@Components/onsenui/Toolbar";
 import { useActivity } from "@Hooks/useActivity";
 import { useModFS } from "@Hooks/useModFS";
+import { useNativeStorage } from "@Hooks/useNativeStorage";
 import { useSettings } from "@Hooks/useSettings";
 import { useStrings } from "@Hooks/useStrings";
 import { BuildConfig } from "@Native/BuildConfig";
@@ -29,8 +31,9 @@ const TerminalActivity = () => {
   const { settings } = useSettings();
   const { strings } = useStrings();
   const { modFS, __modFS } = useModFS();
-  const [active, setActive] = React.useState<bool>(true);
 
+  const [fontSize, setFontSize] = useNativeStorage("term_font_size", 12);
+  const [active, setActive] = React.useState<bool>(true);
   const [lines, setLines] = React.useState<any[]>([]);
 
   const confirm = useConfirm();
@@ -316,9 +319,17 @@ const TerminalActivity = () => {
       renderToolbar={renderToolbar}
     >
       <Box
+        component={GestureDetector}
+        onPinch={(e: any) => {
+          setFontSize((init) => {
+            const newFontSize = init * (1 + (e.gesture.scale - 1) * 0.5);
+            return Math.min(Math.max(newFontSize, 12), 100);
+          });
+        }}
         sx={{
           display: "flex",
           flexWrap: "wrap",
+          height: "100%",
         }}
       >
         <Stack
@@ -329,6 +340,7 @@ const TerminalActivity = () => {
             flex: "0 0 100%",
             color: "white",
             height: "100%",
+            fontSize: fontSize,
           }}
           direction="column"
           justifyContent="flex-start"

diff --git a/Website/src/activitys/TestTerminalActivity.tsx b/Website/src/activitys/TestTerminalActivity.tsx
@@ -5,7 +5,9 @@ import { Toolbar } from "@Components/onsenui/Toolbar";
 import { Page } from "@Components/onsenui/Page";
 import { Ansi } from "@Components/Ansi";
 import { useConfirm } from "material-ui-confirm";
-import RestartAltIcon from '@mui/icons-material/RestartAlt';
+import RestartAltIcon from "@mui/icons-material/RestartAlt";
+import { GestureDetector } from "@Components/onsenui/GestureDetector";
+import { useNativeStorage } from "@Hooks/useNativeStorage";
 
 function TestTerminalActivity() {
   const { context } = useActivity();
@@ -75,7 +77,7 @@ function TestTerminalActivity() {
     });
     addButton({
       children: "Reboot",
-      startIcon: <RestartAltIcon/>,
+      startIcon: <RestartAltIcon />,
       onClick: () => {
         confirm({
           title: "Reboot device?",
@@ -88,9 +90,9 @@ function TestTerminalActivity() {
     });
 
     addText({
-        children:
-          "\x1b[2mModules that causes issues after installing belog not to \x1b[35;4mMMRL\x1b[0;2m!\nPlease report these issues to thier support page\x1b[2m",
-      });
+      children:
+        "\x1b[2mModules that causes issues after installing belog not to \x1b[35;4mMMRL\x1b[0;2m!\nPlease report these issues to thier support page\x1b[2m",
+    });
     addText({
       children: "Support for this module:",
     });
@@ -102,16 +104,27 @@ function TestTerminalActivity() {
     });
   }, []);
 
+  const [fontSize, setFontSize] = useNativeStorage("term_fodnt_size", 12);
+
   return (
     <Page onShow={startLog} renderToolbar={renderToolbar} modifier="noshadow">
-      <div
-        style={{
+      <Box
+        component={GestureDetector}
+        onPinch={(e: any) => {
+          setFontSize((init) => {
+            const newFontSize = init * (1 + (e.gesture.scale - 1) * 0.5);
+            return Math.min(Math.max(newFontSize, 12), 100);
+          });
+        }}
+        sx={{
           display: "flex",
           flexWrap: "wrap",
+          height: "100%",
         }}
       >
         <Stack
-          style={{
+          sx={{
+            fontSize: fontSize,
             whiteSpace: "pre",
             flex: "0 0 100%",
             color: "white",
@@ -126,7 +139,7 @@ function TestTerminalActivity() {
             <line.component {...line.props} />
           ))}
         </Stack>
-      </div>
+      </Box>
     </Page>
   );
 }

diff --git a/www/index.html b/www/index.html
@@ -23,7 +23,7 @@
     <meta property="twitter:image" content="https://mmrl.dergoogler.com/assets/MMRL-Cover.png" />
 
     <!-- Meta Tags Generated with https://metatags.io -->
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, interactive-widget=resizes-content">
     <link rel="stylesheet" type="text/css" href="bundle/vendor.bundle.css" />
     <link rel="stylesheet" type="text/css" href="bundle/app.bundle.css" />
   </head>