settings: add tooltip icon next to settings (#6837)

Adds a Factorio-esque tooltip icon next to settings that have a tooltip available.

Reported-by: Mm2PL
Reviewed-by: Nerixyz <nerixdev@outlook.de>
Reviewed-by: pajlada <rasmus.karlsson@pajlada.com>

CMakeLists.txt

@@ -144,6 +144,7 @@ find_package(Qt${MAJOR_QT_VERSION} REQUIRED
     Gui
     Network
     Svg
+    SvgWidgets
     Concurrent
     )
 if(CHATTERINO_ALLOW_PRIVATE_QT_API)

resources/settings/hint.svg

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   fill="none"
+   width="100"
+   height="150"
+   viewBox="0 -50 100 200"
+   version="1.1"
+   xmlns="http://www.w3.org/2000/svg">
+    <mask id="letterMask">
+        <rect
+           x="0"
+           y="0"
+           width="100"
+           height="100"
+           fill="white" />
+        <!-- Qt does not like <text>
+        <text x="50" y="50" fill="black" style="font: 100px sans-serif" text-anchor="middle" dominant-baseline="middle">i</text>
+        -->
+
+        <!-- normal version 100px -->
+        <!--
+        <path
+            d="m 50.100029,3.0999992 q 2,0 3.5,1.4 1.6,1.3 1.6,4.2 0,2.7999998 -1.6,4.1999998 -1.5,1.4 -3.5,1.4 -2.2,0 -3.7,-1.4 -1.5,-1.4 -1.5,-4.1999998 0,-2.9 1.5,-4.2 1.5,-1.4 3.7,-1.4 z m 4.3,20.0999998 v 53.6 h -8.8 v -53.6 z"
+            fill="black"
+            transform="translate(0, 10)" />
+        -->
+
+        <!-- bold version 100px -->
+        <path
+            d="m 50.050011,1.1999992 q 3.3,0 5.7,1.6 2.5,1.5 2.5,5.8 0,4.0999998 -2.5,5.6999998 -2.4,1.6 -5.7,1.6 -3.4,0 -5.8,-1.6 -2.4,-1.6 -2.4,-5.6999998 0,-4.3 2.4,-5.8 2.4,-1.6 5.8,-1.6 z m 7.5,21.4999998 v 54.6 h -15.1 v -54.6 z"
+            fill="black"
+            transform="translate(0, 10)" />
+    </mask>
+    <circle
+       mask="url(#letterMask)"
+       cx="50"
+       cy="50"
+       r="50"
+       fill="#ffffff"
+       stroke="#000000"
+       stroke-width="0.25" />
+</svg>

src/CMakeLists.txt

@@ -935,6 +935,7 @@ target_link_libraries(${LIBRARY_PROJECT}
         Qt${MAJOR_QT_VERSION}::Gui
         Qt${MAJOR_QT_VERSION}::Network
         Qt${MAJOR_QT_VERSION}::Svg
+        Qt${MAJOR_QT_VERSION}::SvgWidgets
         Qt${MAJOR_QT_VERSION}::Concurrent
 
         LibCommuni::LibCommuni

src/widgets/settingspages/SettingWidget.cpp

@@ -19,6 +19,12 @@
 #include <QFormLayout>
 #include <QLabel>
 #include <QLineEdit>
+#include <QPixmap>
+#include <QSvgRenderer>
+#include <QSvgWidget>
+#include <Qt>
+
+#include <algorithm>
 
 namespace {
 
@@ -33,7 +39,8 @@ const QRegularExpression MAX_TOOLTIP_LINE_LENGTH_REGEX(
 namespace chatterino {
 
 SettingWidget::SettingWidget(const QString &mainKeyword)
-    : vLayout(new QVBoxLayout(this))
+    : tooltipIcon(new QSvgWidget(this))
+    , vLayout(new QVBoxLayout(this))
     , hLayout(new QHBoxLayout)
 {
     this->vLayout->setContentsMargins(0, 0, 0, 0);
@@ -42,6 +49,7 @@ SettingWidget::SettingWidget(const QString &mainKeyword)
     this->vLayout->addLayout(this->hLayout);
 
     this->keywords.append(mainKeyword);
+    this->tooltipIcon->setVisible(false);
 }
 
 SettingWidget *SettingWidget::checkbox(const QString &label,
@@ -52,6 +60,8 @@ SettingWidget *SettingWidget::checkbox(const QString &label,
     auto *check = new SCheckBox(label);
 
     widget->hLayout->addWidget(check);
+    widget->hLayout->addWidget(widget->tooltipIcon);
+    widget->hLayout->addStretch(1);
 
     // update when setting changes
     setting.connect(
@@ -80,6 +90,8 @@ SettingWidget *SettingWidget::inverseCheckbox(const QString &label,
     auto *check = new SCheckBox(label);
 
     widget->hLayout->addWidget(check);
+    widget->hLayout->addWidget(widget->tooltipIcon);
+    widget->hLayout->addStretch(1);
 
     // update when setting changes
     setting.connect(
@@ -109,6 +121,8 @@ SettingWidget *SettingWidget::customCheckbox(
     auto *check = new SCheckBox(label);
 
     widget->hLayout->addWidget(check);
+    widget->hLayout->addWidget(widget->tooltipIcon);
+    widget->hLayout->addStretch(1);
 
     check->setChecked(initialValue);
 
@@ -147,6 +161,7 @@ SettingWidget *SettingWidget::intInput(const QString &label,
     }
 
     widget->hLayout->addWidget(lbl);
+    widget->hLayout->addWidget(widget->tooltipIcon);
     widget->hLayout->addStretch(1);
     widget->hLayout->addWidget(input);
 
@@ -192,6 +207,7 @@ SettingWidget *SettingWidget::dropdown(const QString &label,
     widget->label = lbl;
 
     widget->hLayout->addWidget(lbl);
+    widget->hLayout->addWidget(widget->tooltipIcon);
     widget->hLayout->addStretch(1);
     widget->hLayout->addWidget(combo);
 
@@ -265,6 +281,7 @@ SettingWidget *SettingWidget::dropdown(const QString &label,
     widget->label = lbl;
 
     widget->hLayout->addWidget(lbl);
+    widget->hLayout->addWidget(widget->tooltipIcon);
     widget->hLayout->addStretch(1);
     widget->hLayout->addWidget(combo);
 
@@ -343,6 +360,7 @@ SettingWidget *SettingWidget::dropdown(
     widget->label = lbl;
 
     widget->hLayout->addWidget(lbl);
+    widget->hLayout->addWidget(widget->tooltipIcon);
     widget->hLayout->addStretch(1);
     widget->hLayout->addWidget(combo);
 
@@ -395,6 +413,7 @@ SettingWidget *SettingWidget::colorButton(const QString &label,
     auto *colorButton = new ColorButton(color);
 
     widget->hLayout->addWidget(lbl);
+    widget->hLayout->addWidget(widget->tooltipIcon);
     widget->hLayout->addStretch(1);
     widget->hLayout->addWidget(colorButton);
 
@@ -442,6 +461,7 @@ SettingWidget *SettingWidget::lineEdit(const QString &label,
     }
 
     widget->hLayout->addWidget(lbl);
+    widget->hLayout->addWidget(widget->tooltipIcon);
     widget->hLayout->addWidget(edit);
 
     // Update the setting when the widget changes.
@@ -480,6 +500,7 @@ SettingWidget *SettingWidget::fontButton(const QString &label,
     auto *button = new SPushButton(currentFont().family());
 
     widget->hLayout->addWidget(lbl);
+    widget->hLayout->addWidget(widget->tooltipIcon);
     widget->hLayout->addStretch(1);
     widget->hLayout->addWidget(button);
 
@@ -519,16 +540,28 @@ SettingWidget *SettingWidget::setTooltip(QString tooltip)
         tooltip.replace(MAX_TOOLTIP_LINE_LENGTH_REGEX, "\n");
     }
 
+    int sz = 0;
     if (this->label != nullptr)
     {
         this->label->setToolTip(tooltip);
+        sz = this->label->sizeHint().height();
     }
 
     if (this->actionWidget != nullptr)
     {
         this->actionWidget->setToolTip(tooltip);
+        sz = std::max(sz, this->actionWidget->sizeHint().height());
     }
 
+    this->tooltipIcon->setVisible(true);
+    this->tooltipIcon->load(u":/settings/hint.svg"_qs);
+    this->tooltipIcon->setToolTip(tooltip);
+    auto *r = this->tooltipIcon->renderer();
+    auto vb = r->viewBox();
+    this->tooltipIcon->setFixedHeight(sz);
+    this->tooltipIcon->setFixedWidth(
+        int(double(sz) / double(vb.height()) * double(vb.width())));
+
     this->keywords.append(tooltip);
 
     return this;

src/widgets/settingspages/SettingWidget.hpp

@@ -25,6 +25,7 @@
 
 class QFormLayout;
 class QLayout;
+class QSvgWidget;
 
 namespace chatterino {
 
@@ -135,6 +136,7 @@ private:
 
     QWidget *label = nullptr;
     QWidget *actionWidget = nullptr;
+    QSvgWidget *tooltipIcon;
 
     QVBoxLayout *vLayout;
     QHBoxLayout *hLayout;