Add custom stylesheet (#32)

* Add custom stylesheet. Signed-off-by: Slendi <[email protected]> * Remove size grip from statusbar. This patch removes the size grip from statsbar to fix a visual bug. Signed-off-by: Slendi <[email protected]> * Add a better background color for the logging button. Signed-off-by: Slendi <[email protected]> * Use a QSplitter instead of a HBox for the QGroupBoxes. Signed-off-by: Slendi <[email protected]> * Make the colors slightly lighter * Update i18n_en.ts --------- Signed-off-by: Slendi <[email protected]> Co-authored-by: Raymond Li <[email protected]>
CharaChorder · Aug 21, 2023 · a7f75c6 · a7f75c6
1 parent 1f9084b
commit a7f75c6
Show file tree

Hide file tree

Showing 4 changed files with 255 additions and 148 deletions.
diff --git a/src/nexus/GUI.py b/src/nexus/GUI.py
@@ -12,6 +12,8 @@
 from nexus.ui.ConfirmDialog import Ui_ConfirmDialog
 from nexus.ui.MainWindow import Ui_MainWindow
 
+from nexus.style import stylesheet, Colors
+
 from nexus.Freqlog.Definitions import CaseSensitivity
 
 
@@ -21,6 +23,7 @@ class MainWindow(QMainWindow, Ui_MainWindow):
     def __init__(self, *args, **kwargs):
         super(MainWindow, self).__init__(*args, **kwargs)
         self.setupUi(self)
+        self.startStopButton.setStyleSheet("background-color: " + Colors.button_green)
 
 
 class BanlistDialog(QDialog, Ui_BanlistDialog):
@@ -64,6 +67,7 @@ def __init__(self, args: argparse.Namespace):
         """Initialize GUI"""
         self.app = QApplication([])
         self.window = MainWindow()
+        self.app.setStyleSheet(stylesheet)
 
         # Translation
         self.translator = Translator(self.app)
@@ -109,7 +113,7 @@ def start_stop(self):
             self.start_stop_button.blockSignals(True)
             self.start_stop_button.setEnabled(False)
             self.start_stop_button.setText(self.tr("GUI", "Starting..."))
-            self.start_stop_button.setStyleSheet("background-color: yellow")
+            self.start_stop_button.setStyleSheet("background-color: " + Colors.button_yellow)
             self.window.repaint()
 
             # Start freqlogging
@@ -120,7 +124,7 @@ def start_stop(self):
             while not (self.freqlog and self.freqlog.is_logging):
                 pass
             self.start_stop_button.setText(self.tr("GUI", "Stop logging"))
-            self.start_stop_button.setStyleSheet("background-color: red")
+            self.start_stop_button.setStyleSheet("background-color: " + Colors.button_red)
             self.start_stop_button.setEnabled(True)
             self.start_stop_button.blockSignals(False)
             self.start_stop_button_started = True
@@ -129,7 +133,7 @@ def start_stop(self):
         else:
             # Update button to stopping
             self.start_stop_button.setText("Stopping...")
-            self.start_stop_button.setStyleSheet("background-color: yellow")
+            self.start_stop_button.setStyleSheet("background-color: " + Colors.button_yellow)
             self.start_stop_button.blockSignals(True)
             self.start_stop_button.setEnabled(False)
             self.window.repaint()
@@ -140,7 +144,7 @@ def start_stop(self):
             # Update button to start
             self.logging_thread.join()
             self.start_stop_button.setText(self.tr("GUI", "Start logging"))
-            self.start_stop_button.setStyleSheet("background-color: green")
+            self.start_stop_button.setStyleSheet("background-color: " + Colors.button_green)
             self.start_stop_button.setEnabled(True)
             self.start_stop_button.blockSignals(False)
             self.start_stop_button_started = False

diff --git a/src/nexus/style.py b/src/nexus/style.py
@@ -0,0 +1,100 @@
+class Colors:
+    button_red = '#550000'
+    button_yellow = '#777700'
+    button_green = '#005500'
+
+
+stylesheet = '''
+* {
+    background-color: #0b0b0b;
+    color: #ffffff;
+}
+
+QPushButton {
+    background: #111111;
+    padding: 5px;
+    padding-left: 15px;
+    padding-right: 15px;
+    border: 1px solid #222222;
+}
+QPushButton::hover {
+    background: #1a1a1a;
+}
+
+QStatusBar {
+    background-color: #222222;
+}
+
+QGroupBox {
+    border: 1px solid #333333;
+    border-radius: 5px;
+    margin-top: 0.5em;
+}
+QGroupBox:title {
+    color: #ffffff;
+    left: 10px;
+    subcontrol-origin: margin;
+}
+
+QTableWidget {
+    background-color: #00000000;
+}
+
+QHeaderView::section {
+    background-color: #111111;
+    border: 0;
+    border-left: 1px solid #333333;
+    padding-left: 5px;
+    padding-right: 5px;
+}
+QHeaderView::section::first { border-left: 0; }
+
+QScrollBar {
+    border: 1px solid red;
+}
+QScrollBar:horizontal {
+    border: 0px solid #999999;
+    background: transparent;
+    height: 10px;
+    margin: 0px 0px 0px 0px;
+}
+QScrollBar::handle:horizontal {
+    min-width: 0px;
+    border: 0px solid red;
+    border-radius: 4px;
+    background-color: #333333;
+}
+QScrollBar::add-line:horizontal {
+    width: 0px;
+    subcontrol-position: bottom;
+    subcontrol-origin: margin;
+}
+QScrollBar::sub-line:horizontal {
+    width: 0 px;
+    subcontrol-position: top;
+    subcontrol-origin: margin;
+}
+
+QScrollBar:vertical {
+    border: 0px solid #999999;
+    background: transparent;
+    width: 10px;
+    margin: 0px 0px 0px 0px;
+}
+QScrollBar::handle:vertical {
+    min-height: 0px;
+    border: 0px solid red;
+    border-radius: 4px;
+    background-color: #333333;
+}
+QScrollBar::add-line:vertical {
+    height: 0px;
+    subcontrol-position: bottom;
+    subcontrol-origin: margin;
+}
+QScrollBar::sub-line:vertical {
+    height: 0 px;
+    subcontrol-position: top;
+    subcontrol-origin: margin;
+}
+'''
diff --git a/translations/i18n_en.ts b/translations/i18n_en.ts
@@ -83,55 +83,55 @@
 <context>
     <name>GUI</name>
     <message>
-        <location filename="../src/nexus/GUI.py" line="142"/>
+        <location filename="../src/nexus/GUI.py" line="146"/>
         <source>GUI</source>
         <comment>Start logging</comment>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../src/nexus/GUI.py" line="111"/>
+        <location filename="../src/nexus/GUI.py" line="115"/>
         <source>GUI</source>
         <comment>Starting...</comment>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../src/nexus/GUI.py" line="122"/>
+        <location filename="../src/nexus/GUI.py" line="126"/>
         <source>GUI</source>
         <comment>Stop logging</comment>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../src/nexus/GUI.py" line="127"/>
+        <location filename="../src/nexus/GUI.py" line="131"/>
         <source>GUI</source>
         <comment>Logging started</comment>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../src/nexus/GUI.py" line="147"/>
+        <location filename="../src/nexus/GUI.py" line="151"/>
         <source>GUI</source>
         <comment>Logging stopped</comment>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../src/nexus/GUI.py" line="180"/>
+        <location filename="../src/nexus/GUI.py" line="184"/>
         <source>GUI</source>
         <comment>Loaded {} freqlogged words</comment>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../src/nexus/GUI.py" line="243"/>
+        <location filename="../src/nexus/GUI.py" line="247"/>
         <source>GUI</source>
         <comment>Unban {} words</comment>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../src/nexus/GUI.py" line="245"/>
+        <location filename="../src/nexus/GUI.py" line="249"/>
         <source>GUI</source>
         <comment>Unban one word</comment>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../src/nexus/GUI.py" line="262"/>
+        <location filename="../src/nexus/GUI.py" line="266"/>
         <source>GUI</source>
         <comment>Exported {} words to {}</comment>
         <translation type="unfinished"></translation>
@@ -165,22 +165,22 @@
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../ui/main.ui" line="67"/>
+        <location filename="../ui/main.ui" line="69"/>
         <source>Chorded Entry</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../ui/main.ui" line="110"/>
+        <location filename="../ui/main.ui" line="112"/>
         <source>Chord</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../ui/main.ui" line="115"/>
+        <location filename="../ui/main.ui" line="117"/>
         <source>Frequency</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../ui/main.ui" line="120"/>
+        <location filename="../ui/main.ui" line="122"/>
         <location filename="../ui/main.ui" line="184"/>
         <source>Last used</source>
         <translation type="unfinished"></translation>