From 87b30c87873f255940e203edbd2029719c441284 Mon Sep 17 00:00:00 2001
From: Ser <Ser@ACROSS.com>
Date: Tue, 25 May 2021 15:58:09 -0400
Subject: [PATCH] Hide propierties for small screens

---
 .../components/result-panel/result-panel.tsx  | 221 ++++++++++--------
 .../settings-panel/settings-panel.tsx         |  26 ++-
 2 files changed, 153 insertions(+), 94 deletions(-)

diff --git a/src/gui/components/result-panel/result-panel.tsx b/src/gui/components/result-panel/result-panel.tsx
index e77a9c70..4fa07ae5 100644
--- a/src/gui/components/result-panel/result-panel.tsx
+++ b/src/gui/components/result-panel/result-panel.tsx
@@ -94,33 +94,37 @@ export default class ResultPanel extends React.PureComponent<ResultPanelProps> {
     return (
       <div>
         <div className='panel-section bottom-border'>
-          <div className='panel-group-title'>Image</div>
-          <TableRow
-            title={'Width'}
-            value={this.props.image.width}
-          />
-          <TableRow
-            isLastRow={true}
-            title={'Height'}
-            value={this.props.image.height}
-          />
+          <div className='panel-group-title'>Image<input type='button' value='Hidden' onClick={togle_hidden_Image}/></div>
+            <div id='Image'>
+              <TableRow
+              title={'Width'}
+              value={this.props.image.width}
+             />
+              <TableRow
+              isLastRow={true}
+              title={'Height'}
+              value={this.props.image.height}
+             />
+          </div>
         </div>
         {this.renderFieldOfViewSection()}
         <div className='panel-section bottom-border'>
-          <div className='panel-group-title'>Camera position</div>
-          <TableRow
-            title={'x'}
-            value={cameraParameters.cameraTransform.matrix[0][3]}
-          />
-          <TableRow
-            title={'y'}
-            value={cameraParameters.cameraTransform.matrix[1][3]}
-          />
-          <TableRow
-            isLastRow={true}
-            title={'z'}
-            value={cameraParameters.cameraTransform.matrix[2][3]}
-          />
+          <div className='panel-group-title'>Camera position<input type='button' value='Hidden' onClick={togle_hidden_CameraPosition}/></div>
+            <div id='CameraPosition'>
+            <TableRow
+              title={'x'}
+              value={cameraParameters.cameraTransform.matrix[0][3]}
+            />
+            <TableRow
+              title={'y'}
+              value={cameraParameters.cameraTransform.matrix[1][3]}
+            />
+            <TableRow
+              isLastRow={true}
+              title={'z'}
+              value={cameraParameters.cameraTransform.matrix[2][3]}
+            />
+          </div>
         </div>
         { this.renderOrientationSection() }
         { this.renderPrincipalPointSection() }
@@ -138,25 +142,27 @@ export default class ResultPanel extends React.PureComponent<ResultPanelProps> {
     const fovFactor = displayDegrees ? 180 / Math.PI : 1
     return (
       <div className='panel-section bottom-border'>
-        <div className='panel-group-title'>Field of view</div>
-        <Dropdown
-          options={[
-            { id: FieldOfViewFormat.Degrees, title: 'Degrees', value: FieldOfViewFormat.Degrees },
-            { id: FieldOfViewFormat.Radians, title: 'Radians', value: FieldOfViewFormat.Radians }
-          ]}
-          selectedOptionId={this.props.resultDisplaySettings.fieldOfViewFormat}
-          onOptionSelected={this.props.onFieldOfViewDisplayFormatChanged}
-        />
-        <TableRow
-          isFirstRow={true}
-          title={'Horizontal'}
-          value={fovFactor * this.props.solverResult.cameraParameters.horizontalFieldOfView}
-        />
-        <TableRow
-          isLastRow={true}
-          title={'Vertical'}
-          value={fovFactor * this.props.solverResult.cameraParameters.verticalFieldOfView }
-        />
+        <div className='panel-group-title'>Field of view<input type='button' value='Hidden' onClick={togle_hidden_FieldOfView}/></div>
+          <div id='FieldOfView'>
+            <Dropdown
+            options={[
+              { id: FieldOfViewFormat.Degrees, title: 'Degrees', value: FieldOfViewFormat.Degrees },
+              { id: FieldOfViewFormat.Radians, title: 'Radians', value: FieldOfViewFormat.Radians }
+            ]}
+            selectedOptionId={this.props.resultDisplaySettings.fieldOfViewFormat}
+            onOptionSelected={this.props.onFieldOfViewDisplayFormatChanged}
+          />
+          <TableRow
+            isFirstRow={true}
+            title={'Horizontal'}
+            value={fovFactor * this.props.solverResult.cameraParameters.horizontalFieldOfView}
+          />
+          <TableRow
+            isLastRow={true}
+            title={'Vertical'}
+            value={fovFactor * this.props.solverResult.cameraParameters.verticalFieldOfView }
+          />
+        </div>
       </div>
     )
   }
@@ -175,35 +181,37 @@ export default class ResultPanel extends React.PureComponent<ResultPanelProps> {
 
     return (
       <div className='panel-section bottom-border'>
-          <div className='panel-group-title'>Camera orientation</div>
-          <Dropdown
-            options={[
-              { id: OrientationFormat.AxisAngleDegrees, title: 'Axis angle (degrees)', value: OrientationFormat.AxisAngleDegrees },
-              { id: OrientationFormat.AxisAngleRadians, title: 'Axis angle (radians)', value: OrientationFormat.AxisAngleRadians },
-              { id: OrientationFormat.Quaterion, title: 'Quaternion', value: OrientationFormat.Quaterion }
-            ]}
-            selectedOptionId={this.props.resultDisplaySettings.orientationFormat}
-            onOptionSelected={this.props.onOrientationDisplayFormatChanged}
-          />
-          <TableRow
-            isFirstRow={true}
-            title={'x'}
-            value={components[0]}
-          />
-          <TableRow
-            title={'y'}
-            value={components[1]}
-          />
-          <TableRow
-            title={'z'}
-            value={components[2]}
-          />
-          <TableRow
-            isLastRow={true}
-            title={displayAxisAngle ? 'Angle' : 'w'}
-            value={components[3]}
-          />
-        </div>
+          <div className='panel-group-title'>Camera orientation<input type='button' value='Hidden' onClick={togle_hidden_CameraOrientation}/></div>
+            <div id='CameraOrientation'>
+              <Dropdown
+                options={[
+                  { id: OrientationFormat.AxisAngleDegrees, title: 'Axis angle (degrees)', value: OrientationFormat.AxisAngleDegrees },
+                  { id: OrientationFormat.AxisAngleRadians, title: 'Axis angle (radians)', value: OrientationFormat.AxisAngleRadians },
+                  { id: OrientationFormat.Quaterion, title: 'Quaternion', value: OrientationFormat.Quaterion }
+                ]}
+                selectedOptionId={this.props.resultDisplaySettings.orientationFormat}
+                onOptionSelected={this.props.onOrientationDisplayFormatChanged}
+              />
+              <TableRow
+                isFirstRow={true}
+                title={'x'}
+                value={components[0]}
+              />
+              <TableRow
+                title={'y'}
+                value={components[1]}
+              />
+              <TableRow
+                title={'z'}
+                value={components[2]}
+              />
+              <TableRow
+                isLastRow={true}
+                title={displayAxisAngle ? 'Angle' : 'w'}
+                value={components[3]}
+              />
+            </div>
+          </div>
     )
   }
 
@@ -236,25 +244,27 @@ export default class ResultPanel extends React.PureComponent<ResultPanelProps> {
 
     return (
       <div className='panel-section bottom-border'>
-          <div className='panel-group-title'>Principal point</div>
-          <Dropdown
-            options={[
-              { id: PrincipalPointFormat.Absolute, title: 'Absolute', value: PrincipalPointFormat.Absolute },
-              { id: PrincipalPointFormat.Relative, title: 'Relative', value: PrincipalPointFormat.Relative }
-            ]}
-            selectedOptionId={this.props.resultDisplaySettings.principalPointFormat}
-            onOptionSelected={this.props.onPrincipalPointDisplayFormatChanged}
-          />
-          <TableRow
-            isFirstRow={true}
-            title={'x'}
-            value={displayPosition.x}
-          />
-          <TableRow
-            isLastRow={true}
-            title={'y'}
-            value={displayPosition.y}
-          />
+          <div className='panel-group-title'>Principal point<input type='button' value='Hidden' onClick={togle_hidden_PrincipalPoint}/></div>
+            <div id='PrincipalPoint'>
+            <Dropdown
+              options={[
+                { id: PrincipalPointFormat.Absolute, title: 'Absolute', value: PrincipalPointFormat.Absolute },
+                { id: PrincipalPointFormat.Relative, title: 'Relative', value: PrincipalPointFormat.Relative }
+              ]}
+              selectedOptionId={this.props.resultDisplaySettings.principalPointFormat}
+              onOptionSelected={this.props.onPrincipalPointDisplayFormatChanged}
+            />
+            <TableRow
+              isFirstRow={true}
+              title={'x'}
+              value={displayPosition.x}
+            />
+            <TableRow
+              isLastRow={true}
+              title={'y'}
+              value={displayPosition.y}
+            />
+           </div>
         </div>
     )
   }
@@ -344,3 +354,32 @@ export default class ResultPanel extends React.PureComponent<ResultPanelProps> {
     )
   }
 }
+
+function togle_hidden_PrincipalPoint() {
+  togle_hidden('PrincipalPoint')
+}
+
+function togle_hidden_Image() {
+  togle_hidden('Image')
+}
+
+function togle_hidden_FieldOfView() {
+  togle_hidden('FieldOfView')
+}
+
+function togle_hidden_CameraOrientation() {
+  togle_hidden('CameraOrientation')
+}
+
+function togle_hidden_CameraPosition() {
+  togle_hidden('CameraPosition')
+}
+
+function togle_hidden(elementId: string) {
+  let resp = document.getElementById(elementId)!.getAttribute('hidden')!
+  if (resp == '') {
+    document.getElementById(elementId)!.removeAttribute('hidden')
+  } else {
+    document.getElementById(elementId)!.setAttribute('hidden','')
+  }
+}
diff --git a/src/gui/components/settings-panel/settings-panel.tsx b/src/gui/components/settings-panel/settings-panel.tsx
index 8a132a9c..f3a2e966 100644
--- a/src/gui/components/settings-panel/settings-panel.tsx
+++ b/src/gui/components/settings-panel/settings-panel.tsx
@@ -38,7 +38,8 @@ export default class SettingsPanel extends React.PureComponent<SettingsContainer
         <div id='panel-container'>
           <div>
             <div className='panel-section bottom-border'>
-              <div className='panel-group-title'>Number of vanishing points</div>
+              <div className='panel-group-title'>Number of vanishing points<input type='button' value='Hidden' onClick={togle_hidden_NumberOfVanishingPoints}/></div>
+              <div id='NumberOfVanishingPoints'>
               <Dropdown
                 options={[
                   {
@@ -57,12 +58,13 @@ export default class SettingsPanel extends React.PureComponent<SettingsContainer
                   this.props.onCalibrationModeChange(selectedValue)
                 }}
               />
+              </div>
             </div>
             <div className='panel-section'>
               <div className='panel-group-title'>
-                Vanishing point axes
+                Vanishing point axes<input type='button' value='Hidden' onClick={togle_hidden_VanishingPointAxes}/>
               </div>
-
+              <div id='VanishingPointAxes'>
               <div style={{ display: 'flex' }}>
                 <span style={{ alignSelf: 'center', paddingRight: 6, paddingLeft: 4 }}>1</span><AxisDropdown
                   selectedAxis={this.props.calibrationSettingsBase.firstVanishingPointAxis}
@@ -76,6 +78,7 @@ export default class SettingsPanel extends React.PureComponent<SettingsContainer
                   onChange={this.props.onSecondVanishingPointAxisChange}
                 />
               </div>
+              </div>
             </div>
             <div className='panel-section'>
               <div className='panel-group-title'>
@@ -244,3 +247,20 @@ export default class SettingsPanel extends React.PureComponent<SettingsContainer
     )
   }
 }
+
+function togle_hidden_VanishingPointAxes() {
+  togle_hidden('VanishingPointAxes')
+}
+
+function togle_hidden_NumberOfVanishingPoints() {
+  togle_hidden('NumberOfVanishingPoints')
+}
+
+function togle_hidden(elementId: string) {
+  let resp = document.getElementById(elementId)!.getAttribute('hidden')!
+  if (resp == '') {
+    document.getElementById(elementId)!.removeAttribute('hidden')
+  } else {
+    document.getElementById(elementId)!.setAttribute('hidden','')
+  }
+}