-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(DialogGuidance): Allow authors specify text for ideas (#2076)
Co-authored-by: Jonathan Lim-Breitbart <[email protected]>
- Loading branch information
1 parent
8d77009
commit e99910b
Showing
11 changed files
with
278 additions
and
8 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
76 changes: 76 additions & 0 deletions
76
.../common/cRater/edit-crater-idea-descriptions/edit-crater-idea-descriptions.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,76 @@ | ||
| <div class="idea-descriptions notice-bg-bg"> | ||
| <h5 class="flex flex-row items-center gap-1 !text-xl"> | ||
| <span i18n>Idea Names</span> | ||
| <button | ||
| mat-icon-button | ||
| color="primary" | ||
| matTooltip="Add a new idea name" | ||
| i18n-matTooltip | ||
| matTooltipPosition="after" | ||
| (click)="addNewIdeaDescription(true)" | ||
| > | ||
| <mat-icon>add_circle</mat-icon> | ||
| </button> | ||
| <span class="flex-1"></span> | ||
| </h5> | ||
| <ul> | ||
| @for ( | ||
| idea of ideaDescriptions; | ||
| track $index; | ||
| let ideaIndex = $index, first = $first, last = $last | ||
| ) { | ||
| <li class="idea"> | ||
| <mat-card appearance="outlined" class="idea-content"> | ||
| <div class="flex flex-row flex-wrap gap-2"> | ||
| <div class="text-secondary flex flex-col items-center"> | ||
| <span class="mat-subtitle-1">{{ ideaIndex + 1 }}</span> | ||
| </div> | ||
| <div class="flex flex-col items-start gap-2 flex-1"> | ||
| <mat-form-field class="idea-input form-field-no-hint" appearance="fill"> | ||
| <mat-label i18n>Idea ID</mat-label> | ||
| <input | ||
| matInput | ||
| [(ngModel)]="idea.name" | ||
| (ngModelChange)="inputChanged.next($event)" | ||
| /> | ||
| </mat-form-field> | ||
| <mat-form-field class="idea-input form-field-no-hint" appearance="fill"> | ||
| <mat-label i18n>User-Friendly Name</mat-label> | ||
| <textarea | ||
| matInput | ||
| [(ngModel)]="idea.text" | ||
| (ngModelChange)="inputChanged.next($event)" | ||
| cdkTextareaAutosize | ||
| > | ||
| </textarea> | ||
| </mat-form-field> | ||
| </div> | ||
| <div class="flex flex-col items-center"> | ||
| <button | ||
| mat-icon-button | ||
| i18n-matTooltip | ||
| matTooltip="Delete idea description" | ||
| matTooltipPosition="before" | ||
| (click)="deleteIdeaDescription(ideaIndex)" | ||
| > | ||
| <mat-icon>clear</mat-icon> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </mat-card> | ||
| </li> | ||
| } | ||
| </ul> | ||
| <div id="add-new-idea-description-bottom-button" [hidden]="getNumIdeaDescriptions() === 0"> | ||
| <button | ||
| mat-icon-button | ||
| color="primary" | ||
| matTooltip="Add a new idea description" | ||
| i18n-matTooltip | ||
| matTooltipPosition="above" | ||
| (click)="addNewIdeaDescription(false)" | ||
| > | ||
| <mat-icon>add_circle</mat-icon> | ||
| </button> | ||
| </div> | ||
| </div> |
37 changes: 37 additions & 0 deletions
37
.../common/cRater/edit-crater-idea-descriptions/edit-crater-idea-descriptions.component.scss
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,37 @@ | ||
| @import 'style/abstracts/variables'; | ||
|
|
||
| .idea-descriptions { | ||
| padding: 16px; | ||
| border-radius: $card-border-radius; | ||
| } | ||
|
|
||
| h5 { | ||
| margin-top: 0; | ||
| } | ||
|
|
||
| ul { | ||
| margin: 16px 0 0 0; | ||
| padding: 0 0 16px; | ||
| } | ||
|
|
||
| li { | ||
| list-style-type: none; | ||
| } | ||
|
|
||
| .idea { | ||
| position: relative; | ||
| } | ||
|
|
||
| .idea-content { | ||
| width: 100%; | ||
| padding: 8px; | ||
| margin-bottom: 8px; | ||
| } | ||
|
|
||
| .idea-input { | ||
| width: 100%; | ||
| } | ||
|
|
||
| .mat-subtitle-1 { | ||
| margin: 0; | ||
| } |
92 changes: 92 additions & 0 deletions
92
...ts/common/cRater/edit-crater-idea-descriptions/edit-crater-idea-descriptions.component.ts
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,92 @@ | ||
| import { CdkTextareaAutosize } from '@angular/cdk/text-field'; | ||
| import { Component, Input, OnInit } from '@angular/core'; | ||
| import { ComponentContent } from '../../../../common/ComponentContent'; | ||
| import { CRaterIdea } from '../CRaterIdea'; | ||
| import { debounceTime, distinctUntilChanged } from 'rxjs/operators'; | ||
| import { FlexLayoutModule } from '@angular/flex-layout'; | ||
| import { MatCardModule } from '@angular/material/card'; | ||
| import { MatFormFieldModule } from '@angular/material/form-field'; | ||
| import { FormsModule } from '@angular/forms'; | ||
| import { MatIconModule } from '@angular/material/icon'; | ||
| import { MatInputModule } from '@angular/material/input'; | ||
| import { MatTooltipModule } from '@angular/material/tooltip'; | ||
| import { Subject, Subscription } from 'rxjs'; | ||
| import { TeacherProjectService } from '../../../../services/teacherProjectService'; | ||
| import { MatButtonModule } from '@angular/material/button'; | ||
|
|
||
| @Component({ | ||
| imports: [ | ||
| CdkTextareaAutosize, | ||
| FlexLayoutModule, | ||
| FormsModule, | ||
| MatCardModule, | ||
| MatInputModule, | ||
| MatFormFieldModule, | ||
| MatButtonModule, | ||
| MatIconModule, | ||
| MatTooltipModule | ||
| ], | ||
| selector: 'edit-crater-idea-descriptions', | ||
| standalone: true, | ||
| templateUrl: './edit-crater-idea-descriptions.component.html', | ||
| styleUrl: './edit-crater-idea-descriptions.component.scss' | ||
| }) | ||
| export class EditCRaterIdeaDescriptionsComponent implements OnInit { | ||
| @Input() componentContent: ComponentContent; | ||
| @Input() ideaDescriptions: CRaterIdea[] = []; | ||
| protected inputChanged: Subject<string> = new Subject<string>(); | ||
| private subscriptions: Subscription = new Subscription(); | ||
|
|
||
| constructor(protected projectService: TeacherProjectService) {} | ||
|
|
||
| ngOnInit(): void { | ||
| this.subscriptions.add( | ||
| this.inputChanged.pipe(debounceTime(1000), distinctUntilChanged()).subscribe(() => { | ||
| this.projectService.nodeChanged(); | ||
| }) | ||
| ); | ||
| } | ||
|
|
||
| ngOnDestroy(): void { | ||
| this.subscriptions.unsubscribe(); | ||
| } | ||
|
|
||
| protected addNewIdeaDescription(addToTop: boolean): void { | ||
| const newIdeaDescription = this.createNewIdea(); | ||
| this.ideaDescriptions.splice( | ||
| addToTop ? 0 : this.getNumIdeaDescriptions(), | ||
| 0, | ||
| newIdeaDescription | ||
| ); | ||
| this.projectService.nodeChanged(); | ||
| if (!addToTop) { | ||
| this.scrollToBottomOfList(); | ||
| } | ||
| } | ||
|
|
||
| private createNewIdea(): CRaterIdea { | ||
| const idea = new CRaterIdea('', null); | ||
| idea.text = ''; | ||
| return idea; | ||
| } | ||
|
|
||
| protected getNumIdeaDescriptions(): number { | ||
| return this.ideaDescriptions.length; | ||
| } | ||
|
|
||
| private scrollToBottomOfList(): void { | ||
| setTimeout(() => { | ||
| const button = document.getElementById('add-new-idea-description-bottom-button'); | ||
| if (button) { | ||
| button.scrollIntoView(); | ||
| } | ||
| }, 0); | ||
| } | ||
|
|
||
| protected deleteIdeaDescription(ideaIndex: number): void { | ||
| if (confirm($localize`Are you sure you want to delete this idea name?`)) { | ||
| this.ideaDescriptions.splice(ideaIndex, 1); | ||
| this.projectService.nodeChanged(); | ||
| } | ||
| } | ||
| } |
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
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
1 change: 1 addition & 0 deletions
1
...dialogGuidance/edit-dialog-guidance-advanced/edit-dialog-guidance-advanced.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 |
|---|---|---|
| @@ -1,2 +1,3 @@ | ||
| <edit-component-constraints [componentContent]="component.content" /> | ||
| <edit-component-json [component]="component"></edit-component-json> | ||
| <edit-crater-idea-descriptions [ideaDescriptions]="ideaDescriptions" /> |
7 changes: 5 additions & 2 deletions
7
...s/dialogGuidance/edit-dialog-guidance-advanced/edit-dialog-guidance-advanced.component.ts
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 |
|---|---|---|
| @@ -1,8 +1,11 @@ | ||
| import { Component } from '@angular/core'; | ||
| import { Component, Input } from '@angular/core'; | ||
| import { CRaterIdea } from '../../common/cRater/CRaterIdea'; | ||
| import { EditAdvancedComponentComponent } from '../../../../../app/authoring-tool/edit-advanced-component/edit-advanced-component.component'; | ||
|
|
||
| @Component({ | ||
| selector: 'edit-dialog-guidance-advanced', | ||
| templateUrl: 'edit-dialog-guidance-advanced.component.html' | ||
| }) | ||
| export class EditDialogGuidanceAdvancedComponent extends EditAdvancedComponentComponent {} | ||
| export class EditDialogGuidanceAdvancedComponent extends EditAdvancedComponentComponent { | ||
| @Input() ideaDescriptions: CRaterIdea[] = []; | ||
| } |
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