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