Change style of Settings page
1. Move selects above switches Selects are larger now so it looks nicer to flow from large down to small. 2. Remove label from alarm sound button Because the other buttons don't have labels this makes the alarm sound stand out and seemed inconsistent.
This commit is contained in:
parent
2e96398b38
commit
2fdb220659
|
@ -1,33 +0,0 @@
|
||||||
import { View } from "react-native";
|
|
||||||
import { Button, Subheading } from "react-native-paper";
|
|
||||||
import { ITEM_PADDING } from "./constants";
|
|
||||||
|
|
||||||
export default function SettingButton({
|
|
||||||
name: text,
|
|
||||||
label,
|
|
||||||
onPress,
|
|
||||||
}: {
|
|
||||||
name: string;
|
|
||||||
label?: string;
|
|
||||||
onPress: () => void;
|
|
||||||
}) {
|
|
||||||
if (label) {
|
|
||||||
return (
|
|
||||||
<View
|
|
||||||
style={{
|
|
||||||
flexDirection: "row",
|
|
||||||
alignItems: "center",
|
|
||||||
paddingLeft: ITEM_PADDING,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Subheading style={{ width: 100 }}>{label}</Subheading>
|
|
||||||
<Button onPress={onPress}>{text}</Button>
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<Button style={{ alignSelf: "flex-start" }} onPress={onPress}>
|
|
||||||
{text}
|
|
||||||
</Button>
|
|
||||||
);
|
|
||||||
}
|
|
|
@ -5,19 +5,19 @@ import { useForm } from "react-hook-form";
|
||||||
import { NativeModules, ScrollView, View } from "react-native";
|
import { NativeModules, ScrollView, View } from "react-native";
|
||||||
import DocumentPicker from "react-native-document-picker";
|
import DocumentPicker from "react-native-document-picker";
|
||||||
import { Dirs, FileSystem } from "react-native-file-access";
|
import { Dirs, FileSystem } from "react-native-file-access";
|
||||||
|
import { Button } from "react-native-paper";
|
||||||
import ConfirmDialog from "./ConfirmDialog";
|
import ConfirmDialog from "./ConfirmDialog";
|
||||||
|
import DrawerHeader from "./DrawerHeader";
|
||||||
|
import Page from "./Page";
|
||||||
|
import Select from "./Select";
|
||||||
|
import Switch from "./Switch";
|
||||||
import { MARGIN } from "./constants";
|
import { MARGIN } from "./constants";
|
||||||
import { AppDataSource } from "./data-source";
|
import { AppDataSource } from "./data-source";
|
||||||
import { setRepo, settingsRepo } from "./db";
|
import { setRepo, settingsRepo } from "./db";
|
||||||
import { DrawerParams } from "./drawer-param-list";
|
import { DrawerParams } from "./drawer-param-list";
|
||||||
import DrawerHeader from "./DrawerHeader";
|
|
||||||
import Input from "./input";
|
import Input from "./input";
|
||||||
import { darkOptions, lightOptions, themeOptions } from "./options";
|
import { darkOptions, lightOptions, themeOptions } from "./options";
|
||||||
import Page from "./Page";
|
|
||||||
import Select from "./Select";
|
|
||||||
import SettingButton from "./SettingButton";
|
|
||||||
import Settings, { settingsUpdated } from "./settings";
|
import Settings, { settingsUpdated } from "./settings";
|
||||||
import Switch from "./Switch";
|
|
||||||
import { toast } from "./toast";
|
import { toast } from "./toast";
|
||||||
import { useTheme } from "./use-theme";
|
import { useTheme } from "./use-theme";
|
||||||
|
|
||||||
|
@ -298,9 +298,8 @@ export default function SettingsPage() {
|
||||||
const buttons = useMemo(
|
const buttons = useMemo(
|
||||||
() => [
|
() => [
|
||||||
{
|
{
|
||||||
name: soundString || "Default",
|
name: `Alarm sound: ${soundString || "Default"}`,
|
||||||
onPress: changeSound,
|
onPress: changeSound,
|
||||||
label: "Alarm sound",
|
|
||||||
},
|
},
|
||||||
{ name: "Export database", onPress: exportDatabase },
|
{ name: "Export database", onPress: exportDatabase },
|
||||||
{ name: "Import database", onPress: () => setImporting(true) },
|
{ name: "Import database", onPress: () => setImporting(true) },
|
||||||
|
@ -311,9 +310,15 @@ export default function SettingsPage() {
|
||||||
|
|
||||||
const buttonsMarkup = useMemo(
|
const buttonsMarkup = useMemo(
|
||||||
() =>
|
() =>
|
||||||
buttons
|
buttons.filter(filter).map((button) => (
|
||||||
.filter(filter)
|
<Button
|
||||||
.map((button) => <SettingButton {...button} key={button.name} />),
|
key={button.name}
|
||||||
|
style={{ alignSelf: "flex-start" }}
|
||||||
|
onPress={button.onPress}
|
||||||
|
>
|
||||||
|
{button.name}
|
||||||
|
</Button>
|
||||||
|
)),
|
||||||
[buttons, filter]
|
[buttons, filter]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -323,9 +328,8 @@ export default function SettingsPage() {
|
||||||
|
|
||||||
<Page term={term} search={setTerm} style={{ flexGrow: 1 }}>
|
<Page term={term} search={setTerm} style={{ flexGrow: 1 }}>
|
||||||
<ScrollView style={{ marginTop: MARGIN, flex: 1 }}>
|
<ScrollView style={{ marginTop: MARGIN, flex: 1 }}>
|
||||||
{switchesMarkup}
|
|
||||||
<View style={{ marginBottom: MARGIN }} />
|
|
||||||
{selectsMarkup}
|
{selectsMarkup}
|
||||||
|
{switchesMarkup}
|
||||||
{buttonsMarkup}
|
{buttonsMarkup}
|
||||||
</ScrollView>
|
</ScrollView>
|
||||||
</Page>
|
</Page>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user