r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

fixes #802 (#809)

Browse source
This commit is contained in:
Cassie Tarakajian 2019-01-16 12:35:34 -05:00 committed by GitHub
parent 6d2a6cd9f8
commit 437ffba378
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 60 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
client/images/share.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 828 B

25
client/modules/IDE/components/CopyableInput.jsx
View file

@ -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>
);
}

6
client/modules/IDE/components/ShareModal.jsx
View file

@ -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>

6
client/styles/abstracts/_placeholders.scss
View file

@ -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');
}
}
}
}

17
client/styles/components/_copyable-input.scss
View file

@ -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;
}
}

1
server/routes/embed.routes.js
View file

@ -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;