From 6ee28950be17e7edfb53572fd1cad4d8d931c2db Mon Sep 17 00:00:00 2001 From: Rishabh Saxena Date: Mon, 2 Aug 2021 12:57:20 +0530 Subject: [PATCH] Minor comments feature fixes (#6245) --- .../comments-onboarding/thumbnails/step-1.jpg | Bin 0 -> 18973 bytes .../comments-onboarding/thumbnails/step-2.jpg | Bin 0 -> 18609 bytes .../src/comments/CommentCard/CommentCard.tsx | 6 ++ .../CommentsCarouselModal.tsx | 6 +- .../CommentsShowcaseCarousel/index.tsx | 34 ++++++++--- .../inlineComments/InlineCommentPin.tsx | 1 - .../src/comments/tour/commentsTourSteps.ts | 2 +- .../src/components/ads/DisplayImageUpload.tsx | 1 - .../src/components/ads/EmojiReactions.tsx | 10 +-- .../src/components/ads/ProgressiveImage.tsx | 57 ++++++++++++++++++ app/client/src/globalStyles/uppy.ts | 16 +++++ .../src/pages/Editor/ToggleModeButton.tsx | 1 + .../commentsReducer/commentsReducer.ts | 1 - 13 files changed, 118 insertions(+), 17 deletions(-) create mode 100644 app/client/src/assets/images/comments-onboarding/thumbnails/step-1.jpg create mode 100644 app/client/src/assets/images/comments-onboarding/thumbnails/step-2.jpg create mode 100644 app/client/src/components/ads/ProgressiveImage.tsx diff --git a/app/client/src/assets/images/comments-onboarding/thumbnails/step-1.jpg b/app/client/src/assets/images/comments-onboarding/thumbnails/step-1.jpg new file mode 100644 index 0000000000000000000000000000000000000000..48d2fa141f5db1e899ab2a376b88f13007a84fba GIT binary patch literal 18973 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 literal 0 HcmV?d00001 diff --git a/app/client/src/assets/images/comments-onboarding/thumbnails/step-2.jpg b/app/client/src/assets/images/comments-onboarding/thumbnails/step-2.jpg new file mode 100644 index 0000000000000000000000000000000000000000..72c3e4cdbb7081dfa6bdbb13166181bca3e966bb GIT binary patch literal 18609 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 yX!SSu4X{Tjt-ZwtG(g@ { - // TODO (rishabh) handle close + dispatch(hideCommentsIntroCarousel()); }} overlayClassName="comments-onboarding-carousel" portalClassName="comments-onboarding-carousel-portal" diff --git a/app/client/src/comments/CommentsShowcaseCarousel/index.tsx b/app/client/src/comments/CommentsShowcaseCarousel/index.tsx index 61bf723071..c5828137f1 100644 --- a/app/client/src/comments/CommentsShowcaseCarousel/index.tsx +++ b/app/client/src/comments/CommentsShowcaseCarousel/index.tsx @@ -4,6 +4,9 @@ import Text, { TextType } from "components/ads/Text"; import ShowcaseCarousel, { Steps } from "components/ads/ShowcaseCarousel"; import ProfileForm, { PROFILE_FORM } from "./ProfileForm"; import CommentsCarouselModal from "./CommentsCarouselModal"; +import ProgressiveImage, { + Container as ProgressiveImageContainer, +} from "components/ads/ProgressiveImage"; import styled, { withTheme } from "styled-components"; import { Theme } from "constants/DefaultTheme"; @@ -27,6 +30,9 @@ import { getCurrentAppOrg } from "selectors/organizationSelectors"; import useOrg from "utils/hooks/useOrg"; import { getCanManage } from "utils/helpers"; +import stepOneThumbnail from "assets/images/comments-onboarding/thumbnails/step-1.jpg"; +import stepTwoThumbnail from "assets/images/comments-onboarding/thumbnails/step-2.jpg"; + const getBanner = (step: number) => `${S3_BUCKET_URL}/comments/step-${step}.png`; @@ -36,15 +42,15 @@ const introStepsEditor = [ content: "You can now collaborate with your users to build apps faster. Invite your team to comment on your apps, exchange thoughts & ship your ideas.", banner: getBanner(1), + bannerThumbnail: stepOneThumbnail, hideBackBtn: true, - bannerProps: { style: { height: 284 } }, }, { title: "Give Contextual Feedback", content: "Drop a comment on a widget to suggest an improvement. Comments are tagged to the widget and move along with it. Update the widget and iterate your way to shipping your ideas!", banner: getBanner(2), - bannerProps: { style: { height: 284 } }, + bannerThumbnail: stepTwoThumbnail, }, ]; @@ -54,15 +60,15 @@ const introStepsViewer = [ content: "You can now collaborate with your developers to build apps faster. Exchange thoughts, leave feedback & ship your ideas.", banner: getBanner(1), + bannerThumbnail: stepOneThumbnail, hideBackBtn: true, - bannerProps: { style: { height: 284 } }, }, { title: "Give Contextual Feedback", content: "Drop a comment on a widget to suggest an improvement or report an issue. Comments are tagged to the widget, resolve them once the updates are live!", banner: getBanner(2), - bannerProps: { style: { height: 284 } }, + bannerThumbnail: stepTwoThumbnail, }, ]; @@ -70,21 +76,33 @@ const IntroContentContainer = styled.div` padding: ${(props) => props.theme.spaces[5]}px; `; -const StyledImg = styled.img` - width: 100%; - object-fit: contain; +const BannerContainer = styled.div` + & ${ProgressiveImageContainer} { + width: 100%; + height: 284px; + } + .progressive-image--thumb, + progressive-image--full { + object-fit: contain; + } `; function IntroStep(props: { title: string; content: string; banner: string; + bannerThumbnail: any; theme: Theme; bannerProps: any; }) { return ( <> - + + +
} enforceFocus={false} - hasBackdrop // isOpen is controlled so that newly created threads are set to be visible isOpen={!!isCommentThreadVisible} minimal diff --git a/app/client/src/comments/tour/commentsTourSteps.ts b/app/client/src/comments/tour/commentsTourSteps.ts index 1849f3649c..7154318afc 100644 --- a/app/client/src/comments/tour/commentsTourSteps.ts +++ b/app/client/src/comments/tour/commentsTourSteps.ts @@ -19,7 +19,7 @@ export const commentsTourStepsEditMode = [ { id: commentsTourStepsEditModeTypes.SAY_HELLO, data: { - message: "Say hello to team appsmith", + message: "type Hello", tooltipProps: { position: Position.TOP }, }, }, diff --git a/app/client/src/components/ads/DisplayImageUpload.tsx b/app/client/src/components/ads/DisplayImageUpload.tsx index b632fb502c..6e72e1d2ba 100644 --- a/app/client/src/components/ads/DisplayImageUpload.tsx +++ b/app/client/src/components/ads/DisplayImageUpload.tsx @@ -155,7 +155,6 @@ export default function DisplayImageUpload({ canOutsideClickClose className="file-picker-dialog" isOpen={isModalOpen} - maxHeight={"80vh"} trigger={
diff --git a/app/client/src/components/ads/EmojiReactions.tsx b/app/client/src/components/ads/EmojiReactions.tsx index cd57d6f64e..27139b6933 100644 --- a/app/client/src/components/ads/EmojiReactions.tsx +++ b/app/client/src/components/ads/EmojiReactions.tsx @@ -28,9 +28,11 @@ const Bubble = styled.div<{ active?: boolean }>` : "transparent"}; border-radius: ${(props) => `${props.theme.radii[4]}px`}; - margin-left: ${(props) => `${props.theme.radii[1]}px`}; - &:first-child { - margin-left: 0; + margin-right: ${(props) => `${props.theme.radii[1]}px`}; + + /* At times the rendered emoji has width as 16px */ + & span.emoji { + min-width: 20px; } `; @@ -156,7 +158,7 @@ function EmojiReactions({ active={reaction.active} onClick={(e) => handleSelectReaction(e, reaction.reactionEmoji)} > - {reaction.reactionEmoji} + {reaction.reactionEmoji} {reaction.count > 1 && ( {reaction.count} )} diff --git a/app/client/src/components/ads/ProgressiveImage.tsx b/app/client/src/components/ads/ProgressiveImage.tsx new file mode 100644 index 0000000000..709b7101a9 --- /dev/null +++ b/app/client/src/components/ads/ProgressiveImage.tsx @@ -0,0 +1,57 @@ +import React from "react"; +import { useEffect } from "react"; +import styled from "styled-components"; + +export const Container = styled.div` + position: relative; + .progressive-image { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + .progressive-image--full { + transition: opacity 300ms ease 0ms; + } + .progressive-image--thumb { + filter: blur(2px); + transition: visibility 0ms ease 300ms; + } +`; + +/** + * Use a tiny blurred image (thumbnail) until the actual image is fetched + */ +function ProgressiveImage(props: { + thumbnailSource?: string; + imageSource?: string; + alt?: string; +}) { + const [isLoaded, setIsLoaded] = React.useState(false); + + useEffect(() => { + setIsLoaded(false); + }, [props.imageSource]); + + return ( + + {props.alt} + {props.alt} { + setIsLoaded(true); + }} + src={props.imageSource} + style={{ opacity: isLoaded ? 1 : 0 }} + /> + + ); +} +export default ProgressiveImage; diff --git a/app/client/src/globalStyles/uppy.ts b/app/client/src/globalStyles/uppy.ts index 86b57d3d0f..48ee00d541 100644 --- a/app/client/src/globalStyles/uppy.ts +++ b/app/client/src/globalStyles/uppy.ts @@ -8,4 +8,20 @@ export const UppyStyles = createGlobalStyle` a.uppy-Dashboard-poweredBy { display: none; } + + .bp3-dialog.file-picker-dialog { + margin: 48px 0; + } + + .cropper-view-box { + box-shadow: 0 0 0 1px #39f; + border-radius: 50%; + outline: 0; + } + .cropper-face { + background-color:inherit !important; + } + .cropper-view-box { + outline:inherit !important; + } `; diff --git a/app/client/src/pages/Editor/ToggleModeButton.tsx b/app/client/src/pages/Editor/ToggleModeButton.tsx index e92f7d93a0..7c9cdeaf80 100644 --- a/app/client/src/pages/Editor/ToggleModeButton.tsx +++ b/app/client/src/pages/Editor/ToggleModeButton.tsx @@ -150,6 +150,7 @@ const useUpdateCommentMode = async (currentUser?: User) => { if (updatedIsCommentMode && !isCommentsIntroSeen) { dispatch(showCommentsIntroCarousel()); + setCommentModeInUrl(false); } else { setCommentModeInStore(updatedIsCommentMode); } diff --git a/app/client/src/reducers/uiReducers/commentsReducer/commentsReducer.ts b/app/client/src/reducers/uiReducers/commentsReducer/commentsReducer.ts index 04910dd8f0..8dd65fadf8 100644 --- a/app/client/src/reducers/uiReducers/commentsReducer/commentsReducer.ts +++ b/app/client/src/reducers/uiReducers/commentsReducer/commentsReducer.ts @@ -74,7 +74,6 @@ const commentsReducer = createReducer(initialState, { ) => ({ ...state, isCommentMode: action.payload && state.areCommentsEnabled, - isIntroCarouselVisible: false, }), [ReduxActionTypes.CREATE_COMMENT_THREAD_REQUEST]: ( state: CommentsReduxState,