Python Forum

Full Version: Cramped UI
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
I have a problem that my UI is all cramped up:
https://www.dropbox.com/s/65v77yn5znsajc...P.jpg?dl=0

I use a custom ListWidgetItem:
from PySide2 import QtWidgets, QtCore, QtGui
from PySide2.QtCore import QPropertyAnimation, QEasingCurve, QSize
from PySide2.QtGui import QKeySequence, QIcon, QFont, QPixmap, QWindow
from PySide2.QtWidgets import QDesktopWidget, QDialog, QShortcut, QLabel, QWidget
from maya import OpenMayaUI

try:
    from shiboken import wrapInstance
    import shiboken
except:
    from shiboken2 import wrapInstance
    import shiboken2 as shiboken

allInfo = [{'label' : 'Dog',
            'command': 'print("Dog")',
            'annotation' : 'Run to *bark* *bark* *bark* *bark*',
            'image': '',
            'menuHierarchy': 'Test/test/test/test'},
            {'label' : 'Cat',
            'command': 'print("Cat")',
            'annotation' : 'Run to *miau* *miau* *miau* *miau*',
            'image': '',
            'menuHierarchy': 'Test/test/test/test'},
            {'label' : 'Dragon',
            'command': 'print("Dragon")',
            'annotation' : 'Run to fly, spew fire and eat a LOT of food',
            'image': '',
            'menuHierarchy': 'Test/test/test/test'},
            ]


class MainWindow(QtWidgets.QMainWindow):
    def __init__(self, parent = None):
        window = OpenMayaUI.MQtUtil.mainWindow()
        mayaWindow = shiboken.wrapInstance(long(window), QtWidgets.QMainWindow)
        super(MainWindow, self).__init__(mayaWindow)

        self.setWindowTitle('Test Window')
        self.setStyleSheet("background-color: rgb(65, 65, 65);")
        self.setWindowFlags(QtCore.Qt.Popup | QtCore.Qt.WindowType.NoDropShadowWindowHint)
        self.resize(630, 400)
        self.releaseKeyboard()
        self.releaseMouse()
        self._window = None

        # main widget
        mainWidget = QtWidgets.QWidget(self)
        self.setCentralWidget(mainWidget)

        # layout initialize
        self.mainLayout = QtWidgets.QVBoxLayout()
        self.HBoxLayout = QtWidgets.QHBoxLayout()
        self.VBoxLayout = QtWidgets.QVBoxLayout()
        self.mainLayout.addLayout(self.VBoxLayout)
        self.VBoxLayout.addLayout(self.HBoxLayout)
        mainWidget.setLayout(self.mainLayout)

        # Add Widgets
        self.textField = QtWidgets.QLineEdit()
        self.textField.textChanged.connect(self.onTextChanged)
        self.textField.setFont(QFont('Helvetica', 16))
        self.textField.setStyleSheet('margin: 10px; padding: 10px; \
                                    background-color: \
                                    rgb(40,40,40);\
                                    color: rgb(245,245,245); \
                                    border-style: solid; \
                                    border-radius: 1.5px; \
                                    border-width: 0.5px; \
                                    border-color: \
                                    rgb(35,35,35);')

        self.settingsButton = QtWidgets.QPushButton()
        self.settingsButton.clicked.connect('print("settings")')

        self.listView = QtWidgets.QListWidget()
        self.listView.setMouseTracking(True)
        self.listView.itemDoubleClicked.connect('print("command")')
        self.listView.setStyleSheet('margin: 10px; padding: 10px; \
                                    background-color: \
                                    rgb(40,40,40);\
                                    color: rgb(245,245,245); \
                                    border-style: solid; \
                                    border-radius: 1.5px; \
                                    border-width: 0.5px; \
                                    border-color: \
                                    rgb(35,35,35);')
        self.scrollBar = self.listView.verticalScrollBar()

        self.HBoxLayout.setContentsMargins(0, 0, 0, 0)
        self.VBoxLayout.setContentsMargins(0, 0, 0, 0)
        self.listView.setContentsMargins(0, 0, 0, 0)
        self.textField.setContentsMargins(0, 0, 0, 0)
        self.settingsButton.setContentsMargins(0, 0, 0, 0)

        self.HBoxLayout.addWidget(self.textField)
        self.HBoxLayout.addWidget(self.settingsButton)
        self.VBoxLayout.addWidget(self.listView)

        self.textField.setFocus()


    def onTextChanged(self):
        self.searchForCommands()


    def showWindow(self):
        self.closeWindow()
        if self._window is None:
            self._window = MainWindow()
            self._window.show()


    def closeWindow(self):
        self.close()


    def searchForCommands(self):
        input = self.textField.text()
        for x in range(len(allInfo)):
            label = allInfo[x].get('label')
            if input == label:
                print input
                print label
                item = QtWidgets.QListWidgetItem()
                self.listView.addItem(item)
                customWidget = ListWidgetItem()
                item.setSizeHint(customWidget.minimumSizeHint())
                self.listView.setItemWidget(item, customWidget)
                annotation = allInfo[x].get('annotation')
                menu = allInfo[x].get('menuHierarchy')
                icon = allInfo[x].get('image')
                customWidget.SetName(label)
                customWidget.SetIcon(icon)
                customWidget.SetAnnotation(annotation)
                customWidget.SetMenu(menu)
            else:
                self.listView.clear()


class ListWidgetItem(QWidget):
    def __init__(self):
        super(ListWidgetItem, self).__init__()
        self.setStatusTip('Click to run action')
        self.setToolTip('Click to run action')
        self.mainHBoxLayout = QtWidgets.QHBoxLayout()
        self.mainHBoxLayout.setSpacing(0)
        self.mainHBoxLayout.setContentsMargins(0, 0, 0, 0)
        #self.mainHBoxLayout.setSizeConstraint(QtWidgets.QLayout.SetDefaultConstraint)
        self.iconLabel = QtWidgets.QLabel()
        self.mainHBoxLayout.addWidget(self.iconLabel)

        self.rightVBoxLayout = QtWidgets.QVBoxLayout()
        self.rightVBoxLayout.setSizeConstraint(QtWidgets.QLayout.SetDefaultConstraint)
        self.menuNameHBoxLayout = QtWidgets.QHBoxLayout()
        self.menuNameHBoxLayout.setSizeConstraint(QtWidgets.QLayout.SetDefaultConstraint)

        self.nameLabel = QtWidgets.QLabel()
        self.annotationLabel = QtWidgets.QLabel()
        self.menuLabel = QtWidgets.QLabel()
        self.menuNameHBoxLayout.addWidget(self.menuLabel)
        self.menuNameHBoxLayout.addWidget(self.nameLabel)
        self.rightVBoxLayout.addLayout(self.menuNameHBoxLayout)
        self.rightVBoxLayout.addWidget(self.annotationLabel)
        self.mainHBoxLayout.addLayout(self.rightVBoxLayout)

        self.setLayout(self.mainHBoxLayout)

    def SetName(self, text):
        self.nameLabel.setText(text)

    def SetAnnotation(self, text):
        self.annotationLabel.setText(text)

    def SetIcon(self, iconPath = ''):
        self.iconLabel.setPixmap(QtGui.QPixmap(iconPath))

    def SetMenu(self, text):
        self.menuLabel.setText(text)


def startApp(*args):
    app = QtWidgets.QApplication.instance()
    if app is None:
        app = QtWidgets.QApplication(sys.argv)
    mainWindow = MainWindow()
    mainWindow.showWindow()

startApp()
As you can see neither the icons nor the text really fit, it has no space to breath, how do I fix that? Currently only typing "Dragon" into it works, not sure why... The QLabels are all way to thin and the QIcon should only be squared and way more to the left. You can run the code in Maya for example.
What does it look like without any stylesheet and Maya UI stuff? I would comment out all of that and see if there is something broken in how you are making the list. Once all looks well I would add in the stylesheet and try that. Last I would add the OpenMayaUI.
(Feb-27-2021, 07:37 PM)deanhystad Wrote: [ -> ]What does it look like without any stylesheet and Maya UI stuff? I would comment out all of that and see if there is something broken in how you are making the list. Once all looks well I would add in the stylesheet and try that. Last I would add the OpenMayaUI.

It looks like this without stylesheet in Maya:
https://www.dropbox.com/s/12nnmp741gfacc...2.jpg?dl=0
better but still big gaps next to the icon on the left.

What do you mean with "Last I would add the OpenMayaUI." exactly?

Are there any good tutorials and explanation for building UI in PySide2?