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

[REVERTED] Fix #12238: Making the question and header sticky in the question editor modal #20127

Merged
merged 6 commits into from
Apr 18, 2024
Merged

[REVERTED] Fix #12238: Making the question and header sticky in the question editor modal #20127

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6ff7ace
Adds changes made by rassa328
arjen0203 Apr 2, 2024
2a4a3e4
Improved naming, removed unnecessary code, param is now required
arjen0203 Apr 2, 2024
dfafd10
Merge remote-tracking branch 'upstream/develop' into sticky-question-…
arjen0203 Apr 3, 2024
827c903
Fixed linting issues
arjen0203 Apr 3, 2024
8eb9e1f
Param specified everywhere, bool value now inline html
arjen0203 Apr 12, 2024
628560c
Merge remote-tracking branch 'upstream/develop' into sticky-question-…
arjen0203 Apr 12, 2024
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
3 changes: 2 additions & 1 deletion core/templates/components/question-directives/question-editor/question-editor.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@
(onSaveInapplicableSkillMisconceptionIds)="saveInapplicableSkillMisconceptionIds($event)"
[interactionIsShown]="interactionIsShown"
[stateContentPlaceholder]="getStateContentPlaceholder()"
[stateContentSaveButtonPlaceholder]="getStateContentSaveButtonPlaceholder()">
[stateContentSaveButtonPlaceholder]="getStateContentSaveButtonPlaceholder()"
[stateContentShouldStayVisibleOnScroll]="stateContentShouldStayVisibleOnScroll">
</oppia-state-editor>
</div>

Expand Down
1 change: 1 addition & 0 deletions core/templates/components/question-directives/question-editor/question-editor.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ export class QuestionEditorComponent implements OnInit, OnDestroy {
@Input() question!: Question;
@Input() questionId!: string;
@Input() questionStateData!: State;
@Input() stateContentShouldStayVisibleOnScroll!: boolean;
Copy link
Contributor

Choose a reason for hiding this comment

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

If this input is required, what about other usages of the question-editor? In my understanding you should pass this argument there too.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Every usage of question-editor now has it's value specified

interactionIsShown!: boolean;
oppiaBlackImgUrl!: string;
stateEditorIsInitialized!: boolean;
Expand Down
3 changes: 2 additions & 1 deletion core/templates/components/question-directives/questions-list/questions-list.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,8 @@ <h4> <strong> Linked Skills </strong> </h4>
[misconceptionsBySkill]="misconceptionsBySkill"
[questionStateData]="questionStateData"
[question]="question"
[userCanEditQuestion]="canEditQuestion">
[userCanEditQuestion]="canEditQuestion"
[stateContentShouldStayVisibleOnScroll]="false">
</oppia-question-editor>
<div class="alert alert-danger" *ngIf="question.getStateData().interaction.id && questionValidationService.getValidationErrorMessage(question)">
{{questionValidationService.getValidationErrorMessage(question)}}
Expand Down
8 changes: 7 additions & 1 deletion core/templates/components/state-editor/state-editor.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ <h3 class="e2e-test-joyride-title" tabindex="0">Responses</h3>
</p>
</ng-template>

<mat-card class="oppia-editor-card-with-avatar">
<mat-card class="oppia-editor-card-with-avatar" [ngClass]="{'oppia-editor-card-with-avatar-sticky': stateContentShouldStayVisibleOnScroll}">
<div class="state-content-header-container" (click)="toggleConceptCard()">
<div class="state-content-header oppia-mobile-collapsible-card-header">
<h3 class="oppia-exp-content-card-header">Content</h3>
Expand Down Expand Up @@ -92,6 +92,12 @@ <h3 class="oppia-exp-content-card-header">Content</h3>
</div>

<style>
.oppia-editor-card-with-avatar-sticky {
position: sticky;
top: 82px;
z-index: 1;
}

.state-content-header-container {
display: none;
padding: 0 30px;
Expand Down
1 change: 1 addition & 0 deletions core/templates/components/state-editor/state-editor.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@ export class StateEditorComponent implements OnInit, OnDestroy {
@Input() interactionIsShown!: boolean;
@Input() stateContentSaveButtonPlaceholder!: string;
@Input() stateContentPlaceholder!: string;
@Input() stateContentShouldStayVisibleOnScroll!: boolean;
StephenYu2018 marked this conversation as resolved.
Show resolved Hide resolved

oppiaBlackImgUrl!: string;
// State name is null if their is no state selected or have no active state.
Expand Down
3 changes: 2 additions & 1 deletion ...ontributor-dashboard-page/modal-templates/question-suggestion-editor-modal.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,8 @@ <h3>Your Practice Question</h3>
[misconceptionsBySkill]="misconceptionsBySkill"
[questionStateData]="questionStateData"
[question]="question"
[userCanEditQuestion]="canEditQuestion">
[userCanEditQuestion]="canEditQuestion"
[stateContentShouldStayVisibleOnScroll]="false">
</oppia-question-editor>
</div>
<div class="alert alert-danger" *ngIf="question.getStateData().interaction.id && getQuestionValidationErrorMessage()">
Expand Down
68 changes: 42 additions & 26 deletions ...ages/contributor-dashboard-page/modal-templates/question-suggestion-review.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,32 +20,37 @@ <h3 class="oppia-mobile-question-header" title="{{questionHeader}}">
</div>

<div class="modal-body">
<div class="oppia-question-details" tabindex="0">
<strong class="oppia-difficulty-title">
Selected Difficulty: {{skillDifficultyLabel}}
</strong>
<div *ngIf="skillRubricExplanations.length > 0">
<strong class="oppia-skill-rubrics"
title="Use these notes to make sure your question is at the right difficulty.">
Notes from Skill Rubric
</strong>
<ul>
<li *ngFor="let explanation of skillRubricExplanations">
<span class="oppia-skill-explanation" [innerHtml]="explanation"></span>
</li>
</ul>
<section class="oppia-suggestion-review-container">
<div class="oppia-question-details" tabindex="0">
<div class="oppia-question-suggestion">
<strong class="oppia-difficulty-title">
Selected Difficulty: {{skillDifficultyLabel}}
</strong>
<div *ngIf="skillRubricExplanations.length > 0">
<strong class="oppia-skill-rubrics"
title="Use these notes to make sure your question is at the right difficulty.">
Notes from Skill Rubric
</strong>
<ul>
<li *ngFor="let explanation of skillRubricExplanations">
<span class="oppia-skill-explanation" [innerHtml]="explanation"></span>
</li>
</ul>
</div>
</div>
</div>
</div>
<div *ngIf="showQuestion">
<oppia-question-editor [questionId]="questionId"
[misconceptionsBySkill]="misconceptionsBySkill"
[questionStateData]="questionStateData"
[question]="question"
[userCanEditQuestion]="canEditQuestion"
(questionChange)="questionChanged()"
tabindex="0">
</oppia-question-editor>
</div>
<div *ngIf="showQuestion">
<oppia-question-editor [questionId]="questionId"
[misconceptionsBySkill]="misconceptionsBySkill"
[questionStateData]="questionStateData"
[question]="question"
[userCanEditQuestion]="canEditQuestion"
[stateContentShouldStayVisibleOnScroll]="true"
(questionChange)="questionChanged()"
tabindex="0">
</oppia-question-editor>
</div>
</section>
<section [hidden]="!reviewable"
class="oppia-reviewer-actions">
<div class="oppia-suggestion-review-message">
Expand Down Expand Up @@ -110,6 +115,17 @@ <h3 class="oppia-mobile-question-header" title="{{questionHeader}}">
</div>

<style>
.modal-header {
background-color: #fff;
position: sticky;
top: 0;
z-index: 1000;
}
.oppia-suggestion-review-container {
height: 1300px;
padding-bottom: 0;
padding-top: 0;
}
.oppia-close-button-position {
font-size: 2.5rem;
position: absolute;
Expand Down Expand Up @@ -181,7 +197,7 @@ <h3 class="oppia-mobile-question-header" title="{{questionHeader}}">
}
.oppia-question-suggestion {
height: 100%;
overflow: scroll;
overflow: auto;
}
.oppia-reviewer-actions {
border-top: 1px solid #e5e5e5;
Expand Down
1 change: 1 addition & 0 deletions .../templates/pages/exploration-editor-page/editor-tab/exploration-editor-tab.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ <h4>Now for the fun part...</h4>
[addState]="addState.bind(this)"
[interactionIsShown]="interactionIsShown"
[explorationIsLinkedToStory]="explorationIsLinkedToStory"
[stateContentShouldStayVisibleOnScroll]="false"
(onSaveStateContent)="saveStateContent($event)"
(onSaveNextContentIdIndex)="saveNextContentIdIndex()"
(onSaveInteractionData)="saveInteractionData($event)"
Expand Down
Loading