mirror of
https://github.com/streamyfin/streamyfin.git
synced 2026-06-25 23:30:33 +01:00
fix(settings): tidy spacing, uniform Android row heights & toggle layout
- spacing: top padding + inter-group gaps so section titles, descriptions and buttons no longer touch (playback buffer, audio/subtitles, music, marlin, kefin, streamystats, storage, hide-libraries) - ListGroup: skip empty section titles - SettingSwitch: cap the native Android switch in a fixed centered box so toggle rows match the other rows and stay put when toggled; iOS unchanged - Appearance: move "Hide libraries" to the end of the list
This commit is contained in:
40
components/common/SettingSwitch.tsx
Normal file
40
components/common/SettingSwitch.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
import type React from "react";
|
||||
import { Platform, Switch, type SwitchProps, View } from "react-native";
|
||||
|
||||
/**
|
||||
* Settings toggle. Android's native Switch lays out ~40px tall / ~56px wide and
|
||||
* inflates list rows (iOS renders it ~31px). A plain `transform: scale` is
|
||||
* visual-only and does NOT shrink the layout box, so we pin the Switch inside a
|
||||
* FIXED-SIZE box (overflow hidden) and center it:
|
||||
* - the fixed height caps the row height (compact, uniform rows),
|
||||
* - the fixed width + centering keep the switch in the exact same spot in the
|
||||
* on/off states (a non-fixed wrapper let its width fluctuate between states,
|
||||
* which shifted the switch sideways on toggle).
|
||||
* iOS renders the switch untouched.
|
||||
*
|
||||
* Tunables: BOX_H drives the row height; SCALE shrinks the visual to fit the
|
||||
* box; keep BOX_W >= scaled visual width to avoid clipping the switch sideways.
|
||||
*/
|
||||
const BOX_W = 40;
|
||||
const BOX_H = 30;
|
||||
const SCALE = 0.9;
|
||||
|
||||
export const SettingSwitch: React.FC<SwitchProps> = (props) => {
|
||||
if (Platform.OS !== "android") return <Switch {...props} />;
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
width: BOX_W,
|
||||
height: BOX_H,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<Switch
|
||||
{...props}
|
||||
style={[props.style, { transform: [{ scale: SCALE }] }]}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user