fix: ui polish comments (#7273)
This commit is contained in:
Rishabh Saxena
GitHub
parent
116558fe8f
commit
594e0ef2e1
|
|
@ -1 +1,17 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="body_1" width="32" height="32"><g><path fill="#FFF" fill-rule="nonzero" stroke="none" d="M4 8C 4 4.13401 7.13401 1 11 1C 14.866 1 18 4.13401 18 8L18 8L18 15L11 15C 7.13401 15 4 11.866 4 8z" transform="matrix(1.4545455 0 0 1.4545455 0 0) matrix(1 0 0 1 0 0)"/><path fill="none" stroke="#E0DEDE" stroke-width=".933" d="M4.46667 8C 4.46667 4.39174 7.39174 1.46667 11 1.46667C 14.6083 1.46667 17.5333 4.39174 17.5333 8L17.5333 8L17.5333 14.5333L11 14.5333C 7.39174 14.5333 4.46667 11.6083 4.46667 8z" transform="matrix(1.4545455 0 0 1.4545455 0 0) matrix(1 0 0 1 0 0)"/></g></svg>
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d)">
|
||||
<path d="M4 8C4 4.13401 7.13401 1 11 1C14.866 1 18 4.13401 18 8L18 15L11 15C7.13401 15 4 11.866 4 8Z" fill="white"/>
|
||||
<path d="M4.46667 8C4.46667 4.39174 7.39174 1.46667 11 1.46667C14.6083 1.46667 17.5333 4.39174 17.5333 8L17.5333 14.5333L11 14.5333C7.39174 14.5333 4.46667 11.6083 4.46667 8Z" stroke="#090707" stroke-width="0.933333"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d" x="0.266667" y="0.0666668" width="21.4667" height="21.4667" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="2.8"/>
|
||||
<feGaussianBlur stdDeviation="1.86667"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 663 B After Width: | Height: | Size: 1.1 KiB |
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" fill="none" viewBox="0 0 16 17"><g clip-path="url(#clip0)"><path stroke="#A9A7A7" stroke-width="1.5" d="M7.3629 2.42747C3.69209 2.42747 0.716309 5.40325 0.716309 9.07407C0.716309 12.7449 3.69209 15.7207 7.3629 15.7207C11.0337 15.7207 14.0095 12.7449 14.0095 9.07407"/><path fill="#A9A7A7" fill-rule="evenodd" d="M9.52299 8.07707C10.1654 8.07707 10.6861 7.55631 10.6861 6.91392C10.6861 6.27152 10.1654 5.75076 9.52299 5.75076C8.8806 5.75076 8.35983 6.27152 8.35983 6.91392C8.35983 7.55631 8.8806 8.07707 9.52299 8.07707ZM5.20285 8.07708C5.84524 8.07708 6.366 7.55632 6.366 6.91393C6.366 6.27153 5.84524 5.75077 5.20285 5.75077C4.56045 5.75077 4.03969 6.27153 4.03969 6.91393C4.03969 7.55632 4.56045 8.07708 5.20285 8.07708ZM7.36285 13.062C5.52744 13.062 4.03955 11.5741 4.03955 9.73872H10.6861C10.6861 11.5741 9.19825 13.062 7.36285 13.062Z" clip-rule="evenodd"/><path stroke="#A9A7A7" stroke-width="1.2" d="M12.6743 0.499611V6.64805"/><path stroke="#A9A7A7" stroke-width="1.2" d="M15.7485 3.62524L9.6001 3.62524"/></g><defs><clipPath id="clip0"><rect width="16" height="16" fill="#fff" transform="translate(0 0.5)"/></clipPath></defs></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" fill="none" viewBox="0 0 16 17"><g clip-path="url(#clip0)"><path stroke="#A9A7A7" stroke-width="1.5" d="M7.3629 2.42747C3.69209 2.42747 0.716309 5.40325 0.716309 9.07407C0.716309 12.7449 3.69209 15.7207 7.3629 15.7207C11.0337 15.7207 14.0095 12.7449 14.0095 9.07407"/><path class="color-fill" fill="#A9A7A7" fill-rule="evenodd" d="M9.52299 8.07707C10.1654 8.07707 10.6861 7.55631 10.6861 6.91392C10.6861 6.27152 10.1654 5.75076 9.52299 5.75076C8.8806 5.75076 8.35983 6.27152 8.35983 6.91392C8.35983 7.55631 8.8806 8.07707 9.52299 8.07707ZM5.20285 8.07708C5.84524 8.07708 6.366 7.55632 6.366 6.91393C6.366 6.27153 5.84524 5.75077 5.20285 5.75077C4.56045 5.75077 4.03969 6.27153 4.03969 6.91393C4.03969 7.55632 4.56045 8.07708 5.20285 8.07708ZM7.36285 13.062C5.52744 13.062 4.03955 11.5741 4.03955 9.73872H10.6861C10.6861 11.5741 9.19825 13.062 7.36285 13.062Z" clip-rule="evenodd"/><path stroke="#A9A7A7" stroke-width="1.2" d="M12.6743 0.499611V6.64805"/><path stroke="#A9A7A7" stroke-width="1.2" d="M15.7485 3.62524L9.6001 3.62524"/></g><defs><clipPath id="clip0"><rect width="16" height="16" fill="#fff" transform="translate(0 0.5)"/></clipPath></defs></svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useEffect } from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import styled, { withTheme } from "styled-components";
|
||||
import Icon, { IconSize } from "components/ads/Icon";
|
||||
|
|
@ -17,7 +17,7 @@ import {
|
|||
} from "actions/commentActions";
|
||||
|
||||
import "@blueprintjs/popover2/lib/css/blueprint-popover2.css";
|
||||
import log from "loglevel";
|
||||
import { Colors } from "constants/Colors";
|
||||
|
||||
export const options = [
|
||||
{ label: "Show all comments", value: "show-all" },
|
||||
|
|
@ -50,7 +50,6 @@ const useSetResolvedFilterFromQuery = () => {
|
|||
useEffect(() => {
|
||||
const url = new URL(window.location.href);
|
||||
const searchParams = url.searchParams;
|
||||
log.debug(window.location.href, "window.location.href");
|
||||
if (searchParams.get("isResolved")) {
|
||||
dispatch(setShouldShowResolvedComments(true));
|
||||
}
|
||||
|
|
@ -87,27 +86,58 @@ const AppCommentsFilter = withTheme(({ theme }: { theme: Theme }) => {
|
|||
);
|
||||
});
|
||||
|
||||
const FilterIconContainer = styled.div<{ open?: boolean }>`
|
||||
padding: ${(props) => props.theme.spaces[7]}px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: ${Colors.GALLERY_1};
|
||||
svg path {
|
||||
fill: ${Colors.CHARCOAL};
|
||||
}
|
||||
}
|
||||
|
||||
${(props) =>
|
||||
props.open &&
|
||||
`
|
||||
& svg path {
|
||||
fill: ${Colors.CHARCOAL};
|
||||
}
|
||||
background-color: ${Colors.GALLERY_1};
|
||||
`}
|
||||
`;
|
||||
|
||||
function AppCommentsFilterPopover() {
|
||||
useSetResolvedFilterFromQuery();
|
||||
const [open, setIsOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<Popover2
|
||||
content={<AppCommentsFilter />}
|
||||
isOpen={open}
|
||||
modifiers={{
|
||||
offset: {
|
||||
enabled: true,
|
||||
options: {
|
||||
offset: [7, 10],
|
||||
offset: [-7, 18],
|
||||
},
|
||||
},
|
||||
preventOverflow: {
|
||||
enabled: true,
|
||||
},
|
||||
}}
|
||||
onInteraction={(nextState: boolean) => {
|
||||
setIsOpen(nextState);
|
||||
}}
|
||||
placement={"bottom-end"}
|
||||
portalClassName="comment-context-menu"
|
||||
>
|
||||
<Icon name="filter" size={IconSize.LARGE} />
|
||||
<FilterIconContainer open={open}>
|
||||
<Icon name="filter" size={IconSize.LARGE} />
|
||||
</FilterIconContainer>
|
||||
</Popover2>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,18 +6,20 @@ import { COMMENTS, createMessage } from "constants/messages";
|
|||
import AppCommentsFilterPopover from "./AppCommentsFilterPopover";
|
||||
|
||||
const AppCommentHeaderTitle = styled.div`
|
||||
padding: ${(props) => props.theme.spaces[6]}px;
|
||||
color: ${(props) => props.theme.colors.comments.appCommentsHeaderTitle};
|
||||
${(props) => getTypographyByKey(props, "h5")}
|
||||
`;
|
||||
|
||||
const Header = styled.div`
|
||||
display: flex;
|
||||
padding: ${(props) => props.theme.spaces[6]}px;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid
|
||||
${(props) => props.theme.colors.comments.appCommentsHeaderBorder};
|
||||
border-right: 1px solid
|
||||
${(props) => props.theme.colors.comments.appCommentsHeaderBorder};
|
||||
`;
|
||||
|
||||
function AppCommentsHeader() {
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ import "@blueprintjs/popover2/lib/css/blueprint-popover2.css";
|
|||
|
||||
import { Popover2 } from "@blueprintjs/popover2";
|
||||
import Tooltip from "components/ads/Tooltip";
|
||||
import { Colors } from "constants/Colors";
|
||||
|
||||
// render over popover portals
|
||||
const Container = styled.div``;
|
||||
|
|
@ -32,7 +33,11 @@ const MenuItem = styled.div`
|
|||
`;
|
||||
|
||||
const StyledIcon = styled(Icon)`
|
||||
margin-left: ${(props) => props.theme.spaces[2]}px;
|
||||
padding-left: ${(props) => props.theme.spaces[2]}px;
|
||||
&:hover svg ellipse,
|
||||
&:hover svg circle {
|
||||
fill: ${Colors.CHARCOAL};
|
||||
}
|
||||
`;
|
||||
|
||||
const MenuIcon = styled.div`
|
||||
|
|
@ -151,7 +156,7 @@ function CommentContextMenu({
|
|||
placement={"bottom-end"}
|
||||
portalClassName="comment-context-menu"
|
||||
>
|
||||
<Tooltip content={createMessage(MORE_OPTIONS)}>
|
||||
<Tooltip content={createMessage(MORE_OPTIONS)} hoverOpenDelay={1000}>
|
||||
<StyledIcon name="comment-context-menu" size={IconSize.LARGE} />
|
||||
</Tooltip>
|
||||
</Popover2>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import Icon, { IconSize } from "components/ads/Icon";
|
|||
import { Theme } from "constants/DefaultTheme";
|
||||
import Tooltip from "components/ads/Tooltip";
|
||||
import { createMessage, RESOLVE_THREAD } from "constants/messages";
|
||||
import { Colors } from "constants/Colors";
|
||||
|
||||
const Container = styled.div`
|
||||
display: flex;
|
||||
|
|
@ -17,6 +18,7 @@ type Props = {
|
|||
};
|
||||
|
||||
const StyledResolveIcon = styled(Icon)<{
|
||||
resolved: boolean;
|
||||
strokeColorCircle: string;
|
||||
strokeColorPath: string;
|
||||
fillColor: string;
|
||||
|
|
@ -31,6 +33,14 @@ const StyledResolveIcon = styled(Icon)<{
|
|||
&& svg {
|
||||
fill: ${(props) => props.fillColor};
|
||||
}
|
||||
${(props) =>
|
||||
!props.resolved &&
|
||||
`
|
||||
&:hover circle,
|
||||
&:hover path {
|
||||
stroke: ${Colors.CHARCOAL};
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
const ResolveCommentButton = withTheme(
|
||||
|
|
@ -54,11 +64,12 @@ const ResolveCommentButton = withTheme(
|
|||
|
||||
return (
|
||||
<Container onClick={_handleClick}>
|
||||
<Tooltip content={createMessage(RESOLVE_THREAD)}>
|
||||
<Tooltip content={createMessage(RESOLVE_THREAD)} hoverOpenDelay={1000}>
|
||||
<StyledResolveIcon
|
||||
fillColor={fillColor}
|
||||
keepColors
|
||||
name="oval-check"
|
||||
resolved={resolved}
|
||||
size={IconSize.XXL}
|
||||
strokeColorCircle={strokeColorCircle}
|
||||
strokeColorPath={strokeColorPath}
|
||||
|
|
|
|||
|
|
@ -241,8 +241,8 @@ function InlineCommentPin(props: Props) {
|
|||
ref={inlineCommentPinRef}
|
||||
top={top}
|
||||
topPercent={topPercent}
|
||||
xOffset={-1}
|
||||
yOffset={-6}
|
||||
xOffset={2}
|
||||
yOffset={1}
|
||||
>
|
||||
<Popover2
|
||||
autoFocus={false}
|
||||
|
|
|
|||
|
|
@ -91,8 +91,8 @@ function UnpublishedCommentThread({
|
|||
positionAbsolutely={positionAbsolutely}
|
||||
top={top}
|
||||
topPercent={topPercent}
|
||||
xOffset={-1}
|
||||
yOffset={-6}
|
||||
xOffset={2}
|
||||
yOffset={1}
|
||||
>
|
||||
<Popover2
|
||||
autoFocus={false}
|
||||
|
|
|
|||
|
|
@ -3,12 +3,24 @@ import { Picker, BaseEmoji } from "emoji-mart";
|
|||
import { Popover2 } from "@blueprintjs/popover2";
|
||||
import Icon, { IconName, IconSize } from "components/ads/Icon";
|
||||
|
||||
import { withTheme } from "styled-components";
|
||||
import styled, { withTheme } from "styled-components";
|
||||
import { Theme } from "constants/DefaultTheme";
|
||||
import "@blueprintjs/popover2/lib/css/blueprint-popover2.css";
|
||||
import "emoji-mart/css/emoji-mart.css";
|
||||
import Tooltip from "components/ads/Tooltip";
|
||||
import { ADD_REACTION, createMessage, EMOJI } from "constants/messages";
|
||||
import { Colors } from "constants/Colors";
|
||||
|
||||
const StyledIcon = styled(Icon)`
|
||||
&:hover circle,
|
||||
&:hover path {
|
||||
stroke: ${Colors.CHARCOAL};
|
||||
}
|
||||
&:hover path.color-fill {
|
||||
fill: ${Colors.CHARCOAL};
|
||||
stroke: unset;
|
||||
}
|
||||
`;
|
||||
|
||||
const EmojiPicker = withTheme(
|
||||
({
|
||||
|
|
@ -52,8 +64,11 @@ const EmojiPicker = withTheme(
|
|||
}}
|
||||
portalClassName="emoji-picker-portal"
|
||||
>
|
||||
<Tooltip content={createMessage(iconName ? ADD_REACTION : EMOJI)}>
|
||||
<Icon
|
||||
<Tooltip
|
||||
content={createMessage(iconName ? ADD_REACTION : EMOJI)}
|
||||
hoverOpenDelay={1000}
|
||||
>
|
||||
<StyledIcon
|
||||
fillColor={theme.colors.comments.emojiPicker}
|
||||
keepColors
|
||||
name={iconName || "emoji"}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { Colors } from "constants/Colors";
|
||||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
import EmojiPicker from "./EmojiPicker";
|
||||
|
|
@ -21,6 +22,14 @@ const Bubble = styled.div<{ active?: boolean }>`
|
|||
? props.theme.colors.reactionsComponent.reactionBackgroundActive
|
||||
: props.theme.colors.reactionsComponent.reactionBackground};
|
||||
|
||||
${(props) =>
|
||||
!props.active &&
|
||||
`
|
||||
&:hover {
|
||||
background-color: ${Colors.GREY_3};
|
||||
}
|
||||
`}
|
||||
|
||||
border: 1px solid
|
||||
${(props) =>
|
||||
props.active
|
||||
|
|
@ -59,6 +68,13 @@ const Count = styled.div<{ active?: boolean }>`
|
|||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
margin-left: 2px;
|
||||
${(props) =>
|
||||
!props.active &&
|
||||
`
|
||||
${Bubble}: hover & {
|
||||
color: ${Colors.GREY_9};
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
const ReactionsByContainer = styled.span`
|
||||
|
|
@ -172,7 +188,7 @@ function EmojiReactions({
|
|||
>
|
||||
<span className="emoji">{reaction.reactionEmoji}</span>
|
||||
{reaction.count > 1 && (
|
||||
<Count active={reaction.active}>{reaction.count}</Count>
|
||||
<Count active={reaction.active}>{12}</Count>
|
||||
)}
|
||||
</Bubble>
|
||||
</TooltipComponent>
|
||||
|
|
@ -180,7 +196,7 @@ function EmojiReactions({
|
|||
{!hideReactions ? (
|
||||
<Bubble>
|
||||
<EmojiPicker
|
||||
iconName="reaction"
|
||||
iconName="reaction-2"
|
||||
iconSize={iconSize}
|
||||
onSelectEmoji={(e, emoji) => handleSelectReaction(e, emoji.native)}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,6 @@ export const Colors = {
|
|||
PURE_ORANGE: "#ffb100",
|
||||
WHITE_CLOUD: "#D3DEE3",
|
||||
GOLD: "#FFD300",
|
||||
|
||||
BLACK: "#000000",
|
||||
BLACK_PEARL: "#040627",
|
||||
CODE_GRAY: "#090707",
|
||||
|
|
@ -37,6 +36,7 @@ export const Colors = {
|
|||
HIT_GRAY: "#A1ACB3",
|
||||
JUNGLE_MIST: "#BCCCD9",
|
||||
MERCURY: "#E8E8E8",
|
||||
MERCURY_1: "#E3E3E3",
|
||||
MAKO: "#464D53",
|
||||
ALTO: "#DFDFDF",
|
||||
|
||||
|
|
@ -81,6 +81,7 @@ export const Colors = {
|
|||
LIGHT_GREY: "#D4D4D4",
|
||||
LIGHT_GREY2: "#C4C4C4",
|
||||
Gallery: "#F0F0F0",
|
||||
GALLERY_1: "#EBEBEB",
|
||||
Galliano: "#E0B30E",
|
||||
ROYAL_BLUE: "#457AE6",
|
||||
ALTO2: "#E0DEDE",
|
||||
|
|
@ -126,5 +127,10 @@ export const Colors = {
|
|||
SELECT_DISABLED: "#ced9e080",
|
||||
SELECT_PLACEHOLDER: "#bfbfbf",
|
||||
SELECT_COLOR: "#182026",
|
||||
|
||||
GREY_2: "#F0F0F0",
|
||||
GREY_3: "#EBEBEB",
|
||||
GREY_8: "#716E6E",
|
||||
GREY_9: "#4B4848",
|
||||
};
|
||||
export type Color = typeof Colors[keyof typeof Colors];
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user