From 4d111c9738ba9a5b54dcf2ecfb05504901e9c6e9 Mon Sep 17 00:00:00 2001
From: Vincent Petry <pvince81@owncloud.com>
Date: Tue, 11 Feb 2020 17:03:28 +0100
Subject: [PATCH] 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.
Prevent row action menu and new file menu to flip in responsive mode.
---
 apps/files/src/components/FileList.vue           | 16 ++++++++++------
 apps/files/src/components/FilesAppBar.vue        |  2 +-
 .../components/FilesLists/RowActionsDropdown.vue |  6 +++---
 changelog/unreleased/2974                        |  1 +
 4 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/apps/files/src/components/FileList.vue b/apps/files/src/components/FileList.vue
index a5f83ddffb4..bd99aa3a6a7 100644
--- a/apps/files/src/components/FileList.vue
+++ b/apps/files/src/components/FileList.vue
@@ -16,10 +16,8 @@
         </div>
         <slot name="headerColumns"/>
         <div
-          class="uk-text-meta uk-text-right uk-width-small uk-margin-small-right"
-          v-translate
+          class="uk-margin-small-right oc-icon-width"
         >
-          More
         </div>
       </oc-grid>
       <div id="files-list-container" class="uk-flex-1" v-if="!loading">
@@ -46,7 +44,7 @@
                 />
               </div>
               <slot name="rowColumns" :item="item" :index="item.id" />
-              <div class="uk-width-small uk-text-right uk-margin-small-right">
+              <div class="uk-text-right uk-margin-small-right">
                 <oc-button
                   :id="actionsDropdownButtonId(item.id, active)"
                   class="files-list-row-show-actions"
@@ -302,11 +300,17 @@ 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}`
     }
   }
 }
 </script>
+<style scoped>
+  /* FIXME: move to ODS, it is useful to have a column as wide as just an icon */
+  .oc-icon-width {
+    width: 24px;
+  }
+</style>
diff --git a/apps/files/src/components/FilesAppBar.vue b/apps/files/src/components/FilesAppBar.vue
index 4c94ad09216..cda5ba343ca 100644
--- a/apps/files/src/components/FilesAppBar.vue
+++ b/apps/files/src/components/FilesAppBar.vue
@@ -32,7 +32,7 @@
           <template v-if="$_ocFilesAppBar_showActions">
             <oc-button v-if="canUpload && hasFreeSpace" variation="primary" id="new-file-menu-btn"><translate>+ New</translate></oc-button>
             <oc-button v-else disabled id="new-file-menu-btn" :uk-tooltip="_cannotCreateDialogText"><translate>+ New</translate></oc-button>
-            <oc-drop drop-id="new-file-menu-drop" toggle="#new-file-menu-btn" mode="click" closeOnClick :options="{delayHide: 0}">
+            <oc-drop drop-id="new-file-menu-drop" toggle="#new-file-menu-btn" mode="click" closeOnClick :options="{delayHide: 0, flip: false}">
               <oc-nav>
                 <file-upload :path='currentPath' :headers="headers" @success="onFileSuccess" @error="onFileError" @progress="onFileProgress"></file-upload>
                 <folder-upload v-if="!isIE11()" :rootPath='item' :path='currentPath' :headers="headers" @success="onFileSuccess" @error="onFileError" @progress="onFileProgress"></folder-upload>
diff --git a/apps/files/src/components/FilesLists/RowActionsDropdown.vue b/apps/files/src/components/FilesLists/RowActionsDropdown.vue
index 24492a5a8b3..95d24d0da49 100644
--- 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`"
-    :options="{ offset: 0 }"
-    :toggle="`#files-file-list-action-button-small-resolution-${item.id}-active`"
+    :boundary="`#files-file-list-action-button-${item.id}-active`"
+    :options="{ offset: 0, flip: false }"
+    :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/changelog/unreleased/2974 b/changelog/unreleased/2974
index f3da898fd44..fb7b2922813 100644
--- 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