From 27def194e877724a2d891176d61df34bc588c157 Mon Sep 17 00:00:00 2001 From: Filip Kopyt 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" > -
+