refactor: Make Account & Settings buttons SVGs (#6267)

instead of rendering the icons directly in Chatterino, they're now SVGs This has the following consequences: 1. The color does _not_ respect your custom theme. For most users, this will not be a problem/concern. 2. You can no longer drag a split onto those buttons to create a new tab
2025-06-14 22:28:17 +02:00
parent 20b92ea0ca
commit 6398570bcc
8 changed files with 89 additions and 50 deletions
@@ -55,6 +55,7 @@
 - Dev: Fixed incorrect lua generation of static methods for typescript plugins. (#6190, #6223)
 - Dev: Merged top/bottom and left/right notebook layouts. (#6215)
 - Dev: Refactored `Button` and friends. (#6102, #6255)
+- Dev: Made Settings & Account button on Linux/macOS SVGs. (#6267)
 - Dev: `OnceFlag`'s internal flag is now atomic. (#6237)
 - Dev: Bumped clang-format requirement to 19. (#6236)

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="17.6389mm" height="17.2861mm"
+ viewBox="0 0 50 49"
+ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" baseProfile="tiny">
+<title>Qt SVG Document</title>
+<desc>Generated with Qt</desc>
+<defs>
+</defs>
+<g fill="none" stroke="black" stroke-width="1" fill-rule="evenodd" stroke-linecap="square" stroke-linejoin="bevel" >
+
+<g fill="#aaaaaa" fill-opacity="1" stroke="none" transform="matrix(1,0,0,1,0,0)"
+font-family="Sans Serif" font-size="9" font-weight="400" font-style="normal" 
+>
+<path vector-effect="none" fill-rule="evenodd" d="M43.75,43.75 L43.6734,42.0434 L43.4479,40.3797 L43.0802,38.7655 L42.577,37.2075 L41.9447,35.7123 L41.1901,34.2865 L40.3197,32.9367 L39.3402,31.6696 L38.2583,30.4917 L37.0804,29.4098 L35.8133,28.4303 L34.4635,27.5599 L34.0547,27.3436 L33.8388,27.5888 L32.6384,28.6455 L31.309,29.5434 L29.8656,30.2677 L28.323,30.8035 L26.6962,31.1359 L25,31.25 L23.3038,31.1359 L21.677,30.8035 L20.1344,30.2677 L18.691,29.5434 L17.3616,28.6455 L16.1612,27.5888 L15.9453,27.3436 L15.5365,27.5599 L14.1867,28.4303 L12.9196,29.4098 L11.7417,30.4917 L10.6598,31.6696 L9.68028,32.9367 L8.80992,34.2865 L8.05531,35.7123 L7.42305,37.2075 L6.91977,38.7655 L6.55209,40.3797 L6.32663,42.0434 L6.25,43.75 L43.75,43.75 M34.375,18.75 C34.375,23.9277 30.1777,28.125 25,28.125 C19.8223,28.125 15.625,23.9277 15.625,18.75 C15.625,13.5723 19.8223,9.375 25,9.375 C30.1777,9.375 34.375,13.5723 34.375,18.75 "/>
+</g>
+</g>
+</svg>
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="17.6389mm" height="17.2861mm"
+ viewBox="0 0 50 49"
+ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" baseProfile="tiny">
+<title>Qt SVG Document</title>
+<desc>Generated with Qt</desc>
+<defs>
+</defs>
+<g fill="none" stroke="black" stroke-width="1" fill-rule="evenodd" stroke-linecap="square" stroke-linejoin="bevel" >
+
+<g fill="#444444" fill-opacity="1" stroke="none" transform="matrix(1,0,0,1,0,0)"
+font-family="Sans Serif" font-size="9" font-weight="400" font-style="normal" 
+>
+<path vector-effect="none" fill-rule="evenodd" d="M43.75,43.75 L43.6734,42.0434 L43.4479,40.3797 L43.0802,38.7655 L42.577,37.2075 L41.9447,35.7123 L41.1901,34.2865 L40.3197,32.9367 L39.3402,31.6696 L38.2583,30.4917 L37.0804,29.4098 L35.8133,28.4303 L34.4635,27.5599 L34.0547,27.3436 L33.8388,27.5888 L32.6384,28.6455 L31.309,29.5434 L29.8656,30.2677 L28.323,30.8035 L26.6962,31.1359 L25,31.25 L23.3038,31.1359 L21.677,30.8035 L20.1344,30.2677 L18.691,29.5434 L17.3616,28.6455 L16.1612,27.5888 L15.9453,27.3436 L15.5365,27.5599 L14.1867,28.4303 L12.9196,29.4098 L11.7417,30.4917 L10.6598,31.6696 L9.68028,32.9367 L8.80992,34.2865 L8.05531,35.7123 L7.42305,37.2075 L6.91977,38.7655 L6.55209,40.3797 L6.32663,42.0434 L6.25,43.75 L43.75,43.75 M34.375,18.75 C34.375,23.9277 30.1777,28.125 25,28.125 C19.8223,28.125 15.625,23.9277 15.625,18.75 C15.625,13.5723 19.8223,9.375 25,9.375 C30.1777,9.375 34.375,13.5723 34.375,18.75 "/>
+</g>
+</g>
+</svg>
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="17.6389mm" height="17.2861mm"
+ viewBox="0 0 50 49"
+ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" baseProfile="tiny">
+<title>Qt SVG Document</title>
+<desc>Generated with Qt</desc>
+<defs>
+</defs>
+<g fill="none" stroke="black" stroke-width="1" fill-rule="evenodd" stroke-linecap="square" stroke-linejoin="bevel" >
+
+<g fill="#aaaaaa" fill-opacity="1" stroke="none" transform="matrix(1,0,0,1,0,0)"
+font-family="Sans Serif" font-size="9" font-weight="400" font-style="normal" 
+>
+<path vector-effect="none" fill-rule="evenodd" d="M43.3927,28.6615 L43.6592,26.8566 L43.75,25 L37.261,22.5552 L36.9615,21.3593 L36.5502,20.2121 L40.5912,14.5812 L39.493,13.1032 L38.2583,11.7417 L31.9455,14.6057 L30.8976,13.9759 L29.7862,13.4491 L28.6615,6.60734 L26.8566,6.34076 L25,6.25 L22.5552,12.739 L21.3593,13.0385 L20.2121,13.4498 L14.5812,9.40885 L13.1032,10.507 L11.7417,11.7417 L14.6057,18.0545 L13.9759,19.1024 L13.4491,20.2138 L6.60734,21.3385 L6.34076,23.1434 L6.25,25 L12.739,27.4448 L13.0385,28.6407 L13.4498,29.7879 L9.40885,35.4188 L10.507,36.8968 L11.7417,38.2583 L18.0545,35.3943 L19.1024,36.0241 L20.2138,36.5509 L21.3385,43.3927 L23.1434,43.6592 L25,43.75 L27.4448,37.261 L28.6407,36.9615 L29.7879,36.5502 L35.4188,40.5912 L36.8968,39.493 L38.2583,38.2583 L35.3943,31.9455 L36.0241,30.8976 L36.5509,29.7862 L43.3927,28.6615 M31.25,25 L30.9314,26.9755 L30.0441,28.6912 L28.6912,30.0441 L26.9755,30.9314 L25,31.25 L23.0245,30.9314 L21.3088,30.0441 L19.9559,28.6912 L19.0686,26.9755 L18.75,25 L19.0686,23.0245 L19.9559,21.3088 L21.3088,19.9559 L23.0245,19.0686 L25,18.75 L26.9755,19.0686 L28.6912,19.9559 L30.0441,21.3088 L30.9314,23.0245 L31.25,25"/>
+</g>
+</g>
+</svg>
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="17.6389mm" height="17.2861mm"
+ viewBox="0 0 50 49"
+ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" baseProfile="tiny">
+<title>Qt SVG Document</title>
+<desc>Generated with Qt</desc>
+<defs>
+</defs>
+<g fill="none" stroke="black" stroke-width="1" fill-rule="evenodd" stroke-linecap="square" stroke-linejoin="bevel" >
+
+<g fill="#444444" fill-opacity="1" stroke="none" transform="matrix(1,0,0,1,0,0)"
+font-family="Sans Serif" font-size="9" font-weight="400" font-style="normal" 
+>
+<path vector-effect="none" fill-rule="evenodd" d="M43.3927,28.6615 L43.6592,26.8566 L43.75,25 L37.261,22.5552 L36.9615,21.3593 L36.5502,20.2121 L40.5912,14.5812 L39.493,13.1032 L38.2583,11.7417 L31.9455,14.6057 L30.8976,13.9759 L29.7862,13.4491 L28.6615,6.60734 L26.8566,6.34076 L25,6.25 L22.5552,12.739 L21.3593,13.0385 L20.2121,13.4498 L14.5812,9.40885 L13.1032,10.507 L11.7417,11.7417 L14.6057,18.0545 L13.9759,19.1024 L13.4491,20.2138 L6.60734,21.3385 L6.34076,23.1434 L6.25,25 L12.739,27.4448 L13.0385,28.6407 L13.4498,29.7879 L9.40885,35.4188 L10.507,36.8968 L11.7417,38.2583 L18.0545,35.3943 L19.1024,36.0241 L20.2138,36.5509 L21.3385,43.3927 L23.1434,43.6592 L25,43.75 L27.4448,37.261 L28.6407,36.9615 L29.7879,36.5502 L35.4188,40.5912 L36.8968,39.493 L38.2583,38.2583 L35.3943,31.9455 L36.0241,30.8976 L36.5509,29.7862 L43.3927,28.6615 M31.25,25 L30.9314,26.9755 L30.0441,28.6912 L28.6912,30.0441 L26.9755,30.9314 L25,31.25 L23.0245,30.9314 L21.3088,30.0441 L19.9559,28.6912 L19.0686,26.9755 L18.75,25 L19.0686,23.0245 L19.9559,21.3088 L21.3088,19.9559 L23.0245,19.0686 L25,18.75 L26.9755,19.0686 L28.6912,19.9559 L30.0441,21.3088 L30.9314,23.0245 L31.25,25"/>
+</g>
+</g>
+</svg>
@@ -13,6 +13,7 @@
 #include "widgets/buttons/InitUpdateButton.hpp"
 #include "widgets/buttons/NotebookButton.hpp"
 #include "widgets/buttons/PixmapButton.hpp"
+#include "widgets/buttons/SvgButton.hpp"
 #include "widgets/dialogs/SettingsDialog.hpp"
 #include "widgets/helper/ChannelView.hpp"
 #include "widgets/helper/NotebookTab.hpp"
@@ -1407,7 +1408,12 @@ void SplitNotebook::showEvent(QShowEvent * /*event*/)
 void SplitNotebook::addCustomButtons()
 {
    // settings
-    auto *settingsBtn = this->addCustomButton<NotebookButton>();
+    auto *settingsBtn = this->addCustomButton<SvgButton>(SvgButton::Src{
+        .dark = ":/buttons/settings-darkMode.svg",
+        .light = ":/buttons/settings-lightMode.svg",
+    });
+
+    settingsBtn->setPadding({0, 0});

    // This is to ensure you can't lock yourself out of the settings
    if (getApp()->getArgs().safeMode)
@@ -1426,14 +1432,18 @@ void SplitNotebook::addCustomButtons()
            this->signalHolder_);
    }

-    settingsBtn->setIcon(NotebookButton::Settings);
-
-    QObject::connect(settingsBtn, &NotebookButton::leftClicked, [this] {
+    QObject::connect(settingsBtn, &Button::leftClicked, [this] {
        getApp()->getWindows()->showSettingsDialog(this);
    });

    // account
-    auto *userBtn = this->addCustomButton<NotebookButton>();
+    auto *userBtn = this->addCustomButton<SvgButton>(SvgButton::Src{
+        .dark = ":/buttons/account-darkMode.svg",
+        .light = ":/buttons/account-lightMode.svg",
+    });
+
+    userBtn->setPadding({0, 0});
+
    userBtn->setVisible(!getSettings()->hideUserButton.getValue());
    getSettings()->hideUserButton.connect(
        [userBtn](bool hide, auto) {
@@ -1441,8 +1451,7 @@ void SplitNotebook::addCustomButtons()
        },
        this->signalHolder_);

-    userBtn->setIcon(NotebookButton::User);
-    QObject::connect(userBtn, &NotebookButton::leftClicked, [this, userBtn] {
+    QObject::connect(userBtn, &Button::leftClicked, [this, userBtn] {
        getApp()->getWindows()->showAccountSelectPopup(
            this->mapToGlobal(userBtn->rect().bottomRight()));
    });
@@ -89,48 +89,6 @@ void NotebookButton::paintContent(QPainter &painter)
        }
        break;

-        case User: {
-            painter.setRenderHint(QPainter::Antialiasing);
-
-            auto a = w / 8;
-            QPainterPath path;
-
-            path.arcMoveTo(a, 4 * a, 6 * a, 6 * a, 0);
-            path.arcTo(a, 4 * a, 6 * a, 6 * a, 0, 180);
-
-            QPainterPath remove;
-            remove.addEllipse(2 * a, 1 * a, 4 * a, 4 * a);
-            path = path.subtracted(remove);
-
-            path.addEllipse(2.5 * a, 1.5 * a, 3 * a, 3 * a);
-
-            painter.fillPath(path, foreground);
-        }
-        break;
-
-        case Settings: {
-            painter.setRenderHint(QPainter::Antialiasing);
-
-            auto a = w / 8;
-            QPainterPath path;
-
-            path.arcMoveTo(a, a, 6 * a, 6 * a, 0 - (360 / 32.0));
-
-            for (int i = 0; i < 8; i++)
-            {
-                path.arcTo(a, a, 6 * a, 6 * a, i * (360 / 8.0) - (360 / 32.0),
-                           (360 / 32.0));
-                path.arcTo(2 * a, 2 * a, 4 * a, 4 * a,
-                           i * (360 / 8.0) + (360 / 32.0), (360 / 32.0));
-            }
-
-            QPainterPath remove;
-            remove.addEllipse(3 * a, 3 * a, 2 * a, 2 * a);
-
-            painter.fillPath(path.subtracted(remove), foreground);
-        }
-        break;
-
        default:;
    }
 }
@@ -13,7 +13,10 @@ class NotebookButton : public Button
    Q_OBJECT

 public:
-    enum Icon { None, Plus, User, Settings };
+    enum Icon {
+        None,
+        Plus,
+    };

    explicit NotebookButton(Notebook *parent);