Update

- rework icons - rework settings - rework ListViewBuilder
DerGoogler · Jun 8, 2022 · 6637f75 · 6637f75
1 parent 28e45e8
commit 6637f75
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 70 deletions.
diff --git a/Website/src/activitys/SettingsActivity.tsx b/Website/src/activitys/SettingsActivity.tsx
@@ -1,5 +1,5 @@
 import { Toolbar, BackButton, List } from "react-onsenui";
-import { ListViewBuilder } from "@Builders/ListViewBuilder";
+import ListViewBuilder from "@Builders/ListViewBuilder";
 import settings from "@Utils/settings";
 import pkg from "@Package";
 import AppCompatActivity from "./AppCompatActivity";

diff --git a/Website/src/builders/ListViewBuilder.tsx b/Website/src/builders/ListViewBuilder.tsx
@@ -3,15 +3,15 @@ import { ListItem, ListTitle, Select, Switch } from "react-onsenui";
 import ons from "onsenui";
 import tools from "@Utils/tools";
 import Gesture from "@Components/Gesture";
-import SharedPreferences from "@Native/SharedPreferences";
+import SharedPreferences, { ISharedPreferences } from "@Native/SharedPreferences";
 import { PushProps } from "@Activitys/MainActivity";
 
-interface Props {
-  data: ListInterface[];
+interface IProps {
+  data: IListInterface[];
   pushPage: any;
 }
 
-interface ListOptions {
+export interface IListOptions {
   key?: string;
   disabled?: boolean | any;
   id?: string;
@@ -30,7 +30,7 @@ interface ListOptions {
   /**
    * Makes an dialog
    */
-  helper?: Helper;
+  helper?: IListHelper;
   type: "switch" | "select" | "";
   text: string | JSX.Element;
   subtext?: string | JSX.Element;
@@ -40,7 +40,7 @@ interface ListOptions {
    * @param key Get the key from the current list item
    */
   onClick?(key: string | undefined, pushPage: (props: PushProps) => void): void;
-  selectValue?: SelectValue[];
+  selectValue?: IListSelectValue[];
   icon?: string | JSX.Element;
   selectDefaultValue?: string;
   selectDefaultText?: string;
@@ -54,7 +54,7 @@ interface ListOptions {
   callback?(e?: any, key?: string | undefined, keepDefaultFuntion?: void): void;
 }
 
-interface Helper {
+export interface IListHelper {
   /**
    * Hold the current list item text to open the dialog
    */
@@ -65,82 +65,39 @@ interface Helper {
   cancelable?: boolean;
 }
 
-interface SelectValue {
+export interface IListSelectValue {
   text: string;
   value: string;
   disabled?: boolean;
 }
 
-interface ListInterface {
+export interface IListInterface {
   title: string;
   id?: string;
   unTyped?: any;
   style?: React.CSSProperties;
   className?: string;
-  content: ListOptions[];
+  content: IListOptions[];
 }
 
-class ListViewBuilder extends Component<Props> {
-  private pref: SharedPreferences;
+class ListViewBuilder extends Component<IProps> {
+  private pref: ISharedPreferences;
 
-  public constructor(props: Props | Readonly<Props>) {
+  public constructor(props: IProps | Readonly<IProps>) {
     super(props);
     this.pref = new SharedPreferences();
   }
 
-  /**
-   * Check if an key is there
-   * @param key
-   * @returns {Boolean}
-   */
-  private getSettingSwitch(key: string): boolean {
-    var get = this.getPref(key);
-    if (get === undefined || get === null || get === "" || get === "false") {
-      return false;
-    } else {
-      return true;
-    }
-  }
-
-  private getSettingSelect(key: string): string | String {
-    var get = this.getPref(key);
-    if (get === undefined || get === null || get === "") {
-      return "en";
-    } else {
-      return get;
-    }
-  }
-
-  private getPref(key: string): string | null | undefined {
-    return this.pref.getPref(key);
-  }
-
-  private setPref(key: string, content: string): void {
-    this.pref.setPref(key, content);
-  }
-
-  private setSetting(key: string, data: any): void {
-    this.setPref(key, data);
-  }
-
-  private default(_: any, __: any, ___: any) {
-    if (_ === undefined || _ === null) {
-      return __;
-    } else if (_ === undefined || _ === null) {
-      return ___;
-    }
-  }
-
   public render() {
     const { data, pushPage } = this.props;
 
-    const list = data.map((header: ListInterface) => (
+    const list = data.map((header: IListInterface) => (
       <>
         <section id={header.id} className={header.className} style={header.style}>
           {/**
             // @ts-ignore */}
           <ListTitle>{header.title}</ListTitle>
-          {header.content.map((item: ListOptions) => (
+          {header.content.map((item: IListOptions) => (
             <>
               <ListItem
                 modifier={tools.typeCheck(item.modifier, "")}
@@ -240,7 +197,7 @@ class ListViewBuilder extends Component<Props> {
                             <option value="" selected disabled hidden>
                               {item.selectDefaultText ? item.selectDefaultText : "Choose"}
                             </option>
-                            {item.selectValue?.map((select: SelectValue) => (
+                            {item.selectValue?.map((select: IListSelectValue) => (
                               <>
                                 <option value={select.value} disabled={select.disabled}>
                                   {select.text}
@@ -265,4 +222,4 @@ class ListViewBuilder extends Component<Props> {
   }
 }
 
-export { ListViewBuilder, ListOptions, ListInterface, SelectValue };
+export default ListViewBuilder;
diff --git a/Website/src/components/Icon.tsx b/Website/src/components/Icon.tsx
@@ -0,0 +1,37 @@
+import { OverridableComponent } from "@mui/material/OverridableComponent";
+import { SvgIconProps, SvgIconTypeMap } from "@mui/material/SvgIcon";
+import SharedPreferences, { ISharedPreferences } from "@Native/SharedPreferences";
+import { Component } from "react";
+
+interface IProps {
+  icon: OverridableComponent<SvgIconTypeMap>;
+  /**
+   * Keeps the icons in light colors even if it's dark mode on
+   */
+  keepLight?: boolean;
+}
+
+/**
+ * An icon wrapper for Material React icons
+ */
+class Icon extends Component<IProps & SvgIconProps> {
+  private pref: ISharedPreferences;
+  private isDarkmode: boolean;
+  public constructor(props: (IProps & SvgIconProps) | Readonly<IProps & SvgIconProps>) {
+    super(props);
+    this.pref = new SharedPreferences();
+    this.isDarkmode = this.pref.getBoolean("enableDarkmode", false);
+  }
+
+  public render() {
+    const { keepLight } = this.props;
+    return (
+      <this.props.icon
+        sx={{ color: this.isDarkmode ? (keepLight ? "rgba(0, 0, 0, 0.54)" : "rgba(255, 255, 255, 1)") : "rgba(0, 0, 0, 0.54)" }}
+        {...this.props}
+      />
+    );
+  }
+}
+
+export default Icon;
diff --git a/Website/src/utils/settings.tsx b/Website/src/utils/settings.tsx
@@ -1,23 +1,24 @@
 import ons from "onsenui";
 import AcknowledgementsActivity from "@Activitys/AcknowledgementsActivity";
 import AlertBuilder from "@Builders/AlertBuilder";
-import { ListInterface } from "@Builders/ListViewBuilder";
+import { IListInterface } from "@Builders/ListViewBuilder";
 import SharedPreferences from "@Native/SharedPreferences";
 import tools from "@Utils/tools";
 import { BugReportRounded, ExtensionRounded, GavelRounded, SourceRounded } from "@mui/icons-material";
 import BuildConfig from "@Native/BuildConfig";
 import { os } from "@Native/os";
 import Build from "@Native/Build";
+import Icon from "@Components/Icon";
 
 const prefManager = new SharedPreferences();
 
-const settings: ListInterface[] = [
+const settings: IListInterface[] = [
   {
     title: "Repo",
     content: [
       {
         type: "",
-        icon: <ExtensionRounded />,
+        icon: <Icon icon={ExtensionRounded} />,
         text: "Custom repo",
         onClick: (key) => {
           new AlertBuilder()
@@ -28,15 +29,15 @@ const settings: ListInterface[] = [
                 if (input.startsWith(">")) {
                   switch (input) {
                     case ">gmr":
-                      prefManager.setPref("repo", "https://repo.dergoogler.com/modules.json");
+                      prefManager.setString("repo", "https://repo.dergoogler.com/modules.json");
                       break;
                     case ">mmar":
-                      prefManager.setPref("repo", "https://raw.githubusercontent.com/Magisk-Modules-Alt-Repo/json/main/modules.json");
+                      prefManager.setString("repo", "https://raw.githubusercontent.com/Magisk-Modules-Alt-Repo/json/main/modules.json");
                       break;
                   }
                 } else {
                   if (tools.validURL(input)) {
-                    prefManager.setPref("repo", input);
+                    prefManager.setString("repo", input);
                     ons.notification.alert("Repo changed, please refresh the app");
                   } else {
                     ons.notification.alert("Invalid input");
@@ -67,15 +68,16 @@ const settings: ListInterface[] = [
     content: [
       {
         type: "",
-        icon: <SourceRounded />,
+        icon: <Icon icon={SourceRounded} />,
+        // icon: <SourceRounded color="inherit" />,
         text: "Source code",
         onClick: () => {
           window.open("https://github.com/DerGoogler/MMRL/", "_blank");
         },
       },
       {
         type: "",
-        icon: <GavelRounded />,
+        icon: <Icon icon={GavelRounded} />,
         text: "Acknowledgements",
         onClick: (key, pushPage) => {
           pushPage({
@@ -86,7 +88,7 @@ const settings: ListInterface[] = [
       },
       {
         type: "",
-        icon: <BugReportRounded />,
+        icon: <Icon icon={BugReportRounded} />,
         text: "Issues",
         onClick: (key, pushPage) => {
           window.open("https://github.com/DerGoogler/DG-Repo/issues", "_blank");