Fix: Increase controls timeout and fix controls behavior for mobile VR (

#235)
box · Jul 24, 2017 · 1df8b55 · 1df8b55
1 parent ed3b5cb
commit 1df8b55
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 15 deletions.
diff --git a/src/lib/Controls.js b/src/lib/Controls.js
@@ -6,7 +6,7 @@ const SHOW_PREVIEW_CONTROLS_CLASS = 'box-show-preview-controls';
 const CONTROLS_BUTTON_CLASS = 'bp-controls-btn';
 const CONTROLS_PAGE_NUM_INPUT_CLASS = 'bp-doc-page-num-input';
 const CONTROLS_PAGE_NUM_WRAPPER_CLASS = 'bp-doc-page-num-wrapper';
-const CONTROLS_AUTO_HIDE_TIMEOUT_IN_MILLIS = 1500;
+const CONTROLS_AUTO_HIDE_TIMEOUT_IN_MILLIS = 2000;
 
 class Controls {
     /** @property {HTMLElement} - Controls container element */

diff --git a/src/lib/__tests__/Controls-test.js b/src/lib/__tests__/Controls-test.js
@@ -8,6 +8,7 @@ let clock;
 const sandbox = sinon.sandbox.create();
 
 const SHOW_PREVIEW_CONTROLS_CLASS = 'box-show-preview-controls';
+const RESET_TIMEOUT_CLOCK_TICK = 2001;
 
 describe('lib/Controls', () => {
     before(() => {
@@ -110,7 +111,7 @@ describe('lib/Controls', () => {
             const clearTimeoutStub = sandbox.stub(window, 'clearTimeout');
 
             controls.resetTimeout();
-            clock.tick(1501);
+            clock.tick(RESET_TIMEOUT_CLOCK_TICK);
 
             expect(clearTimeoutStub).to.be.calledTwice;
         });
@@ -120,7 +121,7 @@ describe('lib/Controls', () => {
             controls.resetTimeout();
 
             const resetTimeoutStub = sandbox.stub(controls, 'resetTimeout');
-            clock.tick(1501);
+            clock.tick(RESET_TIMEOUT_CLOCK_TICK);
 
             expect(resetTimeoutStub).to.be.called;
         });
@@ -131,7 +132,7 @@ describe('lib/Controls', () => {
             controls.resetTimeout();
 
             const resetTimeoutStub = sandbox.stub(controls, 'resetTimeout');
-            clock.tick(1501);
+            clock.tick(RESET_TIMEOUT_CLOCK_TICK);
 
             expect(isPageNumFocusedStub).to.be.called;
             expect(resetTimeoutStub).to.be.called;
@@ -142,7 +143,7 @@ describe('lib/Controls', () => {
             controls.containerEl.className = SHOW_PREVIEW_CONTROLS_CLASS;
 
             controls.resetTimeout();
-            clock.tick(1501);
+            clock.tick(RESET_TIMEOUT_CLOCK_TICK);
 
             expect(controls.containerEl.classList.contains(SHOW_PREVIEW_CONTROLS_CLASS)).to.be.true;
         });
@@ -152,7 +153,7 @@ describe('lib/Controls', () => {
             controls.containerEl.className = SHOW_PREVIEW_CONTROLS_CLASS;
 
             controls.resetTimeout();
-            clock.tick(1501);
+            clock.tick(RESET_TIMEOUT_CLOCK_TICK);
 
             expect(controls.containerEl.classList.contains(SHOW_PREVIEW_CONTROLS_CLASS)).to.be.false;
         });
@@ -163,7 +164,7 @@ describe('lib/Controls', () => {
             const blurStub = sandbox.stub(document.activeElement, 'blur');
 
             controls.resetTimeout();
-            clock.tick(1501);
+            clock.tick(RESET_TIMEOUT_CLOCK_TICK);
 
             expect(containsStub).to.be.called;
             expect(blurStub).to.be.called;

diff --git a/src/lib/viewers/box3d/Box3D.scss b/src/lib/viewers/box3d/Box3D.scss
@@ -1,3 +1,12 @@
+.bp-is-mobile {
+    .bp-box3d .bp-controls {
+        /* stylelint-disable declaration-no-important */
+        opacity: 1 !important;
+        /* stylelint-enable declaration-no-important */
+        z-index: 1;
+    }
+}
+
 .bp-box3d {
     border: 0 none;
     display: flex;
@@ -70,11 +79,3 @@
 .bp-box3d input[type="checkbox"] {
     opacity: 1;
 }
-
-.bp-is-mobile {
-    .bp-box3d .bp-controls {
-        /* stylelint-disable declaration-no-important */
-        opacity: 1 !important;
-        /* stylelint-enable declaration-no-important */
-    }
-}