Skip to content

WIP Profiles: fix a bunch of tiny issues #4876

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

Merged
merged 1 commit into from
Sep 10, 2020
Merged

WIP Profiles: fix a bunch of tiny issues #4876

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
15 changes: 8 additions & 7 deletions packages/app/src/app/components/TeamAvatar/TeamAvatar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export const backgrounds = [
'orange',
'blues.300',
'blues.600',
'blues.700',
'blues.700'
];

interface TeamAvatarProps {
Expand All @@ -24,15 +24,15 @@ interface TeamAvatarProps {
const textSizes = {
small: 2,
big: 3,
bigger: 6,
bigger: 6
};

export const TeamAvatar = ({
name,
size = 'big',
className,
avatar,
style,
style
}: TeamAvatarProps) => {
if (!name) return null;

Expand All @@ -45,13 +45,14 @@ export const TeamAvatar = ({
<>
<img
css={css({
maxWidth: avatarSize,
maxHeight: avatarSize,
width: avatarSize,
height: avatarSize,
objectFit: 'cover',
borderRadius: 'small',
borderColor: 'sideBar.border',
borderStyle: 'solid',
borderWidth: 1,
boxSizing: 'border-box',
boxSizing: 'border-box'
})}
style={style}
src={avatar}
Expand All @@ -72,7 +73,7 @@ export const TeamAvatar = ({
backgroundColor,
color: 'white',
fontWeight: 600,
fontFamily: 'Inter',
fontFamily: 'Inter'
})}
className={className}
>
Expand Down
20 changes: 11 additions & 9 deletions packages/app/src/app/pages/Profile2/LikedSandboxes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -62,6 +62,8 @@ export const LikedSandboxes = ({ menuControls }) => {
<SandboxCard sandbox={sandbox} menuControls={menuControls} />
</Column>
))}
<div />
<div />
</Grid>
<Pagination />
</Stack>
Expand All @@ -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);
Expand Down
31 changes: 17 additions & 14 deletions packages/app/src/app/pages/Profile2/ProfileCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -11,20 +12,20 @@ import {
Button,
Textarea,
Input,
Tooltip,
Tooltip
} from '@codesandbox/components';
import { TeamAvatar } from 'app/components/TeamAvatar';
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);
Expand Down Expand Up @@ -61,7 +62,7 @@ export const ProfileCard = ({ defaultEditing = false }) => {
borderColor: 'grays.600',
paddingTop: 2,
paddingBottom: 6,
marginBottom: 8,
marginBottom: 8
})}
>
<Stack direction="vertical">
Expand All @@ -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'
})}
>
<Stack gap={4} align="center">
Expand All @@ -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' }
})}
/>
<Stack direction="vertical">
Expand Down Expand Up @@ -121,15 +122,17 @@ export const ProfileCard = ({ defaultEditing = false }) => {
paddingX: 6,
paddingY: 4,
borderTop: '1px solid',
borderColor: 'grays.600',
borderColor: 'grays.600'
})}
>
<Text size={2} weight="bold">
Team
Teams
</Text>
<Stack gap={3}>
<Grid
css={{ gridTemplateColumns: 'repeat(auto-fill, 26px)', gap: 12 }}
>
{user.teams
.slice()
.slice(1) // first one is always personal workspace
.sort((team1, team2) =>
team1.avatarUrl && !team2.avatarUrl ? -1 : 1
)
Expand All @@ -140,7 +143,7 @@ export const ProfileCard = ({ defaultEditing = false }) => {
</span>
</Tooltip>
))}
</Stack>
</Grid>
</Stack>
) : null}
<Stack
Expand All @@ -149,7 +152,7 @@ export const ProfileCard = ({ defaultEditing = false }) => {
paddingY: 4,
marginBottom: 4,
borderTop: '1px solid',
borderColor: 'grays.600',
borderColor: 'grays.600'
})}
>
<Stack direction="vertical" gap={4} css={{ width: '100%' }}>
Expand Down Expand Up @@ -250,7 +253,7 @@ const SocialLinks = ({ username, socialLinks, editing, setSocialLinks }) => (
css={css({
fontWeight: 'normal',
justifyContent: 'start',
paddingX: 0,
paddingX: 0
})}
onClick={() => setSocialLinks([...socialLinks, 'https://'])}
>
Expand Down
46 changes: 24 additions & 22 deletions packages/app/src/app/pages/Profile2/SandboxCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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: {
Expand All @@ -36,9 +36,9 @@ export const SandboxCard = ({
reorderFeaturedSandboxesInState,
saveFeaturedSandboxesOrder,
removeFeaturedSandboxesInState,
newSandboxShowcaseSelected,
},
},
newSandboxShowcaseSelected
}
}
} = useOvermind();

const ref = React.useRef(null);
Expand All @@ -49,7 +49,7 @@ export const SandboxCard = ({
collect: monitor => {
const dragItem = monitor.getItem();
return {
isDragging: dragItem?.sandboxId === sandbox.id,
isDragging: dragItem?.sandboxId === sandbox.id
};
},

Expand All @@ -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
Expand All @@ -86,7 +86,7 @@ export const SandboxCard = ({
} else if (dropResult.name === DropTargets.SHOWCASED_SANDBOX) {
newSandboxShowcaseSelected(item.sandboxId);
}
},
}
});

const [, drop] = useDrop({
Expand Down Expand Up @@ -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;
Expand All @@ -161,11 +161,13 @@ export const SandboxCard = ({
direction="vertical"
gap={4}
onContextMenu={event => onContextMenu(event, sandbox.id)}
onClick={() => {
onClick={(event: React.MouseEvent<HTMLDivElement>) => {
// 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 => {
Expand All @@ -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',
Expand All @@ -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'
}
})}
>
<div
Expand All @@ -209,11 +211,11 @@ export const SandboxCard = ({
backgroundSize: 'cover',
backgroundPosition: 'top center',
backgroundRepeat: 'no-repeat',
borderColor: 'grays.600',
borderColor: 'grays.600'
})}
style={{
backgroundImage: `url(${sandbox.screenshotUrl ||
`/api/v1/sandboxes/${sandbox.id}/screenshot.png`})`,
`/api/v1/sandboxes/${sandbox.id}/screenshot.png`})`
}}
/>
<Stack justify="space-between">
Expand Down Expand Up @@ -244,15 +246,15 @@ export const SkeletonCard = () => (
backgroundColor: 'grays.700',
border: '1px solid',
borderColor: 'grays.600',
borderRadius: 'medium',
borderRadius: 'medium'
})}
>
<SkeletonText
css={css({
width: '100%',
height: 160 + 1,
borderBottom: '1px solid',
borderColor: 'grays.600',
borderColor: 'grays.600'
})}
/>
<Stack direction="vertical" gap={2} marginX={4} marginBottom={5}>
Expand Down
Loading