Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

added tooltips for all the btns in comment card (#6952)

Browse Source
This commit is contained in:
Pranav Kanade 2021-08-30 13:34:26 +05:30 committed by GitHub
parent 1021c18dd5
commit 47344bbd73
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 33 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/client/src/comments/CommentCard/CommentContextMenu.tsx
View File

@ -9,12 +9,14 @@ import {
UNPIN_COMMENT, UNPIN_COMMENT,
createMessage, createMessage,
EDIT_COMMENT, EDIT_COMMENT,
MORE_OPTIONS,
} from "constants/messages"; } from "constants/messages";
import { noop } from "lodash"; import { noop } from "lodash";
import "@blueprintjs/popover2/lib/css/blueprint-popover2.css"; import "@blueprintjs/popover2/lib/css/blueprint-popover2.css";
import { Popover2 } from "@blueprintjs/popover2"; import { Popover2 } from "@blueprintjs/popover2";
import Tooltip from "components/ads/Tooltip";
// render over popover portals // render over popover portals
const Container = styled.div``; const Container = styled.div``;
@ -149,7 +151,9 @@ function CommentContextMenu({
placement={"bottom-end"} placement={"bottom-end"}
portalClassName="comment-context-menu" portalClassName="comment-context-menu"
> >
<StyledIcon name="comment-context-menu" size={IconSize.LARGE} /> <Tooltip content={createMessage(MORE_OPTIONS)}>
<StyledIcon name="comment-context-menu" size={IconSize.LARGE} />
</Tooltip>
</Popover2> </Popover2>
); );
} }

20
app/client/src/comments/CommentCard/ResolveCommentButton.tsx
View File

@ -2,6 +2,8 @@ import React from "react";
import styled, { withTheme } from "styled-components"; import styled, { withTheme } from "styled-components";
import Icon, { IconSize } from "components/ads/Icon"; import Icon, { IconSize } from "components/ads/Icon";
import { Theme } from "constants/DefaultTheme"; import { Theme } from "constants/DefaultTheme";
import Tooltip from "components/ads/Tooltip";
import { createMessage, RESOLVE_THREAD } from "constants/messages";
const Container = styled.div` const Container = styled.div`
display: flex; display: flex;
@ -52,14 +54,16 @@ const ResolveCommentButton = withTheme(
return ( return (
<Container onClick={_handleClick}> <Container onClick={_handleClick}>
<StyledResolveIcon <Tooltip content={createMessage(RESOLVE_THREAD)}>
fillColor={fillColor} <StyledResolveIcon
keepColors fillColor={fillColor}
name="oval-check" keepColors
size={IconSize.XXL} name="oval-check"
strokeColorCircle={strokeColorCircle} size={IconSize.XXL}
strokeColorPath={strokeColorPath} strokeColorCircle={strokeColorCircle}
/> strokeColorPath={strokeColorPath}
/>
</Tooltip>
</Container> </Container>
); );
}, },

16
app/client/src/components/ads/EmojiPicker.tsx
View File

@ -7,6 +7,8 @@ import { withTheme } from "styled-components";
import { Theme } from "constants/DefaultTheme"; import { Theme } from "constants/DefaultTheme";
import "@blueprintjs/popover2/lib/css/blueprint-popover2.css"; import "@blueprintjs/popover2/lib/css/blueprint-popover2.css";
import "emoji-mart/css/emoji-mart.css"; import "emoji-mart/css/emoji-mart.css";
import Tooltip from "components/ads/Tooltip";
import { ADD_REACTION, createMessage, EMOJI } from "constants/messages";
const EmojiPicker = withTheme( const EmojiPicker = withTheme(
({ ({
@ -50,12 +52,14 @@ const EmojiPicker = withTheme(
}} }}
portalClassName="emoji-picker-portal" portalClassName="emoji-picker-portal"
> >
<Icon <Tooltip content={createMessage(iconName ? ADD_REACTION : EMOJI)}>
fillColor={theme.colors.comments.emojiPicker} <Icon
keepColors fillColor={theme.colors.comments.emojiPicker}
name={iconName || "emoji"} keepColors
size={iconSize || IconSize.XXXL} name={iconName || "emoji"}
/> size={iconSize || IconSize.XXXL}
/>
</Tooltip>
</Popover2> </Popover2>
); );
}, },

6
app/client/src/constants/messages.ts
View File

@ -469,3 +469,9 @@ export const MERGE_CHANGES = () => "Merge Changes";
export const SELECT_BRANCH_TO_MERGE = () => "Select branch to merge"; export const SELECT_BRANCH_TO_MERGE = () => "Select branch to merge";
export const DOWNLOAD_FILE_NAME_ERROR = () => "File name was not provided"; export const DOWNLOAD_FILE_NAME_ERROR = () => "File name was not provided";
// Comment card tooltips
export const MORE_OPTIONS = () => "More Options";
export const ADD_REACTION = () => "Add Reaction";
export const RESOLVE_THREAD = () => "Resolve Thread";
export const EMOJI = () => "Emoji";