Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Simplify fix for abrupt panel transition #2421

Merged
merged 8 commits into from
Feb 17, 2024
Merged

Simplify fix for abrupt panel transition #2421

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
087b08b
create div wrapper and add margin
luminousleek Feb 14, 2024
0df3ea7
remove getMaxHeight method
luminousleek Feb 14, 2024
bfaea5f
remove tests for getMaxHeight
luminousleek Feb 14, 2024
7f9e22e
fix bug of not being able to reopen panel
luminousleek Feb 14, 2024
d1dfdf0
rename div class
luminousleek Feb 15, 2024
7c32729
Merge branch 'master' into simplify-transition-fix
luminousleek Feb 16, 2024
f8af040
update tests
luminousleek Feb 17, 2024
4c51140
re-add algolia link
luminousleek Feb 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 0 additions & 20 deletions packages/vue-components/src/__tests__/Panels.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
135 changes: 24 additions & 111 deletions packages/vue-components/src/__tests__/__snapshots__/Panels.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,15 +146,19 @@ exports[`NestedPanels should not show header after expand with expandHeaderless

<!---->

<button
class="collapse-button btn btn-outline-secondary"
type="button"
<div
class="bottom-button-wrapper"
>
<span
aria-hidden="true"
class="collapse-icon glyphicon glyphicon-menu-down opened"
/>
</button>
<button
class="collapse-button btn btn-outline-secondary"
type="button"
>
<span
aria-hidden="true"
class="collapse-icon glyphicon glyphicon-menu-down opened"
/>
</button>
</div>
</div>

<hr
Expand Down Expand Up @@ -239,15 +243,19 @@ exports[`NestedPanels should show header after expand with expandHeaderless as f

<!---->

<button
class="collapse-button btn btn-outline-secondary"
type="button"
<div
class="bottom-button-wrapper"
>
<span
aria-hidden="true"
class="collapse-icon glyphicon glyphicon-menu-down opened"
/>
</button>
<button
class="collapse-button btn btn-outline-secondary"
type="button"
>
<span
aria-hidden="true"
class="collapse-icon glyphicon glyphicon-menu-down opened"
/>
</button>
</div>
</div>

<hr
Expand Down Expand Up @@ -419,98 +427,3 @@ exports[`NestedPanels should show header when collapsed with expandHeaderless as
</div>
</div>
`;

exports[`NestedPanels transition height is correctly calculated 1`] = `
<div
class="card-container"
>
<div
class="card expandable-card"
>
<div
class="card-header header-toggle bg-light"
>
<div
class="caret-wrapper"
>
<!---->
</div>

<div
class="header-wrapper card-title bg-light"
>
test header
</div>

<div
class="button-wrapper"
>
<button
class="collapse-button btn btn-outline-secondary"
type="button"
>
<span
aria-hidden="true"
class="collapse-icon glyphicon glyphicon-menu-down opened"
/>
</button>

<button
class="close-button btn btn-outline-secondary"
type="button"
>
<span
aria-hidden="true"
class="glyphicon glyphicon-remove"
/>
</button>

<button
class="popup-button btn btn-outline-secondary"
style="display: none;"
type="button"
>
<span
aria-hidden="true"
class="glyphicon glyphicon-new-window"
/>
</button>
</div>
</div>

<div
class="card-collapse"
style="max-height: 23px;"
>
<div
class="card-body"
>
Some panel content
some other text
<!---->

<button
class="collapse-button btn btn-outline-secondary"
style="margin-bottom: 13px;"
type="button"
>
<span
aria-hidden="true"
class="collapse-icon glyphicon glyphicon-menu-down opened"
/>
</button>
</div>

<hr
style="display: none;"
/>
</div>

<transition-stub
name="peek-read-more-fade"
>
<!---->
</transition-stub>
</div>
</div>
`;
20 changes: 13 additions & 7 deletions packages/vue-components/src/panels/NestedPanel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,11 +92,13 @@
:fragment="fragment"
@src-loaded="retrieverUpdateMaxHeight"
/>
<panel-switch
v-show="isExpandableCard && bottomSwitchBool"
:is-open="localExpanded"
@click.native.stop.prevent="toggle(true)"
/>
<div class="bottom-button-wrapper">
<panel-switch
v-show="isExpandableCard && bottomSwitchBool"
:is-open="localExpanded"
@click.native.stop.prevent="toggle(true)"
/>
</div>
</div>
<hr v-show="isSeamless" />
</div>
Expand Down Expand Up @@ -283,13 +285,17 @@ export default {
margin-top: 0 !important;
}

.card-body > .collapse-button {
.bottom-button-wrapper {
padding-bottom: 13px;
margin-bottom: 13px;
}

.bottom-button-wrapper > .collapse-button {
margin-top: 5px;
opacity: 0.2;
}

.card-body > .collapse-button:hover {
.bottom-button-wrapper > .collapse-button:hover {
opacity: 1;
}

Expand Down
27 changes: 3 additions & 24 deletions packages/vue-components/src/panels/PanelBase.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -190,7 +190,7 @@ 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`;
});
});
},
Expand All @@ -212,28 +212,7 @@ export default {
}

// For expansion transition to 'continue' after src is loaded.
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;
this.$refs.panel.style.maxHeight = `${this.$refs.panel.scrollHeight}px`;
},
initPanel() {
this.$refs.panel.addEventListener('transitionend', (event) => {
Expand Down
Loading