[VDD] Fix minimum size by adding a compact mode to quickSettingsButtons (#6890)

* [VDD] Fix minimum size by adding a compact mode to quickSettingsButtons

Took 17 minutes

Took 5 seconds

* Fix and use FlowWidget/FlowLayout

Took 35 minutes

Took 4 seconds

* Set spacings.

Took 12 minutes

* Make VDE tools flow

Took 1 hour 23 minutes

Took 5 seconds

* Squeeze and flow even more.

Took 11 minutes

* Make pushbutton compact.

Took 54 minutes

Took 7 seconds

---------

Co-authored-by: Lukas Brübach <Bruebach.Lukas@bdosecurity.de>

cockatrice/src/interface/widgets/visual_deck_editor/visual_deck_display_options_widget.cpp

@@ -72,7 +72,7 @@ VisualDeckDisplayOptionsWidget::VisualDeckDisplayOptionsWidget(QWidget *parent)
     sortCriteriaButton->addSettingsWidget(sortLabel);
     sortCriteriaButton->addSettingsWidget(sortByListWidget);
 
-    displayTypeButton = new QPushButton(this);
+    displayTypeButton = new CompactPushButton(this);
     connect(displayTypeButton, &QPushButton::clicked, this, &VisualDeckDisplayOptionsWidget::updateDisplayType);
 
     groupAndSortLayout->addWidget(groupByLabel);
@@ -91,7 +91,8 @@ void VisualDeckDisplayOptionsWidget::retranslateUi()
     sortByLabel->setText(tr("Sort by:"));
     sortLabel->setText(tr("Click and drag to change the sort order within the groups"));
     sortCriteriaButton->setToolTip(tr("Configure how cards are sorted within their groups"));
-    displayTypeButton->setText(tr("Toggle Layout: Overlap"));
+    displayTypeButton->setButtonText(tr("Toggle Layout: Overlap"));
+    displayTypeButton->setButtonIcon(QPixmap("theme:icons/scales"));
     displayTypeButton->setToolTip(
         tr("Change how cards are displayed within zones (i.e. overlapped or fully visible.)"));
 }
@@ -115,11 +116,32 @@ void VisualDeckDisplayOptionsWidget::updateDisplayType()
     // Update UI and emit signal
     switch (currentDisplayType) {
         case DisplayType::Flat:
-            displayTypeButton->setText(tr("Toggle Layout: Flat"));
+            displayTypeButton->setButtonText(tr("Toggle Layout: Flat"));
+            displayTypeButton->setButtonIcon(QPixmap("theme:icons/scroll"));
             break;
         case DisplayType::Overlap:
-            displayTypeButton->setText(tr("Toggle Layout: Overlap"));
+            displayTypeButton->setButtonText(tr("Toggle Layout: Overlap"));
+            displayTypeButton->setButtonIcon(QPixmap("theme:icons/scales"));
             break;
     }
     emit displayTypeChanged(currentDisplayType);
 }
+
+void VisualDeckDisplayOptionsWidget::updateCompactMode(bool mode)
+{
+    displayTypeButton->setCompact(mode);
+}
+
+int VisualDeckDisplayOptionsWidget::expandedWidth() const
+{
+    return groupByLabel->sizeHint().width() + groupByComboBox->sizeHint().width() + sortByLabel->sizeHint().width() +
+           sortCriteriaButton->sizeHint().width() + displayTypeButton->expandedWidth() +
+           (groupAndSortLayout->spacing() * 4);
+}
+
+int VisualDeckDisplayOptionsWidget::compactWidth() const
+{
+    return groupByLabel->sizeHint().width() + groupByComboBox->sizeHint().width() + sortByLabel->sizeHint().width() +
+           sortCriteriaButton->sizeHint().width() + displayTypeButton->compactWidth() +
+           (groupAndSortLayout->spacing() * 4);
+}

cockatrice/src/interface/widgets/visual_deck_editor/visual_deck_display_options_widget.h

@@ -53,6 +53,9 @@ public slots:
      * Called when the application language changes.
      */
     void retranslateUi();
+    void updateCompactMode(bool mode);
+    int expandedWidth() const;
+    int compactWidth() const;
 
 public:
     /**
@@ -108,7 +111,7 @@ private:
     DisplayType currentDisplayType = DisplayType::Overlap;
 
     /// Button used to toggle the display layout.
-    QPushButton *displayTypeButton;
+    CompactPushButton *displayTypeButton;
 
     /// Label for the group-by selector.
     QLabel *groupByLabel;

cockatrice/src/interface/widgets/visual_deck_editor/visual_deck_editor_widget.cpp

@@ -9,6 +9,7 @@
 #include "../general/layout_containers/flow_widget.h"
 #include "../tabs/visual_deck_editor/tab_deck_editor_visual.h"
 #include "../tabs/visual_deck_editor/tab_deck_editor_visual_tab_widget.h"
+#include "../utility/compact_push_button.h"
 #include "visual_deck_display_options_widget.h"
 
 #include <QCheckBox>
@@ -69,7 +70,13 @@ VisualDeckEditorWidget::VisualDeckEditorWidget(QWidget *parent,
 
 void VisualDeckEditorWidget::initializeSearchBarAndCompleter()
 {
-    searchBar = new QLineEdit(this);
+    searchContainer = new QWidget(this);
+    searchContainer->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Preferred);
+    searchLayout = new QHBoxLayout(searchContainer);
+    searchContainer->setLayout(searchLayout);
+
+    searchBar = new QLineEdit(searchContainer);
+    searchContainer->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Preferred);
     connect(searchBar, &QLineEdit::returnPressed, this, [=, this]() {
         if (!searchBar->hasFocus())
             return;
@@ -80,6 +87,8 @@ void VisualDeckEditorWidget::initializeSearchBarAndCompleter()
         }
     });
 
+    searchLayout->addWidget(searchBar);
+
     setFocusProxy(searchBar);
     setFocusPolicy(Qt::ClickFocus);
 
@@ -133,13 +142,16 @@ void VisualDeckEditorWidget::initializeSearchBarAndCompleter()
     });
 
     // Search button functionality
-    searchPushButton = new QPushButton(this);
+    searchPushButton = new CompactPushButton(searchContainer);
+    searchPushButton->setButtonIcon(QPixmap("theme:icons/search"));
     connect(searchPushButton, &QPushButton::clicked, this, [=, this]() {
         ExactCard card = CardDatabaseManager::query()->getCard({searchBar->text()});
         if (card) {
             emit cardAdditionRequested(card);
         }
     });
+
+    searchLayout->addWidget(searchPushButton);
 }
 
 void VisualDeckEditorWidget::initializeDisplayOptionsWidget()
@@ -156,18 +168,14 @@ void VisualDeckEditorWidget::initializeDisplayOptionsWidget()
 void VisualDeckEditorWidget::initializeDisplayOptionsAndSearchWidget()
 {
     initializeSearchBarAndCompleter();
-
     initializeDisplayOptionsWidget();
 
-    displayOptionsAndSearch = new QWidget(this);
-    displayOptionsAndSearchLayout = new QHBoxLayout(displayOptionsAndSearch);
-    displayOptionsAndSearchLayout->setContentsMargins(0, 0, 0, 0);
-    displayOptionsAndSearchLayout->setAlignment(Qt::AlignLeft);
-    displayOptionsAndSearch->setLayout(displayOptionsAndSearchLayout);
+    displayOptionsAndSearch = new FlowWidget(this, Qt::Horizontal, Qt::ScrollBarAlwaysOff, Qt::ScrollBarAlwaysOff);
 
-    displayOptionsAndSearchLayout->addWidget(displayOptionsWidget);
-    displayOptionsAndSearchLayout->addWidget(searchBar);
-    displayOptionsAndSearchLayout->addWidget(searchPushButton);
+    // We split into two sub-widgets here so that the searchBar and button wrap together. At this point, we've done
+    // pretty much all we can and have reached our minimum size.
+    displayOptionsAndSearch->addWidget(displayOptionsWidget);
+    displayOptionsAndSearch->addWidget(searchContainer); // Expanding — fills remainder of its row
 }
 
 void VisualDeckEditorWidget::initializeScrollAreaAndZoneContainer()
@@ -205,7 +213,7 @@ void VisualDeckEditorWidget::connectDeckListModel()
 void VisualDeckEditorWidget::retranslateUi()
 {
     searchBar->setPlaceholderText(tr("Type a card name here for suggestions from the database..."));
-    searchPushButton->setText(tr("Quick search and add card"));
+    searchPushButton->setButtonText(tr("Quick search and add card"));
     searchPushButton->setToolTip(tr("Search for closest match in the database (with auto-suggestions) and add "
                                     "preferred printing to the deck on pressing enter"));
 
@@ -214,6 +222,44 @@ void VisualDeckEditorWidget::retranslateUi()
     }
 }
 
+void VisualDeckEditorWidget::resizeEvent(QResizeEvent *event)
+{
+    QWidget::resizeEvent(event);
+    updateCompactMode();
+}
+
+void VisualDeckEditorWidget::updateCompactMode()
+{
+    const int spacing = displayOptionsAndSearch->layout()->spacing();
+
+    const int available = displayOptionsAndSearch->width();
+
+    const int searchExpanded =
+        searchBar->sizeHint().width() + searchPushButton->expandedWidth() + searchLayout->spacing();
+
+    const int fullWidth = displayOptionsWidget->expandedWidth() + spacing + searchExpanded;
+
+    const int displayCompactWidth = displayOptionsWidget->compactWidth() + spacing + searchExpanded;
+
+    // everything expanded
+    if (available >= fullWidth) {
+        displayOptionsWidget->updateCompactMode(false);
+        searchPushButton->setCompact(false);
+        return;
+    }
+
+    // only display compact
+    if (available >= displayCompactWidth) {
+        displayOptionsWidget->updateCompactMode(true);
+        searchPushButton->setCompact(false);
+        return;
+    }
+
+    // both compact
+    displayOptionsWidget->updateCompactMode(true);
+    searchPushButton->setCompact(true);
+}
+
 void VisualDeckEditorWidget::updatePlaceholderVisibility()
 {
     if (placeholderWidget) {

cockatrice/src/interface/widgets/visual_deck_editor/visual_deck_editor_widget.h

@@ -11,6 +11,7 @@
 #include "../cards/card_size_widget.h"
 #include "../general/layout_containers/overlap_control_widget.h"
 #include "../quick_settings/settings_button_widget.h"
+#include "../utility/compact_push_button.h"
 #include "visual_deck_editor_placeholder_widget.h"
 
 #include <QCheckBox>
@@ -39,6 +40,7 @@ class VisualDeckEditorWidget : public QWidget
 public:
     explicit VisualDeckEditorWidget(QWidget *parent, DeckListModel *deckListModel, QItemSelectionModel *selectionModel);
     void retranslateUi();
+    void updateCompactMode();
     void clearAllDisplayWidgets();
 
     void setDeckList(const DeckList &_deckListModel);
@@ -82,19 +84,23 @@ protected slots:
     void onHover(const ExactCard &hoveredCard);
     void onCardClick(QMouseEvent *event, CardInfoPictureWithTextOverlayWidget *instance, QString zoneName);
     void decklistModelReset();
+    void resizeEvent(QResizeEvent *event) override;
 
 private:
+    int expandedWidthAll = -1;
+    int expandedWidthDisplayCompact = -1;
     DeckListModel *deckListModel;
     QItemSelectionModel *selectionModel;
     QVBoxLayout *mainLayout;
     CardDatabaseModel *cardDatabaseModel;
     CardDatabaseDisplayModel *cardDatabaseDisplayModel;
     CardCompleterProxyModel *proxyModel;
+    QWidget *searchContainer;
+    QHBoxLayout *searchLayout;
     QCompleter *completer;
-    QWidget *displayOptionsAndSearch;
-    QHBoxLayout *displayOptionsAndSearchLayout;
+    FlowWidget *displayOptionsAndSearch;
     VisualDeckDisplayOptionsWidget *displayOptionsWidget;
-    QPushButton *searchPushButton;
+    CompactPushButton *searchPushButton;
     QScrollArea *scrollArea;
     QWidget *zoneContainer;
     QVBoxLayout *zoneContainerLayout;