瀏覽代碼

special margins for vector 3

Pamela Wolf 4 年之前
父節點
當前提交
a9f158d4be

+ 7 - 2
inspector/src/components/actionTabs/actionTabs.scss

@@ -977,8 +977,6 @@ $line-padding-left: 2px;
                     display: grid;
                     grid-template-rows: 100%;
                     grid-template-columns: 1fr 40px;
-            
-
 
                     .label {
                         grid-column: 1;
@@ -986,6 +984,13 @@ $line-padding-left: 2px;
                         align-items: center;
                     }
 
+                    .withMargins {
+                        grid-column: 1;
+                        display: flex;
+                        align-items: center;
+                        margin-left: 5px;
+                    }
+
                     .floatLine {
                         padding-left: $line-padding-left;
                 

+ 3 - 1
inspector/src/components/actionTabs/lines/sliderLineComponent.tsx

@@ -17,6 +17,7 @@ interface ISliderLineComponentProps {
     onInput?: (value: number) => void;    
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
     decimalCount?: number;
+    margin?: boolean;
 }
 
 export class SliderLineComponent extends React.Component<ISliderLineComponentProps, { value: number }> {
@@ -105,9 +106,10 @@ export class SliderLineComponent extends React.Component<ISliderLineComponentPro
     }
 
     render() {
+
         return (
             <div className="sliderLine">
-                <div className="label">
+                <div className={this.props.margin ? "withMargins" : "label"}>
                     {this.props.label}
                 </div>
                 <FloatLineComponent smallUI={true} label="" target={this.state} propertyName="value" min={this.prepareDataToRead(this.props.minimum)} max={this.prepareDataToRead(this.props.maximum)}

+ 3 - 3
inspector/src/components/actionTabs/lines/vector3LineComponent.tsx

@@ -134,9 +134,9 @@ export class Vector3LineComponent extends React.Component<IVector3LineComponentP
                 {
                     this.state.isExpanded && this.props.useEuler && !this.props.noSlider &&
                     <div className="secondLine">
-                        <SliderLineComponent label="x" minimum={0} maximum={360} step={0.1} directValue={Tools.ToDegrees(this.state.value.x)} onChange={value => this.updateStateX(Tools.ToRadians(value))} />
-                        <SliderLineComponent label="y" minimum={0} maximum={360} step={0.1} directValue={Tools.ToDegrees(this.state.value.y)} onChange={value => this.updateStateY(Tools.ToRadians(value))} />
-                        <SliderLineComponent label="z" minimum={0} maximum={360} step={0.1} directValue={Tools.ToDegrees(this.state.value.z)} onChange={value => this.updateStateZ(Tools.ToRadians(value))} />
+                        <SliderLineComponent  margin={true} label="x" minimum={0} maximum={360} step={0.1} directValue={Tools.ToDegrees(this.state.value.x)} onChange={value => this.updateStateX(Tools.ToRadians(value))} />
+                        <SliderLineComponent  margin={true} label="y" minimum={0} maximum={360} step={0.1} directValue={Tools.ToDegrees(this.state.value.y)} onChange={value => this.updateStateY(Tools.ToRadians(value))} />
+                        <SliderLineComponent  margin={true} label="z" minimum={0} maximum={360} step={0.1} directValue={Tools.ToDegrees(this.state.value.z)} onChange={value => this.updateStateZ(Tools.ToRadians(value))} />
                     </div>
                 }
                 {