plastichub/nodeguy
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Adds basic calculator UI

Browse Source
This commit is contained in:
Atul R 2019-06-09 23:58:02 +02:00
parent 3b4ec63771
commit 86fa07bb05
2 changed files with 61 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
demo.ts
View File

@ -66,8 +66,13 @@ const testGridLayout = () => {
const testFlexLayout = () => {
const win = new QMainWindow();
const rootView = new QWidget();
const rootLayout = new FlexLayout();
rootLayout.setFlexNode(rootView.getFlexNode());
rootView.setLayout(rootLayout);
win.setCentralWidget(rootView);
const view = new QWidget();
win.setCentralWidget(view);
view.setStyleSheet(
`
background-color: green;
@ -94,14 +99,26 @@ const testFlexLayout = () => {
color:white;
qproperty-alignSelf: 'stretch';
`);
view.setLayout(flayout);
flayout.addWidget(label2, label2.getFlexNode());
flayout.addWidget(label, label.getFlexNode());
view.setLayout(flayout);
const view2 = new QWidget();
const flayout2 = new FlexLayout();
flayout2.setFlexNode(view2.getFlexNode());
view2.setLayout(flayout2);
const button = new QPushButton();
button.setText("Hululu");
flayout2.addWidget(button, button.getFlexNode());
rootLayout.addWidget(view, view.getFlexNode());
rootLayout.addWidget(view2, view2.getFlexNode());
win.show();
return win;
};
(global as any).win1 = testGridLayout(); //to keep gc from collecting
// (global as any).win1 = testGridLayout(); //to keep gc from collecting
(global as any).win2 = testFlexLayout(); //to keep gc from collecting

53
examples/calculator/index.ts
View File

@ -22,15 +22,35 @@ const getButton = (
// Main Window
const win = new QMainWindow();
win.resize(400, 600);
// Root view
const rootView = new QWidget();
win.setCentralWidget(rootView);
rootView.setStyleSheet(
`
qproperty-flex: 1;
qproperty-flexDirection: column;
`
);
const rootViewFlexLayout = new FlexLayout();
rootViewFlexLayout.setFlexNode(rootView.getFlexNode());
rootView.setLayout(rootViewFlexLayout);
// Top Row
const btnClear = getButton("AC", "AC", "command");
btnClear.ui.setStyleSheet(`
qproperty-flex: 0.3;
`);
const resultText = new QLabel();
resultText.setText(0);
resultText.setStyleSheet(`
qproperty-flex: 0.7;
qproperty-alignment: AlignCenter;
`);
const row0 = new QWidget();
row0.setStyleSheet(`
qproperty-flex: 1;
qproperty-flexDirection: row;
`);
const row0Layout = new FlexLayout();
row0Layout.setFlexNode(row0.getFlexNode());
@ -44,6 +64,10 @@ const btn8 = getButton("8", 8, "value");
const btn9 = getButton("9", 9, "value");
const btnDivide = getButton("/", "/", "command");
const row1 = new QWidget();
row1.setStyleSheet(`
qproperty-flex: 1;
qproperty-flexDirection: row;
`);
const row1Layout = new FlexLayout();
row1Layout.setFlexNode(row1.getFlexNode());
row1Layout.addWidget(btn7.ui, btn7.ui.getFlexNode());
@ -58,6 +82,10 @@ const btn5 = getButton("5", 5, "value");
const btn6 = getButton("6", 6, "value");
const btnMultiply = getButton("x", "*", "command");
const row2 = new QWidget();
row2.setStyleSheet(`
qproperty-flex: 1;
qproperty-flexDirection: row;
`);
const row2Layout = new FlexLayout();
row2Layout.setFlexNode(row2.getFlexNode());
row2Layout.addWidget(btn4.ui, btn4.ui.getFlexNode());
@ -72,6 +100,10 @@ const btn2 = getButton("2", 2, "value");
const btn3 = getButton("3", 3, "value");
const btnMinus = getButton("-", "-", "command");
const row3 = new QWidget();
row3.setStyleSheet(`
qproperty-flex: 1;
qproperty-flexDirection: row;
`);
const row3Layout = new FlexLayout();
row3Layout.setFlexNode(row3.getFlexNode());
row3Layout.addWidget(btn1.ui, btn1.ui.getFlexNode());
@ -86,6 +118,10 @@ const btnDot = getButton(".", ".", "command");
const btnEquals = getButton("=", "=", "command");
const btnPlus = getButton("+", "+", "command");
const row4 = new QWidget();
row4.setStyleSheet(`
qproperty-flex: 1;
qproperty-flexDirection: row;
`);
const row4Layout = new FlexLayout();
row4Layout.setFlexNode(row4.getFlexNode());
row4Layout.addWidget(btn0.ui, btn0.ui.getFlexNode());
@ -94,23 +130,16 @@ row4Layout.addWidget(btnEquals.ui, btnEquals.ui.getFlexNode());
row4Layout.addWidget(btnPlus.ui, btnPlus.ui.getFlexNode());
row4.setLayout(row4Layout);
// Root view
const rootView = new QWidget();
win.setCentralWidget(rootView);
rootView.setStyleSheet(
`
qproperty-flex: 1;
`
);
const rootViewFlexLayout = new FlexLayout();
rootViewFlexLayout.setFlexNode(rootView.getFlexNode());
// Add to root view
rootViewFlexLayout.addWidget(row0, row0.getFlexNode());
rootViewFlexLayout.addWidget(row1, row1.getFlexNode());
rootViewFlexLayout.addWidget(row2, row2.getFlexNode());
rootViewFlexLayout.addWidget(row3, row3.getFlexNode());
rootViewFlexLayout.addWidget(row4, row4.getFlexNode());
rootView.setLayout(rootViewFlexLayout);
win.show();
setTimeout(() => {
win.resize(400, 600); // This is a hack to solve layout issues on initial render. Will need to fix this.
}, 10);
globals.win = win; //to keep gc from collecting ui widgets