Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add generic confirmation modal #389

Merged
merged 24 commits into from
Feb 5, 2019
Merged

Add generic confirmation modal #389

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
fe3eb92
First working implementation of confirmation modal
jesusreal Jan 28, 2019
240fcd9
Merge remote-tracking branch 'upstream/master' into generic-alerts-an…
jesusreal Jan 30, 2019
ac5e8b4
add e2e test and replace 'accept' with 'confirm' for modal button
jesusreal Jan 30, 2019
0998519
Fix couple of e2e tests and remove some e2e test code not needed
jesusreal Jan 30, 2019
7f5476e
refactor around promises for confirmation modal
jesusreal Jan 30, 2019
e9eca1c
text changes
jesusreal Jan 30, 2019
0c37cf7
Fix pathExists functionality broken in last refactoring commit
jesusreal Jan 30, 2019
748583b
Uncomment e2e tests
jesusreal Jan 30, 2019
9887bbd
Proper data on confirmationModal state object
jesusreal Jan 30, 2019
eabb55d
improve code for confirmation modal result being displayed
jesusreal Jan 31, 2019
88da0df
Improve API and docu for confirmation modal content
jesusreal Jan 31, 2019
40c9f82
Update luigi client readme file
jesusreal Jan 31, 2019
1ea9034
Update client/src/luigi-client.js
bszwarc Jan 31, 2019
761c132
Update client/src/luigi-client.js
bszwarc Jan 31, 2019
ecd0752
Update client/src/luigi-client.js
bszwarc Jan 31, 2019
080368c
Update client/src/luigi-client.js
bszwarc Jan 31, 2019
93a4931
Update luigi client readme file after feedback from technical writer
jesusreal Jan 31, 2019
ed3fc89
Very small improvement in docu
jesusreal Feb 1, 2019
5276171
Proper mechanism to use default values for modal
jesusreal Feb 4, 2019
ae183e8
small docu improvement
jesusreal Feb 4, 2019
d7deb89
Fix issue with ngIf preventing project detail view from working properly
jesusreal Feb 4, 2019
9f6f5cb
Center confirmation modal vertically by removing unnecessary styles
jesusreal Feb 4, 2019
cd6e607
Break long words in confirmation modal header and body
jesusreal Feb 4, 2019
89e4701
Confirmation modal now is viewport centered, not iframe centered
jesusreal Feb 4, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion client/src/luigi-client.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -427,7 +427,7 @@ const LuigiClient = {
* @param {string} content.body the content of the modal body
* @param {string} content.buttonConfirm the label for the modal confirm button
* @param {string} content.buttonDismiss the label for the modal dismiss button
* @returns {promise} A promise which is resolved when accepting the confirmation modal and rejected when dismissing it.
* @returns {promise} which is resolved when accepting the confirmation modal and rejected when dismissing it.
*/
showConfirmationModal: function showConfirmationModal(content) {
window.parent.postMessage(
Expand Down
65 changes: 30 additions & 35 deletions core/examples/luigi-sample-angular/src/app/project/project.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,36 +3,33 @@
<h1 class="fd-section__title">Project {{ projectId }}</h1>
</div>

<ng-container *ngIf="projectId === 'pr1'">
<div class="fd-panel fd-has-margin-bottom-small">
<p><strong>LuigiClient uxManager methods:</strong></p>
<ul class="fd-list-group">
<li class="fd-list-group__item">
<button class="fd-button" data-cy="add-backdrop" (click)="toggleModal()">
Add backdrop
</button>
<p>
<app-code-snippet data="luigiClient.uxManager().addBackdrop()"></app-code-snippet>
<app-code-snippet data="luigiClient.uxManager().removeBackdrop()"></app-code-snippet>
</p>
</li>
<li class="fd-list-group__item">
<button class="fd-button" data-cy="show-luigi-confirmation-modal" (click)="showConfirmationModal()">Show Luigi confirmation modal</button>
<p>
<app-code-snippet data="luigiClient.uxManager().showConfirmationModal(content)"></app-code-snippet>
</p>
<p class="fd-has-font-style-italic" data-cy="luigi-confirmation-modal-result"
ngClass="{{(confirmationModalResult === 'confirmed') ? 'fd-has-color-status-1' : 'fd-has-color-status-2'}}"
*ngIf="confirmationModalResult">
Confirmation modal has been {{ confirmationModalResult}}
</p>
</li>
</ul>
</div>
</ng-container>

<div [hidden]="projectId !== 'pr1'" class="fd-panel fd-has-margin-bottom-small">
<p><strong>LuigiClient uxManager methods:</strong></p>
<ul class="fd-list-group">
<li class="fd-list-group__item">
<button class="fd-button" data-cy="add-backdrop" (click)="toggleModal()">
Add backdrop
</button>
<p>
<app-code-snippet data="luigiClient.uxManager().addBackdrop()"></app-code-snippet>
<app-code-snippet data="luigiClient.uxManager().removeBackdrop()"></app-code-snippet>
</p>
</li>
<li class="fd-list-group__item">
<button class="fd-button" data-cy="show-luigi-confirmation-modal" (click)="showConfirmationModal()">Show Luigi confirmation modal</button>
<p>
<app-code-snippet data="luigiClient.uxManager().showConfirmationModal(content)"></app-code-snippet>
</p>
<p class="fd-has-font-style-italic" data-cy="luigi-confirmation-modal-result"
ngClass="{{(confirmationModalResult === 'confirmed') ? 'fd-has-color-status-1' : 'fd-has-color-status-2'}}"
*ngIf="confirmationModalResult">
Confirmation modal has been {{ confirmationModalResult}}
</p>
</li>
</ul>
</div>

<ng-container *ngIf="projectId === 'pr2'">
<div [hidden]="projectId !== 'pr2'">
<ng-container *ngIf="preservedViewCallbackContext">
<div class="fd-panel fd-has-margin-bottom-small">
<div class="fd-alert" role="alert">
Expand All @@ -42,7 +39,7 @@ <h1 class="fd-section__title">Project {{ projectId }}</h1>
</div>
</ng-container>

<ng-container *ngIf="projectId && projectId !== 'overview'">
<ng-container>
<div class="fd-panel link-manager fd-has-margin-bottom-small">
<p><strong>LuigiClient linkManager methods:</strong></p>
<ul class="fd-list-group">
Expand Down Expand Up @@ -103,9 +100,7 @@ <h1 class="fd-section__title">Project {{ projectId }}</h1>
</li>
</ul>
</div>
</ng-container>

<ng-container *ngIf="projectId && projectId !== 'overview'">
<div class="fd-panel fd-has-margin-bottom-small">
<p><strong>LuigiClient - wrong paths in linkManager.navigate():</strong></p>
<ul class="fd-list-group">
Expand All @@ -122,8 +117,8 @@ <h1 class="fd-section__title">Project {{ projectId }}</h1>
</li>
</ul>
</div>
</ng-container >
</ng-container>
</ng-container>
</div>
</section>

<app-modal [modalActive]="modalActive" (modalClosed)="toggleModal()"></app-modal>
<app-modal [hidden]="projectId !== 'pr1'" [modalActive]="modalActive" (modalClosed)="toggleModal()"></app-modal>
5 changes: 0 additions & 5 deletions core/src/ConfirmationModal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,12 +45,7 @@ <h1 class="fd-modal__title">{content.header}</h1>
$width: 32rem;
.fd-modal {
position: absolute;
box-sizing: border-box;
width: $width;
max-width: 90vw;
top: calc(#{$topNavHeight} + 1rem);
left: calc(50% + #{$leftNavWidth}/ 2 - #{$width}/ 2);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be removed as well if we want to have it in the middle of the screen.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I will fix the 1st one. For the 2nd one, I will clarify it with Franz

z-index: 2;
}

:global(.no-side-nav),
Expand Down
2 changes: 1 addition & 1 deletion docs/luigi-client-api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -225,4 +225,4 @@ Shows a confirmation modal.
- `content.buttonConfirm` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** the label for the modal confirm button
- `content.buttonDismiss` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** the label for the modal dismiss button

Returns **[promise](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)** A promise which is resolved when accepting the confirmation modal and rejected when dismissing it.
Returns **[promise](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)** which is resolved when accepting the confirmation modal and rejected when dismissing it.