panel layout tweak

stuffmatic · Nov 13, 2018 · b1e2a67 · b1e2a67
1 parent 5c4e0c6
commit b1e2a67
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 20 deletions.
diff --git a/TODO.md b/TODO.md
@@ -1,9 +1,7 @@
 # Fix
-* ~~flickering when opening project (from intro screen)~~
+* add license info
 * bump project file version and clean up load checks
 * use transform() to scale bg image?
-* add license info
-* flickering when opening project
 * view menu -> view tool panels
 * help menu with link to site
 * add appropriate entries to the macos fSpy menu

diff --git a/src/gui/components/result-panel/result-panel.tsx b/src/gui/components/result-panel/result-panel.tsx
@@ -279,32 +279,34 @@ export default class ResultPanel extends React.PureComponent<ResultPanelProps> {
 
     return (
       <div className='panel-section bottom-border'>
-        <Checkbox
+        <div style={{ marginTop: '-2px' }}><Checkbox
           title='Focal length'
           isSelected={displayFocalLength}
           onChange={ (enabled: boolean) => { this.props.onDisplayAbsoluteFocalLengthChanged(enabled) } }
-        />
+        /></div>
         { displayFocalLength ? this.renderCameraPresetForm(absoluteFocalLength, cameraData) : null }
-        { !proportionsMatch && displayFocalLength ? (<BulletList
+        { !proportionsMatch && displayFocalLength ? (<div style={{ marginTop: '5px' }}><BulletList
           messages={
             [ strings.imageSensorProportionsMismatch ]
           }
           type={BulletListType.Warnings}
-        />) : null }
+        /></div>) : null }
       </div>
     )
   }
 
   private renderCameraPresetForm(absoluteFocalLength: number, cameraData: CameraData) {
     return (
+      <div style={{ marginTop: '5px' }}>
       <CameraPresetForm
             absoluteFocalLength={absoluteFocalLength}
             cameraData={cameraData}
             onCameraPresetChange={this.props.onCameraPresetChange}
             onSensorSizeChange={this.props.onSensorSizeChange}
           >
-          <TableRow value={absoluteFocalLength} title='Value (mm)' />
-          </CameraPresetForm>
+        <TableRow value={absoluteFocalLength} title='Value (mm)' />
+      </CameraPresetForm>
+      </div>
     )
   }
 
@@ -313,7 +315,7 @@ export default class ResultPanel extends React.PureComponent<ResultPanelProps> {
       return null
     }
     return (
-      <div className='panel-section top-border'>
+      <div className='panel-section'>
         <BulletList
           messages={
             this.props.solverResult.warnings

diff --git a/src/gui/components/settings-panel/checkbox.tsx b/src/gui/components/settings-panel/checkbox.tsx
@@ -8,16 +8,17 @@ interface CheckboxProps {
 
 export default function Checkbox(props: CheckboxProps) {
   return (
-    <div style={{ display: 'flex' }} >
+    <div style={{ display: 'flex', alignItems: 'center' }} >
       <div>{props.title}</div>
       <div style={{ flexGrow: 1, textAlign: 'right' }}>
         <input
-        name={props.title}
-        type='checkbox'
-        checked={props.isSelected}
-        onChange={(event: any) => {
-          props.onChange(event.target.checked)
-        }}
+          style={{ marginRight: 0 }}
+          name={props.title}
+          type='checkbox'
+          checked={props.isSelected}
+          onChange={(event: any) => {
+            props.onChange(event.target.checked)
+          }}
       />
       </div>
     </div>

diff --git a/src/gui/components/settings-panel/reference-distance-form.tsx b/src/gui/components/settings-panel/reference-distance-form.tsx
@@ -44,14 +44,14 @@ export default class ReferenceDistanceForm extends React.PureComponent<Reference
             valueNotAvailable={this.props.referenceAxis == null}
             value={this.props.referenceDistance}
             onSubmit={this.props.onReferenceDistanceChange}
-          />&nbsp;
-          <ReferenceDistanceUnitDropdown
+          />
+          <span style={{ marginLeft: '8px', width: '100%' }}><ReferenceDistanceUnitDropdown
             disabled={this.props.referenceAxis == null}
             selectedUnit={this.props.referenceAxis == null ? ReferenceDistanceUnit.None : this.props.referenceDistanceUnit}
             onChange={(unit: ReferenceDistanceUnit) => {
               this.props.onReferenceDistanceUnitChange(unit)
             }}
-          />
+          /></span>
         </div>
       </div>
     )