fix: sidebar panel positioning

owncloud · Aug 22, 2022 · 241951f · 241951f
1 parent b128e10
commit 241951f
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 80 deletions.
diff --git a/packages/web-app-files/src/components/SideBar/SideBar.vue b/packages/web-app-files/src/components/SideBar/SideBar.vue
@@ -2,20 +2,21 @@
   <SideBar
     v-if="showSidebar"
     ref="sidebar"
+    class="files-side-bar"
     tabindex="-1"
     :sidebar-active-panel="sidebarActivePanel"
     :available-panels="availablePanels"
     :sidebar-accordions-warning-message="sidebarAccordionsWarningMessage"
     :is-content-displayed="isContentDisplayed"
     :loading="loading"
     :is-header-compact="isSingleResource"
+    v-bind="$attrs"
     @beforeDestroy="focusSideBar"
     @mounted="focusSideBar"
     @fileChanged="focusSideBar"
     @selectPanel="setActiveSidebarPanel"
     @close="closeSidebar"
     v-on="$listeners"
-    v-bind="$attrs"
   >
     <template #header>
       <file-info
@@ -260,19 +261,23 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.sidebar-panel {
-  &__file_info,
-  &__space_info {
-    background-color: var(--oc-color-background-default);
-    padding: var(--oc-space-small) var(--oc-space-small) 0 var(--oc-space-small);
+.files-side-bar {
+  z-index: 3;
+
+  .sidebar-panel {
+    &__file_info,
+    &__space_info {
+      background-color: var(--oc-color-background-default);
+      padding: var(--oc-space-small) var(--oc-space-small) 0 var(--oc-space-small);
+    }
   }
-}
 
-._clipboard-success-animation {
-  animation-name: _clipboard-success-animation;
-  animation-duration: 0.8s;
-  animation-timing-function: ease-out;
-  animation-fill-mode: both;
+  ._clipboard-success-animation {
+    animation-name: _clipboard-success-animation;
+    animation-duration: 0.8s;
+    animation-timing-function: ease-out;
+    animation-fill-mode: both;
+  }
 }
 
 @keyframes _clipboard-success-animation {

diff --git a/packages/web-app-files/src/views/Personal.vue b/packages/web-app-files/src/views/Personal.vue
@@ -1,76 +1,76 @@
 <template>
   <div class="oc-flex">
     <keyboard-actions :paginated-resources="paginatedResources" />
-    <div class="oc-width-1-1">
-    <app-bar
-      :has-bulk-actions="true"
-      :breadcrumbs="breadcrumbs"
-      :breadcrumbs-context-actions-items="[currentFolder]"
-      :show-actions-on-selection="true"
-    >
-      <template #actions>
-        <create-and-upload />
-      </template>
-    </app-bar>
-    <app-loading-spinner v-if="areResourcesLoading" />
-    <template v-else>
-      <not-found-message v-if="folderNotFound" class="files-not-found oc-height-1-1" />
-      <no-content-message
-        v-else-if="isEmpty"
-        id="files-personal-empty"
-        class="files-empty"
-        icon="folder"
-      >
-        <template #message>
-          <span v-translate>There are no resources in this folder</span>
-        </template>
-        <template #callToAction>
-          <span v-translate>
-            Drag files and folders here or use the "New" or "Upload" buttons to add files
-          </span>
-        </template>
-      </no-content-message>
-      <resource-table
-        v-else
-        id="files-personal-table"
-        v-model="selectedResourcesIds"
-        class="files-table"
-        :class="{ 'files-table-squashed': !sidebarClosed }"
-        :are-thumbnails-displayed="displayThumbnails"
-        :resources="paginatedResources"
-        :target-route="resourceTargetLocation"
-        :header-position="fileListHeaderY"
-        :drag-drop="true"
-        :sort-by="sortBy"
-        :sort-dir="sortDir"
-        @fileDropped="fileDropped"
-        @fileClick="$_fileActions_triggerDefaultAction"
-        @rowMounted="rowMounted"
-        @sort="handleSort"
+    <div class="oc-width-expand">
+      <app-bar
+        :has-bulk-actions="true"
+        :breadcrumbs="breadcrumbs"
+        :breadcrumbs-context-actions-items="[currentFolder]"
+        :show-actions-on-selection="true"
       >
-        <template #quickActions="{ resource }">
-          <quick-actions
-            :class="resource.preview"
-            class="oc-visible@s"
-            :item="resource"
-            :actions="app.quickActions"
-          />
+        <template #actions>
+          <create-and-upload />
         </template>
-        <template #contextMenu="{ resource }">
-          <context-actions v-if="isResourceInSelection(resource)" :items="selectedResources" />
-        </template>
-        <template #footer>
-          <pagination :pages="paginationPages" :current-page="paginationPage" />
-          <list-info
-            v-if="paginatedResources.length > 0"
-            class="oc-width-1-1 oc-my-s"
-            :files="totalFilesCount.files"
-            :folders="totalFilesCount.folders"
-            :size="totalFilesSize"
-          />
-        </template>
-      </resource-table>
-    </template>
+      </app-bar>
+      <app-loading-spinner v-if="areResourcesLoading" />
+      <template v-else>
+        <not-found-message v-if="folderNotFound" class="files-not-found oc-height-1-1" />
+        <no-content-message
+          v-else-if="isEmpty"
+          id="files-personal-empty"
+          class="files-empty"
+          icon="folder"
+        >
+          <template #message>
+            <span v-translate>There are no resources in this folder</span>
+          </template>
+          <template #callToAction>
+            <span v-translate>
+              Drag files and folders here or use the "New" or "Upload" buttons to add files
+            </span>
+          </template>
+        </no-content-message>
+        <resource-table
+          v-else
+          id="files-personal-table"
+          v-model="selectedResourcesIds"
+          class="files-table"
+          :class="{ 'files-table-squashed': !sidebarClosed }"
+          :are-thumbnails-displayed="displayThumbnails"
+          :resources="paginatedResources"
+          :target-route="resourceTargetLocation"
+          :header-position="fileListHeaderY"
+          :drag-drop="true"
+          :sort-by="sortBy"
+          :sort-dir="sortDir"
+          @fileDropped="fileDropped"
+          @fileClick="$_fileActions_triggerDefaultAction"
+          @rowMounted="rowMounted"
+          @sort="handleSort"
+        >
+          <template #quickActions="{ resource }">
+            <quick-actions
+              :class="resource.preview"
+              class="oc-visible@s"
+              :item="resource"
+              :actions="app.quickActions"
+            />
+          </template>
+          <template #contextMenu="{ resource }">
+            <context-actions v-if="isResourceInSelection(resource)" :items="selectedResources" />
+          </template>
+          <template #footer>
+            <pagination :pages="paginationPages" :current-page="paginationPage" />
+            <list-info
+              v-if="paginatedResources.length > 0"
+              class="oc-width-1-1 oc-my-s"
+              :files="totalFilesCount.files"
+              :folders="totalFilesCount.folders"
+              :size="totalFilesSize"
+            />
+          </template>
+        </resource-table>
+      </template>
     </div>
     <side-bar />
   </div>