Skip to content
This repository has been archived by the owner on Jan 3, 2024. It is now read-only.

Commit

Permalink
Merge pull request #1240 from owncloud/feat/table-padding-prop
Browse files Browse the repository at this point in the history
  • Loading branch information
Lukas Hirt authored Apr 26, 2021
2 parents e2d7365 + eebce57 commit 47db9b2
Show file tree
Hide file tree
Showing 5 changed files with 77 additions and 30 deletions.
5 changes: 5 additions & 0 deletions changelog/unreleased/enhancement-table-padding
View file
Original file line number Diff line number Diff line change
@@ -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
34 changes: 33 additions & 1 deletion src/components/table/OcTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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)
Expand All @@ -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) {
Expand Down
10 changes: 10 additions & 0 deletions src/components/table/OcTableFiles.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down
28 changes: 14 additions & 14 deletions src/components/table/__snapshots__/OcTable.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,46 +4,46 @@ exports[`OcTable displays all field types 1`] = `
<table class="oc-table">
<thead class="oc-thead">
<tr tabindex="-1">
<th class="oc-th oc-table-cell oc-table-cell-align-left oc-table-cell-align-bottom oc-table-cell-width-auto oc-text-nowrap oc-table-header-cell oc-table-header-cell-id">
<th class="oc-th oc-table-cell oc-table-cell-align-left oc-table-cell-align-bottom oc-table-cell-width-auto oc-text-nowrap oc-table-header-cell oc-table-header-cell-id oc-pl-s ">
Id
</th>
<th class="oc-th oc-table-cell oc-table-cell-align-left oc-table-cell-align-bottom oc-table-cell-width-auto oc-text-nowrap oc-table-header-cell oc-table-header-cell-resource"><span class="slot-header">Hello world!</span></th>
<th class="oc-th oc-table-cell oc-table-cell-align-left oc-table-cell-align-bottom oc-table-cell-width-auto oc-text-nowrap oc-table-header-cell oc-table-header-cell-doubled">
<th class="oc-th oc-table-cell oc-table-cell-align-left oc-table-cell-align-bottom oc-table-cell-width-auto oc-text-nowrap oc-table-header-cell oc-table-header-cell-doubled oc-pr-s">
Doubled
</th>
</tr>
</thead>
<tbody>
<tr tabindex="-1" class="oc-tbody-tr oc-tbody-tr-4b136c0a-5057-11eb-ac70-eba264112003" style="height: 64px;">
<td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-table-data-cell oc-table-data-cell-id">4b136c0a-5057-11eb-ac70-eba264112003</td>
<td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-table-data-cell oc-table-data-cell-id oc-pl-s ">4b136c0a-5057-11eb-ac70-eba264112003</td>
<td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-table-data-cell oc-table-data-cell-resource">
<div class="slot"><span>
Hello world!
</span></div>
</td>
<td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-table-data-cell oc-table-data-cell-doubled">
<td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-table-data-cell oc-table-data-cell-doubled oc-pr-s">
Double of 2 is 4
</td>
</tr>
<tr tabindex="-1" class="oc-tbody-tr oc-tbody-tr-8468c9f0-5057-11eb-924b-934c6fd827a2" style="height: 64px;">
<td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-table-data-cell oc-table-data-cell-id">8468c9f0-5057-11eb-924b-934c6fd827a2</td>
<td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-table-data-cell oc-table-data-cell-id oc-pl-s ">8468c9f0-5057-11eb-924b-934c6fd827a2</td>
<td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-table-data-cell oc-table-data-cell-resource">
<div class="slot"><span>
Hello world!
</span></div>
</td>
<td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-table-data-cell oc-table-data-cell-doubled">
<td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-table-data-cell oc-table-data-cell-doubled oc-pr-s">
Double of 6 is 12
</td>
</tr>
<tr tabindex="-1" class="oc-tbody-tr oc-tbody-tr-9c4cf97e-5057-11eb-8044-b3d5df9caa21" style="height: 64px;">
<td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-table-data-cell oc-table-data-cell-id">9c4cf97e-5057-11eb-8044-b3d5df9caa21</td>
<td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-table-data-cell oc-table-data-cell-id oc-pl-s ">9c4cf97e-5057-11eb-8044-b3d5df9caa21</td>
<td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-table-data-cell oc-table-data-cell-resource">
<div class="slot"><span>
Hello world!
</span></div>
</td>
<td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-table-data-cell oc-table-data-cell-doubled">
<td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-table-data-cell oc-table-data-cell-doubled oc-pr-s">
Double of 12 is 24
</td>
</tr>
Expand All @@ -57,23 +57,23 @@ exports[`OcTable hides header 1`] = `
<!---->
<oc-tbody-stub>
<oc-tr-stub class="oc-tbody-tr oc-tbody-tr-4b136c0a-5057-11eb-ac70-eba264112003" style="height: 64px;">
<oc-td-stub alignh="left" alignv="middle" width="auto" class="oc-table-data-cell oc-table-data-cell-id">4b136c0a-5057-11eb-ac70-eba264112003</oc-td-stub>
<oc-td-stub alignh="left" alignv="middle" width="auto" class="oc-table-data-cell oc-table-data-cell-id oc-pl-s ">4b136c0a-5057-11eb-ac70-eba264112003</oc-td-stub>
<oc-td-stub alignh="left" alignv="middle" width="auto" class="oc-table-data-cell oc-table-data-cell-resource"></oc-td-stub>
<oc-td-stub alignh="left" alignv="middle" width="auto" class="oc-table-data-cell oc-table-data-cell-doubled">
<oc-td-stub alignh="left" alignv="middle" width="auto" class="oc-table-data-cell oc-table-data-cell-doubled oc-pr-s">
Double of 2 is 4
</oc-td-stub>
</oc-tr-stub>
<oc-tr-stub class="oc-tbody-tr oc-tbody-tr-8468c9f0-5057-11eb-924b-934c6fd827a2" style="height: 64px;">
<oc-td-stub alignh="left" alignv="middle" width="auto" class="oc-table-data-cell oc-table-data-cell-id">8468c9f0-5057-11eb-924b-934c6fd827a2</oc-td-stub>
<oc-td-stub alignh="left" alignv="middle" width="auto" class="oc-table-data-cell oc-table-data-cell-id oc-pl-s ">8468c9f0-5057-11eb-924b-934c6fd827a2</oc-td-stub>
<oc-td-stub alignh="left" alignv="middle" width="auto" class="oc-table-data-cell oc-table-data-cell-resource"></oc-td-stub>
<oc-td-stub alignh="left" alignv="middle" width="auto" class="oc-table-data-cell oc-table-data-cell-doubled">
<oc-td-stub alignh="left" alignv="middle" width="auto" class="oc-table-data-cell oc-table-data-cell-doubled oc-pr-s">
Double of 6 is 12
</oc-td-stub>
</oc-tr-stub>
<oc-tr-stub class="oc-tbody-tr oc-tbody-tr-9c4cf97e-5057-11eb-8044-b3d5df9caa21" style="height: 64px;">
<oc-td-stub alignh="left" alignv="middle" width="auto" class="oc-table-data-cell oc-table-data-cell-id">9c4cf97e-5057-11eb-8044-b3d5df9caa21</oc-td-stub>
<oc-td-stub alignh="left" alignv="middle" width="auto" class="oc-table-data-cell oc-table-data-cell-id oc-pl-s ">9c4cf97e-5057-11eb-8044-b3d5df9caa21</oc-td-stub>
<oc-td-stub alignh="left" alignv="middle" width="auto" class="oc-table-data-cell oc-table-data-cell-resource"></oc-td-stub>
<oc-td-stub alignh="left" alignv="middle" width="auto" class="oc-table-data-cell oc-table-data-cell-doubled">
<oc-td-stub alignh="left" alignv="middle" width="auto" class="oc-table-data-cell oc-table-data-cell-doubled oc-pr-s">
Double of 12 is 24
</oc-td-stub>
</oc-tr-stub>
Expand Down
Loading

0 comments on commit 47db9b2

Please sign in to comment.