edited general settings categories (#2117)

* edited general settings categories

* Update CHANGELOG.md

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Unversioned
 
+- Minor: Added a navigation list to the settings and reordered them.
 - Major: Added "Channel Filters". See https://wiki.chatterino.com/Filters/ for how they work or how to configure them. (#1748, #2083)
 - Major: Added Streamer Mode configuration (under `Settings -> General`), where you can select which features of Chatterino should behave differently when you are in Streamer Mode. (#2001)
 - Minor: Improved viewer list window.

resources/qss/settings.qss

@@ -1,5 +1,6 @@
 * {
     font-size: <font-size>px;
+    font-family: "Segoe UI";
 }
 
 QCheckBox::indicator {
@@ -43,13 +44,18 @@ chatterino--TitleLabel {
     color: #4FC3F7; /* Should this be same as accent color? */
 }
 
+chatterino--SubtitleLabel {
+    font-family: "Segoe UI light";
+    font-size: 16px;
+    color: #4FC3F7; /* Should this be same as accent color? */
+}
+
 chatterino--DescriptionLabel {
-    font-size: 14px;
     color: #999;
 }
 
 chatterino--NavigationLabel {
     font-family: "Segoe UI light";
-    font-size: 16px;
+    font-size: 15px;
     color: #A6DDF4;
 }

src/widgets/settingspages/GeneralPage.cpp

@@ -26,6 +26,7 @@
 
 // define to highlight sections in editor
 #define addTitle addTitle
+#define addSubtitle addSubtitle
 
 #ifdef Q_OS_WIN
 #    define META_KEY "Windows"
@@ -168,16 +169,6 @@ void GeneralPage::initLayout(GeneralPageView &layout)
 
     layout.addTitle("Chat");
 
-    layout.addDropdown<float>(
-        "Mousewheel scroll speed", {"0.5x", "0.75x", "Default", "1.5x", "2x"},
-        s.mouseScrollMultiplier,
-        [](auto val) {
-            if (val == 1)
-                return QString("Default");
-            else
-                return QString::number(val) + "x";
-        },
-        [](auto args) { return fuzzyToFloat(args.value, 1.f); });
     layout.addDropdown<float>(
         "Pause on mouse hover",
         {"Disabled", "0.5s", "1s", "2s", "5s", "Indefinite"},
@@ -201,6 +192,16 @@ void GeneralPage::initLayout(GeneralPageView &layout)
         });
     addKeyboardModifierSetting(layout, "Pause while holding a key",
                                s.pauseChatModifier);
+    layout.addDropdown<float>(
+        "Mousewheel scroll speed", {"0.5x", "0.75x", "Default", "1.5x", "2x"},
+        s.mouseScrollMultiplier,
+        [](auto val) {
+            if (val == 1)
+                return QString("Default");
+            else
+                return QString::number(val) + "x";
+        },
+        [](auto args) { return fuzzyToFloat(args.value, 1.f); });
     layout.addCheckbox("Smooth scrolling", s.enableSmoothScrolling);
     layout.addCheckbox("Smooth scrolling on new messages",
                        s.enableSmoothScrollingNewMessages);
@@ -267,7 +268,59 @@ void GeneralPage::initLayout(GeneralPageView &layout)
         },
         [](auto args) { return fuzzyToInt(args.value, 0); });
 
-    layout.addTitle("Link Information");
+    layout.addTitle("Emotes");
+    layout.addCheckbox("Enable", s.enableEmoteImages);
+    layout.addCheckbox("Animate", s.animateEmotes);
+    layout.addCheckbox("Animate only when Chatterino is focused",
+                       s.animationsWhenFocused);
+    layout.addCheckbox("Enable emote auto-completion by typing :",
+                       s.emoteCompletionWithColon);
+    layout.addDropdown<float>(
+        "Size", {"0.5x", "0.75x", "Default", "1.25x", "1.5x", "2x"},
+        s.emoteScale,
+        [](auto val) {
+            if (val == 1)
+                return QString("Default");
+            else
+                return QString::number(val) + "x";
+        },
+        [](auto args) { return fuzzyToFloat(args.value, 1.f); });
+
+    layout.addDropdown<int>(
+        "Show info on hover", {"Don't show", "Always show", "Hold shift"},
+        s.emotesTooltipPreview, [](int index) { return index; },
+        [](auto args) { return args.index; }, false);
+    layout.addDropdown("Emoji style",
+                       {"EmojiOne 2", "EmojiOne 3", "Twitter", "Facebook",
+                        "Apple", "Google", "Messenger"},
+                       s.emojiSet);
+
+    layout.addTitle("Streamer Mode");
+    layout.addDescription(
+        "Chatterino can automatically change behavior if it "
+        "detects that \"OBS Studio\" is running.\nSelect which "
+        "things you want to change while streaming");
+
+    ComboBox *dankDropdown =
+        layout.addDropdown<std::underlying_type<StreamerModeSetting>::type>(
+            "Enable Streamer Mode", {"No", "Yes", "Detect OBS (Windows only)"},
+            s.enableStreamerMode, [](int value) { return value; },
+            [](DropdownArgs args) {
+                return static_cast<StreamerModeSetting>(args.index);
+            },
+            false);
+    dankDropdown->setMinimumWidth(dankDropdown->minimumSizeHint().width() + 10);
+
+    layout.addCheckbox("Hide usercard avatars",
+                       s.streamerModeHideUsercardAvatars);
+    layout.addCheckbox("Hide link thumbnails",
+                       s.streamerModeHideLinkThumbnails);
+    layout.addCheckbox(
+        "Hide viewer count and stream length while hovering over split header",
+        s.streamerModeHideViewerCountAndDuration);
+    layout.addCheckbox("Mute mention sounds", s.streamerModeMuteMentions);
+
+    layout.addTitle("Link Previews");
     layout.addDescription(
         "Extra information like \"youtube video stats\" or title of webpages "
         "can be loaded for all links if enabled. Optionally you can also show "
@@ -325,101 +378,6 @@ void GeneralPage::initLayout(GeneralPageView &layout)
             return fuzzyToInt(args.value, 0);
         });
 
-    layout.addTitle("Streamer Mode");
-    layout.addDescription(
-        "Chatterino can automatically change behavior if it "
-        "detects that \"OBS Studio\" is running.\nSelect which "
-        "things you want to change while streaming");
-
-    ComboBox *dankDropdown =
-        layout.addDropdown<std::underlying_type<StreamerModeSetting>::type>(
-            "Enable Streamer Mode", {"No", "Yes", "Detect OBS (Windows only)"},
-            s.enableStreamerMode, [](int value) { return value; },
-            [](DropdownArgs args) {
-                return static_cast<StreamerModeSetting>(args.index);
-            },
-            false);
-    dankDropdown->setMinimumWidth(dankDropdown->minimumSizeHint().width() + 10);
-
-    layout.addCheckbox("Hide usercard avatars",
-                       s.streamerModeHideUsercardAvatars);
-    layout.addCheckbox("Hide link thumbnails",
-                       s.streamerModeHideLinkThumbnails);
-    layout.addCheckbox(
-        "Hide viewer count and stream length while hovering over split header",
-        s.streamerModeHideViewerCountAndDuration);
-    layout.addCheckbox("Mute mention sounds", s.streamerModeMuteMentions);
-
-    layout.addTitle("Emotes");
-    layout.addCheckbox("Enable", s.enableEmoteImages);
-    layout.addCheckbox("Animate", s.animateEmotes);
-    layout.addCheckbox("Animate only when Chatterino is focused",
-                       s.animationsWhenFocused);
-    layout.addCheckbox("Enable emote auto-completion by typing :",
-                       s.emoteCompletionWithColon);
-    layout.addDropdown<float>(
-        "Size", {"0.5x", "0.75x", "Default", "1.25x", "1.5x", "2x"},
-        s.emoteScale,
-        [](auto val) {
-            if (val == 1)
-                return QString("Default");
-            else
-                return QString::number(val) + "x";
-        },
-        [](auto args) { return fuzzyToFloat(args.value, 1.f); });
-
-    layout.addDropdown<int>(
-        "Show info on hover", {"Don't show", "Always show", "Hold shift"},
-        s.emotesTooltipPreview, [](int index) { return index; },
-        [](auto args) { return args.index; }, false);
-    layout.addDropdown("Emoji style",
-                       {"EmojiOne 2", "EmojiOne 3", "Twitter", "Facebook",
-                        "Apple", "Google", "Messenger"},
-                       s.emojiSet);
-
-    layout.addTitle("R9K");
-    layout.addDescription(
-        "Hide similar messages by the same user. Toggle hidden "
-        "messages by pressing Ctrl+H.");
-    layout.addCheckbox("Hide similar messages", s.similarityEnabled);
-    //layout.addCheckbox("Gray out matches", s.colorSimilarDisabled);
-    layout.addCheckbox("Hide my own messages", s.hideSimilarMyself);
-    layout.addCheckbox("Receive notification sounds from hidden messages",
-                       s.shownSimilarTriggerHighlights);
-    s.hideSimilar.connect(
-        []() { getApp()->windows->forceLayoutChannelViews(); }, false);
-    layout.addDropdown<float>(
-        "Similarity threshold", {"0.5", "0.75", "0.9"}, s.similarityPercentage,
-        [](auto val) { return QString::number(val); },
-        [](auto args) { return fuzzyToFloat(args.value, 0.9f); });
-    layout.addDropdown<int>(
-        "Maximum delay between messages",
-        {"5s", "10s", "15s", "30s", "60s", "120s"}, s.hideSimilarMaxDelay,
-        [](auto val) { return QString::number(val) + "s"; },
-        [](auto args) { return fuzzyToInt(args.value, 5); });
-    layout.addDropdown<int>(
-        "Amount of previous messages to check", {"1", "2", "3", "4", "5"},
-        s.hideSimilarMaxMessagesToCheck,
-        [](auto val) { return QString::number(val); },
-        [](auto args) { return fuzzyToInt(args.value, 3); });
-
-    layout.addTitle("Visible badges");
-    layout.addCheckbox("Authority (staff, admin)",
-                       getSettings()->showBadgesGlobalAuthority);
-    layout.addCheckbox("Channel (broadcaster, moderator)",
-                       getSettings()->showBadgesChannelAuthority);
-    layout.addCheckbox("Subscriber ", getSettings()->showBadgesSubscription);
-    layout.addCheckbox("Vanity (prime, bits, subgifter)",
-                       getSettings()->showBadgesVanity);
-    layout.addCheckbox("Chatterino", getSettings()->showBadgesChatterino);
-
-    layout.addTitle("Chat title");
-    layout.addDescription("In live channels show:");
-    layout.addCheckbox("Uptime", s.headerUptime);
-    layout.addCheckbox("Viewer count", s.headerViewerCount);
-    layout.addCheckbox("Category", s.headerGame);
-    layout.addCheckbox("Title", s.headerStreamTitle);
-
     layout.addNavigationSpacing();
     layout.addTitle("Beta");
     if (Version::instance().isSupportedOS())
@@ -450,11 +408,20 @@ void GeneralPage::initLayout(GeneralPageView &layout)
 
     layout.addDescription("Chatterino only attaches to known browsers to avoid "
                           "attaching to other windows by accident.");
-    layout.addCheckbox("Attach to any browser (may cause issues).",
+    layout.addCheckbox("Attach to any browser (may cause issues)",
                        s.attachExtensionToAnyProcess);
 #endif
 
-    layout.addTitle("Cache");
+    layout.addTitle("AppData & Cache");
+
+    layout.addSubtitle("Application Data");
+    layout.addDescription("All local files like settings and cache files are "
+                          "store in this directory.");
+    layout.addButton("Open AppData directory", [] {
+        QDesktopServices::openUrl(getPaths()->rootAppDataDirectory);
+    });
+
+    layout.addSubtitle("Temporary files (Cache)");
     layout.addDescription(
         "Files that are used often (such as emotes) are saved to disk to "
         "reduce bandwidth usage and to speed up loading.");
@@ -485,14 +452,52 @@ void GeneralPage::initLayout(GeneralPageView &layout)
         layout.addLayout(box);
     }
 
-    layout.addTitle("AppData");
+    layout.addTitle("Advanced");
-    layout.addDescription("All local files like settings and cache files are "
-                          "store in this directory.");
-    layout.addButton("Open AppData directory", [] {
-        QDesktopServices::openUrl(getPaths()->rootAppDataDirectory);
-    });
 
-    layout.addTitle("Miscellaneous");
+    layout.addSubtitle("Chat title");
+    layout.addDescription("In live channels show:");
+    layout.addCheckbox("Uptime", s.headerUptime);
+    layout.addCheckbox("Viewer count", s.headerViewerCount);
+    layout.addCheckbox("Category", s.headerGame);
+    layout.addCheckbox("Title", s.headerStreamTitle);
+
+    layout.addSubtitle("R9K");
+    layout.addDescription(
+        "Hide similar messages by the same user. Toggle hidden "
+        "messages by pressing Ctrl+H.");
+    layout.addCheckbox("Hide similar messages", s.similarityEnabled);
+    //layout.addCheckbox("Gray out matches", s.colorSimilarDisabled);
+    layout.addCheckbox("Hide my own messages", s.hideSimilarMyself);
+    layout.addCheckbox("Receive notification sounds from hidden messages",
+                       s.shownSimilarTriggerHighlights);
+    s.hideSimilar.connect(
+        []() { getApp()->windows->forceLayoutChannelViews(); }, false);
+    layout.addDropdown<float>(
+        "Similarity threshold", {"0.5", "0.75", "0.9"}, s.similarityPercentage,
+        [](auto val) { return QString::number(val); },
+        [](auto args) { return fuzzyToFloat(args.value, 0.9f); });
+    layout.addDropdown<int>(
+        "Maximum delay between messages",
+        {"5s", "10s", "15s", "30s", "60s", "120s"}, s.hideSimilarMaxDelay,
+        [](auto val) { return QString::number(val) + "s"; },
+        [](auto args) { return fuzzyToInt(args.value, 5); });
+    layout.addDropdown<int>(
+        "Amount of previous messages to check", {"1", "2", "3", "4", "5"},
+        s.hideSimilarMaxMessagesToCheck,
+        [](auto val) { return QString::number(val); },
+        [](auto args) { return fuzzyToInt(args.value, 3); });
+
+    layout.addSubtitle("Visible badges");
+    layout.addCheckbox("Authority (staff, admin)",
+                       getSettings()->showBadgesGlobalAuthority);
+    layout.addCheckbox("Channel (broadcaster, moderator)",
+                       getSettings()->showBadgesChannelAuthority);
+    layout.addCheckbox("Subscriber ", getSettings()->showBadgesSubscription);
+    layout.addCheckbox("Vanity (prime, bits, subgifter)",
+                       getSettings()->showBadgesVanity);
+    layout.addCheckbox("Chatterino", getSettings()->showBadgesChatterino);
+
+    layout.addSubtitle("Miscellaneous");
 
     if (supportsIncognitoLinks())
     {
@@ -562,6 +567,8 @@ void GeneralPage::initLayout(GeneralPageView &layout)
     layout.addCheckbox("Ask for confirmation when uploading an image",
                        s.askOnImageUpload);
 
+    layout.addStretch();
+
     // invisible element for width
     auto inv = new BaseWidget(this);
     //    inv->setScaleIndependantWidth(600);

src/widgets/settingspages/GeneralPageView.cpp

@@ -40,6 +40,11 @@ void GeneralPageView::addLayout(QLayout *layout)
     this->contentLayout_->addLayout(layout);
 }
 
+void GeneralPageView::addStretch()
+{
+    this->contentLayout_->addStretch();
+}
+
 TitleLabel *GeneralPageView::addTitle(const QString &title)
 {
     // space
@@ -68,6 +73,16 @@ TitleLabel *GeneralPageView::addTitle(const QString &title)
     return label;
 }
 
+SubtitleLabel *GeneralPageView::addSubtitle(const QString &title)
+{
+    auto label = new SubtitleLabel(title + ":");
+    this->addWidget(label);
+
+    this->groups_.back().widgets.push_back({label, {title}});
+
+    return label;
+}
+
 QCheckBox *GeneralPageView::addCheckbox(const QString &text,
                                         BoolSetting &setting, bool inverse)
 {
@@ -224,7 +239,9 @@ bool GeneralPageView::filterElements(const QString &query)
         {
             for (auto &&widget : group.widgets)
                 widget.element->show();
+
             group.title->show();
+            group.navigationLink->show();
             any = true;
         }
         // check if any match
@@ -232,12 +249,26 @@ bool GeneralPageView::filterElements(const QString &query)
         {
             auto groupAny = false;
 
+            QWidget *currentSubtitle = nullptr;
+            bool currentSubtitleVisible = false;
+
             for (auto &&widget : group.widgets)
             {
+                if (dynamic_cast<SubtitleLabel *>(widget.element))
+                {
+                    if (currentSubtitle)
+                        currentSubtitle->setVisible(currentSubtitleVisible);
+
+                    currentSubtitleVisible = false;
+                    currentSubtitle = widget.element;
+                    continue;
+                }
+
                 for (auto &&keyword : widget.keywords)
                 {
                     if (keyword.contains(query, Qt::CaseInsensitive))
                     {
+                        currentSubtitleVisible = true;
                         widget.element->show();
                         groupAny = true;
                     }
@@ -248,9 +279,14 @@ bool GeneralPageView::filterElements(const QString &query)
                 }
             }
 
+            if (currentSubtitle)
+                currentSubtitle->setVisible(currentSubtitleVisible);
+
             if (group.space)
                 group.space->setVisible(groupAny);
+
             group.title->setVisible(groupAny);
+            group.navigationLink->setVisible(groupAny);
             any |= groupAny;
         }
     }

src/widgets/settingspages/GeneralPageView.hpp

@@ -29,6 +29,17 @@ public:
     }
 };
 
+class SubtitleLabel : public QLabel
+{
+    Q_OBJECT
+
+public:
+    SubtitleLabel(const QString &text)
+        : QLabel(text)
+    {
+    }
+};
+
 class NavigationLabel : public SignalLabel
 {
     Q_OBJECT
@@ -76,8 +87,10 @@ public:
 
     void addWidget(QWidget *widget);
     void addLayout(QLayout *layout);
+    void addStretch();
 
     TitleLabel *addTitle(const QString &text);
+    SubtitleLabel *addSubtitle(const QString &text);
     /// @param inverse Inverses true to false and vice versa
     QCheckBox *addCheckbox(const QString &text, BoolSetting &setting,
                            bool inverse = false);