Skip to content
This repository has been archived by the owner on Dec 8, 2022. It is now read-only.

Commit

Permalink
Fullscreen Popover Closing (#1985)
Browse files Browse the repository at this point in the history 
Resolves #1504
  • Loading branch information
@Blackbaud-TrevorBurch
Blackbaud-TrevorBurch authored Sep 19, 2018
1 parent 952b694 commit 299bc05
Show file tree
Hide file tree
Showing 8 changed files with 159 additions and 94 deletions.
76 changes: 76 additions & 0 deletions skyux-spa-visual-tests/src/app/popover/popover-visual.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -314,3 +314,79 @@
</button>
</p>
</div>
<div id="screenshot-popover-fullscreen">
<button
id="btn-popover-fullscreen"
class="sky-btn"
[skyPopover]="popoverFullscreen"
skyPopoverPlacement="fullscreen">
Show fullscreen popover
</button>

<sky-popover
popoverTitle="This is a fullscreen popover"
#popoverFullscreen>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere placerat mollis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent accumsan lacus sed volutpat pharetra. Etiam convallis elit ac odio rhoncus molestie. Pellentesque consequat porttitor magna sit amet consectetur. Donec sed accumsan urna, in dapibus erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam auctor justo a mattis euismod. Etiam porttitor turpis quis tellus laoreet, quis eleifend diam mollis. In eget risus nulla. Nulla a elit eu lectus laoreet lobortis. Proin rhoncus libero dictum augue consequat lobortis. Vestibulum suscipit dapibus dolor sit amet facilisis. Pellentesque ullamcorper, libero id fringilla tempus, mi orci vestibulum eros, ac pulvinar nibh turpis ac nulla.
</p>
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam cursus arcu magna, at aliquet arcu pellentesque ac. Donec quis elit quis sapien tristique tincidunt. Mauris vel suscipit felis. Curabitur vestibulum vitae ipsum non tincidunt. Integer mollis congue ante. Nulla non vulputate nunc. Aenean eget est et libero venenatis faucibus. In hac habitasse platea dictumst. Suspendisse potenti. Donec interdum, tellus eu finibus auctor, felis turpis pulvinar nibh, quis gravida quam diam at risus. Integer porttitor ipsum eget vehicula vulputate.
</p>
<p>
Etiam eget scelerisque tellus. Suspendisse vehicula sapien et felis dapibus varius. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin tincidunt suscipit nulla. Fusce ullamcorper malesuada lacus vel venenatis. Morbi venenatis mi id diam lacinia facilisis. In nec ipsum nec tortor fringilla sodales at in sapien. Nam accumsan turpis augue, in finibus ligula congue a. Nunc lobortis sem eget libero eleifend consectetur. In euismod maximus aliquam. Maecenas placerat scelerisque cursus. Fusce elementum malesuada sem in elementum. Phasellus congue mi et leo gravida tincidunt.
</p>
<p>
Proin suscipit nulla tellus, ut lobortis ipsum porttitor eu. Sed pulvinar quam porttitor ligula ornare viverra. Nulla vitae metus lobortis, sagittis mauris ac, gravida diam. Fusce tincidunt massa a odio euismod maximus. Mauris eget dignissim justo. Proin quis nunc est. Duis non blandit ligula.
</p>
<sky-dropdown buttonType="context-menu">
<sky-dropdown-menu>
<sky-dropdown-item>
<button type="button">
Option 1
</button>
</sky-dropdown-item>
<sky-dropdown-item>
<button type="button">
Option 2
</button>
</sky-dropdown-item>
<sky-dropdown-item>
<button type="button">
Option 3
</button>
</sky-dropdown-item>
</sky-dropdown-menu>
</sky-dropdown>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere placerat mollis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent accumsan lacus sed volutpat pharetra. Etiam convallis elit ac odio rhoncus molestie. Pellentesque consequat porttitor magna sit amet consectetur. Donec sed accumsan urna, in dapibus erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam auctor justo a mattis euismod. Etiam porttitor turpis quis tellus laoreet, quis eleifend diam mollis. In eget risus nulla. Nulla a elit eu lectus laoreet lobortis. Proin rhoncus libero dictum augue consequat lobortis. Vestibulum suscipit dapibus dolor sit amet facilisis. Pellentesque ullamcorper, libero id fringilla tempus, mi orci vestibulum eros, ac pulvinar nibh turpis ac nulla.
</p>
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam cursus arcu magna, at aliquet arcu pellentesque ac. Donec quis elit quis sapien tristique tincidunt. Mauris vel suscipit felis. Curabitur vestibulum vitae ipsum non tincidunt. Integer mollis congue ante. Nulla non vulputate nunc. Aenean eget est et libero venenatis faucibus. In hac habitasse platea dictumst. Suspendisse potenti. Donec interdum, tellus eu finibus auctor, felis turpis pulvinar nibh, quis gravida quam diam at risus. Integer porttitor ipsum eget vehicula vulputate.
</p>
<p>
Etiam eget scelerisque tellus. Suspendisse vehicula sapien et felis dapibus varius. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin tincidunt suscipit nulla. Fusce ullamcorper malesuada lacus vel venenatis. Morbi venenatis mi id diam lacinia facilisis. In nec ipsum nec tortor fringilla sodales at in sapien. Nam accumsan turpis augue, in finibus ligula congue a. Nunc lobortis sem eget libero eleifend consectetur. In euismod maximus aliquam. Maecenas placerat scelerisque cursus. Fusce elementum malesuada sem in elementum. Phasellus congue mi et leo gravida tincidunt.
</p>
<p>
Proin suscipit nulla tellus, ut lobortis ipsum porttitor eu. Sed pulvinar quam porttitor ligula ornare viverra. Nulla vitae metus lobortis, sagittis mauris ac, gravida diam. Fusce tincidunt massa a odio euismod maximus. Mauris eget dignissim justo. Proin quis nunc est. Duis non blandit ligula.
</p>
<sky-dropdown buttonType="context-menu">
<sky-dropdown-menu>
<sky-dropdown-item>
<button type="button">
Option 1
</button>
</sky-dropdown-item>
<sky-dropdown-item>
<button type="button">
Option 2
</button>
</sky-dropdown-item>
<sky-dropdown-item>
<button type="button">
Option 3
</button>
</sky-dropdown-item>
</sky-dropdown-menu>
</sky-dropdown>
</sky-popover>
</div>
14 changes: 14 additions & 0 deletions skyux-spa-visual-tests/src/app/popover/popover.visual-spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,4 +134,18 @@ describe('Popover', () => {
});
});
});

it('should open a fullscreen popover', () => {
return SkyVisualTest
.setupTest('popover')
.then(() => {
SkyVisualTest.scrollElementIntoView('#screenshot-popover-fullscreen');
element(by.id('btn-popover-fullscreen')).click();
return SkyVisualTest
.compareScreenshot({
screenshotName: 'popover-fullscreen',
selector: '.sky-popover-container.sky-popover-placement-fullscreen'
});
});
});
});
78 changes: 0 additions & 78 deletions src/demos/popover/popover-demo.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -299,84 +299,6 @@ <h3>
</sky-dropdown>
</sky-popover>

<h3>
Popovers with large amounts of content are displayed fullscreen
</h3>

<button
class="sky-btn"
[skyPopover]="popoverFullscreen"
skyPopoverPlacement="fullscreen">
Show fullscreen popover
</button>

<sky-popover
popoverTitle="This is a fullscreen popover"
#popoverFullscreen>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere placerat mollis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent accumsan lacus sed volutpat pharetra. Etiam convallis elit ac odio rhoncus molestie. Pellentesque consequat porttitor magna sit amet consectetur. Donec sed accumsan urna, in dapibus erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam auctor justo a mattis euismod. Etiam porttitor turpis quis tellus laoreet, quis eleifend diam mollis. In eget risus nulla. Nulla a elit eu lectus laoreet lobortis. Proin rhoncus libero dictum augue consequat lobortis. Vestibulum suscipit dapibus dolor sit amet facilisis. Pellentesque ullamcorper, libero id fringilla tempus, mi orci vestibulum eros, ac pulvinar nibh turpis ac nulla.
</p>
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam cursus arcu magna, at aliquet arcu pellentesque ac. Donec quis elit quis sapien tristique tincidunt. Mauris vel suscipit felis. Curabitur vestibulum vitae ipsum non tincidunt. Integer mollis congue ante. Nulla non vulputate nunc. Aenean eget est et libero venenatis faucibus. In hac habitasse platea dictumst. Suspendisse potenti. Donec interdum, tellus eu finibus auctor, felis turpis pulvinar nibh, quis gravida quam diam at risus. Integer porttitor ipsum eget vehicula vulputate.
</p>
<p>
Etiam eget scelerisque tellus. Suspendisse vehicula sapien et felis dapibus varius. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin tincidunt suscipit nulla. Fusce ullamcorper malesuada lacus vel venenatis. Morbi venenatis mi id diam lacinia facilisis. In nec ipsum nec tortor fringilla sodales at in sapien. Nam accumsan turpis augue, in finibus ligula congue a. Nunc lobortis sem eget libero eleifend consectetur. In euismod maximus aliquam. Maecenas placerat scelerisque cursus. Fusce elementum malesuada sem in elementum. Phasellus congue mi et leo gravida tincidunt.
</p>
<p>
Proin suscipit nulla tellus, ut lobortis ipsum porttitor eu. Sed pulvinar quam porttitor ligula ornare viverra. Nulla vitae metus lobortis, sagittis mauris ac, gravida diam. Fusce tincidunt massa a odio euismod maximus. Mauris eget dignissim justo. Proin quis nunc est. Duis non blandit ligula.
</p>
<sky-dropdown buttonType="context-menu">
<sky-dropdown-menu>
<sky-dropdown-item>
<button type="button">
Option 1
</button>
</sky-dropdown-item>
<sky-dropdown-item>
<button type="button">
Option 2
</button>
</sky-dropdown-item>
<sky-dropdown-item>
<button type="button">
Option 3
</button>
</sky-dropdown-item>
</sky-dropdown-menu>
</sky-dropdown>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere placerat mollis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent accumsan lacus sed volutpat pharetra. Etiam convallis elit ac odio rhoncus molestie. Pellentesque consequat porttitor magna sit amet consectetur. Donec sed accumsan urna, in dapibus erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam auctor justo a mattis euismod. Etiam porttitor turpis quis tellus laoreet, quis eleifend diam mollis. In eget risus nulla. Nulla a elit eu lectus laoreet lobortis. Proin rhoncus libero dictum augue consequat lobortis. Vestibulum suscipit dapibus dolor sit amet facilisis. Pellentesque ullamcorper, libero id fringilla tempus, mi orci vestibulum eros, ac pulvinar nibh turpis ac nulla.
</p>
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam cursus arcu magna, at aliquet arcu pellentesque ac. Donec quis elit quis sapien tristique tincidunt. Mauris vel suscipit felis. Curabitur vestibulum vitae ipsum non tincidunt. Integer mollis congue ante. Nulla non vulputate nunc. Aenean eget est et libero venenatis faucibus. In hac habitasse platea dictumst. Suspendisse potenti. Donec interdum, tellus eu finibus auctor, felis turpis pulvinar nibh, quis gravida quam diam at risus. Integer porttitor ipsum eget vehicula vulputate.
</p>
<p>
Etiam eget scelerisque tellus. Suspendisse vehicula sapien et felis dapibus varius. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin tincidunt suscipit nulla. Fusce ullamcorper malesuada lacus vel venenatis. Morbi venenatis mi id diam lacinia facilisis. In nec ipsum nec tortor fringilla sodales at in sapien. Nam accumsan turpis augue, in finibus ligula congue a. Nunc lobortis sem eget libero eleifend consectetur. In euismod maximus aliquam. Maecenas placerat scelerisque cursus. Fusce elementum malesuada sem in elementum. Phasellus congue mi et leo gravida tincidunt.
</p>
<p>
Proin suscipit nulla tellus, ut lobortis ipsum porttitor eu. Sed pulvinar quam porttitor ligula ornare viverra. Nulla vitae metus lobortis, sagittis mauris ac, gravida diam. Fusce tincidunt massa a odio euismod maximus. Mauris eget dignissim justo. Proin quis nunc est. Duis non blandit ligula.
</p>
<sky-dropdown buttonType="context-menu">
<sky-dropdown-menu>
<sky-dropdown-item>
<button type="button">
Option 1
</button>
</sky-dropdown-item>
<sky-dropdown-item>
<button type="button">
Option 2
</button>
</sky-dropdown-item>
<sky-dropdown-item>
<button type="button">
Option 3
</button>
</sky-dropdown-item>
</sky-dropdown-menu>
</sky-dropdown>
</sky-popover>

<h3>
Popovers may also be asynchronous
</h3>
Expand Down
4 changes: 4 additions & 0 deletions src/locales/resources_en_US.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -767,6 +767,10 @@
"_description": "Text for the label for the previous button on the pagination component",
"message": "Previous"
},
"popover_close": {
"_description": "Text for popover close button",
"message": "Close popover"
},
"reorder_top": {
"_description": "Text displayed to indicate that a row can be pushed to the top of the list",
"message": "Top"
Expand Down
12 changes: 10 additions & 2 deletions src/modules/popover/popover.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,18 @@
[style.visibility]="(isVisible) ? 'visible': 'hidden'"
#popoverContainer>
<div class="sky-popover sky-shadow sky-rounded-corners">
<header class="sky-popover-header sky-padding-even-default" *ngIf="popoverTitle">
<h1 class="sky-popover-title sky-emphasized">
<header class="sky-popover-header sky-padding-even-default" *ngIf="popoverTitle || placement === 'fullscreen'">
<h1 class="sky-popover-title sky-emphasized" *ngIf="popoverTitle">
{{ popoverTitle }}
</h1>
<button *ngIf="placement === 'fullscreen'"
type="button"
class="sky-btn sky-popover-fullscreen-close"
[attr.aria-label]="'popover_close' | skyResources"
(click)="close()"
>
<sky-icon icon="close"></sky-icon>
</button>
</header>
<div class="sky-popover-body sky-padding-even-default">
<ng-content></ng-content>
Expand Down
24 changes: 22 additions & 2 deletions src/modules/popover/popover.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,13 +71,33 @@ $popover-max-width: 276px;
flex-direction: column;

.sky-popover-header {
padding: $sky-padding;
border-bottom: 1px solid $sky-border-color-neutral-light;
/* Need less padding because of the close button padding */
padding-left: $sky-padding-plus-half;
padding-top: 9px;
padding-bottom: 9px;
padding-right: 3px;

display: flex;
flex-shrink: 0;
justify-content: flex-end;
align-items: baseline;
@include sky-border(light, bottom);
}

.sky-popover-body {
position: relative;
}

.sky-popover-title {
flex-grow: 1;
}

.sky-popover-fullscreen-close {
border: none;
@include sky-icon-button-borderless;
font-size: 20px;
flex-grow: 0;
}
}
}

Expand Down
19 changes: 12 additions & 7 deletions src/modules/popover/popover.directive.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,13 +27,19 @@ import {
} from '../window';

import {
SkyPopoverComponent,
SkyPopoverDirective,
SkyPopoverAdapterService
} from './index';

import { SkyPopoverTestComponent } from './fixtures/popover.component.fixture';
import { SkyPopoverMessageType } from './types/popover-message-type';
import {
SkyPopoverTestComponent
} from './fixtures/popover.component.fixture';
import {
SkyPopoverModule
} from './popover.module';
import {
SkyPopoverMessageType
} from './types/popover-message-type';

class MockWindowService {
public getWindow(): any {
Expand Down Expand Up @@ -95,12 +101,11 @@ describe('SkyPopoverDirective', () => {

TestBed.configureTestingModule({
imports: [
NoopAnimationsModule
NoopAnimationsModule,
SkyPopoverModule
],
declarations: [
SkyPopoverComponent,
SkyPopoverTestComponent,
SkyPopoverDirective
SkyPopoverTestComponent
],
providers: [
{ provide: SkyPopoverAdapterService, useValue: mockAdapterService },
Expand Down
26 changes: 21 additions & 5 deletions src/modules/popover/popover.module.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
NgModule
} from '@angular/core';
import {
CommonModule
} from '@angular/common';

import {
BrowserAnimationsModule
Expand All @@ -9,8 +13,18 @@ import {
SkyWindowRefService
} from '../window';

import { SkyPopoverComponent } from './popover.component';
import { SkyPopoverDirective } from './popover.directive';
import {
SkyPopoverComponent
} from './popover.component';
import {
SkyPopoverDirective
} from './popover.directive';
import {
SkyResourcesModule
} from '../resources';
import {
SkyIconModule
} from '../icon';

@NgModule({
declarations: [
Expand All @@ -19,7 +33,9 @@ import { SkyPopoverDirective } from './popover.directive';
],
imports: [
BrowserAnimationsModule,
CommonModule
CommonModule,
SkyResourcesModule,
SkyIconModule
],
exports: [
SkyPopoverComponent,
Expand Down

0 comments on commit 299bc05

Please sign in to comment.