Various fixes files app in responsive mode

- Removed uk-width-small and now using the icon width for column alignment. This gives more space in responsive mode for the file name column. - Removed the "More" column header label which felt redundant. - Adjusted file actions button id to not mention size any more, now that we only have a single size. - Share indicator column now always present even when indicators are not rendered, for consistency with the header. - On resize, copy the table body row width to the header row to make sure that headers stay aligned when a scrollbar appears in the body as the scrollbar does not cover the header part as the latter is fixed/frozen on scroll.
owncloud · Feb 14, 2020 · 95400cf · 95400cf
1 parent baa6078
commit 95400cf
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 21 deletions.
diff --git a/apps/files/src/components/AllFilesList.vue b/apps/files/src/components/AllFilesList.vue
@@ -6,16 +6,16 @@
         <span class="oc-visually-hidden" v-text="favoritesHeaderText" />
         <oc-star id="files-table-header-star" aria-hidden="true" class="uk-display-block uk-disabled" />
       </div>
-      <div></div>
-      <div class="uk-text-truncate uk-text-meta uk-width-expand" v-translate>Name</div>
+      <div class="uk-text-truncate uk-text-meta uk-width-expand" v-translate ref="headerNameColumn" >Name</div>
+      <div><!-- indicators column --></div>
       <div :class="{ 'uk-visible@s' : !_sidebarOpen, 'uk-hidden'  : _sidebarOpen }" class="uk-text-meta uk-width-small" v-translate>Size</div>
       <div type="head" :class="{ 'uk-visible@s' : !_sidebarOpen, 'uk-hidden'  : _sidebarOpen }" class="uk-text-nowrap uk-text-meta uk-width-small" v-translate>Updated</div>
     </template>
-    <template #rowColumns="{ item }">
+    <template #rowColumns="{ item, index }">
       <div v-if="!publicPage()">
         <oc-star class="uk-display-block" @click.native.stop="toggleFileFavorite(item)" :shining="item.starred" />
       </div>
-      <div class="uk-text-truncate uk-width-expand">
+      <div class="uk-text-truncate uk-width-expand" :ref="index === 0 ? 'firstRowNameColumn' : null">
         <oc-file @click.native.stop="item.type === 'folder' ? navigateTo(item.path.substr(1)) : openFileActionBar(item)"
           :name="$_ocFileName(item)" :extension="item.extension" class="file-row-name" :icon="fileTypeIcon(item)"
           :filename="item.name" :key="item.id"/>
@@ -26,7 +26,9 @@
           class="uk-margin-small-left"
         />
       </div>
-      <StatusIndicators :item="item" :parentPath="currentFolder.path" @click="$_openSideBar" />
+      <div class="uk-flex uk-flex-middle">
+        <StatusIndicators :item="item" :parentPath="currentFolder.path" @click="$_openSideBar" />
+      </div>
       <div class="uk-text-meta uk-text-nowrap uk-width-small" :class="{ 'uk-visible@s' : !_sidebarOpen, 'uk-hidden'  : _sidebarOpen }">
         {{ item.size | fileSize }}
       </div>

diff --git a/apps/files/src/components/FileList.vue b/apps/files/src/components/FileList.vue
@@ -2,7 +2,8 @@
   <!-- TODO: Take care of outside click overall and not just in files list -->
   <div :id="id" class="uk-height-1-1 uk-position-relative" @click="hideRowActionsDropdown">
     <div class="uk-flex uk-flex-column uk-height-1-1">
-      <oc-grid gutter="small" flex id="files-table-header" class="uk-padding-small" v-if="fileData.length > 0" key="files-list-results-existence">
+      <resize-observer @notify="$_resizeHeader" />
+      <oc-grid ref="headerRow" gutter="small" flex id="files-table-header" class="uk-padding-small" v-if="fileData.length > 0" key="files-list-results-existence">
         <div>
           <oc-checkbox
             class="uk-margin-small-left"
@@ -15,12 +16,7 @@
           />
         </div>
         <slot name="headerColumns"/>
-        <div
-          class="uk-text-meta uk-text-right uk-width-small uk-margin-small-right"
-          v-translate
-        >
-          More
-        </div>
+        <div class="uk-margin-small-right oc-icon" />
       </oc-grid>
       <div id="files-list-container" class="uk-flex-1 uk-overflow-auto" v-if="!loading">
         <RecycleScroller
@@ -35,7 +31,7 @@
             :data-is-visible="active"
             @click="selectRow(item, $event); hideRowActionsDropdown()"
           >
-            <oc-grid gutter="small" flex class="uk-padding-small oc-border-top" :class="_rowClasses(item)" :id="'file-row-' + item.id">
+            <oc-grid :ref="index === 0 ? 'firstRow' : null" gutter="small" flex class="uk-padding-small oc-border-top" :class="_rowClasses(item)" :id="'file-row-' + item.id">
               <div>
                 <oc-checkbox
                   class="uk-margin-small-left"
@@ -45,8 +41,8 @@
                   :hideLabel="true"
                 />
               </div>
-              <slot name="rowColumns" :item="item" :index="item.id" />
-              <div class="uk-width-small uk-text-right uk-margin-small-right">
+              <slot name="rowColumns" :item="item" :index="index" />
+              <div class="uk-text-right uk-margin-small-right">
                 <oc-button
                   :id="actionsDropdownButtonId(item.id, active)"
                   class="files-list-row-show-actions"
@@ -157,6 +153,12 @@ export default {
       return this.$route.params.item
     }
   },
+  watch: {
+    compactMode (val) {
+      // sidebar opens, recalculate header sizes
+      this.$_resizeHeader()
+    }
+  },
   methods: {
     ...mapActions('Files', ['loadFolder', 'markFavorite',
       'setHighlightedFile', 'setPublicLinkPassword',
@@ -302,10 +304,20 @@ export default {
 
     actionsDropdownButtonId (id, active) {
       if (active) {
-        return `files-file-list-action-button-small-resolution-${id}-active`
+        return `files-file-list-action-button-${id}-active`
       }
 
-      return `files-file-list-action-button-small-resolution-${id}`
+      return `files-file-list-action-button-${id}`
+    },
+
+    $_resizeHeader () {
+      this.$nextTick(() => {
+        const headerRow = this.$refs.headerRow
+        const firstRow = this.$refs.firstRow
+        if (headerRow && firstRow) {
+          headerRow.$el.style.width = getComputedStyle(firstRow.$el).width
+        }
+      })
     }
   }
 }

diff --git a/apps/files/src/components/FilesLists/RowActionsDropdown.vue b/apps/files/src/components/FilesLists/RowActionsDropdown.vue
@@ -1,9 +1,9 @@
 <template>
   <oc-drop
     v-if="displayed"
-    :boundary="`#files-file-list-action-button-small-resolution-${item.id}-active`"
+    :boundary="`#files-file-list-action-button-${item.id}-active`"
     :options="{ offset: 0 }"
-    :toggle="`#files-file-list-action-button-small-resolution-${item.id}-active`"
+    :toggle="`#files-file-list-action-button-${item.id}-active`"
     position="bottom-right"
     id="files-list-row-actions-dropdown"
     class="uk-open uk-drop-stack"

diff --git a/apps/files/src/components/FilesLists/StatusIndicators/StatusIndicators.vue b/apps/files/src/components/FilesLists/StatusIndicators/StatusIndicators.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="uk-flex uk-flex-middle">
+  <span>
     <DefaultIndicators
       v-if="displayDefaultIndicators"
       :item="item"
@@ -14,7 +14,7 @@
         :key="index"
       />
     </template>
-  </div>
+  </span>
 </template>
 
 <script>

diff --git a/changelog/unreleased/2974 b/changelog/unreleased/2974
@@ -5,3 +5,4 @@ This change hides them behind a three dots button on the line, the same that was
 The three dots button also now has no more border and looks nicer.
 
 https://github.com/owncloud/phoenix/pull/2974
+https://github.com/owncloud/phoenix/issues/2998
diff --git a/package.json b/package.json
@@ -93,6 +93,7 @@
     "vue-loader": "^15.7.1",
     "vue-meta": "^2.2.2",
     "vue-router": "^3.1.3",
+    "vue-resize": "^0.4.5",
     "vue-scrollto": "^2.15.0",
     "vue-template-compiler": "^2.6.10",
     "vuex": "^3.1.1",

diff --git a/src/phoenix.js b/src/phoenix.js
@@ -5,6 +5,8 @@ import "core-js/features/symbol/iterator.js"
 
 // --- Libraries and Plugins ---
 import Vue from 'vue'
+import 'vue-resize/dist/vue-resize.css'
+import VueResize from 'vue-resize'
 
 // --- Components ---
 
@@ -59,6 +61,7 @@ Vue.use(VueClipboard)
 Vue.use(VueScrollTo)
 Vue.use(MediaSource)
 Vue.use(PhoenixPlugin)
+Vue.use(VueResize)
 Vue.use(VueMeta, {
   // optional pluginOptions
   refreshOnceOnNavigation: true

diff --git a/yarn.lock b/yarn.lock
@@ -9066,6 +9066,11 @@ vue-meta@^2.0.4, vue-meta@^2.2.2:
   dependencies:
     deepmerge "^4.2.2"
 
+vue-resize@^0.4.5:
+  version "0.4.5"
+  resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-0.4.5.tgz#4777a23042e3c05620d9cbda01c0b3cc5e32dcea"
+  integrity sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg==
+
 vue-router@^3.0.6, vue-router@^3.1.3:
   version "3.1.5"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.1.5.tgz#ff29b8a1e1306c526b52d4dc0532109f16c41231"
Original file line number	Diff line number	Diff line change
Expand Up		@@ -5,3 +5,4 @@ This change hides them behind a three dots button on the line, the same that was
		The three dots button also now has no more border and looks nicer.

		https://github.com/owncloud/phoenix/pull/2974
		https://github.com/owncloud/phoenix/issues/2998