From 985e84d57e66357e19dd85a3834f09938aed792b Mon Sep 17 00:00:00 2001
From: Arjen <arjenmeer@hotmail.nl>
Date: Thu, 18 Apr 2024 15:58:57 +0200
Subject: [PATCH] Fix #12238: Making the question and header sticky in the
 question editor modal (#20127)

* Adds changes made by rassa328

* Improved naming, removed unnecessary code, param is now required

* Fixed linting issues

* Param specified everywhere, bool value now inline html
---
 .../question-editor.component.html            |  3 +-
 .../question-editor.component.ts              |  1 +
 .../questions-list.component.html             |  3 +-
 .../state-editor/state-editor.component.html  |  8 ++-
 .../state-editor/state-editor.component.ts    |  1 +
 ...ion-suggestion-editor-modal.component.html |  3 +-
 .../question-suggestion-review.component.html | 68 ++++++++++++-------
 .../exploration-editor-tab.component.html     |  1 +
 8 files changed, 58 insertions(+), 30 deletions(-)

diff --git a/core/templates/components/question-directives/question-editor/question-editor.component.html b/core/templates/components/question-directives/question-editor/question-editor.component.html
index 231a62e51494..db7adf01536e 100644
--- a/core/templates/components/question-directives/question-editor/question-editor.component.html
+++ b/core/templates/components/question-directives/question-editor/question-editor.component.html
@@ -9,7 +9,8 @@
                       (onSaveInapplicableSkillMisconceptionIds)="saveInapplicableSkillMisconceptionIds($event)"
                       [interactionIsShown]="interactionIsShown"
                       [stateContentPlaceholder]="getStateContentPlaceholder()"
-                      [stateContentSaveButtonPlaceholder]="getStateContentSaveButtonPlaceholder()">
+                      [stateContentSaveButtonPlaceholder]="getStateContentSaveButtonPlaceholder()"
+                      [stateContentShouldStayVisibleOnScroll]="stateContentShouldStayVisibleOnScroll">
   </oppia-state-editor>
 </div>
 
diff --git a/core/templates/components/question-directives/question-editor/question-editor.component.ts b/core/templates/components/question-directives/question-editor/question-editor.component.ts
index 7f17fae276cf..e27732bdd5df 100644
--- a/core/templates/components/question-directives/question-editor/question-editor.component.ts
+++ b/core/templates/components/question-directives/question-editor/question-editor.component.ts
@@ -60,6 +60,7 @@ export class QuestionEditorComponent implements OnInit, OnDestroy {
   @Input() question!: Question;
   @Input() questionId!: string;
   @Input() questionStateData!: State;
+  @Input() stateContentShouldStayVisibleOnScroll!: boolean;
   interactionIsShown!: boolean;
   oppiaBlackImgUrl!: string;
   stateEditorIsInitialized!: boolean;
diff --git a/core/templates/components/question-directives/questions-list/questions-list.component.html b/core/templates/components/question-directives/questions-list/questions-list.component.html
index e6ab31fb5cc9..930a27b8d991 100644
--- a/core/templates/components/question-directives/questions-list/questions-list.component.html
+++ b/core/templates/components/question-directives/questions-list/questions-list.component.html
@@ -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)}}
diff --git a/core/templates/components/state-editor/state-editor.component.html b/core/templates/components/state-editor/state-editor.component.html
index 2622ce6b9754..9fbe2fa5f225 100644
--- a/core/templates/components/state-editor/state-editor.component.html
+++ b/core/templates/components/state-editor/state-editor.component.html
@@ -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>
@@ -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;
diff --git a/core/templates/components/state-editor/state-editor.component.ts b/core/templates/components/state-editor/state-editor.component.ts
index eb2907956582..4e3e3551f22d 100644
--- a/core/templates/components/state-editor/state-editor.component.ts
+++ b/core/templates/components/state-editor/state-editor.component.ts
@@ -81,6 +81,7 @@ export class StateEditorComponent implements OnInit, OnDestroy {
   @Input() interactionIsShown!: boolean;
   @Input() stateContentSaveButtonPlaceholder!: string;
   @Input() stateContentPlaceholder!: string;
+  @Input() stateContentShouldStayVisibleOnScroll!: boolean;
 
   oppiaBlackImgUrl!: string;
   // State name is null if their is no state selected or have no active state.
diff --git a/core/templates/pages/contributor-dashboard-page/modal-templates/question-suggestion-editor-modal.component.html b/core/templates/pages/contributor-dashboard-page/modal-templates/question-suggestion-editor-modal.component.html
index c00a1bbd0ece..ee90909859f9 100644
--- a/core/templates/pages/contributor-dashboard-page/modal-templates/question-suggestion-editor-modal.component.html
+++ b/core/templates/pages/contributor-dashboard-page/modal-templates/question-suggestion-editor-modal.component.html
@@ -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()">
diff --git a/core/templates/pages/contributor-dashboard-page/modal-templates/question-suggestion-review.component.html b/core/templates/pages/contributor-dashboard-page/modal-templates/question-suggestion-review.component.html
index 15b27cfad1f3..0913ca987a71 100644
--- a/core/templates/pages/contributor-dashboard-page/modal-templates/question-suggestion-review.component.html
+++ b/core/templates/pages/contributor-dashboard-page/modal-templates/question-suggestion-review.component.html
@@ -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">
@@ -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;
@@ -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;
diff --git a/core/templates/pages/exploration-editor-page/editor-tab/exploration-editor-tab.component.html b/core/templates/pages/exploration-editor-page/editor-tab/exploration-editor-tab.component.html
index 1600dec70249..da4319b96361 100644
--- a/core/templates/pages/exploration-editor-page/editor-tab/exploration-editor-tab.component.html
+++ b/core/templates/pages/exploration-editor-page/editor-tab/exploration-editor-tab.component.html
@@ -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)"