[full-ci] Fix right sidebar content on small screens

changelog/unreleased/bugfix-fix-right-sidebar-on-small-screens

@@ -0,0 +1,9 @@
+Bugfix: Fix right sidebar content on small screens
+
+We've fixed the right sidebar content on small screens because some screen sizes caused the content to flow out of the screen. Things that have been done to achieve this:
+
+* Selection info has been removed.
+* Labels of the batch actions will hide on screens <1280px if the sidebar is open.
+
+https://github.com/owncloud/web/issues/7498
+https://github.com/owncloud/web/pull/7508

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

@@ -1,6 +1,7 @@
 <template>
   <li>
     <oc-button
+      v-oc-tooltip="showTooltip || action.hideLabel ? action.label(filterParams) : ''"
       :type="action.componentType"
       v-bind="getComponentProps(action, items)"
       :class="[action.class, 'action-menu-item']"
@@ -29,9 +30,12 @@
         :fill-type="action.iconFillType || 'line'"
         size="medium"
       />
-      <span class="oc-files-context-action-label" data-testid="action-label">{{
-        action.label(filterParams)
-      }}</span>
+      <span
+        v-if="!action.hideLabel"
+        class="oc-files-context-action-label"
+        data-testid="action-label"
+        >{{ action.label(filterParams) }}</span
+      >
       <span
         v-if="action.shortcut && shortcutHint"
         class="oc-files-context-action-shortcut"
@@ -67,6 +71,11 @@ export default {
       type: Boolean,
       default: true,
       required: false
+    },
+    showTooltip: {
+      type: Boolean,
+      default: false,
+      required: false
     }
   },
   computed: {

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

@@ -1,5 +1,5 @@
 <template>
-  <div id="files-app-bar">
+  <div id="files-app-bar" ref="filesAppBar" :class="{ 'files-app-bar-squashed': !sidebarClosed }">
     <oc-hidden-announcer :announcement="selectedResourcesAnnouncement" level="polite" />
     <div class="files-topbar oc-py-s">
       <h1 class="oc-invisible-sr" v-text="pageTitle" />
@@ -32,14 +32,13 @@
         </div>
       </div>
       <div class="files-app-bar-actions">
-        <div class="oc-flex-1 oc-flex oc-flex-start" style="gap: 15px">
-          <slot v-if="showActionsOnSelection || selectedFiles.length === 0" name="actions" />
-          <size-info
-            v-if="showSelectionInfo"
-            class="oc-visible@l"
-            :class="{ 'files-app-bar-actions-squashed': !sidebarClosed }"
+        <div class="oc-flex-1 oc-flex oc-flex-start">
+          <slot
+            v-if="showActionsOnSelection || selectedFiles.length === 0"
+            name="actions"
+            :limitedScreenSpace="limitedScreenSpace"
           />
-          <batch-actions v-if="showBatchActions" />
+          <batch-actions v-if="showBatchActions" :show-tooltips="limitedScreenSpace" />
         </div>
       </div>
       <slot name="content" />
@@ -56,7 +55,6 @@ import MixinFileActions from '../../mixins/fileActions'
 import BatchActions from './SelectedResources/BatchActions.vue'
 import ContextActions from '../FilesList/ContextActions.vue'
 import SharesNavigation from './SharesNavigation.vue'
-import SizeInfo from './SelectedResources/SizeInfo.vue'
 import SidebarToggle from './SidebarToggle.vue'
 import ViewOptions from './ViewOptions.vue'
 
@@ -66,7 +64,6 @@ export default {
     ContextActions,
     SharesNavigation,
     SidebarToggle,
-    SizeInfo,
     ViewOptions
   },
   mixins: [MixinFileActions],
@@ -79,6 +76,12 @@ export default {
     hasViewOptions: { type: Boolean, default: true },
     showActionsOnSelection: { type: Boolean, default: false }
   },
+  data: function () {
+    return {
+      resizeObserver: new ResizeObserver(this.onResize),
+      limitedScreenSpace: false
+    }
+  },
   computed: {
     ...mapGetters('Files', ['files', 'selectedFiles']),
     ...mapState('Files', ['areHiddenFilesShown', 'areFileExtensionsShown']),
@@ -88,15 +91,9 @@ export default {
       const title = this.$route.meta.title
       return this.$gettext(title)
     },
-    areDefaultActionsVisible() {
-      return this.selectedFiles.length < 1
-    },
     showContextActions() {
       return last(this.breadcrumbs).allowContextActions
     },
-    showSelectionInfo() {
-      return this.hasBulkActions && this.selectedFiles.length > 0
-    },
     showBatchActions() {
       return this.hasBulkActions
     },
@@ -112,6 +109,12 @@ export default {
       return this.$gettextInterpolate(translated, { amount: this.selectedFiles.length })
     }
   },
+  mounted() {
+    this.resizeObserver.observe(this.$refs.filesAppBar)
+  },
+  beforeDestroy() {
+    this.resizeObserver.unobserve(this.$refs.filesAppBar)
+  },
 
   created() {
     // Storage returns a string so we need to convert it into a boolean
@@ -132,7 +135,13 @@ export default {
   },
 
   methods: {
-    ...mapMutations('Files', ['SET_HIDDEN_FILES_VISIBILITY', 'SET_FILE_EXTENSIONS_VISIBILITY'])
+    ...mapMutations('Files', ['SET_HIDDEN_FILES_VISIBILITY', 'SET_FILE_EXTENSIONS_VISIBILITY']),
+
+    onResize() {
+      this.limitedScreenSpace = this.sidebarClosed
+        ? window.innerWidth <= 1000
+        : window.innerWidth <= 1280
+    }
   }
 }
 </script>
@@ -153,13 +162,6 @@ export default {
     gap: var(--oc-space-small);
     justify-content: flex-end;
     min-height: 3rem;
-
-    &-squashed {
-      display: none;
-      @media only screen and (min-width: 1400px) {
-        display: inherit;
-      }
-    }
   }
 
   #files-breadcrumb {

packages/web-app-files/src/components/AppBar/CreateAndUpload.vue

@@ -1,17 +1,18 @@
 <template>
-  <div v-if="showActions" class="oc-flex-inline oc-width-1-1" style="gap: 15px">
+  <div v-if="showActions" class="create-and-upload-actions oc-flex-inline oc-width-1-1">
     <template v-if="createFileActionsAvailable">
       <span v-oc-tooltip="newButtonTooltip">
         <oc-button
           id="new-file-menu-btn"
           key="new-file-menu-btn-enabled"
+          v-oc-tooltip="hideButtonLabels ? $gettext('New') : ''"
           :aria-label="newButtonAriaLabel"
           appearance="filled"
           variation="primary"
           :disabled="uploadOrFileCreationBlocked"
         >
           <oc-icon name="add" />
-          <translate>New</translate>
+          <span v-if="!hideButtonLabels" v-text="$gettext('New')" />
         </oc-button>
       </span>
       <oc-drop
@@ -71,26 +72,28 @@
       <span v-oc-tooltip="newButtonTooltip">
         <oc-button
           id="new-folder-btn"
+          v-oc-tooltip="hideButtonLabels ? $gettext('New Folder') : ''"
           appearance="filled"
           variation="primary"
           :aria-label="newButtonAriaLabel"
           :disabled="uploadOrFileCreationBlocked"
           @click="showCreateResourceModal"
         >
           <oc-icon name="resource-type-folder" />
-          <translate>New folder</translate>
+          <span v-if="!hideButtonLabels" v-text="$gettext('New Folder')" />
         </oc-button>
       </span>
     </template>
     <span v-oc-tooltip="uploadButtonTooltip">
       <oc-button
         id="upload-menu-btn"
         key="upload-menu-btn-enabled"
+        v-oc-tooltip="hideButtonLabels ? $gettext('Upload') : ''"
         :aria-label="uploadButtonAriaLabel"
         :disabled="uploadOrFileCreationBlocked"
       >
         <oc-icon name="upload" fill-type="line" />
-        <translate>Upload</translate>
+        <span v-if="!hideButtonLabels" v-text="$gettext('Upload')" />
       </oc-button>
     </span>
     <oc-drop
@@ -158,6 +161,13 @@ export default defineComponent({
     ResourceUpload
   },
   mixins: [MixinFileActions],
+  props: {
+    limitedScreenSpace: {
+      type: Boolean,
+      default: false,
+      required: false
+    }
+  },
   setup() {
     const instance = getCurrentInstance().proxy
     const uppyService = instance.$uppyService
@@ -212,6 +222,9 @@ export default defineComponent({
     showPasteHereButton() {
       return this.clipboardResources && this.clipboardResources.length !== 0
     },
+    hideButtonLabels() {
+      return this.limitedScreenSpace && this.showPasteHereButton
+    },
     mimetypesAllowedForCreation() {
       // we can't use `mapGetters` here because the External app doesn't exist in all deployments
       const mimeTypes = this.$store.getters['External/mimeTypes']
@@ -876,4 +889,10 @@ export default defineComponent({
     border-left: 0px !important;
   }
 }
+.create-and-upload-actions {
+  gap: var(--oc-space-small);
+  @media only screen and (min-width: 1000px) {
+    gap: var(--oc-space-medium);
+  }
+}
 </style>

packages/web-app-files/src/components/AppBar/SelectedResources/BatchActions.vue

@@ -8,6 +8,7 @@
       appearance="outline"
       class="oc-mr-s"
       :shortcut-hint="false"
+      :show-tooltip="showTooltips"
     />
   </oc-list>
 </template>
@@ -24,6 +25,7 @@ import DownloadFile from '../../../mixins/actions/downloadFile'
 import EmptyTrashBin from '../../../mixins/actions/emptyTrashBin'
 import Move from '../../../mixins/actions/move'
 import Restore from '../../../mixins/actions/restore'
+import ClearSelection from '../../../mixins/actions/clearSelection'
 
 export default {
   name: 'BatchActions',
@@ -37,8 +39,16 @@ export default {
     DownloadFile,
     EmptyTrashBin,
     Move,
-    Restore
+    Restore,
+    ClearSelection
   ],
+  props: {
+    showTooltips: {
+      type: Boolean,
+      default: false,
+      required: false
+    }
+  },
   computed: {
     ...mapGetters('Files', ['selectedFiles']),
 
@@ -50,6 +60,7 @@ export default {
 
     menuItemsBatchActions() {
       return [
+        ...this.$_clearSelection_items,
         ...this.$_acceptShare_items,
         ...this.$_declineShare_items,
         ...this.$_downloadArchive_items,
@@ -70,8 +81,6 @@ export default {
   display: block;
   li {
     float: left !important;
-    margin-top: var(--oc-space-xsmall);
-    margin-bottom: var(--oc-space-xsmall);
   }
 
   @media only screen and (min-width: 1200px) {
@@ -84,5 +93,20 @@ export default {
     display: flex;
     gap: var(--oc-space-small);
   }
+
+  .oc-files-context-action-label {
+    display: none;
+    @media only screen and (min-width: 1000px) {
+      display: inherit;
+    }
+  }
+}
+.files-app-bar-squashed .oc-files-appbar-batch-actions {
+  .oc-files-context-action-label {
+    display: none;
+    @media only screen and (min-width: 1280px) {
+      display: inherit;
+    }
+  }
 }
 </style>