Improve look of start screen and add toast to copy room ID button
This commit is contained in:
3
desktop-client/check.svg
Normal file
3
desktop-client/check.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#4BB543" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="20 6 9 17 4 12"></polyline>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 237 B |
4
desktop-client/copy.svg
Normal file
4
desktop-client/copy.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#aaaaaa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
||||
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 333 B |
@@ -168,7 +168,11 @@ class VlcSyncApp(QMainWindow):
|
||||
topbar_layout = QHBoxLayout(self.topbar)
|
||||
|
||||
self.room_code_display = QLabel("Room: XXXX")
|
||||
self.copy_code_btn = QPushButton("📋")
|
||||
self.copy_code_btn = QPushButton()
|
||||
self.copy_code_btn.setObjectName("iconBtn")
|
||||
self.copy_icon = QIcon(os.path.join(os.path.dirname(__file__), "copy.svg"))
|
||||
self.check_icon = QIcon(os.path.join(os.path.dirname(__file__), "check.svg"))
|
||||
self.copy_code_btn.setIcon(self.copy_icon)
|
||||
self.copy_code_btn.setFixedSize(30, 30)
|
||||
self.copy_code_btn.setToolTip("Copy Room Code")
|
||||
self.copy_code_btn.clicked.connect(self.copy_room_code)
|
||||
@@ -225,7 +229,7 @@ class VlcSyncApp(QMainWindow):
|
||||
# Fullscreen
|
||||
self.fullscreen_btn = QPushButton("⛶")
|
||||
self.fullscreen_btn.setFixedSize(40, 40)
|
||||
self.fullscreen_btn.setObjectName("fullscreenBtn")
|
||||
self.fullscreen_btn.setObjectName("iconBtn")
|
||||
self.fullscreen_btn.clicked.connect(self.toggle_fullscreen)
|
||||
|
||||
controls_layout.addWidget(self.play_btn)
|
||||
@@ -373,8 +377,23 @@ class VlcSyncApp(QMainWindow):
|
||||
def copy_room_code(self):
|
||||
if self.room_code:
|
||||
QApplication.clipboard().setText(self.room_code)
|
||||
self.copy_code_btn.setText("✓")
|
||||
QTimer.singleShot(2000, lambda: self.copy_code_btn.setText("📋"))
|
||||
self.copy_code_btn.setIcon(self.check_icon)
|
||||
|
||||
# Show floating tooltip for feedback
|
||||
toast = QLabel("Copied!", self)
|
||||
toast.setStyleSheet("background-color: #4BB543; color: white; padding: 4px 8px; border-radius: 4px; font-weight: bold;")
|
||||
toast.setWindowFlags(Qt.WindowType.ToolTip | Qt.WindowType.FramelessWindowHint)
|
||||
|
||||
# Position the toast slightly below the button
|
||||
pos = self.copy_code_btn.mapToGlobal(self.copy_code_btn.rect().bottomLeft())
|
||||
toast.move(pos.x(), pos.y() + 5)
|
||||
toast.show()
|
||||
|
||||
def reset():
|
||||
self.copy_code_btn.setIcon(self.copy_icon)
|
||||
toast.deleteLater()
|
||||
|
||||
QTimer.singleShot(1500, reset)
|
||||
|
||||
def check_inputs(self):
|
||||
has_name = len(self.username_input.text().strip()) > 0
|
||||
@@ -610,6 +629,7 @@ class VlcSyncApp(QMainWindow):
|
||||
color: #aaaaaa;
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#fileInfo {
|
||||
@@ -639,6 +659,16 @@ class VlcSyncApp(QMainWindow):
|
||||
padding: 10px 16px;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
background-color: #272727;
|
||||
color: white;
|
||||
border: 1px solid #444;
|
||||
}
|
||||
QPushButton:hover {
|
||||
background-color: #333;
|
||||
}
|
||||
QPushButton:disabled {
|
||||
border-color: #222;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
#primaryBtn {
|
||||
@@ -654,17 +684,13 @@ class VlcSyncApp(QMainWindow):
|
||||
color: #666;
|
||||
}
|
||||
|
||||
#secondaryBtn {
|
||||
background-color: #272727;
|
||||
color: white;
|
||||
border: 1px solid #444;
|
||||
#iconBtn {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
padding: 5px;
|
||||
}
|
||||
#secondaryBtn:hover {
|
||||
background-color: #333;
|
||||
}
|
||||
#secondaryBtn:disabled {
|
||||
border-color: #222;
|
||||
color: #666;
|
||||
#iconBtn:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
#dangerBtn {
|
||||
|
||||
Reference in New Issue
Block a user