feat(language): add asset and inspector language

Wonder-Technology · Mar 15, 2019 · 9ef009d · 9ef009d
1 parent 2f49251
commit 9ef009d
Show file tree

Hide file tree

Showing 28 changed files with 947 additions and 207 deletions.
diff --git a/public/css/index.css b/public/css/index.css
diff --git a/...c/sass/components/mainEditor/component/component/inspector/utils/_inspectorComponent.scss b/...c/sass/components/mainEditor/component/component/inspector/utils/_inspectorComponent.scss
@@ -4,6 +4,10 @@
     .component-title{
         font-size:14px;
         margin-left:5%;
+        &:hover{
+            color: #00c1de;
+            cursor: pointer;
+        } 
     }
     hr{
         border: 0;

diff --git a/...omponents/mainEditor/component/component/inspector/utils/_inspectorComponentChildren.scss b/...omponents/mainEditor/component/component/inspector/utils/_inspectorComponentChildren.scss
@@ -2,6 +2,10 @@
     .item-header{
         margin-left:5px;
         width:40%;
+        &:hover{
+            color: #00c1de;
+            cursor: pointer;
+        }
     }
     .item-content{
         width:60%;

diff --git a/public/sass/components/ui/_componentBox.scss b/public/sass/components/ui/_componentBox.scss
@@ -39,6 +39,10 @@
             height:30px;
             line-height: 30px;
             font-size:15px;
+            &:hover{
+                color: #00c1de;
+                cursor: pointer;
+            }
         }
         .header-close{
             flex:initial;

diff --git a/public/sass/utils/_inspectorItemMixin.scss b/public/sass/utils/_inspectorItemMixin.scss
@@ -16,6 +16,10 @@
                 display: flex;
                 align-items: center;
                 margin-left:15px;
+                &:hover{
+                    color: #00c1de;
+                    cursor: pointer;
+                } 
             }
             .item-content{
                 flex:initial;

diff --git a/src/core/atom_component/floatInput/FloatInput.re b/src/core/atom_component/floatInput/FloatInput.re
@@ -13,9 +13,8 @@ type action =
 
 module Method = {
   let _change = event => {
-    let inputVal = ReactDOMRe.domElementToObj(
-                     ReactEventRe.Form.target(event),
-                   )##value;
+    let inputVal =
+      ReactDOMRe.domElementToObj(ReactEventRe.Form.target(event))##value;
 
     switch (inputVal) {
     | "" => Change(Some(""))
@@ -208,7 +207,7 @@ module Method = {
       } :
       ();
 
-  let renderLabel = ((send, state), label, onDragDropFunc) =>
+  let renderLabel = ((send, state), label, title, onDragDropFunc) =>
     switch (label) {
     | None => ReasonReact.null
     | Some(label) =>
@@ -218,8 +217,14 @@ module Method = {
         onMouseMove=(event => handleDragOver(event, (send, state)))
         onMouseUp=(
           event => handleDragDrop(event, (send, state), onDragDropFunc)
-        )>
-        (DomHelper.textEl(label))
+        )
+        title={
+          switch (title) {
+          | None => ""
+          | Some(title) => title
+          }
+        }>
+        {DomHelper.textEl(label)}
       </div>
     };
 
@@ -228,14 +233,14 @@ module Method = {
       <input
         className="input-component float-input"
         type_="text"
-        value=(
+        value={
           switch (state.inputValue) {
           | None => ""
           | Some(value) => value
           }
-        )
-        onChange=(_e => send(_change(_e)))
-        onBlur=(_e => send(Blur))
+        }
+        onChange={_e => send(_change(_e))}
+        onBlur={_e => send(Blur)}
       />
     </div>;
 };
@@ -255,12 +260,13 @@ let reducer = ((onChangeFunc, onBlurFunc), canBeZero, action, state) =>
 let render =
     (
       label,
+      title,
       (onBlurFunc, onDragDropFunc),
       {state, handle, send}: ReasonReact.self('a, 'b, 'c),
     ) =>
   <article className="inspector-item wonder-float-input">
-    (Method.renderLabel((send, state), label, onDragDropFunc))
-    (Method.renderContent((send, state)))
+    {Method.renderLabel((send, state), label, title, onDragDropFunc)}
+    {Method.renderContent((send, state))}
   </article>;
 
 let make =
@@ -271,6 +277,7 @@ let make =
       ~label: option(string)=?,
       ~onChange: option(float => unit)=?,
       ~onBlur: option(float => unit)=?,
+      ~title: option(string)=?,
       _children,
     ) => {
   ...component,
@@ -290,5 +297,5 @@ let make =
       }
     },
   reducer: reducer((onChange, onBlur), canBeZero),
-  render: self => render(label, (onBlur, onDragDrop), self),
+  render: self => render(label, title, (onBlur, onDragDrop), self),
 };
diff --git a/src/core/atom_component/floatInput/ThreeFloatInput.re b/src/core/atom_component/floatInput/ThreeFloatInput.re
@@ -80,35 +80,44 @@ let reducer =
 let render =
     (
       (uiState, dispatchFunc),
-      (gameObjectComponent, label, canBeZero),
+      (gameObjectComponent, label, canBeZero, title),
       (changeXFunc, changeYFunc, changeZFunc),
       {state, send}: ReasonReact.self('a, 'b, 'c),
     ) =>
   <article className="inspector-item wonder-three-float-input">
-    <div className="item-header"> (DomHelper.textEl(label)) </div>
+    <div
+      className="item-header"
+      title={
+        switch (title) {
+        | None => ""
+        | Some(title) => title
+        }
+      }>
+      {DomHelper.textEl(label)}
+    </div>
     <div className="item-content">
       <FloatInput
         label="X"
-        defaultValue=(state.x |> StringService.floatToString)
-        onChange=(changeXFunc(gameObjectComponent))
-        onBlur=(value => send(BlurX(value)))
-        onDragDrop=(value => send(DragDropX(value)))
+        defaultValue={state.x |> StringService.floatToString}
+        onChange={changeXFunc(gameObjectComponent)}
+        onBlur={value => send(BlurX(value))}
+        onDragDrop={value => send(DragDropX(value))}
         canBeZero
       />
       <FloatInput
         label="Y"
-        defaultValue=(state.y |> StringService.floatToString)
-        onChange=(changeYFunc(gameObjectComponent))
-        onBlur=(value => send(BlurY(value)))
-        onDragDrop=(value => send(DragDropY(value)))
+        defaultValue={state.y |> StringService.floatToString}
+        onChange={changeYFunc(gameObjectComponent)}
+        onBlur={value => send(BlurY(value))}
+        onDragDrop={value => send(DragDropY(value))}
         canBeZero
       />
       <FloatInput
         label="Z"
-        defaultValue=(state.z |> StringService.floatToString)
-        onChange=(changeZFunc(gameObjectComponent))
-        onBlur=(value => send(BlurZ(value)))
-        onDragDrop=(value => send(DragDropZ(value)))
+        defaultValue={state.z |> StringService.floatToString}
+        onChange={changeZFunc(gameObjectComponent)}
+        onBlur={value => send(BlurZ(value))}
+        onDragDrop={value => send(DragDropZ(value))}
         canBeZero
       />
     </div>
@@ -127,6 +136,7 @@ let make =
       ~blurEventFunc,
       ~dragDropFunc,
       ~canBeZero,
+      ~title: option(string)=?,
       _children,
     ) => {
   ...component,
@@ -145,7 +155,7 @@ let make =
   render: self =>
     render(
       (uiState, dispatchFunc),
-      (gameObjectComponent, label, canBeZero),
+      (gameObjectComponent, label, canBeZero, title),
       (changeXFunc, changeYFunc, changeZFunc),
       self,
     ),

diff --git a/src/core/atom_component/select/Select.re b/src/core/atom_component/select/Select.re
@@ -16,8 +16,8 @@ module Method = {
   let renderContent = (options, state) =>
     options
     |> Js.Array.map(({key, value}) =>
-         <option key=value value=(key |> string_of_int)>
-           (DomHelper.textEl(value))
+         <option key=value value={key |> string_of_int}>
+           {DomHelper.textEl(value)}
          </option>
        );
 };
@@ -35,22 +35,30 @@ let reducer = (onChange, action) =>
     )
   };
 
-let render = (label, options, {state, send}: ReasonReact.self('a, 'b, 'c)) =>
+let render =
+    (label, options, title, {state, send}: ReasonReact.self('a, 'b, 'c)) =>
   <article key="Select" className="inspector-item">
-    (
+    {
       switch (label) {
       | None => ReasonReact.null
       | Some(label) =>
-        <div className="item-header">
-          <span className=""> (DomHelper.textEl(label)) </span>
+        <div
+          className="item-header"
+          title={
+            switch (title) {
+            | None => ""
+            | Some(title) => title
+            }
+          }>
+          <span className=""> {DomHelper.textEl(label)} </span>
         </div>
       }
-    )
+    }
     <div className="item-content">
       <select
-        onChange=(e => send(Method.change(e)))
-        value=(state.selectedKey |> string_of_int)>
-        (ReasonReact.array(Method.renderContent(options, state)))
+        onChange={e => send(Method.change(e))}
+        value={state.selectedKey |> string_of_int}>
+        {ReasonReact.array(Method.renderContent(options, state))}
       </select>
     </div>
   </article>;
@@ -61,10 +69,11 @@ let make =
       ~options: array(optionItem),
       ~selectedKey: int,
       ~onChange: int => unit,
+      ~title: option(string)=?,
       _children,
     ) => {
   ...component,
   initialState: () => {selectedKey: selectedKey},
   reducer: reducer(onChange),
-  render: self => render(label, options, self),
+  render: self => render(label, options, title, self),
 };
diff --git a/src/core/atom_component/stringInput/StringInput.re b/src/core/atom_component/stringInput/StringInput.re
@@ -64,13 +64,20 @@ let reducer = ((onChangeFunc, onBlurFunc), canBeNull, action, state) =>
   | Blur => Method.handleBlurAction(state, canBeNull, onBlurFunc)
   };
 
-let render = (label, {state, send}: ReasonReact.self('a, 'b, 'c)) =>
+let render = (label, title, {state, send}: ReasonReact.self('a, 'b, 'c)) =>
   <article className="inspector-item">
     {
       switch (label) {
       | None => ReasonReact.null
       | Some(value) =>
-        <div className="item-header">
+        <div
+          className="item-header"
+          title={
+            switch (title) {
+            | None => ""
+            | Some(title) => title
+            }
+          }>
           <span className="component-label"> {DomHelper.textEl(value)} </span>
         </div>
       }
@@ -90,6 +97,7 @@ let make =
     (
       ~defaultValue: option(string)=?,
       ~label: option(string)=?,
+      ~title: option(string)=?,
       ~onChange: option(string => unit)=?,
       ~onBlur: option(string => unit)=?,
       ~canBeNull: option(bool)=?,
@@ -102,5 +110,5 @@ let make =
     | Some(value) => {inputValue: value, originalName: value}
     },
   reducer: reducer((onChange, onBlur), canBeNull),
-  render: self => render(label, self),
+  render: self => render(label, title, self),
 };
diff --git a/...roject/composable_component/asset/composable_component/header/ui/MainEditorAssetHeader.re b/...roject/composable_component/asset/composable_component/header/ui/MainEditorAssetHeader.re
@@ -45,28 +45,22 @@ let _renderSelectNav =
     <div
       className="content-section"
       onClick={_e => Method.addMaterial((uiState, dispatchFunc), (), ())}>
-      <div className="section-header">
-        {
-          DomHelper.textEl(
-            LanguageUtils.getAssetLanguageDataByType(
-              "asset-material",
-              languageType,
-            ),
-          )
-        }
-      </div>
+      <div className="section-header"> {DomHelper.textEl("Material")} </div>
     </div>
   </div>;
 
 let _renderRemoveItem =
     (
       uiState: AppStore.appState,
       dispatchFunc,
+      languageType,
       {state, send}: ReasonReact.self('a, 'b, 'c),
     ) =>
   <div
     className="asset-header-item"
-    title="remove asset"
+    title={
+      LanguageUtils.getAssetLanguageDataByType("asset-remove", languageType)
+    }
     onClick={
       _e =>
         CurrentNodeIdAssetEditorService.couldRemoveCurrentNode
@@ -96,7 +90,9 @@ let render =
   <article key="assetHeader" className="wonder-asset-header">
     <div
       className="asset-header-item"
-      title="add asset"
+      title={
+        LanguageUtils.getAssetLanguageDataByType("asset-add", languageType)
+      }
       onClick={_e => send(ToggleShowNav)}>
       <div className="item-canBeClick">
         <img src="./public/img/add.png" />
@@ -107,9 +103,16 @@ let render =
           ReasonReact.null
       }
     </div>
-    {_renderRemoveItem(uiState, dispatchFunc, self)}
+    {_renderRemoveItem(uiState, dispatchFunc, languageType, self)}
     <div className="asset-header-item">
-      <div className="item-canBeClick" title="load asset">
+      <div
+        className="item-canBeClick"
+        title={
+          LanguageUtils.getAssetLanguageDataByType(
+            "asset-load",
+            languageType,
+          )
+        }>
         <img src="./public/img/load.png" />
         <input
           className="asset-fileLoad"

diff --git a/...composable_component/inspector/atom_component/PickColorComponent/ui/PickColorComponent.re b/...composable_component/inspector/atom_component/PickColorComponent/ui/PickColorComponent.re
@@ -45,14 +45,14 @@ let render =
       ({state, send}: ReasonReact.self('a, 'b, 'c)) as self,
     ) =>
   <article className="inspector-item">
-    <div className="item-header"> {DomHelper.textEl(label)} </div>
+    <div className="item-header" title> {DomHelper.textEl(label)} </div>
     <div className="item-content item-color">
       <div
         className="color-hex"
         style={ReactDOMRe.Style.make(~background=state.colorHex, ())}
         onClick={_e => send(ShowColorPick)}
       />
-      <div title className="color-select" onClick={_e => send(ShowColorPick)}>
+      <div className="color-select" onClick={_e => send(ShowColorPick)}>
         <img src="./public/img/color.png" />
       </div>
     </div>