diff --git a/README.md b/README.md index 93a87561e..3ec3aa86f 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# node-native-ui +# nodegui A cross platform library to build native desktop apps. Based on Qt5. @@ -30,7 +30,7 @@ Linux and Windows screenshots to be added soon. ## Development setup and getting started -This guide is for setting up `node-native-ui` for contributors of node-native-ui. +This guide is for setting up `nodegui` for contributors of nodegui. The actual getting started guide for users will be added once we reach a bit of stable level. Make sure you have setup `qode` and installed it globally. diff --git a/demo.ts b/demo.ts index 93db0a4ef..63a1f27f0 100644 --- a/demo.ts +++ b/demo.ts @@ -75,7 +75,6 @@ const testFlexLayout = () => { const view = new QWidget(); view.setStyleSheet( ` - background-color: green; qproperty-flex: 1; ` ); diff --git a/examples/calculator/index.ts b/examples/calculator/index.ts index af057a3d7..3ba937a5e 100644 --- a/examples/calculator/index.ts +++ b/examples/calculator/index.ts @@ -13,6 +13,7 @@ const getButton = ( ) => { const button = new QPushButton(); button.setText(label); + button.setObjectName(`btn${value}`); return { ui: button, value, @@ -25,33 +26,98 @@ const win = new QMainWindow(); // Root view const rootView = new QWidget(); +rootView.setObjectName("rootView"); //This is like ids in web world win.setCentralWidget(rootView); rootView.setStyleSheet( ` + * { + font-size: 20px; + } + + QPushButton { + qproperty-minWidth: '25%'; + qproperty-border: 1; + border: 1px solid black; + } + + QPushButton:pressed { + background: grey; + } + + #rootView { qproperty-flex: 1; qproperty-flexDirection: column; + } + + #btnAC { + qproperty-minWidth: '25%'; + border-right: 2px solid black; + qproperty-borderRight: 1; + } + + #resultText { + qproperty-flex: 1; + qproperty-alignment: AlignRight AlignVCenter; + padding-right: 5px; + font-size: 40px; + } + + #row0,#row1,#row2,#row3,#row4 { + qproperty-flex: 1; + qproperty-alignItems: stretch; + qproperty-justifyContent: space-between; + qproperty-flexDirection: row; + } + + #row0 * { + background: #1E1E1E; + } + + #row0 QPushButton:pressed { + background: grey; + } + + #row1 QPushButton { + background: #2E2E2E; + } + + #row1 QPushButton:pressed { + background: grey; + } + + + #row2 QPushButton, #row2 QPushButton, #row3 QPushButton, #row4 QPushButton { + background: #4B4B4B; + } + + #row2 QPushButton:pressed, #row2 QPushButton:pressed, #row3 QPushButton:pressed, #row4 QPushButton:pressed { + background: grey; + } ` ); + +const operatorBtnStyle = ` + QPushButton { + background: #FD8D0E; + } + + QPushButton:pressed { + background: grey; + } +`; + 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.setObjectName("resultText"); resultText.setText(0); -resultText.setStyleSheet(` -qproperty-flex: 0.7; -qproperty-alignment: AlignCenter; -`); const row0 = new QWidget(); -row0.setStyleSheet(` - qproperty-flex: 1; - qproperty-flexDirection: row; -`); +row0.setObjectName("row0"); + const row0Layout = new FlexLayout(); row0Layout.setFlexNode(row0.getFlexNode()); row0.setLayout(row0Layout); @@ -63,11 +129,9 @@ const btn7 = getButton("7", 7, "value"); const btn8 = getButton("8", 8, "value"); const btn9 = getButton("9", 9, "value"); const btnDivide = getButton("/", "/", "command"); +btnDivide.ui.setStyleSheet(operatorBtnStyle); const row1 = new QWidget(); -row1.setStyleSheet(` - qproperty-flex: 1; - qproperty-flexDirection: row; -`); +row1.setObjectName("row1"); const row1Layout = new FlexLayout(); row1Layout.setFlexNode(row1.getFlexNode()); row1Layout.addWidget(btn7.ui, btn7.ui.getFlexNode()); @@ -81,11 +145,9 @@ const btn4 = getButton("4", 4, "value"); const btn5 = getButton("5", 5, "value"); const btn6 = getButton("6", 6, "value"); const btnMultiply = getButton("x", "*", "command"); +btnMultiply.ui.setStyleSheet(operatorBtnStyle); const row2 = new QWidget(); -row2.setStyleSheet(` - qproperty-flex: 1; - qproperty-flexDirection: row; -`); +row2.setObjectName("row2"); const row2Layout = new FlexLayout(); row2Layout.setFlexNode(row2.getFlexNode()); row2Layout.addWidget(btn4.ui, btn4.ui.getFlexNode()); @@ -99,11 +161,11 @@ const btn1 = getButton("1", 1, "value"); const btn2 = getButton("2", 2, "value"); const btn3 = getButton("3", 3, "value"); const btnMinus = getButton("-", "-", "command"); +btnMinus.ui.setStyleSheet(operatorBtnStyle); + const row3 = new QWidget(); -row3.setStyleSheet(` - qproperty-flex: 1; - qproperty-flexDirection: row; -`); +row3.setObjectName("row3"); + const row3Layout = new FlexLayout(); row3Layout.setFlexNode(row3.getFlexNode()); row3Layout.addWidget(btn1.ui, btn1.ui.getFlexNode()); @@ -117,11 +179,10 @@ const btn0 = getButton("0", 0, "value"); const btnDot = getButton(".", ".", "command"); const btnEquals = getButton("=", "=", "command"); const btnPlus = getButton("+", "+", "command"); +btnPlus.ui.setStyleSheet(operatorBtnStyle); + const row4 = new QWidget(); -row4.setStyleSheet(` - qproperty-flex: 1; - qproperty-flexDirection: row; -`); +row4.setObjectName("row4"); const row4Layout = new FlexLayout(); row4Layout.setFlexNode(row4.getFlexNode()); row4Layout.addWidget(btn0.ui, btn0.ui.getFlexNode()); @@ -140,6 +201,6 @@ rootViewFlexLayout.addWidget(row4, row4.getFlexNode()); win.show(); setTimeout(() => { - win.resize(210, 150); // This is a hack to solve layout issues on initial render. Will need to fix this. + win.resize(230, 300); // 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 diff --git a/package.json b/package.json index 56556a8d8..8acab85f6 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "node-native-ui", + "name": "@nodegui/nodegui", "version": "1.0.0", "description": "A cross platform library to build native desktop apps. Based on Qt5.", "main": "dist/", diff --git a/src/cpp/QtGui/QWidget/qwidget_macro.h b/src/cpp/QtGui/QWidget/qwidget_macro.h index 8ec443a38..722c420a9 100644 --- a/src/cpp/QtGui/QWidget/qwidget_macro.h +++ b/src/cpp/QtGui/QWidget/qwidget_macro.h @@ -58,7 +58,15 @@ Napi::Value hide(const Napi::CallbackInfo& info) { \ Napi::HandleScope scope(env); \ this->instance->hide(); \ return env.Null(); \ -} +} \ +\ +Napi::Value setObjectName(const Napi::CallbackInfo& info){ \ + Napi::Env env = info.Env(); \ + Napi::HandleScope scope(env); \ + Napi::String objectName = info[0].As(); \ + this->instance->setObjectName(QString::fromStdString(objectName.Utf8Value())); \ + return env.Null(); \ +} \ #endif //QWIDGET_WRAPPED_METHODS_DECLARATION @@ -71,6 +79,7 @@ Napi::Value hide(const Napi::CallbackInfo& info) { \ InstanceMethod("setLayout",&WidgetWrapName::setLayout), \ InstanceMethod("setStyleSheet",&WidgetWrapName::setStyleSheet), \ InstanceMethod("hide",&WidgetWrapName::hide), \ + InstanceMethod("setObjectName",&WidgetWrapName::setObjectName), \ #endif // QWIDGET_WRAPPED_METHODS_EXPORT_DEFINE diff --git a/src/cpp/core/FlexLayout/flexlayout.cpp b/src/cpp/core/FlexLayout/flexlayout.cpp index d7258d637..d951a1ffc 100644 --- a/src/cpp/core/FlexLayout/flexlayout.cpp +++ b/src/cpp/core/FlexLayout/flexlayout.cpp @@ -49,12 +49,7 @@ QSize FlexLayout::sizeHint() const{ } void FlexLayout::addItem(QLayoutItem * item){ - QWidget* childWidget = item->widget(); - if(childWidget){ - spdlog::info("flexlayout: addItem - noop for: {}",childWidget->metaObject()->className()); - return; - } - spdlog::info("flexlayout: addItem - noop for: {}", reinterpret_cast(item)); + // Noop: We already have addWidget doing all the hard work. } QLayoutItem *FlexLayout::itemAt(int index) const @@ -62,11 +57,11 @@ QLayoutItem *FlexLayout::itemAt(int index) const if(!this->node){ return nullptr; } - spdlog::info("flexlayout: itemAt {}",index); + // spdlog::info("flexlayout: itemAt {}",index); YGNodeRef childNode = YGNodeGetChild(this->node, static_cast(index)); NodeContext *ctx = getNodeContext(childNode); if(!ctx){ - spdlog::info("flexlayout: itemAt null context {}",index); + // spdlog::info("flexlayout: itemAt null context {}",index); return nullptr; } return ctx->item; @@ -99,7 +94,7 @@ void FlexLayout::addWidget(QWidget* childWidget, YGNodeRef childNode) spdlog::warn("Flex layout's parent yoga node not set yet. Set it using setFlexNode. Child widget will not be added to Flex Layout"); return; } - spdlog::info("flexlayout: addWidget Object: {}",childWidget->metaObject()->className()); + // spdlog::info("flexlayout: addWidget Object: {}",childWidget->metaObject()->className()); uint count = YGNodeGetChildCount(this->node); YGNodeInsertChild(this->node,childNode, count); @@ -135,7 +130,7 @@ void FlexLayout::setGeometry(const QRect &rect) QWidget* childWidget = childLayoutItem->widget(); if(childWidget){ childWidget->setGeometry(childRect); - spdlog::info("flexlayout setGeometry: {}, rect: w:{}, h:{}, l:{}, t:{}",childWidget->metaObject()->className(),width,height,left,top); + // spdlog::info("flexlayout setGeometry: {}, rect: w:{}, h:{}, l:{}, t:{}",childWidget->metaObject()->className(),width,height,left,top); }else { childLayoutItem->setGeometry(childRect); } diff --git a/src/lib/QtGui/QWidget/index.ts b/src/lib/QtGui/QWidget/index.ts index 2a2337c9a..2b6018716 100644 --- a/src/lib/QtGui/QWidget/index.ts +++ b/src/lib/QtGui/QWidget/index.ts @@ -26,6 +26,9 @@ export abstract class NodeWidget extends YogaWidget { hide = () => { this.native.hide(); }; + setObjectName = (objectName: string) => { + this.native.setObjectName(objectName); + }; } export class QWidget extends NodeWidget {