From 27def194e877724a2d891176d61df34bc588c157 Mon Sep 17 00:00:00 2001
From: Filip Kopyt <filipkopyt14@gmail.com>
Date: Sat, 10 Dec 2022 19:33:24 +0100
Subject: [PATCH] merged grid rows and retain soft edges
---
package-lock.json | 33 +++++++++++++----------------
src/components/common/table.css | 37 +++++++++++++++++++++++++++++++++
src/features/grids/Grid.vue | 4 ++--
3 files changed, 53 insertions(+), 21 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 491a72f..34e4ace 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -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"
}
diff --git a/src/components/common/table.css b/src/components/common/table.css
index 56d4929..a48d191 100644
--- a/src/components/common/table.css
+++ b/src/components/common/table.css
@@ -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) {
diff --git a/src/features/grids/Grid.vue b/src/features/grids/Grid.vue
index 729d5a5..b6315b0 100644
--- a/src/features/grids/Grid.vue
+++ b/src/features/grids/Grid.vue
@@ -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"