Merge pull request #1256 from heropj/ui/tr

Improved UI for Reading List Bar and Table of Contents

resources/css/style.css

@@ -344,16 +344,14 @@ QTabBar::scroller {
 }
 
 #categorySelector QScrollBar,
-#languageSelector QScrollBar,
-#readinglistbar QScrollBar {
+#languageSelector QScrollBar {
     width: 5px;
     border: none;
     outline: none;
 }
 
 #categorySelector QScrollBar::handle,
-#languageSelector QScrollBar::handle,
-#readinglistbar QScrollBar {
+#languageSelector QScrollBar::handle {
     background-color: grey;
 }
 
@@ -369,37 +367,6 @@ ContentTypeFilter {
     spacing: 10;
 }
 
-#readinglistbar QLabel {
-    font-size: 24px;
-    font-weight: bold;
-    padding: 5px;
-}
-
-#readinglistbar QListWidget {
-    show-decoration-selected: 0;
-    border: none;
-    padding: 5px;
-}
-
-#readinglistbar QListWidget::item {
-    font-size: 16px;
-    margin-bottom: 10px;
-}
-
-#readinglistbar QPushButton {
-    margin-left: 4px;
-}
-
-#readinglistbar QPushButton::hover {
-    border: 1px solid #3366CC;
-    background-color: #D9E9FF;
-    border-radius: 3px;
-}
-
-#readinglistbar QPushButton::menu-indicator {
-    width: 0;
-    height: 0;
-}
 
 #tableofcontentbar {
     background-color: white;
@@ -463,6 +430,70 @@ ContentTypeFilter {
     background-color: grey;
 }
 
+/*this selector worked after changing class ReadingListBar to a QFrame instead of QWidget in readinglistbar.h file*/
+#readinglistbar {
+    background-color: white;
+}
+
+#readinglistbar QPushButton::menu-indicator {
+    width: 0;
+    height: 0;
+}
+
+#readinglistbar QTreeWidget,
+#readinglistbar QLabel,
+#readinglistbar QFrame,
+#readinglistbar QListWidget,
+#readinglistbar QPushButton {
+    background-color: white;
+}
+
+#readinglistbar QPushButton{
+    margin: 13px 10px 10px;
+}
+
+#readinglistbar QListWidget {
+    outline: none;
+}
+
+#readinglistbar QListWidget::item,
+#readinglistbar QListWidget::item:selected{
+    height: 26px;
+    padding: 0px 10px;
+    outline: none;
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid transparent;
+    color: black;
+}
+
+#readinglistbar QListWidget::item:hover {
+    outline: none;
+    border-top: 1px solid #3366CC;
+    border-bottom: 1px solid #3366CC;
+    background-color: #D9E9FF;
+    color: black;
+}
+
+#readinglistbar #titleLabel {
+    padding: 0px;
+    margin: 10px;
+}
+
+#readinglistbar QScrollBar {
+    width: 5px;
+    border: none;
+    outline: none;
+}
+
+#readinglistbar QScrollBar::handle {
+    background-color: grey;
+}
+
+#readinglistbar QLabel#titleLabel {
+    font-family: "Selawik";
+    font-size: 24px;  /*equivalent to font-size 18*/
+    font-weight: 500; /*equivalent to font-weight medium*/
+}
 /* ----------------------------------------
     Text to Speech Page
 */

resources/i18n/en.json

@@ -34,8 +34,7 @@
     "table-of-content":"Table of content",
     "add-bookmark": "Add to the reading list",
     "remove-bookmark": "Remove from the reading list",
-    "reading-list":"Reading list",
-    "reading-list-title":"Reading List",
+    "reading-list":"Reading List",
     "zoom-in":"Zoom in",
     "zoom-out":"Zoom out",
     "zoom-reset":"Zoom reset",

resources/i18n/qqq.json

@@ -43,7 +43,6 @@
 	"add-bookmark": "Represents the action of adding a page as a bookmark",
 	"remove-bookmark": "Represents the action of removing a page from the bookmarks",
 	"reading-list": "Describes a list of bookmarked articles.",
-	"reading-list-title": "Describes a list of bookmarked articles.",
 	"zoom-in": "Represents the action of zooming into the article, making the article content appear larger.",
 	"zoom-out": "Represents the action of zooming out of the article, making the article content appear smaller.",
 	"zoom-reset": "Represents the action of resetting the article zoom, changing the article content size back to default",

src/readinglistbar.cpp

@@ -11,10 +11,12 @@
 const QString documentsDir = QStandardPaths::writableLocation(QStandardPaths::DocumentsLocation);
 
 ReadingListBar::ReadingListBar(QWidget *parent) :
-    QWidget(parent),
+    QFrame(parent),
     ui(new Ui::readinglistbar)
 {
     ui->setupUi(this);
+    ui->titleLabel->setText(gt("reading-list"));
+
     connect(KiwixApp::instance()->getLibrary(), &Library::bookmarksChanged,
             this, &ReadingListBar::setupList);
     connect(ui->listWidget, &QListWidget::itemClicked,
@@ -37,7 +39,6 @@ ReadingListBar::ReadingListBar(QWidget *parent) :
     auto importAction = app->getAction(KiwixApp::ImportReadingListAction);
     connect(exportAction, &QAction::triggered, this, &ReadingListBar::onExport);
     connect(importAction, &QAction::triggered, this, &ReadingListBar::onImport);
-    ui->label->setText(gt("reading-list-title"));
 
     QMenu *portMenu = new QMenu(this);
     portMenu->addAction(exportAction);

src/readinglistbar.h

@@ -8,7 +8,7 @@ namespace Ui {
 class readinglistbar;
 }
 
-class ReadingListBar : public QWidget
+class ReadingListBar : public QFrame
 {
     Q_OBJECT
 

src/readinglistbar.ui

@@ -14,6 +14,9 @@
    <string>Form</string>
   </property>
   <layout class="QVBoxLayout" name="verticalLayout">
+   <property name="spacing">
+     <number>0</number>
+   </property>
    <property name="leftMargin">
     <number>0</number>
    </property>
@@ -29,7 +32,7 @@
    <item>
     <layout class="QHBoxLayout" name="horizontalLayout">
      <item>
-      <widget class="QLabel" name="label">
+      <widget class="QLabel" name="titleLabel">
        <property name="font">
         <font>
          <pointsize>16</pointsize>
@@ -64,8 +67,8 @@
        </property>
        <property name="iconSize">
         <size>
-         <width>30</width>
-         <height>30</height>
+         <width>25</width>
+         <height>25</height>
         </size>
        </property>
        <property name="flat">
@@ -74,6 +77,13 @@
       </widget>
      </item>
     </layout>
+    </item>
+    <item>
+      <widget class="Line" name="line">
+      <property name="orientation">
+        <enum>Qt::Horizontal</enum>
+      </property>
+      </widget>
    </item>
    <item>
     <widget class="QListWidget" name="listWidget">
@@ -90,7 +100,7 @@
       <enum>QAbstractScrollArea::AdjustToContents</enum>
      </property>
      <property name="textElideMode">
-      <enum>Qt::ElideNone</enum>
+      <enum>Qt::ElideRight</enum>
      </property>
      <property name="isWrapping" stdset="0">
       <bool>false</bool>