From 0193ee82979d689f63abf2d7e6ef42d0a5799f1f Mon Sep 17 00:00:00 2001 From: Andrew Nicolaou Date: Sun, 11 Aug 2019 11:08:17 +0200 Subject: [PATCH] Standalone sketch list and asset page --- client/modules/IDE/pages/IDEView.jsx | 26 ---- .../User/components/DashboardTabSwitcher.jsx | 47 +++++++ client/modules/User/pages/DashboardView.jsx | 123 ++++++++++++++++++ client/routes.jsx | 7 +- client/styles/components/_asset-list.scss | 3 +- .../styles/components/_dashboard-header.scss | 53 ++++++++ client/styles/components/_sketch-list.scss | 2 +- client/styles/layout/_dashboard.scss | 9 ++ client/styles/main.scss | 2 + 9 files changed, 241 insertions(+), 31 deletions(-) create mode 100644 client/modules/User/components/DashboardTabSwitcher.jsx create mode 100644 client/modules/User/pages/DashboardView.jsx create mode 100644 client/styles/components/_dashboard-header.scss create mode 100644 client/styles/layout/_dashboard.scss diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx index b2ae1ebb..b0be087e 100644 --- a/client/modules/IDE/pages/IDEView.jsx +++ b/client/modules/IDE/pages/IDEView.jsx @@ -29,8 +29,6 @@ import * as ToastActions from '../actions/toast'; import * as ConsoleActions from '../actions/console'; import { getHTMLFile } from '../reducers/files'; import Overlay from '../../App/components/Overlay'; -import SketchList from '../components/SketchList'; -import AssetList from '../components/AssetList'; import About from '../components/About'; import Feedback from '../components/Feedback'; @@ -365,30 +363,6 @@ class IDEView extends React.Component { createFolder={this.props.createFolder} /> } - { this.props.location.pathname.match(/sketches$/) && - - - - } - { this.props.location.pathname.match(/assets$/) && - - - - } { this.props.location.pathname === '/about' && { + const selectedClassName = 'dashboard-header__tab--selected'; + + const location = { pathname: to, state: { skipSavingPath: true } }; + const content = isSelected ? children : {children}; + return ( +
  • +

    + {content} +

    +
    • + ); +}; + +Tab.propTypes = { + children: PropTypes.element.isRequired, + isSelected: PropTypes.bool.isRequired, + to: PropTypes.string.isRequired, +}; + +const DashboardTabSwitcher = ({ currentTab, isOwner, username }) => { + return ( + + ); +}; + +DashboardTabSwitcher.propTypes = { + currentTab: PropTypes.string.isRequired, + isOwner: PropTypes.bool.isRequired, + username: PropTypes.string.isRequired, +}; + +export { DashboardTabSwitcher as default, TabKey }; diff --git a/client/modules/User/pages/DashboardView.jsx b/client/modules/User/pages/DashboardView.jsx new file mode 100644 index 00000000..a3172eee --- /dev/null +++ b/client/modules/User/pages/DashboardView.jsx @@ -0,0 +1,123 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import { connect } from 'react-redux'; +import { bindActionCreators } from 'redux'; +import { browserHistory, Link } from 'react-router'; +import { Helmet } from 'react-helmet'; +import { updateSettings, initiateVerification, createApiKey, removeApiKey } from '../actions'; +import NavBasic from '../../../components/NavBasic'; + +import AssetList from '../../IDE/components/AssetList'; +import SketchList from '../../IDE/components/SketchList'; + +import DashboardTabSwitcher, { TabKey } from '../components/DashboardTabSwitcher'; + +class DashboardView extends React.Component { + static defaultProps = { + user: null, + }; + + constructor(props) { + super(props); + this.closeAccountPage = this.closeAccountPage.bind(this); + this.gotoHomePage = this.gotoHomePage.bind(this); + } + + componentDidMount() { + document.body.className = this.props.theme; + } + + closeAccountPage() { + browserHistory.push(this.props.previousPath); + } + + gotoHomePage() { + browserHistory.push('/'); + } + + selectedTabName() { + const path = this.props.location.pathname; + + if (/assets/.test(path)) { + return TabKey.assets; + } + + return TabKey.sketches; + } + + ownerName() { + if (this.props.params.username) { + return this.props.params.username; + } + + return this.props.user.username; + } + + isOwner() { + return this.props.user.username === this.props.params.username; + } + + navigationItem() { + + } + + render() { + const currentTab = this.selectedTabName(); + const isOwner = this.isOwner(); + const { username } = this.props.params; + + return ( +
    + + p5.js Web Editor | Account + + + + +
    +
    +

    {this.ownerName()}

    + + +
    + +
    + { + currentTab === TabKey.sketches ? : + } +
    +
    +
    + ); + } +} + +function mapStateToProps(state) { + return { + previousPath: state.ide.previousPath, + user: state.user, + theme: state.preferences.theme + }; +} + +function mapDispatchToProps(dispatch) { + return bindActionCreators({ + updateSettings, initiateVerification, createApiKey, removeApiKey + }, dispatch); +} + +DashboardView.propTypes = { + location: PropTypes.shape({ + pathname: PropTypes.string.isRequired, + }).isRequired, + params: PropTypes.shape({ + username: PropTypes.string.isRequired, + }).isRequired, + previousPath: PropTypes.string.isRequired, + theme: PropTypes.string.isRequired, + user: PropTypes.shape({ + username: PropTypes.string.isRequired, + }), +}; + +export default connect(mapStateToProps, mapDispatchToProps)(DashboardView); diff --git a/client/routes.jsx b/client/routes.jsx index baa89884..0bcad82b 100644 --- a/client/routes.jsx +++ b/client/routes.jsx @@ -9,6 +9,7 @@ import ResetPasswordView from './modules/User/pages/ResetPasswordView'; import EmailVerificationView from './modules/User/pages/EmailVerificationView'; import NewPasswordView from './modules/User/pages/NewPasswordView'; import AccountView from './modules/User/pages/AccountView'; +import DashboardView from './modules/User/pages/DashboardView'; // import SketchListView from './modules/Sketch/pages/SketchListView'; import { getUser } from './modules/User/actions'; import { stopSketch } from './modules/IDE/actions/ide'; @@ -35,11 +36,11 @@ const routes = store => ( - - + + - + diff --git a/client/styles/components/_asset-list.scss b/client/styles/components/_asset-list.scss index a8e76c74..af1a173b 100644 --- a/client/styles/components/_asset-list.scss +++ b/client/styles/components/_asset-list.scss @@ -8,7 +8,7 @@ .asset-table { width: 100%; - padding: #{10 / $base-font-size}rem #{20 / $base-font-size}rem; + padding: #{10 / $base-font-size}rem 0; max-height: 100%; border-spacing: 0; & .asset-list__delete-column { @@ -53,4 +53,5 @@ .asset-table__empty { text-align: center; font-size: #{16 / $base-font-size}rem; + padding: #{42 / $base-font-size}rem 0; } diff --git a/client/styles/components/_dashboard-header.scss b/client/styles/components/_dashboard-header.scss new file mode 100644 index 00000000..96e4de22 --- /dev/null +++ b/client/styles/components/_dashboard-header.scss @@ -0,0 +1,53 @@ +.dashboard-header { + padding: 24px 66px; +} + +.dashboard-header__tabs { + display: flex; + padding-top: #{24 / $base-font-size}rem; + padding-bottom: #{24 / $base-font-size}rem; +} + +.dashboard-header__tab { + @include themify() { + color: getThemifyVariable('inactive-text-color'); + border-right: 2px solid getThemifyVariable('inactive-text-color'); + + padding: 0 13px; + + &:hover, &:focus { + color: getThemifyVariable('primary-text-color'); + cursor: pointer; + } + &:focus { + color: getThemifyVariable('primary-text-color'); + cursor: pointer; + } + } + + font-size: #{21 / $base-font-size}rem; +} + + +.dashboard-header__tab:first-child { + padding-left: 0; +} + +.dashboard-header__tab:last-child { + border-right: none; +} + +.dashboard-header__tab--selected { + @include themify() { + color: getThemifyVariable('primary-text-color'); + } + cursor: auto; +} + +.dashboard-header__tab a { + color: inherit; +} + +.dashboard-header__tab__title { + margin: 0; +} diff --git a/client/styles/components/_sketch-list.scss b/client/styles/components/_sketch-list.scss index dca1d759..34c962a4 100644 --- a/client/styles/components/_sketch-list.scss +++ b/client/styles/components/_sketch-list.scss @@ -7,7 +7,6 @@ .sketches-table { width: 100%; - padding: #{10 / $base-font-size}rem #{20 / $base-font-size}rem; max-height: 100%; border-spacing: 0; & .sketch-list__dropdown-column { @@ -106,4 +105,5 @@ .sketches-table__empty { text-align: center; font-size: #{16 / $base-font-size}rem; + padding: #{42 / $base-font-size}rem 0; } diff --git a/client/styles/layout/_dashboard.scss b/client/styles/layout/_dashboard.scss new file mode 100644 index 00000000..f928ffd3 --- /dev/null +++ b/client/styles/layout/_dashboard.scss @@ -0,0 +1,9 @@ +.dashboard { + display: flex; + flex-direction: column; + flex-wrap: wrap; + @include themify() { + color: getThemifyVariable('primary-text-color'); + background-color: getThemifyVariable('background-color'); + } +} diff --git a/client/styles/main.scss b/client/styles/main.scss index 62b8d4cc..decb6aba 100644 --- a/client/styles/main.scss +++ b/client/styles/main.scss @@ -46,7 +46,9 @@ @import 'components/loader'; @import 'components/uploader'; @import 'components/tabs'; +@import 'components/dashboard-header'; +@import 'layout/dashboard'; @import 'layout/ide'; @import 'layout/fullscreen'; @import 'layout/user';