nav tab styling updates.

Author: jchanvfx

NodeGraphQt/constants.py

@@ -102,6 +102,8 @@
 #: Style to render the node graph background with grid lines.
 VIEWER_GRID_LINES = 2
 
+VIEWER_NAV_BG_COLOR = (25, 25, 25)
+VIEWER_NAV_ITEM_COLOR = (35, 35, 35)
 VIEWER_BG_COLOR = (35, 35, 35)
 VIEWER_GRID_COLOR = (45, 45, 45)
 VIEWER_GRID_SIZE = 50

NodeGraphQt/widgets/node_graph.py

@@ -1,9 +1,9 @@
-from Qt import QtWidgets
+from Qt import QtWidgets, QtGui
 
 from NodeGraphQt.constants import (
     NODE_SEL_BORDER_COLOR,
     VIEWER_BG_COLOR,
-    VIEWER_GRID_COLOR
+    VIEWER_NAV_BG_COLOR
 )
 from NodeGraphQt.widgets.viewer_nav import NodeNavigationWidget
 
@@ -15,28 +15,33 @@ def __init__(self, parent=None):
         self.setTabsClosable(True)
         self.setTabBarAutoHide(True)
         text_color = self.palette().text().color().toTuple()
+        bg_color = QtGui.QColor(*VIEWER_BG_COLOR).darker(120).toTuple()
         style_dict = {
+            'QWidget': {
+                'background-color': 'rgb({0},{1},{2})'.format(*VIEWER_BG_COLOR),
+            },
             'QTabWidget::pane': {
                 'background': 'rgb({0},{1},{2})'.format(*VIEWER_BG_COLOR),
                 'border': '0px',
-                'border-top': '1px solid rgb({0},{1},{2})'
-                              .format(*VIEWER_BG_COLOR),
+                'border-top': '0px solid rgb({0},{1},{2})'.format(*bg_color),
             },
             'QTabBar::tab': {
-                'background': 'rgb({0},{1},{2})'.format(*VIEWER_BG_COLOR),
+                'background': 'rgb({0},{1},{2})'.format(*bg_color),
                 'border': '0px solid black',
-                'color': 'rgba({0},{1},{2},45)'.format(*text_color),
+                'color': 'rgba({0},{1},{2},30)'.format(*text_color),
                 'min-width': '10px',
-                'padding': '8px 20px',
+                'padding': '10px 20px',
             },
             'QTabBar::tab:selected': {
                 'color': 'rgb({0},{1},{2})'.format(*text_color),
-                'background': 'rgb({0},{1},{2})'.format(*VIEWER_BG_COLOR),
-                'margin-bottom': '-1px',
+                'background': 'rgb({0},{1},{2})'.format(*VIEWER_NAV_BG_COLOR),
+                'border-top': '1px solid rgb({0},{1},{2})'
+                              .format(*NODE_SEL_BORDER_COLOR),
             },
             'QTabBar::tab:hover': {
-                'color': 'rgb({0}, {1}, {2})'.format(*NODE_SEL_BORDER_COLOR),
-                'background': 'rgb({0}, {1}, {2})'.format(*VIEWER_GRID_COLOR),
+                'color': 'rgb({0},{1},{2})'.format(*text_color),
+                'border-top': '1px solid rgb({0},{1},{2})'
+                              .format(*NODE_SEL_BORDER_COLOR),
             }
         }
         stylesheet = ''

NodeGraphQt/widgets/viewer_nav.py

@@ -1,6 +1,10 @@
 from Qt import QtWidgets, QtCore, QtGui
 
-from NodeGraphQt.constants import NODE_SEL_BORDER_COLOR, VIEWER_BG_COLOR
+from NodeGraphQt.constants import (
+    NODE_SEL_BORDER_COLOR,
+    VIEWER_NAV_BG_COLOR,
+    VIEWER_NAV_ITEM_COLOR
+)
 
 
 class NodeNavigationDelagate(QtWidgets.QStyledItemDelegate):
@@ -32,7 +36,7 @@ def paint(self, painter, option, index):
         painter.setRenderHint(QtGui.QPainter.Antialiasing, True)
 
         # background.
-        bg_color = option.palette.window().color()
+        bg_color = QtGui.QColor(*VIEWER_NAV_ITEM_COLOR)
         itm_color = QtGui.QColor(80, 128, 123)
         if option.state & QtWidgets.QStyle.State_Selected:
             bg_color = bg_color.lighter(120)
@@ -103,9 +107,10 @@ def __init__(self, parent=None):
         self.setSpacing(0)
 
         # self.viewport().setAutoFillBackground(False)
+        # bg_color = QtGui.QColor(*VIEWER_BG_COLOR).darker(110).toTuple()
         self.setStyleSheet(
             'QListView {{border: 0px;background-color: rgb({0},{1},{2});}}'
-            .format(*VIEWER_BG_COLOR)
+            .format(*VIEWER_NAV_BG_COLOR)
         )
 
         self.setItemDelegate(NodeNavigationDelagate(self))