style: processing panel

cheminfo · Mar 3, 2025 · a57ab74 · a57ab74
1 parent c976d34
commit a57ab74
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 39 deletions.
diff --git a/src/component/panels/filtersPanel/Filters/BaseLineCorrectionOptionsPanel.tsx b/src/component/panels/filtersPanel/Filters/BaseLineCorrectionOptionsPanel.tsx
@@ -97,6 +97,7 @@ export default function BaseLineCorrectionOptionsPanel(
                   submitHandler();
                 }, 0);
               }}
+              fill
               {...defaultAlgorithmSelectProps}
             >
               <Button
@@ -119,6 +120,7 @@ export default function BaseLineCorrectionOptionsPanel(
                   onValueChange={() => {
                     submitHandler();
                   }}
+                  fill
                 />
               </Label>
               <Label title="Tolerance:" style={formLabelStyle}>
@@ -133,6 +135,7 @@ export default function BaseLineCorrectionOptionsPanel(
                   onValueChange={() => {
                     submitHandler();
                   }}
+                  fill
                 />
               </Label>
             </>
@@ -154,6 +157,7 @@ export default function BaseLineCorrectionOptionsPanel(
                   onValueChange={() => {
                     submitHandler();
                   }}
+                  fill
                 />
               </Label>
             )}

diff --git a/src/component/panels/filtersPanel/Filters/PhaseCorrectionOptionsPanel.tsx b/src/component/panels/filtersPanel/Filters/PhaseCorrectionOptionsPanel.tsx
@@ -1,5 +1,6 @@
 import { Button } from '@blueprintjs/core';
 import { Select } from '@blueprintjs/select';
+import styled from '@emotion/styled';
 import type { CSSProperties } from 'react';
 
 import type { ExtractFilterEntry } from '../../../../data/types/common/ExtractFilterEntry.js';
@@ -19,6 +20,7 @@ import type { BaseFilterOptionsPanelProps } from './index.js';
 
 const inputRangeStyle: CSSProperties = {
   padding: '5px 10px',
+  flex: 8,
 };
 
 const formLabelStyle: LabelStyle = {
@@ -34,6 +36,11 @@ const formLabelStyle: LabelStyle = {
   },
 };
 
+const NumberInputContainer = styled.div`
+  flex: 4;
+  min-width: 75px;
+`;
+
 export default function PhaseCorrectionOptionsPanel(
   props: BaseFilterOptionsPanelProps<ExtractFilterEntry<'phaseCorrection'>>,
 ) {
@@ -91,34 +98,41 @@ export default function PhaseCorrectionOptionsPanel(
           </Label>
           {phaseCorrectionTypeItem?.value === 'manual' && (
             <>
-              <Label title="PH0:" style={formLabelStyle}>
-                <NumberInput2
-                  name="ph0"
-                  onValueChange={handleInput}
-                  value={value.ph0}
-                  debounceTime={250}
-                  style={{ width: '100px' }}
-                />
+              <Label title="PH0:" style={formLabelStyle} widthThreshold={400}>
+                <NumberInputContainer>
+                  <NumberInput2
+                    name="ph0"
+                    onValueChange={handleInput}
+                    value={value.ph0}
+                    debounceTime={250}
+                    fill
+                  />
+                </NumberInputContainer>
                 <InputRange
                   ref={ph0Ref}
                   name="ph0"
                   label="Change PH0 (click and drag)"
+                  shortLabel="Ph0"
                   onChange={handleRangeChange}
                   style={inputRangeStyle}
                 />
               </Label>
-              <Label title="PH1:" style={formLabelStyle}>
-                <NumberInput2
-                  name="ph1"
-                  onValueChange={handleInput}
-                  value={value.ph1}
-                  debounceTime={250}
-                  style={{ width: '100px' }}
-                />
+              <Label title="PH1:" style={formLabelStyle} widthThreshold={400}>
+                <NumberInputContainer>
+                  <NumberInput2
+                    name="ph1"
+                    onValueChange={handleInput}
+                    value={value.ph1}
+                    debounceTime={250}
+                    fill
+                  />
+                </NumberInputContainer>
+
                 <InputRange
                   ref={ph1Ref}
                   name="ph1"
                   label="Change PH1 (click and drag)"
+                  shortLabel="Ph1"
                   onChange={handleRangeChange}
                   style={inputRangeStyle}
                 />

diff --git a/src/component/panels/filtersPanel/Filters/ShiftOptionsPanel.tsx b/src/component/panels/filtersPanel/Filters/ShiftOptionsPanel.tsx
@@ -96,6 +96,7 @@ export default function ShiftOptionsPanel(
         <Label title="Shift:" style={formLabelStyle}>
           <NumberInput2Controller
             control={control}
+            fill
             name="shift"
             min={0}
             stepSize={1}

diff --git a/src/component/panels/filtersPanel/Filters/base/BaseApodizationOptions.tsx b/src/component/panels/filtersPanel/Filters/base/BaseApodizationOptions.tsx
@@ -5,30 +5,16 @@ import { FormProvider, useFormContext } from 'react-hook-form';
 import * as Yup from 'yup';
 
 import Label from '../../../../elements/Label.js';
-import type { LabelStyle } from '../../../../elements/Label.js';
 import { NumberInput2Controller } from '../../../../elements/NumberInput2Controller.js';
 import { ReadOnly } from '../../../../elements/ReadOnly.js';
 import { Sections } from '../../../../elements/Sections.js';
 import { FilterActionButtons } from '../FilterActionButtons.js';
 import { HeaderContainer, StickyHeader } from '../InnerFilterHeader.js';
 import { useApodization } from '../hooks/useApodization.js';
 import type { ApodizationFilterEntry } from '../hooks/useApodization.js';
+import { formLabelStyle } from '../index.js';
 import type { BaseFilterOptionsPanelProps } from '../index.js';
 
-const fieldStyle: LabelStyle = {
-  label: {
-    flex: 6,
-  },
-  wrapper: {
-    flex: 6,
-    minWidth: 75,
-  },
-  container: {
-    marginBottom: '5px',
-    overflow: 'hidden',
-  },
-};
-
 const advanceValidationSchema = Yup.object().shape({
   options: Yup.object().shape({
     gaussian: Yup.object()
@@ -132,7 +118,7 @@ function ExponentialSectionOptionsSection(options: SectionOptions) {
       <Label
         title="Line broadening:"
         shortTitle="LB:"
-        style={fieldStyle}
+        style={formLabelStyle}
         widthThreshold={210}
       >
         <NumberInput2Controller
@@ -163,7 +149,7 @@ function GaussianOptionSection(options: SectionOptions) {
       <Label
         title="Line broadening:"
         shortTitle="LB:"
-        style={fieldStyle}
+        style={formLabelStyle}
         widthThreshold={210}
       >
         <NumberInput2Controller
@@ -180,7 +166,7 @@ function GaussianOptionSection(options: SectionOptions) {
       <Label
         title="Line broadening center [0 - 1]:"
         shortTitle="LB center:"
-        style={fieldStyle}
+        style={formLabelStyle}
         widthThreshold={210}
       >
         <NumberInput2Controller
@@ -210,7 +196,7 @@ function SineBellOptionSection(options: SectionOptions) {
       algorithmTitle="Sine Bell"
       onChange={onChange}
     >
-      <Label title="Offset:" style={fieldStyle}>
+      <Label title="Offset:" style={formLabelStyle}>
         <NumberInput2Controller
           control={control}
           fill
@@ -236,7 +222,7 @@ function SineSquareOptionSection(options: SectionOptions) {
       algorithmTitle="Sine Square"
       onChange={onChange}
     >
-      <Label title="Offset:" style={fieldStyle}>
+      <Label title="Offset:" style={formLabelStyle}>
         <NumberInput2Controller
           control={control}
           fill
@@ -261,7 +247,7 @@ function TrafOptionSection(options: SectionOptions) {
       <Label
         title="lineBroadening:"
         shortTitle="LB:"
-        style={fieldStyle}
+        style={formLabelStyle}
         widthThreshold={210}
       >
         <NumberInput2Controller

diff --git a/src/component/panels/filtersPanel/Filters/index.tsx b/src/component/panels/filtersPanel/Filters/index.tsx
@@ -60,12 +60,14 @@ export interface BaseFilterOptionsPanelProps<T> {
 
 export const formLabelStyle: LabelStyle = {
   label: {
-    flex: 5,
+    flex: 6,
   },
   wrapper: {
-    flex: 7,
+    flex: 6,
+    minWidth: 75,
   },
   container: {
     marginBottom: '5px',
+    overflow: 'hidden',
   },
 };