Atul R
5 years ago
parent
0b214b3019
commit
817690deb3
@ -1,65 +1,42 @@ |
||||
import { |
||||
View, |
||||
Text, |
||||
Window, |
||||
Image, |
||||
ScrollArea, |
||||
hot |
||||
} from "@nodegui/react-nodegui"; |
||||
import path from "path"; |
||||
import { Text, Window, hot, View } from "@nodegui/react-nodegui"; |
||||
import React from "react"; |
||||
import { AspectRatioMode } from "@nodegui/nodegui"; |
||||
import { MyText } from "./components/mytext"; |
||||
import imageUrl from "../assets/nodegui.jpg"; |
||||
import { StepOne } from "./components/stepone"; |
||||
import { StepTwo } from "./components/steptwo"; |
||||
|
||||
const distImgUrl = path.resolve(__dirname, imageUrl); |
||||
const minSize = { width: 500, height: 400 }; |
||||
const minSize = { width: 500, height: 500 }; |
||||
|
||||
class App extends React.Component { |
||||
render() { |
||||
return ( |
||||
<> |
||||
<Window minSize={minSize} styleSheet={styleSheet}> |
||||
<Text>Yo!!</Text> |
||||
</Window> |
||||
<Window minSize={minSize} styleSheet={styleSheet}> |
||||
<ScrollArea style={`height: '100%';width: '100%';`}> |
||||
<View id="container"> |
||||
<Text style="font-size: 15px; font-weight: bold; margin-bottom: 20px;"> |
||||
Testing |
||||
</Text> |
||||
<MyText /> |
||||
<Image |
||||
style={imageStyle} |
||||
src={distImgUrl} |
||||
aspectRatioMode={AspectRatioMode.KeepAspectRatio} |
||||
/> |
||||
</View> |
||||
</ScrollArea> |
||||
</Window> |
||||
</> |
||||
<Window windowTitle="Hello 👋🏽" minSize={minSize} styleSheet={styleSheet}> |
||||
<View style={containerStyle}> |
||||
<Text id="welcome-text">Welcome to NodeGui 🐕</Text> |
||||
<Text id="step-1">1. Play around</Text> |
||||
<StepOne /> |
||||
<Text id="step-2">2. Debug</Text> |
||||
<StepTwo /> |
||||
</View> |
||||
</Window> |
||||
); |
||||
} |
||||
} |
||||
|
||||
const imageStyle = ` |
||||
height: "700px"; |
||||
width: "700px"; |
||||
qproperty-alignment: 'AlignHCenter'; |
||||
`;
|
||||
const containerStyle = ` |
||||
flex: 1;
|
||||
`;
|
||||
|
||||
const styleSheet = ` |
||||
#container { |
||||
flex: 1; |
||||
min-height: 0; |
||||
min-width: 0; |
||||
width: '900'; |
||||
height: '900'; |
||||
flex-direction: column; |
||||
align-items: 'center'; |
||||
justify-content: 'center'; |
||||
background-color: 'grey'; |
||||
} |
||||
#welcome-text { |
||||
font-size: 24px; |
||||
padding-top: 20px; |
||||
qproperty-alignment: 'AlignHCenter'; |
||||
} |
||||
|
||||
#step-1, #step-2 { |
||||
font-size: 18px; |
||||
padding-top: 10px; |
||||
padding-horizontal: 20px; |
||||
} |
||||
`;
|
||||
|
||||
export default hot(App); |
||||
|
||||
@ -1,6 +0,0 @@ |
||||
import { Text } from "@nodegui/react-nodegui"; |
||||
import React from "react"; |
||||
|
||||
export const MyText = () => { |
||||
return <Text>{`Yolo`}</Text>; |
||||
}; |
||||
@ -0,0 +1,29 @@ |
||||
import { Text, View } from "@nodegui/react-nodegui"; |
||||
import React from "react"; |
||||
|
||||
export function StepOne() { |
||||
return ( |
||||
<View style={containerStyle}> |
||||
<Text wordWrap={true}> |
||||
Edit App.tsx to make changes to this screen. Then come back to see your |
||||
changes. Changes should reflect live thanks to Hot Reloading. 🔥 |
||||
</Text> |
||||
<Text> |
||||
{` |
||||
<p style="color: #6200ee;">
|
||||
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA |
||||
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
|
||||
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" /> |
||||
You can even use <i><strong>Rich Html</strong></i> text like this if you want 😎. |
||||
</p> |
||||
<hr /> |
||||
`}
|
||||
</Text> |
||||
</View> |
||||
); |
||||
} |
||||
|
||||
const containerStyle = ` |
||||
margin-horizontal: 20px; |
||||
padding-horizontal: 10px; |
||||
`;
|
||||
@ -0,0 +1,48 @@ |
||||
import { Text, View, Button } from "@nodegui/react-nodegui"; |
||||
import { QPushButtonEvents } from "@nodegui/nodegui"; |
||||
import React from "react"; |
||||
import open from "open"; |
||||
|
||||
const buttonEventHandler = { |
||||
[QPushButtonEvents.clicked]: () => { |
||||
open("https://react.nodegui.org").catch(console.log); |
||||
} |
||||
}; |
||||
|
||||
export function StepTwo() { |
||||
return ( |
||||
<View> |
||||
<Text style={textStyle} wordWrap={true}> |
||||
{` |
||||
<ol> |
||||
<li> |
||||
Open chrome and navigate to <code>chrome://inspect</code>. You should see a target below with your app.
|
||||
</li> |
||||
<br/> |
||||
<li> |
||||
Next click on "<code>Open dedicated DevTools for Node</code>" |
||||
</li> |
||||
<br/> |
||||
<li> |
||||
On the dedicated devtools. Click on <code> Source > Node > "Your node process" </code> |
||||
</li> |
||||
</ol> |
||||
`}
|
||||
</Text> |
||||
<Button |
||||
style={btnStyle} |
||||
on={buttonEventHandler} |
||||
text={`Open React NodeGui docs`} |
||||
></Button> |
||||
</View> |
||||
); |
||||
} |
||||
|
||||
const textStyle = ` |
||||
padding-right: 20px; |
||||
`;
|
||||
|
||||
const btnStyle = ` |
||||
margin-horizontal: 20px; |
||||
height: 40px; |
||||
`;
|
||||
Loading…
Reference in new issue