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,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>

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>

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"

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