Skip to content

Commit d0eda16

Browse files
Jintao MaJintao Ma
Jintao Ma
authored and
Jintao Ma
committed
Refactor: Move inline styles to style.qss and unify UI components (Common/Class/Loc)
1 parent 6abecdf commit d0eda16

12 files changed

Lines changed: 375 additions & 166 deletions

File tree

‎annotation_tool/style/style.qss‎

Lines changed: 337 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -174,3 +174,340 @@ QSlider::sub-page:horizontal {
174174
background: #007ACC; /* Filled portion */
175175
border-radius: 3px;
176176
}
177+
178+
/* =======================================================
179+
Unified UI Component Styles
180+
======================================================= */
181+
182+
/* --- Project Controls (Left Panel Buttons) --- */
183+
/* Target: ui/common/project_controls.py */
184+
QPushButton[class="project_control_btn"] {
185+
border-radius: 6px;
186+
padding: 5px;
187+
background-color: #444;
188+
color: #EEE;
189+
border: 1px solid #555;
190+
font-weight: bold;
191+
min-height: 35px; /* Moved from setMinimumHeight in Python if desired, or keep logic there */
192+
}
193+
194+
QPushButton[class="project_control_btn"]:hover {
195+
background-color: #555;
196+
border-color: #777;
197+
}
198+
199+
QPushButton[class="project_control_btn"]:pressed {
200+
background-color: #0078D7;
201+
border-color: #0078D7;
202+
}
203+
204+
QPushButton[class="project_control_btn"]:disabled {
205+
background-color: #333;
206+
color: #777;
207+
border-color: #333;
208+
}
209+
210+
/* --- Dialogs: Project Type Selection --- */
211+
/* Target: ui/common/dialogs.py */
212+
213+
/* The instruction text */
214+
QLabel[class="dialog_instruction_lbl"] {
215+
font-size: 14px;
216+
font-weight: bold;
217+
color: #ccc;
218+
}
219+
220+
/* The large Classification/Localization buttons */
221+
QPushButton[class="dialog_mode_btn"] {
222+
font-size: 16px;
223+
background-color: #2A2A2A;
224+
border: 2px solid #444;
225+
border-radius: 8px;
226+
min-height: 80px; /* Enforce height here */
227+
}
228+
229+
QPushButton[class="dialog_mode_btn"]:hover {
230+
background-color: #3A3A3A;
231+
border-color: #00BFFF; /* The cyan highlight color */
232+
}
233+
234+
/* --- Welcome Screen --- */
235+
/* Target: ui/common/welcome_widget.py */
236+
237+
QLabel#welcome_title_lbl {
238+
font-size: 24px;
239+
font-weight: bold;
240+
color: #00BFFF;
241+
}
242+
243+
QPushButton[class="welcome_action_btn"] {
244+
font-size: 16px;
245+
font-weight: bold;
246+
/* Size (200x50) is better handled in Layout/Python,
247+
but colors fall back to default QPushButton styles unless overridden here */
248+
}
249+
250+
/* --- Common Project Tree Panel --- */
251+
/* Target: ui/common/clip_explorer.py */
252+
253+
QLabel[class="panel_header_lbl"] {
254+
font-weight: bold;
255+
color: #888;
256+
margin-top: 10px;
257+
}
258+
259+
QPushButton#panel_clear_btn {
260+
padding: 4px 8px;
261+
}
262+
263+
/* =======================================================
264+
Classification Mode Styles
265+
======================================================= */
266+
267+
/* --- Event Editor Panel --- */
268+
/* Target: ui/classification/event_editor/editor.py */
269+
270+
/* Undo/Redo Buttons */
271+
QPushButton[class="editor_control_btn"] {
272+
background-color: #444;
273+
color: #DDD;
274+
border: 1px solid #555;
275+
border-radius: 4px;
276+
padding: 4px;
277+
font-weight: bold;
278+
}
279+
280+
QPushButton[class="editor_control_btn"]:hover {
281+
background-color: #555;
282+
border-color: #777;
283+
}
284+
285+
QPushButton[class="editor_control_btn"]:disabled {
286+
color: #666;
287+
background-color: #333;
288+
}
289+
290+
/* Task Info Label */
291+
QLabel[class="editor_task_lbl"] {
292+
font-weight: bold;
293+
font-size: 14px;
294+
margin-bottom: 5px;
295+
}
296+
297+
/* Save/Confirm Annotation Button */
298+
QPushButton[class="editor_save_btn"] {
299+
background-color: #0078D7;
300+
color: white;
301+
font-weight: bold;
302+
}
303+
304+
QPushButton[class="editor_save_btn"]:hover {
305+
background-color: #008AE6;
306+
}
307+
308+
/* --- Dynamic Widgets (Label Groups) --- */
309+
/* Target: ui/classification/event_editor/dynamic_widgets.py */
310+
311+
/* Common Header Style */
312+
QLabel[class="group_head_lbl"] {
313+
font-weight: bold;
314+
font-size: 13px;
315+
}
316+
317+
/* Specific Colors for Single vs Multi Label Headers */
318+
QLabel[class="group_head_single"] {
319+
color: #00BFFF; /* Cyan */
320+
}
321+
322+
QLabel[class="group_head_multi"] {
323+
color: #32CD32; /* Lime Green */
324+
}
325+
326+
/* Small 'X' Remove Buttons (Replaces utils.get_square_remove_btn_style) */
327+
QPushButton[class="icon_remove_btn"] {
328+
background-color: transparent;
329+
color: #888;
330+
border: none;
331+
font-weight: bold;
332+
font-size: 16px;
333+
border-radius: 3px;
334+
}
335+
336+
QPushButton[class="icon_remove_btn"]:hover {
337+
color: #FF4444; /* Red on hover */
338+
background-color: rgba(255, 68, 68, 0.1);
339+
}
340+
341+
/* --- Media Player --- */
342+
/* Target: ui/classification/media_player/preview.py */
343+
344+
/* Time Display Label (00:00 / 00:00) */
345+
QLabel[class="player_time_lbl"] {
346+
font-family: Menlo, Consolas, "Courier New", monospace;
347+
font-weight: bold;
348+
color: #EEE;
349+
}
350+
351+
352+
353+
/* =======================================================
354+
Localization Mode Styles
355+
======================================================= */
356+
357+
/* --- Media Player Preview --- */
358+
/* Target: ui/localization/media_player/preview.py */
359+
QWidget[class="video_preview_widget"] {
360+
background-color: black;
361+
}
362+
363+
/* --- Timeline Widget --- */
364+
/* Target: ui/localization/media_player/timeline.py */
365+
366+
/* Time Label (00:00 / 00:00) */
367+
QLabel[class="timeline_time_lbl"] {
368+
font-family: 'Courier New', Menlo, monospace;
369+
font-size: 12px;
370+
font-weight: bold;
371+
color: #EEE;
372+
}
373+
374+
/* Zoom Buttons (+/-) */
375+
QPushButton[class="timeline_zoom_btn"] {
376+
background-color: #444;
377+
color: white;
378+
border: 1px solid #555;
379+
border-radius: 4px;
380+
font-weight: bold;
381+
font-size: 14px;
382+
}
383+
QPushButton[class="timeline_zoom_btn"]:hover { background-color: #555; }
384+
QPushButton[class="timeline_zoom_btn"]:pressed { background-color: #666; }
385+
386+
/* Timeline ScrollArea (Container) */
387+
QScrollArea[class="timeline_scroll_area"] {
388+
background: transparent;
389+
border: none;
390+
}
391+
392+
/* Timeline ScrollBar */
393+
QScrollArea[class="timeline_scroll_area"] QScrollBar:horizontal {
394+
border: none;
395+
background: #222;
396+
height: 12px;
397+
margin: 0px;
398+
border-radius: 6px;
399+
}
400+
QScrollArea[class="timeline_scroll_area"] QScrollBar::handle:horizontal {
401+
background: #666;
402+
min-width: 20px;
403+
border-radius: 6px;
404+
}
405+
QScrollArea[class="timeline_scroll_area"] QScrollBar::add-line:horizontal,
406+
QScrollArea[class="timeline_scroll_area"] QScrollBar::sub-line:horizontal {
407+
width: 0px;
408+
}
409+
410+
/* Timeline Slider (The Track) */
411+
QSlider[class="timeline_slider"]::groove:horizontal {
412+
border: 1px solid #3A3A3A;
413+
height: 6px;
414+
background: #202020;
415+
margin: 0px;
416+
border-radius: 3px;
417+
}
418+
QSlider[class="timeline_slider"]::handle:horizontal {
419+
background: #FF3333;
420+
border: 1px solid #FF3333;
421+
width: 8px;
422+
height: 16px;
423+
margin: -5px 0;
424+
border-radius: 4px;
425+
}
426+
QSlider[class="timeline_slider"]::sub-page:horizontal {
427+
background: #444;
428+
border-radius: 3px;
429+
}
430+
431+
/* --- Spotting Controls (Tabs & Labels) --- */
432+
/* Target: ui/localization/event_editor/spotting_controls.py */
433+
434+
/* Label Grid Buttons */
435+
QPushButton[class="spotting_label_btn"] {
436+
background-color: #444;
437+
color: white;
438+
border: 1px solid #555;
439+
border-radius: 6px;
440+
font-weight: bold;
441+
font-size: 13px;
442+
text-align: center;
443+
padding: 4px;
444+
}
445+
QPushButton[class="spotting_label_btn"]:hover { background-color: #555; border-color: #777; }
446+
QPushButton[class="spotting_label_btn"]:pressed { background-color: #0078D7; border-color: #0078D7; }
447+
448+
/* Time Display in Tab */
449+
QLabel[class="spotting_time_lbl"] {
450+
color: #00BFFF;
451+
font-weight: bold;
452+
font-family: Menlo, monospace;
453+
font-size: 14px;
454+
}
455+
456+
/* Transparent ScrollArea for Buttons */
457+
QScrollArea[class="spotting_scroll_area"] {
458+
background: transparent;
459+
border: none;
460+
}
461+
462+
/* "Add Label" Button */
463+
QPushButton[class="spotting_add_btn"] {
464+
background-color: #0078D7;
465+
color: white;
466+
border: 1px solid #005A9E;
467+
border-radius: 6px;
468+
font-weight: bold;
469+
font-size: 13px;
470+
min-height: 45px;
471+
}
472+
QPushButton[class="spotting_add_btn"]:hover { background-color: #1084E3; border-color: #2094F3; }
473+
QPushButton[class="spotting_add_btn"]:pressed { background-color: #005A9E; }
474+
475+
/* Spotting Tab Widget */
476+
QTabWidget[class="spotting_tabs"]::pane {
477+
border: 1px solid #444;
478+
border-radius: 4px;
479+
background: #2E2E2E;
480+
}
481+
QTabWidget[class="spotting_tabs"] > QTabBar::tab {
482+
background: #3A3A3A;
483+
color: #BBB;
484+
padding: 8px 12px;
485+
border-top-left-radius: 4px;
486+
border-top-right-radius: 4px;
487+
margin-right: 2px;
488+
}
489+
QTabWidget[class="spotting_tabs"] > QTabBar::tab:selected {
490+
background: #2E2E2E;
491+
color: white;
492+
font-weight: bold;
493+
border-bottom: 2px solid #00BFFF;
494+
}
495+
QTabWidget[class="spotting_tabs"] > QTabBar::tab:hover {
496+
background: #444;
497+
color: white;
498+
}
499+
500+
/* --- Annotation Table --- */
501+
/* Target: ui/localization/event_editor/annotation_table.py */
502+
503+
QTableView[class="annotation_table"] {
504+
background-color: #2E2E2E;
505+
gridline-color: #555;
506+
color: #DDD;
507+
selection-background-color: #0078D7;
508+
selection-color: white;
509+
alternate-background-color: #3A3A3A;
510+
}
511+
QTableView[class="annotation_table"] QHeaderView::section {
512+
background-color: #444; color: white; border: 1px solid #555; padding: 4px;
513+
}

‎annotation_tool/ui/classification/event_editor/dynamic_widgets.py‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
QLineEdit, QButtonGroup, QRadioButton, QCheckBox
44
)
55
from PyQt6.QtCore import pyqtSignal, Qt
6-
from utils import get_square_remove_btn_style
76

87
class DynamicSingleLabelGroup(QWidget):
98
value_changed = pyqtSignal(str, str) # head, selected_label
@@ -21,12 +20,12 @@ def __init__(self, head_name, definition, parent=None):
2120
# Header
2221
header_layout = QHBoxLayout()
2322
self.lbl_head = QLabel(head_name)
24-
self.lbl_head.setStyleSheet("font-weight: bold; font-size: 13px; color: #00BFFF;")
23+
self.lbl_head.setProperty("class", "group_head_lbl group_head_single")
2524

2625
self.btn_del_cat = QPushButton("×")
2726
self.btn_del_cat.setFixedSize(20, 20)
2827
self.btn_del_cat.setCursor(Qt.CursorShape.PointingHandCursor)
29-
self.btn_del_cat.setStyleSheet(get_square_remove_btn_style())
28+
self.btn_del_cat.setProperty("class", "icon_remove_btn")
3029
self.btn_del_cat.clicked.connect(lambda: self.remove_category_signal.emit(self.head_name))
3130

3231
header_layout.addWidget(self.lbl_head)
@@ -78,7 +77,7 @@ def update_radios(self, labels):
7877
del_label_btn = QPushButton("×")
7978
del_label_btn.setFixedSize(20, 20)
8079
del_label_btn.setCursor(Qt.CursorShape.PointingHandCursor)
81-
del_label_btn.setStyleSheet(get_square_remove_btn_style())
80+
del_label_btn.setProperty("class", "icon_remove_btn")
8281
del_label_btn.clicked.connect(lambda _, l=lbl_text: self.remove_label_signal.emit(l, self.head_name))
8382

8483
row_layout.addWidget(rb)
@@ -121,11 +120,11 @@ def __init__(self, head_name, definition, parent=None):
121120
# Header
122121
header_layout = QHBoxLayout()
123122
self.lbl_head = QLabel(head_name + " (Multi)")
124-
self.lbl_head.setStyleSheet("font-weight: bold; font-size: 13px; color: #32CD32;")
123+
self.lbl_head.setProperty("class", "group_head_lbl group_head_multi")
125124

126125
self.btn_del_cat = QPushButton("×")
127126
self.btn_del_cat.setFixedSize(20, 20)
128-
self.btn_del_cat.setStyleSheet(get_square_remove_btn_style())
127+
self.btn_del_cat.setProperty("class", "icon_remove_btn")
129128
self.btn_del_cat.clicked.connect(lambda: self.remove_category_signal.emit(self.head_name))
130129

131130
header_layout.addWidget(self.lbl_head)
@@ -171,7 +170,7 @@ def update_checkboxes(self, new_types):
171170
del_label_btn = QPushButton("×")
172171
del_label_btn.setFixedSize(20, 20)
173172
del_label_btn.setCursor(Qt.CursorShape.PointingHandCursor)
174-
del_label_btn.setStyleSheet(get_square_remove_btn_style())
173+
del_label_btn.setProperty("class", "icon_remove_btn")
175174
del_label_btn.clicked.connect(lambda _, n=type_name: self.remove_label_signal.emit(n, self.head_name))
176175

177176
row_layout.addWidget(cb)

0 commit comments

Comments
 (0)