Skip to content

Commit 0193ee8

Browse files
andrewnandrewn
committed
Standalone sketch list and asset page
1 parent 1b461d3 commit 0193ee8

File tree

9 files changed

+241
-31
lines changed

9 files changed

+241
-31
lines changed

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

Lines changed: 0 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,6 @@ import * as ToastActions from '../actions/toast';
2929
import * as ConsoleActions from '../actions/console';
3030
import { getHTMLFile } from '../reducers/files';
3131
import Overlay from '../../App/components/Overlay';
32-
import SketchList from '../components/SketchList';
33-
import AssetList from '../components/AssetList';
3432
import About from '../components/About';
3533
import Feedback from '../components/Feedback';
3634

@@ -365,30 +363,6 @@ class IDEView extends React.Component {
365363
createFolder={this.props.createFolder}
366364
/>
367365
}
368-
{ this.props.location.pathname.match(/sketches$/) &&
369-
<Overlay
370-
ariaLabel="project list"
371-
title="Open a Sketch"
372-
previousPath={this.props.ide.previousPath}
373-
>
374-
<SketchList
375-
username={this.props.params.username}
376-
user={this.props.user}
377-
/>
378-
</Overlay>
379-
}
380-
{ this.props.location.pathname.match(/assets$/) &&
381-
<Overlay
382-
title="Assets"
383-
ariaLabel="asset list"
384-
previousPath={this.props.ide.previousPath}
385-
>
386-
<AssetList
387-
username={this.props.params.username}
388-
user={this.props.user}
389-
/>
390-
</Overlay>
391-
}
392366
{ this.props.location.pathname === '/about' &&
393367
<Overlay
394368
previousPath={this.props.ide.previousPath}

‎client/modules/User/components/DashboardTabSwitcher.jsx

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import PropTypes from 'prop-types';
2+
import React from 'react';
3+
import { Link } from 'react-router';
4+
5+
const TabKey = {
6+
assets: 'assets',
7+
sketches: 'sketches',
8+
};
9+
10+
const Tab = ({ children, isSelected, to }) => {
11+
const selectedClassName = 'dashboard-header__tab--selected';
12+
13+
const location = { pathname: to, state: { skipSavingPath: true } };
14+
const content = isSelected ? children : <Link to={location}>{children}</Link>;
15+
return (
16+
<li className={`dashboard-header__tab ${isSelected && selectedClassName}`}>
17+
<h4 className="dashboard-header__tab__title">
18+
{content}
19+
</h4>
20+
</li>
21+
);
22+
};
23+
24+
Tab.propTypes = {
25+
children: PropTypes.element.isRequired,
26+
isSelected: PropTypes.bool.isRequired,
27+
to: PropTypes.string.isRequired,
28+
};
29+
30+
const DashboardTabSwitcher = ({ currentTab, isOwner, username }) => {
31+
return (
32+
<ul className="dashboard-header__switcher">
33+
<div className="dashboard-header__tabs">
34+
<Tab to={`/${username}/sketches`} isSelected={currentTab === 'sketches'}>Sketches</Tab>
35+
{isOwner && <Tab to={`/${username}/assets`} isSelected={currentTab === 'assets'}>Assets</Tab>}
36+
</div>
37+
</ul>
38+
);
39+
};
40+
41+
DashboardTabSwitcher.propTypes = {
42+
currentTab: PropTypes.string.isRequired,
43+
isOwner: PropTypes.bool.isRequired,
44+
username: PropTypes.string.isRequired,
45+
};
46+
47+
export { DashboardTabSwitcher as default, TabKey };

‎client/modules/User/pages/DashboardView.jsx

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
import PropTypes from 'prop-types';
2+
import React from 'react';
3+
import { connect } from 'react-redux';
4+
import { bindActionCreators } from 'redux';
5+
import { browserHistory, Link } from 'react-router';
6+
import { Helmet } from 'react-helmet';
7+
import { updateSettings, initiateVerification, createApiKey, removeApiKey } from '../actions';
8+
import NavBasic from '../../../components/NavBasic';
9+
10+
import AssetList from '../../IDE/components/AssetList';
11+
import SketchList from '../../IDE/components/SketchList';
12+
13+
import DashboardTabSwitcher, { TabKey } from '../components/DashboardTabSwitcher';
14+
15+
class DashboardView extends React.Component {
16+
static defaultProps = {
17+
user: null,
18+
};
19+
20+
constructor(props) {
21+
super(props);
22+
this.closeAccountPage = this.closeAccountPage.bind(this);
23+
this.gotoHomePage = this.gotoHomePage.bind(this);
24+
}
25+
26+
componentDidMount() {
27+
document.body.className = this.props.theme;
28+
}
29+
30+
closeAccountPage() {
31+
browserHistory.push(this.props.previousPath);
32+
}
33+
34+
gotoHomePage() {
35+
browserHistory.push('/');
36+
}
37+
38+
selectedTabName() {
39+
const path = this.props.location.pathname;
40+
41+
if (/assets/.test(path)) {
42+
return TabKey.assets;
43+
}
44+
45+
return TabKey.sketches;
46+
}
47+
48+
ownerName() {
49+
if (this.props.params.username) {
50+
return this.props.params.username;
51+
}
52+
53+
return this.props.user.username;
54+
}
55+
56+
isOwner() {
57+
return this.props.user.username === this.props.params.username;
58+
}
59+
60+
navigationItem() {
61+
62+
}
63+
64+
render() {
65+
const currentTab = this.selectedTabName();
66+
const isOwner = this.isOwner();
67+
const { username } = this.props.params;
68+
69+
return (
70+
<div className="dashboard">
71+
<Helmet>
72+
<title>p5.js Web Editor | Account</title>
73+
</Helmet>
74+
75+
<NavBasic onBack={this.closeAccountPage} />
76+
77+
<section className="dashboard-header">
78+
<div className="dashboard-header__header">
79+
<h2 className="dashboard-header__header__title">{this.ownerName()}</h2>
80+
81+
<DashboardTabSwitcher currentTab={currentTab} isOwner={isOwner} username={username} />
82+
</div>
83+
84+
<div className="dashboard-content">
85+
{
86+
currentTab === TabKey.sketches ? <SketchList username={username} /> : <AssetList username={username} />
87+
}
88+
</div>
89+
</section>
90+
</div>
91+
);
92+
}
93+
}
94+
95+
function mapStateToProps(state) {
96+
return {
97+
previousPath: state.ide.previousPath,
98+
user: state.user,
99+
theme: state.preferences.theme
100+
};
101+
}
102+
103+
function mapDispatchToProps(dispatch) {
104+
return bindActionCreators({
105+
updateSettings, initiateVerification, createApiKey, removeApiKey
106+
}, dispatch);
107+
}
108+
109+
DashboardView.propTypes = {
110+
location: PropTypes.shape({
111+
pathname: PropTypes.string.isRequired,
112+
}).isRequired,
113+
params: PropTypes.shape({
114+
username: PropTypes.string.isRequired,
115+
}).isRequired,
116+
previousPath: PropTypes.string.isRequired,
117+
theme: PropTypes.string.isRequired,
118+
user: PropTypes.shape({
119+
username: PropTypes.string.isRequired,
120+
}),
121+
};
122+
123+
export default connect(mapStateToProps, mapDispatchToProps)(DashboardView);

‎client/routes.jsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import ResetPasswordView from './modules/User/pages/ResetPasswordView';
99
import EmailVerificationView from './modules/User/pages/EmailVerificationView';
1010
import NewPasswordView from './modules/User/pages/NewPasswordView';
1111
import AccountView from './modules/User/pages/AccountView';
12+
import DashboardView from './modules/User/pages/DashboardView';
1213
// import SketchListView from './modules/Sketch/pages/SketchListView';
1314
import { getUser } from './modules/User/actions';
1415
import { stopSketch } from './modules/IDE/actions/ide';
@@ -35,11 +36,11 @@ const routes = store => (
3536
<Route path="/projects/:project_id" component={IDEView} />
3637
<Route path="/:username/full/:project_id" component={FullView} />
3738
<Route path="/full/:project_id" component={FullView} />
38-
<Route path="/sketches" component={IDEView} />
39-
<Route path="/assets" component={IDEView} />
39+
<Route path="/sketches" component={DashboardView} />
40+
<Route path="/assets" component={DashboardView} />
4041
<Route path="/account" component={AccountView} />
4142
<Route path="/:username/sketches/:project_id" component={IDEView} />
42-
<Route path="/:username/sketches" component={IDEView} />
43+
<Route path="/:username/sketches" component={DashboardView} />
4344
<Route path="/about" component={IDEView} />
4445
<Route path="/feedback" component={IDEView} />
4546
</Route>

‎client/styles/components/_asset-list.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
.asset-table {
1010
width: 100%;
11-
padding: #{10 / $base-font-size}rem #{20 / $base-font-size}rem;
11+
padding: #{10 / $base-font-size}rem 0;
1212
max-height: 100%;
1313
border-spacing: 0;
1414
& .asset-list__delete-column {
@@ -53,4 +53,5 @@
5353
.asset-table__empty {
5454
text-align: center;
5555
font-size: #{16 / $base-font-size}rem;
56+
padding: #{42 / $base-font-size}rem 0;
5657
}

‎client/styles/components/_dashboard-header.scss

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
.dashboard-header {
2+
padding: 24px 66px;
3+
}
4+
5+
.dashboard-header__tabs {
6+
display: flex;
7+
padding-top: #{24 / $base-font-size}rem;
8+
padding-bottom: #{24 / $base-font-size}rem;
9+
}
10+
11+
.dashboard-header__tab {
12+
@include themify() {
13+
color: getThemifyVariable('inactive-text-color');
14+
border-right: 2px solid getThemifyVariable('inactive-text-color');
15+
16+
padding: 0 13px;
17+
18+
&:hover, &:focus {
19+
color: getThemifyVariable('primary-text-color');
20+
cursor: pointer;
21+
}
22+
&:focus {
23+
color: getThemifyVariable('primary-text-color');
24+
cursor: pointer;
25+
}
26+
}
27+
28+
font-size: #{21 / $base-font-size}rem;
29+
}
30+
31+
32+
.dashboard-header__tab:first-child {
33+
padding-left: 0;
34+
}
35+
36+
.dashboard-header__tab:last-child {
37+
border-right: none;
38+
}
39+
40+
.dashboard-header__tab--selected {
41+
@include themify() {
42+
color: getThemifyVariable('primary-text-color');
43+
}
44+
cursor: auto;
45+
}
46+
47+
.dashboard-header__tab a {
48+
color: inherit;
49+
}
50+
51+
.dashboard-header__tab__title {
52+
margin: 0;
53+
}

‎client/styles/components/_sketch-list.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77

88
.sketches-table {
99
width: 100%;
10-
padding: #{10 / $base-font-size}rem #{20 / $base-font-size}rem;
1110
max-height: 100%;
1211
border-spacing: 0;
1312
& .sketch-list__dropdown-column {
@@ -106,4 +105,5 @@
106105
.sketches-table__empty {
107106
text-align: center;
108107
font-size: #{16 / $base-font-size}rem;
108+
padding: #{42 / $base-font-size}rem 0;
109109
}

‎client/styles/layout/_dashboard.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.dashboard {
2+
display: flex;
3+
flex-direction: column;
4+
flex-wrap: wrap;
5+
@include themify() {
6+
color: getThemifyVariable('primary-text-color');
7+
background-color: getThemifyVariable('background-color');
8+
}
9+
}

‎client/styles/main.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,9 @@
4646
@import 'components/loader';
4747
@import 'components/uploader';
4848
@import 'components/tabs';
49+
@import 'components/dashboard-header';
4950

51+
@import 'layout/dashboard';
5052
@import 'layout/ide';
5153
@import 'layout/fullscreen';
5254
@import 'layout/user';

0 commit comments

Comments
 (0)