thepaperpilot/chromatic-lattice
1
0
Fork 0
Code Issues Pull requests Releases Activity Actions

merged grid rows and retain soft edges

Browse source
This commit is contained in:
Filip Kopyt 2022-12-10 19:33:24 +01:00
parent c40b80f60a
commit 27def194e8
3 changed files with 53 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
package-lock.json generated
View file

@ -11,8 +11,12 @@
"@fontsource/material-icons": "^4.5.4",
"@fontsource/roboto-mono": "^4.5.8",
"@pixi/app": "~6.3.2",
"@pixi/constants": "~6.3.2",
"@pixi/core": "~6.3.2",
"@pixi/particle-emitter": "^5.0.4",
"@pixi/display": "~6.3.2",
"@pixi/math": "~6.3.2",
"@pixi/particle-emitter": "^5.0.7",
"@pixi/sprite": "~6.3.2",
"@pixi/ticker": "~6.3.2",
"@vitejs/plugin-vue": "^2.3.3",
"@vitejs/plugin-vue-jsx": "^1.3.10",
@ -24,7 +28,7 @@
"vite-tsconfig-paths": "^3.5.0",
"vue": "^3.2.26",
"vue-next-select": "^2.10.2",
"vue-panzoom": "^1.1.6",
"vue-panzoom": "https://github.com/thepaperpilot/vue-panzoom.git",
"vue-textarea-autosize": "^1.1.1",
"vue-toastification": "^2.0.0-rc.1",
"vue-transition-expand": "^0.1.0",
@ -1818,8 +1822,7 @@
"node_modules/@pixi/constants": {
"version": "6.3.2",
"resolved": "https://registry.npmjs.org/@pixi/constants/-/constants-6.3.2.tgz",
"integrity": "sha512-sUE8QEJNl4vWUybS0YqpVUBWoOyLkr5bSj1+3mpmbWJTMVmLB2voFXo7XpSNCBlLH1SBN5flcgJlUWOCgNyATg==",
"peer": true
"integrity": "sha512-sUE8QEJNl4vWUybS0YqpVUBWoOyLkr5bSj1+3mpmbWJTMVmLB2voFXo7XpSNCBlLH1SBN5flcgJlUWOCgNyATg=="
},
"node_modules/@pixi/core": {
"version": "6.3.2",
@ -1845,7 +1848,6 @@
"version": "6.3.2",
"resolved": "https://registry.npmjs.org/@pixi/display/-/display-6.3.2.tgz",
"integrity": "sha512-D+WiM0BcyPK91RYxl7TXXVNz/5lOGs8Q6jtCMcWgTHwCXxWPOHFnNZ4KPJZpUQ7me8Tl2u+c9hfB5Oh1+17r/Q==",
"peer": true,
"peerDependencies": {
"@pixi/math": "6.3.2",
"@pixi/settings": "6.3.2",
@ -1855,8 +1857,7 @@
"node_modules/@pixi/math": {
"version": "6.3.2",
"resolved": "https://registry.npmjs.org/@pixi/math/-/math-6.3.2.tgz",
"integrity": "sha512-REXrCKQaT2shJ3p2Rpq1ZYV4iUeAOUFKnLN2KteQWtB5HQpB8b+w5xBGI+TcnY0FUhx92fbKPYTTvCftNZF4Jw==",
"peer": true
"integrity": "sha512-REXrCKQaT2shJ3p2Rpq1ZYV4iUeAOUFKnLN2KteQWtB5HQpB8b+w5xBGI+TcnY0FUhx92fbKPYTTvCftNZF4Jw=="
},
"node_modules/@pixi/particle-emitter": {
"version": "5.0.7",
@ -1890,7 +1891,6 @@
"version": "6.3.2",
"resolved": "https://registry.npmjs.org/@pixi/sprite/-/sprite-6.3.2.tgz",
"integrity": "sha512-T1KJ8l2f8Otn6Se6h4b2pz2nrUSe59Pnmj2WIzgBisM245h7dGATs05MisMaLV6Lg/3gTBTxsLBmKsbDSQqbNw==",
"peer": true,
"peerDependencies": {
"@pixi/constants": "6.3.2",
"@pixi/core": "6.3.2",
@ -6726,8 +6726,8 @@
},
"node_modules/vue-panzoom": {
"version": "1.1.6",
"resolved": "https://registry.npmjs.org/vue-panzoom/-/vue-panzoom-1.1.6.tgz",
"integrity": "sha512-yEE60C/gnc5NGL6YBD++CErD820va7fkBJE5dCWZZzXX2aMGklj/UKmtqu1u5xDkuOIjnGUr412LNHwOOE711w==",
"resolved": "git+ssh://git@github.com/thepaperpilot/vue-panzoom.git#fa3cc91f6842cdfbd1bfb433c75cac01f177fe2d",
"license": "MIT",
"dependencies": {
"panzoom": "^9.4.1"
}
@ -8442,8 +8442,7 @@
"@pixi/constants": {
"version": "6.3.2",
"resolved": "https://registry.npmjs.org/@pixi/constants/-/constants-6.3.2.tgz",
"integrity": "sha512-sUE8QEJNl4vWUybS0YqpVUBWoOyLkr5bSj1+3mpmbWJTMVmLB2voFXo7XpSNCBlLH1SBN5flcgJlUWOCgNyATg==",
"peer": true
"integrity": "sha512-sUE8QEJNl4vWUybS0YqpVUBWoOyLkr5bSj1+3mpmbWJTMVmLB2voFXo7XpSNCBlLH1SBN5flcgJlUWOCgNyATg=="
},
"@pixi/core": {
"version": "6.3.2",
@ -8457,14 +8456,12 @@
"version": "6.3.2",
"resolved": "https://registry.npmjs.org/@pixi/display/-/display-6.3.2.tgz",
"integrity": "sha512-D+WiM0BcyPK91RYxl7TXXVNz/5lOGs8Q6jtCMcWgTHwCXxWPOHFnNZ4KPJZpUQ7me8Tl2u+c9hfB5Oh1+17r/Q==",
"peer": true,
"requires": {}
},
"@pixi/math": {
"version": "6.3.2",
"resolved": "https://registry.npmjs.org/@pixi/math/-/math-6.3.2.tgz",
"integrity": "sha512-REXrCKQaT2shJ3p2Rpq1ZYV4iUeAOUFKnLN2KteQWtB5HQpB8b+w5xBGI+TcnY0FUhx92fbKPYTTvCftNZF4Jw==",
"peer": true
"integrity": "sha512-REXrCKQaT2shJ3p2Rpq1ZYV4iUeAOUFKnLN2KteQWtB5HQpB8b+w5xBGI+TcnY0FUhx92fbKPYTTvCftNZF4Jw=="
},
"@pixi/particle-emitter": {
"version": "5.0.7",
@ -8491,7 +8488,6 @@
"version": "6.3.2",
"resolved": "https://registry.npmjs.org/@pixi/sprite/-/sprite-6.3.2.tgz",
"integrity": "sha512-T1KJ8l2f8Otn6Se6h4b2pz2nrUSe59Pnmj2WIzgBisM245h7dGATs05MisMaLV6Lg/3gTBTxsLBmKsbDSQqbNw==",
"peer": true,
"requires": {}
},
"@pixi/ticker": {
@ -11866,9 +11862,8 @@
"requires": {}
},
"vue-panzoom": {
"version": "1.1.6",
"resolved": "https://registry.npmjs.org/vue-panzoom/-/vue-panzoom-1.1.6.tgz",
"integrity": "sha512-yEE60C/gnc5NGL6YBD++CErD820va7fkBJE5dCWZZzXX2aMGklj/UKmtqu1u5xDkuOIjnGUr412LNHwOOE711w==",
"version": "git+ssh://git@github.com/thepaperpilot/vue-panzoom.git#fa3cc91f6842cdfbd1bfb433c75cac01f177fe2d",
"from": "vue-panzoom@https://github.com/thepaperpilot/vue-panzoom.git",
"requires": {
"panzoom": "^9.4.1"
}

37
src/components/common/table.css
View file

@ -56,6 +56,43 @@
border-radius: var(--border-radius);
}
.row-grid.mergeAdjacent > .feature:not(.dontMerge),
.row-grid.mergeAdjacent > .tooltip-container > .feature:not(.dontMerge) {
margin-left: 0;
margin-right: 0;
margin-bottom: 0;
margin-top: 0;
border-radius: 0;
}
.row-grid.mergeAdjacent > .feature:not(.dontMerge):last-child,
.row-grid.mergeAdjacent > .tooltip-container:last-child > .feature:not(.dontMerge) {
border-radius: 0 0 0 0;
}
.row-grid.mergeAdjacent > .feature:not(.dontMerge):first-child,
.row-grid.mergeAdjacent > .tooltip-container:first-child > .feature:not(.dontMerge) {
border-radius: 0 0 0 0;
}
.table-grid > .row-grid.mergeAdjacent:last-child > .feature:not(.dontMerge):first-child {
border-radius: 0 0 0 var(--border-radius);
}
.table-grid > .row-grid.mergeAdjacent:first-child > .feature:not(.dontMerge):last-child {
border-radius: 0 var(--border-radius) 0 0;
}
.table-grid > .row-grid.mergeAdjacent:first-child > .feature:not(.dontMerge):first-child {
border-radius: var(--border-radius) 0 0 0;
}
.table-grid > .row-grid.mergeAdjacent:last-child > .feature:not(.dontMerge):last-child {
border-radius: 0 0 var(--border-radius) 0;
}
/*
TODO how to implement mergeAdjacent for grids?
.row.mergeAdjacent + .row.mergeAdjacent > .feature:not(.dontMerge) {

4
src/features/grids/Grid.vue
View file

@ -4,9 +4,9 @@
:style="{
visibility: unref(visibility) === Visibility.Hidden ? 'hidden' : undefined
}"
class="table"
class="table-grid"
>
<div v-for="row in unref(rows)" class="row" :class="{ mergeAdjacent }" :key="row">
<div v-for="row in unref(rows)" class="row-grid" :class="{ mergeAdjacent }" :key="row">
<GridCell
v-for="col in unref(cols)"
:key="col"