diff --git a/public/locales/en/files.json b/public/locales/en/files.json index 321fd9204..7988e119e 100644 --- a/public/locales/en/files.json +++ b/public/locales/en/files.json @@ -120,6 +120,7 @@ "pins": "Pins", "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 it instead." diff --git a/src/bundles/files/selectors.js b/src/bundles/files/selectors.js index 8af9e00d0..6486a7df7 100644 --- a/src/bundles/files/selectors.js +++ b/src/bundles/files/selectors.js @@ -5,6 +5,8 @@ import { infoFromPath } from './utils' export default () => ({ selectFiles: (state) => state.files.pageContent, + selectCurrentDirectorySize: (state) => state.files.pageContent?.content?.reduce((prev, curr) => prev + curr.size, 0), + selectPins: (state) => state.files.pins, selectFilesSize: (state) => state.files.mfsSize, @@ -26,6 +28,8 @@ export default () => ({ selectFilesErrors: (state) => state.files.failed, + selectHasUpperDirectory: (state) => !!state.files.pageContent?.upper, + selectFilesPathInfo: createSelector( 'selectRouteInfo', (routeInfo) => { diff --git a/src/files/header/Header.js b/src/files/header/Header.js index 07a294306..66888f32a 100644 --- 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 ( -
- {children} - {title} -
- ) -} +const BarOption = ({ children, title, className = '', ...etc }) => ( +
+ {children} + {title} +
+) function humanSize (size) { if (!size) return 'N/A' @@ -42,14 +36,14 @@ class Header extends React.Component { render () { const { + currentDirectorySize, + hasUpperDirectory, files, - t, - pins, filesPathInfo, filesSize, - repoNumObjects, + onNavigate, repoSize, - onNavigate + t } = this.props return ( @@ -59,19 +53,17 @@ class Header extends React.Component {
- { onNavigate('/files') }}> - { humanSize(filesSize) } - - - { onNavigate('/pins') }}> - { pins ? SimplifyNumber(pins.length) : '-' } - - - - { repoNumObjects ? SimplifyNumber(repoNumObjects, { decimal: 0 }) : 'N/A' } + + { hasUpperDirectory + ? ( + + { humanSize(currentDirectorySize) }/{ humanSize(filesSize) } + + ) + : humanSize(filesSize) } - + { humanSize(repoSize) } @@ -104,10 +96,11 @@ class Header extends React.Component { } export default connect( - 'selectPins', + 'selectHasUpperDirectory', 'selectFilesSize', 'selectRepoSize', 'selectRepoNumObjects', 'selectFilesPathInfo', + 'selectCurrentDirectorySize', withTranslation('files')(Header) )