From 1adfdb030f45cb6532a92086fc831fed571ed0f4 Mon Sep 17 00:00:00 2001 From: Dobromir Hristov Date: Thu, 16 Jun 2022 13:59:31 +0300 Subject: [PATCH 1/3] feat: allow hard-coding the width and disabling resizing of the AdjustableSidebarWidth.Fix sidebar not flush left when closed --- src/components/AdjustableSidebarWidth.vue | 17 ++++++++++++- .../components/AdjustableSidebarWidth.spec.js | 24 +++++++++++++++++++ tests/unit/views/DocumentationTopic.spec.js | 2 ++ 3 files changed, 42 insertions(+), 1 deletion(-) diff --git a/src/components/AdjustableSidebarWidth.vue b/src/components/AdjustableSidebarWidth.vue index 99e568938..7c54f3dce 100644 --- a/src/components/AdjustableSidebarWidth.vue +++ b/src/components/AdjustableSidebarWidth.vue @@ -37,6 +37,7 @@ />
this.maxWidth) { this.width = this.maxWidth; @@ -417,6 +431,7 @@ export default { position: fixed; top: var(--top-offset-mobile); bottom: 0; + left: 0; z-index: $nav-z-index + 1; transform: translateX(-100%); transition: transform 0.15s ease-in; diff --git a/tests/unit/components/AdjustableSidebarWidth.spec.js b/tests/unit/components/AdjustableSidebarWidth.spec.js index ebab43490..c1f9284b2 100644 --- a/tests/unit/components/AdjustableSidebarWidth.spec.js +++ b/tests/unit/components/AdjustableSidebarWidth.spec.js @@ -348,6 +348,15 @@ describe('AdjustableSidebarWidth', () => { expect(wrapper.vm.asideStyles).toHaveProperty('--app-height', '700px'); }); + it('disabled the resizing capabilities', () => { + const wrapper = createWrapper({ + propsData: { + disableResizing: true, + }, + }); + expect(wrapper.find('.resize-handle').exists()).toBe(false); + }); + it('allows dragging the handle to expand/contract the sidebar, with the mouse', () => { const wrapper = createWrapper(); const aside = wrapper.find('.aside'); @@ -554,6 +563,21 @@ describe('AdjustableSidebarWidth', () => { expect(aside.classes()).toContain('hide-on-large'); }); + it('allows hard-coding a width', async () => { + const wrapper = createWrapper({ + propsData: { + hardWidth: 200, + }, + }); + expect(wrapper.vm.asideStyles).toHaveProperty('width', '200px'); + // simulate window changes width form orientation change. + // This should trigger both breakpoint emitter and window resize, but not in Jest + window.innerWidth = 500; + window.dispatchEvent(createEvent('resize')); + await flushPromises(); + assertWidth(wrapper, 200); // hardcoded width + }); + describe('stores the content width in the store', () => { function setContentWidth(wrapper, value) { Object.defineProperty(wrapper.find({ ref: 'content' }).element, 'offsetWidth', { diff --git a/tests/unit/views/DocumentationTopic.spec.js b/tests/unit/views/DocumentationTopic.spec.js index 7fb20d756..70abb6b04 100644 --- a/tests/unit/views/DocumentationTopic.spec.js +++ b/tests/unit/views/DocumentationTopic.spec.js @@ -178,6 +178,8 @@ describe('DocumentationTopic', () => { expect(adjustableWidth.props()).toEqual({ shownOnMobile: false, hiddenOnLarge: false, + disableResizing: false, + hardWidth: null, }); const technology = topicData.references['topic://foo']; expect(wrapper.find(NavigatorDataProvider).props()).toEqual({ From 84d6c00671d7ac93edffa4af7a9b7359eb9fafa7 Mon Sep 17 00:00:00 2001 From: Dobromir Hristov Date: Wed, 21 Sep 2022 18:59:46 +0300 Subject: [PATCH 2/3] refactor: use hardWidth for the min and max width computers --- src/components/AdjustableSidebarWidth.vue | 13 +++++-------- .../unit/components/AdjustableSidebarWidth.spec.js | 14 +++++++++++++- 2 files changed, 18 insertions(+), 9 deletions(-) diff --git a/src/components/AdjustableSidebarWidth.vue b/src/components/AdjustableSidebarWidth.vue index fc9637cfa..bf3089885 100644 --- a/src/components/AdjustableSidebarWidth.vue +++ b/src/components/AdjustableSidebarWidth.vue @@ -155,10 +155,12 @@ export default { computed: { minWidthPercent: ({ breakpoint }) => minWidthResponsivePercents[breakpoint] || 0, maxWidthPercent: ({ breakpoint }) => maxWidthResponsivePercents[breakpoint] || 100, - maxWidth: ({ maxWidthPercent, windowWidth }) => ( - calcWidthPercent(maxWidthPercent, windowWidth) + maxWidth: ({ maxWidthPercent, windowWidth, hardWidth }) => ( + Math.max(hardWidth, calcWidthPercent(maxWidthPercent, windowWidth)) + ), + minWidth: ({ minWidthPercent, windowWidth, hardWidth }) => ( + Math.min(hardWidth || windowWidth, calcWidthPercent(minWidthPercent, windowWidth)) ), - minWidth: ({ minWidthPercent, windowWidth }) => calcWidthPercent(minWidthPercent, windowWidth), widthInPx: ({ width }) => `${width}px`, events: ({ isTouch }) => (isTouch ? eventsMap.touch : eventsMap.mouse), asideStyles: ({ @@ -240,11 +242,6 @@ export default { }, methods: { getWidthInCheck: debounce(function getWidthInCheck() { - // if there is a hard-set width, we want to use that always - if (this.hardWidth) { - this.width = this.hardWidth; - return; - } // make sure sidebar is never wider than the windowWidth if (this.width > this.maxWidth) { this.width = this.maxWidth; diff --git a/tests/unit/components/AdjustableSidebarWidth.spec.js b/tests/unit/components/AdjustableSidebarWidth.spec.js index c1f9284b2..0b9558eb3 100644 --- a/tests/unit/components/AdjustableSidebarWidth.spec.js +++ b/tests/unit/components/AdjustableSidebarWidth.spec.js @@ -572,10 +572,22 @@ describe('AdjustableSidebarWidth', () => { expect(wrapper.vm.asideStyles).toHaveProperty('width', '200px'); // simulate window changes width form orientation change. // This should trigger both breakpoint emitter and window resize, but not in Jest - window.innerWidth = 500; + window.innerWidth = 1500; window.dispatchEvent(createEvent('resize')); await flushPromises(); assertWidth(wrapper, 200); // hardcoded width + // drag the resize handle + wrapper.find('.resize-handle').trigger('mousedown', { type: 'mouseevent' }); + document.dispatchEvent(createEvent(eventsMap.mouse.move, { + clientX: 800, + })); + assertWidth(wrapper, 750); // 50% of 1500, on large + // make it small now + wrapper.find('.resize-handle').trigger('mousedown', { type: 'mouseevent' }); + document.dispatchEvent(createEvent(eventsMap.mouse.move, { + clientX: 100, + })); + assertWidth(wrapper, 200); // hardcoded width }); describe('stores the content width in the store', () => { From 348a252b5d990dfc50379fee2828308c004fd10a Mon Sep 17 00:00:00 2001 From: Dobromir Hristov Date: Fri, 23 Sep 2022 10:45:43 +0300 Subject: [PATCH 3/3] refactor: rename hardWidth to fixedWidth --- src/components/AdjustableSidebarWidth.vue | 18 ++++++-------- .../components/AdjustableSidebarWidth.spec.js | 24 ++----------------- tests/unit/views/DocumentationTopic.spec.js | 3 +-- 3 files changed, 10 insertions(+), 35 deletions(-) diff --git a/src/components/AdjustableSidebarWidth.vue b/src/components/AdjustableSidebarWidth.vue index bf3089885..bb053f092 100644 --- a/src/components/AdjustableSidebarWidth.vue +++ b/src/components/AdjustableSidebarWidth.vue @@ -37,7 +37,7 @@ />
minWidthResponsivePercents[breakpoint] || 0, maxWidthPercent: ({ breakpoint }) => maxWidthResponsivePercents[breakpoint] || 100, - maxWidth: ({ maxWidthPercent, windowWidth, hardWidth }) => ( - Math.max(hardWidth, calcWidthPercent(maxWidthPercent, windowWidth)) + maxWidth: ({ maxWidthPercent, windowWidth, fixedWidth }) => ( + Math.max(fixedWidth, calcWidthPercent(maxWidthPercent, windowWidth)) ), - minWidth: ({ minWidthPercent, windowWidth, hardWidth }) => ( - Math.min(hardWidth || windowWidth, calcWidthPercent(minWidthPercent, windowWidth)) + minWidth: ({ minWidthPercent, windowWidth, fixedWidth }) => ( + Math.min(fixedWidth || windowWidth, calcWidthPercent(minWidthPercent, windowWidth)) ), widthInPx: ({ width }) => `${width}px`, events: ({ isTouch }) => (isTouch ? eventsMap.touch : eventsMap.mouse), diff --git a/tests/unit/components/AdjustableSidebarWidth.spec.js b/tests/unit/components/AdjustableSidebarWidth.spec.js index 0b9558eb3..c3e21ef3c 100644 --- a/tests/unit/components/AdjustableSidebarWidth.spec.js +++ b/tests/unit/components/AdjustableSidebarWidth.spec.js @@ -348,15 +348,6 @@ describe('AdjustableSidebarWidth', () => { expect(wrapper.vm.asideStyles).toHaveProperty('--app-height', '700px'); }); - it('disabled the resizing capabilities', () => { - const wrapper = createWrapper({ - propsData: { - disableResizing: true, - }, - }); - expect(wrapper.find('.resize-handle').exists()).toBe(false); - }); - it('allows dragging the handle to expand/contract the sidebar, with the mouse', () => { const wrapper = createWrapper(); const aside = wrapper.find('.aside'); @@ -566,7 +557,7 @@ describe('AdjustableSidebarWidth', () => { it('allows hard-coding a width', async () => { const wrapper = createWrapper({ propsData: { - hardWidth: 200, + fixedWidth: 200, }, }); expect(wrapper.vm.asideStyles).toHaveProperty('width', '200px'); @@ -576,18 +567,7 @@ describe('AdjustableSidebarWidth', () => { window.dispatchEvent(createEvent('resize')); await flushPromises(); assertWidth(wrapper, 200); // hardcoded width - // drag the resize handle - wrapper.find('.resize-handle').trigger('mousedown', { type: 'mouseevent' }); - document.dispatchEvent(createEvent(eventsMap.mouse.move, { - clientX: 800, - })); - assertWidth(wrapper, 750); // 50% of 1500, on large - // make it small now - wrapper.find('.resize-handle').trigger('mousedown', { type: 'mouseevent' }); - document.dispatchEvent(createEvent(eventsMap.mouse.move, { - clientX: 100, - })); - assertWidth(wrapper, 200); // hardcoded width + expect(wrapper.find('.resize-handle').exists()).toBe(false); }); describe('stores the content width in the store', () => { diff --git a/tests/unit/views/DocumentationTopic.spec.js b/tests/unit/views/DocumentationTopic.spec.js index f7a2c0bb3..11bbb786d 100644 --- a/tests/unit/views/DocumentationTopic.spec.js +++ b/tests/unit/views/DocumentationTopic.spec.js @@ -182,8 +182,7 @@ describe('DocumentationTopic', () => { expect(adjustableWidth.props()).toEqual({ shownOnMobile: false, hiddenOnLarge: false, - disableResizing: false, - hardWidth: null, + fixedWidth: null, }); const technology = topicData.references['topic://foo']; expect(wrapper.find(NavigatorDataProvider).props()).toEqual({