Share Modal redesign (codesandbox#1530)

SaraVieira · CompuIves · commit 4609d0848cde · 2019-02-19T11:22:24.000+01:00
A cleaner look for the share modal Issues: Monaco does not load text ![screenshot 2019-02-10 at 18 08 11](https://user-images.githubusercontent.com/1051509/52536746-db3e9c00-2d5e-11e9-937a-f41213e97922.png) ![screenshot 2019-02-10 at 18 08 05](https://user-images.githubusercontent.com/1051509/52536748-db3e9c00-2d5e-11e9-9982-cbb13b396e97.png) ![screenshot 2019-02-10 at 18 07 56](https://user-images.githubusercontent.com/1051509/52536749-db3e9c00-2d5e-11e9-875f-8f9681f23ee1.png)
diff --git a/packages/app/src/app/index.html b/packages/app/src/app/index.html
@@ -26,7 +26,7 @@
     <script>
       WebFont.load({
         google: {
-          families: ['Source Code Pro:500', 'Roboto:300,400,500,700']
+          families: ['Source Code Pro:500', 'Roboto:300,400,500,700', 'Poppins:300,400,500,700']
         }
       });
     </script>
diff --git a/packages/app/src/app/pages/common/Modals/ShareModal/Title.js b/packages/app/src/app/pages/common/Modals/ShareModal/Title.js
@@ -0,0 +1,33 @@
+import React, { Component, Fragment } from 'react';
+import Down from 'react-icons/lib/fa/angle-down';
+import Up from 'react-icons/lib/fa/angle-up';
+import { Spring, animated } from 'react-spring';
+import { Title } from './elements';
+
+export default class extends Component {
+  state = { open: this.props.open || false };
+
+  toggleShow = () => this.setState(({ open }) => ({ open: !open }));
+
+  render() {
+    const { children, title } = this.props;
+    const { open } = this.state;
+    return (
+      <Fragment>
+        <Title onClick={() => this.toggleShow()}>
+          {open ? <Up /> : <Down />}
+          {title}
+        </Title>
+        <Spring
+          from={{ height: 'auto' }}
+          to={{
+            height: open ? 'auto' : 0,
+            overflow: 'hidden',
+          }}
+        >
+          {props => <animated.div style={props}>{children}</animated.div>}
+        </Spring>
+      </Fragment>
+    );
+  }
+}
diff --git a/packages/app/src/app/pages/common/Modals/ShareModal/elements.js b/packages/app/src/app/pages/common/Modals/ShareModal/elements.js
@@ -7,7 +7,7 @@ export const FilesContainer = styled.div`
 `;
 
 export const PaddedPreference = styled(Preference)`
-  color: rgba(255, 255, 255, 0.6);
+  color: #e5e5e5;
   padding-bottom: 1rem;
 
   &:last-child {
@@ -19,39 +19,27 @@ export const ShareOptions = styled.div`
   font-size: 0.875rem;
   color: rgba(255, 255, 255, 0.8);
   padding: 1rem;
-  background-color: ${props => props.theme.background2};
-
-  h3 {
-    text-align: center;
-    margin: 0;
-    margin-bottom: 1rem;
-    font-weight: 400;
-  }
+  background-color: #1c2022;
 `;
 
 export const Inputs = styled.div`
   margin-top: 0.5rem;
-  input {
+  color: #e5e5e5;
+
+  input,
+  textarea {
     border: none;
     outline: none;
-    width: 100%;
-    background-color: rgba(255, 255, 255, 0.1);
-    color: white;
+    background: #333739;
+    color: #e5e5e5;
     padding: 0.2rem;
     margin: 0.5rem 0;
     border-radius: 4px;
+    width: 100%;
   }
 
   textarea {
-    border: none;
-    outline: none;
-    width: 100%;
-    background-color: rgba(255, 255, 255, 0.1);
-    color: white;
-    padding: 0.2rem;
-    margin: 0.5rem 0;
     height: 100px;
-    border-radius: 4px;
   }
 `;
 
@@ -61,32 +49,38 @@ export const LinkName = styled.div`
   margin-bottom: 0;
 `;
 
-export const Divider = styled.div`
-  display: flex;
-  flex-direction: row;
-  width: 100%;
+export const ButtonContainer = styled.div`
+  margin-top: 0.25rem;
 `;
 
-export const Column = styled.div`
+export const Title = styled.h4`
+  font-family: 'Roboto';
+  font-weight: 500;
+  font-size: 18px;
+  padding-bottom: 20px;
+  margin: 0;
+  padding-top: 20px;
+  cursor: pointer;
   display: flex;
-  flex-direction: column;
-  flex: 100%;
-
-  color: rgba(255, 255, 255, 0.8);
-  margin: 0 0.75rem;
+  align-items: center;
 
-  h4 {
-    margin: 1rem 0;
-    font-weight: 400;
+  svg {
+    margin-right: 10px;
   }
 `;
 
-export const ButtonContainer = styled.div`
-  margin-top: 0.25rem;
+export const Wrapper = styled.section`
+  display: grid;
+  grid-gap: 30px;
+  grid-template-columns: repeat(2, 1fr);
 `;
 
-export const ButtonName = styled.div`
-  margin: 0.5rem 0;
-  font-weight: 500;
-  margin-bottom: 0;
+export const SideTitle = styled.span`
+  font-family: 'Poppins';
+  font-weight: bold;
+  font-size: 20px;
+  margin-top: 20px;
+  margin-bottom: 0px;
+  color: #e5e5e5;
+  display: block;
 `;
diff --git a/packages/app/src/app/pages/common/Modals/ShareModal/getCode.js b/packages/app/src/app/pages/common/Modals/ShareModal/getCode.js
@@ -0,0 +1,85 @@
+import { getModulePath } from 'common/sandbox/modules';
+import {
+  optionsToParameterizedUrl,
+  protocolAndHost,
+  sandboxUrl,
+  embedUrl,
+} from 'common/utils/url-generator';
+
+export const BUTTON_URL = `${
+  process.env.CODESANDBOX_HOST
+}/static/img/play-codesandbox.svg`;
+
+export const VIEW_OPTIONS = ['Editor + Preview', 'Preview', 'Editor'];
+
+const getOptionsUrl = (sandbox, mainModule, state) => {
+  const {
+    defaultModule,
+    view,
+    testsView,
+    autoResize,
+    hideNavigation,
+    isCurrentModuleView,
+    fontSize,
+    initialPath,
+    enableEslint,
+    useCodeMirror,
+    expandDevTools,
+  } = state;
+
+  const options = {
+    view: view !== VIEW_OPTIONS[0] ? view.toLowerCase() : null,
+    previewwindow: testsView ? 'tests' : null,
+    autoresize: autoResize ? 1 : null,
+    hidenavigation: hideNavigation ? 1 : null,
+    moduleview: isCurrentModuleView ? 1 : null,
+    eslint: enableEslint ? 1 : null,
+    codemirror: useCodeMirror ? 1 : null,
+    expanddevtools: expandDevTools ? 1 : null,
+    fontsize: fontSize !== 14 ? fontSize : 14,
+    initialpath: initialPath || null,
+  };
+
+  const mainModuleId = mainModule.id;
+  if (defaultModule && defaultModule !== mainModuleId) {
+    const modulePath = getModulePath(
+      sandbox.modules,
+      sandbox.directories,
+      defaultModule
+    );
+    options.module = modulePath;
+  }
+
+  return optionsToParameterizedUrl(options);
+};
+
+export const getEditorUrl = (sandbox, mainModule, state) =>
+  protocolAndHost() +
+  sandboxUrl(sandbox) +
+  getOptionsUrl(sandbox, mainModule, state);
+
+export const getEmbedUrl = (sandbox, mainModule, state) =>
+  protocolAndHost() +
+  embedUrl(sandbox) +
+  getOptionsUrl(sandbox, mainModule, state);
+
+export const getIframeScript = (sandbox, mainModule, state) =>
+  `<iframe src="${getEmbedUrl(
+    sandbox,
+    mainModule,
+    state
+  )}" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>`;
+
+// eslint-disable-next-line
+export const getButtonMarkdown = (sandbox, mainModule, state) => {
+  return `[![Edit ${sandbox.title ||
+    sandbox.id}](${BUTTON_URL})](${getEditorUrl(sandbox, mainModule, state)})`;
+};
+
+// eslint-disable-next-line
+export const getButtonHTML = (sandbox, mainModule, state) => {
+  return `<a href="${getEditorUrl(sandbox, mainModule, state)}">
+  <img alt="Edit ${sandbox.title || sandbox.id}" src="${BUTTON_URL}">
+</a>
+`;
+};
diff --git a/packages/app/src/app/pages/common/Modals/ShareModal/index.js b/packages/app/src/app/pages/common/Modals/ShareModal/index.js
diff --git a/packages/common/utils/url-generator.js b/packages/common/utils/url-generator.js

Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,7 @@`
`26`	`26`	`<script>`
`27`	`27`	`WebFont.load({`
`28`	`28`	`google: {`
`29`		`- families: ['Source Code Pro:500', 'Roboto:300,400,500,700']`
	`29`	`+ families: ['Source Code Pro:500', 'Roboto:300,400,500,700', 'Poppins:300,400,500,700']`
`30`	`30`	`}`
`31`	`31`	`});`
`32`	`32`	`</script>`