From c009026961949973eb0bed2847912120b80fc00d Mon Sep 17 00:00:00 2001
From: GyDi <segydi@foxmail.com>
Date: Sat, 2 Apr 2022 17:18:38 +0800
Subject: [PATCH] feat: add text color
---
src/components/setting/setting-theme.tsx | 117 +++++------------------
1 file changed, 26 insertions(+), 91 deletions(-)
diff --git a/src/components/setting/setting-theme.tsx b/src/components/setting/setting-theme.tsx
index 5fb6c2c..1743602 100644
--- a/src/components/setting/setting-theme.tsx
+++ b/src/components/setting/setting-theme.tsx
@@ -71,6 +71,22 @@ const SettingTheme = (props: Props) => {
}
});
+ const renderItem = (label: string, key: keyof typeof defaultTheme) => {
+ return (
+ <Item>
+ <ListItemText primary={label} />
+ <Round sx={{ background: theme[key] || defaultTheme[key] }} />
+ <TextField
+ {...textProps}
+ value={theme[key] ?? ""}
+ placeholder={defaultTheme[key]}
+ onChange={handleChange(key)}
+ onKeyDown={(e) => e.key === "Enter" && onSave()}
+ />
+ </Item>
+ );
+ };
+
return (
<Dialog open={open} onClose={onClose}>
<DialogTitle>{t("Theme Setting")}</DialogTitle>
@@ -79,120 +95,39 @@ const SettingTheme = (props: Props) => {
sx={{ width: 400, maxHeight: 300, overflow: "auto", pb: 0 }}
>
<List sx={{ pt: 0 }}>
- <Item>
- <ListItemText primary="Primary Color" />
-
- <Round
- sx={{
- background: theme.primary_color || defaultTheme.primary_color,
- }}
- />
- <TextField
- {...textProps}
- value={theme.primary_color ?? ""}
- placeholder={defaultTheme.primary_color}
- onChange={handleChange("primary_color")}
- />
- </Item>
-
- <Item>
- <ListItemText primary="Secondary Color" />
+ {renderItem("Primary Color", "primary_color")}
- <Round
- sx={{
- background:
- theme.secondary_color || defaultTheme.secondary_color,
- }}
- />
- <TextField
- {...textProps}
- value={theme.secondary_color ?? ""}
- placeholder={defaultTheme.secondary_color}
- onChange={handleChange("secondary_color")}
- />
- </Item>
-
- <Item>
- <ListItemText primary="Info Color" />
-
- <Round
- sx={{
- background: theme.info_color || defaultTheme.info_color,
- }}
- />
- <TextField
- {...textProps}
- value={theme.info_color ?? ""}
- placeholder={defaultTheme.info_color}
- onChange={handleChange("info_color")}
- />
- </Item>
+ {renderItem("Secondary Color", "secondary_color")}
- <Item>
- <ListItemText primary="Error Color" />
+ {renderItem("Primary Text", "primary_text")}
- <Round
- sx={{
- background: theme.error_color || defaultTheme.error_color,
- }}
- />
- <TextField
- {...textProps}
- value={theme.error_color ?? ""}
- placeholder={defaultTheme.error_color}
- onChange={handleChange("error_color")}
- />
- </Item>
+ {renderItem("Secondary Text", "secondary_text")}
- <Item>
- <ListItemText primary="Warning Color" />
+ {renderItem("Info Color", "info_color")}
- <Round
- sx={{
- background: theme.warning_color || defaultTheme.warning_color,
- }}
- />
- <TextField
- {...textProps}
- value={theme.warning_color ?? ""}
- placeholder={defaultTheme.warning_color}
- onChange={handleChange("warning_color")}
- />
- </Item>
+ {renderItem("Error Color", "error_color")}
- <Item>
- <ListItemText primary="Success Color" />
+ {renderItem("Warning Color", "warning_color")}
- <Round
- sx={{
- background: theme.success_color || defaultTheme.success_color,
- }}
- />
- <TextField
- {...textProps}
- value={theme.success_color ?? ""}
- placeholder={defaultTheme.success_color}
- onChange={handleChange("success_color")}
- />
- </Item>
+ {renderItem("Success Color", "success_color")}
<Item>
<ListItemText primary="Font Family" />
-
<TextField
{...textProps}
value={theme.font_family ?? ""}
onChange={handleChange("font_family")}
+ onKeyDown={(e) => e.key === "Enter" && onSave()}
/>
</Item>
<Item>
<ListItemText primary="CSS Injection" />
-
<TextField
{...textProps}
value={theme.css_injection ?? ""}
onChange={handleChange("css_injection")}
+ onKeyDown={(e) => e.key === "Enter" && onSave()}
/>
</Item>
</List>
--
GitLab