Clean up GUI.

qml/ClideTreeView.qml

@@ -10,38 +10,30 @@ import clide.module 1.0
 import Logger 1.0
 
 TreeView {
-    id: fileSystemTreeView
+    id: root
 
     property int lastIndex: -1
     required property string originalRootDirectory
     property string rootDirectory
+    property int rootIndent: 25
 
     signal fileClicked(string filePath)
 
     boundsBehavior: Flickable.StopAtBounds
     boundsMovement: Flickable.StopAtBounds
     clip: true
-    leftMargin: 25
+
+    // The model is implemented in filesystem.rs
     model: FileSystem
-    rootIndex: FileSystem.setDirectory(fileSystemTreeView.rootDirectory)
+    // Set the root directory on the Rust model, returning the QModeIndex to use for the root of the tree view widget.
+    rootIndex: FileSystem.setDirectory(root.rootDirectory)
 
     // Provide our own custom ScrollIndicator for the TreeView.
-    ScrollIndicator.vertical: ScrollIndicator {
-        active: true
-        implicitWidth: 15
-
-        contentItem: Rectangle {
-            color: RustColors.scrollbar
-            implicitHeight: 6
-            implicitWidth: 6
-            opacity: fileSystemTreeView.movingVertically ? 0.5 : 0.0
-
-            Behavior on opacity {
-                OpacityAnimator {
-                    duration: 500
-                }
-            }
-        }
+    ScrollBar.horizontal: ClideScrollBar {
+        sizeModifier: 3
+    }
+    ScrollBar.vertical: ClideScrollBar {
+        sizeModifier: 3
     }
 
     // The delegate represents a single entry in the filesystem.
@@ -53,38 +45,40 @@ TreeView {
         required property int index
 
         implicitHeight: 25
-        implicitWidth: fileSystemTreeView.width > 0 ? fileSystemTreeView.width : 250
+        implicitWidth: root.width
         indentation: 12
 
         background: Rectangle {
             color: current ? RustColors.explorer_folder_open : "transparent"
-            radius: 2.5
+            radius: 20
+            width: root.width - 15
         }
+        // Item name.
         contentItem: Text {
-            anchors.left: directoryIcon.right
+            anchors.left: itemIcon.right
             anchors.leftMargin: 5
             color: RustColors.explorer_text
             text: treeDelegate.fileName
         }
+        // Item Icon.
         indicator: Label {
-            id: directoryIcon
+            id: itemIcon
 
             anchors.verticalCenter: parent.verticalCenter
             antialiasing: true
+            enabled: false
+            focus: false
             font.family: localFont.font.family
             font.pixelSize: 18
             smooth: true
-            text: fileSystemTreeView.model.icon(filePath)
-            x: treeDelegate.leftMargin + (treeDelegate.depth * treeDelegate.indentation) + (indicator.visible ? indicator.width : 0)
+            // Get the icon from Rust implementation.
+            text: root.model.icon(filePath)
+            x: root.rootIndent + (treeDelegate.depth * treeDelegate.indentation) + (carrotIndicator.visible ? carrotIndicator.width : 0)
         }
 
-        FontLoader {
-            id: localFont
-
-            source: "qrc:/fonts/saucecodepro-xlight.ttf"
-        }
+        // Directory carrot indicator.
         Label {
-            id: indicator
+            id: carrotIndicator
 
             anchors.verticalCenter: parent.verticalCenter
             font.family: localFont.font.family
@@ -92,12 +86,11 @@ TreeView {
             font.weight: localFont.font.weight
             text: expanded ? "⮟" : "⮞"
             visible: isTreeNode && hasChildren
-            x: padding + (depth * indentation)
+            x: (root.rootIndent - implicitWidth) + (depth * indentation)
         }
+        // Apply colorization effects to the icon for the item.
         MultiEffect {
-            id: iconOverlay
-
-            anchors.fill: directoryIcon
+            anchors.fill: itemIcon
             brightness: 1.0
             colorization: 1.0
             colorizationColor: {
@@ -110,7 +103,7 @@ TreeView {
                 else
                     return RustColors.explorer_folder;
             }
-            source: directoryIcon
+            source: itemIcon
         }
         HoverHandler {
             id: hoverHandler
@@ -124,10 +117,10 @@ TreeView {
                 switch (button) {
                 case Qt.LeftButton:
                     if (treeDelegate.hasChildren) {
-                        fileSystemTreeView.toggleExpanded(treeDelegate.row);
+                        root.toggleExpanded(treeDelegate.row);
                     } else {
                         // If this model item doesn't have children, it means it's representing a file.
-                        fileSystemTreeView.fileClicked(treeDelegate.filePath);
+                        root.fileClicked(treeDelegate.filePath);
                     }
                     break;
                 case Qt.RightButton:
@@ -146,7 +139,7 @@ TreeView {
 
                     onTriggered: {
                         Logger.debug("Setting new root directory: " + treeDelegate.filePath);
-                        fileSystemTreeView.rootDirectory = treeDelegate.filePath;
+                        root.rootDirectory = treeDelegate.filePath;
                     }
                 }
             }
@@ -155,8 +148,8 @@ TreeView {
                     text: qsTr("Reset root")
 
                     onTriggered: {
-                        Logger.log("Resetting root directory: " + fileSystemTreeView.originalRootDirectory);
-                        fileSystemTreeView.rootDirectory = fileSystemTreeView.originalRootDirectory;
+                        Logger.log("Resetting root directory: " + root.originalRootDirectory);
+                        root.rootDirectory = root.originalRootDirectory;
                     }
                 }
             }
@@ -164,4 +157,10 @@ TreeView {
     }
     selectionModel: ItemSelectionModel {
     }
+
+    FontLoader {
+        id: localFont
+
+        source: "qrc:/fonts/saucecodepro-xlight.ttf"
+    }
 }