Improve style.

.gitignore

@@ -22,4 +22,5 @@ build/
 _template/
 *.egg-info/
 .tox/
-examples/examples
+examples/examples
+ui

MANIFEST.in

@@ -36,3 +36,4 @@ recursive-exclude docs/build *
 
 include *.txt
 recursive-include nodedge *.cfg
+recursive-exclude ui/ *

docs/source/apidoc/nodedge.graphics_node_title_label.rst

@@ -0,0 +1,7 @@
+nodedge.graphics\_node\_title\_label
+====================================
+
+.. automodule:: nodedge.graphics_node_title_label
+   :members:
+   :undoc-members:
+   :show-inheritance:

docs/source/apidoc/nodedge.rst

@@ -20,7 +20,7 @@ Submodules
    nodedge.graphics_edge
    nodedge.graphics_node
    nodedge.graphics_node_content
-   nodedge.graphics_node_title_item
+   nodedge.graphics_node_title_label
    nodedge.graphics_scene
    nodedge.graphics_socket
    nodedge.graphics_view

examples/example_calculator/example.json

@@ -112,7 +112,7 @@
         {
             "id": 1583749318256,
             "title": "Multiply",
-            "posX": -98.25,
+            "posX": -97.25,
             "posY": -49.75,
             "inputSockets": [
                 {
@@ -196,7 +196,7 @@
         {
             "id": 1583749804960,
             "title": "Output",
-            "posX": 120.0,
+            "posX": 119.0,
             "posY": -181.5,
             "inputSockets": [
                 {
@@ -232,7 +232,7 @@
         {
             "id": 1583749320608,
             "title": "Output",
-            "posX": 109.0,
+            "posX": 118.0,
             "posY": 64.5,
             "inputSockets": [
                 {

examples/example_calculator/main.py

@@ -15,11 +15,31 @@
 
     QApplication.setStyle("Fusion")
     p = QApplication.palette()
-    p.setColor(QPalette.Window, QColor(53, 53, 53))
-    p.setColor(QPalette.Button, QColor(53, 53, 53))
-    p.setColor(QPalette.Highlight, QColor(142, 45, 197))
-    p.setColor(QPalette.ButtonText, QColor(255, 255, 255))
-    p.setColor(QPalette.WindowText, QColor(255, 255, 255))
+    raisinBlackDark = QColor("#1B1D23")
+    raisinBlackLight = QColor("#272C36")
+    raisinBlackMid = QColor("#23252E")
+    charCoal = QColor("#363A46")
+    independence = QColor("#464B5B")
+    white = QColor("#DDFFFFFF")
+    blue = QColor("#007BFF")
+
+    p.setColor(QPalette.AlternateBase, blue)
+    p.setColor(QPalette.Base, charCoal)
+    p.setColor(QPalette.BrightText, blue)
+    p.setColor(QPalette.Button, raisinBlackDark)
+    p.setColor(QPalette.ButtonText, white)
+    p.setColor(QPalette.Dark, raisinBlackDark)
+    p.setColor(QPalette.Highlight, blue)
+    p.setColor(QPalette.HighlightedText, white)
+    p.setColor(QPalette.Light, independence)
+    p.setColor(QPalette.Link, blue)
+    p.setColor(QPalette.LinkVisited, blue)
+    p.setColor(QPalette.Mid, raisinBlackMid)
+    p.setColor(QPalette.Midlight, raisinBlackLight)
+    p.setColor(QPalette.Shadow, independence)
+    p.setColor(QPalette.Text, white)
+    p.setColor(QPalette.Window, charCoal)
+    p.setColor(QPalette.WindowText, white)
     app.setPalette(p)
 
     window = MdiWindow()

nodedge/graphics_node.py

@@ -12,10 +12,12 @@
     QGraphicsItem,
     QGraphicsSceneHoverEvent,
     QGraphicsSceneMouseEvent,
+    QVBoxLayout,
+    QWidget,
 )
 
-from nodedge.graphics_node_content import GraphicsNodeContentProxy
-from nodedge.graphics_node_title_item import GraphicsNodeTitleItem
+from nodedge.graphics_node_content import GraphicsNodeContent, GraphicsNodeContentProxy
+from nodedge.graphics_node_title_label import GraphicsNodeTitleLabel
 from nodedge.graphics_scene import GraphicsScene
 
 
@@ -61,7 +63,7 @@ def title(self):
     @title.setter
     def title(self, value):
         self._title = value
-        self.titleItem.setPlainText(self._title)
+        self.titleLabel.setText(self._title)
 
     @property
     def selectedState(self):
@@ -88,7 +90,6 @@ def initUI(self) -> None:
         """
         self.initSizes()
         self.initStyle()
-        self.initTitle()
         self.initContent()
 
         self.setAcceptHoverEvents(True)
@@ -100,21 +101,7 @@ def initStyle(self) -> None:
         """
         Initialize ``QObjects`` like ``QColor``, ``QPen`` and ``QBrush``.
         """
-        self._titleColor: QColor = QColor(Qt.white)
-        self._colorHovered: QColor = QColor("#FF37A6FF")
-
-        self._titleFont: QFont = QFont("Ubuntu", 10)
-
-        self._penDefault: QPen = QPen(QColor("#7F000000"))
-        self._penDefault.setWidthF(2.0)
-        self._penSelected: QPen = QPen(QColor("#FFFFA637"))
-        self._penSelected.setWidthF(2.0)
-
-        self._penHovered: QPen = QPen(self._colorHovered)
-        self._penHovered.setWidthF(3.0)
-
-        self._brushTitle: QBrush = QBrush(QColor("#FF313131"))
-        self._brushBackground: QBrush = QBrush(QColor("#E3212121"))
+        pass
 
     # noinspection PyAttributeOutsideInit
     def initSizes(self) -> None:
@@ -129,19 +116,6 @@ def initSizes(self) -> None:
         self.titleHorizontalPadding: float = 4.0
         self.titleVerticalPadding: float = 4.0
 
-    # noinspection PyAttributeOutsideInit
-    def initTitle(self) -> None:
-        """
-        Set up the title Graphics representation: font, color, position, etc.
-        """
-        self.titleItem: GraphicsNodeTitleItem = GraphicsNodeTitleItem(self)
-        self.titleItem.setDefaultTextColor(self._titleColor)
-        self.titleItem.setFont(self._titleFont)
-        self.titleItem.setPos(self.titleHorizontalPadding, 0)
-        self.titleItem.setTextWidth(self.width - 2 * self.titleHorizontalPadding)
-
-        self.title = self.node.title
-
     # noinspection PyAttributeOutsideInit
     def initContent(self) -> None:
         """
@@ -152,14 +126,16 @@ def initContent(self) -> None:
         """
 
         if self.content is not None:
-            self.content.setGeometry(
-                int(self.edgePadding),
-                int(self.titleHeight + self.edgePadding),
-                int(self.width - 2 * self.edgePadding),
-                int(self.height - 2 * self.edgePadding - self.titleHeight),
-            )
+            self.content.setGeometry(0, 0, self.width, self.height)
             self.graphicsContentProxy = GraphicsNodeContentProxy(self)
-            self.graphicsContentProxy.setWidget(self.content)
+            widget = GraphicsNodeWidget()
+            widget.setGeometry(0, 0, self.width, self.height)
+            layout = GraphicsNodeVBoxLayout()
+            widget.setLayout(layout)
+            self.titleLabel = GraphicsNodeTitleLabel(self.title, widget)
+            layout.addWidget(self.titleLabel)
+            layout.addWidget(self.content)
+            self.graphicsContentProxy.setWidget(widget)
 
     def boundingRect(self):
         """
@@ -171,67 +147,7 @@ def paint(self, painter, QStyleOptionGraphicsItem, widget=None):
         """
         Paint the rounded rectangular :class:`~nodedge.node.Node`.
         """
-        # title
-        pathTitle = QPainterPath()
-        pathTitle.setFillRule(Qt.WindingFill)
-        pathTitle.addRoundedRect(
-            0, 0, self.width, self.titleHeight, self.edgeRoundness, self.edgeRoundness
-        )
-        maxTopRect = max(self.titleHeight - self.edgeRoundness, self.titleHeight / 2.0)
-        maxHeightRect = min(self.edgeRoundness, self.titleHeight / 2.0)
-        pathTitle.addRect(0, maxTopRect, self.edgeRoundness, maxHeightRect)
-        pathTitle.addRect(
-            self.width - self.edgeRoundness,
-            maxTopRect,
-            self.edgeRoundness,
-            maxHeightRect,
-        )
-
-        painter.setPen(Qt.NoPen)
-        painter.setBrush(self._brushTitle)
-        painter.drawPath(pathTitle.simplified())
-
-        # content
-        pathContent = QPainterPath()
-        pathContent.setFillRule(Qt.WindingFill)
-        pathContent.addRoundedRect(
-            0,
-            self.titleHeight,
-            self.width,
-            self.height - self.titleHeight,
-            self.edgeRoundness,
-            self.edgeRoundness,
-        )
-        maxHeightRect = min(self.edgeRoundness, self.height / 2)
-        pathContent.addRect(0, self.titleHeight, self.edgeRoundness, maxHeightRect)
-        pathContent.addRect(
-            self.width - self.edgeRoundness,
-            self.titleHeight,
-            self.edgeRoundness,
-            maxHeightRect,
-        )
-        painter.setPen(Qt.NoPen)
-        painter.setBrush(self._brushBackground)
-        painter.drawPath(pathContent.simplified())
-
-        # outline
-        pathOutline = QPainterPath()
-        pathOutline.addRoundedRect(
-            -1,
-            -1,
-            self.width + 2,
-            self.height + 2,
-            self.edgeRoundness,
-            self.edgeRoundness,
-        )
-        painter.setBrush(Qt.NoBrush)
-
-        if self.hovered:
-            painter.setPen(self._penHovered)
-            painter.drawPath(pathOutline.simplified())
-
-        painter.setPen(self._penDefault if not self.isSelected() else self._penSelected)
-        painter.drawPath(pathOutline.simplified())
+        pass
 
     def mouseMoveEvent(self, event):
         """
@@ -306,3 +222,14 @@ def onSelected(self):
         Handle when the node has been selected.
         """
         self.node.scene.graphicsScene.itemSelected.emit()
+
+
+class GraphicsNodeWidget(QWidget):
+    def __init__(self, parent=None):
+        super().__init__(parent)
+
+
+class GraphicsNodeVBoxLayout(QVBoxLayout):
+    def __init__(self, parent=None):
+        super(GraphicsNodeVBoxLayout, self).__init__(parent)
+        self.setContentsMargins(0, 0, 0, 0)