From e738221be630e34503a6b4b7e69291599e3821fd Mon Sep 17 00:00:00 2001 From: Andrew Nicolaou Date: Mon, 4 Nov 2019 20:30:24 +0100 Subject: [PATCH] Style DashboardActions below tabs --- client/modules/IDE/components/AssetList.jsx | 7 +-- client/modules/IDE/components/AssetSize.jsx | 46 +++++++++++++++++++ client/modules/User/pages/DashboardView.jsx | 22 ++++----- .../styles/components/_dashboard-header.scss | 14 ++++-- client/styles/components/_searchbar.scss | 3 +- 5 files changed, 68 insertions(+), 24 deletions(-) create mode 100644 client/modules/IDE/components/AssetSize.jsx diff --git a/client/modules/IDE/components/AssetList.jsx b/client/modules/IDE/components/AssetList.jsx index 3bec6cc2..821ae152 100644 --- a/client/modules/IDE/components/AssetList.jsx +++ b/client/modules/IDE/components/AssetList.jsx @@ -40,13 +40,9 @@ class AssetList extends React.Component { render() { const username = this.props.username !== undefined ? this.props.username : this.props.user.username; - const { assetList, totalSize } = this.props; + const { assetList } = this.props; return (
- {/* Eventually, this copy should be Total / 250 MB Used */} - {this.hasAssets() && -

{`${prettyBytes(totalSize)} Total`}

- } {this.getAssetsTitle()} @@ -93,7 +89,6 @@ AssetList.propTypes = { sketchName: PropTypes.string.isRequired, sketchId: PropTypes.string.isRequired })).isRequired, - totalSize: PropTypes.number.isRequired, getAssets: PropTypes.func.isRequired, loading: PropTypes.bool.isRequired }; diff --git a/client/modules/IDE/components/AssetSize.jsx b/client/modules/IDE/components/AssetSize.jsx new file mode 100644 index 00000000..b495038b --- /dev/null +++ b/client/modules/IDE/components/AssetSize.jsx @@ -0,0 +1,46 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import { connect } from 'react-redux'; +import prettyBytes from 'pretty-bytes'; + +const MB_TO_B = 1000 * 1000; +const MAX_SIZE_B = 250 * MB_TO_B; + +const formatPercent = (percent) => { + const percentUsed = percent * 100; + if (percentUsed < 1) { + return '0%'; + } + + return `${Math.round(percentUsed)}%`; +}; + +/* Eventually, this copy should be Total / 250 MB Used */ +const AssetSize = ({ totalSize }) => { + if (!totalSize) { + return null; + } + + const currentSize = prettyBytes(totalSize); + const sizeLimit = prettyBytes(MAX_SIZE_B); + const percent = formatPercent(totalSize / MAX_SIZE_B); + + return ( +
+

{`${currentSize} used / ${sizeLimit} max (${percent})`}

+
+ ); +}; + +AssetSize.propTypes = { + totalSize: PropTypes.number.isRequired, +}; + +function mapStateToProps(state) { + return { + user: state.user, + totalSize: state.assets.totalSize, + }; +} + +export default connect(mapStateToProps)(AssetSize); diff --git a/client/modules/User/pages/DashboardView.jsx b/client/modules/User/pages/DashboardView.jsx index af03a42a..8a3e68a4 100644 --- a/client/modules/User/pages/DashboardView.jsx +++ b/client/modules/User/pages/DashboardView.jsx @@ -8,6 +8,7 @@ import Nav from '../../../components/Nav'; import Overlay from '../../App/components/Overlay'; import AssetList from '../../IDE/components/AssetList'; +import AssetSize from '../../IDE/components/AssetSize'; import CollectionList from '../../IDE/components/CollectionList'; import SketchList from '../../IDE/components/SketchList'; import SketchSearchbar from '../../IDE/components/Searchbar'; @@ -72,21 +73,17 @@ class DashboardView extends React.Component { } renderActionButton(tabKey, username) { - if (!this.isOwner()) { - return null; - } - switch (tabKey) { case TabKey.assets: - return null; + return this.isOwner() && ; case TabKey.collections: - return Create collection; + return this.isOwner() && Create collection; case TabKey.sketches: default: return ( - New sketch + {this.isOwner() && New sketch} ); } @@ -108,6 +105,7 @@ class DashboardView extends React.Component { const currentTab = this.selectedTabKey(); const isOwner = this.isOwner(); const { username } = this.props.params; + const actions = this.renderActionButton(currentTab, username); return (
@@ -118,9 +116,11 @@ class DashboardView extends React.Component {

{this.ownerName()}

-
- {this.renderActionButton(currentTab, username)} -
+ {actions && +
+ {actions} +
+ }
@@ -145,7 +145,7 @@ function mapStateToProps(state) { return { previousPath: state.ide.previousPath, user: state.user, - theme: state.preferences.theme + theme: state.preferences.theme, }; } diff --git a/client/styles/components/_dashboard-header.scss b/client/styles/components/_dashboard-header.scss index 5de7ec20..65fb367b 100644 --- a/client/styles/components/_dashboard-header.scss +++ b/client/styles/components/_dashboard-header.scss @@ -22,7 +22,7 @@ .dashboard-header__tabs { display: flex; padding-top: #{24 / $base-font-size}rem; - margin-bottom: #{24 / $base-font-size}rem; + @include themify() { border-bottom: 1px solid getThemifyVariable('inactive-text-color'); } @@ -65,17 +65,21 @@ } .dashboard-header__nav { - display: flex; - justify-content: space-between; - align-items: center; } .dashboard-header__actions { display: flex; align-items: center; + margin-bottom: #{24 / $base-font-size}rem; + padding: #{24 / $base-font-size}rem #{10 / $base-font-size}rem; + + @include themify() { + background-color: getThemifyVariable('modal-background-color'); + border-bottom: 1px dotted getThemifyVariable('modal-border-color'); + } } -.dashboard-header__actions > * { +.dashboard-header__actions > *:not(:first-child) { margin-left: #{15 / $base-font-size}rem; } diff --git a/client/styles/components/_searchbar.scss b/client/styles/components/_searchbar.scss index 93e9bbe9..78434d03 100644 --- a/client/styles/components/_searchbar.scss +++ b/client/styles/components/_searchbar.scss @@ -1,7 +1,6 @@ .searchbar { position: relative; display: flex; - padding-left: #{17 / $base-font-size}rem; } .searchbar__input { @@ -58,7 +57,7 @@ button[type="submit"].searchbar__button { align-self: center; position: absolute; padding: #{3 / $base-font-size}rem #{4 / $base-font-size}rem; - left: #{216 / $base-font-size}rem;; + right: #{7 / $base-font-size}rem; @include themify() { color: getThemifyVariable('primary-text-color'); background-color: getThemifyVariable('search-clear-background-color');