react-nodegui icon indicating copy to clipboard operation
react-nodegui copied to clipboard

`setContentsMargins` is not accessible via current `GridView` API

Open kimkanu opened this issue 4 years ago • 1 comments

Describe the bug The method setContentsMargins(int left, int top, int right, int bottom) (inherited from QLayout) is not accessible via current GridView API.

To Reproduce One may see the blue padding inside the GridView component.

import {
  Window,
  View,
  hot,
  GridColumn,
  GridRow,
  GridView,
  Text,
} from "@nodegui/react-nodegui";
import React from "react";
import { MemoryRouter } from "react-router";
const minSize = { width: 500, height: 520 };

class App extends React.Component {
  render() {
    return (
      <MemoryRouter>
        <Window windowTitle="Hello 👋🏽" minSize={minSize}>
          <GridView
            style="flex: 1; padding: 0px; background-color: 'blue';"
            horizontalSpacing={0}
            verticalSpacing={0}
          >
            <GridRow>
              <GridColumn width={4}>
                <View style="background-color: 'red';">
                  <Text>Hello</Text>
                </View>
              </GridColumn>
              <GridColumn width={2}>
                <View style="background-color: 'green';">
                  <Text>Second Column</Text>
                </View>
              </GridColumn>
            </GridRow>
          </GridView>
        </Window>
      </MemoryRouter>
    );
  }
}

export default hot(App);

Expected behavior One should be able to control content margins.

Screenshots image

Desktop (please complete the following information):

  • OS: Linux (elementary OS)
  • NodeGUI version: 0.29.0
  • React NodeGUI version: 0.10.0
  • OS Version: elementary OS 5.1.7 Hera

kimkanu avatar Jan 29 '21 16:01 kimkanu

I found another bug: GridRow and GridColumn behave weirdly inside GridView.

import {
  Window,
  View,
  hot,
  GridColumn,
  GridRow,
  GridView,
  Text,
} from "@nodegui/react-nodegui";
import React from "react";
import { MemoryRouter } from "react-router";
import AppRoutes from "./routes";
const minSize = { width: 500, height: 520 };

class App extends React.Component {
  render() {
    return (
      <MemoryRouter>
        <Window windowTitle="Hello 👋🏽" minSize={minSize}>
          <GridView
            style="flex: 1; margin: 56px; background-color: 'blue';"
            horizontalSpacing={0}
            verticalSpacing={0}
          >
            <GridRow>
              <GridColumn width={4}>
                <View style="border: 3px solid red;">
                  <Text>Hello</Text>
                </View>
              </GridColumn>
              <GridColumn width={2}>
                <View style="border: 4px solid grey;">
                  <Text>Second Column</Text>
                </View>
              </GridColumn>
            </GridRow>
          </GridView>
        </Window>
      </MemoryRouter>
    );
  }
}

export default hot(App);

Results: image

Those child components are not fit into the parent GridView. I think it is not intended.

kimkanu avatar Jan 29 '21 16:01 kimkanu