From 41794c44a9015ce5e2edf56e98cf98d7b630b68e Mon Sep 17 00:00:00 2001 From: dervart Date: Tue, 7 Jul 2026 22:40:57 +0700 Subject: [PATCH] feat: support gradient type, direction, and cover color count for detail page --- documentation/theme_guide/README.md | 33 ++++++++++++++++++++ documentation/theme_guide/README.ru.md | 33 ++++++++++++++++++++ portprotonqt/detail_pages/utils.py | 43 +++++++++++++++++++++----- 3 files changed, 101 insertions(+), 8 deletions(-) diff --git a/documentation/theme_guide/README.md b/documentation/theme_guide/README.md index 21a424ef..7d9982f2 100644 --- a/documentation/theme_guide/README.md +++ b/documentation/theme_guide/README.md @@ -292,6 +292,39 @@ DETAIL_PAGE_GRADIENT = [ DETAIL_PAGE_GRADIENT = "stop:0 #101010, stop:0.5 #202020, stop:1 #303030" ``` +### Gradient Type and Number of Colors Extracted from the Cover + +You can set the gradient type (linear or radial), by defining `DETAIL_PAGE_GRADIENT_TYPE` in `styles.py`: + +```python +# Accepts `linear` or `radial` +DETAIL_PAGE_GRADIENT_TYPE = 'linear' +``` + +Set the gradient direction: + +```python +# For linear gradients +DETAIL_PAGE_GRADIENT_X1 = 0 +DETAIL_PAGE_GRADIENT_Y1 = 0 +DETAIL_PAGE_GRADIENT_X2 = 1 +DETAIL_PAGE_GRADIENT_Y2 = 0 + +# For radial gradients +DETAIL_PAGE_GRADIENT_CX = 0.3 +DETAIL_PAGE_GRADIENT_CY = 0.3 +DETAIL_PAGE_GRADIENT_RADIUS = 0.7 +DETAIL_PAGE_GRADIENT_FX = 0.3 +DETAIL_PAGE_GRADIENT_FY = 0.3 +``` + +Set the number of colors to extract from the cover: + +```python +# Must be at least 2 +DETAIL_PAGE_PALETTE_COLORS = 5 +``` + ### Wave Configuration When `DETAIL_PAGE_BG_MODE` is `"static_waves"` or `"waves"`, you can customize the wave appearance via the `DETAIL_PAGE_WAVES` dictionary: diff --git a/documentation/theme_guide/README.ru.md b/documentation/theme_guide/README.ru.md index 5e3c8a1a..1112eb40 100644 --- a/documentation/theme_guide/README.ru.md +++ b/documentation/theme_guide/README.ru.md @@ -292,6 +292,39 @@ DETAIL_PAGE_GRADIENT = [ DETAIL_PAGE_GRADIENT = "stop:0 #101010, stop:0.5 #202020, stop:1 #303030" ``` +### Тип градиента и количество цветов извлекаемых из обложки + +Вы можете задать тип градиента (linear/radial), задав `DETAIL_PAGE_GRADIENT_TYPE` в `styles.py`: + +```python +# Принимает значения `linear` или `radial` +DETAIL_PAGE_GRADIENT_TYPE = 'linear' +``` + +Задать направление градиента: + +```python +# Для линейного +DETAIL_PAGE_GRADIENT_X1 = 0 +DETAIL_PAGE_GRADIENT_Y1 = 0 +DETAIL_PAGE_GRADIENT_X2 = 1 +DETAIL_PAGE_GRADIENT_Y2 = 0 + +# Для радиального +DETAIL_PAGE_GRADIENT_CX = 0.3 +DETAIL_PAGE_GRADIENT_CY = 0.3 +DETAIL_PAGE_GRADIENT_RADIUS = 0.7 +DETAIL_PAGE_GRADIENT_FX = 0.3 +DETAIL_PAGE_GRADIENT_FY = 0.3 +``` + +Задать количество цветов извлекаемых из обложки: + +```python +# Не менее 2 +DETAIL_PAGE_PALETTE_COLORS = 5 +``` + ### Настройка волн При `DETAIL_PAGE_BG_MODE` равном `"static_waves"` или `"waves"` можно настроить внешний вид волн через словарь `DETAIL_PAGE_WAVES`: diff --git a/portprotonqt/detail_pages/utils.py b/portprotonqt/detail_pages/utils.py index 24f7917e..a21c3777 100644 --- a/portprotonqt/detail_pages/utils.py +++ b/portprotonqt/detail_pages/utils.py @@ -127,7 +127,10 @@ def _setup_palette_stylesheet(detail_page: QWidget, pixmap: QPixmap | None, main def on_palette_ready(palette: list) -> None: _on_palette_ready(palette, detail_page, main_window) - main_window.getColorPalette_from_pixmap(pixmap, num_colors=5, callback=on_palette_ready) + num_colors = getattr(main_window.theme, 'DETAIL_PAGE_PALETTE_COLORS', 5) + if num_colors < 2: + num_colors = 2 + main_window.getColorPalette_from_pixmap(pixmap, num_colors=num_colors, callback=on_palette_ready) def _on_palette_ready(palette: list, detail_page: QWidget, main_window) -> None: @@ -190,13 +193,37 @@ def _apply_palette_stylesheet(detail_page: QWidget, palette: list, main_window) main_window.darkenColor(color, factor=200) for color in palette ] stops = _resolve_gradient_stops(main_window.theme, dark_palette) - stylesheet = f""" - QWidget {{ - background: qlineargradient(x1:0, y1:0, x2:1, y2:1, - {stops}); - border-radius: 0px; - }} -""" + gradient_type = getattr(main_window.theme, 'DETAIL_PAGE_GRADIENT_TYPE', 'linear') + + if gradient_type == 'radial': + cx = getattr(main_window.theme, 'DETAIL_PAGE_GRADIENT_CX', 0.5) + cy = getattr(main_window.theme, 'DETAIL_PAGE_GRADIENT_CY', 0.5) + radius = getattr(main_window.theme, 'DETAIL_PAGE_GRADIENT_RADIUS', 0.5) + fx = getattr(main_window.theme, 'DETAIL_PAGE_GRADIENT_FX', 0.5) + fy = getattr(main_window.theme, 'DETAIL_PAGE_GRADIENT_FY', 0.5) + + stylesheet = f""" + QWidget {{ + background: qradialgradient(cx:{cx}, cy:{cy}, radius:{radius}, + fx:{fx}, fy:{fy}, + {stops}); + border-radius: 0px; + }} + """ + else: + x1 = getattr(main_window.theme, 'DETAIL_PAGE_GRADIENT_X1', 0) + y1 = getattr(main_window.theme, 'DETAIL_PAGE_GRADIENT_Y1', 0) + x2 = getattr(main_window.theme, 'DETAIL_PAGE_GRADIENT_X2', 1) + y2 = getattr(main_window.theme, 'DETAIL_PAGE_GRADIENT_Y2', 1) + + stylesheet = f""" + QWidget {{ + background: qlineargradient(x1:{x1}, y1:{y1}, x2:{x2}, y2:{y2}, + {stops}); + border-radius: 0px; + }} + """ + detail_page.setStyleSheet(stylesheet) _setup_wave_background(detail_page, dark_palette, main_window.theme) detail_page.update() -- 2.54.0