improved ui of reading list and table of content

resources/css/style.css

@@ -122,7 +122,7 @@ ZimItemWidget QRadioButton::indicator:checked {
 }
 
 TopWidget QToolButton:pressed,
-TopWidget QToolButton::hover {
+TopWidget QToolButton:hover {
     border: 1px solid #3366CC;
     background-color: #D9E9FF;
     border-radius: 3px;
@@ -352,8 +352,7 @@ QTabBar::scroller {
 }
 
 #categorySelector QScrollBar::handle,
-#languageSelector QScrollBar::handle,
-#readinglistbar QScrollBar {
+#languageSelector QScrollBar::handle{
     background-color: grey;
 }
 
@@ -369,99 +368,101 @@ ContentTypeFilter {
     spacing: 10;
 }
 
-#readinglistbar QLabel {
+/* General Style Improvements */
+#readinglistbar, #tableofcontentbar {
+    /* background-color: #F9F9F9;  */
+    /* border: 1px solid #E0E0E0; */
+    border-radius: 8px;
+    padding: 8px;
+}
+
+/* Title Label Styling */
+#readinglistbar #titleLabel, #tableofcontentbar #titleLabel {
     font-size: 24px;
     font-weight: bold;
+    color: #333333;
+    margin: 10px;
     padding: 5px;
+    /* border-bottom: 1px solid #E0E0E0;  */
 }
 
-#readinglistbar QListWidget {
-    show-decoration-selected: 0;
+/* Common List Styling for QListWidget and QTreeWidget */
+#readinglistbar QListWidget, #tableofcontentbar QTreeWidget {
     border: none;
-    padding: 5px;
+    outline: none;
 }
 
-#readinglistbar QListWidget::item {
+/* List Items Default Style */
+#readinglistbar QListWidget::item, #tableofcontentbar QTreeWidget::item {
     font-size: 16px;
-    margin-bottom: 10px;
+    color: #333333; 
+    height: 32px;
+    padding: 5px 10px;
+    border-bottom: 1px solid #E0E0E0; 
 }
 
-#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;
+#readinglistbar QListWidget::item:hover, #tableofcontentbar QTreeWidget::item:hover {
+    background-color: #F1F8FF; 
+    color: #333333;
+    border: none;
 }
 
-#tableofcontentbar {
-    background-color: white;
+/* Scrollbar Styling */
+#readinglistbar QScrollBar, #tableofcontentbar QScrollBar {
+    width: 8px;
+    border: none;
 }
 
-#tableofcontentbar QTreeWidget,
-#tableofcontentbar QLabel,
-#tableofcontentbar QFrame {
-    background-color: white;
+#readinglistbar QScrollBar::handle, #tableofcontentbar QScrollBar::handle {
+    background-color: #CCCCCC; 
+    border-radius: 4px;
 }
 
-#tableofcontentbar QTreeWidget {
-    outline: none;
+#readinglistbar QScrollBar::handle:hover, #tableofcontentbar QScrollBar::handle:hover {
+    background-color: #999999; 
 }
 
-#tableofcontentbar QTreeWidget::item {
-    height: 26px;
-    padding: 0px 10px;
-    outline: none;
-    border-top: 1px solid transparent;
-    border-bottom: 1px solid transparent;
+/* Buttons Styling */
+#readinglistbar QPushButton, #tableofcontentbar QPushButton {
+    font-size: 14px;
+    padding: 5px;
+    margin-left: 4px;
+    background-color: #FFFFFF; 
+    color: #333333; 
+    border: 1px solid #CCCCCC;
+    border-radius: 4px;
 }
 
-#tableofcontentbar QTreeWidget::item:selected,
-#tableofcontentbar QTreeWidget::item:hover {
-    outline: none;
-    border-top: 1px solid #3366CC;
-    border-bottom: 1px solid #3366CC;
-    background-color: #D9E9FF;
-    color: black;
+#readinglistbar QPushButton:hover, #tableofcontentbar QPushButton:hover {
+    border: 1px solid #3366CC; 
+    background-color: #D9E9FF; 
 }
 
-#tableofcontentbar QTreeWidget::branch:selected,
-#tableofcontentbar QTreeWidget::branch:hover {
-    outline: none;
-    border-top: 1px solid #3366CC;
-    border-bottom: 1px solid #3366CC;
-    background-color: #D9E9FF;
+/* Hide Label Styling */
+#tableofcontentbar #hideLabel {
+    margin: 13px 10px 10px;
+    font-size: 14px;
+    color: #555555;
 }
-
 #tableofcontentbar QTreeWidget::branch {
     image: none;
+    width: 0px;
+    height: 0px;
 }
-
-#tableofcontentbar #titleLabel {
-    padding: 0px;
-    margin: 10px;
+#readinglistbar QPushButton::menu-indicator {
+    width: 0px;
+    height: 0px;
 }
 
-#tableofcontentbar #hideLabel {
-    margin: 13px 10px 10px; /* 3px to match bottom with titleLabel */ 
+/* To remove extra padding and margin*/
+#tableofcontentbar {
+    padding: 0px;
+    margin: 0px;
+
 }
 
-#tableofcontentbar QScrollBar {
-    width: 5px;
-    border: none;
-    outline: none;
-}
 
-#tableofcontentbar QScrollBar::handle {
-    background-color: grey;
-}
 
 /* ----------------------------------------
     Text to Speech Page

src/readinglistbar.cpp

@@ -15,15 +15,9 @@ ReadingListBar::ReadingListBar(QWidget *parent) :
     ui(new Ui::readinglistbar)
 {
     ui->setupUi(this);
-
-    // Set the font to match TableOfContentBar's font (Selawik with size 18 and 12)
-    ui->label->setFont(QFont("Selawik", 18, QFont::Weight::Medium));  // Title label font
-    ui->label->setText(gt("reading-list-title"));
-
-    ui->hideLabel->setFont(QFont("Selawik", 12));  // Hide label font (adjust this as needed)
-
-    // Setting the font for the listWidget items as well
-    ui->listWidget->setStyleSheet("QListWidget::item { font: 12pt 'Selawik'; }");
+
+    // ui->titleLabel->setFont(QFont("Selawik", 18, QFont::Weight::Medium));  // Title label font
+    ui->titleLabel->setText(gt("reading-list-title"));//reading-list-title
 
     // Connect actions to slots
     connect(KiwixApp::instance()->getLibrary(), &Library::bookmarksChanged,

src/readinglistbar.ui

@@ -29,10 +29,10 @@
    <item>
     <layout class="QHBoxLayout" name="horizontalLayout">
      <item>
-      <widget class="QLabel" name="label">
+      <widget class="QLabel" name="titleLabel">
        <property name="font">
         <font>
-         <pointsize>16</pointsize>
+         <pointsize>18</pointsize>
         </font>
        </property>
        <property name="text">
@@ -64,8 +64,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 +74,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">

src/tableofcontentbar.cpp

@@ -9,10 +9,8 @@ TableOfContentBar::TableOfContentBar(QWidget *parent) :
     ui(new Ui::tableofcontentbar)
 {
     ui->setupUi(this);
-    ui->titleLabel->setFont(QFont("Selawik", 18, QFont::Weight::Medium));
+    // ui->titleLabel->setFont(QFont("Selawik", 18 , QFont::Weight::Medium));
     ui->titleLabel->setText(gt("table-of-content"));
-    ui->hideLabel->setFont(QFont("Selawik", 12));
-    ui->hideLabel->setTextFormat(Qt::RichText);
 
     /* href is needed to make hide clickable, but not used. So Kiwix it is :) */
     ui->hideLabel->setText("<a href=\"https://kiwix.org/en/\">" + gt("hide") + "</a>");
@@ -94,7 +92,7 @@ void TableOfContentBar::setupTree(const QJsonObject& headers)
     if (headerUrl != currentUrl)
         return;
 
-    m_url = headerUrl;
+    m_url = headerUrl; 
     ui->tree->clear();
     QJsonArray headerArr = headers["headers"].toArray();
     createSubTree(ui->tree->invisibleRootItem(), "", headerArr);

src/tableofcontentbar.ui

@@ -7,7 +7,7 @@
     <x>0</x>
     <y>0</y>
     <width>400</width>
-    <height>300</height>
+    <height>300</height> 
    </rect>
   </property>
   <property name="sizePolicy">
@@ -16,6 +16,12 @@
     <verstretch>0</verstretch>
    </sizepolicy>
   </property>
+	<property name="minimumSize">
+        <size>
+            <width>0</width>
+            <height>0</height>
+        </size>
+    </property>
   <property name="windowTitle">
    <string>Form</string>
   </property>
@@ -41,11 +47,11 @@
       <widget class="QLabel" name="titleLabel">
        <property name="font">
         <font>
-         <pointsize>16</pointsize>
+         <pointsize>18</pointsize>
         </font>
        </property>
        <property name="text">
-        <string/>
+        <string>Table Of Contents</string>
        </property>
        <property name="indent">
         <number>0</number>
@@ -68,7 +74,7 @@
      <item>
       <widget class="QLabel" name="hideLabel">
        <property name="text">
-        <string/>
+        <string>hide</string>
        </property>
        <property name="indent">
         <number>0</number>
@@ -89,8 +95,8 @@
      <property name="frameShape">
       <enum>QFrame::NoFrame</enum>
      </property>
-     <property name="lineWidth">
-      <number>0</number>
+     <property name="lineWidth"> 
+      <number>0</number> 
      </property>
      <property name="horizontalScrollBarPolicy">
       <enum>Qt::ScrollBarAlwaysOff</enum>