frontengine 1.0.57__tar.gz → 1.0.59__tar.gz

{frontengine-1.0.57 → frontengine-1.0.59}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: frontengine
-Version: 1.0.57
+Version: 1.0.59
 Summary: FrontEngine is use-define frontview or only use like screen saver
 Author-email: JE-Chen <jechenmailman@gmail.com>
 Project-URL: Homepage, https://github.com/Intergration-Automation-Testing/FrontEngine

{frontengine-1.0.57 → frontengine-1.0.59}/frontengine/ui/main_ui.py

@@ -7,10 +7,14 @@ from typing import Any, Dict, Optional, Type
 from PySide6.QtCore import QByteArray, QTimer
 from PySide6.QtGui import QIcon, Qt
 from PySide6.QtWidgets import (
-    QMainWindow, QApplication, QGridLayout, QStyle, QTabWidget, QMenuBar, QWidget,
+    QMainWindow, QApplication, QGridLayout, QHBoxLayout, QStackedWidget, QStyle,
+    QMenuBar, QWidget,
 )
 from qt_material import apply_stylesheet
 
+from frontengine.ui.nav.sidebar import NavigationSidebar
+from frontengine.ui.style.app_style import apply_app_style
+
 from frontengine.show.toast.toast_widget import show_toast
 from frontengine.system_tray.extend_system_tray import ExtendSystemTray
 from frontengine.ui.menu.help_menu import build_help_menu
@@ -48,7 +52,7 @@ from frontengine.utils.critical_exit.win32_vk import keyboard_keys_table
 from frontengine.utils.hotkey.hotkey_service import HotkeyService
 from frontengine.utils.logging.loggin_instance import front_engine_logger
 from frontengine.utils.multi_language.language_wrapper import language_wrapper
-from frontengine.utils.multi_language.retranslate import retranslator, translate
+from frontengine.utils.multi_language.retranslate import retranslator
 from frontengine.utils.plugins.plugin_loader import load_plugins
 from frontengine.utils.preset_schedule.preset_schedule_service import PresetScheduleService
 from frontengine.ui.dialog.remote_control_dialog import (
@@ -133,10 +137,20 @@ class FrontEngineMainUI(QMainWindow):
         self.grid_layout = QGridLayout()
         self.grid_layout.setContentsMargins(0, 0, 0, 0)
 
-        # Tab Widget 作為主介面
-        # Tab widget as main interface
-        self.tab_widget = QTabWidget(self)
-        self.setCentralWidget(self.tab_widget)
+        # 主介面：左側導覽 + 右側頁面堆疊
+        # Main interface: navigation on the left, the page stack on the right
+        self.sidebar = NavigationSidebar(self)
+        self.page_stack = QStackedWidget(self)
+        self.page_stack.setObjectName("pageBody")
+        self.sidebar.page_requested.connect(self.page_stack.setCurrentIndex)
+
+        central = QWidget(self)
+        central_layout = QHBoxLayout(central)
+        central_layout.setContentsMargins(0, 0, 0, 0)
+        central_layout.setSpacing(0)
+        central_layout.addWidget(self.sidebar)
+        central_layout.addWidget(self.page_stack, 1)
+        self.setCentralWidget(central)
 
         # 各功能頁面初始化
         # Initialize each functional page
@@ -368,36 +382,61 @@ class FrontEngineMainUI(QMainWindow):
                 lambda attribute=attribute: getattr(self.tools_setting_ui, attribute, []))
 
     def _add_tabs(self) -> None:
-        """加入所有內建與擴充的 Tab / Add all built-in and extended tabs"""
-        tabs = [
-            (self.video_setting_ui, "tab_video_text"),
-            (self.image_setting_ui, "tab_image_text"),
-            (self.web_setting_ui, "tab_web_text"),
-            (self.gif_setting_ui, "tab_gif_text"),
-            (self.sound_player_setting_ui, "tab_sound_text"),
-            (self.text_setting_ui, "tab_text_text"),
-            (self.scene_setting_ui, "tab_scene_text"),
-            (self.particle_setting_ui, "tab_particle_text"),
-            (self.pet_setting_ui, "tab_pet_text"),
-            (self.screen_care_setting_ui, "tab_screen_care_text"),
-            (self.presentation_setting_ui, "tab_presentation_text"),
-            (self.wallpaper_setting_ui, "tab_wallpaper_text"),
-            (self.focus_setting_ui, "tab_focus_text"),
-            (self.widgets_setting_ui, "tab_widgets_text"),
-            (self.tools_setting_ui, "tab_tools_text"),
-            (self.control_center_ui, "tab_control_center_text"),
+        """
+        建立左側導覽與頁面堆疊 / Build the sidebar and the page stack.
+
+        分頁依用途分組。先前十六個分頁擠成一排，視窗一窄就長出捲動箭頭，而且並排
+        的十六個詞看不出誰跟誰是一類；分組之後「我要放東西上螢幕」和「我要專心
+        工作」是兩件不同的事，找起來不必逐一讀過去。
+        The pages are grouped by what they are for. Sixteen tabs in one row grew
+        scroll arrows as soon as the window narrowed, and gave no clue which
+        belonged together; grouped, "put something on screen" and "help me
+        concentrate" are visibly different errands rather than sixteen words to
+        read through.
+        """
+        groups = [
+            ("nav_group_on_screen", "On screen", [
+                (self.video_setting_ui, "tab_video_text"),
+                (self.image_setting_ui, "tab_image_text"),
+                (self.web_setting_ui, "tab_web_text"),
+                (self.gif_setting_ui, "tab_gif_text"),
+                (self.text_setting_ui, "tab_text_text"),
+                (self.sound_player_setting_ui, "tab_sound_text"),
+                (self.scene_setting_ui, "tab_scene_text"),
+                (self.particle_setting_ui, "tab_particle_text"),
+            ]),
+            ("nav_group_desktop", "Desktop", [
+                (self.pet_setting_ui, "tab_pet_text"),
+                (self.wallpaper_setting_ui, "tab_wallpaper_text"),
+                (self.widgets_setting_ui, "tab_widgets_text"),
+            ]),
+            ("nav_group_work", "Work", [
+                (self.focus_setting_ui, "tab_focus_text"),
+                (self.screen_care_setting_ui, "tab_screen_care_text"),
+                (self.presentation_setting_ui, "tab_presentation_text"),
+                (self.tools_setting_ui, "tab_tools_text"),
+            ]),
+            ("nav_group_control", "Control", [
+                (self.control_center_ui, "tab_control_center_text"),
+            ]),
         ]
 
-        for index, (widget, lang_key) in enumerate(tabs):
-            self.tab_widget.addTab(widget, translate(lang_key))
-            # setTabText 需要索引，所以索引跟著這筆登記一起記下來
-            # setTabText needs the index, so it travels with the entry.
-            retranslator.bind(self.tab_widget, lang_key, "", "setTabText", index)
+        for group_key, group_fallback, entries in groups:
+            self.sidebar.add_group(group_key, group_fallback)
+            for widget, lang_key in entries:
+                index = self.page_stack.addWidget(widget)
+                self.sidebar.add_page(lang_key, index)
+
+        # 外掛註冊的分頁自成一組，使用者才看得出哪些不是內建的
+        # Plugin tabs get their own group, so it is visible which pages did not
+        # ship with the application.
+        if FrontEngine_EXTEND_TAB:
+            self.sidebar.add_group("nav_group_extensions", "Extensions")
+            for widget_name, widget in FrontEngine_EXTEND_TAB.items():
+                index = self.page_stack.addWidget(widget())
+                self.sidebar.add_page(widget_name, index, widget_name)
 
-        # 加入外部擴充 Tab
-        # Add external extension tabs
-        for widget_name, widget in FrontEngine_EXTEND_TAB.items():
-            self.tab_widget.addTab(widget(), widget_name)
+        self.sidebar.select_page(0)
 
     def _setup_icon(self, show_system_tray_ray: bool) -> None:
         """設定視窗 Icon 與系統托盤 / Setup window icon and system tray"""
@@ -427,7 +466,11 @@ class FrontEngineMainUI(QMainWindow):
     def startup_setting(self) -> None:
         """啟動時套用樣式並還原視窗大小/位置（無記錄時最大化） / Apply stylesheet
         and restore the saved window geometry (maximize when none is stored)."""
-        apply_stylesheet(self, theme=user_setting_dict.get("theme"))
+        theme = user_setting_dict.get("theme")
+        apply_stylesheet(self, theme=theme)
+        # qt-material 會把樣式表整份寫掉，所以自訂樣式一定要接在它後面
+        # apply_stylesheet replaces the whole stylesheet, so ours goes after it
+        apply_app_style(self, theme)
         # 還原上次選的畫質檔位（設定檔一直有存，只是從來沒有人讀回來）
         # Restore the quality tier chosen last time: it was always written to the
         # settings file, just never read back.
@@ -483,6 +526,7 @@ class FrontEngineMainUI(QMainWindow):
         front_engine_logger.info(f"[FrontEngineMainUI] _apply_theme | theme={theme}")
         try:
             apply_stylesheet(self, theme=theme)
+            apply_app_style(self, theme)
             user_setting_dict["theme"] = theme
         except Exception as error:
             front_engine_logger.warning(f"[FrontEngineMainUI] apply theme failed: {error!r}")

frontengine-1.0.59/frontengine/ui/nav/sidebar.py

@@ -0,0 +1,112 @@
+"""
+左側導覽：分組的分頁清單。
+
+先前十六個分頁擠在一排，視窗一窄就出現捲動箭頭，而且十六個並排的詞看不出誰跟
+誰是一類的。改成側邊欄之後：永遠不會溢出、目前在哪一頁隨時看得到、之後再加功
+能也只是清單多一列。
+
+清單項目不是 QWidget，沒辦法交給 retranslator 的 bind() 用弱參考持有，所以改用
+bind_call() 這個逃生口——換語言時整份重寫一次。
+
+The left-hand navigation: the pages as a grouped list.
+
+Sixteen tabs in one row grew scroll arrows as soon as the window narrowed, and
+sixteen words side by side gave no clue which belonged together. As a sidebar it
+cannot overflow, the current page is always visible, and a new feature later is
+one more line in a list.
+
+List items are not QWidgets, so the retranslator cannot hold them weakly through
+bind(); this uses the bind_call() escape hatch and rewrites the lot on a
+language change.
+"""
+from __future__ import annotations
+
+from typing import List, Optional, Tuple
+
+from PySide6.QtCore import QSize, Qt, Signal
+from PySide6.QtWidgets import QListWidget, QListWidgetItem
+
+from frontengine.utils.multi_language.retranslate import retranslator, translate
+
+SIDEBAR_WIDTH = 208
+
+# 群組標題與分頁列用 UserRole 區分，樣式與點擊行為都看這個值。
+# Group headings and page rows are told apart by this UserRole value, which
+# drives both styling and what a click does.
+ROLE_KIND = Qt.ItemDataRole.UserRole
+ROLE_PAGE_INDEX = Qt.ItemDataRole.UserRole + 1
+KIND_GROUP = "group"
+KIND_PAGE = "page"
+
+
+class NavigationSidebar(QListWidget):
+    """分組的分頁清單，選到某一頁時送出 page_requested。"""
+
+    page_requested = Signal(int)
+
+    def __init__(self, parent=None):
+        super().__init__(parent)
+        self.setObjectName("navSidebar")
+        self.setFixedWidth(SIDEBAR_WIDTH)
+        self.setFrameShape(QListWidget.Shape.NoFrame)
+        self.setHorizontalScrollBarPolicy(Qt.ScrollBarPolicy.ScrollBarAlwaysOff)
+        self.setVerticalScrollMode(QListWidget.ScrollMode.ScrollPerPixel)
+        # 分頁列之間不需要虛線焦點框，選取本身已經夠明顯。
+        self.setUniformItemSizes(False)
+
+        # (item, key, fallback)，換語言時照這張表重寫
+        self._labels: List[Tuple[QListWidgetItem, str, str]] = []
+        self.currentItemChanged.connect(self._on_current_item_changed)
+        retranslator.bind_call(self._retranslate)
+
+    def add_group(self, title_key: str, fallback: str = "") -> QListWidgetItem:
+        """加一列群組標題。標題不能被選取，點了也不會換頁。"""
+        item = QListWidgetItem(translate(title_key, fallback))
+        item.setData(ROLE_KIND, KIND_GROUP)
+        item.setFlags(Qt.ItemFlag.NoItemFlags)
+        item.setSizeHint(QSize(SIDEBAR_WIDTH, 34))
+        self.addItem(item)
+        self._labels.append((item, title_key, fallback))
+        return item
+
+    def add_page(self, title_key: str, page_index: int, fallback: str = "") -> QListWidgetItem:
+        """加一列分頁。page_index 對應 QStackedWidget 裡的索引。"""
+        item = QListWidgetItem(translate(title_key, fallback))
+        item.setData(ROLE_KIND, KIND_PAGE)
+        item.setData(ROLE_PAGE_INDEX, page_index)
+        item.setSizeHint(QSize(SIDEBAR_WIDTH, 32))
+        self.addItem(item)
+        self._labels.append((item, title_key, fallback))
+        return item
+
+    def select_page(self, page_index: int) -> bool:
+        """選取對應某個堆疊索引的那一列；找不到就回傳 False。"""
+        for row in range(self.count()):
+            item = self.item(row)
+            if item.data(ROLE_KIND) == KIND_PAGE and item.data(ROLE_PAGE_INDEX) == page_index:
+                self.setCurrentItem(item)
+                return True
+        return False
+
+    def page_label(self, page_index: int) -> str:
+        """某個堆疊索引目前顯示的文字（測試與記錄用）。"""
+        for row in range(self.count()):
+            item = self.item(row)
+            if item.data(ROLE_KIND) == KIND_PAGE and item.data(ROLE_PAGE_INDEX) == page_index:
+                return item.text()
+        return ""
+
+    def _on_current_item_changed(self, current: Optional[QListWidgetItem], _previous) -> None:
+        if current is None or current.data(ROLE_KIND) != KIND_PAGE:
+            return
+        index = current.data(ROLE_PAGE_INDEX)
+        if isinstance(index, int):
+            self.page_requested.emit(index)
+
+    def _retranslate(self) -> None:
+        """換語言時把每一列的文字重寫一次。"""
+        for item, key, fallback in self._labels:
+            try:
+                item.setText(translate(key, fallback))
+            except RuntimeError:  # pragma: no cover - 底層物件已消失
+                continue

{frontengine-1.0.57 → frontengine-1.0.59}/frontengine/ui/page/control_center/control_center_ui.py

@@ -2,7 +2,7 @@ from typing import Callable
 
 from PySide6.QtCore import QTimer, Qt
 from PySide6.QtWidgets import (
-    QComboBox, QGridLayout, QLabel, QPushButton, QScrollArea, QTextEdit, QWidget,
+    QComboBox, QLabel, QPushButton, QScrollArea, QTextEdit, QWidget,
 )
 
 from frontengine.show.window_helpers import set_overlay_locked
@@ -16,6 +16,7 @@ from frontengine.ui.page.text.text_setting_ui import TextSettingUI
 from frontengine.ui.page.video.video_setting_ui import VideoSettingUI
 from frontengine.ui.page.web.web_setting_ui import WEBSettingUI
 from frontengine.user_setting.user_setting_file import clear_overlay_geometry, user_setting_dict
+from frontengine.ui.page.layout_kit import SettingPage
 from frontengine.utils.logging.loggin_instance import front_engine_logger
 from frontengine.utils.multi_language.language_wrapper import language_wrapper
 from frontengine.utils.multi_language.retranslate import retranslator, tr, translate
@@ -26,7 +27,7 @@ from frontengine.utils.power_mode.power_mode import (
 from frontengine.utils.redirect_manager.redirect_manager_class import redirect_manager_instance
 
 
-class ControlCenterUI(QWidget):
+class ControlCenterUI(SettingPage):
     """
     ControlCenterUI: 控制中心面板，集中管理各種 widget 與 log panel
     ControlCenterUI: Control center panel to manage widgets and log panel
@@ -50,11 +51,11 @@ class ControlCenterUI(QWidget):
             f"gif={gif_setting_ui}, sound={sound_player_setting_ui}, text={text_setting_ui}, "
             f"scene={scene_setting_ui}, particle={particle_setting_ui}, redirect_output={redirect_output}"
         )
-        super().__init__()
+        super().__init__("tab_control_center_text", "page_subtitle_control_center",
+                         "Control Center",
+                         "Reach every overlay on screen, whichever page opened it.")
 
         # Layout
-        self.grid_layout = QGridLayout()
-        self.grid_layout.setContentsMargins(0, 0, 0, 0)
         self.setAttribute(Qt.WidgetAttribute.WA_DeleteOnClose)
 
         # UI instance
@@ -125,33 +126,29 @@ class ControlCenterUI(QWidget):
         self.log_panel_scroll_area.setViewportMargins(0, 0, 0, 0)
         self.log_panel_scroll_area.setWidget(self.log_panel)
 
-        # Add to layout
-        self.grid_layout.addWidget(self.clear_video_button, 0, 0)
-        self.grid_layout.addWidget(self.clear_image_button, 1, 0)
-        self.grid_layout.addWidget(self.clear_gif_button, 2, 0)
-        self.grid_layout.addWidget(self.clear_web_button, 3, 0)
-        self.grid_layout.addWidget(self.clear_sound_button, 4, 0)
-        self.grid_layout.addWidget(self.clear_text_button, 5, 0)
-        # 這顆按鈕本來建好、翻好、也接上了處理函式，卻沒有加進版面，所以畫面上
-        # 根本沒有「只關閉場景」這個選項，只能用會一併關掉其他所有東西的「全部關閉」。
-        # This button was built, translated and wired, but never added to the
-        # layout - so there was no way to close just the scene, only the "close
-        # all" that takes every other overlay down with it.
-        self.grid_layout.addWidget(self.clear_scene_button, 6, 0)
-        self.grid_layout.addWidget(self.clear_redirect_button, 7, 0)
-        self.grid_layout.addWidget(self.hide_all_button, 8, 0)
-        self.grid_layout.addWidget(self.show_all_button, 9, 0)
-        self.grid_layout.addWidget(self.mute_all_button, 10, 0)
-        self.grid_layout.addWidget(self.lock_all_button, 11, 0)
-        self.grid_layout.addWidget(self.chroma_key_button, 12, 0)
-        self.grid_layout.addWidget(self.reset_positions_button, 13, 0)
-        self.grid_layout.addWidget(self.low_power_button, 14, 0)
-        self.grid_layout.addWidget(self.quality_label, 15, 0)
-        self.grid_layout.addWidget(self.quality_combobox, 16, 0)
-        self.grid_layout.addWidget(self.capture_button, 17, 0)
-        self.grid_layout.addWidget(self.clear_all_button, 18, 0)
-        self.grid_layout.addWidget(self.log_panel_scroll_area, 0, 1, 19, 1)  # rowSpan covers every button
-        self.setLayout(self.grid_layout)
+        # 「關掉某一種」和「一次對全部做某件事」是兩種不同的動作，先前十九顆按鈕
+        # 疊成單獨一直行，兩者混在一起而且比視窗還高。
+        # Closing one kind and doing something to everything at once are two
+        # different actions; as a single column of nineteen buttons they were
+        # mixed together and taller than the window.
+        closing = self.add_section("section_close", "Close")
+        closing.add_button_grid(
+            self.clear_video_button, self.clear_image_button, self.clear_gif_button,
+            self.clear_web_button, self.clear_sound_button, self.clear_text_button,
+            self.clear_scene_button, self.clear_redirect_button)
+
+        everything = self.add_section("section_everything", "Everything at once")
+        everything.add_button_grid(
+            self.hide_all_button, self.show_all_button, self.mute_all_button,
+            self.lock_all_button, self.chroma_key_button, self.reset_positions_button,
+            self.low_power_button, self.capture_button)
+        everything.add_row(self.quality_label, self.quality_combobox)
+
+        log = self.add_section("section_log", "Messages")
+        log.add_widget(self.log_panel_scroll_area)
+
+        self.finish_body()
+        self.set_footer(primary=self.clear_all_button)
 
         # Redirect
         if redirect_output:

{frontengine-1.0.57 → frontengine-1.0.59}/frontengine/ui/page/focus/focus_setting_ui.py

@@ -10,7 +10,9 @@ from typing import List
 
 from PySide6.QtCore import Qt
 from PySide6.QtGui import QGuiApplication
-from PySide6.QtWidgets import QComboBox, QGridLayout, QLabel, QPushButton, QSlider, QWidget
+from PySide6.QtWidgets import QComboBox, QLabel, QPushButton, QSlider
+
+from frontengine.ui.page.layout_kit import SettingPage
 
 from frontengine.show.focus_shield.focus_shield_widget import (
     DimBackgroundWidget, DistractionMaskWidget,
@@ -24,14 +26,13 @@ from frontengine.utils.multi_language.language_wrapper import language_wrapper
 from frontengine.utils.multi_language.retranslate import retranslator, tr
 
 
-class FocusSettingUI(QWidget):
+class FocusSettingUI(SettingPage):
     """專注設定頁 / The focus settings page."""
 
     def __init__(self):
         front_engine_logger.info("[FocusSettingUI] Init")
-        super().__init__()
-        self.grid_layout = QGridLayout(self)
-        self.grid_layout.setContentsMargins(0, 0, 0, 0)
+        super().__init__("tab_focus_text", "page_subtitle_focus",
+                         "Focus", "Dim or cover whatever competes for your attention.")
 
         self.dim_widget_list: List[DimBackgroundWidget] = []
         self.mask_widget_list: List[DistractionMaskWidget] = []
@@ -73,16 +74,25 @@ class FocusSettingUI(QWidget):
         self.hint_label.setWordWrap(True)
 
         # Layout
-        self.grid_layout.addWidget(self.dim_label, 0, 0)
-        self.grid_layout.addWidget(self.dim_slider, 0, 1)
-        self.grid_layout.addWidget(self.dim_button, 0, 2)
-        self.grid_layout.addWidget(self.mask_label, 1, 0)
-        self.grid_layout.addWidget(self.mask_region_combobox, 1, 1)
-        self.grid_layout.addWidget(self.mask_button, 1, 2)
-        self.grid_layout.addWidget(self.mask_percent_slider, 2, 1, 1, 2)
-        self.grid_layout.addWidget(self.target_monitor_label, 3, 0)
-        self.grid_layout.addWidget(self.target_monitor_combobox, 3, 1)
-        self.grid_layout.addWidget(self.hint_label, 4, 0, 1, 3)
+        # 「調暗其他視窗」和「遮住某一塊」是兩個獨立開關，各自有自己的按鈕，
+        # 混在一格網格裡看起來像同一組設定。
+        # Dimming the other windows and covering one region are independent
+        # switches with a button each; sharing one grid made them read as one
+        # group of settings.
+        dim = self.add_section("section_options", "Dim background windows")
+        dim.add_row(self.dim_label, self.dim_slider)
+        dim.add_inline(self.dim_button)
+
+        mask = self.add_section("section_behaviour", "Cover a distraction")
+        mask.add_row(self.mask_label, self.mask_region_combobox)
+        mask.add_row("focus_mask_size_label", self.mask_percent_slider, "Size")
+        mask.add_inline(self.mask_button)
+
+        where = self.add_section("section_where", "Where")
+        where.add_row(self.target_monitor_label, self.target_monitor_combobox)
+
+        self.add_body_widget(self.hint_label)
+        self.finish_body()
 
     # --- shared ----------------------------------------------------------
     def target_screen(self):

{frontengine-1.0.57 → frontengine-1.0.59}/frontengine/ui/page/gif/gif_setting_ui.py

@@ -1,10 +1,11 @@
 from typing import Optional
 
 from PySide6.QtCore import Qt
-from PySide6.QtWidgets import QWidget, QGridLayout, QLabel, QSlider, QPushButton, QMessageBox, QCheckBox
+from PySide6.QtWidgets import QLabel, QSlider, QPushButton, QMessageBox, QCheckBox
 
 from frontengine.show.gif.paint_gif import GifWidget
 from frontengine.ui.dialog.choose_file_dialog import choose_gif
+from frontengine.ui.page.layout_kit import SettingPage
 from frontengine.ui.page.utils import (
     build_recent_combobox,
     build_target_monitor_combobox,
@@ -22,12 +23,11 @@ from frontengine.utils.multi_language.language_wrapper import language_wrapper
 from frontengine.utils.multi_language.retranslate import tr
 
 
-class GIFSettingUI(QWidget):
+class GIFSettingUI(SettingPage):
     def __init__(self):
         front_engine_logger.info("[GIFSettingUI] Init")
-        super().__init__()
-        self.grid_layout = QGridLayout(self)
-        self.grid_layout.setContentsMargins(0, 0, 0, 0)
+        super().__init__("tab_gif_text", "page_subtitle_gif",
+                         "GIF and WEBP", "Put an animation on top of everything else.")
         self.setAttribute(Qt.WidgetAttribute.WA_DeleteOnClose)
 
         # Init variable
@@ -85,22 +85,23 @@ class GIFSettingUI(QWidget):
         self._drop_filter = enable_file_drop(self, (".gif", ".webp"), self._on_file_dropped)
 
         # Layout
-        self.grid_layout.addWidget(self.opacity_label, 0, 0)
-        self.grid_layout.addWidget(self.opacity_slider_value_label, 0, 1)
-        self.grid_layout.addWidget(self.opacity_slider, 0, 2)
-        self.grid_layout.addWidget(self.speed_label, 1, 0)
-        self.grid_layout.addWidget(self.speed_slider_value_label, 1, 1)
-        self.grid_layout.addWidget(self.speed_slider, 1, 2)
-        self.grid_layout.addWidget(self.choose_file_button, 2, 0)
-        self.grid_layout.addWidget(self.ready_label, 2, 1)
-        self.grid_layout.addWidget(self.fullscreen_checkbox, 2, 2)
-        self.grid_layout.addWidget(self.start_button, 3, 0)
-        self.grid_layout.addWidget(self.show_on_all_screen_checkbox, 3, 1)
-        self.grid_layout.addWidget(self.show_on_bottom_checkbox, 3, 2)
-        self.grid_layout.addWidget(self.target_monitor_label, 4, 0)
-        self.grid_layout.addWidget(self.target_monitor_combobox, 4, 1)
-        self.grid_layout.addWidget(self.recent_files_label, 5, 0)
-        self.grid_layout.addWidget(self.recent_files_combobox, 5, 1)
+        source = self.add_section("section_source", "Source")
+        source.add_inline(self.choose_file_button)
+        source.add_row(self.recent_files_label, self.recent_files_combobox)
+
+        appearance = self.add_section("section_appearance", "Appearance")
+        appearance.add_slider_row(
+            self.opacity_label, self.opacity_slider, self.opacity_slider_value_label)
+        appearance.add_slider_row(
+            self.speed_label, self.speed_slider, self.speed_slider_value_label)
+
+        where = self.add_section("section_where", "Where")
+        where.add_row(self.target_monitor_label, self.target_monitor_combobox)
+        where.add_inline(self.show_on_all_screen_checkbox, self.show_on_bottom_checkbox,
+                         self.fullscreen_checkbox)
+
+        self.finish_body()
+        self.set_footer(primary=self.start_button, status=self.ready_label)
 
     def set_show_all_screen(self) -> None:
         front_engine_logger.info("[GIFSettingUI] set_show_all_screen")

{frontengine-1.0.57 → frontengine-1.0.59}/frontengine/ui/page/image/image_setting_ui.py

@@ -2,11 +2,12 @@ from typing import Optional
 
 from PySide6.QtCore import Qt, QTimer
 from PySide6.QtWidgets import (
-    QWidget, QGridLayout, QSlider, QLabel, QPushButton, QMessageBox, QCheckBox, QComboBox, QFileDialog,
+    QSlider, QLabel, QPushButton, QMessageBox, QCheckBox, QComboBox, QFileDialog,
 )
 
 from frontengine.show.image.paint_image import ImageWidget
 from frontengine.ui.dialog.choose_file_dialog import choose_image
+from frontengine.ui.page.layout_kit import SettingPage
 from frontengine.ui.page.utils import (
     build_recent_combobox,
     build_target_monitor_combobox,
@@ -28,12 +29,11 @@ from frontengine.utils.multi_language.language_wrapper import language_wrapper
 from frontengine.utils.multi_language.retranslate import tr
 
 
-class ImageSettingUI(QWidget):
+class ImageSettingUI(SettingPage):
     def __init__(self):
         front_engine_logger.info("[ImageSettingUI] Init")
-        super().__init__()
-        self.grid_layout = QGridLayout(self)
-        self.grid_layout.setContentsMargins(0, 0, 0, 0)
+        super().__init__("tab_image_text", "page_subtitle_image",
+                         "Image", "Put a picture on top of everything else.")
         self.setAttribute(Qt.WidgetAttribute.WA_DeleteOnClose)
 
         # Init variable
@@ -103,25 +103,26 @@ class ImageSettingUI(QWidget):
         self._drop_filter = enable_file_drop(self, _SLIDESHOW_EXTENSIONS, self._on_file_dropped)
 
         # Layout
-        self.grid_layout.addWidget(self.opacity_label, 0, 0)
-        self.grid_layout.addWidget(self.opacity_slider_value_label, 0, 1)
-        self.grid_layout.addWidget(self.opacity_slider, 0, 2)
-        self.grid_layout.addWidget(self.choose_file_button, 1, 0)
-        self.grid_layout.addWidget(self.ready_label, 1, 1)
-        self.grid_layout.addWidget(self.fullscreen_checkbox, 1, 2)
-        self.grid_layout.addWidget(self.start_button, 2, 0)
-        self.grid_layout.addWidget(self.show_on_all_screen_checkbox, 2, 1)
-        self.grid_layout.addWidget(self.show_on_bottom_checkbox, 2, 2)
-        self.grid_layout.addWidget(self.target_monitor_label, 3, 0)
-        self.grid_layout.addWidget(self.target_monitor_combobox, 3, 1)
-        self.grid_layout.addWidget(self.recent_files_label, 4, 0)
-        self.grid_layout.addWidget(self.recent_files_combobox, 4, 1)
-        self.grid_layout.addWidget(self.slideshow_checkbox, 5, 0)
-        self.grid_layout.addWidget(self.slideshow_folder_button, 5, 1)
-        self.grid_layout.addWidget(self.slideshow_interval_label, 6, 0)
-        self.grid_layout.addWidget(self.slideshow_interval_combobox, 6, 1)
-        self.grid_layout.addWidget(self.slideshow_shuffle_checkbox, 7, 0)
-        self.grid_layout.addWidget(self.slideshow_recursive_checkbox, 7, 1)
+        source = self.add_section("section_source", "Source")
+        source.add_inline(self.choose_file_button)
+        source.add_row(self.recent_files_label, self.recent_files_combobox)
+
+        appearance = self.add_section("section_appearance", "Appearance")
+        appearance.add_slider_row(
+            self.opacity_label, self.opacity_slider, self.opacity_slider_value_label)
+
+        slideshow = self.add_section("section_options", "Options")
+        slideshow.add_inline(self.slideshow_checkbox, self.slideshow_folder_button)
+        slideshow.add_row(self.slideshow_interval_label, self.slideshow_interval_combobox)
+        slideshow.add_inline(self.slideshow_shuffle_checkbox, self.slideshow_recursive_checkbox)
+
+        where = self.add_section("section_where", "Where")
+        where.add_row(self.target_monitor_label, self.target_monitor_combobox)
+        where.add_inline(self.show_on_all_screen_checkbox, self.show_on_bottom_checkbox,
+                         self.fullscreen_checkbox)
+
+        self.finish_body()
+        self.set_footer(primary=self.start_button, status=self.ready_label)
 
     def set_show_all_screen(self) -> None:
         front_engine_logger.info("[ImageSettingUI] set_show_all_screen")