diff --git a/changelog/unreleased/enhancement-table-padding b/changelog/unreleased/enhancement-table-padding new file mode 100644 index 000000000..9799d1448 --- /dev/null +++ b/changelog/unreleased/enhancement-table-padding @@ -0,0 +1,5 @@ +Enhancement: Add prop to define table padding + +We've added new prop called `paddingX` which can be used to set the padding along x axis of the `oc-table` or `oc-table-files`. + +https://github.com/owncloud/owncloud-design-system/pull/1240 \ No newline at end of file diff --git a/src/components/table/OcTable.vue b/src/components/table/OcTable.vue index 9d5690b17..06129ca55 100644 --- a/src/components/table/OcTable.vue +++ b/src/components/table/OcTable.vue @@ -53,6 +53,7 @@ import OcTr from "./_OcTableRow" import OcTh from "./_OcTableCellHead" import OcTd from "./_OcTableCellData" import SortMixin from "./mixins/sort" +import { getSizeClass } from "../../utils/sizeClasses" import { EVENT_THEAD_CLICKED, EVENT_TROW_CLICKED } from "./helpers/constants" @@ -162,6 +163,16 @@ export default { required: false, default: 0, }, + /** + * Sets the padding size for x axis + * @values xsmall, small, medium, large, xlarge + */ + paddingX: { + type: String, + required: false, + default: "small", + validator: size => /(xsmall|small|medium|large|xlarge)/.test(size), + }, }, data() { return { @@ -218,7 +229,19 @@ export default { props.class += ` ${field.thClass}` } if (this.sticky) { - props.style = `${this.headerPosition}px` + props.style = `top: ${this.headerPosition}px;` + } + + if (index === 0) { + props.class += ` oc-pl-${getSizeClass(this.paddingX)} ` + } + + if (index === this.fields.length - 1) { + if (field.sortable) { + props.style += `padding-right: calc(var(--oc-space-${this.paddingX}) + 0.65em)` + } else { + props.class += ` oc-pr-${getSizeClass(this.paddingX)}` + } } this.extractSortThProps(props, field, index) @@ -245,6 +268,15 @@ export default { if (Object.prototype.hasOwnProperty.call(field, "wrap")) { props.wrap = field.wrap } + + if (index === 0) { + props.class += ` oc-pl-${getSizeClass(this.paddingX)} ` + } + + if (index === this.fields.length - 1) { + props.class += ` oc-pr-${getSizeClass(this.paddingX)}` + } + return props }, extractCellProps(field) { diff --git a/src/components/table/OcTableFiles.vue b/src/components/table/OcTableFiles.vue index 6f596b09b..03d7ab9bd 100644 --- a/src/components/table/OcTableFiles.vue +++ b/src/components/table/OcTableFiles.vue @@ -215,6 +215,16 @@ export default { required: false, default: null, }, + /** + * Sets the padding size for x axis + * @values xsmall, small, medium, large, xlarge + */ + paddingX: { + type: String, + required: false, + default: "small", + validator: size => /(xsmall|small|medium|large|xlarge)/.test(size), + }, }, computed: { fields() { diff --git a/src/components/table/__snapshots__/OcTable.spec.js.snap b/src/components/table/__snapshots__/OcTable.spec.js.snap index 8842cc733..8112099c8 100644 --- a/src/components/table/__snapshots__/OcTable.spec.js.snap +++ b/src/components/table/__snapshots__/OcTable.spec.js.snap @@ -4,46 +4,46 @@ exports[`OcTable displays all field types 1`] = ` - - - + - - + - - + - @@ -57,23 +57,23 @@ exports[`OcTable hides header 1`] = ` - 4b136c0a-5057-11eb-ac70-eba264112003 + 4b136c0a-5057-11eb-ac70-eba264112003 - + Double of 2 is 4 - 8468c9f0-5057-11eb-924b-934c6fd827a2 + 8468c9f0-5057-11eb-924b-934c6fd827a2 - + Double of 6 is 12 - 9c4cf97e-5057-11eb-8044-b3d5df9caa21 + 9c4cf97e-5057-11eb-8044-b3d5df9caa21 - + Double of 12 is 24 diff --git a/src/components/table/__snapshots__/OcTableFiles.spec.js.snap b/src/components/table/__snapshots__/OcTableFiles.spec.js.snap index 81328b644..ce4ac1b23 100644 --- a/src/components/table/__snapshots__/OcTableFiles.spec.js.snap +++ b/src/components/table/__snapshots__/OcTableFiles.spec.js.snap @@ -4,38 +4,38 @@ exports[`OcTableFiles displays all fields 1`] = `
+ Id Hello world! + Doubled
4b136c0a-5057-11eb-ac70-eba2641120034b136c0a-5057-11eb-ac70-eba264112003
Hello world!
+ Double of 2 is 4
8468c9f0-5057-11eb-924b-934c6fd827a28468c9f0-5057-11eb-924b-934c6fd827a2
Hello world!
+ Double of 6 is 12
9c4cf97e-5057-11eb-8044-b3d5df9caa219c4cf97e-5057-11eb-8044-b3d5df9caa21
Hello world!
+ Double of 12 is 24
- - - - - - - - - - + - - + - - + -
+
+ Name + Size + Shared with + Owner + Modified + Shared + Deleted + Actions
1 day ago +
1 day ago +
1 day ago +