fixes #802 (#809)

client/images/share.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
+<g>
+	<path d="M77.202,60.609v12.399c0,2.08-1.681,3.761-3.761,3.761H25.761c-2.08,0-3.84-1.681-3.84-3.761v-35.44
+		c0-2.16,1.76-3.84,3.84-3.84h14.64v5.76h-12.72v31.521h43.761V60.609H77.202z M60.002,37.248l-2.801-11.36l22.161,16.4
+		L57.201,57.809l2.801-11.28c0,0-16.241-0.24-16.881,16.72h-2.88C40.241,63.248,40.001,38.368,60.002,37.248z"/>
+</g>
+</svg>

client/modules/IDE/components/CopyableInput.jsx

@@ -1,6 +1,10 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import Clipboard from 'clipboard';
+import InlineSVG from 'react-inlinesvg';
+import classNames from 'classnames';
+
+import shareUrl from '../../../images/share.svg';
 
 class CopyableInput extends React.Component {
   constructor(props) {
@@ -34,8 +38,12 @@ class CopyableInput extends React.Component {
       value,
       hasPreviewLink
     } = this.props;
+    const copyableInputClass = classNames({
+      'copyable-input': true,
+      'copyable-input--with-preview': hasPreviewLink
+    });
     return (
-      <div className="copyable-input">
+      <div className={copyableInputClass}>
         <div
           className="copyable-input__value-container tooltipped-no-delay"
           aria-label="Copied to Clipboard!"
@@ -44,10 +52,7 @@ class CopyableInput extends React.Component {
         >
           <label className="copyable-input__label" htmlFor={`copyable-input__value-${label}`}>
             <div className="copyable-input__label-container">
-              {label} {hasPreviewLink &&
-                <a target="_blank" href={value}>
-                  Open
-                </a>}
+              {label}
             </div>
             <input
               type="text"
@@ -59,6 +64,16 @@ class CopyableInput extends React.Component {
             />
           </label>
         </div>
+        {hasPreviewLink &&
+          <a
+            target="_blank"
+            href={value}
+            className="copyable-input__preview"
+            title={`open ${label.toLowerCase()} view in new tab`}
+          >
+            <InlineSVG src={shareUrl} alt={`open ${label} view in new tab`} />
+          </a>
+        }
       </div>
     );
   }

client/modules/IDE/components/ShareModal.jsx

@@ -19,6 +19,11 @@ class ShareModal extends React.PureComponent {
           label="Embed"
           value={`<iframe src="${hostname}/${ownerUsername}/embed/${projectId}"></iframe>`}
         />
+        <CopyableInput
+          label="Present"
+          hasPreviewLink
+          value={`${hostname}/${ownerUsername}/present/${projectId}`}
+        />
         <CopyableInput
           label="Fullscreen"
           hasPreviewLink
@@ -26,6 +31,7 @@ class ShareModal extends React.PureComponent {
         />
         <CopyableInput
           label="Edit"
+          hasPreviewLink
           value={`${hostname}/${ownerUsername}/sketches/${projectId}`}
         />
       </div>

client/styles/abstracts/_placeholders.scss

@@ -87,11 +87,17 @@
 			border-color: getThemifyVariable('button-background-hover-color');
 			background-color: getThemifyVariable('button-background-hover-color');
 			color: getThemifyVariable('button-hover-color');
+			& g {
+				fill: getThemifyVariable('button-hover-color');
+			}
 		}
 		&:enabled:active {
 			border-color: getThemifyVariable('button-background-active-color');
 			background-color: getThemifyVariable('button-background-active-color');
 			color: getThemifyVariable('button-active-color');
+			& g {
+				fill: getThemifyVariable('button-active-color');
+			}
 		}
 	}
 }

client/styles/components/_copyable-input.scss

@@ -13,6 +13,9 @@
 .copyable-input__value {
   width: 100%;
   font-size: #{16 / $base-font-size}rem;
+  .copyable-input--with-preview & {
+    border-radius: 2px 0 0 2px;
+  }
 }
 
 .copyable-input__label {
@@ -32,7 +35,6 @@
 .copyable-input {
   padding-bottom: #{30 / $base-font-size}rem;
   display: flex;
-  flex-wrap: wrap;
 }
 
 .copyable-input__value-container {
@@ -56,3 +58,16 @@
     border-top-color: getThemifyVariable('button-background-hover-color');
   }
 }
+
+.copyable-input__preview {
+  @extend %button;
+  @include themify() {
+    align-self: flex-end;
+    border-radius: 0 2px 2px 0;
+    padding: #{2 / $base-font-size}rem 0;
+  }
+  & svg {
+    height: #{30 / $base-font-size}rem;
+    width: #{30 / $base-font-size}rem;
+  }
+}

server/routes/embed.routes.js

@@ -4,6 +4,7 @@ import * as EmbedController from '../controllers/embed.controller';
 const router = new Router();
 
 router.get('/:username/embed/:project_id', EmbedController.serveProject);
+router.get('/:username/present/:project_id', EmbedController.serveProject);
 router.get('/embed/:project_id', EmbedController.serveProject);
 
 export default router;