forked from oppia/oppia
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix part of 9749: customize-interaction-modal.component migrated from…
… AngularJS to Angular (oppia#14798) * first commit * upstream * 84 front end test * lint left * only small tweaks left * done * coat * push origin * oder * a-z * sorrting * type * testing * correct onE * little changes Co-authored-by: Shivam Chaudhary <[email protected]>
- Loading branch information
1 parent
a28a791
commit 2ed83f6
Showing
12 changed files
with
1,323 additions
and
1,321 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
185 changes: 185 additions & 0 deletions
185
...itor-page/editor-tab/templates/modal-templates/customize-interaction-modal.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,185 @@ | ||
| <div class="oppia-interaction-header-container"> | ||
| <div class="modal-header oppia-modal-header" | ||
| [ngClass]="{'modal-header-blue': stateInteractionIdService.displayed && (customizationModalReopened || hasCustomizationArgs)}"> | ||
| <h3 *ngIf="!stateInteractionIdService.displayed"> | ||
| Choose Interaction | ||
| </h3> | ||
|
|
||
| <h3 *ngIf="stateInteractionIdService.displayed && (customizationModalReopened || hasCustomizationArgs)"> | ||
| Customize Interaction ({{ getTitle(stateInteractionIdService.displayed) }}) | ||
| </h3> | ||
| <i class="fa fa-times" (click)="cancel()"></i> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="customize-interaction-body-container modal-body"> | ||
| <div [hidden]="!isinteractionOpen"> | ||
| <nav ngbNav | ||
| #nav="ngbNav" | ||
| [(activeId)]="active" | ||
| class="nav-tabs"> | ||
| <ng-container ngbNavItem | ||
| *ngFor="let category of allowedInteractionCategories"> | ||
| <a ngbNavLink | ||
| class="protractor-test-interaction-tab-{{ getHyphenatedLowercaseCategoryName(category.name) }}"> | ||
| {{ category.name }} | ||
| </a> | ||
| <ng-template ngbNavContent> | ||
| <div> | ||
| <div *ngFor="let interactionId of category.interaction_ids" | ||
| (click)="onChangeInteractionId(interactionId)" | ||
| class="oppia-interaction-tile protractor-test-interaction-tile-{{ interactionId }}" | ||
| [ngbPopover]="getDescription(interactionId)" | ||
| placement="bottom" | ||
| triggers="mouseenter:mouseleave"> | ||
| <img [src]="getInteractionThumbnailImageUrl(interactionId)"> | ||
| <div class="oppia-interaction-tile-name fx-row fx-main-center fx-cross-center"> | ||
| {{ getTitle(interactionId) }} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </ng-template> | ||
| </ng-container> | ||
| </nav> | ||
| <div [ngbNavOutlet]="nav" class="mt-4"></div> | ||
| </div> | ||
|
|
||
| <div *ngIf="!isinteractionOpen && stateInteractionIdService.displayed && hasCustomizationArgs" | ||
| class="interaction-editor-form protractor-test-interaction-editor"> | ||
| <div class="protractor-test-multiple-options" | ||
| *ngFor="let customizationArgSpec of customizationArgSpecs"> | ||
| <div *ngIf="customizationArgSpec.schema.type !== 'bool'" | ||
| class="oppia-interaction-customization-label"> | ||
| {{ customizationArgSpec.description }} | ||
| </div> | ||
| <schema-based-editor [ngClass]="{'boolean-checkbox': customizationArgSpec.schema.type === 'bool'}" | ||
| [schema]="getSchemaCallback(customizationArgSpec.schema)" | ||
| [(localValue)]="stateCustomizationArgsService.displayed[customizationArgSpec.name].value"> | ||
| </schema-based-editor> | ||
| <div *ngIf="customizationArgSpec.schema.type === 'bool'" | ||
| class="oppia-interaction-customization-label"> | ||
| {{ customizationArgSpec.description }} | ||
| </div> | ||
| <div class="oppia-interaction-customization-label-container"></div> | ||
| </div> | ||
| <div *ngIf="getCustomizationArgsWarningMessage()" | ||
| class="alert alert-danger oppia-units-input-error"> | ||
| {{ getCustomizationArgsWarningMessage() }} | ||
| </div> | ||
| </div> | ||
|
|
||
| <div *ngIf="!isinteractionOpen && !hasCustomizationArgs && customizationModalReopened"> | ||
| This interaction cannot be modified. To delete it, close this popup and click the 'x' button in the top-right corner. | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="modal-footer"> | ||
| <button class="btn btn-secondary" | ||
| (click)="cancel()" | ||
| *ngIf="!hasCustomizationArgs"> | ||
| Cancel | ||
| </button> | ||
| <!-- Do not show this button if an interaction is already selected. --> | ||
| <button class="btn btn-secondary float-left" | ||
| (click)="returnToInteractionSelector()" | ||
| *ngIf="!isinteractionOpen && !stateInteractionIdService.savedMemento && hasCustomizationArgs"> | ||
| Change Interaction | ||
| </button> | ||
|
|
||
| <button class="btn btn-secondary" | ||
| (click)="cancelWithConfirm()" | ||
| *ngIf="hasCustomizationArgs"> | ||
| Cancel | ||
| </button> | ||
|
|
||
| <div class="btn-group" | ||
| *ngIf="hasCustomizationArgs" | ||
| [ngbPopover]="isSaveInteractionButtonEnabled() ? '' : getSaveInteractionButtonTooltip()" | ||
| placement="bottom" | ||
| triggers="mouseenter:mouseleave"> | ||
| <button class="btn btn-success protractor-test-save-interaction" | ||
| (click)="save()" | ||
| [disabled]="!isSaveInteractionButtonEnabled()"> | ||
| Save Interaction | ||
| </button> | ||
| </div> | ||
|
|
||
| <button class="btn btn-success protractor-test-close-no-customization-modal" | ||
| (click)="confirm('okay')" | ||
| *ngIf="!hasCustomizationArgs && customizationModalReopened"> | ||
| Okay | ||
| </button> | ||
| </div> | ||
|
|
||
| <style> | ||
| .interaction-editor-form .boolean-checkbox { | ||
| float: left; | ||
| margin-right: 4px; | ||
| } | ||
|
|
||
| .customize-interaction-body-container .oppia-interaction-tile img { | ||
| border: 1px solid #aaa; | ||
| border-bottom: none; | ||
| border-radius: 5px 5px 0 0; | ||
| } | ||
|
|
||
| .customize-interaction-body-container ul .active { | ||
| background-color: #e0f2f1; | ||
| border-bottom: 2px solid #00609c; | ||
| color: #00609c; | ||
| } | ||
|
|
||
| .customize-interaction-body-container ul :hover:not(.active) { | ||
| background-color: #e0f2f166; | ||
| border-bottom: 2px solid #e0f2f166; | ||
| border-color: #e0f2f166; | ||
| } | ||
| .customize-interaction-modal .modal-dialog { | ||
| margin: 30px auto; | ||
| max-width: none; | ||
| width: 45vw; | ||
| } | ||
|
|
||
| .customize-interaction-modal .modal-header i { | ||
| display: none; | ||
| } | ||
|
|
||
| .oppia-interaction-header-container .oppia-modal-header { | ||
| border-bottom: 0; | ||
| padding-bottom: 0; | ||
| } | ||
|
|
||
| .oppia-interaction-header-container .oppia-interaction-customization-label-container { | ||
| margin-bottom: 15px; | ||
| } | ||
|
|
||
| @media screen and (max-width: 768px) { | ||
| .customize-interaction-modal .modal-content { | ||
| border: 0; | ||
| border-radius: 0; | ||
| margin: 0; | ||
| min-height: 100vh; | ||
| } | ||
|
|
||
| .customize-interaction-modal .modal-dialog { | ||
| margin: 0; | ||
| max-width: none; | ||
| min-height: 100vh; | ||
| width: 100vw; | ||
| } | ||
|
|
||
| .customize-interaction-modal .modal-header-blue { | ||
| background-color: #00609c; | ||
| } | ||
|
|
||
| .customize-interaction-modal .modal-header-blue i { | ||
| color: #fff; | ||
| display: block; | ||
| font-size: 20px; | ||
| } | ||
|
|
||
| .customize-interaction-modal .modal-header-blue h3 { | ||
| color: #fff; | ||
| } | ||
| } | ||
| </style> |
Oops, something went wrong.