Skip to content

Commit

Permalink
feat(popover): add adaptivePosition option (valor-software#5183)
Browse files Browse the repository at this point in the history
* feat(popover): add adaptivePosition option to disable adaptive positioning
  • Loading branch information
Domainv authored and leo6104 committed Oct 10, 2019
1 parent bdde12d commit c5dac82
Show file tree
Hide file tree
Showing 17 changed files with 379 additions and 304 deletions.
2 changes: 1 addition & 1 deletion .travis.yml
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ env:
- BROWSER_PROVIDER_READY_FILE=/tmp/sauce-connect-ready
- LOGS_DIR=/tmp/logs
- CYPRESS_RECORD_KEY=4aa7a1c0-3a4f-444e-b324-6fc305a543a8
- NPM_AUTH_TOKEN_CI_PR=810c9089-b5e8-4348-8c89-61a1c2461d68
- NPM_AUTH_TOKEN_CI_PR=d05d9a8c-02db-413b-a412-aa27ab527213

# test cypress smoke
testSmokeCy: &testSmokeCy
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<button type="button" class="btn btn-default btn-secondary"
popover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
popoverTitle="Popover on top"
[adaptivePosition]="false"
placement="top">
Popover on top
</button>

<button type="button" class="btn btn-default btn-secondary"
popover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
popoverTitle="Popover on right"
[adaptivePosition]="false"
placement="right">
Popover on right
</button>
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { Component } from '@angular/core';

@Component({
selector: 'demo-popover-adaptive-position',
templateUrl: './adaptive-position.html'
})
export class DemoPopoverAdaptivePositionComponent {}
40 changes: 21 additions & 19 deletions demo/src/app/components/+popover/demos/index.ts
Original file line number Diff line number Diff line change
@@ -1,37 +1,39 @@
import { DemoPopoverAdaptivePositionComponent } from './adaptive-position/adaptive-position';
import { DemoPopoverBasicComponent } from './basic/basic';
import { DemoPopoverPlacementComponent } from './placement/placement';
import { DemoPopoverByIsOpenPropComponent } from './trigger-by-isopen-property/trigger-by-isopen-property';
import { DemoPopoverClassComponent } from './class/class';
import { DemoPopoverConfigComponent } from './config/config';
import { DemoPopoverContainerComponent } from './container/container';
import { DemoPopoverContextComponent } from './popover-context/popover-context';
import { DemoPopoverCustomContentComponent } from './custom-content/custom-content';
import { DemoPopoverDismissComponent } from './dismiss/dismiss';
import { DemoPopoverDynamicComponent } from './dynamic/dynamic';
import { DemoPopoverCustomContentComponent } from './custom-content/custom-content';
import { DemoPopoverDynamicHtmlComponent } from './dynamic-html/dynamic-html';
import { DemoPopoverContainerComponent } from './container/container';
import { DemoPopoverConfigComponent } from './config/config';
import { DemoPopoverEventsComponent } from './events/events';
import { DemoPopoverOutsideClickComponent } from './outside-click/outside-click';
import { DemoPopoverPlacementComponent } from './placement/placement';
import { DemoPopoverStylingGlobalComponent } from './styling-global/styling-global';
import { DemoPopoverStylingLocalComponent } from './styling-local/styling-local';
import { DemoPopoverTriggersCustomComponent } from './triggers-custom/triggers-custom';
import { DemoPopoverTriggersManualComponent } from './triggers-manual/triggers-manual';
import { DemoPopoverByIsOpenPropComponent } from './trigger-by-isopen-property/trigger-by-isopen-property';
import { DemoPopoverClassComponent } from './class/class';
import { DemoPopoverOutsideClickComponent } from './outside-click/outside-click';
import { DemoPopoverEventsComponent } from './events/events';
import { DemoPopoverContextComponent } from './popover-context/popover-context';

export const DEMO_COMPONENTS = [
DemoPopoverAdaptivePositionComponent,
DemoPopoverBasicComponent,
DemoPopoverPlacementComponent,
DemoPopoverByIsOpenPropComponent,
DemoPopoverClassComponent,
DemoPopoverConfigComponent,
DemoPopoverContainerComponent,
DemoPopoverContextComponent,
DemoPopoverCustomContentComponent,
DemoPopoverDismissComponent,
DemoPopoverDynamicComponent,
DemoPopoverCustomContentComponent,
DemoPopoverDynamicHtmlComponent,
DemoPopoverContainerComponent,
DemoPopoverConfigComponent,
DemoPopoverEventsComponent,
DemoPopoverOutsideClickComponent,
DemoPopoverPlacementComponent,
DemoPopoverStylingGlobalComponent,
DemoPopoverStylingLocalComponent,
DemoPopoverTriggersCustomComponent,
DemoPopoverTriggersManualComponent,
DemoPopoverByIsOpenPropComponent,
DemoPopoverClassComponent,
DemoPopoverOutsideClickComponent,
DemoPopoverEventsComponent,
DemoPopoverContextComponent
DemoPopoverTriggersManualComponent
];
39 changes: 21 additions & 18 deletions demo/src/app/components/+popover/popover-section.list.ts
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
import { DemoPopoverAdaptivePositionComponent } from './demos/adaptive-position/adaptive-position';
import { DemoPopoverBasicComponent } from './demos/basic/basic';
import { DemoPopoverPlacementComponent } from './demos/placement/placement';
import { DemoPopoverByIsOpenPropComponent } from './demos/trigger-by-isopen-property/trigger-by-isopen-property';
import { DemoPopoverClassComponent } from './demos/class/class';
import { DemoPopoverConfigComponent } from './demos/config/config';
import { DemoPopoverContainerComponent } from './demos/container/container';
import { DemoPopoverContextComponent } from './demos/popover-context/popover-context';
import { DemoPopoverCustomContentComponent } from './demos/custom-content/custom-content';
import { DemoPopoverDismissComponent } from './demos/dismiss/dismiss';
import { DemoPopoverDynamicComponent } from './demos/dynamic/dynamic';
import { DemoPopoverCustomContentComponent } from './demos/custom-content/custom-content';
import { DemoPopoverDynamicHtmlComponent } from './demos/dynamic-html/dynamic-html';
import { DemoPopoverContainerComponent } from './demos/container/container';
import { DemoPopoverConfigComponent } from './demos/config/config';
import { DemoPopoverEventsComponent } from './demos/events/events';
import { DemoPopoverOutsideClickComponent } from './demos/outside-click/outside-click';
import { DemoPopoverPlacementComponent } from './demos/placement/placement';
import { DemoPopoverStylingLocalComponent } from './demos/styling-local/styling-local';
import { DemoPopoverTriggersCustomComponent } from './demos/triggers-custom/triggers-custom';
import { DemoPopoverTriggersManualComponent } from './demos/triggers-manual/triggers-manual';
import { DemoPopoverByIsOpenPropComponent } from './demos/trigger-by-isopen-property/trigger-by-isopen-property';
import { DemoPopoverStylingLocalComponent } from './demos/styling-local/styling-local';
import { DemoPopoverClassComponent } from './demos/class/class';
import { DemoPopoverContextComponent } from './demos/popover-context/popover-context';
import { DemoPopoverStylingGlobalComponent } from './demos/styling-global/styling-global';
import { DemoPopoverEventsComponent } from './demos/events/events';

import { ContentSection } from '../../docs/models/content-section.model';
import { DemoTopSectionComponent } from '../../docs/demo-section-components/demo-top-section/index';
Expand Down Expand Up @@ -57,6 +57,16 @@ export const demoComponentContent: ContentSection[] = [
Besides that, <code>auto</code> option may be used to detect a position that fits the component on screen.</p>`,
outlet: DemoPopoverPlacementComponent
},
{
title: 'Disable adaptive position',
anchor: 'adaptive-position',
description: `
<p>You can disable adaptive position via <code>adaptivePosition</code> input or config option</p>
`,
component: require('!!raw-loader?lang=typescript!./demos/adaptive-position/adaptive-position.ts'),
html: require('!!raw-loader?lang=markup!./demos/adaptive-position/adaptive-position.html'),
outlet: DemoPopoverAdaptivePositionComponent
},
{
title: 'Dismiss on next click',
anchor: 'popover-dismiss',
Expand Down Expand Up @@ -167,14 +177,7 @@ export const demoComponentContent: ContentSection[] = [
component: require('!!raw-loader?lang=typescript!./demos/popover-context/popover-context.ts'),
html: require('!!raw-loader?lang=markup!./demos/popover-context/popover-context.html'),
outlet: DemoPopoverContextComponent
}/*,
{
title: 'Global styling',
anchor: 'styling-global',
component: require('!!raw-loader?lang=typescript!./demos/styling-global/styling-global.ts'),
html: require('!!raw-loader?lang=markup!./demos/styling-global/styling-global.html'),
outlet: DemoPopoverStylingGlobalComponent
}*/
}
]
},
{
Expand Down
28 changes: 14 additions & 14 deletions demo/src/app/components/+tooltip/demos/index.ts
Original file line number Diff line number Diff line change
@@ -1,31 +1,31 @@
import { DemoTooltipBasicComponent } from './basic/basic';
import { DemoTooltipPlacementComponent } from './placement/placement';
import { DemoTooltipDismissComponent } from './dismiss/dismiss';
import { DemoTooltipDynamicComponent } from './dynamic/dynamic';
import { DemoTooltipClassComponent } from './class/class';
import { DemoTooltipConfigComponent } from './config/config';
import { DemoTooltipContainerComponent } from './container/container';
import { DemoTooltipCustomContentComponent } from './custom-content/custom-content';
import { DemoTooltipDelayComponent } from './delay/delay';
import { DemoTooltipDismissComponent } from './dismiss/dismiss';
import { DemoTooltipDynamicComponent } from './dynamic/dynamic';
import { DemoTooltipDynamicHtmlComponent } from './dynamic-html/dynamic-html';
import { DemoTooltipPlacementComponent } from './placement/placement';
import { DemoTooltipStylingGlobalComponent } from './styling-global/styling-global';
import { DemoTooltipStylingLocalComponent } from './styling-local/styling-local';
import { DemoTooltipTriggersCustomComponent } from './triggers-custom/triggers-custom';
import { DemoTooltipTriggersManualComponent } from './triggers-manual/triggers-manual';
import { DemoTooltipDynamicHtmlComponent } from './dynamic-html/dynamic-html';
import { DemoTooltipClassComponent } from './class/class';
import { DemoTooltipDelayComponent } from './delay/delay';
import { DemoTooltipCustomContentComponent } from './custom-content/custom-content';

export const DEMO_COMPONENTS = [
DemoTooltipBasicComponent,
DemoTooltipPlacementComponent,
DemoTooltipDismissComponent,
DemoTooltipClassComponent,
DemoTooltipConfigComponent,
DemoTooltipContainerComponent,
DemoTooltipCustomContentComponent,
DemoTooltipDelayComponent,
DemoTooltipDismissComponent,
DemoTooltipDynamicComponent,
DemoTooltipDynamicHtmlComponent,
DemoTooltipContainerComponent,
DemoTooltipConfigComponent,
DemoTooltipPlacementComponent,
DemoTooltipStylingGlobalComponent,
DemoTooltipStylingLocalComponent,
DemoTooltipTriggersCustomComponent,
DemoTooltipTriggersManualComponent,
DemoTooltipClassComponent,
DemoTooltipDelayComponent
DemoTooltipTriggersManualComponent
];
15 changes: 7 additions & 8 deletions demo/src/app/components/+tooltip/tooltip-section.list.ts
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
import { DemoTooltipBasicComponent } from './demos/basic/basic';
import { DemoTooltipPlacementComponent } from './demos/placement/placement';
import { DemoTooltipClassComponent } from './demos/class/class';
import { DemoTooltipConfigComponent } from './demos/config/config';
import { DemoTooltipContainerComponent } from './demos/container/container';
import { DemoTooltipCustomContentComponent } from './demos/custom-content/custom-content';
import { DemoTooltipDelayComponent } from './demos/delay/delay';
import { DemoTooltipDismissComponent } from './demos/dismiss/dismiss';
import { DemoTooltipDynamicComponent } from './demos/dynamic/dynamic';
import { DemoTooltipDynamicHtmlComponent } from './demos/dynamic-html/dynamic-html';
import { DemoTooltipContainerComponent } from './demos/container/container';
import { DemoTooltipConfigComponent } from './demos/config/config';
import { DemoTooltipPlacementComponent } from './demos/placement/placement';
import { DemoTooltipStylingLocalComponent } from './demos/styling-local/styling-local';
import { DemoTooltipTriggersCustomComponent } from './demos/triggers-custom/triggers-custom';
import { DemoTooltipTriggersManualComponent } from './demos/triggers-manual/triggers-manual';
import { DemoTooltipStylingLocalComponent } from './demos/styling-local/styling-local';
import { DemoTooltipClassComponent } from './demos/class/class';
import { DemoTooltipStylingGlobalComponent } from './demos/styling-global/styling-global';

import { ContentSection } from '../../docs/models/content-section.model';
import { DemoTopSectionComponent } from '../../docs/demo-section-components/demo-top-section/index';
Expand All @@ -20,8 +21,6 @@ import {
NgApiDocComponent,
NgApiDocConfigComponent
} from '../../docs/api-docs';
import { DemoTooltipDelayComponent } from './demos/delay/delay';
import { DemoTooltipCustomContentComponent } from './demos/custom-content/custom-content';

export const demoComponentContent: ContentSection[] = [
{
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<pre class="card card-block card-header mb-3">Model: {{selected | json}}</pre>
<input [(ngModel)]="selected"
[typeahead]="states"
adaptivePosition="true"
[adaptivePosition]="true"
class="form-control">
Loading

0 comments on commit c5dac82

Please sign in to comment.