Redesign FilesTable

changelog/unreleased/enhancement-redesign-filestable

@@ -0,0 +1,7 @@
+Enhancement: Redesign FilesTable
+
+We've adjusted OcTable, OcResource, OcDrop and OcCheckbox
+to fit the redesign.
+
+https://github.com/owncloud/owncloud-design-system/pull/1958
+https://github.com/owncloud/web/issues/6207

src/components/atoms/OcDrop/__snapshots__/OcDrop.spec.js.snap

@@ -36,7 +36,7 @@ exports[`OcDrop tippy renders tippy 1`] = `
  id="oc-drop-15"
  >
  <div
- class="oc-card oc-card-body oc-rounded oc-background-highlight oc-p-m"
+ class="oc-card oc-card-body oc-rounded oc-background-secondary oc-p-m"
  >
  show
  </div>
@@ -82,7 +82,7 @@ exports[`OcDrop tippy renders tippy 2`] = `
  id="oc-drop-15"
  >
  <div
- class="oc-card oc-card-body oc-rounded oc-background-highlight oc-p-m"
+ class="oc-card oc-card-body oc-rounded oc-background-secondary oc-p-m"
  >
  show
  </div>
@@ -129,7 +129,7 @@ exports[`OcDrop tippy renders tippy 3`] = `
  id="oc-drop-15"
  >
  <div
- class="oc-card oc-card-body oc-rounded oc-background-highlight oc-p-m"
+ class="oc-card oc-card-body oc-rounded oc-background-secondary oc-p-m"
  >
  show
  </div>

src/components/molecules/OcTable/OcTable.sort.spec.js

@@ -48,8 +48,11 @@ describe("OcTable.sort", () => {
  const wrapper = mount(Table, {
  propsData: {
  fields: [...tableFields],
- data,
+ data
  },
+ stubs: {
+ "oc-icon": true
+ }
  })
  const headers = wrapper.findAll("thead th")
  it("has any [aria-sort] attribute on all sortable column headers", () => {
@@ -114,8 +117,11 @@ describe("OcTable.sort", () => {
  fields: tableFields,
  sortBy: tableFieldId.name,
  sortDir: tableFieldId.sortDir,
- data,
+ data
  },
+ stubs: {
+ "oc-icon": true
+ }
  })
 
  const headers = wrapper.findAll("thead th")
@@ -156,8 +162,11 @@ describe("OcTable.sort", () => {
  fields: tableFields,
  data,
  sortBy: sortByOld,
- sortDir: sortDirOld,
+ sortDir: sortDirOld
  },
+ stubs: {
+ "oc-icon": true
+ }
  })
 
  const headers = wrapper.findAll("thead th")

src/components/molecules/OcTable/OcTable.vue

@@ -516,6 +516,11 @@ export default {
 
  &-thead-content {
  vertical-align: middle;
+ display: inline-table;
+ color: var(--oc-color-swatch-passive-default);
+ &:hover {
+ text-decoration: underline;
+ }
  }
 
  &-footer {
@@ -532,14 +537,6 @@ export default {
 .header-text:hover + .oc-button-sort {
  opacity: 1;
 }
-.header-text {
- vertical-align: middle;
- display: inline-table;
- color: var(--oc-color-swatch-inverse-default);
- &:hover {
- text-decoration: underline;
- }
-}
 .oc-button-sort {
  opacity: 0;
  display: inline-table;