mirror of
https://github.com/ente-io/ente.git
synced 2025-08-07 23:18:10 +00:00
Split
This commit is contained in:
Manav Rathi
parent
01ff0a62bc
commit
c6b1dcba87
@ -7,6 +7,7 @@ import {
|
||||
RowButtonGroup,
|
||||
RowButtonGroupHint,
|
||||
RowButtonGroupTitle,
|
||||
RowSwitch,
|
||||
} from "@/base/components/RowButton";
|
||||
import { Titlebar } from "@/base/components/Titlebar";
|
||||
import { useModalVisibility } from "@/base/components/utils/modal";
|
||||
@ -1498,11 +1499,10 @@ const ManagePublicCollect: React.FC<ManagePublicCollectProps> = ({
|
||||
return (
|
||||
<Stack>
|
||||
<RowButtonGroup>
|
||||
<RowButton
|
||||
onClick={handleFileDownloadSetting}
|
||||
variant="toggle"
|
||||
checked={publicShareProp?.enableCollect}
|
||||
<RowSwitch
|
||||
label={t("PUBLIC_COLLECT")}
|
||||
checked={publicShareProp?.enableCollect}
|
||||
onClick={handleFileDownloadSetting}
|
||||
/>
|
||||
</RowButtonGroup>
|
||||
<RowButtonGroupHint>
|
||||
@ -1777,11 +1777,10 @@ const ManageDownloadAccess: React.FC<ManageDownloadAccessProps> = ({
|
||||
});
|
||||
};
|
||||
return (
|
||||
<RowButton
|
||||
<RowSwitch
|
||||
label={t("FILE_DOWNLOAD")}
|
||||
checked={publicShareProp?.enableDownload ?? true}
|
||||
onClick={handleFileDownloadSetting}
|
||||
variant="toggle"
|
||||
label={t("FILE_DOWNLOAD")}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@ -1828,11 +1827,10 @@ const ManageLinkPassword: React.FC<ManageLinkPasswordProps> = ({
|
||||
|
||||
return (
|
||||
<>
|
||||
<RowButton
|
||||
<RowSwitch
|
||||
label={t("password_lock")}
|
||||
onClick={handlePasswordChangeSetting}
|
||||
checked={!!publicShareProp?.passwordEnabled}
|
||||
variant="toggle"
|
||||
onClick={handlePasswordChangeSetting}
|
||||
/>
|
||||
<PublicLinkSetPassword
|
||||
open={changePasswordView}
|
||||
|
||||
@ -5,6 +5,7 @@ import {
|
||||
RowButtonDivider,
|
||||
RowButtonGroup,
|
||||
RowButtonGroupTitle,
|
||||
RowSwitch,
|
||||
} from "@/base/components/RowButton";
|
||||
import { nameAndExtension } from "@/base/file-name";
|
||||
import log from "@/base/log";
|
||||
@ -1393,8 +1394,7 @@ const ColoursMenu: React.FC<ColoursMenuProps> = (props) => (
|
||||
/>
|
||||
</Box>
|
||||
<RowButtonGroup sx={{ mb: "0.5rem" }}>
|
||||
<RowButton
|
||||
variant="toggle"
|
||||
<RowSwitch
|
||||
checked={props.invert}
|
||||
label={t("invert_colors")}
|
||||
onClick={() => {
|
||||
|
||||
@ -2,6 +2,7 @@ import {
|
||||
RowButton,
|
||||
RowButtonGroup,
|
||||
RowButtonGroupHint,
|
||||
RowSwitch,
|
||||
} from "@/base/components/RowButton";
|
||||
import {
|
||||
NestedSidebarDrawer,
|
||||
@ -240,10 +241,9 @@ export const MapSettings: React.FC<NestedSidebarDrawerVisibilityProps> = ({
|
||||
|
||||
<Stack sx={{ px: "16px", py: "20px" }}>
|
||||
<RowButtonGroup>
|
||||
<RowButton
|
||||
variant="toggle"
|
||||
checked={mapEnabled}
|
||||
<RowSwitch
|
||||
label={t("enabled")}
|
||||
checked={mapEnabled}
|
||||
onClick={confirmToggle}
|
||||
/>
|
||||
</RowButtonGroup>
|
||||
@ -283,10 +283,9 @@ export const AdvancedSettings: React.FC<NestedSidebarDrawerVisibilityProps> = ({
|
||||
<Stack sx={{ px: "16px", py: "20px" }}>
|
||||
<Stack sx={{ gap: "4px" }}>
|
||||
<RowButtonGroup>
|
||||
<RowButton
|
||||
variant="toggle"
|
||||
checked={!cfUploadProxyDisabled}
|
||||
<RowSwitch
|
||||
label={t("faster_upload")}
|
||||
checked={!cfUploadProxyDisabled}
|
||||
onClick={toggle}
|
||||
/>
|
||||
</RowButtonGroup>
|
||||
|
||||
@ -139,12 +139,9 @@ interface RowButtonProps {
|
||||
*
|
||||
* - "primary" (default): A row button with a filled in background color.
|
||||
*
|
||||
* - "toggle": A variant of primary that shows a toggle button (an
|
||||
* {@link EnteSwitch}) at the trailing edge of the row button.
|
||||
*
|
||||
* - "secondary": A row button without a fill.
|
||||
*/
|
||||
variant?: "primary" | "toggle" | "secondary";
|
||||
variant?: "primary" | "secondary";
|
||||
/**
|
||||
* Color of the row button.
|
||||
*
|
||||
@ -166,21 +163,9 @@ interface RowButtonProps {
|
||||
*/
|
||||
disabled?: boolean;
|
||||
/**
|
||||
* Called when the row button, or the switch it contains, is clicked.
|
||||
*
|
||||
* - For row buttons with variant "toggle", this will be called if the user
|
||||
* toggles the value of the {@link EnteSwitch}.
|
||||
*
|
||||
* - For all other variants, this will be called when the user activates
|
||||
* (e.g. clicks) the row button itself.
|
||||
* Called when the row button is activated (e.g. by a click).
|
||||
*/
|
||||
onClick: () => void;
|
||||
/**
|
||||
* The state of the toggle associated with the row button.
|
||||
*
|
||||
* Only valid for row buttons with variant "toggle".
|
||||
*/
|
||||
checked?: boolean;
|
||||
/**
|
||||
* Optional icon shown at the leading edge of the row button.
|
||||
*
|
||||
@ -196,8 +181,6 @@ interface RowButtonProps {
|
||||
*
|
||||
* Similar to {@link startIcon} this can be any arbitrary component, though
|
||||
* usually it is an {@link SvgIcon} whose size the row button will set.
|
||||
*
|
||||
* Not used if variant is "toggle".
|
||||
*/
|
||||
endIcon?: React.ReactNode;
|
||||
/**
|
||||
@ -238,21 +221,13 @@ export const RowButton: React.FC<RowButtonProps> = ({
|
||||
color = "primary",
|
||||
fontWeight = "medium",
|
||||
disabled = false,
|
||||
checked,
|
||||
startIcon,
|
||||
endIcon,
|
||||
label,
|
||||
caption,
|
||||
onClick,
|
||||
}) => (
|
||||
<RowButtonRoot
|
||||
rbVariant={variant}
|
||||
fullWidth
|
||||
disabled={disabled}
|
||||
onClick={() => {
|
||||
if (variant != "toggle") onClick();
|
||||
}}
|
||||
>
|
||||
<RowButtonRoot rbVariant={variant} fullWidth {...{ disabled, onClick }}>
|
||||
<Stack
|
||||
direction="row"
|
||||
sx={[
|
||||
@ -291,11 +266,7 @@ export const RowButton: React.FC<RowButtonProps> = ({
|
||||
)}
|
||||
</Box>
|
||||
</Stack>
|
||||
{endIcon ? (
|
||||
endIcon
|
||||
) : variant == "toggle" ? (
|
||||
<EnteSwitch {...{ checked, onClick }} />
|
||||
) : null}
|
||||
{endIcon && endIcon}
|
||||
</Stack>
|
||||
</RowButtonRoot>
|
||||
);
|
||||
@ -327,10 +298,6 @@ const RowButtonRoot = styled(FocusVisibleButton, {
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
props: { rbVariant: "toggle" },
|
||||
style: { backgroundColor: theme.vars.palette.fill.faint },
|
||||
},
|
||||
{
|
||||
props: { rbVariant: "secondary" },
|
||||
style: {
|
||||
@ -356,3 +323,50 @@ const CaptionTypography: React.FC<
|
||||
{children}
|
||||
</Typography>
|
||||
);
|
||||
|
||||
interface RowSwitchProps {
|
||||
/**
|
||||
* The state of the contained {@link EnteSwitch}.
|
||||
*/
|
||||
checked?: boolean;
|
||||
/**
|
||||
* Called when the user activates the contained {@link EnteSwitch}.
|
||||
*/
|
||||
onClick: () => void;
|
||||
/**
|
||||
* The label for the component.
|
||||
*
|
||||
* Similar to the {@link label} prop for {@link RowButton}, but can only be
|
||||
* a string instead of an arbitrary component.
|
||||
*/
|
||||
label: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* A row that visually looks similar to a {@link RowButton}, but instead of a
|
||||
* button is a normal div with a {@link EnteSwitch} at its trailing edge.
|
||||
*
|
||||
* It only works (visually) when placed within a {@link RowButtonGroup} since
|
||||
* that is where it gets its background color from.
|
||||
*/
|
||||
export const RowSwitch: React.FC<RowSwitchProps> = ({
|
||||
checked,
|
||||
label,
|
||||
onClick,
|
||||
}) => (
|
||||
<Stack
|
||||
direction="row"
|
||||
sx={{
|
||||
flex: 1,
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
px: "16px",
|
||||
pr: "12px",
|
||||
}}
|
||||
>
|
||||
<Typography sx={{ py: "14px", px: "2px", fontWeight: "medium" }}>
|
||||
{label}
|
||||
</Typography>
|
||||
<EnteSwitch {...{ checked, onClick }} />
|
||||
</Stack>
|
||||
);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { RowButton, RowButtonGroup } from "@/base/components/RowButton";
|
||||
import { RowButtonGroup, RowSwitch } from "@/base/components/RowButton";
|
||||
import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
|
||||
import { FocusVisibleButton } from "@/base/components/mui/FocusVisibleButton";
|
||||
import {
|
||||
@ -281,8 +281,7 @@ const ManageML: React.FC<ManageMLProps> = ({ mlStatus, onDisableML }) => {
|
||||
<Stack sx={{ px: "16px", py: "20px", gap: 4 }}>
|
||||
<Stack sx={{ gap: 3 }}>
|
||||
<RowButtonGroup>
|
||||
<RowButton
|
||||
variant="toggle"
|
||||
<RowSwitch
|
||||
label={t("enabled")}
|
||||
checked={true}
|
||||
onClick={confirmDisableML}
|
||||
|
||||
@ -2,6 +2,7 @@ import {
|
||||
RowButton,
|
||||
RowButtonGroup,
|
||||
RowButtonGroupHint,
|
||||
RowSwitch,
|
||||
} from "@/base/components/RowButton";
|
||||
import { FocusVisibleButton } from "@/base/components/mui/FocusVisibleButton";
|
||||
import {
|
||||
@ -147,10 +148,9 @@ const ManageDrawerContents: React.FC<ContentsProps> = ({ onRootClose }) => {
|
||||
return (
|
||||
<Stack sx={{ px: "16px", py: "20px", gap: "24px" }}>
|
||||
<RowButtonGroup>
|
||||
<RowButton
|
||||
variant="toggle"
|
||||
checked={true}
|
||||
<RowSwitch
|
||||
label={t("enabled")}
|
||||
checked={true}
|
||||
onClick={confirmDisable}
|
||||
/>
|
||||
</RowButtonGroup>
|
||||
@ -158,7 +158,6 @@ const ManageDrawerContents: React.FC<ContentsProps> = ({ onRootClose }) => {
|
||||
<Stack>
|
||||
<RowButtonGroup>
|
||||
<RowButton
|
||||
checked={true}
|
||||
label={t("reconfigure")}
|
||||
onClick={confirmReconfigure}
|
||||
/>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user