Feat/redesign files bar (#1513)

ipfs · Sep 29, 2020 · 9dbf928 · 9dbf928
1 parent da57f82
commit 9dbf928
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 29 deletions.
diff --git a/public/locales/en/files.json b/public/locales/en/files.json
@@ -91,6 +91,10 @@
  "hashUnavailable": "hash unavailable",
  "checkboxLabel": "View more options for {name}",
  "pinned": "Pinned",
+ "blocks": "Blocks",
+ "allBlocks": "all blocks",
+ "more": "More",
+ "files": "Files",
  "cidNotFileNorDir": "The current link isn't a file, nor a directory. Try to <0>inspect</0> it instead.",
  "sortBy": "Sort items by {name}"
 }
diff --git a/src/bundles/files/selectors.js b/src/bundles/files/selectors.js
@@ -18,6 +18,12 @@ const selectors = () => ({
  */
  selectFiles: (state) => state.files.pageContent,
 
+ /**
+ * @param {Model} state
+ * @param {DirectoryContent} state.files.pageContent
+ */
+ selectCurrentDirectorySize: (state) => state.files.pageContent && state.files.pageContent.content?.reduce((prev, curr) => prev + curr.size, 0),
+
  /**
  * @param {Model} state
  */
@@ -68,6 +74,8 @@ const selectors = () => ({
  */
  selectFilesErrors: (state) => state.files.failed,
 
+ selectHasUpperDirectory: (state) => !!state.files.pageContent?.upper,
+
  selectFilesPathInfo: createSelector(
  'selectRouteInfo',
  /**

diff --git a/src/files/header/Header.js b/src/files/header/Header.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import filesize from 'filesize'
-import SimplifyNumber from 'simplify-number'
+import classNames from 'classnames'
 import { connect } from 'redux-bundler-react'
 import { withTranslation } from 'react-i18next'
 // Components
@@ -10,18 +10,12 @@ import Button from '../../components/button/Button'
 // Icons
 import GlyphDots from '../../icons/GlyphDots'
 
-function BarOption ({ children, title, isLink = false, className = '', ...etc }) {
- className += ' tc pa3'
-
- if (etc.onClick) className += ' pointer'
-
- return (
- <div className={className} {...etc}>
- <span className='nowrap db f4 navy'>{children}</span>
- <span className={`db ttl ${isLink ? 'navy underline' : 'gray'}`}>{title}</span>
- </div>
- )
-}
+const BarOption = ({ children, title, className = '', ...etc }) => (
+ <div className={classNames(className, 'tc pa3')} {...etc}>
+ <span className='nowrap db f4 navy'>{children}</span>
+ <span className='db ttl gray'>{title}</span>
+ </div>
+)
 
 function humanSize (size) {
  if (!size) return 'N/A'
@@ -47,14 +41,14 @@ class Header extends React.Component {
 
  render () {
  const {
+ currentDirectorySize,
+ hasUpperDirectory,
  files,
- t,
- pins,
  filesPathInfo,
  filesSize,
- repoNumObjects,
+ onNavigate,
  repoSize,
- onNavigate
+ t
  } = this.props
 
  return (
@@ -66,19 +60,17 @@ class Header extends React.Component {
  </div>
 
  <div className='mb3 flex justify-between items-center bg-snow-muted joyride-files-add'>
- <BarOption title={t('app:terms.files')} isLink onClick={() => { onNavigate('/files') }}>
- { humanSize(filesSize) }
- </BarOption>
-
- <BarOption title={t('app:terms.pins')} isLink onClick={() => { onNavigate('/pins') }}>
- { pins ? SimplifyNumber(pins.length) : '-' }
- </BarOption>
-
- <BarOption title={t('app:terms.blocks')}>
- { repoNumObjects ? SimplifyNumber(repoNumObjects, { decimal: 0 }) : 'N/A' }
+ <BarOption title={t('app:terms.files')}>
+ { hasUpperDirectory
+ ? (
+ <span>
+ { humanSize(currentDirectorySize) }<span className='f5 gray'>/{ humanSize(filesSize) }</span>
+ </span>
+ )
+ : humanSize(filesSize) }
  </BarOption>
 
- <BarOption title={t('app:terms.repo')}>
+ <BarOption title={t('allBlocks')}>
  { humanSize(repoSize) }
  </BarOption>
 
@@ -113,10 +105,11 @@ class Header extends React.Component {
 }
 
 export default connect(
- 'selectPins',
+ 'selectHasUpperDirectory',
  'selectFilesSize',
  'selectRepoSize',
  'selectRepoNumObjects',
  'selectFilesPathInfo',
+ 'selectCurrentDirectorySize',
  withTranslation('files')(Header)
 )