From 86fa07bb05223536818b57fa2d1fc762bb3e6642 Mon Sep 17 00:00:00 2001
From: Atul R <atulanand94@gmail.com>
Date: Sun, 9 Jun 2019 23:58:02 +0200
Subject: [PATCH] Adds basic calculator UI

---
 demo.ts                      | 23 ++++++++++++++--
 examples/calculator/index.ts | 53 ++++++++++++++++++++++++++++--------
 2 files changed, 61 insertions(+), 15 deletions(-)

diff --git a/demo.ts b/demo.ts
index 73c82c7da..93db0a4ef 100644
--- a/demo.ts
+++ b/demo.ts
@@ -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
diff --git a/examples/calculator/index.ts b/examples/calculator/index.ts
index c26ac92e6..94a879cb2 100644
--- a/examples/calculator/index.ts
+++ b/examples/calculator/index.ts
@@ -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