Move form buttons for question management to top row, rework SC/MC blur

uzh-bf · Sep 19, 2019 · 2ce0bb4 · 2ce0bb4
1 parent 6fe8e19
commit 2ce0bb4
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 45 deletions.
diff --git a/src/components/forms/questionManagement/QuestionCreationForm.tsx b/src/components/forms/questionManagement/QuestionCreationForm.tsx
@@ -213,6 +213,27 @@ function QuestionCreationForm({
 
           return (
             <Form error={!_isEmpty(errors)} onSubmit={handleSubmit}>
+              <div className="questionActions">
+                <Button className="discard" size="large" type="reset" onClick={onDiscard}>
+                  {_some(touched) ? (
+                    <FormattedMessage defaultMessage="Discard Changes" id="common.button.discard" />
+                  ) : (
+                    <FormattedMessage defaultMessage="Return to Question Pool" id="createQuestion.button.backToPool" />
+                  )}
+                </Button>
+
+                <Button
+                  primary
+                  className="save"
+                  disabled={!_isEmpty(errors) || (!isInitialValid && _isEmpty(touched))}
+                  loading={isSubmitting}
+                  size="large"
+                  type="submit"
+                >
+                  <FormattedMessage defaultMessage="Save" id="common.button.save" />
+                </Button>
+              </div>
+
               <div className="questionInput questionTitle">
                 <FormikInput
                   autoFocus
@@ -297,26 +318,6 @@ function QuestionCreationForm({
                 />
               </div>
 
-              <div className="questionActions">
-                <Button className="discard" type="reset" onClick={onDiscard}>
-                  {_some(touched) ? (
-                    <FormattedMessage defaultMessage="Discard Changes" id="common.button.discard" />
-                  ) : (
-                    <FormattedMessage defaultMessage="Return to Question Pool" id="createQuestion.button.backToPool" />
-                  )}
-                </Button>
-
-                <Button
-                  primary
-                  className="save"
-                  disabled={!_isEmpty(errors) || (!isInitialValid && _isEmpty(touched))}
-                  loading={isSubmitting}
-                  type="submit"
-                >
-                  <FormattedMessage defaultMessage="Save" id="common.button.save" />
-                </Button>
-              </div>
-
               {_some(errors) && (
                 <Message error>
                   <List>
@@ -354,26 +355,21 @@ function QuestionCreationForm({
             margin-bottom: 0.5rem !important;
           }
 
-          .questionActions {
-            margin-top: 1rem;
-          }
-
           @supports (grid-gap: 1rem) {
             @include desktop-tablet-only {
               display: grid;
               align-content: start;
 
               grid-gap: 1rem;
               grid-template-columns: repeat(3, 1fr);
-              grid-template-rows: 5rem auto auto auto;
+              grid-template-rows: auto auto auto auto;
               grid-template-areas:
+                'actions actions actions'
                 'title title preview'
                 'type tags preview'
                 'content content content'
                 'files files files'
-                'options options options'
-                'actions actions actions';
-
+                'options options options';
               .questionInput,
               .questionPreview {
                 margin: 0;

diff --git a/src/components/forms/questionManagement/QuestionEditForm.tsx b/src/components/forms/questionManagement/QuestionEditForm.tsx
@@ -174,6 +174,22 @@ function QuestionEditForm({
 
           return (
             <Form error={success === false} success={success === true} onSubmit={handleFormSubmit}>
+              <div className="actionArea">
+                <Button className="discard" size="large" type="reset" onClick={handleDiscard}>
+                  <FormattedMessage defaultMessage="Discard" id="common.button.discard" />
+                </Button>
+                <Button
+                  primary
+                  className="save"
+                  disabled={!_isEmpty(errors) || _isEmpty(touched)}
+                  loading={loading && isSubmitting}
+                  size="large"
+                  type="submit"
+                >
+                  <FormattedMessage defaultMessage="Save" id="common.button.save" />
+                </Button>
+              </div>
+
               <div className="infoMessage">
                 <Message success>
                   <FormattedMessage defaultMessage="Successfully modified question." id="editQuestion.sucess" />
@@ -306,21 +322,6 @@ function QuestionEditForm({
                   }}
                 />
               </div>
-
-              <div className="actionArea">
-                <Button className="discard" type="reset" onClick={handleDiscard}>
-                  <FormattedMessage defaultMessage="Discard" id="common.button.discard" />
-                </Button>
-                <Button
-                  primary
-                  className="save"
-                  disabled={!_isEmpty(errors) || _isEmpty(touched)}
-                  loading={loading && isSubmitting}
-                  type="submit"
-                >
-                  <FormattedMessage defaultMessage="Save" id="common.button.save" />
-                </Button>
-              </div>
             </Form>
           )
         }}
@@ -376,14 +377,14 @@ function QuestionEditForm({
               grid-template-columns: 1fr 4fr;
               grid-template-rows: auto;
               grid-template-areas:
+                'actions actions'
                 'message message'
                 'type title'
                 'tags tags'
                 'version version'
                 'content content'
                 'files files'
-                'options options'
-                'actions actions';
+                'options options';
 
               .questionInput {
                 margin-bottom: 0;

diff --git a/src/components/questionTypes/SC/SCCreationPlaceholder.tsx b/src/components/questionTypes/SC/SCCreationPlaceholder.tsx
@@ -23,6 +23,10 @@ function SCCreationPlaceholder({ handleSave }: Props): React.ReactElement {
   }
   const onNameChange = (e): void => setName(e.target.value)
   const onSave = (): void => {
+    if (!name || name.length === 0) {
+      setInputMode(false)
+      return
+    }
     handleSave({ correct, name })
     setCorrect(false)
     setInputMode(false)