kenmirrors/ente
1
0
Fork 0
mirror of https://github.com/ente-io/ente.git synced 2025-08-08 07:28:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Label

Browse Source
This commit is contained in:
Manav Rathi 2025-01-23 13:11:37 +05:30
parent c6b1dcba87
commit 312a82cea5
No known key found for this signature in database
2 changed files with 67 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,6 +7,7 @@ import {
RowButtonGroup,
RowButtonGroupHint,
RowButtonGroupTitle,
RowLabel,
RowSwitch,
} from "@/base/components/RowButton";
import { Titlebar } from "@/base/components/Titlebar";
@ -172,11 +173,9 @@ function SharingDetails({ collection, type }) {
{t("OWNER")}
</RowButtonGroupTitle>
<RowButtonGroup>
<RowButton
fontWeight="regular"
onClick={() => {}}
label={isOwner ? t("you") : ownerEmail}
<RowLabel
startIcon={<Avatar email={ownerEmail} />}
label={isOwner ? t("you") : ownerEmail}
/>
</RowButtonGroup>
</Stack>
@ -189,12 +188,10 @@ function SharingDetails({ collection, type }) {
<RowButtonGroup>
{collaborators.map((item, index) => (
<>
<RowButton
fontWeight="regular"
<RowLabel
key={item}
onClick={() => {}}
label={isMe(item) ? t("you") : item}
startIcon={<Avatar email={item} />}
label={isMe(item) ? t("you") : item}
/>
{index !== collaborators.length - 1 && (
<RowButtonDivider />
@ -212,10 +209,8 @@ function SharingDetails({ collection, type }) {
<RowButtonGroup>
{viewers.map((item, index) => (
<>
<RowButton
fontWeight="regular"
<RowLabel
key={item}
onClick={() => {}}
label={isMe(item) ? t("you") : item}
startIcon={<Avatar email={item} />}
/>
@ -381,13 +376,13 @@ const EmailShare: React.FC<EmailShareProps> = ({ collection, onRootClose }) => {
startIcon={
<AvatarGroup sharees={collection.sharees} />
}
onClick={openManageEmailShare}
label={
collection.sharees.length === 1
? collection.sharees[0]?.email
: null
}
endIcon={<ChevronRightIcon />}
onClick={openManageEmailShare}
/>
<RowButtonDivider hasIcon />
</>
@ -920,11 +915,9 @@ const ManageEmailShare: React.FC<ManageEmailShareProps> = ({
{t("OWNER")}
</RowButtonGroupTitle>
<RowButtonGroup>
<RowButton
fontWeight="regular"
onClick={() => {}}
label={isOwner ? t("you") : ownerEmail}
<RowLabel
startIcon={<Avatar email={ownerEmail} />}
label={isOwner ? t("you") : ownerEmail}
/>
</RowButtonGroup>
</Stack>

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

@ -157,6 +157,11 @@ interface RowButtonProps {
* would've entailed.
*/
color?: "primary" | "critical";
/**
* Modify the font weight of the {@link label}, when label is a string.
*
* Default: "medium".
*/
fontWeight?: TypographyProps["fontWeight"];
/**
* If true, then the row button will be disabled.
@ -245,7 +250,7 @@ export const RowButton: React.FC<RowButtonProps> = ({
>
<Stack direction="row" sx={{ py: "14px", gap: "10px" }}>
{startIcon && startIcon}
<Box px={"2px"}>
<Box sx={{ px: "2px" }}>
{typeof label !== "string" ? (
label
) : caption ? (
@ -344,7 +349,8 @@ interface RowSwitchProps {
/**
* 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.
* button is a normal {@link Typography} 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.
@ -370,3 +376,53 @@ export const RowSwitch: React.FC<RowSwitchProps> = ({
<EnteSwitch {...{ checked, onClick }} />
</Stack>
);
interface RowLabelProps {
/**
* 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 row button does not make any assumptions as to
* what this is.
*
* Unlike a {@link RowButton}, there is not sizing applied to it.
*/
startIcon?: React.ReactNode;
/**
* 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 {@link Typography}.
*
* This is useful for creating non-interactive, static, labels.
*
* It only works (visually) when placed within a {@link RowButtonGroup} since
* that is where it gets its background color from.
*/
export const RowLabel: React.FC<RowLabelProps> = ({ startIcon, label }) => (
<Stack
direction="row"
sx={{
flex: 1,
justifyContent: "space-between",
alignItems: "center",
px: "16px",
pr: "12px",
}}
>
<Stack direction="row" sx={{ py: "14px", gap: "10px" }}>
{startIcon && startIcon}
<Box sx={{ px: "2px" }}>
{/* Nb: Unlike the button, this has "regular" fontWeight. */}
<Typography>{label}</Typography>
</Box>
</Stack>
</Stack>
);