Improve AppBar / BatchActions / SizeInfo for selection

Linting & Update tests Fixes after rebase
owncloud · Mar 17, 2022 · ab1e8f1 · ab1e8f1
1 parent e55b032
commit ab1e8f1
Show file tree

Hide file tree

Showing 9 changed files with 70 additions and 45 deletions.
diff --git a/packages/web-app-files/src/components/ActionMenuItem.vue b/packages/web-app-files/src/components/ActionMenuItem.vue
@@ -3,8 +3,10 @@
     <component
       :is="action.componentType"
       v-bind="getComponentProps(action, items)"
-      :class="['oc-text-bold', action.class]"
+      :class="[action.class, 'action-menu-item']"
       data-testid="action-handler"
+      appearance="raw"
+      size="small"
       v-on="getComponentListeners(action, items)"
     >
       <oc-img
@@ -105,3 +107,15 @@ export default {
   }
 }
 </script>
+<style lang="scss">
+.action-menu-item {
+  vertical-align: middle;
+  &:hover {
+    color: var(--oc-color-swatch-brand-hover);
+    text-decoration: underline;
+    .oc-icon > svg {
+      fill: var(--oc-color-swatch-brand-hover) !important;
+    }
+  }
+}
+</style>
diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -44,8 +44,12 @@
             @error="onFileError"
             @progress="onFileProgress"
           />
-          <size-info v-if="hasBulkActions && selectedFiles.length > 0" class="oc-mr oc-visible@l" />
-          <batch-actions v-if="hasBulkActions" />
+          <size-info
+            v-if="hasBulkActions && selectedFiles.length > 0"
+            class="oc-mr-m oc-visible@l"
+            style="padding-bottom: calc(1rem + 1px)"
+          />
+          <batch-actions v-if="hasBulkActions" style="padding-bottom: calc(1rem + 1px)" />
         </div>
       </div>
     </div>

diff --git a/packages/web-app-files/src/components/AppBar/SelectedResources/SizeInfo.vue b/packages/web-app-files/src/components/AppBar/SelectedResources/SizeInfo.vue
@@ -1,11 +1,21 @@
 <template>
-  <div class="oc-flex oc-flex-middle oc-text-nowrap">
+  <div class="oc-flex oc-flex-middle oc-text-nowrap size-info">
+    <oc-button
+      id="files-clear-selection"
+      v-oc-tooltip="clearSelectionLabel"
+      :aria-label="clearSelectionLabel"
+      class="oc-mr-s"
+      appearance="raw"
+      @click="RESET_SELECTION"
+    >
+      <oc-icon name="close" />
+    </oc-button>
     <translate
       v-if="selectedResourcesSize !== '?'"
       key="multiple-select-info-with-size"
       :translate-n="selectedResourcesAmount"
       :translate-params="{ amount: selectedResourcesAmount, size: selectedResourcesSize }"
-      translate-plural="%{ amount } selected items - %{ size }"
+      translate-plural="%{ amount } items - %{ size }"
       translate-comment="Number of selected resources and their size displayed above the files list"
       >%{ amount } selected item - %{ size }
     </translate>
@@ -14,19 +24,10 @@
       key="multiple-select-info"
       :translate-n="selectedResourcesAmount"
       :translate-params="{ amount: selectedResourcesAmount }"
-      translate-plural="%{ amount } selected items"
+      translate-plural="%{ amount } items"
       translate-comment="Number of selected resources displayed above the files list"
       >%{ amount } selected item
     </translate>
-    <oc-button
-      id="files-clear-selection"
-      v-oc-tooltip="clearSelectionLabel"
-      :aria-label="clearSelectionLabel"
-      class="oc-ml"
-      @click="RESET_SELECTION"
-    >
-      <oc-icon name="close" />
-    </oc-button>
   </div>
 </template>
 
@@ -66,3 +67,8 @@ export default {
   }
 }
 </script>
+<style lang="scss">
+.size-info span {
+  color: var(--oc-color-swatch-passive-default);
+}
+</style>
diff --git a/packages/web-app-files/src/components/Trashbin.vue b/packages/web-app-files/src/components/Trashbin.vue
@@ -24,6 +24,7 @@
         :resources="paginatedResources"
         :are-resources-clickable="false"
         :header-position="fileListHeaderY"
+        :hover="true"
         :sort-by="sortBy"
         :sort-dir="sortDir"
         @sort="handleSort"

diff --git a/...s/web-app-files/tests/unit/components/FilesList/__snapshots__/ContextActions.spec.js.snap b/...s/web-app-files/tests/unit/components/FilesList/__snapshots__/ContextActions.spec.js.snap
diff --git a/packages/web-app-files/tests/unit/components/__snapshots__/Trashbin.spec.js.snap b/packages/web-app-files/tests/unit/components/__snapshots__/Trashbin.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Trashbin component when the view is not loading anymore when length of the paginated resources is greater than zero should load the resource table with correct props 1`] = `
-<table class="files-table oc-table oc-table-sticky files-table-squashed" id="files-trashbin-table">
+<table class="files-table oc-table oc-table-hover oc-table-sticky files-table-squashed" id="files-trashbin-table">
   <thead class="oc-thead">
     <tr tabindex="-1" class="oc-table-header-row">
       <th class="oc-th oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-text-nowrap oc-table-header-cell oc-table-header-cell-select oc-pl-m " style="top: 0px;"><span class="oc-table-thead-content"><div class="resource-table-select-all"><span><input id="resource-table-select-all" type="checkbox" name="checkbox" class="oc-checkbox oc-rounded oc-checkbox-l" value=""> <label for="resource-table-select-all" class="oc-invisible-sr oc-cursor-pointer">Select all resources</label></span></div></span>

diff --git a/packages/web-app-files/tests/unit/views/__snapshots__/PublicFiles.spec.ts.snap b/packages/web-app-files/tests/unit/views/__snapshots__/PublicFiles.spec.ts.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PublicFiles view when the view is not loading anymore when length of the paginated resources is greater than zero should load the resource table with the correct props 1`] = `<resource-table-stub resources="[object Object],[object Object],[object Object]" resourcedomselector="[Function]" selection="" hasactions="true" targetroute="[object Object]" areresourcesclickable="true" headerposition="0" isselectable="true" paddingx="small" sortdir="desc" id="files-public-files-table" class="files-table files-table-squashed"></resource-table-stub>`;
+exports[`PublicFiles view when the view is not loading anymore when length of the paginated resources is greater than zero should load the resource table with the correct props 1`] = `<resource-table-stub resources="[object Object],[object Object],[object Object]" resourcedomselector="[Function]" selection="" hasactions="true" targetroute="[object Object]" areresourcesclickable="true" headerposition="0" isselectable="true" paddingx="small" hover="true" sortdir="desc" id="files-public-files-table" class="files-table files-table-squashed"></resource-table-stub>`;
diff --git a/packages/web-app-files/tests/unit/views/__snapshots__/Trashbin.spec.js.snap b/packages/web-app-files/tests/unit/views/__snapshots__/Trashbin.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Trashbin component when the view is not loading anymore when length of the paginated resources is greater than zero should load the resource table with correct props 1`] = `
-<table class="files-table oc-table oc-table-sticky files-table-squashed" id="files-trashbin-table">
+<table class="files-table oc-table oc-table-hover oc-table-sticky files-table-squashed" id="files-trashbin-table">
   <thead class="oc-thead">
     <tr tabindex="-1" class="oc-table-header-row">
       <th class="oc-th oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-text-nowrap oc-table-header-cell oc-table-header-cell-select oc-pl-m " style="top: 0px;"><span class="oc-table-thead-content"><div class="resource-table-select-all"><span><input id="resource-table-select-all" type="checkbox" name="checkbox" class="oc-checkbox oc-rounded oc-checkbox-l" value=""> <label for="resource-table-select-all" class="oc-invisible-sr oc-cursor-pointer">Select all resources</label></span></div></span>

diff --git a/packages/web-app-files/tests/unit/views/shares/__snapshots__/SharedWithOthers.spec.js.snap b/packages/web-app-files/tests/unit/views/shares/__snapshots__/SharedWithOthers.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SharedWithOthers when the wrapper is not loading anymore when length of paginated resources is greater than zero should load the resource table with correct props 1`] = `
-<table class="files-table oc-table oc-table-sticky files-table-squashed" id="files-shared-with-others-table">
+<table class="files-table oc-table oc-table-hover oc-table-sticky files-table-squashed" id="files-shared-with-others-table">
   <thead class="oc-thead">
     <tr tabindex="-1" class="oc-table-header-row">
       <th class="oc-th oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-text-nowrap oc-table-header-cell oc-table-header-cell-select oc-pl-m " style="top: 0px;"><span class="oc-table-thead-content"><div class="resource-table-select-all"><oc-checkbox-stub id="resource-table-select-all" label="Select all resources" hidelabel="true" size="large"></oc-checkbox-stub></div></span>