fix(ui): mouse over FloatInput/IntInput->drag zone should show move c…

…ursor
Wonder-Technology · May 29, 2019 · b0c4b57 · b0c4b57
1 parent a085859
commit b0c4b57
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 9 deletions.
diff --git a/public/css/index.css b/public/css/index.css
@@ -1421,7 +1421,10 @@ html, body {
           .wonder-app-component .wonder-mainEditor-component .right-component .inspector-parent::-webkit-scrollbar-thumb:hover {
             background: #fc7100; }
         .wonder-app-component .wonder-mainEditor-component .right-component .inspector-parent .wonder-inspector-component .wonder-float-input .component-label {
-          cursor: move;
+          cursor: move !important;
+          user-select: none; }
+        .wonder-app-component .wonder-mainEditor-component .right-component .inspector-parent .wonder-inspector-component .wonder-int-input .component-label {
+          cursor: move !important;
           user-select: none; }
         .wonder-app-component .wonder-mainEditor-component .right-component .inspector-parent .wonder-inspector-component .wonder-three-float-input {
           display: flex;

diff --git a/public/sass/components/mainEditor/component/component/inspector/_inspector.scss b/public/sass/components/mainEditor/component/component/inspector/_inspector.scss
@@ -1,6 +1,7 @@
 @import "../../../../../utils/inspectorItemMixin";
 .wonder-inspector-component {
     @import "../../../../ui/floatInput";
+    @import "../../../../ui/intInput";
     @import "../../../../ui/threeFloatInput";
     .wonder-inspector-sceneTree {
         padding-top: 5px;

diff --git a/public/sass/components/ui/_floatInput.scss b/public/sass/components/ui/_floatInput.scss
@@ -1,6 +1,6 @@
 .wonder-float-input {
     .component-label {
-        cursor: move;
+        cursor: move !important;
         user-select: none;
     }
 }
diff --git a/public/sass/components/ui/_intInput.scss b/public/sass/components/ui/_intInput.scss
@@ -0,0 +1,6 @@
+.wonder-int-input {
+    .component-label {
+        cursor: move !important;
+        user-select: none;
+    }
+}
diff --git a/src/core/atom_component/floatInput/FloatInput.re b/src/core/atom_component/floatInput/FloatInput.re
@@ -172,7 +172,9 @@ module Method = {
               computeNewValue(
                 state.inputValue |> OptionService.unsafeGet |> float_of_string,
                 state.canBeZero,
-                MouseEventService.getMovementDeltaWhenPointerLockedAndFixBug(e)|> WonderLog.Log.print,
+                MouseEventService.getMovementDeltaWhenPointerLockedAndFixBug(
+                  e,
+                ),
               )
               |> string_of_float,
             ),

diff --git a/src/core/atom_component/intInput/IntInput.re b/src/core/atom_component/intInput/IntInput.re
@@ -47,9 +47,7 @@ module Method = {
         },
       );
     | Some(value) =>
-      ReasonReactUtils.sideEffects(_state =>
-        triggerOnBlur(value, onBlurFunc)
-      );
+      ReasonReactUtils.sideEffects(_state => triggerOnBlur(value, onBlurFunc))
     };
 
   let computeNewValue = (currentValue, (movementX, movementY)) => {
@@ -89,7 +87,9 @@ module Method = {
             Some(
               computeNewValue(
                 state.inputValue |> OptionService.unsafeGet |> int_of_string,
-                MouseEventService.getMovementDeltaWhenPointerLockedAndFixBug(e),
+                MouseEventService.getMovementDeltaWhenPointerLockedAndFixBug(
+                  e,
+                ),
               )
               |> string_of_int,
             ),
@@ -123,7 +123,7 @@ module Method = {
   let renderContent = ((send, state)) =>
     <div className="item-content">
       <input
-        className="input-component float-input"
+        className="input-component int-input"
         type_="text"
         value={
           switch (state.inputValue) {
@@ -159,7 +159,7 @@ let render =
       (onBlurFunc, onDragDropFunc),
       {state, handle, send}: ReasonReact.self('a, 'b, 'c),
     ) =>
-  <article className="inspector-item wonder-float-input">
+  <article className="inspector-item wonder-int-input">
     {Method.renderLabel((send, state), label, title, onDragDropFunc)}
     {Method.renderContent((send, state))}
   </article>;