filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-11-25 09:15:19 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat(Jumpers): add close button

Browse Source
This commit is contained in:
Aminejv 2022-01-21 14:04:23 +01:00 committed by Martina
parent a657d69ebc
commit 319b54ea32
5 changed files with 32 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/system/components/GlobalCarousel/jumpers/EditInfo.js
View File

@ -180,7 +180,7 @@ export function EditInfoMobile({ file, withDismissButton, onClose }) {
return (
<MobileJumper.Root onClose={onClose}>
<System.Divider height={1} color="borderGrayLight" />
<MobileJumper.ObjectInfo file={file} />
<MobileJumper.ObjectInfo file={file} onClick={onClose} />
<System.Divider height={1} color="borderGrayLight" />
<MobileJumper.Header>
<System.H5 as="p" color="textBlack">

8
components/system/components/GlobalCarousel/jumpers/EditSlates.js
View File

@ -319,7 +319,7 @@ const STYLES_SEARCH_SLATES_COLOR = (theme) => css`
color: ${theme.semantic.textGrayDark};
`;
function ComboboxSlatesInput({ appliedSlates, removeFileFromSlate, ...props }) {
function ComboboxSlatesInput({ appliedSlates, removeFileFromSlate, style, ...props }) {
const reverseAppliedSlates = React.useMemo(() => [...appliedSlates].reverse(), [appliedSlates]);
return (
@ -328,7 +328,7 @@ function ComboboxSlatesInput({ appliedSlates, removeFileFromSlate, ...props }) {
<RovingTabIndex.Provider>
<RovingTabIndex.List
css={STYLES_SLATES_INPUT_WRAPPER}
style={{ marginLeft: 6, marginTop: 6, paddingRight: 20 }}
style={{ marginLeft: 6, marginTop: 6, paddingRight: 20, ...style }}
>
{reverseAppliedSlates.map((slate, idx) => (
<RovingTabIndex.Item key={slate.id} index={idx}>
@ -740,7 +740,9 @@ export function EditSlates({ file, viewer, onClose, ...props }) {
appliedSlates={filteredSlates.applied}
removeFileFromSlate={removeFileFromSlate}
onChange={handleInputChange}
style={{ paddingRight: 24 }}
/>
<Jumper.Dismiss style={{ position: "absolute", right: 16, top: 20 }} />
</Jumper.Header>
<Jumper.Divider />
<Jumper.ObjectInfo file={file} />
@ -783,7 +785,7 @@ export function EditSlatesMobile({ file, viewer, onClose }) {
<MobileJumper.Root onClose={onClose}>
<Combobox.Provider onItemSelect={clearInputValue} isMobile>
<System.Divider height={1} color="borderGrayLight" />
<MobileJumper.ObjectInfo file={file} />
<MobileJumper.ObjectInfo file={file} onClick={onClose} />
<System.Divider height={1} color="borderGrayLight" />
<MobileJumper.Header style={{ paddingTop: 0, paddingBottom: 0, paddingRight: 0 }}>
<ComboboxSlatesInput

2
components/system/components/GlobalCarousel/jumpers/MoreInfo.js
View File

@ -394,7 +394,7 @@ export function MoreInfoMobile({ external, viewer, isOwner, file, onClose }) {
return (
<MobileJumper.Root onClose={onClose}>
<System.Divider height={1} color="borderGrayLight" />
<MobileJumper.ObjectInfo file={file} />
<MobileJumper.ObjectInfo file={file} onClick={onClose} />
<System.Divider height={1} color="borderGrayLight" />
<MobileJumper.Header>
<System.H5 as="p" color="textBlack">

2
components/system/components/GlobalCarousel/jumpers/Share.js
View File

@ -174,7 +174,7 @@ export function ShareMobile({ file, data, viewer, onClose }) {
return (
<MobileJumper.Root onClose={onClose}>
<System.Divider height={1} color="borderGrayLight" />
<MobileJumper.ObjectInfo file={file} />
<MobileJumper.ObjectInfo file={file} onClick={onClose} />
<System.Divider height={1} color="borderGrayLight" />
<MobileJumper.Header>
<System.H5 as="p" color="textBlack">

32
components/system/components/fragments/Jumper.js
View File

@ -2,6 +2,7 @@ import * as React from "react";
import * as System from "~/components/system";
import * as Styles from "~/common/styles";
import * as SVG from "~/common/svg";
import * as Tooltip from "~/components/system/components/fragments/Tooltip";
import { ModalPortal } from "~/components/core/ModalPortal";
import { css } from "@emotion/react";
@ -121,14 +122,29 @@ const Dismiss = React.forwardRef(({ css, ...props }, ref) => {
const { onClose } = useJumperContext();
return (
<System.ButtonPrimitive
ref={ref}
css={[STYLES_DISMISS_BUTTON, css]}
onClick={onClose}
{...props}
>
<SVG.Dismiss width={20} height={20} style={{ display: "block" }} />
</System.ButtonPrimitive>
<Tooltip.Root vertical="below" horizontal="center">
<Tooltip.Trigger aria-describedby="jumper-dismiss-trigger-tooltip">
<System.ButtonPrimitive
ref={ref}
css={[STYLES_DISMISS_BUTTON, css]}
onClick={onClose}
{...props}
>
<SVG.Dismiss width={20} height={20} style={{ display: "block" }} />
</System.ButtonPrimitive>
</Tooltip.Trigger>
<Tooltip.Content
style={{ marginTop: 4.5, marginLeft: -8 }}
css={Styles.HORIZONTAL_CONTAINER_CENTERED}
>
<System.H6 id="jumper-dismiss-trigger-tooltip" as="p" color="textGrayDark">
Close jumper
</System.H6>
<System.H6 as="p" color="textGray" style={{ marginLeft: 16 }}>
Esc
</System.H6>
</Tooltip.Content>
</Tooltip.Root>
);
});