From 5066451e69b6c7bb2bd61b6887e98a9d83b49af5 Mon Sep 17 00:00:00 2001 From: Albin Berglund Date: Fri, 14 Apr 2023 15:47:53 +0200 Subject: [PATCH] fix: remove under positioning --- .../editor/editor-form.component.html | 8 +-- libs/angular/package.json | 2 +- libs/core/package.json | 2 +- .../layout/layout-config-private.ts | 8 +-- .../src/lib/components/layout/layout-model.ts | 4 +- .../components/layout/layout-util-private.ts | 4 +- libs/core/src/lib/components/layout/layout.ts | 32 +++------ libs/core/src/lib/styles/_core.scss | 8 +-- libs/react/package.json | 2 +- libs/testing/src/lib/run-layout-tests.ts | 65 ------------------- nx.json | 3 +- 11 files changed, 25 insertions(+), 113 deletions(-) diff --git a/apps/demo/src/lib/components/editor/editor-form.component.html b/apps/demo/src/lib/components/editor/editor-form.component.html index 1e64a24..cad27ea 100644 --- a/apps/demo/src/lib/components/editor/editor-form.component.html +++ b/apps/demo/src/lib/components/editor/editor-form.component.html @@ -71,7 +71,7 @@ Top left position {{ position }} @@ -82,7 +82,7 @@ Top right position {{ position }} @@ -93,7 +93,7 @@ Bottom left position {{ position }} @@ -104,7 +104,7 @@ Bottom right position {{ position }} diff --git a/libs/angular/package.json b/libs/angular/package.json index 8b957fa..97aecee 100644 --- a/libs/angular/package.json +++ b/libs/angular/package.json @@ -1,6 +1,6 @@ { "name": "@berg-layout/angular", - "version": "5.2.0", + "version": "5.1.3", "devDependencies": { "@berg-layout/testing": "*" }, diff --git a/libs/core/package.json b/libs/core/package.json index 6633874..cb40ec4 100644 --- a/libs/core/package.json +++ b/libs/core/package.json @@ -1,4 +1,4 @@ { "name": "@berg-layout/core", - "version": "5.2.0" + "version": "5.1.3" } diff --git a/libs/core/src/lib/components/layout/layout-config-private.ts b/libs/core/src/lib/components/layout/layout-config-private.ts index ffda8d7..6c2cc68 100644 --- a/libs/core/src/lib/components/layout/layout-config-private.ts +++ b/libs/core/src/lib/components/layout/layout-config-private.ts @@ -1,17 +1,11 @@ export const BERG_LAYOUT_CLASS = 'berg-layout'; export const BERG_LAYOUT_TOP_ABOVE_LEFT_CLASS = 'berg-layout-top-above-left'; export const BERG_LAYOUT_TOP_ABOVE_RIGHT_CLASS = 'berg-layout-top-above-right'; -export const BERG_LAYOUT_TOP_UNDER_LEFT_CLASS = 'berg-layout-top-under-left'; -export const BERG_LAYOUT_TOP_UNDER_RIGHT_CLASS = 'berg-layout-top-under-right'; +export const BERG_LAYOUT_NO_TRANSITION_CLASS = 'berg-layout-no-transition'; export const BERG_LAYOUT_BOTTOM_BELOW_LEFT_CLASS = 'berg-layout-bottom-below-left'; export const BERG_LAYOUT_BOTTOM_BELOW_RIGHT_CLASS = 'berg-layout-bottom-below-right'; -export const BERG_LAYOUT_BOTTOM_UNDER_LEFT_CLASS = - 'berg-layout-bottom-under-left'; -export const BERG_LAYOUT_BOTTOM_UNDER_RIGHT_CLASS = - 'berg-layout-bottom-under-right'; - export const BERG_LAYOUT_NO_TRANSITION_CLASS = 'berg-layout-no-transition'; export const BERG_LAYOUT_RESIZING_VERTICAL_CLASS = 'berg-layout-resizing-vertical'; export const BERG_LAYOUT_RESIZING_HORIZONTAL_CLASS = diff --git a/libs/core/src/lib/components/layout/layout-model.ts b/libs/core/src/lib/components/layout/layout-model.ts index b45738c..190d4ab 100644 --- a/libs/core/src/lib/components/layout/layout-model.ts +++ b/libs/core/src/lib/components/layout/layout-model.ts @@ -37,7 +37,7 @@ export interface BergLayoutInputs { export type BergLayoutInput = keyof BergLayoutInputs; /** Positions of the top panel. */ -export type BergLayoutTopPosition = 'above' | 'beside' | 'under'; +export type BergLayoutTopPosition = 'above' | 'beside'; /** Positions of the bottom panel. */ -export type BergLayoutBottomPosition = 'below' | 'beside' | 'under'; +export type BergLayoutBottomPosition = 'below' | 'beside'; diff --git a/libs/core/src/lib/components/layout/layout-util-private.ts b/libs/core/src/lib/components/layout/layout-util-private.ts index 9c448bc..1ee808c 100644 --- a/libs/core/src/lib/components/layout/layout-util-private.ts +++ b/libs/core/src/lib/components/layout/layout-util-private.ts @@ -6,7 +6,7 @@ import { export function validateBergLayoutTopPosition( position: string ): BergLayoutTopPosition { - if (position !== 'above' && position !== 'beside' && position !== 'under') { + if (position !== 'above' && position !== 'beside') { throw new Error(`Invalid layout top position: ${position}`); } @@ -16,7 +16,7 @@ export function validateBergLayoutTopPosition( export function validateBergLayoutBottomPosition( position: string ): BergLayoutBottomPosition { - if (position !== 'below' && position !== 'beside' && position !== 'under') { + if (position !== 'below' && position !== 'beside') { throw new Error(`Invalid layout bottom position: ${position}`); } diff --git a/libs/core/src/lib/components/layout/layout.ts b/libs/core/src/lib/components/layout/layout.ts index 303e35b..02b9c20 100644 --- a/libs/core/src/lib/components/layout/layout.ts +++ b/libs/core/src/lib/components/layout/layout.ts @@ -11,13 +11,9 @@ import { import { BERG_LAYOUT_BOTTOM_BELOW_LEFT_CLASS, BERG_LAYOUT_BOTTOM_BELOW_RIGHT_CLASS, - BERG_LAYOUT_BOTTOM_UNDER_LEFT_CLASS, - BERG_LAYOUT_BOTTOM_UNDER_RIGHT_CLASS, BERG_LAYOUT_CLASS, BERG_LAYOUT_TOP_ABOVE_LEFT_CLASS, BERG_LAYOUT_TOP_ABOVE_RIGHT_CLASS, - BERG_LAYOUT_TOP_UNDER_LEFT_CLASS, - BERG_LAYOUT_TOP_UNDER_RIGHT_CLASS, } from './layout-config-private'; import { BergLayoutInputs } from './layout-model'; import { @@ -52,43 +48,31 @@ export class BergLayoutElement extends WebComponent { }, { topLeftPosition: () => { - this.classList.remove(BERG_LAYOUT_TOP_ABOVE_LEFT_CLASS); - this.classList.remove(BERG_LAYOUT_TOP_UNDER_LEFT_CLASS); - if (this.values.topLeftPosition === 'above') { this.classList.add(BERG_LAYOUT_TOP_ABOVE_LEFT_CLASS); - } else if(this.values.topLeftPosition === 'under') { - this.classList.add(BERG_LAYOUT_TOP_UNDER_LEFT_CLASS); + } else { + this.classList.remove(BERG_LAYOUT_TOP_ABOVE_LEFT_CLASS); } }, topRightPosition: () => { - this.classList.remove(BERG_LAYOUT_TOP_ABOVE_RIGHT_CLASS); - this.classList.remove(BERG_LAYOUT_TOP_UNDER_RIGHT_CLASS); - if (this.values.topRightPosition === 'above') { this.classList.add(BERG_LAYOUT_TOP_ABOVE_RIGHT_CLASS); - } else if(this.values.topRightPosition === 'under') { - this.classList.add(BERG_LAYOUT_TOP_UNDER_RIGHT_CLASS); + } else { + this.classList.remove(BERG_LAYOUT_TOP_ABOVE_RIGHT_CLASS); } }, bottomLeftPosition: () => { - this.classList.remove(BERG_LAYOUT_BOTTOM_BELOW_LEFT_CLASS); - this.classList.remove(BERG_LAYOUT_BOTTOM_UNDER_LEFT_CLASS); - if (this.values.bottomLeftPosition === 'below') { this.classList.add(BERG_LAYOUT_BOTTOM_BELOW_LEFT_CLASS); - } else if(this.values.bottomLeftPosition === 'under') { - this.classList.add(BERG_LAYOUT_BOTTOM_UNDER_LEFT_CLASS); + } else { + this.classList.remove(BERG_LAYOUT_BOTTOM_BELOW_LEFT_CLASS); } }, bottomRightPosition: () => { - this.classList.remove(BERG_LAYOUT_BOTTOM_BELOW_RIGHT_CLASS); - this.classList.remove(BERG_LAYOUT_BOTTOM_UNDER_RIGHT_CLASS); - if (this.values.bottomRightPosition === 'below') { this.classList.add(BERG_LAYOUT_BOTTOM_BELOW_RIGHT_CLASS); - } else if(this.values.bottomRightPosition === 'under') { - this.classList.add(BERG_LAYOUT_BOTTOM_UNDER_RIGHT_CLASS); + } else { + this.classList.remove(BERG_LAYOUT_BOTTOM_BELOW_RIGHT_CLASS); } }, topInset: () => { diff --git a/libs/core/src/lib/styles/_core.scss b/libs/core/src/lib/styles/_core.scss index 1362497..063ef73 100644 --- a/libs/core/src/lib/styles/_core.scss +++ b/libs/core/src/lib/styles/_core.scss @@ -53,11 +53,11 @@ $transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); top: calc(var(--berg-layout-top-inset) - var(--berg-panel-top-size)); } - .berg-layout-top-above-left &, .berg-layout-top-under-left & { + .berg-layout-top-above-left & { left: var(--berg-layout-left-inset); } - .berg-layout-top-above-right &, .berg-layout-top-under-right & { + .berg-layout-top-above-right & { right: var(--berg-layout-right-inset); } @@ -123,11 +123,11 @@ $transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); ); } - .berg-layout-bottom-below-left &, .berg-layout-bottom-under-left & { + .berg-layout-bottom-below-left & { left: var(--berg-layout-left-inset); } - .berg-layout-bottom-below-right &, .berg-layout-bottom-under-right & { + .berg-layout-bottom-below-right & { right: var(--berg-layout-right-inset); } diff --git a/libs/react/package.json b/libs/react/package.json index 1ad2c2b..ce87efa 100644 --- a/libs/react/package.json +++ b/libs/react/package.json @@ -1,6 +1,6 @@ { "name": "@berg-layout/react", - "version": "5.2.0", + "version": "5.1.3", "devDependencies": { "@berg-layout/testing": "*" } diff --git a/libs/testing/src/lib/run-layout-tests.ts b/libs/testing/src/lib/run-layout-tests.ts index bcd9ce6..407874b 100644 --- a/libs/testing/src/lib/run-layout-tests.ts +++ b/libs/testing/src/lib/run-layout-tests.ts @@ -32,22 +32,6 @@ export const runLayoutTests = ( ); }); - it('should render top panel under left', async () => { - await render({ - layout: { - topLeftPosition: 'under', - }, - }); - - expect(harness.assertedTop.getBoundingClientRect().left).toBe( - harness.assertedLeft.getBoundingClientRect().left - ); - - expect(harness.assertedTop.getBoundingClientRect().top).toBe( - harness.assertedLeft.getBoundingClientRect().top - ); - }); - it('should render top panel above right', async () => { await render({ layout: { @@ -72,22 +56,6 @@ export const runLayoutTests = ( ); }); - it('should render top panel under right', async () => { - await render({ - layout: { - topRightPosition: 'under', - }, - }); - - expect(harness.assertedTop.getBoundingClientRect().right).toBe( - harness.assertedRight.getBoundingClientRect().right - ); - - expect(harness.assertedTop.getBoundingClientRect().top).toBe( - harness.assertedRight.getBoundingClientRect().top - ); - }); - it('should render bottom panel below left', async () => { await render({ layout: { @@ -112,23 +80,6 @@ export const runLayoutTests = ( ); }); - it('should render bottom panel under left', async () => { - await render({ - layout: { - bottomLeftPosition: 'under', - }, - }); - - expect(harness.assertedBottom.getBoundingClientRect().left).toBe( - harness.assertedLeft.getBoundingClientRect().left - ); - - expect(harness.assertedBottom.getBoundingClientRect().bottom).toBe( - harness.assertedLeft.getBoundingClientRect().bottom - ); - }); - - it('should render bottom panel below right', async () => { await render({ layout: { @@ -152,22 +103,6 @@ export const runLayoutTests = ( harness.assertedRight.getBoundingClientRect().left ); }); - - it('should render bottom panel under right', async () => { - await render({ - layout: { - bottomRightPosition: 'under', - }, - }); - - expect(harness.assertedBottom.getBoundingClientRect().right).toBe( - harness.assertedRight.getBoundingClientRect().right - ); - - expect(harness.assertedBottom.getBoundingClientRect().bottom).toBe( - harness.assertedRight.getBoundingClientRect().bottom - ); - }); }); describe('insets', () => { diff --git a/nx.json b/nx.json index 708bd56..cc74b23 100644 --- a/nx.json +++ b/nx.json @@ -66,6 +66,5 @@ "style": "scss" } } - }, - "defaultProject": "demo" + } }