changes for light mode

chatterino.pro

@@ -216,7 +216,8 @@ SOURCES += \
     src/controllers/taggedusers/taggedusersmodel.cpp \
     src/util/emotemap.cpp \
     src/providers/irc/ircconnection2.cpp \
-    src/widgets/userinfopopup.cpp
+    src/widgets/userinfopopup.cpp \
+    src/widgets/welcomedialog.cpp
 
 HEADERS  += \
     src/precompiled_header.hpp \
@@ -375,7 +376,8 @@ HEADERS  += \
     src/util/mutexvalue.hpp \
     src/providers/irc/ircconnection2.hpp \
     src/widgets/helper/line.hpp \
-    src/widgets/userinfopopup.hpp
+    src/widgets/userinfopopup.hpp \
+    src/widgets/welcomedialog.hpp
 
 RESOURCES += \
     resources/resources.qrc

resources/images/emote_dark.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#000000;}
+</style>
+<path class="st0" d="M50,100c27.7,0,50-22.3,50-50S77.7,0,50,0S0,22.3,0,50S22.3,100,50,100z M33.3,46.2c4.2,0,8.3-3.3,8.3-8.3
+	s-4.2-8.3-8.3-8.3S25,32.9,25,37.9S29.2,46.2,33.3,46.2z M50,91.7C27,91.7,8.3,73,8.3,50S27,8.3,50,8.3S91.7,27,91.7,50
+	S73,91.7,50,91.7z M23.3,63.1c16.2,10.3,37.1,10.4,53.2,0.1l-4.3-7c-13.7,8.5-31,8.4-44.5-0.1L23.3,63.1z M67.1,46.2
+	c4.2,0,8.3-3.3,8.3-8.3s-4.2-8.3-8.3-8.3s-8.3,3.3-8.3,8.3S62.9,46.2,67.1,46.2z"/>
+</svg>

resources/resources.qrc

@@ -65,6 +65,7 @@
         <file>images/buttons/mod.png</file>
         <file>images/buttons/unban.png</file>
         <file>images/buttons/unmod.png</file>
+        <file>images/emote_dark.svg</file>
     </qresource>
     <qresource prefix="/qt/etc">
         <file>qt.conf</file>

src/singletons/thememanager.cpp

@@ -52,7 +52,8 @@ void ThemeManager::actuallyUpdate(double hue, double multiplier)
     isLight = multiplier > 0;
     bool lightWin = isLight;
 
-    QColor themeColor = QColor::fromHslF(hue, 0.43, 0.5);
+    //    QColor themeColor = QColor::fromHslF(hue, 0.43, 0.5);
+    QColor themeColor = QColor::fromHslF(hue, 0.8, 0.5);
     QColor themeColorNoSat = QColor::fromHslF(hue, 0, 0.5);
 
     qreal sat = 0;
@@ -86,17 +87,19 @@ void ThemeManager::actuallyUpdate(double hue, double multiplier)
         this->messages.textColors.caret =  //
             this->messages.textColors.regular = isLight ? "#000" : "#fff";
 
-        QColor highlighted = lightWin ? QColor("#b60505") : QColor("#ee6166");
+        QColor highlighted = lightWin ? QColor("#ff0000") : QColor("#ee6166");
 
         /// TABS
         if (lightWin) {
             this->tabs.regular = {QColor("#444"),
-                                  {QColor("#fff"), QColor("#fff"), QColor("#fff")},
+                                  {QColor("#fff"), QColor("#eee"), QColor("#fff")},
                                   {QColor("#fff"), QColor("#fff"), QColor("#fff")}};
-            this->tabs.newMessage = {
+            this->tabs.newMessage = {QColor("#222"),
-                fg, {bg, QColor("#ccc"), bg}, {QColor("#aaa"), QColor("#aaa"), QColor("#aaa")}};
+                                     {QColor("#fff"), QColor("#eee"), QColor("#fff")},
-            this->tabs.highlighted = {
+                                     {QColor("#bbb"), QColor("#bbb"), QColor("#bbb")}};
-                fg, {bg, QColor("#ccc"), bg}, {highlighted, highlighted, highlighted}};
+            this->tabs.highlighted = {fg,
+                                      {QColor("#fff"), QColor("#eee"), QColor("#fff")},
+                                      {highlighted, highlighted, highlighted}};
             this->tabs.selected = {QColor("#000"),
                                    {QColor("#b4d7ff"), QColor("#b4d7ff"), QColor("#b4d7ff")},
                                    {QColor("#00aeef"), QColor("#00aeef"), QColor("#00aeef")}};
@@ -147,13 +150,20 @@ void ThemeManager::actuallyUpdate(double hue, double multiplier)
     this->splits.background = getColor(0, sat, 1);
     this->splits.dropPreview = QColor(0, 148, 255, 0x30);
     this->splits.dropPreviewBorder = QColor(0, 148, 255, 0xff);
-    this->splits.dropTargetRect = QColor(0, 148, 255, 0x00);
-    this->splits.dropTargetRectBorder = QColor(0, 148, 255, 0x00);
-    this->splits.resizeHandle = QColor(0, 148, 255, 0x70);
-    this->splits.resizeHandleBackground = QColor(0, 148, 255, 0x20);
 
-    // this->splits.border
+    if (isLight) {
-    // this->splits.borderFocused
+        this->splits.dropTargetRect = QColor(255, 255, 255, 0x00);
+        this->splits.dropTargetRectBorder = QColor(0, 148, 255, 0x00);
+
+        this->splits.resizeHandle = QColor(0, 148, 255, 0xff);
+        this->splits.resizeHandleBackground = QColor(0, 148, 255, 0x50);
+    } else {
+        this->splits.dropTargetRect = QColor(0, 148, 255, 0x00);
+        this->splits.dropTargetRectBorder = QColor(0, 148, 255, 0x00);
+
+        this->splits.resizeHandle = QColor(0, 148, 255, 0x70);
+        this->splits.resizeHandleBackground = QColor(0, 148, 255, 0x20);
+    }
 
     this->splits.header.background = getColor(0, sat, flat ? 1 : 0.9);
     this->splits.header.border = getColor(0, sat, flat ? 1 : 0.85);
@@ -165,8 +175,9 @@ void ThemeManager::actuallyUpdate(double hue, double multiplier)
     this->splits.input.styleSheet =
         "background:" + this->splits.input.background.name() + ";" +
         "border:" + this->tabs.selected.backgrounds.regular.color().name() + ";" +
-        "color:" + this->messages.textColors.regular.name() + ";" +
+        "color:" + this->messages.textColors.regular.name() + ";" +  //
-        "selection-background-color:" + this->tabs.selected.backgrounds.regular.color().name();
+        "selection-background-color:" +
+        (isLight ? "#68B1FF" : this->tabs.selected.backgrounds.regular.color().name());
 
     // Message
     this->messages.textColors.link = isLight ? QColor(66, 134, 244) : QColor(66, 134, 244);
@@ -175,7 +186,7 @@ void ThemeManager::actuallyUpdate(double hue, double multiplier)
     this->messages.backgrounds.regular = splits.background;
     this->messages.backgrounds.alternate = getColor(0, sat, 0.93);
     this->messages.backgrounds.highlighted =
-        blendColors(themeColor, this->messages.backgrounds.regular, 0.6);
+        blendColors(themeColor, this->messages.backgrounds.regular, isLight ? 0.8 : 0.6);
     this->messages.backgrounds.subscription =
         blendColors(QColor("#C466FF"), this->messages.backgrounds.regular, 0.7);
 
@@ -200,7 +211,7 @@ void ThemeManager::actuallyUpdate(double hue, double multiplier)
     this->messages.selection = isLightTheme() ? QColor(0, 0, 0, 64) : QColor(255, 255, 255, 64);
 
     this->updated.invoke();
-}  // namespace singletons
+}
 
 QColor ThemeManager::blendColors(const QColor &color1, const QColor &color2, qreal ratio)
 {
@@ -222,7 +233,7 @@ void ThemeManager::normalizeColor(QColor &color)
             color.setHslF(
                 color.hueF(), color.saturationF(),
                 color.lightnessF() - sin((color.hueF() - 0.1) / (0.3333 - 0.1) * 3.14159) *
-                                         color.saturationF() * 0.2);
+                                         color.saturationF() * 0.4);
         }
     } else {
         if (color.lightnessF() < 0.5) {

src/singletons/thememanager.hpp

@@ -59,8 +59,6 @@ public:
     struct {
         QColor messageSeperator;
         QColor background;
-        QColor border;
-        QColor borderFocused;
         QColor dropPreview;
         QColor dropPreviewBorder;
         QColor dropTargetRect;

src/util/networkrequest.hpp

@@ -216,7 +216,7 @@ public:
 
         if (this->data.caller != nullptr) {
             QObject::connect(worker, &NetworkWorker::doneUrl, this->data.caller,
-                             [onFinished, data = this->data](auto reply) mutable {
+                             [ onFinished, data = this->data ](auto reply) mutable {
                                  if (reply->error() != QNetworkReply::NetworkError::NoError) {
                                      // TODO: We might want to call an onError callback here
                                      return;
@@ -238,7 +238,7 @@ public:
 
         QObject::connect(
             &requester, &NetworkRequester::requestUrl, worker,
-            [timer, data = std::move(this->data), worker, onFinished{std::move(onFinished)}]() {
+            [ timer, data = std::move(this->data), worker, onFinished{std::move(onFinished)} ]() {
                 QNetworkReply *reply = NetworkManager::NaM.get(data.request);
 
                 if (timer != nullptr) {
@@ -253,21 +253,21 @@ public:
                     data.onReplyCreated(reply);
                 }
 
-                QObject::connect(reply, &QNetworkReply::finished, worker,
+                QObject::connect(reply, &QNetworkReply::finished, worker, [
-                                 [data = std::move(data), worker, reply,
+                    data = std::move(data), worker, reply, onFinished = std::move(onFinished)
-                                  onFinished = std::move(onFinished)]() mutable {
+                ]() mutable {
-                                     if (data.caller == nullptr) {
+                    if (data.caller == nullptr) {
-                                         QByteArray bytes = reply->readAll();
+                        QByteArray bytes = reply->readAll();
-                                         data.writeToCache(bytes);
+                        data.writeToCache(bytes);
-                                         onFinished(bytes);
+                        onFinished(bytes);
 
-                                         reply->deleteLater();
+                        reply->deleteLater();
-                                     } else {
+                    } else {
-                                         emit worker->doneUrl(reply);
+                        emit worker->doneUrl(reply);
-                                     }
+                    }
 
-                                     delete worker;
+                    delete worker;
-                                 });
+                });
             });
 
         emit requester.requestUrl();
@@ -276,7 +276,7 @@ public:
     template <typename FinishedCallback>
     void getJSON(FinishedCallback onFinished)
     {
-        this->get([onFinished{std::move(onFinished)}](const QByteArray &bytes) -> bool {
+        this->get([onFinished{std::move(onFinished)}](const QByteArray &bytes)->bool {
             auto object = parseJSONFromData(bytes);
             onFinished(object);
 
@@ -289,7 +289,7 @@ public:
     template <typename FinishedCallback>
     void getJSON2(FinishedCallback onFinished)
     {
-        this->get([onFinished{std::move(onFinished)}](const QByteArray &bytes) -> bool {
+        this->get([onFinished{std::move(onFinished)}](const QByteArray &bytes)->bool {
             auto object = parseJSONFromData2(bytes);
             onFinished(object);
 
@@ -370,8 +370,8 @@ private:
         worker->moveToThread(&NetworkManager::workerThread);
 
         if (this->data.caller != nullptr) {
-            QObject::connect(worker, &NetworkWorker::doneUrl, this->data.caller,
+            QObject::connect(worker, &NetworkWorker::doneUrl,
-                             [data = this->data](auto reply) mutable {
+                             this->data.caller, [data = this->data](auto reply) mutable {
                                  if (reply->error() != QNetworkReply::NetworkError::NoError) {
                                      if (data.onError) {
                                          data.onError(reply->error());
@@ -394,7 +394,7 @@ private:
         }
 
         QObject::connect(&requester, &NetworkRequester::requestUrl, worker,
-                         [timer, data = std::move(this->data), worker]() {
+                         [ timer, data = std::move(this->data), worker ]() {
                              QNetworkReply *reply = nullptr;
                              switch (data.requestType) {
                                  case GetRequest: {
@@ -430,7 +430,7 @@ private:
                              }
 
                              QObject::connect(reply, &QNetworkReply::finished, worker,
-                                              [data = std::move(data), worker, reply]() mutable {
+                                              [ data = std::move(data), worker, reply ]() mutable {
                                                   if (data.caller == nullptr) {
                                                       QByteArray bytes = reply->readAll();
                                                       data.writeToCache(bytes);

src/util/serialize-custom.hpp

@@ -29,7 +29,7 @@ struct Deserialize<QString> {
             auto strLen = value.GetStringLength();
 
             return QString::fromUtf8(str, strLen);
-        } catch (const std::exception &e) {
+        } catch (const std::exception &) {
             //            int x = 5;
         } catch (...) {
             //            int y = 5;

src/widgets/helper/splitinput.cpp

@@ -108,11 +108,7 @@ void SplitInput::initLayout()
 void SplitInput::scaleChangedEvent(float scale)
 {
     // update the icon size of the emote button
-    QString text = "<img src=':/images/emote.svg' width='xD' height='xD' />";
+    this->updateEmoteButton();
-    text.replace("xD", QString::number(int(12 * scale)));
-
-    this->ui_.emoteButton->getLabel().setText(text);
-    this->ui_.emoteButton->setFixedHeight(int(18 * scale));
 
     // set maximum height
     this->setMaximumHeight(int(150 * this->getScale()));
@@ -124,11 +120,29 @@ void SplitInput::themeRefreshEvent()
 
     palette.setColor(QPalette::Foreground, this->themeManager->splits.input.text);
 
+    this->updateEmoteButton();
     this->ui_.textEditLength->setPalette(palette);
 
     this->ui_.textEdit->setStyleSheet(this->themeManager->splits.input.styleSheet);
 
     this->ui_.hbox->setMargin(int((this->themeManager->isLightTheme() ? 4 : 2) * this->getScale()));
+
+    this->ui_.emoteButton->getLabel().setStyleSheet("color: #000");
+}
+
+void SplitInput::updateEmoteButton()
+{
+    float scale = this->getScale();
+
+    QString text = "<img src=':/images/emote.svg' width='xD' height='xD' />";
+    text.replace("xD", QString::number(int(12 * scale)));
+
+    if (this->themeManager->isLightTheme()) {
+        text.replace("emote", "emote_dark");
+    }
+
+    this->ui_.emoteButton->getLabel().setText(text);
+    this->ui_.emoteButton->setFixedHeight(int(18 * scale));
 }
 
 void SplitInput::installKeyPressedEvent()

src/widgets/helper/splitinput.hpp

@@ -33,6 +33,7 @@ public:
 
 protected:
     virtual void scaleChangedEvent(float scale) override;
+    virtual void themeRefreshEvent() override;
 
     virtual void paintEvent(QPaintEvent *) override;
     virtual void resizeEvent(QResizeEvent *) override;
@@ -58,7 +59,8 @@ private:
 
     void initLayout();
     void installKeyPressedEvent();
-    virtual void themeRefreshEvent() override;
+
+    void updateEmoteButton();
 
 private slots:
     void editTextChanged();

src/widgets/helper/splitoverlay.cpp

@@ -1,6 +1,8 @@
 #include "splitoverlay.hpp"
 
 #include <QEvent>
+#include <QGraphicsBlurEffect>
+#include <QGraphicsEffect>
 #include <QGraphicsOpacityEffect>
 #include <QGridLayout>
 #include <QPainter>
@@ -90,7 +92,11 @@ SplitOverlay::SplitOverlay(Split *parent)
 void SplitOverlay::paintEvent(QPaintEvent *)
 {
     QPainter painter(this);
-    painter.fillRect(this->rect(), QColor(0, 0, 0, 150));
+    if (this->themeManager->isLightTheme()) {
+        painter.fillRect(this->rect(), QColor(255, 255, 255, 200));
+    } else {
+        painter.fillRect(this->rect(), QColor(0, 0, 0, 150));
+    }
 
     QRect rect;
     switch (this->hoveredElement) {

src/widgets/splitcontainer.cpp

@@ -418,7 +418,11 @@ void SplitContainer::paintEvent(QPaintEvent *)
 
         painter.drawText(rect(), text, QTextOption(Qt::AlignCenter));
     } else {
-        painter.fillRect(rect(), QColor("#555"));
+        if (getApp()->themes->isLightTheme()) {
+            painter.fillRect(rect(), QColor("#999"));
+        } else {
+            painter.fillRect(rect(), QColor("#555"));
+        }
     }
 
     for (DropRect &dropRect : this->dropRects) {
@@ -442,7 +446,11 @@ void SplitContainer::paintEvent(QPaintEvent *)
 
         int s = std::min<int>(dropRect.rect.width(), dropRect.rect.height()) - 12;
 
-        painter.setPen(QColor(255, 255, 255));
+        if (this->themeManager->isLightTheme()) {
+            painter.setPen(QColor(0, 0, 0));
+        } else {
+            painter.setPen(QColor(255, 255, 255));
+        }
         painter.drawLine(rect.left() + rect.width() / 2 - (s / 2), rect.top() + rect.height() / 2,
                          rect.left() + rect.width() / 2 + (s / 2), rect.top() + rect.height() / 2);
         painter.drawLine(rect.left() + rect.width() / 2, rect.top() + rect.height() / 2 - (s / 2),

src/widgets/userinfopopup.cpp

@@ -140,6 +140,13 @@ UserInfoPopup::UserInfoPopup()
     this->installEvents();
 }
 
+void UserInfoPopup::themeRefreshEvent()
+{
+    BaseWindow::themeRefreshEvent();
+
+    this->setStyleSheet("background: #333");
+}
+
 void UserInfoPopup::installEvents()
 {
     std::weak_ptr<bool> hack = this->hack_;
@@ -346,7 +353,7 @@ UserInfoPopup::TimeoutWidget::TimeoutWidget()
                 // connect
 
                 QObject::connect(
-                    *a, &RippleEffectLabel::clicked, [this, timeout = std::get<1>(item)] {
+                    *a, &RippleEffectLabel::clicked, [ this, timeout = std::get<1>(item) ] {
                         this->buttonClicked.invoke(std::make_pair(Action::Timeout, timeout));
                     });
             }
@@ -357,17 +364,13 @@ UserInfoPopup::TimeoutWidget::TimeoutWidget()
 
     addTimeouts("sec", {{"1", 1}});
     addTimeouts("min", {
-                           {"1", 1 * 60},
+                           {"1", 1 * 60}, {"5", 5 * 60}, {"10", 10 * 60},
-                           {"5", 5 * 60},
-                           {"10", 10 * 60},
                        });
     addTimeouts("hour", {
-                            {"1", 1 * 60 * 60},
+                            {"1", 1 * 60 * 60}, {"4", 4 * 60 * 60},
-                            {"4", 4 * 60 * 60},
                         });
     addTimeouts("weeks", {
-                             {"1", 1 * 60 * 60 * 30},
+                             {"1", 1 * 60 * 60 * 30}, {"2", 2 * 60 * 60 * 30},
-                             {"2", 2 * 60 * 60 * 30},
                          });
 
     addButton(Ban, "ban", getApp()->resources->buttons.ban);

src/widgets/userinfopopup.hpp

@@ -20,6 +20,9 @@ public:
 
     void setData(const QString &name, const ChannelPtr &channel);
 
+protected:
+    virtual void themeRefreshEvent() override;
+
 private:
     bool isMod_;
     bool isBroadcaster_;

src/widgets/welcomedialog.cpp

@@ -0,0 +1,13 @@
+#include "welcomedialog.hpp"
+
+namespace chatterino {
+namespace widgets {
+
+WelcomeDialog::WelcomeDialog()
+    : BaseWindow(nullptr, BaseWindow::EnableCustomFrame)
+{
+    this->setWindowTitle("Chatterino quick setup");
+}
+
+}  // namespace widgets
+}  // namespace chatterino

src/widgets/welcomedialog.hpp

@@ -0,0 +1,15 @@
+#pragma once
+
+#include "widgets/basewindow.hpp"
+
+namespace chatterino {
+namespace widgets {
+
+class WelcomeDialog : public BaseWindow
+{
+public:
+    WelcomeDialog();
+};
+
+}  // namespace widgets
+}  // namespace chatterino

src/widgets/window.cpp

@@ -13,6 +13,7 @@
 #include "widgets/notebook.hpp"
 #include "widgets/settingsdialog.hpp"
 #include "widgets/split.hpp"
+#include "widgets/welcomedialog.hpp"
 
 #include <QApplication>
 #include <QHeaderView>
@@ -146,6 +147,12 @@ Window::Window(WindowType _type)
         const auto &msg = messages[index++ % messages.size()];
         app->twitch.server->addFakeMessage(msg);
     });
+
+    CreateWindowShortcut(this, "F9", [=] {
+        auto *dialog = new WelcomeDialog();
+        dialog->setAttribute(Qt::WA_DeleteOnClose);
+        dialog->show();
+    });
 #endif
 
     this->refreshWindowTitle("");