From f389411f8732d5a1fa4330ef56a6d59293907005 Mon Sep 17 00:00:00 2001
From: ShaopengLin <shaopeng.lin@mail.utoronto.ca>
Date: Thu, 7 Nov 2024 02:34:29 -0500
Subject: [PATCH] Proper Styling to TOC

---
 resources/css/style.css  | 64 ++++++++++++++++++++++++++++++++++++++++
 src/tableofcontentbar.ui | 11 ++++++-
 2 files changed, 74 insertions(+), 1 deletion(-)

diff --git a/resources/css/style.css b/resources/css/style.css
index 1e56d27e..c0b10a68 100644
--- a/resources/css/style.css
+++ b/resources/css/style.css
@@ -401,6 +401,70 @@ ContentTypeFilter {
     height: 0;
 }
 
+#tableofcontentbar {
+    background-color: white;
+}
+
+#tableofcontentbar QTreeWidget,
+#tableofcontentbar QLabel,
+#tableofcontentbar QFrame {
+    background-color: white;
+}
+
+#tableofcontentbar QTreeWidget {
+    outline: none;
+}
+
 #tableofcontentbar QTreeWidget::item {
     height: 26px;
+    padding: 0px 10px;
+    outline: none;
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid transparent;
+}
+
+#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;
+}
+
+#tableofcontentbar QTreeWidget::branch:selected,
+#tableofcontentbar QTreeWidget::branch:hover {
+    outline: none;
+    border-top: 1px solid #3366CC;
+    border-bottom: 1px solid #3366CC;
+    background-color: #D9E9FF;
+}
+
+#tableofcontentbar QTreeWidget::branch:has-children:closed {
+    padding: 5px;  /* Can only change icon size with padding. */
+    image: url(:/icons/caret-up-solid.svg);
+}
+
+#tableofcontentbar QTreeWidget::branch:has-children {
+    padding: 5px; /* Can only change icon size with padding. */
+    image: url(:/icons/caret-down-solid.svg);
+}
+
+#tableofcontentbar #titleLabel {
+    padding: 0px;
+    margin: 10px;
+}
+
+#tableofcontentbar #hideLabel {
+    margin: 13px 10px 10px; /* 3px to match bottom with titleLabel */ 
+}
+
+#tableofcontentbar QScrollBar {
+    width: 5px;
+    border: none;
+    outline: none;
+}
+
+#tableofcontentbar QScrollBar::handle {
+    background-color: grey;
 }
diff --git a/src/tableofcontentbar.ui b/src/tableofcontentbar.ui
index 987a889c..8ebf8750 100644
--- a/src/tableofcontentbar.ui
+++ b/src/tableofcontentbar.ui
@@ -20,6 +20,9 @@
    <string>Form</string>
   </property>
   <layout class="QVBoxLayout" name="verticalLayout">
+   <property name="spacing">
+    <number>0</number>
+   </property>
    <property name="leftMargin">
     <number>0</number>
    </property>
@@ -44,6 +47,9 @@
        <property name="text">
         <string/>
        </property>
+       <property name="indent">
+        <number>0</number>
+       </property>
       </widget>
      </item>
      <item>
@@ -64,6 +70,9 @@
        <property name="text">
         <string/>
        </property>
+       <property name="indent">
+        <number>0</number>
+       </property>
       </widget>
      </item>
     </layout>
@@ -90,7 +99,7 @@
       <enum>QAbstractScrollArea::AdjustToContents</enum>
      </property>
      <property name="textElideMode">
-      <enum>Qt::ElideNone</enum>
+      <enum>Qt::ElideRight</enum>
      </property>
      <property name="indentation">
       <number>30</number>