Adds inline stylesheet and updates stylesheets for examples

Author: a7ul

examples/calculator/index.tsx

@@ -118,7 +118,7 @@ const App = () => {
           [QMainWindowEvents.KeyRelease]: onKeyRelease
         }}
         maxSize={{ width: 500, height: 700 }}
-        minSize={{ width: 200, height: 300 }}
+        minSize={{ width: 300, height: 400 }}
         styleSheet={styleSheet}
       >
         <View on={{ [QWidgetEvents.KeyRelease]: onKeyRelease }} id="container">
@@ -225,31 +225,27 @@ const App = () => {
   );
 };
 
-// const win = new QMainWindow();
-// win.resize(230, 300);
 const styleSheet = `
   #container {
-    qproperty-flex: 1;
-    qproperty-flexDirection: column;
-    qproperty-minHeight: '100%';
-    background: blue;
+    flex: 1;
+    flex-direction: column;
+    min-height: '100%';
   }
   #row, #row0, #row1 {
-    qproperty-flex: 1;
-    qproperty-alignItems: stretch;
-    qproperty-justifyContent: space-between;
-    qproperty-flexDirection: row;
+    flex: 1;
+    align-items: stretch;
+    justify-content: space-between;
+    flex-direction: row;
     background: #4B4B4B;
   }
   #row0 {
     background: #1E1E1E;
   }
   #row1 {
-      background: #2E2E2E;
+    background: #2E2E2E;
   }
   #valueBtn, #opBtn, #opBtnY {
-    qproperty-minWidth: '25%';
-    qproperty-border: 1;
+    min-width: '25%';
     border: 1px solid black;
     font-size: 20px;
     color: white;
@@ -262,11 +258,9 @@ const styleSheet = `
   }
   #result {
     qproperty-alignment: 'AlignRight|AlignVCenter';
-    padding-right: 5px;
-    padding-left:5px;
-    qproperty-paddingHorizontal: 5px;
+    padding-horizontal: 5px;
     font-size: 40px;
-    qproperty-flex: 1;
+    flex: 1;
     color: white;
   }
 `;

examples/image-view/index.tsx

@@ -67,22 +67,22 @@ const App = () => {
 
 const styleSheet = `
   #container {
-    qproperty-flex: 1;
-    qproperty-minHeight: '100%';
+    flex: 1;
+    min-height: '100%';
   }
   #controls {
-    qproperty-flexDirection: 'row';
-    qproperty-justifyContent: 'space-around';
-    qproperty-alignItems: 'center';
-    qproperty-paddingHorizontal: 20;
-    qproperty-paddingVertical: 10;
+    flex-direction: 'row';
+    justify-content: 'space-around';
+    align-items: 'center';
+    padding-horizontal: 20;
+    padding-vertical: 10;
   }
   #img {
-    qproperty-flex: 1;
+    flex: 1;
     qproperty-alignment: 'AlignCenter';
   }
   #textField {
-    qproperty-flex: 1;
+    flex: 1;
   }
 `;
 

src/components/Image/index.ts

@@ -14,6 +14,9 @@ const setProps = (
 ) => {
   const setter: ImageProps = {
     set src(imageUrl: string) {
+      if (!imageUrl) {
+        return;
+      }
       const pixMap = new QPixmap(imageUrl);
       widget.setPixmap(pixMap);
       const size = widget.size();

src/components/View/index.ts

@@ -6,6 +6,7 @@ export interface ListenerMap {
 }
 export interface ViewProps {
   id?: string;
+  style?: string; // Inline style from NodeGui
   styleSheet?: string;
   visible?: boolean;
   ref?: any;
@@ -23,6 +24,12 @@ export const setProps = (
     set visible(shouldShow: boolean) {
       shouldShow ? widget.show() : widget.hide();
     },
+    set style(inlineStyle: string) {
+      if (newProps.styleSheet) {
+        console.warn("Both styleSheet and inlineStyle can't be used together");
+      }
+      widget.setInlineStyle(inlineStyle);
+    },
     set styleSheet(styleSheet: string) {
       widget.setStyleSheet(styleSheet);
     },

src/demo.tsx

@@ -45,7 +45,13 @@ const App = () => {
               text={fileUrl}
               placeholderText="Absolute path to an image"
             />
-            <Button text="Load Image" on={loadButtonHandler} />
+            <Button
+              style={`
+              background-color: green;
+            `}
+              text="Load Image"
+              on={loadButtonHandler}
+            />
           </View>
           <Image
             id="img"
@@ -60,22 +66,22 @@ const App = () => {
 
 const styleSheet = `
   #container {
-    qproperty-flex: 1;
-    qproperty-minHeight: '100%';
+    flex: 1;
+    min-height: '100%';
   }
   #controls {
-    qproperty-flexDirection: 'row';
-    qproperty-justifyContent: 'space-around';
-    qproperty-alignItems: 'center';
-    qproperty-paddingHorizontal: 20;
-    qproperty-paddingVertical: 10;
+    flex-direction: 'row';
+    justify-content: 'space-around';
+    align-items: 'center';
+    padding-horizontal: 20;
+    padding-vertical: 10;
   }
   #img {
-    qproperty-flex: 1;
+    flex: 1;
     qproperty-alignment: 'AlignCenter';
   }
   #textField {
-    qproperty-flex: 1;
+    flex: 1;
   }
 `;