Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: explicitly set tooltip positions #48

Merged
merged 3 commits into from
Sep 18, 2024
Merged

feat: explicitly set tooltip positions #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fb47d73
refactor: revert sidebar button size
setchy Sep 17, 2024
cff8889
feat: improve tooltip positions
setchy Sep 18, 2024
2f6b9da
Merge branch 'main' into revert/sidebar-button-size
setchy Sep 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 53 additions & 41 deletions src/components/AccountNotifications.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ export const AccountNotifications: FC<IAccountNotifications> = (
>
<Flex alignItems="center" justifyContent="space-between">
<Inline space="space.100" alignBlock="center">
<Tooltip content="Open account profile">
<Tooltip content="Open account profile" position="right">
<AvatarItem
avatar={
<Avatar
Expand All @@ -108,46 +108,58 @@ export const AccountNotifications: FC<IAccountNotifications> = (
</Inline>

<Inline space="space.100">
<IconButton
label="My pull requests"
title="My pull requests"
icon={(iconProps) => (
<BitbucketIcon {...iconProps} size="xsmall" />
)}
shape="circle"
spacing="compact"
appearance="subtle"
onClick={(event: MouseEvent<HTMLElement>) => {
// Don't trigger onClick of parent element.
event.stopPropagation();
openMyPullRequests();
}}
/>

<IconButton
label="Mark all account notifications as read"
title="Mark all account notifications as read"
icon={(iconProps) => (
<HipchatMediaAttachmentCountIcon {...iconProps} size="small" />
)}
shape="circle"
spacing="compact"
appearance="subtle"
onClick={(event: MouseEvent<HTMLElement>) => {
// Don't trigger onClick of parent element.
event.stopPropagation();
markNotificationsAsRead(account, accountNotificationIDs);
}}
/>

<IconButton
label={toggleAccountNotificationsLabel}
title={toggleAccountNotificationsLabel}
icon={ChevronIcon}
shape="circle"
spacing="compact"
appearance="subtle"
/>
<Tooltip content="My pull requests" position="bottom">
<IconButton
label="My pull requests"
icon={(iconProps) => (
<BitbucketIcon {...iconProps} size="xsmall" />
)}
shape="circle"
spacing="compact"
appearance="subtle"
onClick={(event: MouseEvent<HTMLElement>) => {
// Don't trigger onClick of parent element.
event.stopPropagation();
openMyPullRequests();
}}
/>
</Tooltip>

<Tooltip
content="Mark all account notifications as read"
position="bottom"
>
<IconButton
label="Mark all account notifications as read"
icon={(iconProps) => (
<HipchatMediaAttachmentCountIcon
{...iconProps}
size="small"
/>
)}
shape="circle"
spacing="compact"
appearance="subtle"
onClick={(event: MouseEvent<HTMLElement>) => {
// Don't trigger onClick of parent element.
event.stopPropagation();
markNotificationsAsRead(account, accountNotificationIDs);
}}
/>
</Tooltip>

<Tooltip
content={toggleAccountNotificationsLabel}
position="bottom"
>
<IconButton
label={toggleAccountNotificationsLabel}
icon={ChevronIcon}
shape="circle"
spacing="compact"
appearance="subtle"
/>
</Tooltip>
</Inline>
</Flex>
</Box>
Expand Down
36 changes: 19 additions & 17 deletions src/components/NotificationRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,14 +62,14 @@ export const NotificationRow: FC<INotificationRow> = ({
>
<div className="mr-3 flex items-center justify-center">
<Stack space="space.100" alignInline="center">
<Tooltip content={notification.actor.displayName}>
<Tooltip content={notification.actor.displayName} position="right">
<Avatar
name={notification.actor.displayName}
src={notification.actor.avatarURL}
size="small"
/>
</Tooltip>
<Tooltip content={categoryDetails.description}>
<Tooltip content={categoryDetails.description} position="right">
<CategoryIcon {...CategoryIconProps} />
</Tooltip>
</Stack>
Expand Down Expand Up @@ -123,21 +123,23 @@ export const NotificationRow: FC<INotificationRow> = ({

{!animateExit && !isRead && notification.unread && (
<Flex alignItems="center">
<IconButton
label="Mark as read"
title="Mark as read"
icon={(iconProps) => (
<HipchatMediaAttachmentCountIcon {...iconProps} size="small" />
)}
shape="circle"
spacing="compact"
appearance="subtle"
onClick={() => {
setAnimateExit(!settings.delayNotificationState);
setShowAsRead(settings.delayNotificationState);
markNotificationRead(notification);
}}
/>
<Tooltip content="Mark as read" position="left">
<IconButton
label="Mark as read"
title="Mark as read"
icon={(iconProps) => (
<HipchatMediaAttachmentCountIcon {...iconProps} size="small" />
)}
shape="circle"
spacing="compact"
appearance="subtle"
onClick={() => {
setAnimateExit(!settings.delayNotificationState);
setShowAsRead(settings.delayNotificationState);
markNotificationRead(notification);
}}
/>
</Tooltip>
</Flex>
)}
</div>
Expand Down
68 changes: 40 additions & 28 deletions src/components/ProductNotifications.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import ChevronRightIcon from '@atlaskit/icon/glyph/chevron-right';
import HipchatMediaAttachmentCountIcon from '@atlaskit/icon/glyph/hipchat/media-attachment-count';
import { Box, Flex, Inline, Stack } from '@atlaskit/primitives';

import Tooltip from '@atlaskit/tooltip';
import { AppContext } from '../context/App';
import type { AtlasifyNotification } from '../types';
import { markNotificationsAsRead } from '../utils/api/client';
Expand Down Expand Up @@ -75,35 +76,46 @@ export const ProductNotifications: FC<IProductNotifications> = ({
</Button>

<Inline space="space.100">
<IconButton
label="Mark all product notifications as read"
title="Mark all product notifications as read"
icon={(iconProps) => (
<HipchatMediaAttachmentCountIcon {...iconProps} size="small" />
)}
shape="circle"
spacing="compact"
appearance="subtle"
onClick={(event: MouseEvent<HTMLElement>) => {
// Don't trigger onClick of parent element.
event.stopPropagation();
setAnimateExit(!settings.delayNotificationState);
setShowAsRead(settings.delayNotificationState);
markNotificationsAsRead(
productNotifications[0].account,
productNotificationIDs,
);
}}
/>
<Tooltip
content="Mark all product notifications as read"
position="bottom"
>
<IconButton
label="Mark all product notifications as read"
icon={(iconProps) => (
<HipchatMediaAttachmentCountIcon
{...iconProps}
size="small"
/>
)}
shape="circle"
spacing="compact"
appearance="subtle"
onClick={(event: MouseEvent<HTMLElement>) => {
// Don't trigger onClick of parent element.
event.stopPropagation();
setAnimateExit(!settings.delayNotificationState);
setShowAsRead(settings.delayNotificationState);
markNotificationsAsRead(
productNotifications[0].account,
productNotificationIDs,
);
}}
/>
</Tooltip>

<IconButton
label={toggleProductNotificationsLabel}
title={toggleProductNotificationsLabel}
icon={ChevronIcon}
shape="circle"
spacing="compact"
appearance="subtle"
/>
<Tooltip
content={toggleProductNotificationsLabel}
position="bottom"
>
<IconButton
label={toggleProductNotificationsLabel}
icon={ChevronIcon}
shape="circle"
spacing="compact"
appearance="subtle"
/>
</Tooltip>
</Inline>
</Flex>
</Box>
Expand Down
Loading
Loading