Merge pull request #7 from lastcode802/fix/fixed_action_button_style_…

…issue_in_view fixed action button style issue
lastcode802 · Nov 7, 2022 · 55b1297 · 55b1297
2 parents a18f555 + c3e7c5c
commit 55b1297
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 36 deletions.
diff --git a/src/components/GlassArView/index.css b/src/components/GlassArView/index.css
@@ -84,10 +84,17 @@
   .JeelizVTOWidgetControls {
     /* position: absolute; */
     z-index: 2;
-    width: 100%;
+    /* width: 100%; */
+    margin-left: 10px;
   }
   .JeelizVTOWidgetButtonContainer {
     display: flex;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+  }
+  .JeelizVTOWidgetContainer {
+    width: 1000px;
   }
   .buttonIcon {
     display: inline-block;

diff --git a/src/components/GlassArView/index.tsx b/src/components/GlassArView/index.tsx
@@ -114,45 +114,47 @@ export function GlassArView(this: any, props: GlassArViewProps) {
   } = props;
 
   return (
-    <div ref={refPlaceHolder} className='JeelizVTOWidget' style={{ height: isheight, width: iswidth }}>
-      <canvas ref={refCanvas} className='JeelizVTOWidgetCanvas'></canvas>
-      <div className='JeelizVTOWidgetButtonContainer'>
-        {
-          adjustMode && (
-            <div className='JeelizVTOWidgetAdjustNoticeContainer' >
-              <div className='JeelizVTOWidgetAdjustNotice'>
-                Move the glasses to adjust them.
+    <div className='JeelizVTOWidgetContainer' >
+      <div ref={refPlaceHolder} className='JeelizVTOWidget' style={{ height: isheight, width: iswidth }}>
+        <canvas ref={refCanvas} className='JeelizVTOWidgetCanvas'></canvas>
+        <div className='JeelizVTOWidgetButtonContainer'>
+          {
+            adjustMode && (
+              <div className='JeelizVTOWidgetAdjustNoticeContainer' >
+                <div className='JeelizVTOWidgetAdjustNotice'>
+                  Move the glasses to adjust them.
+                </div>
+                <div className='JeelizVTOWidgetControls'>
+                  <ControlButton color={buttonFontColor} backgroundColor={buttonBackgroundColor} onClick={ExitadjustMode}>
+                    Quit
+                  </ControlButton>
+                </div>
               </div>
-              <div className='JeelizVTOWidgetControls'>
-                <ControlButton color={buttonFontColor} backgroundColor={buttonBackgroundColor} onClick={ExitadjustMode}>
-                  Quit
-                </ControlButton>
-              </div>
-            </div>
-          )
-        }
-        {
-          !adjustMode && (
-            <>
-            <div className='JeelizVTOWidgetControls'>
-              <ControlButton color={buttonFontColor} backgroundColor={buttonBackgroundColor} onClick={StartadjustMode}>
-                Adjust
-              </ControlButton>
-            </div>
-             <div className='JeelizVTOWidgetControls JeelizVTOWidgetChangeModelContainer'>
-             <ControlButton color={buttonFontColor} backgroundColor={buttonBackgroundColor} onClick={SetglassesModel.bind(this, ismodalName)}>Model </ControlButton>
-           </div>
-            </>
-          )
-        }
-      </div>
+            )
+          }
+          {
+            !adjustMode && (
+              <>
+                <div className='JeelizVTOWidgetControls'>
+                  <ControlButton color={buttonFontColor} backgroundColor={buttonBackgroundColor} onClick={StartadjustMode}>
+                    Adjust
+                  </ControlButton>
+                </div>
+                <div className='JeelizVTOWidgetControls JeelizVTOWidgetChangeModelContainer'>
+                  <ControlButton color={buttonFontColor} backgroundColor={buttonBackgroundColor} onClick={SetglassesModel.bind(this, ismodalName)}>Model </ControlButton>
+                </div>
+              </>
+            )
+          }
+        </div>
 
-      <div ref={refLoading} className='JeelizVTOWidgetLoading'>
-        <div className='JeelizVTOWidgetLoadingText'>
-          LOADING...
+        <div ref={refLoading} className='JeelizVTOWidgetLoading'>
+          <div className='JeelizVTOWidgetLoadingText'>
+            LOADING...
+          </div>
         </div>
-      </div>
 
+      </div>
     </div>
   )
 }