major main window style changes

octogon/gui/layout.py

@@ -2,98 +2,62 @@
 Handles setting up the layout for the main QT
 """
 
+from PyQt5.QtCore import Qt
 from PyQt5.QtWidgets import (
+    QLabel,
     QGridLayout,
     QWidget,
     QPushButton,
 )
 
+from PyQt5.QtCore import QMargins
+
 import typing
 from octogon.gui.gui import SBTextWidget, SBDropdownWidget, SBWinsWidget, SBPortWidget
 from octogon.utils.lookup import characters
+from octogon.gui.layouts.scoreboard import ScoreboardLayout
 
 if typing.TYPE_CHECKING:
     from octogon.gui.window import OctogonWidget
 
 
 def create_layout(window: "OctogonWidget") -> QWidget:
 
-    wid = QWidget(window)
-    window.setCentralWidget(wid)
-
-    # player names
-    sb_p1_name = window.sb_text("P1 Name", "p1.name")
-    sb_p2_name = window.sb_text("P2 Name", "p2.name")
-
-    # characters chosen
-    character_names = list(characters.values())
-
-    sb_p1_char = window.sb_dropdown(
-        "Character", key="p1.character", items=character_names
-    )
-
-    sb_p2_char = window.sb_dropdown(
-        "Character", key="p2.character", items=character_names
-    )
-
-    # number of wins per player
-    # sb_p1_wins = QButtonGroup(window)
-    sb_p1_wins = window.sb_wins("Wins", "p1.wins")
-    sb_p2_wins = window.sb_wins("Wins", "p2.wins")
-
-    # controller port per player
-    sb_p1_port = window.sb_port("p1.port", 0)
-    sb_p2_port = window.sb_port("p2.port", 1)
-
-    # round title
-    sb_round_title = window.sb_text("Round Title", "round_title")
-
-    # best of 3/5
-    sb_round_games = window.sb_dropdown("Best of", "round_games", ["3", "5"])
-
-    sb_update_bt = window._button("Update", "update_btn")
-    sb_update_bt.clicked.connect(window.listener.update_scoreboard)
-
-    sb_bt_swap = window._button("Swap P1/P2", "swap_btn")
-    sb_bt_swap.clicked.connect(window.listener.swap)
+    widget = QWidget(window)
+    window.setCentralWidget(widget)
 
-    # sub-layout for scoreboard options
-    sb_group = QGridLayout(wid)
-    sb_group.setSpacing(12)
+    layout = QGridLayout(window)
+    layout.setSpacing(0)
+    layout.setContentsMargins(QMargins(0, 0, 0, 0))
 
-    sb_group.addWidget(sb_p1_name.label, 0, 0, 1, 2)
-    sb_group.addWidget(sb_p1_name.edit, 0, 2, 1, 4)
-    for i, btn in enumerate(sb_p1_port.btns):
-        sb_group.addWidget(btn, 0, 6 + i)
+    widget.setLayout(layout)
 
-    sb_group.addWidget(sb_p2_name.label, 0, 10, 1, 2)
-    sb_group.addWidget(sb_p2_name.edit, 0, 12, 1, 4)
-    for i, btn in enumerate(sb_p2_port.btns):
-        sb_group.addWidget(btn, 0, 16 + i)
+    # title bar
+    # -------------------------------------------------
 
-    sb_group.addWidget(sb_p1_char.label, 1, 0, 1, 2)
-    sb_group.addWidget(sb_p1_char.edit, 1, 2, 1, 4)
-    sb_group.addWidget(sb_p2_char.label, 1, 10, 1, 2)
-    sb_group.addWidget(sb_p2_char.edit, 1, 12, 1, 4)
+    title_widget = QWidget(widget)
+    title_widget.setObjectName("title_layout")
+    title_layout = QGridLayout(title_widget)
+    title_widget.setLayout(title_layout)
 
-    sb_group.addWidget(sb_p1_wins.label, 2, 0, 1, 2)
-    for i, btn in enumerate(sb_p1_wins.btns):
-        sb_group.addWidget(btn, 2, 2 + i)
+    sb_title = QLabel("Octogon Tool")
+    sb_title.setObjectName("title")
+    sb_title.setAlignment(Qt.AlignLeft | Qt.AlignBottom)
 
-    sb_group.addWidget(sb_p2_wins.label, 2, 10, 1, 2)
-    for i, btn in enumerate(sb_p2_wins.btns):
-        sb_group.addWidget(btn, 2, 12 + i)
+    sb_exit = QPushButton("✖")
+    sb_exit.setObjectName("exit_btn")
+    sb_exit.setFixedSize(24, 24)
+    sb_exit.clicked.connect(window.close)
 
-    sb_group.addWidget(sb_round_title.label, 3, 0, 1, 2)
-    sb_group.addWidget(sb_round_title.edit, 3, 2, 1, 4)
-    sb_group.addWidget(sb_round_games.label, 3, 6, 1, 2)
-    sb_group.addWidget(sb_round_games.edit, 3, 8, 1, 2)
-    sb_group.addWidget(sb_bt_swap, 3, 10, 1, 10)
+    title_layout.addWidget(sb_title, 0, 0)
+    title_layout.addWidget(sb_exit, 0, 1)
 
-    sb_group.addWidget(sb_update_bt, 4, 0, 1, 20)
+    # scoreboard controls
+    # -------------------------------------------------
 
-    # grid.addLayout(sb_group, 0, 0)
+    scoreboard_layout = ScoreboardLayout(window)
 
-    wid.setLayout(sb_group)
+    layout.addWidget(title_widget, 0, 0)
+    layout.addLayout(scoreboard_layout, 1, 0)
 
-    return wid
+    return widget

octogon/gui/layouts/scoreboard.py

@@ -0,0 +1,85 @@
+from PyQt5.QtWidgets import QGridLayout
+from PyQt5.QtCore import QMargins
+
+import typing
+from octogon.utils.lookup import characters
+
+if typing.TYPE_CHECKING:
+    from octogon.gui.window import OctogonWidget
+
+
+class ScoreboardLayout(QGridLayout):
+    """The QT layout that displays the scoreboard controls."""
+
+    def __init__(self, window: "OctogonWidget"):
+        super().__init__(window)
+
+        self.setContentsMargins(QMargins(20, 20, 20, 20))
+        self.setSpacing(10)
+
+        # player names
+        sb_p1_name = window.sb_text("P1 Name", "p1.name")
+        sb_p2_name = window.sb_text("P2 Name", "p2.name")
+
+        # characters chosen
+        character_names = list(characters.values())
+
+        sb_p1_char = window.sb_dropdown(
+            "Character", key="p1.character", items=character_names
+        )
+
+        sb_p2_char = window.sb_dropdown(
+            "Character", key="p2.character", items=character_names
+        )
+
+        # number of wins per player
+        # sb_p1_wins = QButtonGroup(window)
+        sb_p1_wins = window.sb_wins("Wins", "p1.wins")
+        sb_p2_wins = window.sb_wins("Wins", "p2.wins")
+
+        # controller port per player
+        sb_p1_port = window.sb_port("p1.port", 0)
+        sb_p2_port = window.sb_port("p2.port", 1)
+
+        # round title
+        sb_round_title = window.sb_text("Round Title", "round_title")
+
+        # best of 3/5
+        sb_round_games = window.sb_dropdown("Best of", "round_games", ["3", "5"])
+
+        sb_update_bt = window._button("Update", "update_btn")
+        sb_update_bt.clicked.connect(window.listener.update_scoreboard)
+
+        sb_bt_swap = window._button("Swap P1/P2", "swap_btn")
+        sb_bt_swap.clicked.connect(window.listener.swap)
+
+        self.addWidget(sb_p1_name.label, 1, 0, 1, 2)
+        self.addWidget(sb_p1_name.edit, 1, 2, 1, 4)
+        for i, btn in enumerate(sb_p1_port.btns):
+            self.addWidget(btn, 1, 6 + i)
+
+        self.addWidget(sb_p2_name.label, 1, 10, 1, 2)
+        self.addWidget(sb_p2_name.edit, 1, 12, 1, 4)
+        for i, btn in enumerate(sb_p2_port.btns):
+            self.addWidget(btn, 1, 16 + i)
+
+        self.addWidget(sb_p1_char.label, 2, 0, 1, 2)
+        self.addWidget(sb_p1_char.edit, 2, 2, 1, 4)
+        self.addWidget(sb_p2_char.label, 2, 10, 1, 2)
+        self.addWidget(sb_p2_char.edit, 2, 12, 1, 4)
+
+        self.addWidget(sb_p1_wins.label, 3, 0, 1, 2)
+        for i, btn in enumerate(sb_p1_wins.btns):
+            self.addWidget(btn, 3, 2 + i)
+
+        self.addWidget(sb_p2_wins.label, 3, 10, 1, 2)
+        for i, btn in enumerate(sb_p2_wins.btns):
+            self.addWidget(btn, 3, 12 + i)
+
+        self.addWidget(sb_round_title.label, 4, 0, 1, 2)
+        self.addWidget(sb_round_title.edit, 4, 2, 1, 4)
+        self.addWidget(sb_round_games.label, 4, 6, 1, 2)
+        self.addWidget(sb_round_games.edit, 4, 8, 1, 2)
+        self.addWidget(sb_bt_swap, 4, 10, 1, 10)
+
+        self.addWidget(sb_update_bt, 5, 0, 1, 20)

octogon/gui/window.py

@@ -9,7 +9,7 @@
 from octogon.gui.layout import create_layout
 from octogon.gui.gui import SBTextWidget, SBDropdownWidget, SBWinsWidget, SBPortWidget
 
-from PyQt5.QtCore import Qt, QTimer
+from PyQt5.QtCore import Qt, QTimer, QPoint
 from PyQt5.QtGui import QKeyEvent
 from PyQt5.QtWidgets import QApplication, QMainWindow, QPushButton
 
@@ -34,7 +34,6 @@ def __init__(self, octogon: "Octogon"):
         self.listener = WindowListener(self)
         self.widget = create_layout(self)
 
-        # layout
         # menubar
         # -------
         # action = QAction("&Exit", self)
@@ -45,16 +44,29 @@ def __init__(self, octogon: "Octogon"):
         # fileMenu = menubar.addMenu("&File")
         # fileMenu.addAction(action)
 
-        self.update_css()
+        # configure the window
+        self.setWindowTitle("Octogon")
+        self.setWindowFlags(Qt.FramelessWindowHint)
         self.setFixedSize(*WINDOW_SIZE)
         self.setGeometry(300, 300, *WINDOW_SIZE)
-        self.setWindowTitle("Octogon")
+        self.update_css()
+
+        self.old_pos = self.pos()
+
         self.show()
 
     def keyPressEvent(self, e: QKeyEvent):
         if e.key() == Qt.Key_C:
             self.close()
 
+    def mousePressEvent(self, event):
+        self.old_pos = event.globalPos()
+
+    def mouseMoveEvent(self, event):
+        delta = QPoint(event.globalPos() - self.old_pos)
+        self.move(self.x() + delta.x(), self.y() + delta.y())
+        self.old_pos = event.globalPos()
+
     def update_css(self):
         """Re-read the stylesheet for the window."""
         # compile the scss file

templates/qtsass/window.scss

@@ -2,7 +2,9 @@
 /* stylesheet for the main Octogon window */
 
  $fg: #DDDDDD;
- $bg: #202020;
+ $bg: #252525;
+
+ $title_fg: #BEBEBE;
 
  $textbox_fg: #eeeeee;
  $textbox_bg: 0 #303030, 1 #383838;
@@ -19,6 +21,9 @@
  $button_update_hover_bg: 1 #A1A5FF, 0 #7A80FD;
  $button_update_pressed_bg: 0 #696FE5, 1 #7D82E8;
 
+ $button_exit_bg: #C42828;
+ $button_exit_hover_bg: #DC5454;
+
  $checkbox_off_bg: 0 #151515, 1 #252525;
  $checkbox_off_hover_bg: #252525;
  $checkbox_on_bg: 0 #D9D9D9, 1 #BBBBBB;
@@ -30,11 +35,27 @@
  $checkbox_port2_on_bg: 0 #FFE7A1, 1 #FDDC7A;
  $checkbox_port3_on_bg: 0 #64d07C, 1 #76BA76;
 
+* {
+	//border: 2px solid red;
+}
+
 QWidget {
 	color: $fg;
 	background-color: $bg;
 }
 
+#title_layout {
+	background-color: #202020;
+}
+
+QLabel#title {
+	color: $title_fg;
+	padding-left: 4px;
+	padding-top: 4px;
+	font-size: 11pt;
+	background: none;
+}
+
 /* ========================================================================== */
 /* QLineEdits */
 /* ========================================================================== */
@@ -112,6 +133,14 @@ QPushButton::pressed#update_btn {
 	background-color: qlineargradient(0, 0, 0, 1, $button_update_pressed_bg);
 }
 
+QPushButton#exit_btn {
+	border-radius: 12px;
+
+	background: $button_exit_bg;
+	&::hover {background: $button_exit_hover_bg;}
+	&::pressed {background: $button_exit_bg;}
+}
+
 /* ========================================================================== */
 /* QCheckBoxes */
 /* ========================================================================== */