Atul R
5 years ago
parent
0b214b3019
commit
817690deb3
@ -1,65 +1,42 @@ |
|||||||
import { |
import { Text, Window, hot, View } from "@nodegui/react-nodegui"; |
||||||
View, |
|
||||||
Text, |
|
||||||
Window, |
|
||||||
Image, |
|
||||||
ScrollArea, |
|
||||||
hot |
|
||||||
} from "@nodegui/react-nodegui"; |
|
||||||
import path from "path"; |
|
||||||
import React from "react"; |
import React from "react"; |
||||||
import { AspectRatioMode } from "@nodegui/nodegui"; |
import { StepOne } from "./components/stepone"; |
||||||
import { MyText } from "./components/mytext"; |
import { StepTwo } from "./components/steptwo"; |
||||||
import imageUrl from "../assets/nodegui.jpg"; |
|
||||||
|
|
||||||
const distImgUrl = path.resolve(__dirname, imageUrl); |
const minSize = { width: 500, height: 500 }; |
||||||
const minSize = { width: 500, height: 400 }; |
|
||||||
|
|
||||||
class App extends React.Component { |
class App extends React.Component { |
||||||
render() { |
render() { |
||||||
return ( |
return ( |
||||||
<> |
<Window windowTitle="Hello 👋🏽" minSize={minSize} styleSheet={styleSheet}> |
||||||
<Window minSize={minSize} styleSheet={styleSheet}> |
<View style={containerStyle}> |
||||||
<Text>Yo!!</Text> |
<Text id="welcome-text">Welcome to NodeGui 🐕</Text> |
||||||
</Window> |
<Text id="step-1">1. Play around</Text> |
||||||
<Window minSize={minSize} styleSheet={styleSheet}> |
<StepOne /> |
||||||
<ScrollArea style={`height: '100%';width: '100%';`}> |
<Text id="step-2">2. Debug</Text> |
||||||
<View id="container"> |
<StepTwo /> |
||||||
<Text style="font-size: 15px; font-weight: bold; margin-bottom: 20px;"> |
</View> |
||||||
Testing |
</Window> |
||||||
</Text> |
|
||||||
<MyText /> |
|
||||||
<Image |
|
||||||
style={imageStyle} |
|
||||||
src={distImgUrl} |
|
||||||
aspectRatioMode={AspectRatioMode.KeepAspectRatio} |
|
||||||
/> |
|
||||||
</View> |
|
||||||
</ScrollArea> |
|
||||||
</Window> |
|
||||||
</> |
|
||||||
); |
); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
const imageStyle = ` |
const containerStyle = ` |
||||||
height: "700px"; |
flex: 1;
|
||||||
width: "700px"; |
`;
|
||||||
qproperty-alignment: 'AlignHCenter'; |
|
||||||
`;
|
|
||||||
|
|
||||||
const styleSheet = ` |
const styleSheet = ` |
||||||
#container { |
#welcome-text { |
||||||
flex: 1; |
font-size: 24px; |
||||||
min-height: 0; |
padding-top: 20px; |
||||||
min-width: 0; |
qproperty-alignment: 'AlignHCenter'; |
||||||
width: '900'; |
} |
||||||
height: '900'; |
|
||||||
flex-direction: column; |
#step-1, #step-2 { |
||||||
align-items: 'center'; |
font-size: 18px; |
||||||
justify-content: 'center'; |
padding-top: 10px; |
||||||
background-color: 'grey'; |
padding-horizontal: 20px; |
||||||
} |
} |
||||||
`;
|
`;
|
||||||
|
|
||||||
export default hot(App); |
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