Make go to flow widget themable

YACReader/goto_flow_toolbar.cpp

@@ -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)

YACReader/goto_flow_toolbar.h

@@ -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;

YACReader/goto_flow_widget.cpp

@@ -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()

YACReader/goto_flow_widget.h

@@ -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;

YACReader/themes/theme.h

@@ -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

YACReader/themes/theme_factory.cpp

@@ -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;
 }
 

YACReader/yacreader_images.qrc

@@ -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/centerFlow.svg</file>
-    <file>../images/imgGoToSlide.png</file>
+    <file>../images/gotoFlow.svg</file>
-    <file>../images/imgCenterSlidePressed.png</file>
-    <file>../images/imgGoToSlidePressed.png</file>
     <file>../images/defaultCover.png</file>
     <file>../images/fromTo.png</file>
     <file>../images/dropDownArrow.png</file>

images/centerFlow.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #f0f;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="M11.71,10.29l-1.83-1.83c.58-.85.91-1.87.91-2.97C10.79,2.58,8.42.21,5.5.21S.21,2.58.21,5.5s2.38,5.29,5.29,5.29c1.1,0,2.12-.34,2.97-.91l1.83,1.83,1.41-1.41ZM1.71,5.5c0-2.09,1.7-3.79,3.79-3.79s3.79,1.7,3.79,3.79-1.7,3.79-3.79,3.79-3.79-1.7-3.79-3.79Z"/>
+</svg>

images/gotoFlow.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #f0f;
+      }
+    </style>
+  </defs>
+  <polygon class="cls-1" points="11.71 5.71 6 0 .29 5.71 1.71 7.12 5 3.83 5 12 7 12 7 3.83 10.29 7.12 11.71 5.71"/>
+</svg>