make submit stay visible but disabled before input is given, fixes ka…

…ntord#677
killuaDev · Jun 30, 2023 · 0846fdd · 0846fdd
1 parent 415027a
commit 0846fdd
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 25 deletions.
diff --git a/apps/lluis/DeprecatedButton.svelte b/apps/lluis/DeprecatedButton.svelte
@@ -83,6 +83,11 @@
       filter: brightness(0.9);
       transform: scale(0.9);
     }
+
+    &:disabled {
+      filter: opacity(0.5) saturate(0);
+      pointer-events: none;
+    }
   }
 
   .spinner {

diff --git a/apps/web/cypress/integration/cards.feature b/apps/web/cypress/integration/cards.feature
@@ -8,8 +8,7 @@ Feature: Cards challenge
     And I read "Which of these is"
     And I see 3 cards
     And I see 3 inactive cards
-    And I see a panel with only a Skip and a Cancel button
-    And I don't see a "Submit" button
+    And I see a panel with a Skip, Cancel and disabled "Submit" button
 
   Scenario: Getting a cards challenge in an iPhone
     Given that I have an iPhone 6
@@ -19,7 +18,7 @@ Feature: Cards challenge
   Scenario: Clicking a card
     Given I open "course/test-1/skill/cards-test"
     And I click a card
-    And I see a "Submit" button
+    And I see an enabled "Submit" button
     And the highlighted card looks correct
     And I see an active card
     And I see 2 inactive cards
@@ -37,4 +36,4 @@ Feature: Cards challenge
     And I click an incorrect card
     And I click "Submit"
     Then I read "Incorrect solution"
-    And I see a "Continue" button
+    And I see a "Continue" button
diff --git a/apps/web/cypress/integration/chips.feature b/apps/web/cypress/integration/chips.feature
@@ -9,7 +9,7 @@ Feature: Chips challenge
     And I read "are"
     And I read "you"
     And I read "today?"
-    And I see a panel with only a Skip and a Cancel button
+    And I see a panel with a Skip, Cancel and disabled "Submit" button
     And I see the correct chips
     And chips challenge looks correct
     And I see a "Feedback" link in the navbar
@@ -28,7 +28,7 @@ Feature: Chips challenge
     And I read "Correct answer: ¿Como, estás hoy?"
     And I see a "Continue" button
     Given I click "Continue"
-    Then I see a panel with only a Skip and a Cancel button
+    Then I see a panel with a Skip, Cancel and a disabled "Submit" button
 
   Scenario: Submitting a correct solution
     Given I open "/course/test-1/skill/chips-test-0?testChallenge=5000997897bb"
@@ -37,19 +37,19 @@ Feature: Chips challenge
     And I click "hoy"
     Then I have unused chips
     Given I click "Submit"
-    Then I see the challenge panel with no Skip button
+    Then I see the challenge panel with no Skip and no "Submit" button
     And I read "Correct solution"
     And I see a "Continue" button
     Given I click "Continue"
-    Then I see a panel with only a Skip and a Cancel button
+    Then I see a panel with only a Skip, Cancel and a disabled "Submit" button
 
   Scenario: Submitting an alternative correct solution
     Given I open "/course/test-1/skill/chips-test-0?testChallenge=5000997897bb"
     And I click "Hoy"
     And I click "como"
     And I click "estás"
     Given I click "Submit"
-    Then I see the challenge panel with no Skip button
+    Then I see the challenge panel with no Skip and no "Submit" button
     And I read "Correct solution"
     And I see a "Continue" button
     Given I click "Continue"
@@ -61,8 +61,8 @@ Feature: Chips challenge
       And I click "estás"
       And I click "hoy"
       Given I click "Submit"
-      Then I see the challenge panel with no Skip button
+      Then I see the challenge panel with no Skip and no "Submit" button
       And I read "Correct solution"
       And I see a "Continue" button
       Given I click "Continue"
-      Then I see a panel with only a Skip and a Cancel button
+      Then I see a panel with only a Skip, Cancel and a disabled "Submit" button
diff --git a/apps/web/cypress/integration/listening.feature b/apps/web/cypress/integration/listening.feature
@@ -6,8 +6,7 @@ Feature: Listening exercise
     Given I open "/course/test-1/skill/listening-test-0?testChallenge=cd183d15d4d1"
     Then listening challenge looks correct
     And I read "Type what you hear"
-    And I see a panel with only a Skip, a Cancel, and a Can't listen now button
-    And I don't see a "Submit" button
+    And I see a panel with only a Skip, a Cancel, Can't listen now, and a disabled "Submit" button
     And I'm not able to submit
     And I see an input field
     And the input field is focused
@@ -22,7 +21,7 @@ Feature: Listening exercise
     And I type "asdfg"
     Then I see the challenge panel
     And I see a "Skip" button
-    And I see a "Submit" button
+    And I see an enabled "Submit" button
     And I see a "Can't listen now" button
 
   Scenario: Submitting incorrect answer
@@ -60,14 +59,14 @@ Feature: Listening exercise
     And I click "Submit"
     Then I don't see a "Skip" button
     And I click "Continue"
-    Then I see a panel with only a Skip and a Cancel button
+    Then I see a panel with only a Skip, Cancel, and a disabled "Submit" button
 
   Scenario: Going to the next challenge with keyboard only
     Given I open "/course/test-1/skill/listening-test-0?testChallenge=cd183d15d4d1"
     And I type "perro"
     And I hit the enter key
     And I hit the enter key
-    Then I see a panel with only a Skip and a Cancel button
+    Then I see a panel with only a Skip, Cancel, and a disabled "Submit" button
 
   Scenario: Skipping all listening excercises
     Given I open "/course/test-1/skill/listening-test-0?testChallenge=cd183d15d4d1"

diff --git a/apps/web/cypress/integration/optionSelection.feature b/apps/web/cypress/integration/optionSelection.feature
@@ -7,8 +7,7 @@ Feature: Option selection challenge
     Then I read "Which of these is"
     And I see 3 options
     And every option is inactive
-    And I see a panel with only a Skip and a Cancel button
-    And I don't see a "Submit" button
+    And I see a panel with only a Skip, Cancel and a disabled "Submit" button
     And option selection challenge looks correct
 
   Scenario: clicking an option
@@ -31,4 +30,4 @@ Feature: Option selection challenge
     And I click "Submit"
     Then I read "Incorrect solution"
     And I read "Correct answer: perro"
-    And I see a "Continue" button
+    And I see a "Continue" button
diff --git a/apps/web/cypress/integration/shortInput.feature b/apps/web/cypress/integration/shortInput.feature
@@ -10,9 +10,8 @@ Feature: Short text input challange
     And I read "in Test Language!"
     Given I open "/course/test-1/skill/short-input-test-1?testChallenge=fc0a3426d589"
     Then I see a tooltip that says "foo"
-    And I see a panel with only a Skip and a Cancel button
+    And I see a panel with only a Skip, Cancel and a disabled "Submit" button
     And I'm not able to submit
-    And I don't see a "Submit" button
     And I see a card with an image
     And I see an input field
     And the input field is focused
@@ -31,7 +30,7 @@ Feature: Short text input challange
     And I type "el perro"
     Then I see the challenge panel
     And I see a "Skip" button
-    And I see a "Submit" button
+    And I see an enabled "Submit" button
 
   Scenario: Submitting incorrect answer
     Given I open "/course/test-1/skill/short-input-test-0?testChallenge=14fc2ae4fb35"
@@ -91,4 +90,4 @@ Feature: Short text input challange
 
   Scenario: using the hover-over dictionary
     Given I open "/course/test-1/skill/short-input-test-3?testChallenge=86665e4f61fa"
-    Then I see a tooltip that says "tu"
+    Then I see a tooltip that says "tu"
diff --git a/apps/web/src/components/ChallengePanel.svelte b/apps/web/src/components/ChallengePanel.svelte
@@ -49,9 +49,10 @@
       <Button style="primary" type="submit" on:click="{buttonAction}">
         {buttonText}
       </Button>
-    {/if}
-    {#if submit}
+    {:else if submit}
       <Button style="primary" type="submit">Submit</Button>
+    {:else}
+      <Button style="primary" type="submit" disabled={true}>Submit</Button>
     {/if}
   </div>
 </Panel>