Skip to content

Commit

Permalink
feat: add angular adjustments (#1996)
Browse files Browse the repository at this point in the history
  • Loading branch information
@yggg
yggg committed Oct 4, 2019
1 parent 3c34805 commit d8689c1
Show file tree
Hide file tree
Showing 5 changed files with 233 additions and 10 deletions.
48 changes: 44 additions & 4 deletions src/framework/theme/components/cdk/overlay/overlay-container.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,22 +30,62 @@ export abstract class NbPositionedContainer {

@HostBinding('class.nb-overlay-top')
get top(): boolean {
return this.position === NbPosition.TOP
return this.position === NbPosition.TOP;
}

@HostBinding('class.nb-overlay-top-start')
get topStart(): boolean {
return this.position === NbPosition.TOP_START;
}

@HostBinding('class.nb-overlay-top-end')
get topEnd(): boolean {
return this.position === NbPosition.TOP_END;
}

@HostBinding('class.nb-overlay-right')
get right(): boolean {
return this.position === NbPosition.RIGHT
return this.position === NbPosition.RIGHT || this.position === NbPosition.END;
}

@HostBinding('class.nb-overlay-end-top')
get endTop(): boolean {
return this.position === NbPosition.END_TOP;
}

@HostBinding('class.nb-overlay-end-bottom')
get endBottom(): boolean {
return this.position === NbPosition.END_BOTTOM;
}

@HostBinding('class.nb-overlay-bottom')
get bottom(): boolean {
return this.position === NbPosition.BOTTOM
return this.position === NbPosition.BOTTOM;
}

@HostBinding('class.nb-overlay-bottom-start')
get bottomStart(): boolean {
return this.position === NbPosition.BOTTOM_START;
}

@HostBinding('class.nb-overlay-bottom-end')
get bottomEnd(): boolean {
return this.position === NbPosition.BOTTOM_END;
}

@HostBinding('class.nb-overlay-left')
get left(): boolean {
return this.position === NbPosition.LEFT
return this.position === NbPosition.LEFT || this.position === NbPosition.START;
}

@HostBinding('class.nb-overlay-start-top')
get startTop(): boolean {
return this.position === NbPosition.START_TOP;
}

@HostBinding('class.nb-overlay-start-bottom')
get startBottom(): boolean {
return this.position === NbPosition.START_BOTTOM;
}
}

Expand Down
25 changes: 25 additions & 0 deletions src/framework/theme/components/cdk/overlay/overlay-position.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,4 +92,29 @@ describe('NbAdjustableConnectedPositionStrategy', () => {
offsetX: 15,
}]));
});

it('should apply center positions first', () => {
const withPositionsSpy = spyOn(strategy, 'withPositions').and.callThrough();

strategy.position(NbPosition.START).adjustment(NbAdjustment.CLOCKWISE);

const overlayService: NbOverlayService = TestBed.get(NbOverlayService);
const overlayRef = overlayService.create({ positionStrategy: strategy });
overlayRef.attach(new NbComponentPortal(PortalComponent));

expect(withPositionsSpy).toHaveBeenCalledWith(jasmine.objectContaining([
{ originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -15 },
{ originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'top', offsetX: -15 },
{ originX: 'start', originY: 'bottom', overlayX: 'end', overlayY: 'bottom', offsetX: -15 },
{ originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -15 },
{ originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -15 },
{ originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -15 },
{ originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: 15 },
{ originX: 'end', originY: 'bottom', overlayX: 'start', overlayY: 'bottom', offsetX: 15 },
{ originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'top', offsetX: 15 },
{ originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: 15 },
{ originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 15 },
{ originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 15 },
]));
});
});
70 changes: 64 additions & 6 deletions src/framework/theme/components/cdk/overlay/overlay-position.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,14 @@ export enum NbPosition {
RIGHT = 'right',
START = 'start',
END = 'end',
TOP_END = 'top-end',
TOP_START = 'top-start',
BOTTOM_END = 'bottom-end',
BOTTOM_START = 'bottom-start',
END_TOP = 'end-top',
END_BOTTOM = 'end-bottom',
START_TOP = 'start-top',
START_BOTTOM = 'start-bottom',
}

const POSITIONS = {
Expand All @@ -56,10 +64,60 @@ const POSITIONS = {
[NbPosition.END](offset) {
return this[NbPosition.RIGHT](offset);
},
[NbPosition.END_TOP](offset) {
return { originX: 'end', originY: 'bottom', overlayX: 'start', overlayY: 'bottom', offsetX: offset };
},
[NbPosition.END_BOTTOM](offset) {
return { originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'top', offsetX: offset };
},
[NbPosition.BOTTOM_START](offset) {
return { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: offset };
},
[NbPosition.BOTTOM_END](offset) {
return { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: offset };
},
[NbPosition.START_TOP](offset) {
return { originX: 'start', originY: 'bottom', overlayX: 'end', overlayY: 'bottom', offsetX: -offset };
},
[NbPosition.START_BOTTOM](offset) {
return { originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'top', offsetX: -offset };
},
[NbPosition.TOP_START](offset) {
return { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -offset };
},
[NbPosition.TOP_END](offset) {
return { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -offset };
},
};

const COUNTER_CLOCKWISE_POSITIONS = [NbPosition.TOP, NbPosition.LEFT, NbPosition.BOTTOM, NbPosition.RIGHT];
const CLOCKWISE_POSITIONS = [NbPosition.TOP, NbPosition.RIGHT, NbPosition.BOTTOM, NbPosition.LEFT];
const COUNTER_CLOCKWISE_POSITIONS = [
NbPosition.TOP,
NbPosition.TOP_END,
NbPosition.TOP_START,
NbPosition.START,
NbPosition.START_TOP,
NbPosition.START_BOTTOM,
NbPosition.BOTTOM,
NbPosition.BOTTOM_START,
NbPosition.BOTTOM_END,
NbPosition.END,
NbPosition.END_BOTTOM,
NbPosition.END_TOP,
];
const CLOCKWISE_POSITIONS = [
NbPosition.TOP,
NbPosition.TOP_START,
NbPosition.TOP_END,
NbPosition.END,
NbPosition.END_TOP,
NbPosition.END_BOTTOM,
NbPosition.BOTTOM,
NbPosition.BOTTOM_END,
NbPosition.BOTTOM_START,
NbPosition.START,
NbPosition.START_BOTTOM,
NbPosition.START_TOP,
];
const VERTICAL_POSITIONS = [NbPosition.BOTTOM, NbPosition.TOP];
const HORIZONTAL_POSITIONS = [NbPosition.START, NbPosition.END];

Expand Down Expand Up @@ -151,10 +209,10 @@ export class NbAdjustableConnectedPositionStrategy
}

protected reorderPreferredPositions(positions: NbPosition[]): NbPosition[] {
const cpy = positions.slice();
const startIndex = positions.indexOf(this._position);
const start = cpy.splice(startIndex);
return start.concat(...cpy);
const startPositionIndex = positions.indexOf(this._position);
const firstPart = positions.slice(startPositionIndex);
const secondPart = positions.slice(0, startPositionIndex);
return firstPart.concat(secondPart);
}
}

Expand Down
50 changes: 50 additions & 0 deletions src/framework/theme/components/datepicker/_datepicker-container.component.theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,22 +48,72 @@
left: calc(50% - #{$arrow-size});
}

&.nb-overlay-bottom-start .arrow {
top: calc(-1 * #{$arrow-size} + 1px);
@include nb-ltr(right, $arrow-size);
@include nb-rtl(left, $arrow-size);
}

&.nb-overlay-bottom-end .arrow {
top: calc(-1 * #{$arrow-size} + 1px);
@include nb-ltr(left, $arrow-size);
@include nb-rtl(right, $arrow-size);
}

&.nb-overlay-left .arrow {
right: calc(-1 * #{$arrow-size} - #{$arrow-size} / 2 + 2px);
top: calc(50% - #{$arrow-size / 2});
transform: rotate(90deg);
}

&.nb-overlay-start-top .arrow {
right: calc(-1 * #{$arrow-size} - #{$arrow-size} / 2 + 2px);
bottom: $arrow-size;
transform: rotate(90deg);
}

&.nb-overlay-start-bottom .arrow {
right: calc(-1 * #{$arrow-size} - #{$arrow-size} / 2 + 2px);
top: $arrow-size;
transform: rotate(90deg);
}

&.nb-overlay-top .arrow {
bottom: calc(-1 * #{$arrow-size} + 1px);
left: calc(50% - #{$arrow-size});
transform: rotate(180deg);
}

&.nb-overlay-top-start .arrow {
bottom: calc(-1 * #{$arrow-size} + 1px);
@include nb-ltr(right, $arrow-size);
@include nb-rtl(left, $arrow-size);
transform: rotate(180deg);
}

&.nb-overlay-top-end .arrow {
bottom: calc(-1 * #{$arrow-size} + 1px);
@include nb-ltr(left, $arrow-size);
@include nb-rtl(right, $arrow-size);
transform: rotate(180deg);
}

&.nb-overlay-right .arrow {
left: calc(-1 * #{$arrow-size} - #{$arrow-size} / 2 + 2px);
top: calc(50% - #{$arrow-size / 2});
transform: rotate(270deg);
}

&.nb-overlay-end-top .arrow {
left: calc(-1 * #{$arrow-size} - #{$arrow-size} / 2 + 2px);
bottom: $arrow-size;
transform: rotate(270deg);
}

&.nb-overlay-end-bottom .arrow {
left: calc(-1 * #{$arrow-size} - #{$arrow-size} / 2 + 2px);
top: $arrow-size;
transform: rotate(270deg);
}
}
}
50 changes: 50 additions & 0 deletions src/framework/theme/components/popover/_popover.component.theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,22 +46,72 @@
left: calc(50% - #{$arrow-size});
}

&.nb-overlay-bottom-start .arrow {
top: calc(-1 * #{$arrow-size} + 1px);
@include nb-ltr(right, $arrow-size);
@include nb-rtl(left, $arrow-size);
}

&.nb-overlay-bottom-end .arrow {
top: calc(-1 * #{$arrow-size} + 1px);
@include nb-ltr(left, $arrow-size);
@include nb-rtl(right, $arrow-size);
}

&.nb-overlay-left .arrow {
right: calc(-1 * #{$arrow-size} - #{$arrow-size} / 2 + 2px);
top: calc(50% - #{$arrow-size / 2});
transform: rotate(90deg);
}

&.nb-overlay-start-top .arrow {
right: calc(-1 * #{$arrow-size} - #{$arrow-size} / 2 + 2px);
bottom: $arrow-size;
transform: rotate(90deg);
}

&.nb-overlay-start-bottom .arrow {
right: calc(-1 * #{$arrow-size} - #{$arrow-size} / 2 + 2px);
top: $arrow-size;
transform: rotate(90deg);
}

&.nb-overlay-top .arrow {
bottom: calc(-1 * #{$arrow-size} + 1px);
left: calc(50% - #{$arrow-size});
transform: rotate(180deg);
}

&.nb-overlay-top-start .arrow {
bottom: calc(-1 * #{$arrow-size} + 1px);
@include nb-ltr(right, $arrow-size);
@include nb-rtl(left, $arrow-size);
transform: rotate(180deg);
}

&.nb-overlay-top-end .arrow {
bottom: calc(-1 * #{$arrow-size} + 1px);
@include nb-ltr(left, $arrow-size);
@include nb-rtl(right, $arrow-size);
transform: rotate(180deg);
}

&.nb-overlay-right .arrow {
left: calc(-1 * #{$arrow-size} - #{$arrow-size} / 2 + 2px);
top: calc(50% - #{$arrow-size / 2});
transform: rotate(270deg);
}

&.nb-overlay-end-top .arrow {
left: calc(-1 * #{$arrow-size} - #{$arrow-size} / 2 + 2px);
bottom: $arrow-size;
transform: rotate(270deg);
}

&.nb-overlay-end-bottom .arrow {
left: calc(-1 * #{$arrow-size} - #{$arrow-size} / 2 + 2px);
top: $arrow-size;
transform: rotate(270deg);
}
}
}

0 comments on commit d8689c1

Please sign in to comment.