fixup! UI to match mock

resources/css/popup.css

@@ -1,13 +1,15 @@
 QTreeView {
- border: none;
+ border: 1px solid #ccc;
  background-color: white;
  outline: 0px;
 }
 
 QTreeView::item {
  border: 1px solid transparent;
- padding-left: 5px;
- padding-right: 5px;
+ padding-left: 6px;
+ padding-right: 6px;
+ font-size: 15px;
+ line-height: 24px;
 }
 
 QTreeView::item:selected {
@@ -18,10 +20,15 @@ QTreeView::item:selected {
 
 QHeaderView::section {
  border: none;
- color: grey;
- padding: 10px;
- padding-bottom: 0px;
+ color: #3b3b3b;
+ padding-top: 15px;
+ padding-left: 10px;
+ padding-right: 10px;
+ padding-bottom: 5px;
  background-color: white;
+ font-size: 15px;
+ line-height: 24px;
+ font-weight: 400;
 }
 
 QScrollBar {

resources/css/style.css

@@ -87,24 +87,34 @@ MultiZimButton QListWidget {
  outline: 0px;
 }
 
-MultiZimButton QListWidget::item:selected {
- border: 1px solid #3366CC;
- background-color: #D9E9FF;
+MultiZimButton #zimItemWidget {
+ background-color: transparent;
 }
 
-MultiZimButton QRadioButton {
+#zimItemWidget #textLabel {
+ padding-left: 10px;
+ padding-right: 10px;
+}
+
+MultiZimButton QListWidget::item {
  background-color: white;
+ padding: 5px;
 }
 
-MultiZimButton QRadioButton:hover {
+MultiZimButton QListWidget::item:hover {
  border: 1px solid #3366CC;
  background-color: #D9E9FF;
 }
 
+MultiZimButton QRadioButton {
+ background-color: transparent;
+ outline: none;
+}
+
 /* update_display of src/searchbar.cpp references the width and height */
 MultiZimButton QRadioButton::indicator {
- width: 32px;
- height: 32px;
+ min-width: 24px;
+ min-height: 24px;
  image: none;
 }
 
@@ -123,6 +133,13 @@ MultiZimButton QScrollBar::handle {
  background-color: grey;
 }
 
+MultiZimButton QLabel {
+ background-color: transparent;
+ padding: 0px;
+ margin: 0px;
+
+}
+
 SearchBar > QToolButton:pressed,
 SearchBar > QToolButton:hover {
  border: 1px solid #3366CC;
@@ -133,24 +150,31 @@ SearchBar > QToolButton:hover {
 #selectAllButton {
  border: 1px solid transparent;
  background-color: white;
- font-size: 20px;
- font-weight: bold;
- padding: 3px;
+ font-size: 16px;
+ font-weight: 500;
+ padding-left: 10px;
+ padding-right: 10px;
 }
 
 #selectAllButton::indicator {
- width: 20px;
- height: 20px;
- border: 2px solid black;
- border-radius: 3px;
+ width: 24px;
+ height: 24px;
  image: none;
 }
 
+#selectAllButton::indicator:unchecked {
+ image: url(:/icons/checkbox.svg);
+}
+
 #selectAllButton::indicator:checked {
- image: url(:/icons/check-solid.svg);
+ image: url(:/icons/checkbox-active.svg);
 }
 
 #selectAllButton:disabled {
+ background-color: white;
+}
+
+#selectAllButton::indicator:disabled {
  background-color: #ccc;
 }
 

resources/i18n/en.json

@@ -167,7 +167,7 @@
  "disable-sandbox": "Application was launched from a network drive. This is known to cause compatibility issues due to the sandbox. Do you want to take the risks and disable it?",
  "save-page-as": "Save As...",
  "load-more": "Load More",
- "kiwix-search": "Kiwix Search",
+ "kiwix-search": "Kiwix search",
  "multi-zim-search": "Multi-Zim Search",
  "select-all": "Select all"
 }

src/searchbar.cpp

@@ -5,6 +5,7 @@
 #include <QStyledItemDelegate>
 #include <QWidgetAction>
 #include <QRadioButton>
+#include <QButtonGroup>
 
 #include "kiwixapp.h"
 #include "suggestionlistworker.h"
@@ -70,15 +71,15 @@ SearchBarLineEdit::SearchBarLineEdit(QWidget *parent) :
  m_completer.setPopup(treeView);
 
  /* QCompleter resets item delegates. Without reset css doesn't apply. */
- treeView->setItemDelegate(new QStyledItemDelegate);
+ treeView->setItemDelegate(new CustomStyledDelegate);
  treeView->header()->setStretchLastSection(true);
  treeView->setRootIsDecorated(false);
- treeView->setIconSize(QSize(32, 32));;
+ treeView->setIconSize(QSize(22, 22));;
  treeView->setStyleSheet(KiwixApp::instance()->parseStyleFromFile(":/css/popup.css"));
  connect(&m_suggestionModel, &QAbstractListModel::modelReset, [=](){
  /* +1 for header height */
  int count = std::min(m_suggestionModel.rowCount(), m_completer.maxVisibleItems());
- treeView->setMinimumHeight(42 * (count + 1));
+ treeView->setMinimumHeight(33 * (count + 1) + 2 + 5);
  });
 
  qRegisterMetaType<QVector<QUrl>>("QVector<QUrl>");
@@ -210,10 +211,13 @@ void SearchBarLineEdit::updateCompletion()
  x is flipped so it became -x in the sense of LTR, hence the
  adjustment of moving width + 2 * size.
  */
- int left = KiwixApp::isRightToLeft() ? -searchGeo.width() - (38 * 2)
- : -39; 
-
-
+#if QT_VERSION >= QT_VERSION_CHECK(6, 0, 0)
+ int left = KiwixApp::isRightToLeft() ? -searchGeo.width() - (38 * 2)
+ : -39;
+#else
+ int left = KiwixApp::isRightToLeft() ? - (38 * 2) - 12
+ : -39;
+#endif 
  /* Can't set height to 0. Will cause rectangle to be ignored. */
  m_completer.complete(QRect(QPoint(left, top), QSize(width, 1)));
  m_completer.popup()->selectionModel()->setCurrentIndex(
@@ -293,14 +297,14 @@ SearchBar::SearchBar(QWidget *parent) :
 }
 
 MultiZimButton::MultiZimButton(QWidget *parent)
- : QToolButton(parent), mp_buttonList(nullptr), mp_selectAllButton(nullptr)
+ : QToolButton(parent), mp_buttonList(nullptr), mp_selectAllButton(nullptr), mp_radioButtonGroup(nullptr)
 {
  setMenu(new QMenu(this));
  setPopupMode(QToolButton::InstantPopup);
  setIcon(QIcon(":/icons/filter.svg"));
  setToolTip(gt("multi-zim-search"));
 
- mp_buttonList = new QListWidget(this);
+ mp_buttonList = new MultiZimListWidget;
  mp_selectAllButton = new QCheckBox(gt("select-all"),this);
  auto popupAction = new QWidgetAction(menu());
 
@@ -314,20 +318,28 @@ MultiZimButton::MultiZimButton(QWidget *parent)
  menu()->addAction(popupAction);
  mp_buttonList->setSelectionMode(QAbstractItemView::SingleSelection);
  mp_buttonList->setFixedWidth(menu()->sizeHint().width());
- mp_buttonList->setMinimumHeight(42 * 7);
+ mp_buttonList->setMaximumHeight(33 * 7);
+ mp_buttonList->setSizeAdjustPolicy(QListWidget::AdjustToContents);
  mp_selectAllButton->setObjectName("selectAllButton");
- mp_selectAllButton->setFixedHeight(42);
+ mp_selectAllButton->setFixedHeight(33);
+ mp_selectAllButton->setLayoutDirection(KiwixApp::isRightToLeft() ? Qt::LayoutDirection::LeftToRight : Qt::LayoutDirection::RightToLeft);
 
  /* TODO: connect with list widget after multi-zim */
- mp_selectAllButton->setDisabled(true);
+ // mp_selectAllButton->setDisabled(true);
+
+ mp_radioButtonGroup = new QButtonGroup(this);
+
+ connect(mp_buttonList, &QListWidget::itemClicked, this, [=](QListWidgetItem* item){
+ mp_buttonList->itemWidget(item)->findChild<QRadioButton *>()->setChecked(true);
+ });
 }
 
 QString MultiZimButton::getZimId() const
 {
  for (int row = 0; row < mp_buttonList->model()->rowCount(); row++)
  {
  auto listItem = mp_buttonList->item(row);
- auto radioBt = qobject_cast<QRadioButton *>(mp_buttonList->itemWidget(listItem));
+ auto radioBt = mp_buttonList->itemWidget(listItem)->findChild<QRadioButton *>();
  if (radioBt && radioBt->isChecked())
  return listItem->data(Qt::UserRole).toString();
  }
@@ -358,12 +370,16 @@ QString elideDisplayText(const QString& text, const QFont& font, int width)
  int length = elidedText.size();
  elidedText = elidedText.isRightToLeft() ? elidedText.right(length - 5)
  : elidedText.chopped(5);
- return appendDisplayText(elidedText.trimmed(), "(...)");
+ return elidedText.trimmed() + "(...)";
 }
 
 void MultiZimButton::update_display()
 {
  mp_buttonList->clear();
+ for (auto button : mp_radioButtonGroup->buttons())
+ {
+ mp_radioButtonGroup->removeButton(button);
+ }
  auto library = KiwixApp::instance()->getLibrary();
  WebView* current = KiwixApp::instance()->getTabWidget()->currentWebView();
  for (const auto& bookId : library->getBookIds())
@@ -377,28 +393,52 @@ void MultiZimButton::update_display()
  bookTitle = QString::fromStdString(library->getBookById(bookId).getTitle());
  zimIcon = library->getZimIcon(bookId, QIcon(":/icons/placeholder-icon.png"));
 
- QRadioButton* radioBt = new QRadioButton;
  QListWidgetItem* item = new QListWidgetItem();
  item->setData(Qt::UserRole, bookId);
- item->setSizeHint(QSize(0, 42));
- radioBt->setIcon(zimIcon);
- radioBt->setIconSize(QSize(32, 32));
- radioBt->setFont(QFont("Selawik", 16));
+ item->setSizeHint(QSize(0, 33));
+ QWidget* zimItemWidget = new QWidget;
+ QRadioButton* radioBt = new QRadioButton(zimItemWidget);
+ mp_radioButtonGroup->addButton(radioBt);
+ zimItemWidget->setObjectName("zimItemWidget");
+ zimItemWidget->setLayout(new QHBoxLayout);
+ zimItemWidget->layout()->setSpacing(0);
+ QLabel* iconLabel = new QLabel(zimItemWidget);
+ iconLabel->setMinimumSize(QSize(22, 22));
+ iconLabel->setText("");
+ iconLabel->setPixmap(zimIcon.pixmap(QSize(22, 22)));
+ radioBt->setMinimumSize(QSize(24, 24));
+ radioBt->setMaximumSize(QSize(24, 24));
+ QLabel* textLabel = new QLabel(zimItemWidget);
+ textLabel->setObjectName("textLabel");
+ textLabel->setFixedHeight(22);
+ textLabel->setContentsMargins(0,0,0,0);
+ textLabel->setSizePolicy(QSizePolicy::MinimumExpanding, QSizePolicy::MinimumExpanding);
+ textLabel->setAlignment({Qt::AlignVCenter | (KiwixApp::isRightToLeft() == bookTitle.isRightToLeft() ? Qt::AlignLeft : Qt::AlignRight)});
+
+ zimItemWidget->layout()->addWidget(iconLabel);
+ zimItemWidget->layout()->addWidget(textLabel);
+ zimItemWidget->layout()->addWidget(radioBt);
+ // radioBt->setIcon(zimIcon);
+ // radioBt->setIconSize(QSize(32, 32));
+ // radioBt->setFont(QFont("Selawik", 16));
 
  /* See MultiZimButton::QRadioButton::indicator and
  MultiZimButton::QScrollBar size values in resources/css/style.css
  */
- int length = mp_buttonList->width() - 69;
+ int length = mp_buttonList->width() - 5 - 5 - 22 - 24 - 20;
  if (current && current->zimId() == bookId)
  {
  mp_buttonList->insertItem(0, item);
- bookTitle = prependDisplayText(bookTitle, "*");
+ bookTitle = "*" + bookTitle;
  }
  else
  mp_buttonList->addItem(item);
  bookTitle = elideDisplayText(bookTitle, radioBt->font(), length);
- radioBt->setText(bookTitle);
- mp_buttonList->setItemWidget(item, radioBt);
+ textLabel->setText(bookTitle);
+
+ zimItemWidget->layout()->setAlignment(Qt::AlignVCenter);
+ zimItemWidget->layout()->setContentsMargins(0,0,0,0);
+ mp_buttonList->setItemWidget(item, zimItemWidget);
  }
  catch(...)
  {
@@ -411,8 +451,12 @@ void MultiZimButton::update_display()
  else
  {
  auto firstWidget = mp_buttonList->itemWidget(mp_buttonList->item(0));
- qobject_cast<QRadioButton *>(firstWidget)->setChecked(true);
+ firstWidget->findChild<QRadioButton *>()->setChecked(true);
  mp_buttonList->scrollToTop();
  setDisabled(false);
  }
 }
+
+QSize MultiZimListWidget::sizeHint() const {
+ return QSize(0, count() * 33);
+}

src/searchbar.h

@@ -11,8 +11,8 @@
 #include <QThread>
 #include <QToolBar>
 #include "suggestionlistmodel.h"
+#include <QListWidget>
 
-class QListWidget;
 class QCheckBox;
 
 class BookmarkButton : public QToolButton {
@@ -67,9 +67,15 @@ public slots:
 private:
  QListWidget* mp_buttonList;
  QCheckBox* mp_selectAllButton;
+ QButtonGroup* mp_radioButtonGroup;
  QString m_zimId;
 };
 
+class MultiZimListWidget : public QListWidget {
+protected:
+ QSize sizeHint() const;
+};
+
 class SearchBar : public QToolBar {
  Q_OBJECT
 public: