diff --git a/src/components/WorkspaceArea/components/WorkspaceLoader/index.vue b/src/components/WorkspaceArea/components/WorkspaceLoader/index.vue new file mode 100644 index 00000000..f74ac22b --- /dev/null +++ b/src/components/WorkspaceArea/components/WorkspaceLoader/index.vue @@ -0,0 +1,43 @@ + + + + + + + \ No newline at end of file diff --git a/src/components/WorkspaceAreaContent.vue b/src/components/WorkspaceAreaContent.vue index 5296d160..51243c1c 100644 --- a/src/components/WorkspaceAreaContent.vue +++ b/src/components/WorkspaceAreaContent.vue @@ -5,16 +5,22 @@ Copyright © 2021 - present Aleksey Hoffman. All rights reserved. @@ -22,10 +28,14 @@ Copyright © 2021 - present Aleksey Hoffman. All rights reserved. import {mapFields} from 'vuex-map-fields' import {mapState} from 'vuex' import itemFilter from '../utils/itemFilter' +import WorkspaceAreaLoader from './WorkspaceArea/components/WorkspaceLoader/index.vue' const lodash = require('../utils/lodash.min.js') export default { + components: { + WorkspaceAreaLoader, + }, data () { return { status: { @@ -84,6 +94,7 @@ export default { filterQuery: 'filterField.view.navigator.query', filterOptions: 'filterField.view.navigator.options', currentDir: 'navigatorView.currentDir', + dirItemsInfoIsPartiallyFetched: 'navigatorView.dirItemsInfoIsPartiallyFetched', dirItemsInfoIsFetched: 'navigatorView.dirItemsInfoIsFetched', showDirItemKindDividers: 'storageData.settings.navigator.showDirItemKindDividers', }), @@ -391,36 +402,32 @@ export default { this.scroll.lastPosition = this.scroll.newPosition return this.scroll.delta }, + getDirItemGroupTitleDescription (itemCount) { + const itemWord = this.$localizeUtils.pluralize(itemCount, 'item') + return this.dirItemsInfoIsFetched ? `${itemCount} ${itemWord}` : `Loading ${itemWord}` + }, getDirItemGroupTitle (type) { if (type === 'directory') { const itemCount = this.directoryDirItems.length - const itemWord = this.$localizeUtils.pluralize(itemCount, 'item') - return `Directories | ${itemCount} ${itemWord}` + return `Directories | ${this.getDirItemGroupTitleDescription(itemCount)}` } else if (type === 'file') { const itemCount = this.fileDirItems.length - const itemWord = this.$localizeUtils.pluralize(itemCount, 'item') - return `Files | ${itemCount} ${itemWord}` + return `Files | ${this.getDirItemGroupTitleDescription(itemCount)}` } else if (type === 'image-files') { const itemCount = this.imageFilesDirItems.length - const itemWord = this.$localizeUtils.pluralize(itemCount, 'item') - return `Images | ${itemCount} ${itemWord}` + return `Images | ${this.getDirItemGroupTitleDescription(itemCount)}` } else if (type === 'video-files') { const itemCount = this.videoFilesDirItems.length - const itemWord = this.$localizeUtils.pluralize(itemCount, 'item') - return `Videos | ${itemCount} ${itemWord}` + return `Videos | ${this.getDirItemGroupTitleDescription(itemCount)}` } else if (type === 'other-files') { const itemCount = this.otherFilesDirItems.length - const itemWord = this.$localizeUtils.pluralize(itemCount, 'item') - return `Other | ${itemCount} ${itemWord}` + return `Other | ${this.getDirItemGroupTitleDescription(itemCount)}` } - } - } + }, + }, } - - diff --git a/src/views/Navigator.vue b/src/views/Navigator.vue index 4ef987d6..7b1bd57b 100644 --- a/src/views/Navigator.vue +++ b/src/views/Navigator.vue @@ -294,8 +294,7 @@ export default { .workspace__area { display: grid; - grid-template-rows: 48px 38px 1fr; - + grid-template-rows: 48px 36px 1fr; } .workspace-area__header {