From 087b08b87e9e4554af1a6aadaf9730b22b715a99 Mon Sep 17 00:00:00 2001 From: Isaac Lee <68138671+luminousleek@users.noreply.github.com> Date: Wed, 14 Feb 2024 21:44:47 +0800 Subject: [PATCH 1/7] create div wrapper and add margin --- .../vue-components/src/panels/NestedPanel.vue | 20 ++++++++++++------- .../vue-components/src/panels/PanelBase.js | 6 ++++-- 2 files changed, 17 insertions(+), 9 deletions(-) diff --git a/packages/vue-components/src/panels/NestedPanel.vue b/packages/vue-components/src/panels/NestedPanel.vue index 7e9914e701..76c4eb622a 100644 --- a/packages/vue-components/src/panels/NestedPanel.vue +++ b/packages/vue-components/src/panels/NestedPanel.vue @@ -92,11 +92,13 @@ :fragment="fragment" @src-loaded="retrieverUpdateMaxHeight" /> - +
+ +
@@ -283,13 +285,17 @@ export default { margin-top: 0 !important; } - .card-body > .collapse-button { + .card-bottom { + padding-bottom: 13px; margin-bottom: 13px; + } + + .card-bottom > .collapse-button { margin-top: 5px; opacity: 0.2; } - .card-body > .collapse-button:hover { + .card-bottom > .collapse-button:hover { opacity: 1; } diff --git a/packages/vue-components/src/panels/PanelBase.js b/packages/vue-components/src/panels/PanelBase.js index a307b6efef..e7d1352b3b 100644 --- a/packages/vue-components/src/panels/PanelBase.js +++ b/packages/vue-components/src/panels/PanelBase.js @@ -190,7 +190,8 @@ export default { DOM update (nextTick) before setting maxHeight for transition. */ this.$nextTick(() => { - this.$refs.panel.style.maxHeight = `${this.getMaxHeight()}px`; + this.$refs.panel.style.maxHeight = `${this.$refs.panel.scrollHeight}px`; + // this.$refs.panel.style.maxHeight = `${this.getMaxHeight()}px`; }); }); }, @@ -212,7 +213,8 @@ export default { } // For expansion transition to 'continue' after src is loaded. - this.$refs.panel.style.maxHeight = `${this.getMaxHeight()}px`; + this.$refs.panel.style.maxHeight = `${this.$refs.panel.scrollHeight}px`; + // this.$refs.panel.style.maxHeight = `${this.getMaxHeight()}px`; }, getMaxHeight() { if (!this.bottomSwitchBool) { From 0df3ea74e0e95a9470727750721eb2eaecaed47d Mon Sep 17 00:00:00 2001 From: Isaac Lee <68138671+luminousleek@users.noreply.github.com> Date: Wed, 14 Feb 2024 21:45:48 +0800 Subject: [PATCH 2/7] remove getMaxHeight method --- .../vue-components/src/panels/PanelBase.js | 23 ------------------- 1 file changed, 23 deletions(-) diff --git a/packages/vue-components/src/panels/PanelBase.js b/packages/vue-components/src/panels/PanelBase.js index e7d1352b3b..6c0be86bc7 100644 --- a/packages/vue-components/src/panels/PanelBase.js +++ b/packages/vue-components/src/panels/PanelBase.js @@ -191,7 +191,6 @@ export default { */ this.$nextTick(() => { this.$refs.panel.style.maxHeight = `${this.$refs.panel.scrollHeight}px`; - // this.$refs.panel.style.maxHeight = `${this.getMaxHeight()}px`; }); }); }, @@ -214,28 +213,6 @@ export default { // For expansion transition to 'continue' after src is loaded. this.$refs.panel.style.maxHeight = `${this.$refs.panel.scrollHeight}px`; - // this.$refs.panel.style.maxHeight = `${this.getMaxHeight()}px`; - }, - getMaxHeight() { - if (!this.bottomSwitchBool) { - return this.$refs.panel.scrollHeight; - } - /* - Collapse button at bottom of panel's bottom margin is not included in panel's scrollHeight. - - It's bottom margin is added to the maxHeight of the panel to enable a smooth transition. - Otherwise, there would be an instant transition when reaching the end of the panel content. - */ - const bottomSwitch = document.querySelector('.card-body > .collapse-button'); - if (bottomSwitch == null) { - return this.$refs.panel.scrollHeight; - } - const bottomSwitchStyle = window.getComputedStyle(bottomSwitch); - const bottomSwitchBottomMargin = parseFloat(bottomSwitchStyle.marginBottom); - if (Number.isNaN(bottomSwitchBottomMargin)) { - return this.$refs.panel.scrollHeight; - } - return this.$refs.panel.scrollHeight + bottomSwitchBottomMargin; }, initPanel() { this.$refs.panel.addEventListener('transitionend', (event) => { From bfaea5f36eca7b08c5e1f58470036dadf2f05ede Mon Sep 17 00:00:00 2001 From: Isaac Lee <68138671+luminousleek@users.noreply.github.com> Date: Wed, 14 Feb 2024 21:52:07 +0800 Subject: [PATCH 3/7] remove tests for getMaxHeight --- .../src/__tests__/Panels.spec.js | 20 ---- .../__snapshots__/Panels.spec.js.snap | 95 ------------------- 2 files changed, 115 deletions(-) diff --git a/packages/vue-components/src/__tests__/Panels.spec.js b/packages/vue-components/src/__tests__/Panels.spec.js index 3f82ead9a9..93b7a82376 100644 --- a/packages/vue-components/src/__tests__/Panels.spec.js +++ b/packages/vue-components/src/__tests__/Panels.spec.js @@ -60,26 +60,6 @@ describe('NestedPanels', () => { expect(wrapper.element).toMatchSnapshot(); }); - test('transition height is correctly calculated', async () => { - const wrapper = mount(NestedPanel, { - slots: { - header: 'test header', - default: 'Some panel content\nsome other text', - }, - propsData: { - preload: true, - }, - attachTo: document.body, - }); - const panelElement = wrapper.element.querySelector('.card-collapse'); - Object.defineProperty(panelElement, 'scrollHeight', { configurable: true, value: 10 }); - const bottomSwitch = wrapper.element.querySelector('.card-body > .collapse-button'); - bottomSwitch.style.marginBottom = '13px'; - // click on header - await wrapper.find('div.card-header').trigger('click'); - expect(wrapper.element).toMatchSnapshot(); - }); - test('should have span.anchor when id is present', async () => { const wrapper = mount(NestedPanel, { propsData: { diff --git a/packages/vue-components/src/__tests__/__snapshots__/Panels.spec.js.snap b/packages/vue-components/src/__tests__/__snapshots__/Panels.spec.js.snap index 713138fe3a..4b7a554fd9 100644 --- a/packages/vue-components/src/__tests__/__snapshots__/Panels.spec.js.snap +++ b/packages/vue-components/src/__tests__/__snapshots__/Panels.spec.js.snap @@ -419,98 +419,3 @@ exports[`NestedPanels should show header when collapsed with expandHeaderless as `; - -exports[`NestedPanels transition height is correctly calculated 1`] = ` -
-
-
-
- -
- -
- test header -
- -
- - - - - -
-
- -
-
- Some panel content -some other text - - - -
- -
-
- - - - -
-
-`; From 7f9e22e364448904a2d366c4d29db72089cc04a4 Mon Sep 17 00:00:00 2001 From: Isaac Lee <68138671+luminousleek@users.noreply.github.com> Date: Wed, 14 Feb 2024 22:11:26 +0800 Subject: [PATCH 4/7] fix bug of not being able to reopen panel --- packages/vue-components/src/panels/PanelBase.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vue-components/src/panels/PanelBase.js b/packages/vue-components/src/panels/PanelBase.js index 6c0be86bc7..1d3023f63f 100644 --- a/packages/vue-components/src/panels/PanelBase.js +++ b/packages/vue-components/src/panels/PanelBase.js @@ -166,7 +166,7 @@ export default { } else { // Expand panel this.$refs.panel.style.transition = 'max-height 0.5s ease-in-out'; - this.$refs.panel.style.maxHeight = `${this.getMaxHeight()}px`; + this.$refs.panel.style.maxHeight = `${this.$refs.panel.scrollHeight}px`; } this.localExpanded = !this.localExpanded; From d1dfdf02626dbc8f16471345ba1ed63b28ca6dbe Mon Sep 17 00:00:00 2001 From: Isaac Lee <68138671+luminousleek@users.noreply.github.com> Date: Thu, 15 Feb 2024 17:53:19 +0800 Subject: [PATCH 5/7] rename div class --- packages/vue-components/src/panels/NestedPanel.vue | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/vue-components/src/panels/NestedPanel.vue b/packages/vue-components/src/panels/NestedPanel.vue index 76c4eb622a..5044e505bd 100644 --- a/packages/vue-components/src/panels/NestedPanel.vue +++ b/packages/vue-components/src/panels/NestedPanel.vue @@ -92,7 +92,7 @@ :fragment="fragment" @src-loaded="retrieverUpdateMaxHeight" /> -
+
.collapse-button { + .bottom-button-wrapper > .collapse-button { margin-top: 5px; opacity: 0.2; } - .card-bottom > .collapse-button:hover { + .bottom-button-wrapper > .collapse-button:hover { opacity: 1; } From f8af040eed59553f351121202e203460a5441956 Mon Sep 17 00:00:00 2001 From: Isaac Lee <68138671+luminousleek@users.noreply.github.com> Date: Sat, 17 Feb 2024 18:09:13 +0800 Subject: [PATCH 6/7] update tests --- .../expected/index.html | 1 - .../__snapshots__/Panels.spec.js.snap | 40 +++++++++++-------- 2 files changed, 24 insertions(+), 17 deletions(-) diff --git a/packages/cli/test/functional/test_site_algolia_plugin/expected/index.html b/packages/cli/test/functional/test_site_algolia_plugin/expected/index.html index 7e3b3ba88d..9e03164b11 100644 --- a/packages/cli/test/functional/test_site_algolia_plugin/expected/index.html +++ b/packages/cli/test/functional/test_site_algolia_plugin/expected/index.html @@ -17,7 +17,6 @@ - diff --git a/packages/vue-components/src/__tests__/__snapshots__/Panels.spec.js.snap b/packages/vue-components/src/__tests__/__snapshots__/Panels.spec.js.snap index 4b7a554fd9..4798266ef2 100644 --- a/packages/vue-components/src/__tests__/__snapshots__/Panels.spec.js.snap +++ b/packages/vue-components/src/__tests__/__snapshots__/Panels.spec.js.snap @@ -146,15 +146,19 @@ exports[`NestedPanels should not show header after expand with expandHeaderless - + +
- + +
Date: Sat, 17 Feb 2024 19:24:16 +0800 Subject: [PATCH 7/7] re-add algolia link --- .../test/functional/test_site_algolia_plugin/expected/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/cli/test/functional/test_site_algolia_plugin/expected/index.html b/packages/cli/test/functional/test_site_algolia_plugin/expected/index.html index 9e03164b11..7e3b3ba88d 100644 --- a/packages/cli/test/functional/test_site_algolia_plugin/expected/index.html +++ b/packages/cli/test/functional/test_site_algolia_plugin/expected/index.html @@ -17,6 +17,7 @@ +