Boris Yumankulov
613b28a751
All checks were successful
Code check / Check code (push) Successful in 1m6s
Signed-off-by: Boris Yumankulov <boria138@altlinux.org>
296 lines
16 KiB
Markdown
296 lines
16 KiB
Markdown
📘 This documentation is also available in [English](README.md)
|
||
|
||
---
|
||
|
||
## 📋 Содержание
|
||
- [Обзор](#-обзор)
|
||
- [Создание папки темы](#-создание-папки-темы)
|
||
- [Файл стилей](#-файл-стилей-stylespy)
|
||
- [Конфигурация анимации](#-конфигурация-анимации)
|
||
- [Метаинформация](#-метаинформация-metainfoini)
|
||
- [Скриншоты](#-скриншоты)
|
||
- [Шрифты и иконки](#-шрифты-и-иконки-опционально)
|
||
|
||
---
|
||
|
||
## 📖 Обзор
|
||
|
||
Темы в `PortProtonQT` позволяют изменить внешний вид интерфейса. Все темы хранятся в папке:
|
||
|
||
- `~/.local/share/PortProtonQT/themes`.
|
||
|
||
---
|
||
|
||
## 📁 Создание папки темы
|
||
|
||
```bash
|
||
mkdir -p ~/.local/share/PortProtonQT/themes/my_custom_theme
|
||
```
|
||
|
||
---
|
||
|
||
## 🎨 Файл стилей (`styles.py`)
|
||
|
||
Создайте `styles.py` в корне темы. В нём определите переменные и/или функции, возвращающие QSS-оформление (Qt Style Sheets). Для лучшей организации кода, вы можете разделить тему на несколько подмодулей, создав поддиректорию (например, `styles`, `components` и т.д.) с отдельными Python-файлами для разных компонентов, и импортировать их в `styles.py`.
|
||
|
||
**Пример модульной структуры:**
|
||
```
|
||
my_custom_theme/
|
||
├── styles.py
|
||
├── metainfo.ini
|
||
├── fonts/
|
||
├── images/
|
||
└── styles/ # Это может быть названо как угодно (например, components, modules и т.д.)
|
||
├── __init__.py # Этот пустой файл делает директорию Python-пакетом
|
||
├── constants.py
|
||
├── base.py
|
||
├── game_card.py
|
||
├── detail_page.py
|
||
├── settings.py
|
||
├── winetricks.py
|
||
└── theme_utils.py
|
||
```
|
||
|
||
**Основной файл styles.py:**
|
||
```python
|
||
# Импорт из подмодулей темы с использованием абсолютных путей относительно пакета
|
||
# Замените 'my_custom_theme' на фактическое имя папки вашей темы и 'styles' на имя вашей поддиректории
|
||
from portprotonqt.themes.my_custom_theme.styles.constants import *
|
||
from portprotonqt.themes.my_custom_theme.styles.base import *
|
||
from portprotonqt.themes.my_custom_theme.styles.game_card import *
|
||
from portprotonqt.themes.my_custom_theme.styles.detail_page import *
|
||
from portprotonqt.themes.my_custom_theme.styles.settings import *
|
||
from portprotonqt.themes.my_custom_theme.styles.winetricks import *
|
||
from portprotonqt.themes.my_custom_theme.styles.theme_utils import *
|
||
```
|
||
|
||
**Пример подмодуля (styles/constants.py):**
|
||
```python
|
||
# Константы темы
|
||
font_family = "Play"
|
||
font_size_a = "16px"
|
||
font_size_b = "24px"
|
||
border_radius_a = "10px"
|
||
color_a = "#409EFF"
|
||
color_b = "#282a33"
|
||
# ... другие константы
|
||
```
|
||
|
||
---
|
||
|
||
## 🎥 Конфигурация анимации
|
||
|
||
Словарь `GAME_CARD_ANIMATION` управляет всеми параметрами анимации для карточек игр:
|
||
|
||
```python
|
||
GAME_CARD_ANIMATION = {
|
||
# Тип анимации при входе и выходе на детальную страницу
|
||
# Возможные значения: "fade", "slide_left", "slide_right", "slide_up", "slide_down", "bounce"
|
||
# Определяет, как детальная страница появляется и исчезает
|
||
"detail_page_animation_type": "fade",
|
||
|
||
# Ширина обводки карточки в состоянии покоя (без наведения или фокуса)
|
||
# Влияет на толщину рамки вокруг карточки, когда она не выделена
|
||
# Значение в пикселях
|
||
"default_border_width": 2,
|
||
|
||
# Ширина обводки при наведении курсора
|
||
# Увеличивает толщину рамки, когда курсор находится над карточкой
|
||
# Значение в пикселях
|
||
"hover_border_width": 8,
|
||
|
||
# Ширина обводки при фокусе (например, при выборе с клавиатуры)
|
||
# Увеличивает толщину рамки, когда карточка в фокусе
|
||
# Значение в пикселях
|
||
"focus_border_width": 12,
|
||
|
||
# Минимальная ширина обводки во время пульсирующей анимации
|
||
# Определяет минимальную толщину рамки при пульсации (анимация "дыхания")
|
||
# Значение в пикселях
|
||
"pulse_min_border_width": 8,
|
||
|
||
# Максимальная ширина обводки во время пульсирующей анимации
|
||
# Определяет максимальную толщину рамки при пульсации
|
||
# Значение в пикселях
|
||
"pulse_max_border_width": 10,
|
||
|
||
# Длительность анимации изменения толщины обводки (например, при наведении или фокусе)
|
||
# Влияет на скорость перехода от одной ширины обводки к другой
|
||
# Значение в миллисекундах
|
||
"thickness_anim_duration": 300,
|
||
|
||
# Длительность одного цикла пульсирующей анимации
|
||
# Определяет, как быстро рамка "пульсирует" между min и max значениями
|
||
# Значение в миллисекундах
|
||
"pulse_anim_duration": 800,
|
||
|
||
# Длительность анимации вращения градиента
|
||
# Влияет на скорость, с которой градиентная обводка вращается вокруг карточки
|
||
# Значение в миллисекундах
|
||
"gradient_anim_duration": 3000,
|
||
|
||
# Начальный угол градиента (в градусах)
|
||
# Определяет начальную точку вращения градиента при старте анимации
|
||
"gradient_start_angle": 360,
|
||
|
||
# Конечный угол градиента (в градусах)
|
||
# Определяет конечную точку вращения градиента
|
||
# Значение 0 означает полный поворот на 360 градусов
|
||
"gradient_end_angle": 0,
|
||
|
||
# Тип анимации для карточки при наведении или фокусе
|
||
# Возможные значения: "gradient", "scale"
|
||
# "gradient" включает вращающийся градиент для обводки, "scale" увеличивает размер карточки
|
||
"card_animation_type": "gradient",
|
||
|
||
# Масштаб карточки в состоянии покоя
|
||
# Определяет базовый размер карточки (1.0 = 100% от исходного размера)
|
||
# Значение в долях (например, 1.0 для нормального размера)
|
||
"default_scale": 1.0,
|
||
|
||
# Масштаб карточки при наведении курсора
|
||
# Увеличивает размер карточки при наведении
|
||
# Значение в долях (например, 1.1 = 110% от исходного размера)
|
||
"hover_scale": 1.1,
|
||
|
||
# Масштаб карточки при фокусе (например, при выборе с клавиатуры)
|
||
# Увеличивает размер карточки при фокусе
|
||
# Значение в долях (например, 1.05 = 105% от исходного размера)
|
||
"focus_scale": 1.05,
|
||
|
||
# Длительность анимации масштабирования
|
||
# Влияет на скорость изменения размера карточки при наведении или фокусе
|
||
# Значение в миллисекундах
|
||
"scale_anim_duration": 200,
|
||
|
||
# Тип кривой сглаживания для анимации увеличения обводки (при наведении/фокусе)
|
||
# Влияет на "чувство" анимации (например, плавное ускорение или замедление)
|
||
# Возможные значения: строки, соответствующие QEasingCurve.Type (например, "OutBack", "InOutQuad")
|
||
"thickness_easing_curve": "OutBack",
|
||
|
||
# Тип кривой сглаживания для анимации уменьшения обводки (при уходе курсора/потере фокуса)
|
||
# Влияет на "чувство" возврата к исходной ширине обводки
|
||
"thickness_easing_curve_out": "InBack",
|
||
|
||
# Тип кривой сглаживания для анимации увеличения масштаба (при наведении/фокусе)
|
||
# Влияет на "чувство" анимации масштабирования (например, с эффектом "отскока")
|
||
# Возможные значения: строки, соответствующие QEasingCurve.Type
|
||
"scale_easing_curve": "OutBack",
|
||
|
||
# Тип кривой сглаживания для анимации уменьшения масштаба (при уходе курсора/потере фокуса)
|
||
# Влияет на "чувство" возврата к исходному масштабу
|
||
"scale_easing_curve_out": "InBack",
|
||
|
||
# Цвета градиента для анимированной обводки
|
||
# Список словарей, где каждый словарь задает позицию (0.0–1.0) и цвет в формате hex
|
||
# Влияет на внешний вид обводки при наведении или фокусе, если card_animation_type="gradient"
|
||
"gradient_colors": [
|
||
{"position": 0, "color": "#00fff5"}, # Начальный цвет (циан)
|
||
{"position": 0.33, "color": "#FF5733"}, # Цвет на 33% (оранжевый)
|
||
{"position": 0.66, "color": "#9B59B6"}, # Цвет на 66% (пурпурный)
|
||
{"position": 1, "color": "#00fff5"} # Конечный цвет (возвращение к циану)
|
||
],
|
||
|
||
# Длительность анимации fade при входе на детальную страницу
|
||
# Влияет на скорость появления страницы при fade-анимации
|
||
# Значение в миллисекундах
|
||
"detail_page_fade_duration": 350,
|
||
|
||
# Длительность анимации slide при входе на детальную страницу
|
||
# Влияет на скорость скольжения страницы при slide-анимации
|
||
# Значение в миллисекундах
|
||
"detail_page_slide_duration": 500,
|
||
|
||
# Длительность анимации bounce при входе на детальную страницу
|
||
# Влияет на скорость "прыжка" страницы при bounce-анимации
|
||
# Значение в миллисекундах
|
||
"detail_page_bounce_duration": 400,
|
||
|
||
# Длительность анимации fade при выходе из детальной страницы
|
||
# Влияет на скорость исчезновения страницы при fade-анимации
|
||
# Значение в миллисекундах
|
||
"detail_page_fade_duration_exit": 350,
|
||
|
||
# Длительность анимации slide при выходе из детальной страницы
|
||
# Влияет на скорость скольжения страницы при slide-анимации
|
||
# Значение в миллисекундах
|
||
"detail_page_slide_duration_exit": 500,
|
||
|
||
# Длительность анимации bounce при выходе из детальной страницы
|
||
# Влияет на скорость "сжатия" страницы при bounce-анимации
|
||
# Значение в миллисекундах
|
||
"detail_page_bounce_duration_exit": 400,
|
||
|
||
# Тип кривой сглаживания для анимации при входе на детальную страницу
|
||
# Применяется к slide и bounce анимациям, влияет на "чувство" движения
|
||
# Возможные значения: строки, соответствующие QEasingCurve.Type
|
||
"detail_page_easing_curve": "OutCubic",
|
||
|
||
# Тип кривой сглаживания для анимации при выходе из детальной страницы
|
||
# Применяется к slide и bounce анимациям, влияет на "чувство" движения
|
||
# Возможные значения: строки, соответствующие QEasingCurve.Type
|
||
"detail_page_easing_curve_exit": "InCubic"
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 📝 Метаинформация (`metainfo.ini`)
|
||
|
||
```ini
|
||
[Metainfo]
|
||
name_en = My Custom Theme
|
||
name_ru = Моя пользовательская тема
|
||
author = Ваше имя
|
||
author_link = https://example.com
|
||
description_en = Description of your theme.
|
||
description_ru = Описание вашей темы.
|
||
```
|
||
|
||
### Поддержка переводов
|
||
|
||
Вы должны предоставить переводы для названия и описания вашей темы, добавив поля с указанием языка:
|
||
- `name_en`, `name_ru` и т.д. для названий тем
|
||
- `description_en`, `description_ru` и т.д. для описаний тем
|
||
|
||
Приложение автоматически выберет соответствующий перевод на основе языка системы пользователя, с откатом к английскому языку, если переводы недоступны для языка пользователя.
|
||
|
||
---
|
||
|
||
## 🖼 Скриншоты
|
||
|
||
Папка: `images/screenshots/` — любые изображения оформления темы.
|
||
|
||
### Поддержка перевода скриншотов
|
||
|
||
Вы можете предоставить переводы для подписей к скриншотам, добавив записи в секцию `[Screenshots]` в файле `metainfo.ini`:
|
||
|
||
```ini
|
||
[Screenshots]
|
||
auto_installs_en = Auto-installs
|
||
auto_installs_ru = Автоустановки
|
||
library_en = Library
|
||
library_ru = Библиотека
|
||
game_card_en = Game Card
|
||
game_card_ru = Карточка
|
||
context_menu_en = Context Menu
|
||
context_menu_ru = Контекстное меню
|
||
portproton_settings_en = PortProton Settings
|
||
portproton_settings_ru = Настройки PortProton
|
||
wine_settings_en = Wine Settings
|
||
wine_settings_ru = Настройки Wine
|
||
themes_en = Themes
|
||
themes_ru = Темы
|
||
```
|
||
|
||
Файлы скриншотов должны быть названы на английском языке (без пробелов), и приложение будет отображать соответствующую переведенную подпись в зависимости от языка системы пользователя, с откатом к английскому языку, если переводы недоступны.
|
||
|
||
---
|
||
|
||
## 🔡 Шрифты и иконки (опционально)
|
||
|
||
- Шрифты: `fonts/*.ttf` или `.otf`
|
||
- Иконки: `images/icons/*.svg/.png`
|
||
|
||
---
|