From 9fc5fdf2340328f47d17baa78eccd0120adb26b8 Mon Sep 17 00:00:00 2001 From: siddharthkp Date: Thu, 12 Dec 2019 15:07:13 +0100 Subject: [PATCH 1/7] change some zindexes around --- packages/app/src/app/pages/Sandbox/Editor/Header/elements.ts | 1 + packages/app/src/app/pages/Sandbox/Editor/index.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Header/elements.ts index 3e32a53cc97..70d06f5ff65 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Header/elements.ts +++ b/packages/app/src/app/pages/Sandbox/Editor/Header/elements.ts @@ -47,6 +47,7 @@ export const Centered = styled.div` display: flex; justify-content: center; z-index: 0; /* So pointer events on left and right continue */ + z-index: 10; /* override: this probably breaks something, not sure what */ margin: 0 3rem; `; diff --git a/packages/app/src/app/pages/Sandbox/Editor/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/index.tsx index fb5104f7d83..3fe0a55094d 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/index.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/index.tsx @@ -94,7 +94,7 @@ const ContentSplit: React.FC = () => { right: 0, bottom: bottomOffset, height: statusBar ? 'auto' : 'calc(100% - 3.5rem)', - zIndex: 999999, + zIndex: 9, }} > Date: Thu, 12 Dec 2019 15:09:32 +0100 Subject: [PATCH 2/7] add privacy toggle --- .../Editor/Header/PrivacyTooltip/elements.ts | 65 +++++++++++++++ .../Editor/Header/PrivacyTooltip/icons.tsx | 48 +++++++++++ .../Editor/Header/PrivacyTooltip/index.tsx | 81 +++++++++++++++++++ .../Editor/Header/SandboxName/SandboxName.tsx | 5 +- 4 files changed, 197 insertions(+), 2 deletions(-) create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/elements.ts create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/icons.tsx create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/index.tsx diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/elements.ts new file mode 100644 index 00000000000..24a9e3ce30d --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/elements.ts @@ -0,0 +1,65 @@ +import styled from 'styled-components'; +import css from '@styled-system/css'; + +export const Container = styled.div( + css({ + '.tippy-content': { + width: '200px', + backgroundColor: 'grays.500', + border: '1px solid', + borderColor: 'grays.600', + padding: 4, + borderRadius: 'medium', + whiteSpace: 'normal', + }, + }) +); + +export const Element = styled.div<{ + margin?: number; + marginX?: number; + marginBottom?: number; +}>(props => + css({ + margin: props.margin || null, + marginX: props.marginX || null, + marginBottom: props.marginBottom || null, + }) +); + +export const Text = styled(Element)<{ + color?: string; + size?: string; + align?: string; +}>(props => + css({ + color: props.color || 'white', + fontSize: props.size || 'inherit', + textAlign: props.align || 'left', + }) +); + +export const Link = styled.a( + css({ + color: 'blues.300', + textDecoration: 'none', + }) +); + +export const Select = styled(Element).attrs({ as: 'select' })(({ theme }) => + css({ + width: '100%', + backgroundColor: 'grays.800', + color: 'white', + borderColor: 'grays.600', + padding: 2, + height: 24, + boxSizing: 'border-box', + fontFamily: 'body', + transition: 'background', + transitionDuration: theme.speeds[2], + ':hover': { + backgroundColor: 'grays.700', + }, + }) +); diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/icons.tsx b/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/icons.tsx new file mode 100644 index 00000000000..695d179812c --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/icons.tsx @@ -0,0 +1,48 @@ +import React from 'react'; + +export const Public = () => ( + + + +); + +export const Unlisted = () => ( + + + +); + +export const Private = () => ( + + + +); diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/index.tsx new file mode 100644 index 00000000000..0fe364a5b0b --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/index.tsx @@ -0,0 +1,81 @@ +import React from 'react'; +import { useOvermind } from 'app/overmind'; +import { ThemeProvider } from 'styled-components'; +import Tooltip from '@codesandbox/common/lib/components/Tooltip'; +import theme from '@codesandbox/common/lib/design-language/theme'; +import { Container, Text, Link, Select } from './elements'; +import * as Icons from './icons'; + +const config = { + 0: { + label: 'Public', + title: ( + <> + You can change privacy of a sandbox as a Pro. +
+ Upgrade to Pro + + ), + description: 'Everyone can see this Sandbox', + icon: , + }, + 1: { + label: 'Unlisted', + title: 'Adjust privacy settings.', + description: 'Only people with a private link are able to see this Sandbox', + icon: , + }, + 2: { + value: 'Private', + title: 'Adjust privacy settings.', + description: 'Only you can see this Sandbox.', + icon: , + }, +}; + +export const PrivacyTooltip = () => { + const { + actions: { + workspace: { sandboxPrivacyChanged }, + }, + state: { + editor: { + currentSandbox: { privacy }, + }, + }, + } = useOvermind(); + + const onChange = event => { + const value = event.target.value; + sandboxPrivacyChanged(Number(value) as 0 | 1 | 2); + }; + + return ( + + + + + {config[privacy].title} + + + + + {config[privacy].description} + + + } + > + {config[privacy].icon} + + + + ); +}; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/SandboxName/SandboxName.tsx b/packages/app/src/app/pages/Sandbox/Editor/Header/SandboxName/SandboxName.tsx index 9454f24c972..79458292363 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Header/SandboxName/SandboxName.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Header/SandboxName/SandboxName.tsx @@ -11,8 +11,8 @@ import React, { useState, } from 'react'; import { useSpring, animated } from 'react-spring'; - import { useOvermind } from 'app/overmind'; +import { PrivacyTooltip } from '../PrivacyTooltip'; import { Container, @@ -109,7 +109,6 @@ export const SandboxName: FunctionComponent = () => { )} - {updatingName ? (
{ )} + {updatingName ? null : } + {currentSandbox.customTemplate ? ( Date: Thu, 12 Dec 2019 15:18:39 +0100 Subject: [PATCH 3/7] adjust for subscripiton --- .../Editor/Header/PrivacyTooltip/elements.ts | 7 +++ .../Editor/Header/PrivacyTooltip/index.tsx | 61 ++++++++++--------- 2 files changed, 39 insertions(+), 29 deletions(-) diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/elements.ts index 24a9e3ce30d..ad4b3f097e5 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/elements.ts +++ b/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/elements.ts @@ -61,5 +61,12 @@ export const Select = styled(Element).attrs({ as: 'select' })(({ theme }) => ':hover': { backgroundColor: 'grays.700', }, + ':disabled': { + opacity: 0.5, + cursor: 'not-allowed', + ':hover': { + backgroundColor: 'grays.800', + }, + }, }) ); diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/index.tsx index 0fe364a5b0b..d7c6e5c902c 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/index.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/index.tsx @@ -6,45 +6,35 @@ import theme from '@codesandbox/common/lib/design-language/theme'; import { Container, Text, Link, Select } from './elements'; import * as Icons from './icons'; -const config = { - 0: { - label: 'Public', - title: ( - <> - You can change privacy of a sandbox as a Pro. -
- Upgrade to Pro - - ), - description: 'Everyone can see this Sandbox', - icon: , - }, - 1: { - label: 'Unlisted', - title: 'Adjust privacy settings.', - description: 'Only people with a private link are able to see this Sandbox', - icon: , - }, - 2: { - value: 'Private', - title: 'Adjust privacy settings.', - description: 'Only you can see this Sandbox.', - icon: , - }, -}; - export const PrivacyTooltip = () => { const { actions: { workspace: { sandboxPrivacyChanged }, }, state: { + user: { subscription }, editor: { currentSandbox: { privacy }, }, }, } = useOvermind(); + const config = { + 0: { + description: 'Everyone can see this Sandbox', + icon: , + }, + 1: { + description: + 'Only people with a private link are able to see this Sandbox', + icon: , + }, + 2: { + description: 'Only you can see this Sandbox.', + icon: , + }, + }; + const onChange = event => { const value = event.target.value; sandboxPrivacyChanged(Number(value) as 0 | 1 | 2); @@ -59,10 +49,23 @@ export const PrivacyTooltip = () => { content={ <> - {config[privacy].title} + {subscription ? ( + 'Adjust privacy settings.' + ) : ( + <> + You can change privacy of a sandbox as a Pro. +
+ Upgrade to Pro + + )} - From 50beb4c1d5d5169c979178a817b37b5afee02963 Mon Sep 17 00:00:00 2001 From: siddharthkp Date: Thu, 12 Dec 2019 16:23:46 +0100 Subject: [PATCH 4/7] doh! undefined check. where is your typescript now --- .../pages/Sandbox/Editor/Header/PrivacyTooltip/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/index.tsx index d7c6e5c902c..ed62721bece 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/index.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/index.tsx @@ -12,7 +12,7 @@ export const PrivacyTooltip = () => { workspace: { sandboxPrivacyChanged }, }, state: { - user: { subscription }, + user, editor: { currentSandbox: { privacy }, }, @@ -49,7 +49,7 @@ export const PrivacyTooltip = () => { content={ <> - {subscription ? ( + {!user || !user.subscription ? ( 'Adjust privacy settings.' ) : ( <> @@ -64,7 +64,7 @@ export const PrivacyTooltip = () => { marginBottom={2} value={privacy} onChange={onChange} - disabled={!subscription} + disabled={!user || !user.subscription} > From 234c93a2c38479e3e5d88a02e4caefad79ed3edb Mon Sep 17 00:00:00 2001 From: Ives van Hoorne Date: Fri, 13 Dec 2019 12:21:51 +0100 Subject: [PATCH 5/7] Fix typing of as --- .../Sandbox/Editor/Header/PrivacyTooltip/elements.ts | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/elements.ts index ad4b3f097e5..4ea52e23a78 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/elements.ts +++ b/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/elements.ts @@ -1,4 +1,7 @@ -import styled from 'styled-components'; +import styled, { + StyledComponent, + StyledComponentInnerOtherProps, +} from 'styled-components'; import css from '@styled-system/css'; export const Container = styled.div( @@ -69,4 +72,8 @@ export const Select = styled(Element).attrs({ as: 'select' })(({ theme }) => }, }, }) -); +) as StyledComponent< + 'select', + any, + StyledComponentInnerOtherProps +>; From c235f014f023122e222626a9f4868d8015205db1 Mon Sep 17 00:00:00 2001 From: siddharthkp Date: Fri, 13 Dec 2019 16:18:23 +0100 Subject: [PATCH 6/7] only show privacy toggle if the user is owner --- .../app/pages/Sandbox/Editor/Header/PrivacyTooltip/index.tsx | 2 +- .../app/pages/Sandbox/Editor/Header/SandboxName/SandboxName.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/index.tsx index ed62721bece..286e4ed31f0 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/index.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/index.tsx @@ -49,7 +49,7 @@ export const PrivacyTooltip = () => { content={ <> - {!user || !user.subscription ? ( + {user?.subscription ? ( 'Adjust privacy settings.' ) : ( <> diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/SandboxName/SandboxName.tsx b/packages/app/src/app/pages/Sandbox/Editor/Header/SandboxName/SandboxName.tsx index 79458292363..74b1f3de430 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Header/SandboxName/SandboxName.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Header/SandboxName/SandboxName.tsx @@ -139,7 +139,7 @@ export const SandboxName: FunctionComponent = () => { )} - {updatingName ? null : } + {owned && !updatingName ? : null} {currentSandbox.customTemplate ? ( Date: Fri, 13 Dec 2019 16:30:38 +0100 Subject: [PATCH 7/7] not just subscription but also user --- .../app/pages/Sandbox/Editor/Header/PrivacyTooltip/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/index.tsx index 286e4ed31f0..fbde8ad6287 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/index.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/index.tsx @@ -49,7 +49,7 @@ export const PrivacyTooltip = () => { content={ <> - {user?.subscription ? ( + {user && user.subscription ? ( 'Adjust privacy settings.' ) : ( <>