TerribleDev/ente
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reduce variants

Browse Source
This commit is contained in:
Manav Rathi
2025-01-23 11:04:19 +05:30
parent 105878c3b5
commit c082c542ef
9 changed files with 96 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/apps/accounts/src/pages/passkeys/index.tsx
View File

@@ -196,7 +196,6 @@ const PasskeyListItem: React.FC<PasskeyListItemProps> = ({
onClick,
}) => (
<RowButton
onClick={() => onClick(passkey)}
startIcon={<KeyIcon />}
endIcon={<ChevronRightIcon />}
label={
@@ -206,6 +205,7 @@ const PasskeyListItem: React.FC<PasskeyListItemProps> = ({
</Typography>
</PasskeyLabel>
}
onClick={() => onClick(passkey)}
/>
);
@@ -294,16 +294,16 @@ const ManagePasskeyDrawer: React.FC<ManagePasskeyDrawerProps> = ({
</CreatedAtEntry>
<RowButtonGroup>
<RowButton
onClick={showRenameDialog}
startIcon={<EditIcon />}
label={t("rename_passkey")}
onClick={showRenameDialog}
/>
<RowButtonDivider />
<RowButton
onClick={showDeleteConfirmationDialog}
color="critical"
startIcon={<DeleteIcon />}
label={t("delete_passkey")}
color="critical"
onClick={showDeleteConfirmationDialog}
/>
</RowButtonGroup>
</Stack>

2
web/apps/photos/src/components/Collections/CollectionShare.tsx
View File

@@ -1563,7 +1563,6 @@ const ManageLinkExpiry: React.FC<ManageLinkExpiryProps> = ({
<RowButton
onClick={openShareExpiryOptionsModalView}
endIcon={<ChevronRightIcon />}
variant="captioned"
label={t("LINK_EXPIRY")}
color={
isLinkExpired(publicShareProp?.validTill)
@@ -1693,7 +1692,6 @@ const ManageDeviceLimit: React.FC<ManageDeviceLimitProps> = ({
<>
<RowButton
label={t("LINK_DEVICE_LIMIT")}
variant="captioned"
caption={
publicShareProp.deviceLimit === 0
? t("NO_DEVICE_LIMIT")

34
web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay.tsx
View File

@@ -676,10 +676,8 @@ export const ImageEditorOverlay: React.FC<ImageEditorOverlayProps> = (
<RowButton
disabled={canvasLoading}
startIcon={<CropOriginalIcon />}
onClick={() => {
loadCanvas();
}}
label={t("restore_original")}
onClick={() => void loadCanvas()}
/>
</RowButtonGroup>
{currentTab === "crop" && (
@@ -709,17 +707,17 @@ export const ImageEditorOverlay: React.FC<ImageEditorOverlayProps> = (
<RowButtonGroupTitle>{t("export_data")}</RowButtonGroupTitle>
<RowButtonGroup>
<RowButton
startIcon={<DownloadIcon />}
onClick={downloadEditedPhoto}
label={t("download_edited")}
disabled={!transformationPerformed && !coloursAdjusted}
startIcon={<DownloadIcon />}
label={t("download_edited")}
onClick={downloadEditedPhoto}
/>
<RowButtonDivider />
<RowButton
startIcon={<CloudUploadIcon />}
onClick={saveCopyToEnte}
label={t("save_a_copy_to_ente")}
disabled={!transformationPerformed && !coloursAdjusted}
startIcon={<CloudUploadIcon />}
label={t("save_a_copy_to_ente")}
onClick={saveCopyToEnte}
/>
</RowButtonGroup>
{!transformationPerformed && !coloursAdjusted && (
@@ -829,6 +827,7 @@ const CropMenu: React.FC<CropMenuProps> = (props) => {
<RowButton
disabled={canvasLoading}
startIcon={<CropIcon />}
label={t("apply_crop")}
onClick={() => {
if (!props.cropBoxRef.current || !canvasRef.current)
return;
@@ -852,7 +851,6 @@ const CropMenu: React.FC<CropMenuProps> = (props) => {
setCurrentTab("transform");
}}
label={t("apply_crop")}
/>
</RowButtonGroup>
</>
@@ -1237,8 +1235,8 @@ const TransformMenu: React.FC<CommonMenuProps> = ({
<RowButton
disabled={canvasLoading}
startIcon={<CropSquareIcon />}
onClick={createCropHandler(1, 1)}
label={t("square") + " (1:1)"}
onClick={createCropHandler(1, 1)}
/>
</RowButtonGroup>
<RowButtonGroup sx={{ mb: "1rem" }}>
@@ -1247,11 +1245,11 @@ const TransformMenu: React.FC<CommonMenuProps> = ({
<RowButton
disabled={canvasLoading}
startIcon={ratio.icon}
label={`${ratio.width}:${ratio.height}`}
onClick={createCropHandler(
ratio.width,
ratio.height,
)}
label={`${ratio.width}:${ratio.height}`}
/>
{index !== PRESET_ASPECT_RATIOS.length - 1 && (
<RowButtonDivider />
@@ -1263,14 +1261,14 @@ const TransformMenu: React.FC<CommonMenuProps> = ({
{PRESET_ASPECT_RATIOS.map((ratio, index) => (
<Fragment key={index}>
<RowButton
disabled={canvasLoading}
key={index}
disabled={canvasLoading}
startIcon={ratio.icon}
label={`${ratio.height}:${ratio.width}`}
onClick={createCropHandler(
ratio.height,
ratio.width,
)}
label={`${ratio.height}:${ratio.width}`}
/>
{index !== PRESET_ASPECT_RATIOS.length - 1 && (
<RowButtonDivider />
@@ -1283,15 +1281,15 @@ const TransformMenu: React.FC<CommonMenuProps> = ({
<RowButton
disabled={canvasLoading}
startIcon={<RotateLeftIcon />}
onClick={createRotationHandler("left")}
label={t("rotate_left") + " 90˚"}
onClick={createRotationHandler("left")}
/>
<RowButtonDivider />
<RowButton
disabled={canvasLoading}
startIcon={<RotateRightIcon />}
onClick={createRotationHandler("right")}
label={t("rotate_right") + " 90˚"}
onClick={createRotationHandler("right")}
/>
</RowButtonGroup>
<RowButtonGroupTitle>{t("flip")}</RowButtonGroupTitle>
@@ -1301,15 +1299,15 @@ const TransformMenu: React.FC<CommonMenuProps> = ({
startIcon={
<FlipIcon style={{ transform: "rotateZ(90deg)" }} />
}
onClick={createFlipCanvasHandler("vertical")}
label={t("flip_vertically")}
onClick={createFlipCanvasHandler("vertical")}
/>
<RowButtonDivider />
<RowButton
disabled={canvasLoading}
startIcon={<FlipIcon />}
onClick={createFlipCanvasHandler("horizontal")}
label={t("flip_horizontally")}
onClick={createFlipCanvasHandler("horizontal")}
/>
</RowButtonGroup>
</>

10
web/apps/photos/src/components/Sidebar/Preferences.tsx
View File

@@ -75,20 +75,20 @@ export const Preferences: React.FC<NestedSidebarDrawerVisibilityProps> = ({
<RowButtonGroup>
<RowButton
endIcon={<ChevronRightIcon />}
onClick={showMLSettings}
label={t("ml_search")}
onClick={showMLSettings}
/>
</RowButtonGroup>
)}
<RowButton
onClick={showMapSettings}
endIcon={<ChevronRightIcon />}
label={t("map")}
onClick={showMapSettings}
/>
<RowButton
onClick={showAdvancedSettings}
endIcon={<ChevronRightIcon />}
label={t("advanced")}
onClick={showAdvancedSettings}
/>
</Stack>
</Stack>
@@ -241,10 +241,10 @@ export const MapSettings: React.FC<NestedSidebarDrawerVisibilityProps> = ({
<Stack sx={{ px: "16px", py: "20px" }}>
<RowButtonGroup>
<RowButton
onClick={confirmToggle}
variant="toggle"
checked={mapEnabled}
label={t("enabled")}
onClick={confirmToggle}
/>
</RowButtonGroup>
</Stack>
@@ -286,8 +286,8 @@ export const AdvancedSettings: React.FC<NestedSidebarDrawerVisibilityProps> = ({
<RowButton
variant="toggle"
checked={!cfUploadProxyDisabled}
onClick={toggle}
label={t("faster_upload")}
onClick={toggle}
/>
</RowButtonGroup>
<RowButtonGroupHint>

48
web/apps/photos/src/components/Sidebar/index.tsx
View File

@@ -435,26 +435,22 @@ const ShortcutSection: React.FC<ShortcutSectionProps> = ({
<>
<RowButton
startIcon={<CategoryIcon />}
onClick={openUncategorizedSection}
variant="captioned"
label={t("section_uncategorized")}
caption={collectionSummaries
.get(uncategorizedCollectionId)
?.fileCount.toString()}
onClick={openUncategorizedSection}
/>
<RowButton
startIcon={<ArchiveOutlinedIcon />}
onClick={openArchiveSection}
variant="captioned"
label={t("section_archive")}
caption={collectionSummaries
.get(ARCHIVE_SECTION)
?.fileCount.toString()}
onClick={openArchiveSection}
/>
<RowButton
startIcon={<VisibilityOffIcon />}
onClick={openHiddenSection}
variant="captioned"
label={t("section_hidden")}
caption={
<LockOutlinedIcon
@@ -464,15 +460,15 @@ const ShortcutSection: React.FC<ShortcutSectionProps> = ({
}}
/>
}
onClick={openHiddenSection}
/>
<RowButton
startIcon={<DeleteOutlineIcon />}
onClick={openTrashSection}
variant="captioned"
label={t("section_trash")}
caption={collectionSummaries
.get(TRASH_SECTION)
?.fileCount.toString()}
onClick={openTrashSection}
/>
</>
);
@@ -515,45 +511,45 @@ const UtilitySection: React.FC<UtilitySectionProps> = ({ closeSidebar }) => {
<>
{isDesktop && (
<RowButton
onClick={showWatchFolder}
variant="secondary"
label={t("watch_folders")}
onClick={showWatchFolder}
/>
)}
<RowButton
variant="secondary"
onClick={showRecoveryKey}
label={t("recovery_key")}
onClick={showRecoveryKey}
/>
<RowButton
variant="secondary"
onClick={showTwoFactor}
label={t("two_factor")}
onClick={showTwoFactor}
/>
<RowButton
variant="secondary"
onClick={redirectToAccountsPage}
label={t("passkeys")}
onClick={redirectToAccountsPage}
/>
<RowButton
variant="secondary"
onClick={redirectToChangePasswordPage}
label={t("change_password")}
onClick={redirectToChangePasswordPage}
/>
<RowButton
variant="secondary"
onClick={handleChangeEmail}
label={t("change_email")}
onClick={handleChangeEmail}
/>
<RowButton
variant="secondary"
onClick={handleDeduplicate}
label={t("deduplicate_files")}
onClick={handleDeduplicate}
/>
<RowButton
variant="secondary"
onClick={showPreferences}
label={t("preferences")}
onClick={showPreferences}
/>
<RecoveryKey
@@ -595,12 +591,12 @@ const HelpSection: React.FC = () => {
return (
<>
<RowButton
onClick={requestFeature}
label={t("request_feature")}
variant="secondary"
label={t("request_feature")}
onClick={requestFeature}
/>
<RowButton
onClick={contactSupport}
variant="secondary"
label={
<Tooltip title="support@ente.io">
<Typography sx={{ fontWeight: "medium" }}>
@@ -608,17 +604,17 @@ const HelpSection: React.FC = () => {
</Typography>
</Tooltip>
}
variant="secondary"
onClick={contactSupport}
/>
<RowButton
onClick={handleExport}
variant="secondary"
label={t("export_data")}
endIcon={
exportService.isExportInProgress() && (
<ActivityIndicator size="20px" />
)
}
variant="secondary"
onClick={handleExport}
/>
</>
);
@@ -640,15 +636,15 @@ const ExitSection: React.FC = () => {
return (
<>
<RowButton
onClick={handleLogout}
variant="secondary"
color="critical"
label={t("logout")}
variant="secondary"
onClick={handleLogout}
/>
<RowButton
onClick={showDeleteAccount}
color="critical"
variant="secondary"
color="critical"
onClick={showDeleteAccount}
label={t("delete_account")}
/>
<DeleteAccountModal {...deleteAccountVisibilityProps} />

6
web/apps/photos/src/components/Upload/UploadTypeSelector.tsx
View File

@@ -177,24 +177,24 @@ const DefaultOptions: React.FC<OptionsProps> = ({
<Stack spacing={0.5}>
{intent != "import" && (
<RowButton
onClick={() => onSelect("files")}
startIcon={<ImageOutlinedIcon />}
endIcon={<ChevronRightIcon />}
label={t("file")}
onClick={() => onSelect("files")}
/>
)}
<RowButton
onClick={() => onSelect("folders")}
startIcon={<PermMediaOutlinedIcon />}
endIcon={<ChevronRightIcon />}
label={t("folder")}
onClick={() => onSelect("folders")}
/>
{intent !== "collect" && (
<RowButton
onClick={() => onSelect("zips")}
startIcon={<GoogleIcon />}
endIcon={<ChevronRightIcon />}
label={t("google_takeout")}
onClick={() => onSelect("zips")}
/>
)}
</Stack>

94
web/packages/base/components/RowButton.tsx
View File

@@ -86,8 +86,12 @@ export const RowButtonDivider: React.FC<RowButtonDividerProps> = ({
*
* {@link RowButtonDivider} can be used to to separate the individual buttons in
* the group.
*
* ---
*
* Note: {@link RowButtonGroup} is not designed to work with the "secondary"
* variant of {@link RowButton}.
*/
export const RowButtonGroup = styled("div")(
({ theme }) => `
// & > .MuiMenuItem-root{
@@ -111,65 +115,65 @@ interface RowButtonProps {
/**
* Variants:
*
* - "primary" (default): A menu item with a filled in background color.
*
* - "captioned": A variant of primary with an associated {@link caption})
* shown alongside the main {@link label}, separated from it by a bullet.
* - "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 menu item.
* {@link EnteSwitch}) at the trailing edge of the row button.
*
* - "secondary": A menu item without a fill.
*
* - "mini": A variant of secondary with a smaller font.
* - "secondary": A row button without a fill.
*/
variant?: "primary" | "captioned" | "toggle" | "secondary";
variant?: "primary" | "toggle" | "secondary";
/**
* Color of the menu item.
* Color of the row button.
*
* Semantically, this is similar to the "color" props for a MUI button,
* except we only support two cases for this menu item component:
* except we only support two cases for this row button component:
*
* - "primary" (default): A menu item that uses "text.base" as the color of
* - "primary" (default): A row button that uses "text.base" as the color of
* the text (and an approprite background color, if needed, based on the
* value of the "variant").
* value of the {@link variant}).
*
* - "critical": A menu item that uses "critical.main" as the color of the
* text. The background fill, if any, will be the same as color "primary".
* - "critical": A row button that uses "critical.main" as the color of the
* text. The background fill, if any, will be the same as what "primary"
* would've entailed.
*/
color?: "primary" | "critical";
fontWeight?: TypographyProps["fontWeight"];
/**
* Called when the menu item, or the switch it contains, is clicked.
* If true, then the row button will be disabled.
*/
disabled?: boolean;
/**
* Called when the row button, or the switch it contains, is clicked.
*
* - For menu items with variant "toggle", this will be called if the user
* - 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 menu item itself.
* (e.g. clicks) the row button itself.
*/
onClick: () => void;
/**
* The state of the toggle associated with the menu item.
* The state of the toggle associated with the row button.
*
* Only valid for menu items with variant "toggle".
* Only valid for row buttons with variant "toggle".
*/
checked?: boolean;
/**
* Optional icon shown at the leading edge of the menu item.
* Optional icon shown at the leading edge of the row button.
*
* This is usually an icon like an {@link SvgIcon}, but it can be any
* arbitrary component, the menu item does not make any assumptions as to
* arbitrary component, the row button does not make any assumptions as to
* what this is.
*
* If it is an {@link SvgIcon}, the menu item will size it appropriately.
* If it is an {@link SvgIcon}, the row button will size it appropriately.
*/
startIcon?: React.ReactNode;
/**
* Optional icon shown at the trailing edge of the menu item.
* Optional icon shown at the trailing edge of the row button.
*
* Similar to {@link startIcon} this can be any arbitrary component, though
* usually it is an {@link SvgIcon} whose size the menu item will set.
* usually it is an {@link SvgIcon} whose size the row button will set.
*
* Not used if variant is "toggle".
*/
@@ -178,29 +182,28 @@ interface RowButtonProps {
* The label for the component.
*
* Usually this is expected to be a string, in which case it is wrapped up
* in an appropriate {@link Typography} and shown on the menu item. But it
* in an appropriate {@link Typography} and shown on the row button. But it
* can be an arbitrary react component too, to allow customizing its
* appearance or otherwise modifying it in one off cases (it will be used as
* it is and not wrapped in a {@link Typography} if it is not a string).
*/
label: React.ReactNode;
/**
* The text (or icon) to show alongside the {@link label} when the variant
* is "captioned".
* The text (or icon) to show alongside {@link label}, separated from it by
* a bullet.
*
* This is usually expected to be a string, in which case it is wrapped in a
* {@link Typography} component before being rendered. However, it can also
* be an {@link SvgIcon} (or any an arbitrary component), though in terms of
* styling, only an {@link SvgIcon} usually makes sense.
* {@link Typography} component and styled with a muted text color before
* being rendered.
*
* Similar to {@link label}, it will not be wrapped in a {@link Typography}
* However, it can also be an {@link SvgIcon} (or any an arbitrary
* component), though in terms of styling, only an {@link SvgIcon} usually
* makes sense.
*
* Similar to {@link label}, it will not be wrapped in a {@link Typography}
* if it is not a string.
*/
caption?: React.ReactNode;
/**
* If true, then the menu item will be disabled.
*/
disabled?: boolean;
}
/**
@@ -212,13 +215,13 @@ export const RowButton: React.FC<RowButtonProps> = ({
variant = "primary",
color = "primary",
fontWeight = "medium",
onClick,
disabled = false,
checked,
startIcon,
endIcon,
label,
caption,
disabled = false,
onClick,
}) => (
<RowButtonRoot
rbVariant={variant}
@@ -227,8 +230,6 @@ export const RowButton: React.FC<RowButtonProps> = ({
onClick={() => {
if (variant != "toggle") onClick();
}}
// sx={[
// borderRadius: "4px",
>
<Stack
direction="row"
@@ -249,7 +250,7 @@ export const RowButton: React.FC<RowButtonProps> = ({
<Box px={"2px"}>
{typeof label !== "string" ? (
label
) : variant == "captioned" ? (
) : caption ? (
<Stack
direction="row"
sx={{ gap: "4px", alignItems: "center" }}
@@ -303,15 +304,6 @@ const RowButtonRoot = styled(FocusVisibleButton, {
},
},
},
{
props: { rbVariant: "captioned" },
style: {
backgroundColor: theme.vars.palette.fill.faint,
"&:hover": {
backgroundColor: theme.vars.palette.fill.muted,
},
},
},
{
props: { rbVariant: "toggle" },
style: { backgroundColor: theme.vars.palette.fill.faint },

2
web/packages/new/photos/components/sidebar/MLSettings.tsx
View File

@@ -282,8 +282,8 @@ const ManageML: React.FC<ManageMLProps> = ({ mlStatus, onDisableML }) => {
<Stack sx={{ gap: 3 }}>
<RowButtonGroup>
<RowButton
label={t("enabled")}
variant="toggle"
label={t("enabled")}
checked={true}
onClick={confirmDisableML}
/>

5
web/packages/new/photos/components/sidebar/TwoFactorSettings.tsx
View File

@@ -148,20 +148,19 @@ const ManageDrawerContents: React.FC<ContentsProps> = ({ onRootClose }) => {
<Stack sx={{ px: "16px", py: "20px", gap: "24px" }}>
<RowButtonGroup>
<RowButton
onClick={confirmDisable}
variant="toggle"
checked={true}
label={t("enabled")}
onClick={confirmDisable}
/>
</RowButtonGroup>
<Stack>
<RowButtonGroup>
<RowButton
onClick={confirmReconfigure}
variant="primary"
checked={true}
label={t("reconfigure")}
onClick={confirmReconfigure}
/>
</RowButtonGroup>
<RowButtonGroupHint>