Add legacy visualization widget for translation progress

- Implemented OldVisualizerWidget to display translation progress using a legacy design.
- Integrated data loading from DataManager and structured UI with scrollable project views.
- Added functionality to export the visualization as a PNG image.
- Included detailed progress tracking with tables and progress bars for each game section.
- Enhanced UI with custom styles for better user experience.

Author: Вена

editor.py

@@ -63,32 +63,38 @@ def init_ui(self):
             QLineEdit, QSpinBox {{
                 background-color: {COLORS['surface']};
                 border: 1px solid {COLORS['border']};
-                border-radius: 4px;
-                padding: 8px;
-                font-size: 14px;
+                border-radius: 8px;
+                padding: 8px 10px;
+                font-size: 13px;
                 color: {COLORS['text']};
-                min-height: 20px;
-                min-width: 100px;
+                height: 28px;
+                margin: 2px;
+            }}
+            QSpinBox::up-button, QSpinBox::down-button {{
+                width: 0px;
+                height: 0px;
             }}
             QLineEdit:focus, QSpinBox:focus {{
                 border: 1px solid {COLORS['accent']};
             }}
             QTableWidget {{
                 background-color: {COLORS['surface']};
                 border: 1px solid {COLORS['border']};
-                border-radius: 8px;
                 gridline-color: {COLORS['border']};
                 color: {COLORS['text']};
+                font-size: 13px;
             }}
             QTableWidget::item {{
-                padding: 4px;
+                padding: 0px;
+                margin: 0px;
             }}
             QHeaderView::section {{
                 background-color: {COLORS['overlay']};
                 color: {COLORS['text']};
-                padding: 6px;
+                padding: 10px;
                 border: none;
                 font-weight: bold;
+                font-size: 13px;
             }}
         """)
 
@@ -207,6 +213,20 @@ def create_editor_panel(self) -> QWidget:
         name_label.setFixedWidth(100)
         self.game_name_input = QLineEdit()
         self.game_name_input.setPlaceholderText("Введіть назву гри...")
+        self.game_name_input.setStyleSheet(f"""
+            QLineEdit {{
+                background-color: {COLORS['surface']};
+                border: 1px solid {COLORS['border']};
+                border-radius: 12px;
+                padding: 10px;
+                font-size: 14px;
+                color: {COLORS['text']};
+                min-height: 32px;
+            }}
+            QLineEdit:focus {{
+                border: 1px solid {COLORS['accent']};
+            }}
+        """)
         name_layout.addWidget(name_label)
         name_layout.addWidget(self.game_name_input)
         info_layout.addLayout(name_layout)
@@ -263,6 +283,8 @@ def create_editor_panel(self) -> QWidget:
 
         self.sections_table.verticalHeader().setVisible(False)
         self.sections_table.verticalHeader().setSectionResizeMode(QHeaderView.ResizeMode.ResizeToContents)
+
+        self.sections_table.setShowGrid(False)
         layout.addWidget(self.sections_table)
 
         # Add section button
@@ -378,42 +400,36 @@ def add_section_to_table(self, section: dict = None):
         name_input = QLineEdit()
         name_input.setText(section.get('name', '') if section else '')
         name_input.setPlaceholderText("Назва секції")
-        name_input.setMinimumWidth(200)
         self.sections_table.setCellWidget(row, 0, name_input)
 
         # Total
         total_spin = QSpinBox()
         total_spin.setMaximum(999999999)
         total_spin.setValue(section.get('total', 0) if section else 0)
-        total_spin.setMinimumWidth(100)
         self.sections_table.setCellWidget(row, 1, total_spin)
 
         # Translated
         translated_spin = QSpinBox()
         translated_spin.setMaximum(999999999)
         translated_spin.setValue(section.get('translated', 0) if section else 0)
-        translated_spin.setMinimumWidth(100)
         self.sections_table.setCellWidget(row, 2, translated_spin)
 
         # Translated Label (custom)
         trans_label_input = QLineEdit()
         trans_label_input.setText(section.get('translated_label', '') if section else '')
         trans_label_input.setPlaceholderText("Перекладено")
-        trans_label_input.setMinimumWidth(120)
         self.sections_table.setCellWidget(row, 3, trans_label_input)
 
         # Approved
         approved_spin = QSpinBox()
         approved_spin.setMaximum(999999999)
         approved_spin.setValue(section.get('approved', 0) if section else 0)
-        approved_spin.setMinimumWidth(100)
         self.sections_table.setCellWidget(row, 4, approved_spin)
 
         # Approved Label (custom)
         appr_label_input = QLineEdit()
         appr_label_input.setText(section.get('approved_label', '') if section else '')
         appr_label_input.setPlaceholderText("Затверджено")
-        appr_label_input.setMinimumWidth(120)
         self.sections_table.setCellWidget(row, 5, appr_label_input)
 
         # Exclude checkbox
@@ -428,20 +444,29 @@ def add_section_to_table(self, section: dict = None):
 
         # Delete button
         delete_btn = QPushButton("🗑️")
-        delete_btn.setFixedSize(30, 30)
+        delete_btn.setMaximumWidth(24)
+        delete_btn.setMaximumHeight(24)
         delete_btn.clicked.connect(lambda: self.delete_section(row))
         delete_btn.setStyleSheet(f"""
             QPushButton {{
                 background-color: {COLORS['error']};
                 border: none;
-                border-radius: 4px;
+                border-radius: 3px;
                 color: white;
+                padding: 0px;
+                margin: 0px;
+                font-size: 12px;
             }}
             QPushButton:hover {{
                 background-color: #e74c6c;
             }}
         """)
-        self.sections_table.setCellWidget(row, 7, delete_btn)
+        delete_widget = QWidget()
+        delete_layout = QHBoxLayout(delete_widget)
+        delete_layout.addWidget(delete_btn)
+        delete_layout.setAlignment(Qt.AlignmentFlag.AlignCenter)
+        delete_layout.setContentsMargins(0, 0, 0, 0)
+        self.sections_table.setCellWidget(row, 7, delete_widget)
 
     def add_section(self):
         """Add new empty section"""

icon.ico

@@ -9,6 +9,7 @@
 from PyQt6.QtGui import QIcon, QPalette, QColor
 
 from visualizer import VisualizerWidget
+from old_visualizer import OldVisualizerWidget
 from editor import EditorWidget
 from colors import COLORS
 
@@ -24,10 +25,12 @@ def __init__(self):
 
         # Create interfaces
         self.visualizer = VisualizerWidget(self)
+        self.old_visualizer = OldVisualizerWidget(self)
         self.editor = EditorWidget(self)
 
-        # Connect editor data changes to visualizer refresh
+        # Connect editor data changes to both visualizers refresh
         self.editor.data_changed.connect(self.visualizer.refresh)
+        self.editor.data_changed.connect(self.old_visualizer.refresh)
 
         # Create main widget and layout
         main_widget = QWidget()
@@ -43,6 +46,7 @@ def __init__(self):
         # Create stacked widget for views
         self.stacked_widget = QStackedWidget()
         self.stacked_widget.addWidget(self.visualizer)
+        self.stacked_widget.addWidget(self.old_visualizer)
         self.stacked_widget.addWidget(self.editor)
         layout.addWidget(self.stacked_widget)
 
@@ -65,24 +69,32 @@ def create_nav_bar(self) -> QWidget:
 
         layout.addStretch()
 
-        # View button
-        view_btn = QPushButton("Перегляд")
-        view_btn.setCheckable(True)
-        view_btn.setChecked(True)
-        view_btn.clicked.connect(lambda: self.switch_view(0, view_btn, edit_btn))
-        view_btn.setStyleSheet(self.get_nav_button_style(True))
-        layout.addWidget(view_btn)
+        # Modern view button
+        modern_btn = QPushButton("Сучасніший вигляд")
+        modern_btn.setCheckable(True)
+        modern_btn.setChecked(True)
+        modern_btn.clicked.connect(lambda: self.switch_view(0, modern_btn, old_btn, edit_btn))
+        modern_btn.setStyleSheet(self.get_nav_button_style(True))
+        layout.addWidget(modern_btn)
+        
+        # Old view button
+        old_btn = QPushButton("Старий вигляд")
+        old_btn.setCheckable(True)
+        old_btn.clicked.connect(lambda: self.switch_view(1, old_btn, modern_btn, edit_btn))
+        old_btn.setStyleSheet(self.get_nav_button_style(False))
+        layout.addWidget(old_btn)
 
         # Edit button
         edit_btn = QPushButton("Редагування")
         edit_btn.setCheckable(True)
-        edit_btn.clicked.connect(lambda: self.switch_view(1, edit_btn, view_btn))
+        edit_btn.clicked.connect(lambda: self.switch_view(2, edit_btn, modern_btn, old_btn))
         edit_btn.setStyleSheet(self.get_nav_button_style(False))
         layout.addWidget(edit_btn)
 
         layout.addStretch()
 
-        self.view_btn = view_btn
+        self.modern_btn = modern_btn
+        self.old_btn = old_btn
         self.edit_btn = edit_btn
 
         return nav_widget
@@ -119,11 +131,12 @@ def get_nav_button_style(self, active: bool) -> str:
                 }}
             """
 
-    def switch_view(self, index: int, active_btn: QPushButton, inactive_btn: QPushButton):
+    def switch_view(self, index: int, active_btn: QPushButton, inactive_btn1: QPushButton, inactive_btn2: QPushButton):
         """Switch between views"""
         self.stacked_widget.setCurrentIndex(index)
         active_btn.setStyleSheet(self.get_nav_button_style(True))
-        inactive_btn.setStyleSheet(self.get_nav_button_style(False))
+        inactive_btn1.setStyleSheet(self.get_nav_button_style(False))
+        inactive_btn2.setStyleSheet(self.get_nav_button_style(False))
 
     def apply_custom_style(self):
         """Apply custom Catppuccin Mocha colors"""