Improved filters panel

kiwix-desktop.pro

@@ -34,13 +34,18 @@ DEFINES += QT_DEPRECATED_WARNINGS
 
 
 SOURCES += \
+    src/choiceitem.cpp \
     src/contentmanagerdelegate.cpp \
     src/contentmanagerheader.cpp \
     src/contentmanagermodel.cpp \
     src/contenttypefilter.cpp \
     src/descriptionnode.cpp \
     src/findinpagebar.cpp \
+    src/flowlayout.cpp \
+    src/kiwixchoicebox.cpp \
     src/kiwixconfirmbox.cpp \
+    src/kiwixlineedit.cpp \
+    src/kiwixlistwidget.cpp \
     src/kiwixloader.cpp \
     src/rownode.cpp \
     src/suggestionlistworker.cpp \
@@ -74,14 +79,19 @@ SOURCES += \
     src/zimview.cpp \
 
 HEADERS += \
+    src/choiceitem.h \
     src/contentmanagerdelegate.h \
     src/contentmanagerheader.h \
     src/contentmanagermodel.h \
     src/contentmanagerview.h \
     src/contenttypefilter.h \
     src/descriptionnode.h \
     src/findinpagebar.h \
+    src/flowlayout.h \
+    src/kiwixchoicebox.h \
     src/kiwixconfirmbox.h \
+    src/kiwixlineedit.h \
+    src/kiwixlistwidget.h \
     src/kiwixloader.h \
     src/node.h \
     src/rownode.h \
@@ -116,8 +126,10 @@ HEADERS += \
     src/zimview.h \
 
 FORMS += \
+    src/choiceitem.ui \
     src/contentmanagerview.ui \
     src/findinpagebar.ui \
+    ui/kiwixchoicebox.ui \
     ui/kiwixconfirmbox.ui \
     ui/mainwindow.ui \
     ui/about.ui \

resources/css/_contentManager.css

@@ -1,3 +1,7 @@
+#contentmanagerside {
+    background-color: red;
+}
+
 QTreeView::branch:open:has-children {
     image: url(:/icons/caret-down-solid.svg);
     padding: 6px;
@@ -64,14 +68,3 @@ QMenu::item {
 QMenu::item:selected {
     background-color: #cccccc;
 }
-
-QLineEdit {
-    font-family: 'Selawik';
-    padding: 4px;
-    border: none;
-    border-bottom: 1px solid #cccccc;
-    color: #666666;
-    font-size: 16px;
-    height: 32px;
-    line-height: 24px;
-}

resources/css/choiceBox.css

@@ -0,0 +1,71 @@
+QListWidget::item {
+    padding: 0;
+    padding-top: 6px;
+    padding-bottom: 6px;
+    padding-left: 2px;
+}
+
+QListWidget {
+    padding: 0;
+    border: 1px solid #ccc;
+}
+
+QListWidget::item::selected {
+    color: #444444;
+    background-color: transparent;
+}
+
+QLineEdit {
+    padding: 4px;
+    border: 0;
+}
+
+#choiceLabel {
+    font-size: 16px;
+}
+
+#currentChoices {
+    margin: 0;
+    padding: 0;
+    border: 1px solid #ccc;
+    border-radius: 1px;
+}
+
+#closeButton {
+    margin: 0;
+    background: transparent;
+    color: #eaecf0;
+    font-size: 12px;
+}
+
+ChoiceItem > QFrame {
+    border: 1px solid #ccc;
+    border-radius: 2px;
+    padding: 0;
+    background-color: #666;
+    padding-left: 2px;
+    padding-right: 2px;
+    margin:0;
+}
+
+#itemLabel {
+    margin: 0;
+    height: 6px;
+    background-color: #666;
+    color: #eaecf0;
+    font-size: 13px;
+}
+
+#clearButton {
+    background-color: white;
+    color: #3366cc;
+    padding: 4px;
+    font: bold;
+    font-size: 14px;
+    border-radius: 4px;
+}
+
+#clearButton:hover {
+    background-color: #3366cc;
+    color: white;
+}

resources/css/contentmanagerside.css

@@ -0,0 +1,23 @@
+#searcher {
+    font-family: 'Selawik';
+    padding: 4px;
+    border: none;
+    border-bottom: 1px solid #cccccc;
+    color: #666666;
+    font-size: 16px;
+    height: 32px;
+    line-height: 24px;
+}
+
+QScrollArea {
+    border: 0;
+}
+
+#allFileButton, #localFileButton, #contentTypeButton {
+    padding-left: 2px;
+}
+
+#allFileButton::indicator, #localFileButton::indicator, #contentTypeButton::indicator {
+    height: 0;
+    width: 0;
+}

resources/i18n/en.json

@@ -90,8 +90,8 @@
     "fullscreen-notification":"You are now in full screen mode. Press ESC to quit!",
     "online-files":"Online Files",
     "local-files":"Local Files",
-    "browse-by-category":"Browse By Category",
-    "browse-by-language":"Browse By Language",
+    "category":"Category",
+    "language":"Language",
     "hide":"Hide",
     "open-in-browser":"Open in browser",
     "start-kiwix-server":"Start Kiwix Server",
@@ -154,5 +154,12 @@
     "couldnt-open-location-text": "Kiwix is not able to open folder {{FOLDER}}",
     "move-files-to-trash": "Move deleted files to trash",
     "move-files-to-trash-text": "This action will move the file to trash.",
-    "perma-delete-files-text": "This action will permanently delete the file."
+    "perma-delete-files-text": "This action will permanently delete the file.",
+    "clear-filter": "Clear the currently set filters",
+    "language-searcher-placeholder": "Filter language",
+    "category-searcher-placeholder": "Filter category",
+    "content-type-searcher-placeholder": "Filter content type",
+    "no-details": "Introduction only",
+    "no-pictures": "No Pictures",
+    "no-videos": "No Videos"
 }

resources/kiwix.qrc

@@ -61,5 +61,6 @@
         <file>icons/caret-up-solid.svg</file>
         <file>icons/kiwix-logo.svg</file>
         <file>icons/check-solid.svg</file>
+        <file>icons/xmark-solid.svg</file>
     </qresource>
 </RCC>

resources/style.qrc

@@ -4,5 +4,7 @@
         <file>css/popup.css</file>
         <file>css/localServer.css</file>
         <file>css/confirmBox.css</file>
+        <file>css/contentmanagerside.css</file>
+        <file>css/choiceBox.css</file>
     </qresource>
 </RCC>

src/choiceitem.cpp

@@ -0,0 +1,32 @@
+#include "choiceitem.h"
+#include "ui_choiceitem.h"
+#include <QFile>
+#include <QMouseEvent>
+#include "kiwixapp.h"
+
+ChoiceItem::ChoiceItem(QString key, QString value, QWidget *parent) :
+    QWidget(parent),
+    ui(new Ui::ChoiceItem),
+    m_key(key),
+    m_value(value)
+{
+    ui->setupUi(this);
+    this->setStyleSheet(KiwixApp::instance()->parseStyleFromFile(":/css/choiceBox.css"));
+    ui->itemLabel->setText(key);
+    ui->itemLabel->setToolTip(key);
+    connect(ui->closeButton, &QPushButton::clicked, [=](){
+       emit(closeButtonClicked(ui->itemLabel->text()));
+    });
+    ui->closeButton->setCursor(Qt::PointingHandCursor);
+}
+
+ChoiceItem::~ChoiceItem()
+{
+    delete ui;
+}
+
+void ChoiceItem::mousePressEvent(QMouseEvent *event)
+{
+    Q_UNUSED(event);
+    return;
+}

src/choiceitem.h

@@ -0,0 +1,32 @@
+#ifndef CHOICEITEM_H
+#define CHOICEITEM_H
+
+#include <QWidget>
+
+namespace Ui {
+class ChoiceItem;
+}
+
+class ChoiceItem : public QWidget
+{
+    Q_OBJECT
+
+public:
+    explicit ChoiceItem(QString key, QString value, QWidget *parent = nullptr);
+    ~ChoiceItem();
+    QString getKey() { return m_key; }
+    QString getValue() { return m_value; }
+
+protected:
+    void mousePressEvent(QMouseEvent *event) override;
+
+private:
+    Ui::ChoiceItem *ui;
+    QString m_key;
+    QString m_value;
+
+signals:
+    void closeButtonClicked(QString);
+};
+
+#endif // CHOICEITEM_H