fix: moved the layout-config button (#41)

* fix: moved the layout-config button * fix: changed singular layout to plural
Eyevinn · Oct 16, 2024 · 22ad09a · 22ad09a
1 parent f611fd7
commit 22ad09a
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 24 deletions.
diff --git a/src/components/modal/configureMultiviewModal/ConfigureMultiviewModal.tsx b/src/components/modal/configureMultiviewModal/ConfigureMultiviewModal.tsx
@@ -12,6 +12,7 @@ import { usePutMultiviewLayout } from '../../../hooks/multiviewLayout';
 import Decision from '../configureOutputModal/Decision';
 import MultiviewLayoutSettings from './MultiviewLayoutSettings/MultiviewLayoutSettings';
 import { IconSettings } from '@tabler/icons-react';
+import { Button } from '../../button/Button';
 
 type ConfigureMultiviewModalProps = {
   open: boolean;
@@ -170,13 +171,6 @@ export function ConfigureMultiviewModal({
                   {index !== 0 && (
                     <div className="min-h-full border-l border-separate opacity-10 my-12"></div>
                   )}
-                  <button
-                    onClick={() => setLayoutModalOpen(true)}
-                    title={t('preset.configure_layout')}
-                    className={`absolute top-0 right-[-10%] min-w-fit`}
-                  >
-                    <IconSettings className="text-p" />
-                  </button>
                   <div className="flex flex-col">
                     <MultiviewSettingsConfig
                       productionId={production?._id}
@@ -233,10 +227,23 @@ export function ConfigureMultiviewModal({
           setNewMultiviewPreset={setNewMultiviewLayout}
         />
       )}
-      <Decision
-        onClose={() => (layoutModalOpen ? closeLayoutModal() : clearInputs())}
-        onSave={() => (layoutModalOpen ? onUpdateLayoutPreset() : onSave())}
-      />
+      <div className="flex flex-col">
+        {!layoutModalOpen && (
+          <Button
+            className="flex self-center hover:bg-green-400 min-w-fit max-w-fit mt-10"
+            type="button"
+            onClick={() => setLayoutModalOpen(true)}
+          >
+            {t('preset.configure_layouts')}
+            <IconSettings className="text-p inline ml-2" />
+          </Button>
+        )}
+        <Decision
+          className="mt-6"
+          onClose={() => (layoutModalOpen ? closeLayoutModal() : clearInputs())}
+          onSave={() => (layoutModalOpen ? onUpdateLayoutPreset() : onSave())}
+        />
+      </div>
     </Modal>
   );
 }
diff --git a/src/components/modal/configureMultiviewModal/MultiviewSettings.tsx b/src/components/modal/configureMultiviewModal/MultiviewSettings.tsx
@@ -169,16 +169,8 @@ export default function MultiviewSettingsConfig({
     <div className="flex flex-col gap-2 rounded p-4 pr-7">
       <div className="flex justify-between pb-5">
         <h1 className="font-bold">{t('preset.multiview_output_settings')}</h1>
-        {lastItem && (
-          <button
-            onClick={openConfigModal}
-            title={t('preset.configure_layout')}
-          >
-            <IconSettings className="text-p" />
-          </button>
-        )}
       </div>
-      <div className="relative">
+      <div>
         <Options
           label={t('preset.select_multiview_layout')}
           options={multiviewLayoutNames.map((singleItem) => ({

diff --git a/src/components/modal/configureOutputModal/Decision.tsx b/src/components/modal/configureOutputModal/Decision.tsx
@@ -4,13 +4,18 @@ import { Button } from '../../button/Button';
 interface IDecision {
   onClose: () => void;
   onSave: () => void;
+  className?: string;
 }
 
-export default function Decision({ onClose, onSave }: IDecision) {
+export default function Decision({ onClose, onSave, className }: IDecision) {
   const t = useTranslate();
 
   return (
-    <div className="flex justify-center w-full min-w-max mt-10 gap-16">
+    <div
+      className={`flex justify-center w-full min-w-max gap-16 ${
+        className ? className : 'mt-10'
+      }`}
+    >
       <Button className="hover:bg-red-500" onClick={onClose} state="warning">
         {t('close')}
       </Button>

diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts
@@ -666,7 +666,7 @@ export const en = {
     stream_name: 'Stream',
     multiview_output_settings: 'Multiview output',
     select_multiview_layout: 'Layout',
-    configure_layout: 'Configure layout',
+    configure_layouts: 'Configure layouts',
     create_layout: 'Create new layout',
     update_layout: 'Update layout',
     no_updated_layout: 'No layout updated',

diff --git a/src/i18n/locales/sv.ts b/src/i18n/locales/sv.ts
@@ -672,7 +672,7 @@ export const sv = {
     no_multiview_selected: 'Ingen multiview vald',
     no_multiview_found: 'Hittade ingen multiview',
     select_multiview_layout: 'Komposition',
-    configure_layout: 'Justera komposition',
+    configure_layouts: 'Justera kompositioner',
     create_layout: 'Skapa komposition',
     update_layout: 'Uppdatera komposition',
     no_updated_layout: 'Ingen uppdaterad komposition',