PR changes

kobotoolbox · Jun 7, 2024 · 20eff6e · 20eff6e
1 parent 66abd5a
commit 20eff6e
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 22 deletions.
diff --git a/jsapp/js/components/processing/sidebar/processingSidebar.module.scss b/jsapp/js/components/processing/sidebar/processingSidebar.module.scss
@@ -8,6 +8,11 @@
   padding-top: 12px;
 }
 
+.settingsWrapper {
+  display: flex;
+  justify-content: flex-end;
+}
+
 .displays {
   flex: 1;
   display: flex;

diff --git a/jsapp/js/components/processing/sidebar/processingSidebar.tsx b/jsapp/js/components/processing/sidebar/processingSidebar.tsx
@@ -4,6 +4,7 @@ import singleProcessingStore, {
 } from 'js/components/processing/singleProcessingStore';
 import TransxDisplay from './transxDisplay';
 import SidebarDisplaySettings from 'js/components/processing/sidebar/sidebarDisplaySettings';
+import SidebarLabelsSettings from 'js/components/processing/sidebar/sidebarLabelsSettings.component';
 import type {AssetResponse} from 'jsapp/js/dataInterface';
 import SidebarSubmissionData from 'js/components/processing/sidebar/sidebarSubmissionData';
 import SidebarSubmissionMedia from 'js/components/processing/sidebar/sidebarSubmissionMedia';
@@ -23,7 +24,10 @@ export default function ProcessingSidebar(props: ProcessingSidebarProps) {
 
   return (
     <div className={styles.root}>
-      <SidebarDisplaySettings assetContent={props.asset.content}/>
+      <div className={styles.settingsWrapper}>
+        <SidebarLabelsSettings />
+        <SidebarDisplaySettings assetContent={props.asset.content} />
+      </div>
 
       <div className={styles.displays}>
         {Array.from(translations).map((translation) => {

diff --git a/jsapp/js/components/processing/sidebar/sidebarDisplaySettings.module.scss b/jsapp/js/components/processing/sidebar/sidebarDisplaySettings.module.scss
@@ -43,7 +43,3 @@
   border-radius: sizes.$x2;
   overflow-y: auto;
 }
-
-.selectWrapper {
-  width: 40%;
-}
diff --git a/jsapp/js/components/processing/sidebar/sidebarDisplaySettings.tsx b/jsapp/js/components/processing/sidebar/sidebarDisplaySettings.tsx
@@ -17,7 +17,6 @@ import styles from './sidebarDisplaySettings.module.scss';
 import MultiCheckbox from 'js/components/common/multiCheckbox';
 import type {MultiCheckboxItem} from 'js/components/common/multiCheckbox';
 import cx from 'classnames';
-import KoboSelect from 'js/components/common/koboSelect';
 
 interface SidebarDisplaySettingsProps {
   assetContent: AssetContent | undefined;
@@ -65,7 +64,6 @@ export default function SidebarDisplaySettings(
 
   const transcript = store.getTranscript();
   const availableDisplays = store.getAvailableDisplays(activeTab);
-  const displayedLanguageList = store.getDisplayedLanguagesList();
 
   function getStaticDisplayText(display: StaticDisplays) {
     if (display === StaticDisplays.Transcript) {
@@ -152,21 +150,6 @@ export default function SidebarDisplaySettings(
 
   return (
     <div className={styles.root}>
-      <div className={styles.selectWrapper}>
-      <KoboSelect
-        label={t('Select displayed language')}
-        name='displayedLanguage'
-        type='outline'
-        size='s'
-        options={displayedLanguageList}
-        selectedOption={store.getCurrentlyDisplayedLanguage()}
-        onChange={(languageCode) => {
-          if (languageCode) {
-            store.setCurrentlyDisplayedLanguage(languageCode);
-          }
-        }}
-      />
-      </div>
       <Button
         size='m'
         type='bare'