added preview channel view to the appearance tab

resources/qss/settings.qss

@@ -1,23 +1,7 @@
-#tabWidget {
-    background-color: #333;
-}
-
 * {
     font-size: <font-size>px;
 }
 
-SettingsDialogTab:hover {
-    border: 1px solid grey;
-}
-
-QLabel, QCheckBox, QGroupBox, SettingsDialogTab {
-    color: white;
-}
-
-QGroupBox {
-    background-color: #444;
-}
-
 QCheckBox::indicator {
     width: <checkbox-size>px;
     height: <checkbox-size>px;

src/common/Channel.hpp

@@ -28,6 +28,7 @@ public:
         TwitchWatching,
         TwitchMentions,
         TwitchEnd,
+        Misc
     };
 
     explicit Channel(const QString &_name, Type type);

src/widgets/BaseWindow.cpp

@@ -455,7 +455,12 @@ void BaseWindow::paintEvent(QPaintEvent *)
         painter.drawRect(0, 0, this->width() - 1, this->height() - 1);
     }
 
-    this->drawCustomWindowFrame(painter);
+    //    this->drawCustomWindowFrame(painter);
+    //    QPainter painter(this);
+
+    QColor bg = this->overrideBackgroundColor_.value_or(this->themeManager->window.background);
+
+    painter.fillRect(QRect(0, 1, this->width() - 0, this->height() - 0), bg);
 }
 
 void BaseWindow::updateScale()
@@ -494,14 +499,16 @@ void BaseWindow::calcButtonsSizes()
 
 void BaseWindow::drawCustomWindowFrame(QPainter &painter)
 {
-#ifdef USEWINSDK
+    //#ifdef USEWINSDK
-    if (this->hasCustomWindowFrame()) {
+    //    if (this->hasCustomWindowFrame()) {
-        QPainter painter(this);
+    //        QPainter painter(this);
 
-        painter.fillRect(QRect(0, 1, this->width() - 0, this->height() - 0),
+    //        QColor bg =
-                         this->themeManager->window.background);
+    //        this->overrideBackgroundColor_.value_or(this->themeManager->window.background);
-    }
+
-#endif
+    //        painter.fillRect(QRect(0, 1, this->width() - 0, this->height() - 0), bg);
+    //    }
+    //#endif
 }
 
 bool BaseWindow::handleDPICHANGED(MSG *msg)

src/widgets/BaseWindow.hpp

@@ -70,6 +70,8 @@ protected:
 
     void updateScale();
 
+    boost::optional<QColor> overrideBackgroundColor_;
+
 private:
     void init();
     void moveIntoDesktopRect(QWidget *parent);

src/widgets/dialogs/SettingsDialog.cpp

@@ -32,6 +32,8 @@ SettingsDialog::SettingsDialog()
     this->addTabs();
 
     this->scaleChangedEvent(this->getScale());
+
+    this->overrideBackgroundColor_ = QColor("#282828");
 }
 
 void SettingsDialog::initUi()
@@ -149,8 +151,6 @@ void SettingsDialog::showDialog(PreferredTab preferredTab)
 
 void SettingsDialog::refresh()
 {
-    //    this->ui.accountSwitchWidget->refresh();
-
     getApp()->settings->saveSnapshot();
 
     for (auto *tab : this->tabs) {
@@ -163,16 +163,16 @@ void SettingsDialog::scaleChangedEvent(float newDpi)
     QFile file(":/qss/settings.qss");
     file.open(QFile::ReadOnly);
     QString styleSheet = QLatin1String(file.readAll());
-    styleSheet.replace("<font-size>", QString::number((int)(14 * newDpi)));
+    styleSheet.replace("<font-size>", QString::number(int(14 * newDpi)));
-    styleSheet.replace("<checkbox-size>", QString::number((int)(14 * newDpi)));
+    styleSheet.replace("<checkbox-size>", QString::number(int(14 * newDpi)));
 
     for (SettingsDialogTab *tab : this->tabs) {
-        tab->setFixedHeight((int)(30 * newDpi));
+        tab->setFixedHeight(int(30 * newDpi));
     }
 
     this->setStyleSheet(styleSheet);
 
-    this->ui_.tabContainerContainer->setFixedWidth((int)(200 * newDpi));
+    this->ui_.tabContainerContainer->setFixedWidth(int(200 * newDpi));
 }
 
 void SettingsDialog::themeRefreshEvent()
@@ -180,32 +180,10 @@ void SettingsDialog::themeRefreshEvent()
     BaseWindow::themeRefreshEvent();
 
     QPalette palette;
-    palette.setColor(QPalette::Background, QColor("#444"));
+    palette.setColor(QPalette::Background, QColor("#f44"));
     this->setPalette(palette);
 }
 
-// void SettingsDialog::setChildrensFont(QLayout *object, QFont &font, int indent)
-//{
-//    //    for (QWidget *widget : this->widgets) {
-//    //        widget->setFont(font);
-//    //    }
-//    //    for (int i = 0; i < object->count(); i++) {
-//    //        if (object->itemAt(i)->layout()) {
-//    //            setChildrensFont(object->layout()->itemAt(i)->layout(), font, indent + 2);
-//    //        }
-
-//    //        if (object->itemAt(i)->widget()) {
-//    //            object->itemAt(i)->widget()->setFont(font);
-
-//    //            if (object->itemAt(i)->widget()->layout() &&
-//    //                !object->itemAt(i)->widget()->layout()->isEmpty()) {
-//    //                setChildrensFont(object->itemAt(i)->widget()->layout(), font, indent +
-//    2);
-//    //            }
-//    //        }
-//    //    }
-//}
-
 ///// Widget creation helpers
 void SettingsDialog::okButtonClicked()
 {

src/widgets/settingspages/AppearancePage.cpp

@@ -4,6 +4,7 @@
 #include "singletons/WindowManager.hpp"
 #include "util/LayoutCreator.hpp"
 #include "util/RemoveScrollAreaBackground.hpp"
+#include "widgets/helper/Line.hpp"
 
 #include <QFontDialog>
 #include <QFormLayout>
@@ -23,8 +24,6 @@
 #define SCROLL_SMOOTH "Enable smooth scrolling"
 #define SCROLL_NEWMSG "Enable smooth scrolling for new messages"
 
-#define LAST_MSG "Mark the last message you read (dotted line)"
-
 // clang-format off
 #define TIMESTAMP_FORMATS "hh:mm a", "h:mm a", "hh:mm:ss a", "h:mm:ss a", "HH:mm", "H:mm", "HH:mm:ss", "H:mm:ss"
 // clang-format on
@@ -34,133 +33,197 @@ namespace chatterino {
 AppearancePage::AppearancePage()
     : SettingsPage("Look", ":/images/theme.svg")
 {
-    auto app = getApp();
     LayoutCreator<AppearancePage> layoutCreator(this);
 
-    auto scroll = layoutCreator.emplace<QScrollArea>();
+    auto xd = layoutCreator.emplace<QVBoxLayout>().withoutMargin();
+
+    // settings
+    auto scroll = xd.emplace<QScrollArea>();
     auto widget = scroll.emplaceScrollAreaWidget();
     removeScrollAreaBackground(scroll.getElement(), widget.getElement());
 
-    auto layout = widget.setLayoutType<QVBoxLayout>();
+    auto &layout = *widget.setLayoutType<QVBoxLayout>().withoutMargin();
 
-    auto application =
+    this->addApplicationGroup(layout);
-        layout.emplace<QGroupBox>("Application").emplace<QVBoxLayout>().withoutMargin();
+    this->addMessagesGroup(layout);
-    {
+    this->addEmotesGroup(layout);
-        auto form = application.emplace<QFormLayout>();
 
-        auto *theme = this->createComboBox({THEME_ITEMS}, app->themes->themeName);
+    // preview
-        QObject::connect(theme, &QComboBox::currentTextChanged,
+    xd.emplace<Line>(false);
-                         [](const QString &) { getApp()->windows->forceLayoutChannelViews(); });
 
-        form->addRow("Theme:", theme);
+    auto channelView = xd.emplace<ChannelView>();
-        // form->addRow("Theme color:", this->createThemeColorChanger());
+    auto channel = this->createPreviewChannel();
-        form->addRow("UI Scaling:", this->createUiScaleSlider());
+    channelView->setChannel(channel);
-        form->addRow("Font:", this->createFontChanger());
+    channelView->setScaleIndependantHeight(64);
 
-        form->addRow("Tabs:", this->createCheckBox(TAB_X, app->settings->showTabCloseButton));
+    layout.addStretch(1);
+}
+
+void AppearancePage::addApplicationGroup(QVBoxLayout &layout)
+{
+    auto box = LayoutCreator<QVBoxLayout>(&layout)
+                   .emplace<QGroupBox>("Application")
+                   .emplace<QVBoxLayout>()
+                   .withoutMargin();
+
+    auto form = box.emplace<QFormLayout>();
+
+    // theme
+    auto *theme = this->createComboBox({THEME_ITEMS}, getApp()->themes->themeName);
+    QObject::connect(theme, &QComboBox::currentTextChanged,
+                     [](const QString &) { getApp()->windows->forceLayoutChannelViews(); });
+
+    form->addRow("Theme:", theme);
+
+    // ui scale
+    form->addRow("UI Scaling:", this->createUiScaleSlider());
+
+    // font
+    form->addRow("Font:", this->createFontChanger());
+
+    // tab x
+    form->addRow("Tabs:", this->createCheckBox(TAB_X, getSettings()->showTabCloseButton));
+
+// show buttons
 #ifndef USEWINSDK
-        form->addRow("", this->createCheckBox(TAB_PREF, app->settings->hidePreferencesButton));
+    form->addRow("", this->createCheckBox(TAB_PREF, app->settings->hidePreferencesButton));
-        form->addRow("", this->createCheckBox(TAB_USER, app->settings->hideUserButton));
+    form->addRow("", this->createCheckBox(TAB_USER, app->settings->hideUserButton));
 #endif
 
-        form->addRow("Scrolling:",
+    // scrolling
-                     this->createCheckBox(SCROLL_SMOOTH, app->settings->enableSmoothScrolling));
+    form->addRow("Scrolling:",
-        form->addRow("", this->createCheckBox(SCROLL_NEWMSG,
+                 this->createCheckBox(SCROLL_SMOOTH, getSettings()->enableSmoothScrolling));
-                                              app->settings->enableSmoothScrollingNewMessages));
+    form->addRow(
-    }
+        "", this->createCheckBox(SCROLL_NEWMSG, getSettings()->enableSmoothScrollingNewMessages));
+}
 
-    auto messages = layout.emplace<QGroupBox>("Messages").emplace<QVBoxLayout>();
+void AppearancePage::addMessagesGroup(QVBoxLayout &layout)
+{
+    auto box =
+        LayoutCreator<QVBoxLayout>(&layout).emplace<QGroupBox>("Messages").emplace<QVBoxLayout>();
+
+    // timestamps
+    box.append(this->createCheckBox("Show timestamps", getSettings()->showTimestamps));
+    auto tbox = box.emplace<QHBoxLayout>().withoutMargin();
     {
-        messages.append(this->createCheckBox("Show timestamp", app->settings->showTimestamps));
+        tbox.emplace<QLabel>("Timestamp format (a = am/pm):");
-        auto tbox = messages.emplace<QHBoxLayout>().withoutMargin();
+        tbox.append(this->createComboBox({TIMESTAMP_FORMATS}, getSettings()->timestampFormat));
-        {
+        tbox->addStretch(1);
-            tbox.emplace<QLabel>("timestamp format (a = am/pm):");
-            tbox.append(this->createComboBox({TIMESTAMP_FORMATS}, app->settings->timestampFormat));
-            tbox->addStretch(1);
-        }
-
-        messages.append(this->createCheckBox("Show badges", app->settings->showBadges));
-
-        {
-            auto *combo = new QComboBox(this);
-            combo->addItems({"Never", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12",
-                             "13", "14", "15"});
-
-            QObject::connect(combo, &QComboBox::currentTextChanged, [](const QString &str) {
-                getApp()->settings->collpseMessagesMinLines = str.toInt();
-            });
-
-            auto hbox = messages.emplace<QHBoxLayout>().withoutMargin();
-            hbox.emplace<QLabel>("Collapse messages longer than");
-            hbox.append(combo);
-            hbox.emplace<QLabel>("lines");
-        }
-
-        messages.append(this->createCheckBox("Separate messages", app->settings->separateMessages));
-        messages.append(this->createCheckBox("Alternate message background color",
-                                             app->settings->alternateMessageBackground));
-        messages.append(this->createCheckBox("Show message length while typing",
-                                             app->settings->showMessageLength));
-
-        messages.append(this->createCheckBox(LAST_MSG, app->settings->showLastMessageIndicator));
     }
 
-    auto emotes = layout.emplace<QGroupBox>("Emotes").setLayoutType<QVBoxLayout>();
+    // badges
+    box.append(this->createCheckBox("Show badges", getSettings()->showBadges));
+
+    // collapsing
     {
-        /*
+        auto *combo = new QComboBox(this);
-        emotes.append(
+        combo->addItems(
-            this->createCheckBox("Enable Twitch emotes", app->settings->enableTwitchEmotes));
+            {"Never", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15"});
-        emotes.append(this->createCheckBox("Enable BetterTTV emotes for Twitch",
-                                           app->settings->enableBttvEmotes));
-        emotes.append(this->createCheckBox("Enable FrankerFaceZ emotes for Twitch",
-                                           app->settings->enableFfzEmotes));
-        emotes.append(this->createCheckBox("Enable emojis", app->settings->enableEmojis));
-        */
-        emotes.append(
-            this->createCheckBox("Enable animations", app->settings->enableGifAnimations));
 
-        auto scaleBox = emotes.emplace<QHBoxLayout>();
+        QObject::connect(combo, &QComboBox::currentTextChanged, [](const QString &str) {
-        {
+            getSettings()->collpseMessagesMinLines = str.toInt();
-            scaleBox.emplace<QLabel>("Emote scale:");
+        });
 
-            auto emoteScale = scaleBox.emplace<QSlider>(Qt::Horizontal);
+        auto hbox = box.emplace<QHBoxLayout>().withoutMargin();
-            emoteScale->setMinimum(5);
+        hbox.emplace<QLabel>("Collapse messages longer than");
-            emoteScale->setMaximum(50);
+        hbox.append(combo);
-
+        hbox.emplace<QLabel>("lines");
-            auto scaleLabel = scaleBox.emplace<QLabel>("1.0");
-            scaleLabel->setFixedWidth(100);
-            QObject::connect(emoteScale.getElement(), &QSlider::valueChanged,
-                             [scaleLabel](int value) mutable {
-                                 float f = (float)value / 10.f;
-                                 scaleLabel->setText(QString::number(f));
-
-                                 getApp()->settings->emoteScale.setValue(f);
-                             });
-
-            emoteScale->setValue(std::max<int>(
-                5, std::min<int>(50, (int)(app->settings->emoteScale.getValue() * 10.f))));
-
-            scaleLabel->setText(QString::number(app->settings->emoteScale.getValue()));
-        }
-
-        {
-            auto *combo = new QComboBox(this);
-            combo->addItems({"EmojiOne 2", "EmojiOne 3", "Twitter", "Facebook", "Apple", "Google",
-                             "Messenger"});
-
-            combo->setCurrentText(getApp()->settings->emojiSet);
-
-            QObject::connect(combo, &QComboBox::currentTextChanged, [](const QString &str) {
-                getApp()->settings->emojiSet = str;  //
-            });
-
-            auto hbox = emotes.emplace<QHBoxLayout>().withoutMargin();
-            hbox.emplace<QLabel>("Emoji set");
-            hbox.append(combo);
-        }
     }
 
-    layout->addStretch(1);
+    // seperate
+    box.append(this->createCheckBox("Separation lines", getSettings()->separateMessages));
+
+    // alternate
+    box.append(this->createCheckBox("Alternate background colors",
+                                    getSettings()->alternateMessageBackground));
+}
+
+void AppearancePage::addEmotesGroup(QVBoxLayout &layout)
+{
+    auto box = LayoutCreator<QVBoxLayout>(&layout)
+                   .emplace<QGroupBox>("Emotes")
+                   .setLayoutType<QVBoxLayout>();
+
+    /*
+    emotes.append(
+        this->createCheckBox("Enable Twitch emotes", app->settings->enableTwitchEmotes));
+    emotes.append(this->createCheckBox("Enable BetterTTV emotes for Twitch",
+                                       app->settings->enableBttvEmotes));
+    emotes.append(this->createCheckBox("Enable FrankerFaceZ emotes for Twitch",
+                                       app->settings->enableFfzEmotes));
+    emotes.append(this->createCheckBox("Enable emojis", app->settings->enableEmojis));
+    */
+    box.append(this->createCheckBox("Animated emotes", getSettings()->enableGifAnimations));
+
+    auto scaleBox = box.emplace<QHBoxLayout>();
+    {
+        scaleBox.emplace<QLabel>("Size:");
+
+        auto emoteScale = scaleBox.emplace<QSlider>(Qt::Horizontal);
+        emoteScale->setMinimum(5);
+        emoteScale->setMaximum(50);
+
+        auto scaleLabel = scaleBox.emplace<QLabel>("1.0");
+        scaleLabel->setFixedWidth(100);
+        QObject::connect(emoteScale.getElement(), &QSlider::valueChanged,
+                         [scaleLabel](int value) mutable {
+                             float f = float(value) / 10.f;
+                             scaleLabel->setText(QString::number(f));
+
+                             getSettings()->emoteScale.setValue(f);
+                         });
+
+        emoteScale->setValue(
+            std::max<int>(5, std::min<int>(50, int(getSettings()->emoteScale.getValue() * 10.f))));
+
+        scaleLabel->setText(QString::number(getSettings()->emoteScale.getValue()));
+    }
+
+    {
+        auto *combo = new QComboBox(this);
+        combo->addItems(
+            {"EmojiOne 2", "EmojiOne 3", "Twitter", "Facebook", "Apple", "Google", "Messenger"});
+
+        combo->setCurrentText(getSettings()->emojiSet);
+
+        QObject::connect(combo, &QComboBox::currentTextChanged, [](const QString &str) {
+            getSettings()->emojiSet = str;  //
+        });
+
+        auto hbox = box.emplace<QHBoxLayout>().withoutMargin();
+        hbox.emplace<QLabel>("Emoji set:");
+        hbox.append(combo);
+    }
+}
+
+ChannelPtr AppearancePage::createPreviewChannel()
+{
+    auto channel = ChannelPtr(new Channel("preview", Channel::Misc));
+
+    {
+        auto message = MessagePtr(new Message());
+        message->addElement(new ImageElement(getApp()->resources->badgeModerator,
+                                             MessageElement::BadgeChannelAuthority));
+        message->addElement(new ImageElement(getApp()->resources->badgeSubscriber,
+                                             MessageElement::BadgeSubscription));
+        message->addElement(new TimestampElement());
+        message->addElement(new TextElement("username1:", MessageElement::Username,
+                                            QColor("#0094FF"), FontStyle::ChatMediumBold));
+        message->addElement(new TextElement("This is a preview message :)", MessageElement::Text));
+        channel->addMessage(message);
+    }
+    {
+        auto message = MessagePtr(new Message());
+        message->addElement(new ImageElement(getApp()->resources->badgePremium,
+                                             MessageElement::BadgeChannelAuthority));
+        message->addElement(new TimestampElement());
+        message->addElement(new TextElement("username2:", MessageElement::Username,
+                                            QColor("#FF6A00"), FontStyle::ChatMediumBold));
+        message->addElement(new TextElement("This is another one :)", MessageElement::Text));
+        channel->addMessage(message);
+    }
+
+    return channel;
 }
 
 QLayout *AppearancePage::createThemeColorChanger()
@@ -252,14 +315,14 @@ QLayout *AppearancePage::createUiScaleSlider()
 
     slider->setMinimum(WindowManager::uiScaleMin);
     slider->setMaximum(WindowManager::uiScaleMax);
-    slider->setValue(WindowManager::clampUiScale(getApp()->settings->uiScale.getValue()));
+    slider->setValue(WindowManager::clampUiScale(getSettings()->uiScale.getValue()));
 
     label->setMinimumWidth(100);
 
     QObject::connect(slider, &QSlider::valueChanged,
-                     [](auto value) { getApp()->settings->uiScale.setValue(value); });
+                     [](auto value) { getSettings()->uiScale.setValue(value); });
 
-    getApp()->settings->uiScale.connect(
+    getSettings()->uiScale.connect(
         [label](auto, auto) { label->setText(QString::number(WindowManager::getUiScaleValue())); },
         this->connections_);
 

src/widgets/settingspages/AppearancePage.hpp

@@ -1,10 +1,13 @@
 #pragma once
 
+#include "common/Channel.hpp"
 #include "widgets/settingspages/SettingsPage.hpp"
 
 #include <QScrollArea>
 #include <pajlada/signals/signalholder.hpp>
 
+class QVBoxLayout;
+
 namespace chatterino {
 
 class AppearancePage : public SettingsPage
@@ -12,10 +15,16 @@ class AppearancePage : public SettingsPage
 public:
     AppearancePage();
 
+    void addApplicationGroup(QVBoxLayout &layout);
+    void addMessagesGroup(QVBoxLayout &layout);
+    void addEmotesGroup(QVBoxLayout &layout);
+
     QLayout *createThemeColorChanger();
     QLayout *createFontChanger();
     QLayout *createUiScaleSlider();
 
+    ChannelPtr createPreviewChannel();
+
     std::vector<pajlada::Signals::ScopedConnection> connections_;
 };
 

src/widgets/settingspages/BehaviourPage.cpp

@@ -15,6 +15,7 @@
 #endif
 #define INPUT_EMPTY "Hide input box when empty"
 #define PAUSE_HOVERING "When hovering"
+#define LAST_MSG "Mark the last message you read (dotted line)"
 
 #define LIMIT_CHATTERS_FOR_SMALLER_STREAMERS "Only fetch chatters list for viewers under X viewers"
 
@@ -38,6 +39,11 @@ BehaviourPage::BehaviourPage()
         form->addRow(
             "", this->createCheckBox("Show which users parted the channel (up to 1000 chatters)",
                                      app->settings->showParts));
+
+        form->addRow("", this->createCheckBox("Show message length while typing",
+                                              getSettings()->showMessageLength));
+        form->addRow("", this->createCheckBox(LAST_MSG, getSettings()->showLastMessageIndicator));
+
         form->addRow("Pause chat:",
                      this->createCheckBox(PAUSE_HOVERING, app->settings->pauseChatHover));
 
@@ -76,7 +82,7 @@ QSlider *BehaviourPage::createMouseScrollSlider()
     auto slider = new QSlider(Qt::Horizontal);
 
     float currentValue = app->settings->mouseScrollMultiplier;
-    int sliderValue = ((currentValue - 0.1f) / 2.f) * 99.f;
+    int sliderValue = int(((currentValue - 0.1f) / 2.f) * 99.f);
     slider->setValue(sliderValue);
 
     QObject::connect(slider, &QSlider::valueChanged, [=](int newValue) {