Pārlūkot izejas kodu

Add color picker

nadaouf 4 gadi atpakaļ
vecāks
revīzija
83d552b9d3

+ 8 - 1
guiEditor/src/diagram/properties/buttonGuiPropertyComponent copy.tsx

@@ -9,6 +9,7 @@ import { ColorPickerLineComponent } from '../../sharedComponents/colorPickerComp
 import { TextLineComponent } from '../../sharedComponents/textLineComponent';
 import { TextLineComponent } from '../../sharedComponents/textLineComponent';
 import { TextInputLineComponent } from '../../sharedComponents/textInputLineComponent';
 import { TextInputLineComponent } from '../../sharedComponents/textInputLineComponent';
 import { NumericInputComponent } from '../../sharedComponents/numericInputComponent';
 import { NumericInputComponent } from '../../sharedComponents/numericInputComponent';
+import { SketchPicker } from 'react-color';
 
 
 export class ButtonPropertyTabComponent extends React.Component<IPropertyComponentProps> {
 export class ButtonPropertyTabComponent extends React.Component<IPropertyComponentProps> {
     constructor(props: IPropertyComponentProps) {
     constructor(props: IPropertyComponentProps) {
@@ -38,7 +39,13 @@ export class ButtonPropertyTabComponent extends React.Component<IPropertyCompone
                 onChange={evt =>{
                 onChange={evt =>{
                    this.button.heightInPixels = evt;
                    this.button.heightInPixels = evt;
                 }}>
                 }}>
-                </NumericInputComponent>
+                </NumericInputComponent>  
+                <TextLineComponent label="Background Color" value={this.button.background} />
+                <SketchPicker
+                    color={ this.button.background }
+                    onChangeComplete={evt =>{
+                        this.button.background = evt.hex;
+                }}/>
                 </LineContainerComponent>            
                 </LineContainerComponent>            
             </>
             </>
         );
         );