Tweaks to editor and add file icons

Author: Ives van Hoorne

src/app/components/user/PatronStar.js

@@ -16,7 +16,7 @@ export default ({
   subscriptionSince: string,
 }) =>
   <Container
-    title={`Patron since ${moment(subscriptionSince).format('MMM YY')}!`}
+    title={`Patron since ${moment(subscriptionSince).format('MMM Y')}`}
   >
     <StarIcon {...props} />
   </Container>;

src/app/pages/Sandbox/Editor/Content/Header/FeedbackView.js

@@ -23,12 +23,11 @@ const MessageView = styled.div`
   color: rgba(255, 255, 255, 0.8);
   padding: 1rem;
 
-  box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
+  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
   background-color: ${props => props.theme.background2};
 
   width: 400px;
 
-
   h3 {
     margin: 0;
     margin-bottom: 0.5rem;
@@ -73,10 +72,10 @@ export default class FeedbackView extends React.PureComponent {
           HeaderComponent={Action}
           headerProps={{
             Icon: FeedbackIcon,
-            moreInfo: true,
+            tooltip: 'Give feedback',
           }}
         >
-          {toggle => (
+          {toggle =>
             <MessageView>
               <h3>Send feedback</h3>
               <textarea
@@ -86,8 +85,7 @@ export default class FeedbackView extends React.PureComponent {
                 onChange={this.handleChange}
               />
               <Button onClick={this.handleSend(toggle)}>Send</Button>
-            </MessageView>
-          )}
+            </MessageView>}
         </HoverMenu>
       </Container>
     );

src/app/pages/Sandbox/Editor/Content/Header/index.js

@@ -23,6 +23,7 @@ import {
 } from 'app/utils/url-generator';
 import ModeIcons from 'app/components/sandbox/ModeIcons';
 
+import Margin from 'app/components/spacing/Margin';
 import UserMenu from 'app/containers/UserMenu';
 
 import Action from './Action';
@@ -199,7 +200,7 @@ export default class Header extends React.PureComponent {
           <Action
             href="https://twitter.com/CompuIves"
             a
-            tooltip="Message me"
+            tooltip="Contact"
             Icon={TwitterIcon}
           />
           <FeedbackView
@@ -211,23 +212,25 @@ export default class Header extends React.PureComponent {
             tooltip="Import from GitHub"
             Icon={GithubIcon}
           />
-          <Action href={searchUrl()} tooltip="Search" Icon={SearchIcon} />
+          <Action href={searchUrl()} Icon={SearchIcon} tooltip="Search" />
           <Action
             href={newSandboxUrl()}
             tooltip="New Sandbox"
             Icon={PlusIcon}
           />
-          {user.jwt
-            ? <div style={{ fontSize: '.875rem', margin: '6px 0.5rem' }}>
-                <UserMenu small />
-              </div>
-            : <Action
-                onClick={userActions.signIn}
-                title="Sign in with Github"
-                Icon={GithubIcon}
-                highlight
-                unresponsive
-              />}
+          <Margin left={1}>
+            {user.jwt
+              ? <div style={{ fontSize: '.875rem', margin: '6px 0.5rem' }}>
+                  <UserMenu small />
+                </div>
+              : <Action
+                  onClick={userActions.signIn}
+                  title="Sign in with Github"
+                  Icon={GithubIcon}
+                  highlight
+                  unresponsive
+                />}
+          </Margin>
         </Right>
       </Container>
     );

src/app/pages/Sandbox/Editor/Content/index.js

@@ -57,7 +57,7 @@ const FullSize = styled.div`
   height: 100%;
   width: 100%;
   pointer-events: ${props => (props.inactive ? 'none' : 'all')};
-  ${fadeIn(0)}
+  ${fadeIn(0)};
 `;
 
 const mapStateToProps = createSelector(
@@ -134,10 +134,14 @@ class EditorPreview extends React.PureComponent {
 
     const mainModule = findMainModule(modules);
     if (!mainModule) throw new Error('Cannot find main module');
-    
+
     const { currentModule: currentModuleId } = sandbox;
-    
-    const currentModule = findCurrentModule(modules, currentModuleId, mainModule);
+
+    const currentModule = findCurrentModule(
+      modules,
+      currentModuleId,
+      mainModule,
+    );
     const modulePath = getModulePath(modules, directories, currentModule.id);
 
     if (currentModule == null) return null;
@@ -206,22 +210,21 @@ class EditorPreview extends React.PureComponent {
           minSize={360}
           paneStyle={{ height: '100%' }}
           resizerStyle={{
-            visibility: (!sandbox.showPreview && sandbox.showEditor) ||
+            visibility:
+              (!sandbox.showPreview && sandbox.showEditor) ||
               (sandbox.showPreview && !sandbox.showEditor)
-              ? 'hidden'
-              : 'visible',
+                ? 'hidden'
+                : 'visible',
           }}
           pane1Style={{
             display: sandbox.showEditor ? 'block' : 'none',
-            minWidth: !sandbox.showPreview && sandbox.showEditor
-              ? '100%'
-              : 'inherit',
+            minWidth:
+              !sandbox.showPreview && sandbox.showEditor ? '100%' : 'inherit',
           }}
           pane2Style={{
             display: sandbox.showPreview ? 'block' : 'none',
-            minWidth: sandbox.showPreview && !sandbox.showEditor
-              ? '100%'
-              : 'inherit',
+            minWidth:
+              sandbox.showPreview && !sandbox.showEditor ? '100%' : 'inherit',
           }}
         >
           {sandbox.showEditor && EditorPane}

src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/DirectoryChildren.js

@@ -5,6 +5,7 @@ import type { Module, Directory, ModuleError } from 'common/types';
 
 import { validateTitle } from 'app/store/entities/sandboxes/modules/validator';
 import { isMainModule } from 'app/store/entities/sandboxes/modules/selectors';
+import getType from 'app/store/entities/sandboxes/modules/utils/get-type';
 
 import Entry from './Entry';
 import DirectoryEntry from './';
@@ -53,7 +54,7 @@ export default class DirectoryChildren extends React.PureComponent {
       <div>
         {directories
           .filter(x => x.directoryShortid === parentShortid)
-          .map(dir => (
+          .map(dir =>
             <DirectoryEntry
               key={dir.id}
               siblings={[...directories, ...modules]}
@@ -67,11 +68,12 @@ export default class DirectoryChildren extends React.PureComponent {
               currentModuleId={currentModuleId}
               isInProjectView={isInProjectView}
               errors={errors}
-            />
-          ))}
+            />,
+          )}
         {modules.filter(x => x.directoryShortid === parentShortid).map(m => {
           const isActive = m.id === currentModuleId;
           const mainModule = isMainModule(m);
+          const type = getType(m);
 
           const hasError = !!errors.find(
             e => e.severity === 'error' && e.moduleId === m.id,
@@ -85,7 +87,7 @@ export default class DirectoryChildren extends React.PureComponent {
               title={m.title}
               depth={depth + 1}
               active={isActive}
-              type="function"
+              type={type || 'function'}
               rename={mainModule ? undefined : renameModule}
               openMenu={openMenu}
               deleteEntry={mainModule ? undefined : deleteEntry}

src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons.js

@@ -6,6 +6,8 @@ import FunctionIcon from 'react-icons/lib/fa/code';
 import FolderIcon from 'react-icons/lib/md/keyboard-arrow-down';
 import DirectoryIcon from 'react-icons/lib/go/file-directory';
 import NotSyncedIcon from 'react-icons/lib/go/primitive-dot';
+import CSSIcon from 'react-icons/lib/fa/css3';
+import HTMLIcon from 'react-icons/lib/fa/html5';
 import ErrorIcon from 'react-icons/lib/md/error';
 import ReactIcon from 'app/components/ReactIcon';
 
@@ -15,9 +17,7 @@ const NotSyncedIconWithMargin = styled(NotSyncedIcon)`
   color: ${props => props.theme.secondary};
 `;
 
-const RedIcon = styled.span`
-  color: ${props => props.theme.red};
-`;
+const RedIcon = styled.span`color: ${props => props.theme.red};`;
 
 const StyledFolderIcon = styled.span`
   svg {
@@ -34,18 +34,27 @@ const getIcon = (type, error, root) => {
     return <ProjectIcon />;
   }
   if (error) {
-    return <RedIcon><ErrorIcon /></RedIcon>;
-  }
-  if (type === 'react') {
-    return <ReactIcon />;
+    return (
+      <RedIcon>
+        <ErrorIcon />
+      </RedIcon>
+    );
   }
-  if (type === 'function') {
-    return <FunctionIcon />;
-  }
-  if (type === 'directory') {
-    return <DirectoryIcon />;
+
+  switch (type) {
+    case 'react':
+      return <ReactIcon />;
+    case 'function':
+      return <FunctionIcon />;
+    case 'directory':
+      return <DirectoryIcon />;
+    case 'css':
+      return <CSSIcon />;
+    case 'html':
+      return <HTMLIcon />;
+    default:
+      return <FunctionIcon />;
   }
-  return <FunctionIcon />;
 };
 
 type Props = {
@@ -65,7 +74,7 @@ export default ({
   isNotSynced,
   isOpen,
   onOpen,
-}: Props) => (
+}: Props) =>
   <div style={{ display: 'inline-block', verticalAlign: 'middle' }}>
     {isNotSynced && <NotSyncedIconWithMargin />}
     {type === 'directory' &&
@@ -74,5 +83,4 @@ export default ({
         <FolderIcon />
       </StyledFolderIcon>}
     {getIcon(type, error, root)}
-  </div>
-);
+  </div>;

src/app/pages/Sandbox/Editor/Workspace/Logo/index.js

@@ -2,7 +2,11 @@
 import React from 'react';
 import styled, { injectGlobal } from 'styled-components';
 
+import GithubIcon from 'react-icons/lib/go/mark-github';
+
+import Relative from 'app/components/Relative';
 import LogoIcon from 'app/components/Logo';
+import Tooltip from 'app/components/Tooltip';
 import theme from 'common/theme';
 
 const Container = styled.a`
@@ -27,6 +31,17 @@ const Title = styled.h1`
   color: white;
 `;
 
+const GithubContainer = styled.a`
+  position: absolute;
+  right: 1rem;
+  top: 0;
+  line-height: 3rem;
+  vertical-align: middle;
+  font-size: 1rem;
+  color: rgba(255, 255, 255, 0.8);
+  text-decoration: none;
+`;
+
 export default class Logo extends React.PureComponent {
   setupHeadway = el => {
     if (el && window.Headway) {
@@ -50,12 +65,24 @@ export default class Logo extends React.PureComponent {
 
   render() {
     return (
-      <Container id="release" ref={this.setupHeadway} href="/">
-        <div style={{ position: 'relative', display: 'flex' }}>
-          <LogoIcon width={30} height={30} />
-        </div>
-        <Title>CodeSandbox</Title>
-      </Container>
+      <Relative>
+        <Container id="release" ref={this.setupHeadway} href="/">
+          <div style={{ position: 'relative', display: 'flex' }}>
+            <LogoIcon width={30} height={30} />
+          </div>
+          <Title>CodeSandbox</Title>
+        </Container>
+
+        <GithubContainer
+          href="https://github.com/CompuIves/codesandbox-client"
+          target="_blank"
+          rel="noreferrer noopener"
+        >
+          <Tooltip title="View source">
+            <GithubIcon />
+          </Tooltip>
+        </GithubContainer>
+      </Relative>
     );
   }
 }

src/app/pages/Sandbox/Editor/index.js

@@ -3,6 +3,8 @@ import React from 'react';
 import SplitPane from 'react-split-pane';
 import type { Sandbox } from 'common/types';
 
+import Fullscreen from 'app/components/flex/Fullscreen';
+
 import Workspace from './Workspace';
 
 import Content from './Content';
@@ -29,27 +31,29 @@ export default class ContentSplit extends React.PureComponent {
     const { sandbox, match } = this.props;
     const { resizing, workspaceHidden } = this.state;
     return (
-      <SplitPane
-        split="vertical"
-        defaultSize={16 * 16}
-        style={{ top: 0 }}
-        onDragStarted={this.startResizing}
-        onDragFinished={this.stopResizing}
-        resizerStyle={{ visibility: workspaceHidden ? 'hidden' : 'visible' }}
-        pane1Style={{
-          visibility: workspaceHidden ? 'hidden' : 'visible',
-          maxWidth: workspaceHidden ? 0 : 'inherit',
-        }}
-      >
-        {!workspaceHidden && <Workspace sandbox={sandbox} />}
-        <Content
-          workspaceHidden={workspaceHidden}
-          toggleWorkspace={this.toggleWorkspace}
-          sandbox={sandbox}
-          resizing={resizing}
-          match={match}
-        />
-      </SplitPane>
+      <Fullscreen style={{ position: 'relative' }}>
+        <SplitPane
+          split="vertical"
+          defaultSize={16 * 16}
+          style={{ top: 0 }}
+          onDragStarted={this.startResizing}
+          onDragFinished={this.stopResizing}
+          resizerStyle={{ visibility: workspaceHidden ? 'hidden' : 'visible' }}
+          pane1Style={{
+            visibility: workspaceHidden ? 'hidden' : 'visible',
+            maxWidth: workspaceHidden ? 0 : 'inherit',
+          }}
+        >
+          {!workspaceHidden && <Workspace sandbox={sandbox} />}
+          <Content
+            workspaceHidden={workspaceHidden}
+            toggleWorkspace={this.toggleWorkspace}
+            sandbox={sandbox}
+            resizing={resizing}
+            match={match}
+          />
+        </SplitPane>
+      </Fullscreen>
     );
   }
 }