Make go to flow widget themable

This commit is contained in:
luisangelsm
2026-01-24 18:43:25 +01:00
parent 3bdbf4424b
commit 7b6055e76d
17 changed files with 191 additions and 33 deletions

View File

@ -18,19 +18,6 @@ GoToFlowToolBar::GoToFlowToolBar(QWidget *parent)
quickNavi->setLayout(naviLayout);
slider = new QSlider(Qt::Horizontal, this);
slider->setStyleSheet(
"QSlider::groove:horizontal {"
" border: 1px solid #22FFFFFF;"
" border-radius: 1px;"
" background: #77000000;"
" margin: 2px 0;"
" padding: 1px;"
"}"
"QSlider::handle:horizontal {"
" background: #55FFFFFF;"
" width: 48px;"
" border-radius: 1px;"
"}");
connect(slider, &QSlider::valueChanged, this, &GoToFlowToolBar::setCenter);
connect(slider, &QSlider::valueChanged, this, &GoToFlowToolBar::setPage);
@ -41,35 +28,25 @@ GoToFlowToolBar::GoToFlowToolBar(QWidget *parent)
edit = new QLineEdit();
edit->setValidator(v);
edit->setAlignment(Qt::AlignRight | Qt::AlignVCenter);
edit->setStyleSheet("QLineEdit {border: 1px solid #77000000; background: #55000000; color: white; padding: 3px 5px 5px 5px; margin: 13px 5px 12px 5px; font-weight:bold}");
edit->setFixedSize(54, 50);
edit->setAttribute(Qt::WA_MacShowFocusRect, false);
// edit->setAttribute(Qt::WA_LayoutUsesWidgetRect,true);
// edit->resize(QSize(54,50));
edit->setSizePolicy(QSizePolicy(QSizePolicy::Fixed, QSizePolicy::Fixed));
// edit->setAutoFillBackground(false);
connect(edit, &QLineEdit::returnPressed, this, &GoToFlowToolBar::goTo);
QString centerButtonCSS = "QPushButton {background-image: url(:/images/imgCenterSlide.png); width: 100%; height:100%; background-repeat: none; border: none;} "
"QPushButton:focus { border: none; outline: none;}"
"QPushButton:pressed {background-image: url(:/images/imgCenterSlidePressed.png); width: 100%; height:100%; background-repeat: none; border: none;} ";
centerButton = new QPushButton();
centerButton->setStyleSheet(centerButtonCSS);
centerButton->setIconSize(QSize(12, 12));
centerButton->setFixedSize(26, 50);
centerButton->setAttribute(Qt::WA_LayoutUsesWidgetRect, true);
connect(centerButton, &QAbstractButton::clicked, this, &GoToFlowToolBar::centerSlide);
QString goToButtonCSS = "QPushButton {background-image: url(:/images/imgGoToSlide.png); width: 100%; height:100%; background-repeat: none; border: none;} "
"QPushButton:focus { border: none; outline: none;}"
"QPushButton:pressed {background-image: url(:/images/imgGoToSlidePressed.png); width: 100%; height:100%; background-repeat: none; border: none;} ";
goToButton = new QPushButton();
goToButton->setStyleSheet(goToButtonCSS);
goToButton->setIconSize(QSize(12, 12));
goToButton->setFixedSize(32, 50);
goToButton->setAttribute(Qt::WA_LayoutUsesWidgetRect, true);
connect(goToButton, &QPushButton::clicked, this, &GoToFlowToolBar::goTo);
goToButton2 = new QPushButton();
goToButton2->setStyleSheet(goToButtonCSS);
goToButton2->setIconSize(QSize(12, 12));
goToButton2->setFixedSize(32, 50);
goToButton2->setAttribute(Qt::WA_LayoutUsesWidgetRect, true);
connect(goToButton2, &QPushButton::clicked, this, &GoToFlowToolBar::goTo);
@ -94,12 +71,34 @@ GoToFlowToolBar::GoToFlowToolBar(QWidget *parent)
updateOptions();
setFixedHeight(50);
initTheme(this);
}
void GoToFlowToolBar::applyTheme(const Theme &theme)
{
auto goToFlowTheme = theme.goToFlowWidget;
slider->setStyleSheet(goToFlowTheme.sliderQSS);
edit->setStyleSheet(goToFlowTheme.editQSS);
pageHint->setStyleSheet(goToFlowTheme.labelQSS);
centerButton->setStyleSheet(goToFlowTheme.buttonQSS);
centerButton->setIcon(goToFlowTheme.centerIcon);
goToButton->setStyleSheet(goToFlowTheme.buttonQSS);
goToButton->setIcon(goToFlowTheme.goToIcon);
goToButton2->setStyleSheet(goToFlowTheme.buttonQSS);
goToButton2->setIcon(goToFlowTheme.goToIcon);
update();
}
void GoToFlowToolBar::paintEvent(QPaintEvent *)
{
QPainter painter(this);
painter.fillRect(0, 0, width(), height(), QColor(0x99000000));
painter.fillRect(0, 0, width(), height(), theme.goToFlowWidget.toolbarBackgroundColor);
}
void GoToFlowToolBar::setPage(int pageNumber)

View File

@ -4,15 +4,20 @@
#include <QWidget>
#include <QStackedWidget>
#include "themable.h"
class QLineEdit;
class QIntValidator;
class QPushButton;
class QSlider;
class QLabel;
class GoToFlowToolBar : public QStackedWidget
class GoToFlowToolBar : public QStackedWidget, protected Themable
{
Q_OBJECT
protected:
void applyTheme(const Theme &theme) override;
private:
QLineEdit *edit;
QSlider *slider;

View File

@ -40,6 +40,16 @@ GoToFlowWidget::GoToFlowWidget(QWidget *parent, FlowType flowType)
resize(static_cast<int>(5 * imageSize.width()), toolBar->height() + static_cast<int>(imageSize.height() * 1.7));
this->setCursor(QCursor(Qt::ArrowCursor));
initTheme(this);
}
void GoToFlowWidget::applyTheme(const Theme &theme)
{
auto goToFlowTheme = theme.goToFlowWidget;
flow->setBackgroundColor(goToFlowTheme.flowBackgroundColor);
flow->setTextColor(goToFlowTheme.flowTextColor);
}
GoToFlowWidget::~GoToFlowWidget()

View File

@ -6,6 +6,7 @@
#include "yacreader_global_gui.h"
#include "yacreader_page_flow_rhi.h"
#include "themable.h"
using namespace YACReader;
@ -14,9 +15,12 @@ class GoToFlowToolBar;
class QVBoxLayout;
class QKeyEvent;
class GoToFlowWidget : public QWidget
class GoToFlowWidget : public QWidget, protected Themable
{
Q_OBJECT
protected:
void applyTheme(const Theme &theme) override;
public:
GoToFlowWidget(QWidget *parent = nullptr, FlowType flowType = CoverFlowLike);
~GoToFlowWidget() override;

View File

@ -16,6 +16,26 @@ struct ViewerThemeTemplates {
QString infoLabelQSS = "QLabel { color : %1; font-size:%2px; }";
};
struct GoToFlowWidgetThemeTemplates {
QString sliderQSS = "QSlider::groove:horizontal {"
" border: 1px solid %1;"
" border-radius: 1px;"
" background: %2;"
" margin: 2px 0;"
" padding: 1px;"
"}"
"QSlider::handle:horizontal {"
" background: %3;"
" width: 48px;"
" border-radius: 1px;"
"}";
QString editQSS = "QLineEdit {border: 1px solid %1; background: %2; color: %3; padding: 3px 5px 5px 5px; margin: 13px 5px 12px 5px; font-weight:bold}";
QString buttonQSS = "QPushButton { border: none; padding: 0px; } "
"QPushButton:focus { border: none; outline: none; } "
"QPushButton:pressed { padding-top: 1px; padding-left: 1px; padding-bottom: -1px; padding-right: -1px; }";
QString labelQSS = "QLabel { color: %1; }";
};
struct ToolbarTheme {
QString toolbarQSS;
@ -92,9 +112,22 @@ struct ViewerTheme {
QString infoLabelQSS;
};
struct GoToFlowWidgetTheme {
QColor flowBackgroundColor;
QColor flowTextColor;
QColor toolbarBackgroundColor;
QString sliderQSS;
QString editQSS;
QString buttonQSS;
QString labelQSS;
QIcon centerIcon;
QIcon goToIcon;
};
struct Theme {
ToolbarTheme toolbar;
ViewerTheme viewer;
GoToFlowWidgetTheme goToFlowWidget;
};
#endif // THEME_H

View File

@ -23,11 +23,28 @@ struct ViewerParams {
QColor infoTextColor;
};
struct GoToFlowWidgetParams {
GoToFlowWidgetThemeTemplates t;
QColor flowBackgroundColor;
QColor flowTextColor;
QColor toolbarBackgroundColor;
QColor sliderBorderColor;
QColor sliderGrooveColor;
QColor sliderHandleColor;
QColor editBorderColor;
QColor editBackgroundColor;
QColor editTextColor;
QColor labelTextColor;
QColor iconColor;
};
struct ThemeParams {
QString themeName;
ToolbarParams toolbarParams;
ViewerParams viewerParams;
GoToFlowWidgetParams goToFlowWidgetParams;
};
void setToolbarIconPair(QIcon &icon,
@ -113,6 +130,28 @@ Theme makeTheme(const ThemeParams &params)
theme.viewer.infoLabelQSS = params.viewerParams.t.infoLabelQSS.arg(params.viewerParams.infoTextColor.name());
// end Viewer
// GoToFlowWidget
auto &gotoParams = params.goToFlowWidgetParams;
theme.goToFlowWidget.flowBackgroundColor = gotoParams.flowBackgroundColor;
theme.goToFlowWidget.flowTextColor = gotoParams.flowTextColor;
theme.goToFlowWidget.toolbarBackgroundColor = gotoParams.toolbarBackgroundColor;
theme.goToFlowWidget.sliderQSS = gotoParams.t.sliderQSS.arg(
gotoParams.sliderBorderColor.name(QColor::HexArgb),
gotoParams.sliderGrooveColor.name(QColor::HexArgb),
gotoParams.sliderHandleColor.name(QColor::HexArgb));
theme.goToFlowWidget.editQSS = gotoParams.t.editQSS.arg(
gotoParams.editBorderColor.name(QColor::HexArgb),
gotoParams.editBackgroundColor.name(QColor::HexArgb),
gotoParams.editTextColor.name());
theme.goToFlowWidget.buttonQSS = gotoParams.t.buttonQSS;
theme.goToFlowWidget.labelQSS = gotoParams.t.labelQSS.arg(gotoParams.labelTextColor.name());
const QString centerIconPath = recoloredSvgToThemeFile(":/images/centerFlow.svg", gotoParams.iconColor, params.themeName);
const QString goToIconPath = recoloredSvgToThemeFile(":/images/gotoFlow.svg", gotoParams.iconColor, params.themeName);
theme.goToFlowWidget.centerIcon = QIcon(centerIconPath);
theme.goToFlowWidget.goToIcon = QIcon(goToIconPath);
// end GoToFlowWidget
return theme;
}
@ -157,6 +196,22 @@ ThemeParams classicThemeParams()
params.viewerParams = viewerParams;
GoToFlowWidgetParams goToFlowWidgetParams;
goToFlowWidgetParams.flowBackgroundColor = QColor(0x282828);
goToFlowWidgetParams.flowTextColor = Qt::white;
goToFlowWidgetParams.toolbarBackgroundColor = QColor::fromRgba(0x99000000);
goToFlowWidgetParams.sliderBorderColor = QColor::fromRgba(0x22FFFFFF);
goToFlowWidgetParams.sliderGrooveColor = QColor::fromRgba(0x77000000);
goToFlowWidgetParams.sliderHandleColor = QColor::fromRgba(0x55FFFFFF);
goToFlowWidgetParams.editBorderColor = QColor::fromRgba(0x77000000);
goToFlowWidgetParams.editBackgroundColor = QColor::fromRgba(0x55000000);
goToFlowWidgetParams.editTextColor = Qt::white;
goToFlowWidgetParams.labelTextColor = Qt::white;
goToFlowWidgetParams.iconColor = Qt::white;
goToFlowWidgetParams.t = GoToFlowWidgetThemeTemplates();
params.goToFlowWidgetParams = goToFlowWidgetParams;
return params;
}
@ -185,6 +240,22 @@ ThemeParams lightThemeParams()
params.viewerParams = viewerParams;
GoToFlowWidgetParams goToFlowWidgetParams;
goToFlowWidgetParams.flowBackgroundColor = QColor(0xF6F6F6);
goToFlowWidgetParams.flowTextColor = QColor(0x202020);
goToFlowWidgetParams.toolbarBackgroundColor = QColor::fromRgba(0xBBFFFFFF);
goToFlowWidgetParams.sliderBorderColor = QColor::fromRgba(0x22000000);
goToFlowWidgetParams.sliderGrooveColor = QColor::fromRgba(0x33000000);
goToFlowWidgetParams.sliderHandleColor = QColor::fromRgba(0x55000000);
goToFlowWidgetParams.editBorderColor = QColor::fromRgba(0x33000000);
goToFlowWidgetParams.editBackgroundColor = QColor::fromRgba(0x22000000);
goToFlowWidgetParams.editTextColor = QColor(0x202020);
goToFlowWidgetParams.labelTextColor = QColor(0x202020);
goToFlowWidgetParams.iconColor = QColor(0x404040);
goToFlowWidgetParams.t = GoToFlowWidgetThemeTemplates();
params.goToFlowWidgetParams = goToFlowWidgetParams;
return params;
}
@ -213,6 +284,22 @@ ThemeParams darkThemeParams()
params.viewerParams = viewerParams;
GoToFlowWidgetParams goToFlowWidgetParams;
goToFlowWidgetParams.flowBackgroundColor = QColor(40, 40, 40);
goToFlowWidgetParams.flowTextColor = Qt::white;
goToFlowWidgetParams.toolbarBackgroundColor = QColor::fromRgba(0x99000000);
goToFlowWidgetParams.sliderBorderColor = QColor::fromRgba(0x22FFFFFF);
goToFlowWidgetParams.sliderGrooveColor = QColor::fromRgba(0x77000000);
goToFlowWidgetParams.sliderHandleColor = QColor::fromRgba(0x55FFFFFF);
goToFlowWidgetParams.editBorderColor = QColor::fromRgba(0x77000000);
goToFlowWidgetParams.editBackgroundColor = QColor::fromRgba(0x55000000);
goToFlowWidgetParams.editTextColor = Qt::white;
goToFlowWidgetParams.labelTextColor = Qt::white;
goToFlowWidgetParams.iconColor = QColor(0xCCCCCC);
goToFlowWidgetParams.t = GoToFlowWidgetThemeTemplates();
params.goToFlowWidgetParams = goToFlowWidgetParams;
return params;
}

View File

@ -12,10 +12,8 @@
<file>../images/close.svg</file>
<file>../images/up.png</file>
<file>../images/down.png</file>
<file>../images/imgCenterSlide.png</file>
<file>../images/imgGoToSlide.png</file>
<file>../images/imgCenterSlidePressed.png</file>
<file>../images/imgGoToSlidePressed.png</file>
<file>../images/centerFlow.svg</file>
<file>../images/gotoFlow.svg</file>
<file>../images/defaultCover.png</file>
<file>../images/fromTo.png</file>
<file>../images/dropDownArrow.png</file>