Merge pull request #13340 from nucleogenesis/fix--rtl-quiz-creation

RTL fixes in Quiz Creation

Author: rtibbles

kolibri/plugins/coach/assets/src/views/common/assignments/AssignmentDetailsModal.vue

@@ -43,7 +43,7 @@
               :invalidText="titleIsInvalidText"
               :showInvalidText="titleIsInvalid"
               :disabled="disabled || formIsSubmitted"
-              :style="{ marginLeft: windowIsLarge ? '-1em' : 0 }"
+              :class="{ 'textbox-lg': windowIsLarge }"
               @input="showTitleError = false"
               @keydown.enter="submitData"
             />
@@ -70,8 +70,7 @@
                     ? afterLearnerSubmitsQuizDescription$()
                     : afterCoachEndsQuizDescription$()
                 "
-                :style="windowIsSmall ? 'margin-left: -1em' : 'margin-left: -3em'"
-                class="visibility-score-select"
+                :class="['visibility-score-select', windowIsSmall ? 'select-sm' : 'select-lg']"
                 @change="option => (instantReportVisibility = option.value)"
               />
             </KGridItem>
@@ -96,7 +95,7 @@
               :maxlength="200"
               :disabled="disabled || formIsSubmitted"
               :textArea="true"
-              :style="{ marginLeft: windowIsLarge ? '-1em' : 0 }"
+              :class="{ 'textbox-lg': windowIsLarge }"
             />
           </KGridItem>
         </KGrid>
@@ -510,4 +509,16 @@
     font-weight: bold;
   }
 
+  .textbox-lg {
+    margin-left: -1em;
+  }
+
+  .select-sm {
+    margin-left: -1em;
+  }
+
+  .select-lg {
+    margin-left: -3em;
+  }
+
 </style>

kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/index.vue

@@ -20,38 +20,29 @@
         :buttonValue="ClassRecipients.GROUP_OR_INDIVIDUAL"
         :disabled="disabled"
       >
-        <div>
-          <div
-            :style="{
-              display: 'flex',
-              columnGap: '8px',
-              flexDirection: hasGroupOrIndividualRecipients ? 'column' : 'row',
-              alignItems: hasGroupOrIndividualRecipients ? 'flex-start' : 'center',
-            }"
-          >
-            <KLabeledIcon
-              :label="coachString('groupsAndLearnersLabel')"
-              icon="people"
-              style="width: auto"
-            />
-            <span v-if="hasGroupOrIndividualRecipients">
-              {{ selectedMessage }}
-            </span>
-            <KButton
-              v-if="selectedRecipients === ClassRecipients.GROUP_OR_INDIVIDUAL"
-              appearance="basic-link"
-              :text="hasGroupOrIndividualRecipients ? $tr('changeAction') : $tr('selectAction')"
-              @click="isLearnersSelectorOpen = true"
-            />
-          </div>
-          <div
-            v-if="assignmentInvalidText"
-            :style="{
-              color: $themeTokens.error,
-            }"
-          >
-            {{ assignmentInvalidText }}
-          </div>
+        <div :dir="isRtl ? 'rtl' : 'ltr'">
+          <KLabeledIcon
+            :label="coachString('groupsAndLearnersLabel')"
+            icon="people"
+          />
+          <span v-if="hasGroupOrIndividualRecipients">
+            {{ selectedMessage }}
+          </span>
+          <KButton
+            v-if="selectedRecipients === ClassRecipients.GROUP_OR_INDIVIDUAL"
+            appearance="basic-link"
+            :text="hasGroupOrIndividualRecipients ? $tr('changeAction') : $tr('selectAction')"
+            style="margin: 0 0.5em"
+            @click="isLearnersSelectorOpen = true"
+          />
+        </div>
+        <div
+          v-if="assignmentInvalidText"
+          :style="{
+            color: $themeTokens.error,
+          }"
+        >
+          {{ assignmentInvalidText }}
         </div>
       </KRadioButton>
     </KRadioButtonGroup>
@@ -259,4 +250,12 @@
     align-items: center;
   }
 
+  /deep/ .k-radio-button-label {
+    text-align: left;
+  }
+
+  /deep/ .labeled-icon-wrapper {
+    width: auto;
+  }
+
 </style>