From 0e6ca6b097eae0e856614c92fe7ca77811e39ec2 Mon Sep 17 00:00:00 2001 From: Daniel <24928223+dnsge@users.noreply.github.com> Date: Thu, 13 Aug 2020 09:43:08 -0400 Subject: [PATCH] Vertical tabs (#1815) * Vertical tabs * Vertical tab wrapping * Fix formatting * Cleanup code * Updated changelog * Hide button row if no buttons exist * Fix tab width expansion Co-authored-by: fourtf --- CHANGELOG.md | 1 + src/BaseTheme.cpp | 3 +- src/BaseTheme.hpp | 2 +- src/singletons/Settings.hpp | 4 + src/widgets/Notebook.cpp | 275 ++++++++++++++++------ src/widgets/Notebook.hpp | 7 +- src/widgets/Window.cpp | 3 + src/widgets/helper/NotebookTab.cpp | 30 ++- src/widgets/helper/NotebookTab.hpp | 5 + src/widgets/settingspages/GeneralPage.cpp | 25 ++ 10 files changed, 278 insertions(+), 77 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0774df79..cc55bf90 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ - Major: We now support image thumbnails coming from the link resolver. This feature is off by default and can be enabled in the settings with the "Show link thumbnail" setting. This feature also requires the "Show link info when hovering" setting to be enabled (#1664) - Major: Added image upload functionality to i.nuuls.com with an ability to change upload destination. This works by dragging and dropping an image into a split, or pasting an image into the text edit field. (#1332, #1741) +- Major: Added option to display tabs vertically. (#1815) - Minor: Clicking on `Open in browser` in a whisper split will now open your whispers on twitch. (#1828) - Minor: Clicking on @mentions will open the User Popup. (#1674) - Minor: You can now open the Twitch User Card by middle-mouse clicking a username. (#1669) diff --git a/src/BaseTheme.cpp b/src/BaseTheme.cpp index 306f13f5..06679f75 100644 --- a/src/BaseTheme.cpp +++ b/src/BaseTheme.cpp @@ -148,7 +148,8 @@ void AB_THEME_CLASS::actuallyUpdate(double hue, double multiplier) // this->tabs.highlighted = {fg, {QColor("#777"), // QColor("#777"), QColor("#666")}}; - this->tabs.bottomLine = this->tabs.selected.backgrounds.regular.color(); + this->tabs.dividerLine = + this->tabs.selected.backgrounds.regular.color(); } // Message diff --git a/src/BaseTheme.hpp b/src/BaseTheme.hpp index 36e14c07..a6749c72 100644 --- a/src/BaseTheme.hpp +++ b/src/BaseTheme.hpp @@ -49,7 +49,7 @@ public: TabColors highlighted; TabColors selected; QColor border; - QColor bottomLine; + QColor dividerLine; } tabs; /// MESSAGES diff --git a/src/singletons/Settings.hpp b/src/singletons/Settings.hpp index 869fcdf0..f5690b77 100644 --- a/src/singletons/Settings.hpp +++ b/src/singletons/Settings.hpp @@ -9,6 +9,7 @@ #include "controllers/highlights/HighlightPhrase.hpp" #include "controllers/moderationactions/ModerationAction.hpp" #include "singletons/Toasts.hpp" +#include "widgets/Notebook.hpp" namespace chatterino { @@ -78,6 +79,9 @@ public: BoolSetting colorizeNicknames = {"/appearance/messages/colorizeNicknames", false}; + IntSetting tabDirection = {"/appearance/tabDirection", + NotebookTabDirection::Horizontal}; + // BoolSetting collapseLongMessages = // {"/appearance/messages/collapseLongMessages", false}; IntSetting collpseMessagesMinLines = { diff --git a/src/widgets/Notebook.cpp b/src/widgets/Notebook.cpp index f840cea3..990b9c16 100644 --- a/src/widgets/Notebook.cpp +++ b/src/widgets/Notebook.cpp @@ -357,101 +357,232 @@ void Notebook::performLayout(bool animated) const auto tabHeight = int(NOTEBOOK_TAB_HEIGHT * scale); const auto addButtonWidth = this->showAddButton_ ? tabHeight : 0; - auto x = left; - auto y = 0; - - // set size of custom buttons (settings, user, ...) - for (auto *btn : this->customButtons_) + if (this->tabDirection_ == NotebookTabDirection::Horizontal) { - if (!btn->isVisible()) + auto x = left; + auto y = 0; + + // set size of custom buttons (settings, user, ...) + for (auto *btn : this->customButtons_) { - continue; + if (!btn->isVisible()) + { + continue; + } + + btn->setFixedSize(tabHeight, tabHeight - 1); + btn->move(x, 0); + x += tabHeight; } - btn->setFixedSize(tabHeight, tabHeight - 1); - btn->move(x, 0); - x += tabHeight; - } + // layout tabs + /// Notebook tabs need to know if they are in the last row. + auto firstInBottomRow = + this->items_.size() ? &this->items_.front() : nullptr; - // layout tabs - /// Notebook tabs need to know if they are in the last row. - auto firstInBottomRow = - this->items_.size() ? &this->items_.front() : nullptr; - - for (auto &item : this->items_) - { - /// Break line if element doesn't fit. - auto isFirst = &item == &this->items_.front(); - auto isLast = &item == &this->items_.back(); - - auto fitsInLine = - ((isLast ? addButtonWidth : 0) + x + item.tab->width()) <= width(); - - if (!isFirst && !fitsInLine) + for (auto &item : this->items_) { - y += item.tab->height(); - x = left; - firstInBottomRow = &item; + /// Break line if element doesn't fit. + auto isFirst = &item == &this->items_.front(); + auto isLast = &item == &this->items_.back(); + + auto fitsInLine = ((isLast ? addButtonWidth : 0) + x + + item.tab->width()) <= width(); + + if (!isFirst && !fitsInLine) + { + y += item.tab->height(); + x = left; + firstInBottomRow = &item; + } + + /// Layout tab + item.tab->growWidth(0); + item.tab->moveAnimated(QPoint(x, y), animated); + x += item.tab->width() + std::max(1, int(scale * 1)); } - /// Layout tab - item.tab->moveAnimated(QPoint(x, y), animated); - x += item.tab->width() + std::max(1, int(scale * 1)); - } - - /// Update which tabs are in the last row - auto inLastRow = false; - for (const auto &item : this->items_) - { - if (&item == firstInBottomRow) + /// Update which tabs are in the last row + auto inLastRow = false; + for (const auto &item : this->items_) { - inLastRow = true; + if (&item == firstInBottomRow) + { + inLastRow = true; + } + item.tab->setInLastRow(inLastRow); + } + + // move misc buttons + if (this->showAddButton_) + { + this->addButton_->move(x, y); + } + + if (this->lineOffset_ != y + tabHeight) + { + this->lineOffset_ = y + tabHeight; + this->update(); + } + + /// Increment for the line at the bottom + y += int(2 * scale); + + // raise elements + for (auto &i : this->items_) + { + i.tab->raise(); + } + + if (this->showAddButton_) + { + this->addButton_->raise(); + } + + // set page bounds + if (this->selectedPage_ != nullptr) + { + this->selectedPage_->move(0, y + tabHeight); + this->selectedPage_->resize(width(), height() - y - tabHeight); + this->selectedPage_->raise(); } - item.tab->setInLastRow(inLastRow); } - - // move misc buttons - if (this->showAddButton_) + else { - this->addButton_->move(x, y); + const int lineThickness = int(2 * scale); + auto x = left; + auto y = 0; + + // set size of custom buttons (settings, user, ...) + for (auto *btn : this->customButtons_) + { + if (!btn->isVisible()) + { + continue; + } + + btn->setFixedSize(tabHeight, tabHeight - 1); + btn->move(x, y); + x += tabHeight; + } + + if (this->customButtons_.size() > 0) + y = tabHeight; + + int buttonWidth = x; + int top = y; + x = left; + + int verticalRowSpace = (this->height() - top) / tabHeight; + if (verticalRowSpace == 0) // window hasn't properly rendered yet + return; + int count = this->items_.size() + (this->showAddButton_ ? 1 : 0); + int columnCount = ceil((float)count / verticalRowSpace); + + for (int col = 0; col < columnCount; col++) + { + auto largestWidth = 0; + int colStart = col * verticalRowSpace; + int colEnd = + std::min((col + 1) * verticalRowSpace, this->items_.size()); + + for (int i = colStart; i < colEnd; i++) + { + largestWidth = std::max( + this->items_.at(i).tab->normalTabWidth(), largestWidth); + } + + if (col == columnCount - 1 && this->showAddButton_ && + largestWidth == 0) + { + largestWidth = this->addButton_->width(); + } + + if (largestWidth + x < buttonWidth && col == columnCount - 1) + largestWidth = buttonWidth - x; + + for (int i = colStart; i < colEnd; i++) + { + auto item = this->items_.at(i); + + /// Layout tab + item.tab->growWidth(largestWidth); + item.tab->moveAnimated(QPoint(x, y), animated); + y += tabHeight; + } + + if (col == columnCount - 1 && this->showAddButton_) + { + this->addButton_->move(x, y); + } + + x += largestWidth + lineThickness; + y = top; + } + + x = std::max(x, buttonWidth); + + if (this->lineOffset_ != x - lineThickness) + { + this->lineOffset_ = x - lineThickness; + this->update(); + } + + // raise elements + for (auto &i : this->items_) + { + i.tab->raise(); + } + + if (this->showAddButton_) + { + this->addButton_->raise(); + } + + // set page bounds + if (this->selectedPage_ != nullptr) + { + this->selectedPage_->move(x, 0); + this->selectedPage_->resize(width() - x, height()); + this->selectedPage_->raise(); + } } +} - if (this->lineY_ != y + tabHeight) +void Notebook::setTabDirection(NotebookTabDirection direction) +{ + if (direction != this->tabDirection_) { - this->lineY_ = y + tabHeight; - this->update(); - } - - /// Increment for the line at the bottom - y += int(2 * scale); - - // raise elements - for (auto &i : this->items_) - { - i.tab->raise(); - } - - if (this->showAddButton_) - { - this->addButton_->raise(); - } - - // set page bounds - if (this->selectedPage_ != nullptr) - { - this->selectedPage_->move(0, y + tabHeight); - this->selectedPage_->resize(width(), height() - y - tabHeight); - this->selectedPage_->raise(); + this->tabDirection_ = direction; + this->performLayout(); } } void Notebook::paintEvent(QPaintEvent *event) { BaseWidget::paintEvent(event); + auto scale = this->scale(); QPainter painter(this); - painter.fillRect(0, this->lineY_, this->width(), int(2 * this->scale()), - this->theme->tabs.bottomLine); + if (this->tabDirection_ == NotebookTabDirection::Horizontal) + { + /// horizontal line + painter.fillRect(0, this->lineOffset_, this->width(), int(2 * scale), + this->theme->tabs.dividerLine); + } + else + { + if (this->customButtons_.size() > 0) + { + painter.fillRect(0, int(NOTEBOOK_TAB_HEIGHT * scale), + this->lineOffset_, int(2 * scale), + this->theme->tabs.dividerLine); + } + + /// vertical line + painter.fillRect(this->lineOffset_, 0, int(2 * scale), this->height(), + this->theme->tabs.dividerLine); + } } NotebookButton *Notebook::getAddButton() diff --git a/src/widgets/Notebook.hpp b/src/widgets/Notebook.hpp index 2e8b39bb..5a6a1a96 100644 --- a/src/widgets/Notebook.hpp +++ b/src/widgets/Notebook.hpp @@ -16,6 +16,8 @@ class NotebookButton; class NotebookTab; class SplitContainer; +enum NotebookTabDirection { Horizontal = 0, Vertical = 1 }; + class Notebook : public BaseWidget { Q_OBJECT @@ -52,6 +54,8 @@ public: void performLayout(bool animate = false); + void setTabDirection(NotebookTabDirection direction); + protected: virtual void scaleChangedEvent(float scale_) override; virtual void resizeEvent(QResizeEvent *) override; @@ -81,7 +85,8 @@ private: bool allowUserTabManagement_ = false; bool showAddButton_ = false; - int lineY_ = 20; + int lineOffset_ = 20; + NotebookTabDirection tabDirection_ = NotebookTabDirection::Horizontal; }; class SplitNotebook : public Notebook, pajlada::Signals::SignalHolder diff --git a/src/widgets/Window.cpp b/src/widgets/Window.cpp index 41522474..2cf06b44 100644 --- a/src/widgets/Window.cpp +++ b/src/widgets/Window.cpp @@ -64,6 +64,9 @@ Window::Window(WindowType type) if (type == WindowType::Main) { this->resize(int(600 * this->scale()), int(500 * this->scale())); + getSettings()->tabDirection.connect([this](int val) { + this->notebook_->setTabDirection(NotebookTabDirection(val)); + }); } else { diff --git a/src/widgets/helper/NotebookTab.cpp b/src/widgets/helper/NotebookTab.cpp index 235aa99c..8d81ac49 100644 --- a/src/widgets/helper/NotebookTab.cpp +++ b/src/widgets/helper/NotebookTab.cpp @@ -89,7 +89,20 @@ void NotebookTab::themeChangedEvent() this->setMouseEffectColor(this->theme->tabs.regular.text); } -void NotebookTab::updateSize() +void NotebookTab::growWidth(int width) +{ + if (this->growWidth_ != width) + { + this->growWidth_ = width; + this->updateSize(); + } + else + { + this->growWidth_ = width; + } +} + +int NotebookTab::normalTabWidth() { float scale = this->scale(); int width; @@ -114,8 +127,21 @@ void NotebookTab::updateSize() { width = clamp(width, this->height(), int(150 * scale)); } + + return width; +} + +void NotebookTab::updateSize() +{ + float scale = this->scale(); + int width = this->normalTabWidth(); auto height = int(NOTEBOOK_TAB_HEIGHT * scale); + if (width < this->growWidth_) + { + width = this->growWidth_; + } + if (this->width() != width || this->height() != height) { this->resize(width, height); @@ -175,7 +201,7 @@ void NotebookTab::titleUpdated() { // Queue up save because: Tab title changed getApp()->windows->queueSave(); - + this->notebook_->performLayout(); this->updateSize(); this->update(); } diff --git a/src/widgets/helper/NotebookTab.hpp b/src/widgets/helper/NotebookTab.hpp index 70d251d2..45d0022f 100644 --- a/src/widgets/helper/NotebookTab.hpp +++ b/src/widgets/helper/NotebookTab.hpp @@ -51,6 +51,9 @@ public: QRect getDesiredRect() const; void hideTabXChanged(); + void growWidth(int width); + int normalTabWidth(); + protected: virtual void themeChangedEvent() override; @@ -98,6 +101,8 @@ private: bool isLive_{}; + int growWidth_ = 0; + QMenu menu_; std::vector managedConnections_; diff --git a/src/widgets/settingspages/GeneralPage.cpp b/src/widgets/settingspages/GeneralPage.cpp index 69786092..e0917965 100644 --- a/src/widgets/settingspages/GeneralPage.cpp +++ b/src/widgets/settingspages/GeneralPage.cpp @@ -299,6 +299,31 @@ void GeneralPage::initLayout(SettingsLayout &layout) return QString::number(val) + "x"; }, [](auto args) { return fuzzyToFloat(args.value, 1.f); }); + layout.addDropdown( + "Tab direction", {"Horizontal", "Vertical"}, s.tabDirection, + [](auto val) { + switch (val) + { + case NotebookTabDirection::Horizontal: + return "Horizontal"; + case NotebookTabDirection::Vertical: + return "Vertical"; + } + + return ""; + }, + [](auto args) { + if (args.value == "Vertical") + { + return NotebookTabDirection::Vertical; + } + else + { + // default to horizontal + return NotebookTabDirection::Horizontal; + } + }); + layout.addCheckbox("Show tab close button", s.showTabCloseButton); layout.addCheckbox("Always on top", s.windowTopMost); #ifdef USEWINSDK