Use icons in toolbar

Author: dabbott

src/components/workspace/CodeSandboxButton.tsx

@@ -135,7 +135,11 @@ export const CodeSandboxButton = memo(function CodeSandboxButton({
  target="_blank"
  >
  <input type="hidden" name="parameters" value={parameters} />
- <button style={styles.button} type="submit">
+ <button
+ title={internalOptions.strings.codesandbox}
+ style={styles.button}
+ type="submit"
+ >
  <HeaderLink>{children}</HeaderLink>
  </button>
  </form>

src/components/workspace/HeaderLink.tsx

@@ -2,34 +2,67 @@ import React, { CSSProperties, memo } from 'react'
 import { mergeStyles, prefixObject } from '../../utils/Styles'
 
 const styles = prefixObject({
+ buttonReset: {
+ border: 'none',
+ margin: '0',
+ padding: '0',
+ width: 'auto',
+ overflow: 'visible',
+ background: 'transparent',
+ color: 'inherit',
+ font: 'inherit',
+ lineHeight: 'normal',
+ WebkitFontSmoothing: 'inherit',
+ MozOsxFontSmoothing: 'inherit',
+ WebkitAppearance: 'none',
+ },
  text: {
  color: '#FFF',
  fontSize: 13,
  fontFamily: 'proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif',
- padding: '0 20px',
+ marginRight: '20px',
  display: 'flex',
  alignItems: 'center',
  cursor: 'pointer',
- textDecoration: 'underline',
+ textDecoration: 'none',
  },
 })
 
 interface Props {
- children: React.ReactNode
+ href?: string
  textStyle?: CSSProperties
+ title?: string
  onClick?: () => void
+ children: React.ReactNode
 }
 
-export default memo(function Fullscreen({
+export default memo(function HeaderLink({
  textStyle,
+ href,
  onClick,
+ title,
  children,
 }: Props) {
  const computedTextStyle = mergeStyles(styles.text, textStyle)
+ const buttonStyle = mergeStyles(styles.buttonReset, styles.text, textStyle)
 
- return (
- <div style={computedTextStyle} onClick={onClick}>
- {children}
- </div>
- )
+ if (href) {
+ return (
+ <a
+ title={title}
+ style={computedTextStyle}
+ onClick={onClick}
+ href={href}
+ target="_blank"
+ >
+ {children}
+ </a>
+ )
+ } else {
+ return (
+ <button title={title} style={buttonStyle} onClick={onClick}>
+ {children}
+ </button>
+ )
+ }
 })

src/components/workspace/Icons.tsx

@@ -0,0 +1,80 @@
+// https://github.com/radix-ui/icons
+
+// MIT License
+//
+// Copyright (c) 2020 Modulz
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+import React, { memo } from 'react'
+
+type IconProps = React.SVGProps<SVGSVGElement>
+
+const defaultProps: IconProps = {
+ width: '15',
+ height: '15',
+ viewBox: '0 0 15 15',
+ fill: 'none',
+ xmlns: 'http://www.w3.org/2000/svg',
+}
+
+export const EnterFullScreenIcon = memo(
+ ({ color = 'currentColor', ...props }: IconProps) => {
+ return (
+ <svg {...defaultProps} {...props}>
+ <path
+ d="M2 2.5C2 2.22386 2.22386 2 2.5 2H5.5C5.77614 2 6 2.22386 6 2.5C6 2.77614 5.77614 3 5.5 3H3V5.5C3 5.77614 2.77614 6 2.5 6C2.22386 6 2 5.77614 2 5.5V2.5ZM9 2.5C9 2.22386 9.22386 2 9.5 2H12.5C12.7761 2 13 2.22386 13 2.5V5.5C13 5.77614 12.7761 6 12.5 6C12.2239 6 12 5.77614 12 5.5V3H9.5C9.22386 3 9 2.77614 9 2.5ZM2.5 9C2.77614 9 3 9.22386 3 9.5V12H5.5C5.77614 12 6 12.2239 6 12.5C6 12.7761 5.77614 13 5.5 13H2.5C2.22386 13 2 12.7761 2 12.5V9.5C2 9.22386 2.22386 9 2.5 9ZM12.5 9C12.7761 9 13 9.22386 13 9.5V12.5C13 12.7761 12.7761 13 12.5 13H9.5C9.22386 13 9 12.7761 9 12.5C9 12.2239 9.22386 12 9.5 12H12V9.5C12 9.22386 12.2239 9 12.5 9Z"
+ fill={color}
+ fillRule="evenodd"
+ clipRule="evenodd"
+ />
+ </svg>
+ )
+ }
+)
+
+export const ExternalLinkIcon = memo(
+ ({ color = 'currentColor', ...props }: IconProps) => {
+ return (
+ <svg {...defaultProps} {...props}>
+ <path
+ d="M3 2C2.44772 2 2 2.44772 2 3V12C2 12.5523 2.44772 13 3 13H12C12.5523 13 13 12.5523 13 12V8.5C13 8.22386 12.7761 8 12.5 8C12.2239 8 12 8.22386 12 8.5V12H3V3L6.5 3C6.77614 3 7 2.77614 7 2.5C7 2.22386 6.77614 2 6.5 2H3ZM12.8536 2.14645C12.9015 2.19439 12.9377 2.24964 12.9621 2.30861C12.9861 2.36669 12.9996 2.4303 13 2.497L13 2.5V2.50049V5.5C13 5.77614 12.7761 6 12.5 6C12.2239 6 12 5.77614 12 5.5V3.70711L6.85355 8.85355C6.65829 9.04882 6.34171 9.04882 6.14645 8.85355C5.95118 8.65829 5.95118 8.34171 6.14645 8.14645L11.2929 3H9.5C9.22386 3 9 2.77614 9 2.5C9 2.22386 9.22386 2 9.5 2H12.4999H12.5C12.5678 2 12.6324 2.01349 12.6914 2.03794C12.7504 2.06234 12.8056 2.09851 12.8536 2.14645Z"
+ fill={color}
+ fillRule="evenodd"
+ clipRule="evenodd"
+ />
+ </svg>
+ )
+ }
+)
+
+export const CubeIcon = memo(
+ ({ color = 'currentColor', ...props }: IconProps) => {
+ return (
+ <svg {...defaultProps} {...props}>
+ <path
+ d="M7.28856 0.796908C7.42258 0.734364 7.57742 0.734364 7.71144 0.796908L13.7114 3.59691C13.8875 3.67906 14 3.85574 14 4.05V10.95C14 11.1443 13.8875 11.3209 13.7114 11.4031L7.71144 14.2031C7.57742 14.2656 7.42258 14.2656 7.28856 14.2031L1.28856 11.4031C1.11252 11.3209 1 11.1443 1 10.95V4.05C1 3.85574 1.11252 3.67906 1.28856 3.59691L7.28856 0.796908ZM2 4.80578L7 6.93078V12.9649L2 10.6316V4.80578ZM8 12.9649L13 10.6316V4.80578L8 6.93078V12.9649ZM7.5 6.05672L12.2719 4.02866L7.5 1.80176L2.72809 4.02866L7.5 6.05672Z"
+ fill={color}
+ fillRule="evenodd"
+ clipRule="evenodd"
+ />
+ </svg>
+ )
+ }
+)

src/components/workspace/panes/EditorPane.tsx

@@ -22,6 +22,7 @@ import type { WorkspaceDiff } from '../App'
 import { TypeScriptOptions, UserInterfaceStrings } from '../../../utils/options'
 import { useOptions } from '../../../contexts/OptionsContext'
 import { CodeSandboxButton } from '../CodeSandboxButton'
+import { CubeIcon, EnterFullScreenIcon, ExternalLinkIcon } from '../Icons'
 
 const toggleFullscreen = () => (screenfull as any).toggle()
 
@@ -117,19 +118,30 @@ export default memo(function EditorPane({
 
  const headerElements = (
  <>
- {fullscreen && (
+ {internalOptions.openInNewWindow && (
  <HeaderLink
+ title={strings.openInNewWindow}
  textStyle={externalStyles.tabText}
- onClick={toggleFullscreen}
+ // There may not be a need to guard here, but just in case it runs server-side
+ href={typeof location !== undefined ? location.href : undefined}
  >
- {strings.fullscreen}
+ <ExternalLinkIcon />
  </HeaderLink>
  )}
  {internalOptions.codesandbox && (
  <CodeSandboxButton files={files}>
- {strings.codesandbox}
+ <CubeIcon />
  </CodeSandboxButton>
  )}
+ {fullscreen && (
+ <HeaderLink
+ title={strings.fullscreen}
+ textStyle={externalStyles.tabText}
+ onClick={toggleFullscreen}
+ >
+ <EnterFullScreenIcon />
+ </HeaderLink>
+ )}
  </>
  )
 

src/utils/options.ts

@@ -35,6 +35,7 @@ const userInterfaceStrings = {
  noErrors: 'No Errors',
  showDetails: 'Show Details',
  fullscreen: 'Fullscreen',
+ openInNewWindow: 'Open in new window',
  codesandbox: 'Open in CodeSandbox',
 }
 
@@ -59,6 +60,7 @@ export interface PublicOptions {
  styles?: ExternalStyles
  fullscreen?: boolean
  codesandbox?: boolean
+ openInNewWindow?: boolean
  sharedEnvironment?: boolean
  compiler?: CompilerOptions
  playground?: Partial<PlaygroundOptions>
@@ -296,6 +298,7 @@ export function normalize(options: PublicOptions): InternalOptions {
  styles = Object.assign({}, presetOptions[preset]?.styles, options.styles),
  fullscreen = false,
  codesandbox = false,
+ openInNewWindow = false,
  sharedEnvironment = false,
  panes = ['editor', 'player'],
  responsivePaneSets = [],
@@ -371,6 +374,7 @@ export function normalize(options: PublicOptions): InternalOptions {
  styles,
  strings: Object.assign({}, userInterfaceStrings, rawStrings),
  codesandbox,
+ openInNewWindow,
  fullscreen,
  sharedEnvironment,
  responsivePaneSets: normalizedPaneSets,