Skip to content

Commit 996a1b9

Browse files
Vertmocatarak
Vertmo
authored and
catarak
committed
Fixes #692 (#713)
* Got the basis covered, now I need to style all this * Corrected and upgraded Share window * Changed the routes again, and set correct design * Made some of the requested changes * Removed PreviewFrame errors * Redesigned Preview Header * Corrected style of the FullView * Corrected most of the css mistakes * Corrected logo size
1 parent f4ff0b1 commit 996a1b9

File tree

16 files changed

+137
-31
lines changed

16 files changed

+137
-31
lines changed

‎client/components/PreviewNav.jsx

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import PropTypes from 'prop-types';
2+
import React from 'react';
3+
import { Link } from 'react-router';
4+
import InlineSVG from 'react-inlinesvg';
5+
6+
const logoUrl = require('../images/p5js-logo-small.svg');
7+
const editorUrl = require('../images/code.svg');
8+
9+
const PreviewNav = ({ owner, project }) => (
10+
<nav className="nav">
11+
<div className="nav__items-left">
12+
<div className="nav__item-logo">
13+
<InlineSVG src={logoUrl} alt="p5.js logo" />
14+
</div>
15+
<Link className="nav__item" to={`/${owner.username}/sketches/${project.id}`}>{project.name}</Link>
16+
<p className="toolbar__project-owner">by</p>
17+
<Link className="nav__item" to={`/${owner.username}/sketches/`}>{owner.username}</Link>
18+
</div>
19+
<div className="nav__items-right">
20+
<Link to={`/${owner.username}/sketches/${project.id}`}>
21+
<InlineSVG className="preview-nav__editor-svg" src={editorUrl} />
22+
</Link>
23+
</div>
24+
</nav>
25+
);
26+
27+
PreviewNav.propTypes = {
28+
owner: PropTypes.shape({
29+
username: PropTypes.string.isRequired
30+
}).isRequired,
31+
project: PropTypes.shape({
32+
name: PropTypes.string.isRequired,
33+
id: PropTypes.string.isRequired,
34+
}).isRequired,
35+
};
36+
37+
export default PreviewNav;

‎client/images/code.svg

Lines changed: 8 additions & 0 deletions
Loading

‎client/modules/IDE/components/CopyableInput.jsx

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,8 @@ class CopyableInput extends React.Component {
3131
render() {
3232
const {
3333
label,
34-
value
34+
value,
35+
hasPreviewLink
3536
} = this.props;
3637
return (
3738
<div className="copyable-input">
@@ -42,7 +43,12 @@ class CopyableInput extends React.Component {
4243
onMouseLeave={this.onMouseLeaveHandler}
4344
>
4445
<label className="copyable-input__label" htmlFor={`copyable-input__value-${label}`}>
45-
{label}
46+
<div className="copyable-input__label-container">
47+
{label} {hasPreviewLink &&
48+
<a target="_blank" href={value}>
49+
Open
50+
</a>}
51+
</div>
4652
<input
4753
type="text"
4854
className="copyable-input__value"
@@ -60,7 +66,12 @@ class CopyableInput extends React.Component {
6066

6167
CopyableInput.propTypes = {
6268
label: PropTypes.string.isRequired,
63-
value: PropTypes.string.isRequired
69+
value: PropTypes.string.isRequired,
70+
hasPreviewLink: PropTypes.bool
71+
};
72+
73+
CopyableInput.defaultProps = {
74+
hasPreviewLink: false
6475
};
6576

6677
export default CopyableInput;

‎client/modules/IDE/components/PreviewFrame.jsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -317,8 +317,9 @@ class PreviewFrame extends React.Component {
317317

318318
renderSketch() {
319319
const doc = this.iframeElement;
320+
const localFiles = this.injectLocalFiles();
320321
if (this.props.isPlaying) {
321-
srcDoc.set(doc, this.injectLocalFiles());
322+
srcDoc.set(doc, localFiles);
322323
if (this.props.endSketchRefresh) {
323324
this.props.endSketchRefresh();
324325
}
@@ -331,6 +332,7 @@ class PreviewFrame extends React.Component {
331332
render() {
332333
return (
333334
<iframe
335+
id="canvas_frame"
334336
className="preview-frame"
335337
aria-label="sketch output"
336338
role="main"

‎client/modules/IDE/components/ShareModal.jsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,12 @@ class ShareModal extends React.PureComponent {
1717
</h3>
1818
<CopyableInput
1919
label="Embed"
20-
value={`<iframe src="${hostname}/embed/${projectId}"></iframe>`}
20+
value={`<iframe src="${hostname}/${ownerUsername}/embed/${projectId}"></iframe>`}
2121
/>
2222
<CopyableInput
2323
label="Fullscreen"
24-
value={`${hostname}/full/${projectId}`}
24+
hasPreviewLink
25+
value={`${hostname}/${ownerUsername}/full/${projectId}`}
2526
/>
2627
<CopyableInput
2728
label="Edit"

‎client/modules/IDE/pages/FullView.jsx

Lines changed: 31 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,38 @@
11
import PropTypes from 'prop-types';
22
import React from 'react';
3+
import Helmet from 'react-helmet';
34
import { bindActionCreators } from 'redux';
45
import { connect } from 'react-redux';
56
import PreviewFrame from '../components/PreviewFrame';
7+
import PreviewNav from '../../../components/PreviewNav';
68
import { getHTMLFile, getJSFiles, getCSSFiles } from '../reducers/files';
79
import * as ProjectActions from '../actions/project';
810

9-
1011
class FullView extends React.Component {
1112
componentDidMount() {
1213
this.props.getProject(this.props.params.project_id);
14+
document.body.className = this.props.theme;
15+
}
16+
17+
componentWillUpdate(nextProps) {
18+
if (nextProps.theme !== this.props.theme) {
19+
document.body.className = nextProps.theme;
20+
}
1321
}
1422

23+
ident = () => {}
24+
1525
render() {
1626
return (
1727
<div className="fullscreen-preview">
18-
<h1 className="fullscreen-preview__title">
19-
{this.props.project.name} {this.props.project.owner ? `by ${this.props.project.owner.username}` : ''}
20-
</h1>
21-
<div className="fullscreen-preview__frame-wrapper">
28+
<Helmet>
29+
<title>{this.props.project.name}</title>
30+
</Helmet>
31+
<PreviewNav
32+
owner={{ username: this.props.project.owner ? `${this.props.project.owner.username}` : '' }}
33+
project={{ name: this.props.project.name, id: this.props.params.project_id }}
34+
/>
35+
<div className="preview-frame-holder">
2236
<PreviewFrame
2337
htmlFile={this.props.htmlFile}
2438
jsFiles={this.props.jsFiles}
@@ -29,6 +43,16 @@ class FullView extends React.Component {
2943
}
3044
fullView
3145
isPlaying
46+
isAccessibleOutputPlaying={false}
47+
textOutput={false}
48+
gridOutput={false}
49+
soundOutput={false}
50+
dispatchConsoleEvent={this.ident}
51+
endSketchRefresh={this.ident}
52+
previewIsRefreshing={false}
53+
setBlobUrl={this.ident}
54+
stopSketch={this.ident}
55+
expandConsole={this.ident}
3256
/>
3357
</div>
3458
</div>
@@ -37,6 +61,7 @@ class FullView extends React.Component {
3761
}
3862

3963
FullView.propTypes = {
64+
theme: PropTypes.string.isRequired,
4065
params: PropTypes.shape({
4166
project_id: PropTypes.string
4267
}).isRequired,
@@ -72,6 +97,7 @@ FullView.propTypes = {
7297
function mapStateToProps(state) {
7398
return {
7499
user: state.user,
100+
theme: state.preferences.theme,
75101
htmlFile: getHTMLFile(state.files),
76102
jsFiles: getJSFiles(state.files),
77103
cssFiles: getCSSFiles(state.files),

‎client/routes.jsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ const routes = store => (
3333
component={NewPasswordView}
3434
/>
3535
<Route path="/projects/:project_id" component={IDEView} />
36+
<Route path="/:username/full/:project_id" component={FullView} />
3637
<Route path="/full/:project_id" component={FullView} />
3738
<Route path="/sketches" component={IDEView} />
3839
<Route path="/assets" component={IDEView} />

‎client/styles/abstracts/_variables.scss

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ $themes: (
3030
toolbar-button-background-color: #f4f4f4,
3131
button-background-hover-color: $p5js-pink,
3232
button-background-active-color: #f10046,
33+
button-nav-inactive-color: #a0a0a0,
3334
button-hover-color: $white,
3435
button-active-color: $white,
3536
modal-background-color: #f4f4f4,
@@ -77,6 +78,7 @@ $themes: (
7778
toolbar-button-background-color: #424242,
7879
button-background-hover-color: $p5js-pink,
7980
button-background-active-color: #f10046,
81+
button-nav-inactive-color: #a0a0a0,
8082
button-hover-color: $white,
8183
button-active-color: $white,
8284
modal-background-color: #444,
@@ -122,6 +124,7 @@ $themes: (
122124
toolbar-button-background-color: #C1C1C1,
123125
button-background-hover-color: $yellow,
124126
button-background-active-color: #f10046,
127+
button-nav-inactive-color: #a0a0a0,
125128
button-hover-color: #333333,
126129
button-active-color: #333333,
127130
modal-background-color: #444,
@@ -171,4 +174,4 @@ $form-button-active-color: $white;
171174
$form-navigation-options-color: #999999;
172175

173176
$about-play-background-color: rgba(255, 255, 255, 0.7);
174-
$about-button-border-color: rgba(151, 151, 151, 0.7);
177+
$about-button-border-color: rgba(151, 151, 151, 0.7);

‎client/styles/components/_copyable-input.scss

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,11 @@
2424
}
2525
}
2626

27+
.copyable-input__label-container {
28+
display: flex;
29+
justify-content: space-between;
30+
}
31+
2732
.copyable-input {
2833
padding-bottom: #{30 / $base-font-size}rem;
2934
display: flex;
@@ -50,4 +55,4 @@
5055
color: getThemifyVariable('button-background-hover-color');
5156
border-top-color: getThemifyVariable('button-background-hover-color');
5257
}
53-
}
58+
}

‎client/styles/components/_nav.scss

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
.nav {
2-
width: calc(100% - #{10 / $base-font-size}rem);
32
height: #{42 / $base-font-size}rem;
43
display: flex;
54
flex-direction: row;
@@ -225,4 +224,3 @@
225224
}
226225
}
227226
}
228-

0 commit comments

Comments
 (0)