From 1db69a886d1b18049efbbe8d73439e290a7399a9 Mon Sep 17 00:00:00 2001 From: siddharthkp Date: Thu, 10 Sep 2020 14:56:48 +0200 Subject: [PATCH] fix a bunch of tiny issues --- .../app/components/TeamAvatar/TeamAvatar.tsx | 15 +++--- .../src/app/pages/Profile2/LikedSandboxes.tsx | 20 ++++---- .../src/app/pages/Profile2/ProfileCard.tsx | 31 +++++++------ .../src/app/pages/Profile2/SandboxCard.tsx | 46 ++++++++++--------- .../app/pages/Profile2/ShowcaseSandbox.tsx | 14 +++--- packages/app/src/app/pages/Profile2/index.tsx | 19 ++++---- 6 files changed, 77 insertions(+), 68 deletions(-) diff --git a/packages/app/src/app/components/TeamAvatar/TeamAvatar.tsx b/packages/app/src/app/components/TeamAvatar/TeamAvatar.tsx index 27b2889486e..5e1eb14f9a1 100644 --- a/packages/app/src/app/components/TeamAvatar/TeamAvatar.tsx +++ b/packages/app/src/app/components/TeamAvatar/TeamAvatar.tsx @@ -10,7 +10,7 @@ export const backgrounds = [ 'orange', 'blues.300', 'blues.600', - 'blues.700', + 'blues.700' ]; interface TeamAvatarProps { @@ -24,7 +24,7 @@ interface TeamAvatarProps { const textSizes = { small: 2, big: 3, - bigger: 6, + bigger: 6 }; export const TeamAvatar = ({ @@ -32,7 +32,7 @@ export const TeamAvatar = ({ size = 'big', className, avatar, - style, + style }: TeamAvatarProps) => { if (!name) return null; @@ -45,13 +45,14 @@ export const TeamAvatar = ({ <> diff --git a/packages/app/src/app/pages/Profile2/LikedSandboxes.tsx b/packages/app/src/app/pages/Profile2/LikedSandboxes.tsx index 4a3cb766ca4..34081d6370c 100644 --- a/packages/app/src/app/pages/Profile2/LikedSandboxes.tsx +++ b/packages/app/src/app/pages/Profile2/LikedSandboxes.tsx @@ -8,16 +8,16 @@ import { SANDBOXES_PER_PAGE } from './constants'; export const LikedSandboxes = ({ menuControls }) => { const { actions: { - profile: { likedSandboxesPageChanged }, + profile: { likedSandboxesPageChanged } }, state: { profile: { current: { username }, isLoadingSandboxes, currentLikedSandboxesPage, - likedSandboxes, - }, - }, + likedSandboxes + } + } } = useOvermind(); // explicitly call it on first page render @@ -45,7 +45,7 @@ export const LikedSandboxes = ({ menuControls }) => { rowGap={6} columnGap={6} css={{ - gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', + gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))' }} > {isLoadingSandboxes @@ -62,6 +62,8 @@ export const LikedSandboxes = ({ menuControls }) => { ))} +
+
@@ -71,14 +73,14 @@ export const LikedSandboxes = ({ menuControls }) => { const Pagination = () => { const { actions: { - profile: { likedSandboxesPageChanged }, + profile: { likedSandboxesPageChanged } }, state: { profile: { currentLikedSandboxesPage, - current: { givenLikeCount }, - }, - }, + current: { givenLikeCount } + } + } } = useOvermind(); const numberOfPages = Math.ceil(givenLikeCount / SANDBOXES_PER_PAGE); diff --git a/packages/app/src/app/pages/Profile2/ProfileCard.tsx b/packages/app/src/app/pages/Profile2/ProfileCard.tsx index 9079c033025..7376b363a8c 100644 --- a/packages/app/src/app/pages/Profile2/ProfileCard.tsx +++ b/packages/app/src/app/pages/Profile2/ProfileCard.tsx @@ -3,6 +3,7 @@ import { motion } from 'framer-motion'; import { useOvermind } from 'app/overmind'; import { Link as RouterLink } from 'react-router-dom'; import { + Grid, Stack, Avatar, Text, @@ -11,7 +12,7 @@ import { Button, Textarea, Input, - Tooltip, + Tooltip } from '@codesandbox/components'; import { TeamAvatar } from 'app/components/TeamAvatar'; import css from '@styled-system/css'; @@ -19,12 +20,12 @@ import css from '@styled-system/css'; export const ProfileCard = ({ defaultEditing = false }) => { const { actions: { - profile: { updateUserProfile }, + profile: { updateUserProfile } }, state: { user: loggedInUser, - profile: { current: user }, - }, + profile: { current: user } + } } = useOvermind(); const [editing, setEditing] = React.useState(defaultEditing); @@ -61,7 +62,7 @@ export const ProfileCard = ({ defaultEditing = false }) => { borderColor: 'grays.600', paddingTop: 2, paddingBottom: 6, - marginBottom: 8, + marginBottom: 8 })} > @@ -72,7 +73,7 @@ export const ProfileCard = ({ defaultEditing = false }) => { paddingX: 6, paddingY: 6, // fix height to avoid jumping - height: myProfile ? 230 : 'auto', + height: myProfile ? 230 : 'auto' })} > @@ -81,7 +82,7 @@ export const ProfileCard = ({ defaultEditing = false }) => { css={css({ size: 64, img: { borderRadius: 'medium' }, - span: { fontSize: 3, height: 4, lineHeight: '16px' }, + span: { fontSize: 3, height: 4, lineHeight: '16px' } })} /> @@ -121,15 +122,17 @@ export const ProfileCard = ({ defaultEditing = false }) => { paddingX: 6, paddingY: 4, borderTop: '1px solid', - borderColor: 'grays.600', + borderColor: 'grays.600' })} > - Team + Teams - + {user.teams - .slice() + .slice(1) // first one is always personal workspace .sort((team1, team2) => team1.avatarUrl && !team2.avatarUrl ? -1 : 1 ) @@ -140,7 +143,7 @@ export const ProfileCard = ({ defaultEditing = false }) => { ))} - + ) : null} { paddingY: 4, marginBottom: 4, borderTop: '1px solid', - borderColor: 'grays.600', + borderColor: 'grays.600' })} > @@ -250,7 +253,7 @@ const SocialLinks = ({ username, socialLinks, editing, setSocialLinks }) => ( css={css({ fontWeight: 'normal', justifyContent: 'start', - paddingX: 0, + paddingX: 0 })} onClick={() => setSocialLinks([...socialLinks, 'https://'])} > diff --git a/packages/app/src/app/pages/Profile2/SandboxCard.tsx b/packages/app/src/app/pages/Profile2/SandboxCard.tsx index 8cefa64f9c7..7b1098932a2 100644 --- a/packages/app/src/app/pages/Profile2/SandboxCard.tsx +++ b/packages/app/src/app/pages/Profile2/SandboxCard.tsx @@ -7,7 +7,7 @@ import { Stats, IconButton, SkeletonText, - isMenuClicked, + isMenuClicked } from '@codesandbox/components'; import css from '@styled-system/css'; import { ENTER } from '@codesandbox/common/lib/utils/keycodes'; @@ -20,14 +20,14 @@ export const SandboxCard = ({ type = SandboxTypes.DEFAULT_SANDBOX, sandbox, menuControls: { onKeyDown, onContextMenu }, - index = null, + index = null }) => { const { state: { user: loggedInUser, profile: { - current: { username, featuredSandboxes }, - }, + current: { username, featuredSandboxes } + } }, actions: { profile: { @@ -36,9 +36,9 @@ export const SandboxCard = ({ reorderFeaturedSandboxesInState, saveFeaturedSandboxesOrder, removeFeaturedSandboxesInState, - newSandboxShowcaseSelected, - }, - }, + newSandboxShowcaseSelected + } + } } = useOvermind(); const ref = React.useRef(null); @@ -49,7 +49,7 @@ export const SandboxCard = ({ collect: monitor => { const dragItem = monitor.getItem(); return { - isDragging: dragItem?.sandboxId === sandbox.id, + isDragging: dragItem?.sandboxId === sandbox.id }; }, @@ -67,7 +67,7 @@ export const SandboxCard = ({ // Rollback any reordering reorderFeaturedSandboxesInState({ startPosition: index, - endPosition: previousPosition, + endPosition: previousPosition }); } else { // remove newly added from featured in state @@ -86,7 +86,7 @@ export const SandboxCard = ({ } else if (dropResult.name === DropTargets.SHOWCASED_SANDBOX) { newSandboxShowcaseSelected(item.sandboxId); } - }, + } }); const [, drop] = useDrop({ @@ -140,12 +140,12 @@ export const SandboxCard = ({ reorderFeaturedSandboxesInState({ startPosition: dragIndex, - endPosition: hoverIndex, + endPosition: hoverIndex }); // We're mutating the monitor item here to avoid expensive index searches! item.index = hoverIndex; }, - drop: () => ({ name: DropTargets.PINNED_SANDBOXES }), + drop: () => ({ name: DropTargets.PINNED_SANDBOXES }) }); const myProfile = loggedInUser?.username === username; @@ -161,11 +161,13 @@ export const SandboxCard = ({ direction="vertical" gap={4} onContextMenu={event => onContextMenu(event, sandbox.id)} - onClick={() => { + onClick={(event: React.MouseEvent) => { // we use on click instead of anchor tag so that safari renders // the html5 drag thumbnail instead of text if (isMenuClicked(event)) return; - window.location.href = sandboxUrl({ id: sandbox.id }); + const url = sandboxUrl({ id: sandbox.id }); + if (event.ctrlKey || event.metaKey) window.open(url, '_blank'); + else window.open(url); }} tabIndex={0} onKeyDown={event => { @@ -180,7 +182,7 @@ export const SandboxCard = ({ // we transition the thumbnail out so that // the dragged thumbnail is 100% opacity transition: 'opacity 75ms', - transitionDelay: '16ms', + transitionDelay: '16ms' }} css={css({ backgroundColor: 'grays.700', @@ -190,12 +192,12 @@ export const SandboxCard = ({ cursor: 'pointer', overflow: 'hidden', ':hover, :focus, :focus-within': { - boxShadow: theme => '0 4px 16px 0 ' + theme.colors.grays[900], + boxShadow: theme => '0 4px 16px 0 ' + theme.colors.grays[900] }, ':focus, :focus-within': { outline: 'none', - borderColor: 'blues.600', - }, + borderColor: 'blues.600' + } })} >
@@ -244,7 +246,7 @@ export const SkeletonCard = () => ( backgroundColor: 'grays.700', border: '1px solid', borderColor: 'grays.600', - borderRadius: 'medium', + borderRadius: 'medium' })} > ( width: '100%', height: 160 + 1, borderBottom: '1px solid', - borderColor: 'grays.600', + borderColor: 'grays.600' })} /> diff --git a/packages/app/src/app/pages/Profile2/ShowcaseSandbox.tsx b/packages/app/src/app/pages/Profile2/ShowcaseSandbox.tsx index dea8a1eb4cc..53c524a0f16 100644 --- a/packages/app/src/app/pages/Profile2/ShowcaseSandbox.tsx +++ b/packages/app/src/app/pages/Profile2/ShowcaseSandbox.tsx @@ -9,8 +9,8 @@ import { SandboxTypes, DropTargets } from './constants'; export const ShowcaseSandbox = () => { const { state: { - profile: { showcasedSandbox }, - }, + profile: { showcasedSandbox } + } } = useOvermind(); const [{ isOver, isDragging }, drop] = useDrop({ @@ -18,8 +18,8 @@ export const ShowcaseSandbox = () => { drop: () => ({ name: DropTargets.SHOWCASED_SANDBOX }), collect: monitor => ({ isOver: monitor.isOver(), - isDragging: !!monitor.getItem(), - }), + isDragging: !!monitor.getItem() + }) }); return ( @@ -38,10 +38,10 @@ export const ShowcaseSandbox = () => { // reveal the drag area behind it height: isDragging ? 0 : 360, borderRadius: '4px', - overflow: 'hidden', border: '1px solid', - borderColor: 'grays.600', + borderColor: 'grays.600' })} + scrolling="no" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" /> @@ -69,7 +69,7 @@ export const ShowcaseSandbox = () => { padding: 4, backgroundColor: isOver ? 'grays.700' : 'grays.900', transition: theme => `background-color ${theme.speeds[2]}`, - backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='%23757575' stroke-width='1' stroke-dasharray='8%2c8' stroke-dashoffset='4' stroke-linecap='square'/%3e%3c/svg%3e");border-radius: 4px;`, + backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='%23757575' stroke-width='1' stroke-dasharray='8%2c8' stroke-dashoffset='4' stroke-linecap='square'/%3e%3c/svg%3e");border-radius: 4px;` })} > diff --git a/packages/app/src/app/pages/Profile2/index.tsx b/packages/app/src/app/pages/Profile2/index.tsx index c65b7190911..96423f367ba 100644 --- a/packages/app/src/app/pages/Profile2/index.tsx +++ b/packages/app/src/app/pages/Profile2/index.tsx @@ -1,13 +1,14 @@ /** * TODO: + * - Sandbox picker * - Page number in url * - Filter out unlisted and private from API response * - Get more sandboxes than required to fill All Sandboxes (or filter featured) * - Custom drag preview - * - Sandbox picker - * - Drag sandbox to get top showcase - * - Add open sandbox to top showcase * - Remove default showcase from API? + * - Google signed in profiles + * - Don't show other workspaces in API + * - Tag personal workspace in API */ import React from 'react'; @@ -32,11 +33,11 @@ export const Profile = props => { const { actions: { - profile: { profileMounted }, + profile: { profileMounted } }, state: { - profile: { current: user }, - }, + profile: { current: user } + } } = useOvermind(); React.useEffect(() => { @@ -71,11 +72,11 @@ export const Profile = props => { direction="vertical" gap={104} css={css({ - height: '100%', + height: '100vh', width: '100vw', backgroundColor: 'grays.900', color: 'white', - fontFamily: 'Inter, sans-serif', + fontFamily: 'Inter, sans-serif' })} >
@@ -84,7 +85,7 @@ export const Profile = props => { gap={8} css={css({ flexDirection: ['column', 'row'], - marginX: [32, 64], + marginX: [32, 64] })} >