Cuesubmit style tree view (#1285)

* feat: add styling for QTreeView, matching linux style for windows * feat: assign css to `CueJobWidget` * feat: added css `PULLDOWN_LIST` for `CueSelectPulldown` menu * feat: added css for interactions with `QToolButton` (2px border), lighter when hovered/hovered * feat: apply css to QMenu for `CueSelectPulldown`
AcademySoftwareFoundation · May 3, 2024 · 38671f0 · 38671f0
1 parent 65b74fe
commit 38671f0
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 2 deletions.
diff --git a/cuesubmit/cuesubmit/ui/Job.py b/cuesubmit/cuesubmit/ui/Job.py
@@ -24,6 +24,7 @@
 from PySide2 import QtCore, QtGui, QtWidgets
 
 from cuesubmit import Layer
+from cuesubmit.ui import Style
 
 
 class CueJobWidget(QtWidgets.QWidget):
@@ -60,6 +61,7 @@ def setupUi(self):
         self.table.setModel(self.model)
         header = self.table.header()
         header.setSectionResizeMode(0, QtWidgets.QHeaderView.Stretch)
+        header.setStyleSheet(Style.HEADER_VIEW)
         self.model.appendRow(self.jobRow)
         self.mainLayout.addWidget(self.table)
         self.buttonLayout.addWidget(self.downButton)
@@ -309,6 +311,7 @@ def __init__(self, parent=None):
         self.setSelectionBehavior(QtWidgets.QAbstractItemView.SelectRows)
         self.setUniformRowHeights(True)
         self.setMinimumHeight(100)
+        self.setStyleSheet(Style.TREE_VIEW)
 
 
 class CueJobModel(QtGui.QStandardItemModel):

diff --git a/cuesubmit/cuesubmit/ui/Style.py b/cuesubmit/cuesubmit/ui/Style.py
@@ -102,7 +102,7 @@
 QToolButton {
     background-color: rgb(60, 70, 80);
     border-radius: 3px;
-    border: 1px;
+    border: 2px solid transparent;
     font-size: 10px;
     padding: 5px 35px 5px 35px;
 }
@@ -112,8 +112,14 @@
     font-weight: bold;
 }
 
+QToolButton:hover, QToolButton:focus {
+    background-color: rgb(80, 90, 100);
+    border-color: rgb(30, 40, 50);
+}
+
 QToolButton:pressed {
-    background-color: rgb(120, 130, 140);
+    background-color: rgb(60, 70, 80);
+    border-color: rgb(30, 40, 50);
 }
 
 QToolButton::menu-indicator {
@@ -173,6 +179,69 @@
 }
 """
 
+HEADER_VIEW = """
+QHeaderView::section {
+    background-color: rgb(31, 40, 48);
+    color: white;
+    padding-left: 4px;
+    border: 1px solid rgb(46, 56, 63);
+    border-bottom-color: rgb(25, 34, 42);
+    border-right-color: rgb(25, 34, 42);
+    font-size: 10pt;
+    height: 16px;
+}
+"""
+
+TREE_VIEW = """
+QTreeView {
+    show-decoration-selected: 1;
+}
+
+QTreeView::item {
+    color: white;
+    height: 20px;
+}
+
+QTreeView::item:hover {
+    background: rgb(32, 85, 123);
+}
+QTreeView::item:selected {
+    background: rgb(52, 139, 200);
+}
+QTreeView::branch:hover:!has-children:!selected {
+    background: rgb(32, 85, 123);
+}
+QTreeView::branch:selected {
+    background: rgb(52, 139, 200);
+}
+QTreeView::branch:open:has-children {
+    border-image: none;
+}
+QTreeView::branch:closed:has-children {
+    border-image: none;
+}
+"""
+
+PULLDOWN_LIST = """
+QMenu {
+    color: rgb(200, 200, 200);
+    border: 0px solid  rgb(30, 40, 50);
+    border-bottom: 1px solid  rgb(30, 40, 50);
+    border-left: 1px solid qlineargradient(
+                                x1: 0, y1: 0,
+                                x2: 0, y2: 1,
+                                stop: 0 transparent, stop: 1 rgb(30, 40, 50));
+    border-right: 1px solid qlineargradient(
+                                x1: 0, y1: 0,
+                                x2: 0, y2: 1,
+                                stop: 0 transparent, stop: 1 rgb(30, 40, 50));
+}
+
+QMenu::item:selected {
+    background-color: rgb(30, 40, 50);
+}
+"""
+
 SEPARATOR_LINE = 'border: 1px solid rgb(20, 30, 40)'
 
 TEXT = 'background-color: rgb(40, 50, 60); color: rgb(250, 250, 250); font-weight: regular;'

diff --git a/cuesubmit/cuesubmit/ui/Widgets.py b/cuesubmit/cuesubmit/ui/Widgets.py
@@ -182,6 +182,7 @@ def __init__(
         self.label = QtWidgets.QLabel(labelText)
         self.toolButton = QtWidgets.QToolButton(parent=self)
         self.optionsMenu = QtWidgets.QMenu(self)
+        self.optionsMenu.setStyleSheet(Style.PULLDOWN_LIST)
         self.setOptions(options)
         if self.multiselect:
             self.toolButton.setText(self.emptyText)