feat: center list footers

packages/web-app-files/src/components/FilesListFooterInfo.vue

@@ -0,0 +1,55 @@
+<template functional>
+  <div
+    :ref="data.ref"
+    v-bind="data.attrs"
+    class="uk-text-nowrap oc-text-muted uk-text-center"
+    :class="[data.staticClass, data.class]"
+  >
+    <!--
+      TODO: merge all strings here to one interpollated translation
+      This requires to come up with a way in tests to still select only folders and files lengths
+    -->
+    <translate>Showing</translate>
+    <span id="files-list-count-folders" v-text="props.folders" />
+    <translate :translate-n="props.folders" translate-plural="folders">folder</translate>
+    <translate>and</translate>
+    <translate
+      id="files-list-count-files"
+      :translate-n="props.files"
+      translate-plural="%{count} files"
+      :translate-params="{ count: props.files }"
+      >%{count} file</translate
+    >
+    <translate
+      :translate-n="props.total"
+      translate-plural="of %{count} resources"
+      :translate-params="{ count: props.total }"
+      >of %{count} resource</translate
+    >
+    <span v-if="props.size">&ndash; {{ props.size }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    files: {
+      type: Number,
+      required: true
+    },
+    folders: {
+      type: Number,
+      required: true
+    },
+    total: {
+      type: Number,
+      required: true
+    },
+    size: {
+      type: String,
+      required: false,
+      default: null
+    }
+  }
+}
+</script>

packages/web-app-files/src/views/Favorites.vue

@@ -26,32 +26,22 @@
           <quick-actions class="oc-visible@s" :item="props.resource" :actions="app.quickActions" />
         </template>
         <template #footer>
-          <div class="uk-flex uk-flex-middle uk-flex-between">
-            <oc-pagination
-              v-if="paginationLength > 1"
-              :pages="paginationLength"
-              :current-page="currentPage"
-              :max-displayed="3"
-              :current-route="$_filesListPagination_targetRoute"
-            />
-            <div
-              v-if="activeFilesCount.folders > 0 || activeFilesCount.files > 0"
-              class="uk-text-nowrap oc-text-muted uk-text-right uk-flex-1"
-            >
-              <span id="files-list-count-folders" v-text="activeFilesCount.folders" />
-              <translate :translate-n="activeFilesCount.folders" translate-plural="folders"
-                >folder</translate
-              >
-              <translate>and</translate>
-              <span id="files-list-count-files" v-text="activeFilesCount.files" />
-              <translate :translate-n="activeFilesCount.files" translate-plural="files"
-                >file</translate
-              >
-              <template v-if="activeFiles.length > 0">
-                &ndash; {{ getResourceSize(filesTotalSize) }}
-              </template>
-            </div>
-          </div>
+          <oc-pagination
+            v-if="paginationLength > 1"
+            :pages="paginationLength"
+            :current-page="currentPage"
+            :max-displayed="3"
+            :current-route="$_filesListPagination_targetRoute"
+            class="files-pagination uk-flex uk-flex-center oc-my-s"
+          />
+          <list-info
+            v-if="activeFiles.length > 0"
+            class="uk-width-1-1 oc-my-s"
+            :files="activeFilesCount.files"
+            :folders="activeFilesCount.folders"
+            :total="files.length"
+            :size="getResourceSize(filesTotalSize)"
+          />
         </template>
       </oc-table-files>
     </template>
@@ -70,9 +60,10 @@ import MixinFilesListPagination from '../mixins/filesListPagination'
 import QuickActions from '../components/FilesLists/QuickActions.vue'
 import ListLoader from '../components/ListLoader.vue'
 import NoContentMessage from '../components/NoContentMessage.vue'
+import ListInfo from '../components/FilesListFooterInfo.vue'
 
 export default {
-  components: { QuickActions, ListLoader, NoContentMessage },
+  components: { QuickActions, ListLoader, NoContentMessage, ListInfo },
 
   mixins: [FileActions, MixinFilesListPositioning, MixinResources, MixinFilesListPagination],
 
@@ -82,7 +73,7 @@ export default {
 
   computed: {
     ...mapState(['app']),
-    ...mapState('Files', ['currentPage']),
+    ...mapState('Files', ['currentPage', 'files']),
     ...mapGetters('Files', [
       'davProperties',
       'highlightedFile',

packages/web-app-files/src/views/LocationPicker.vue

@@ -52,32 +52,22 @@
             :header-position="headerPosition"
           >
             <template #footer>
-              <div class="uk-flex uk-flex-middle uk-flex-between">
-                <oc-pagination
-                  v-if="paginationLength > 1"
-                  :pages="paginationLength"
-                  :current-page="currentPage"
-                  :max-displayed="3"
-                  :current-route="$_filesListPagination_targetRoute"
-                />
-                <div
-                  v-if="activeFilesCount.folders > 0 || activeFilesCount.files > 0"
-                  class="uk-text-nowrap oc-text-muted uk-text-right uk-flex-1"
-                >
-                  <span id="files-list-count-folders" v-text="activeFilesCount.folders" />
-                  <translate :translate-n="activeFilesCount.folders" translate-plural="folders"
-                    >folder</translate
-                  >
-                  <translate>and</translate>
-                  <span id="files-list-count-files" v-text="activeFilesCount.files" />
-                  <translate :translate-n="activeFilesCount.files" translate-plural="files"
-                    >file</translate
-                  >
-                  <template v-if="activeFiles.length > 0">
-                    &ndash; {{ getResourceSize(filesTotalSize) }}
-                  </template>
-                </div>
-              </div>
+              <oc-pagination
+                v-if="paginationLength > 1"
+                :pages="paginationLength"
+                :current-page="currentPage"
+                :max-displayed="3"
+                :current-route="$_filesListPagination_targetRoute"
+                class="files-pagination uk-flex uk-flex-center oc-my-s"
+              />
+              <list-info
+                v-if="activeFiles.length > 0"
+                class="uk-width-1-1 oc-my-s"
+                :files="activeFilesCount.files"
+                :folders="activeFilesCount.folders"
+                :total="files.length"
+                :size="getResourceSize(filesTotalSize)"
+              />
             </template>
           </oc-table-files>
         </template>
@@ -98,6 +88,7 @@ import MixinFilesListPagination from '../mixins/filesListPagination'
 
 import NoContentMessage from '../components/NoContentMessage.vue'
 import ListLoader from '../components/ListLoader.vue'
+import ListInfo from '../components/FilesListFooterInfo.vue'
 
 export default {
   metaInfo() {
@@ -108,7 +99,8 @@ export default {
 
   components: {
     NoContentMessage,
-    ListLoader
+    ListLoader,
+    ListInfo
   },
 
   mixins: [MixinsGeneral, MixinResources, MixinRoutes, MixinFilesListPagination],

packages/web-app-files/src/views/Personal.vue

@@ -39,32 +39,22 @@
           />
         </template>
         <template #footer>
-          <div class="uk-flex uk-flex-between uk-flex-middle">
-            <oc-pagination
-              v-if="paginationLength > 1"
-              :pages="paginationLength"
-              :current-page="currentPage"
-              :max-displayed="3"
-              :current-route="$_filesListPagination_targetRoute"
-            />
-            <div
-              v-if="activeFilesCount.folders > 0 || activeFilesCount.files > 0"
-              class="uk-text-nowrap oc-text-muted uk-text-right uk-flex-1"
-            >
-              <span id="files-list-count-folders" v-text="activeFilesCount.folders" />
-              <translate :translate-n="activeFilesCount.folders" translate-plural="folders"
-                >folder</translate
-              >
-              <translate>and</translate>
-              <span id="files-list-count-files" v-text="activeFilesCount.files" />
-              <translate :translate-n="activeFilesCount.files" translate-plural="files"
-                >file</translate
-              >
-              <template v-if="activeFiles.length > 0">
-                &ndash; {{ getResourceSize(filesTotalSize) }}
-              </template>
-            </div>
-          </div>
+          <oc-pagination
+            v-if="paginationLength > 1"
+            :pages="paginationLength"
+            :current-page="currentPage"
+            :max-displayed="3"
+            :current-route="$_filesListPagination_targetRoute"
+            class="files-pagination uk-flex uk-flex-center oc-my-s"
+          />
+          <list-info
+            v-if="activeFiles.length > 0"
+            class="uk-width-1-1 oc-my-s"
+            :files="activeFilesCount.files"
+            :folders="activeFilesCount.folders"
+            :total="files.length"
+            :size="getResourceSize(filesTotalSize)"
+          />
         </template>
       </oc-table-files>
     </template>
@@ -87,9 +77,10 @@ import QuickActions from '../components/FilesLists/QuickActions.vue'
 import ListLoader from '../components/ListLoader.vue'
 import NoContentMessage from '../components/NoContentMessage.vue'
 import NotFoundMessage from '../components/FilesLists/NotFoundMessage.vue'
+import ListInfo from '../components/FilesListFooterInfo.vue'
 
 export default {
-  components: { QuickActions, ListLoader, NoContentMessage, NotFoundMessage },
+  components: { QuickActions, ListLoader, NoContentMessage, NotFoundMessage, ListInfo },
 
   mixins: [
     MixinAccessibleBreadcrumb,
@@ -106,7 +97,7 @@ export default {
 
   computed: {
     ...mapState(['app']),
-    ...mapState('Files', ['currentPage']),
+    ...mapState('Files', ['currentPage', 'files']),
     ...mapGetters('Files', [
       'davProperties',
       'highlightedFile',
@@ -255,3 +246,10 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+// TODO: remove when fixed in ODS
+.files-pagination > ol {
+  padding: 0;
+}
+</style>

packages/web-app-files/src/views/SharedViaLink.vue

@@ -27,29 +27,21 @@
         @fileClick="$_fileActions_triggerDefaultAction"
       >
         <template #footer>
-          <div class="uk-flex uk-flex-middle uk-flex-between">
-            <oc-pagination
-              v-if="paginationLength > 1"
-              :pages="paginationLength"
-              :current-page="currentPage"
-              :max-displayed="3"
-              :current-route="$_filesListPagination_targetRoute"
-            />
-            <div
-              v-if="activeFilesCount.folders > 0 || activeFilesCount.files > 0"
-              class="uk-text-nowrap oc-text-muted uk-text-right uk-flex-1"
-            >
-              <span id="files-list-count-folders" v-text="activeFilesCount.folders" />
-              <translate :translate-n="activeFilesCount.folders" translate-plural="folders">
-                folder
-              </translate>
-              <translate>and</translate>
-              <span id="files-list-count-files" v-text="activeFilesCount.files" />
-              <translate :translate-n="activeFilesCount.files" translate-plural="files">
-                file
-              </translate>
-            </div>
-          </div>
+          <oc-pagination
+            v-if="paginationLength > 1"
+            :pages="paginationLength"
+            :current-page="currentPage"
+            :max-displayed="3"
+            :current-route="$_filesListPagination_targetRoute"
+            class="files-pagination uk-flex uk-flex-center oc-my-s"
+          />
+          <list-info
+            v-if="activeFiles.length > 0"
+            class="uk-width-1-1 oc-my-s"
+            :files="activeFilesCount.files"
+            :folders="activeFilesCount.folders"
+            :total="files.length"
+          />
         </template>
       </oc-table-files>
     </template>
@@ -67,9 +59,10 @@ import MixinFilesListPagination from '../mixins/filesListPagination'
 
 import ListLoader from '../components/ListLoader.vue'
 import NoContentMessage from '../components/NoContentMessage.vue'
+import ListInfo from '../components/FilesListFooterInfo.vue'
 
 export default {
-  components: { ListLoader, NoContentMessage },
+  components: { ListLoader, NoContentMessage, ListInfo },
 
   mixins: [FileActions, MixinFilesListPositioning, MixinResources, MixinFilesListPagination],
 
@@ -79,7 +72,7 @@ export default {
 
   computed: {
     ...mapState(['app']),
-    ...mapState('Files', ['currentPage']),
+    ...mapState('Files', ['currentPage', 'files']),
     ...mapGetters('Files', [
       'davProperties',
       'highlightedFile',