Clean up GUI.
This commit is contained in:
3
build.rs
3
build.rs
@@ -5,7 +5,8 @@ fn main() {
|
|||||||
"qml/main.qml",
|
"qml/main.qml",
|
||||||
"qml/ClideAboutWindow.qml",
|
"qml/ClideAboutWindow.qml",
|
||||||
"qml/ClideTreeView.qml",
|
"qml/ClideTreeView.qml",
|
||||||
"qml/ClideProjectView.qml",
|
"qml/ClideApplicationView.qml",
|
||||||
|
"qml/ClideExplorerView.qml",
|
||||||
"qml/ClideEditor.qml",
|
"qml/ClideEditor.qml",
|
||||||
"qml/ClideEditorView.qml",
|
"qml/ClideEditorView.qml",
|
||||||
"qml/ClideMenuBar.qml",
|
"qml/ClideMenuBar.qml",
|
||||||
|
|||||||
46
qml/ClideApplicationView.qml
Normal file
46
qml/ClideApplicationView.qml
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
// SPDX-FileCopyrightText: 2026, Shaun Reed <shaunrd0@gmail.com>
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: GNU General Public License v3.0 or later
|
||||||
|
|
||||||
|
import QtQuick
|
||||||
|
import QtQuick.Controls
|
||||||
|
import QtQuick.Layouts
|
||||||
|
|
||||||
|
import clide.module 1.0
|
||||||
|
import Logger 1.0
|
||||||
|
|
||||||
|
SplitView {
|
||||||
|
id: root
|
||||||
|
|
||||||
|
// Path to the directory of the project opened in clide.
|
||||||
|
required property string projectDir
|
||||||
|
|
||||||
|
anchors.fill: parent
|
||||||
|
|
||||||
|
// Customized handle to drag between the Navigation and the Editor.
|
||||||
|
handle: ClideHandle {
|
||||||
|
hovered: SplitHandle.hovered
|
||||||
|
pressed: SplitHandle.pressed
|
||||||
|
}
|
||||||
|
|
||||||
|
ClideExplorerView {
|
||||||
|
SplitView.fillHeight: true
|
||||||
|
SplitView.preferredWidth: 200
|
||||||
|
projectDir: root.projectDir
|
||||||
|
|
||||||
|
// Open files when clicked in the explorer.
|
||||||
|
onFileClicked: path => {
|
||||||
|
Logger.trace("Setting editor path from ClideExplorerView signal: " + path)
|
||||||
|
clideEditorView.filePath = path;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ClideEditorView {
|
||||||
|
id: clideEditorView
|
||||||
|
|
||||||
|
SplitView.fillHeight: true
|
||||||
|
SplitView.fillWidth: true
|
||||||
|
// Provide a path to the file currently open in the text editor.
|
||||||
|
// Initialized using the Default trait in Rust QML singleton FileSystem.
|
||||||
|
filePath: FileSystem.filePath
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -9,128 +9,130 @@ import QtQuick.Layouts
|
|||||||
import clide.module 1.0
|
import clide.module 1.0
|
||||||
import Logger 1.0
|
import Logger 1.0
|
||||||
|
|
||||||
RowLayout {
|
Rectangle {
|
||||||
// We use a flickable to synchronize the position of the editor and
|
color: "transparent"
|
||||||
// the line numbers. This is necessary because the line numbers can
|
|
||||||
// extend the available height.
|
|
||||||
Flickable {
|
|
||||||
id: lineNumbers
|
|
||||||
|
|
||||||
Layout.fillHeight: true
|
RowLayout {
|
||||||
Layout.fillWidth: false
|
anchors.fill: parent
|
||||||
// Calculating the width correctly is important as the number grows.
|
|
||||||
// We need to ensure space required to show N line number digits.
|
|
||||||
// We use log10 to find how many digits are needed in a line number.
|
|
||||||
// log10(9) ~= .95; log10(10) = 1.0; log10(100) = 2.0 ...etc
|
|
||||||
// We +1 to ensure space for at least 1 digit, as floor(1.95) = 1.
|
|
||||||
// The +10 is additional spacing and can be adjusted.
|
|
||||||
Layout.preferredWidth: fontMetrics.averageCharacterWidth * (Math.floor(Math.log10(textArea.lineCount)) + 1) + 10
|
|
||||||
contentY: editorFlickable.contentY
|
|
||||||
interactive: false
|
|
||||||
|
|
||||||
Column {
|
// We use a flickable to synchronize the position of the editor and
|
||||||
anchors.fill: parent
|
// the line numbers. This is necessary because the line numbers can
|
||||||
topPadding: textArea.topPadding
|
// extend the available height.
|
||||||
|
Flickable {
|
||||||
|
id: lineNumbers
|
||||||
|
|
||||||
Repeater {
|
Layout.fillHeight: true
|
||||||
id: repeatedLineNumbers
|
Layout.fillWidth: false
|
||||||
|
// Calculating the width correctly is important as the number grows.
|
||||||
|
// We need to ensure space required to show N line number digits.
|
||||||
|
// We use log10 to find how many digits are needed in a line number.
|
||||||
|
// log10(9) ~= .95; log10(10) = 1.0; log10(100) = 2.0 ...etc
|
||||||
|
// We +1 to ensure space for at least 1 digit, as floor(1.95) = 1.
|
||||||
|
// The +10 is additional spacing and can be adjusted.
|
||||||
|
Layout.preferredWidth: fontMetrics.averageCharacterWidth * (Math.floor(Math.log10(textArea.lineCount)) + 1) + 10
|
||||||
|
contentY: editorFlickable.contentY
|
||||||
|
interactive: false
|
||||||
|
|
||||||
// TODO: Bug where text wrapping shows as new line number.
|
Column {
|
||||||
model: textArea.lineCount
|
anchors.fill: parent
|
||||||
|
topPadding: textArea.topPadding
|
||||||
|
|
||||||
// This Item is used for each line number in the gutter.
|
Repeater {
|
||||||
delegate: Item {
|
id: repeatedLineNumbers
|
||||||
required property int index
|
|
||||||
|
|
||||||
// Calculates the height of each line in the text area.
|
// TODO: Bug where text wrapping shows as new line number.
|
||||||
height: textArea.contentHeight / textArea.lineCount
|
model: textArea.lineCount
|
||||||
width: parent.width
|
|
||||||
|
|
||||||
// Show the line number.
|
// This Item is used for each line number in the gutter.
|
||||||
Label {
|
delegate: Item {
|
||||||
id: numbers
|
required property int index
|
||||||
|
|
||||||
color: RustColors.linenumber
|
// Calculates the height of each line in the text area.
|
||||||
font: textArea.font
|
height: textArea.contentHeight / textArea.lineCount
|
||||||
height: parent.height
|
width: parent.width
|
||||||
horizontalAlignment: Text.AlignLeft
|
|
||||||
text: parent.index + 1
|
|
||||||
verticalAlignment: Text.AlignVCenter
|
|
||||||
width: parent.width - indicator.width
|
|
||||||
|
|
||||||
background: Rectangle {
|
// Show the line number.
|
||||||
color: RustColors.terminal_background
|
Label {
|
||||||
|
id: numbers
|
||||||
|
|
||||||
|
color: RustColors.linenumber
|
||||||
|
font: textArea.font
|
||||||
|
height: parent.height
|
||||||
|
horizontalAlignment: Text.AlignLeft
|
||||||
|
text: parent.index + 1
|
||||||
|
verticalAlignment: Text.AlignVCenter
|
||||||
|
width: parent.width - indicator.width
|
||||||
}
|
}
|
||||||
}
|
// Draw an edge along the right side of the line number.
|
||||||
// Draw edge along the right side of the line number.
|
Rectangle {
|
||||||
Rectangle {
|
id: indicator
|
||||||
id: indicator
|
|
||||||
|
|
||||||
anchors.left: numbers.right
|
anchors.left: numbers.right
|
||||||
color: RustColors.linenumber
|
color: RustColors.linenumber
|
||||||
height: parent.height
|
height: parent.height
|
||||||
width: 1
|
width: 1
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
Flickable {
|
||||||
Flickable {
|
id: editorFlickable
|
||||||
id: editorFlickable
|
|
||||||
|
|
||||||
Layout.fillHeight: true
|
Layout.fillHeight: true
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
boundsBehavior: Flickable.StopAtBounds
|
boundsBehavior: Flickable.StopAtBounds
|
||||||
height: 650
|
height: 650
|
||||||
|
|
||||||
ScrollBar.horizontal: ClideScrollBar {
|
ScrollBar.horizontal: ClideScrollBar {
|
||||||
}
|
}
|
||||||
ScrollBar.vertical: ClideScrollBar {
|
ScrollBar.vertical: ClideScrollBar {
|
||||||
}
|
}
|
||||||
TextArea.flickable: TextArea {
|
TextArea.flickable: TextArea {
|
||||||
id: textArea
|
id: textArea
|
||||||
|
|
||||||
antialiasing: true
|
antialiasing: true
|
||||||
focus: true
|
focus: true
|
||||||
persistentSelection: true
|
persistentSelection: true
|
||||||
selectByMouse: true
|
selectByMouse: true
|
||||||
selectedTextColor: RustColors.editor_highlighted_text
|
selectedTextColor: RustColors.editor_highlighted_text
|
||||||
selectionColor: RustColors.editor_highlight
|
selectionColor: RustColors.editor_highlight
|
||||||
text: FileSystem.readFile(root.filePath)
|
text: FileSystem.readFile(root.filePath)
|
||||||
textFormat: Qt.AutoText
|
textFormat: Qt.AutoText
|
||||||
wrapMode: TextArea.Wrap
|
wrapMode: TextArea.Wrap
|
||||||
|
|
||||||
onLinkActivated: function (link) {
|
onLinkActivated: function (link) {
|
||||||
Qt.openUrlExternally(link);
|
Qt.openUrlExternally(link);
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO: Handle saving
|
||||||
|
// Component.onCompleted: {
|
||||||
|
// if (Qt.application.arguments.length === 2)
|
||||||
|
// textDocument.source = "file:" + Qt.application.arguments[1]
|
||||||
|
// else
|
||||||
|
// textDocument.source = "qrc:/texteditor.html"
|
||||||
|
// }
|
||||||
|
// textDocument.onStatusChanged: {
|
||||||
|
// // a message lookup table using computed properties:
|
||||||
|
// // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer
|
||||||
|
// const statusMessages = {
|
||||||
|
// [ TextDocument.ReadError ]: qsTr("Failed to load “%1”"),
|
||||||
|
// [ TextDocument.WriteError ]: qsTr("Failed to save “%1”"),
|
||||||
|
// [ TextDocument.NonLocalFileError ]: qsTr("Not a local file: “%1”"),
|
||||||
|
// }
|
||||||
|
// const err = statusMessages[textDocument.status]
|
||||||
|
// if (err) {
|
||||||
|
// errorDialog.text = err.arg(textDocument.source)
|
||||||
|
// errorDialog.open()
|
||||||
|
// }
|
||||||
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
// TODO: Handle saving
|
FontMetrics {
|
||||||
// Component.onCompleted: {
|
id: fontMetrics
|
||||||
// if (Qt.application.arguments.length === 2)
|
|
||||||
// textDocument.source = "file:" + Qt.application.arguments[1]
|
|
||||||
// else
|
|
||||||
// textDocument.source = "qrc:/texteditor.html"
|
|
||||||
// }
|
|
||||||
// textDocument.onStatusChanged: {
|
|
||||||
// // a message lookup table using computed properties:
|
|
||||||
// // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer
|
|
||||||
// const statusMessages = {
|
|
||||||
// [ TextDocument.ReadError ]: qsTr("Failed to load “%1”"),
|
|
||||||
// [ TextDocument.WriteError ]: qsTr("Failed to save “%1”"),
|
|
||||||
// [ TextDocument.NonLocalFileError ]: qsTr("Not a local file: “%1”"),
|
|
||||||
// }
|
|
||||||
// const err = statusMessages[textDocument.status]
|
|
||||||
// if (err) {
|
|
||||||
// errorDialog.text = err.arg(textDocument.source)
|
|
||||||
// errorDialog.open()
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
|
|
||||||
FontMetrics {
|
font: textArea.font
|
||||||
id: fontMetrics
|
}
|
||||||
|
|
||||||
font: textArea.font
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -9,38 +9,40 @@ import QtQuick.Layouts
|
|||||||
import clide.module 1.0
|
import clide.module 1.0
|
||||||
import Logger 1.0
|
import Logger 1.0
|
||||||
|
|
||||||
SplitView {
|
Rectangle {
|
||||||
id: root
|
id: root
|
||||||
|
|
||||||
// The path to the file to show in the text editor.
|
// The path to the file to show in the text editor.
|
||||||
// This is updated by a signal caught within ClideProjectView.
|
// This is updated by a signal caught within ClideApplicationView.
|
||||||
// Initialized by the Default trait for the Rust QML singleton FileSystem.
|
|
||||||
required property string filePath
|
required property string filePath
|
||||||
|
|
||||||
Layout.fillHeight: true
|
clip: true
|
||||||
Layout.fillWidth: true
|
color: "transparent"
|
||||||
orientation: Qt.Vertical
|
radius: 20
|
||||||
|
|
||||||
// Customized handle to drag between the Editor and the Console.
|
SplitView {
|
||||||
handle: ClideHandle {
|
anchors.fill: parent
|
||||||
pressed: SplitHandle.pressed
|
orientation: Qt.Vertical
|
||||||
hovered: SplitHandle.hovered
|
|
||||||
}
|
|
||||||
|
|
||||||
Component.onCompleted: {
|
// Customized handle to drag between the Editor and the Console.
|
||||||
// Show logging is working.
|
handle: ClideHandle {
|
||||||
Logger.info("Info logs");
|
hovered: SplitHandle.hovered
|
||||||
Logger.warn("Warning logs");
|
pressed: SplitHandle.pressed
|
||||||
Logger.debug("Debug logs");
|
}
|
||||||
Logger.error("Error logs");
|
|
||||||
Logger.trace("Trace logs");
|
|
||||||
}
|
|
||||||
|
|
||||||
ClideEditor{
|
Component.onCompleted: {
|
||||||
id: clideEditor
|
// Show logging is working.
|
||||||
}
|
Logger.info("Info logs");
|
||||||
ClideLogger {
|
Logger.warn("Warning logs");
|
||||||
id: areaConsole
|
Logger.debug("Debug logs");
|
||||||
|
Logger.error("Error logs");
|
||||||
|
Logger.trace("Trace logs");
|
||||||
|
}
|
||||||
|
|
||||||
|
ClideEditor {
|
||||||
|
SplitView.preferredHeight: 650
|
||||||
|
}
|
||||||
|
ClideLogger {
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
62
qml/ClideExplorerView.qml
Normal file
62
qml/ClideExplorerView.qml
Normal file
@@ -0,0 +1,62 @@
|
|||||||
|
// SPDX-FileCopyrightText: 2026, Shaun Reed <shaunrd0@gmail.com>
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: GNU General Public License v3.0 or later
|
||||||
|
|
||||||
|
import QtQuick
|
||||||
|
import QtQuick.Controls
|
||||||
|
import QtQuick.Layouts
|
||||||
|
|
||||||
|
import clide.module 1.0
|
||||||
|
import Logger 1.0
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
id: root
|
||||||
|
|
||||||
|
required property string projectDir
|
||||||
|
|
||||||
|
clip: true
|
||||||
|
color: RustColors.explorer_background
|
||||||
|
radius: 20
|
||||||
|
|
||||||
|
signal fileClicked(string path)
|
||||||
|
|
||||||
|
ColumnLayout {
|
||||||
|
anchors.fill: parent
|
||||||
|
spacing: 5
|
||||||
|
|
||||||
|
ClideBreadCrumbs {
|
||||||
|
id: breadCrumb
|
||||||
|
|
||||||
|
Layout.fillWidth: true
|
||||||
|
Layout.leftMargin: 15
|
||||||
|
Layout.rightMargin: 15
|
||||||
|
Layout.topMargin: 10
|
||||||
|
path: clideTreeView.rootDirectory
|
||||||
|
|
||||||
|
onCrumbClicked: path => {
|
||||||
|
Logger.trace("Crumb clicked: " + path);
|
||||||
|
clideTreeView.rootDirectory = path;
|
||||||
|
}
|
||||||
|
onResetRoot: {
|
||||||
|
clideTreeView.rootDirectory = clideTreeView.originalRootDirectory;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ClideTreeView {
|
||||||
|
id: clideTreeView
|
||||||
|
|
||||||
|
Layout.fillHeight: true
|
||||||
|
Layout.fillWidth: true
|
||||||
|
|
||||||
|
// Path to the directory opened in the file explorer.
|
||||||
|
originalRootDirectory: root.projectDir
|
||||||
|
rootDirectory: root.projectDir
|
||||||
|
|
||||||
|
// Pass the signal to the parent component using another signal.
|
||||||
|
onFileClicked: path => root.fileClicked(path)
|
||||||
|
onRootDirectoryChanged: {
|
||||||
|
Logger.log("Setting root directory: " + clideTreeView.rootDirectory);
|
||||||
|
breadCrumb.path = clideTreeView.rootDirectory;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -8,14 +8,12 @@ import QtQuick.Controls
|
|||||||
import clide.module 1.0
|
import clide.module 1.0
|
||||||
import Logger 1.0
|
import Logger 1.0
|
||||||
|
|
||||||
Item {
|
Rectangle {
|
||||||
|
color: "#111"
|
||||||
|
radius: 10
|
||||||
|
|
||||||
ListModel {
|
ListModel {
|
||||||
id: model
|
id: model
|
||||||
|
|
||||||
}
|
|
||||||
Rectangle {
|
|
||||||
anchors.fill: parent
|
|
||||||
color: "#111"
|
|
||||||
}
|
}
|
||||||
ListView {
|
ListView {
|
||||||
id: listView
|
id: listView
|
||||||
@@ -38,7 +36,6 @@ Item {
|
|||||||
}
|
}
|
||||||
|
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
clip: true
|
|
||||||
model: model
|
model: model
|
||||||
|
|
||||||
delegate: Text {
|
delegate: Text {
|
||||||
|
|||||||
@@ -1,81 +0,0 @@
|
|||||||
// SPDX-FileCopyrightText: 2026, Shaun Reed <shaunrd0@gmail.com>
|
|
||||||
//
|
|
||||||
// SPDX-License-Identifier: GNU General Public License v3.0 or later
|
|
||||||
|
|
||||||
import QtQuick
|
|
||||||
import QtQuick.Controls
|
|
||||||
import QtQuick.Layouts
|
|
||||||
|
|
||||||
import clide.module 1.0
|
|
||||||
import Logger 1.0
|
|
||||||
|
|
||||||
SplitView {
|
|
||||||
id: root
|
|
||||||
|
|
||||||
// Path to the directory of the project opened in clide.
|
|
||||||
required property string projectDir
|
|
||||||
|
|
||||||
anchors.fill: parent
|
|
||||||
|
|
||||||
// Customized handle to drag between the Navigation and the Editor.
|
|
||||||
handle: ClideHandle {
|
|
||||||
id: verticalSplitHandle
|
|
||||||
|
|
||||||
hovered: SplitHandle.hovered
|
|
||||||
pressed: SplitHandle.pressed
|
|
||||||
}
|
|
||||||
|
|
||||||
Rectangle {
|
|
||||||
id: navigationView
|
|
||||||
|
|
||||||
SplitView.fillHeight: true
|
|
||||||
SplitView.maximumWidth: 250
|
|
||||||
SplitView.minimumWidth: 0
|
|
||||||
SplitView.preferredWidth: 200
|
|
||||||
color: RustColors.explorer_background
|
|
||||||
radius: 20
|
|
||||||
|
|
||||||
ColumnLayout {
|
|
||||||
spacing: 2
|
|
||||||
|
|
||||||
ClideBreadCrumbs {
|
|
||||||
id: breadCrumb
|
|
||||||
|
|
||||||
Layout.bottomMargin: 5
|
|
||||||
Layout.leftMargin: 15
|
|
||||||
Layout.topMargin: 5
|
|
||||||
path: clideTreeView.rootDirectory
|
|
||||||
|
|
||||||
onCrumbClicked: path => {
|
|
||||||
Logger.trace("Crumb clicked: " + path);
|
|
||||||
clideTreeView.rootDirectory = path;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
ClideTreeView {
|
|
||||||
id: clideTreeView
|
|
||||||
|
|
||||||
height: navigationView.height
|
|
||||||
|
|
||||||
// Path to the directory opened in the file explorer.
|
|
||||||
originalRootDirectory: root.projectDir
|
|
||||||
rootDirectory: root.projectDir
|
|
||||||
width: navigationView.width
|
|
||||||
|
|
||||||
onFileClicked: path => clideEditor.filePath = path
|
|
||||||
onRootDirectoryChanged: {
|
|
||||||
Logger.log("Setting root directory: " + clideTreeView.rootDirectory);
|
|
||||||
breadCrumb.path = clideTreeView.rootDirectory;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
ClideEditorView {
|
|
||||||
id: clideEditor
|
|
||||||
|
|
||||||
SplitView.fillWidth: true
|
|
||||||
|
|
||||||
// Provide a path to the file currently open in the text editor.
|
|
||||||
// Initialized using the Default trait in Rust QML singleton FileSystem.
|
|
||||||
filePath: FileSystem.filePath
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -10,38 +10,30 @@ import clide.module 1.0
|
|||||||
import Logger 1.0
|
import Logger 1.0
|
||||||
|
|
||||||
TreeView {
|
TreeView {
|
||||||
id: fileSystemTreeView
|
id: root
|
||||||
|
|
||||||
property int lastIndex: -1
|
property int lastIndex: -1
|
||||||
required property string originalRootDirectory
|
required property string originalRootDirectory
|
||||||
property string rootDirectory
|
property string rootDirectory
|
||||||
|
property int rootIndent: 25
|
||||||
|
|
||||||
signal fileClicked(string filePath)
|
signal fileClicked(string filePath)
|
||||||
|
|
||||||
boundsBehavior: Flickable.StopAtBounds
|
boundsBehavior: Flickable.StopAtBounds
|
||||||
boundsMovement: Flickable.StopAtBounds
|
boundsMovement: Flickable.StopAtBounds
|
||||||
clip: true
|
clip: true
|
||||||
leftMargin: 25
|
|
||||||
|
// The model is implemented in filesystem.rs
|
||||||
model: FileSystem
|
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.
|
// Provide our own custom ScrollIndicator for the TreeView.
|
||||||
ScrollIndicator.vertical: ScrollIndicator {
|
ScrollBar.horizontal: ClideScrollBar {
|
||||||
active: true
|
sizeModifier: 3
|
||||||
implicitWidth: 15
|
}
|
||||||
|
ScrollBar.vertical: ClideScrollBar {
|
||||||
contentItem: Rectangle {
|
sizeModifier: 3
|
||||||
color: RustColors.scrollbar
|
|
||||||
implicitHeight: 6
|
|
||||||
implicitWidth: 6
|
|
||||||
opacity: fileSystemTreeView.movingVertically ? 0.5 : 0.0
|
|
||||||
|
|
||||||
Behavior on opacity {
|
|
||||||
OpacityAnimator {
|
|
||||||
duration: 500
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// The delegate represents a single entry in the filesystem.
|
// The delegate represents a single entry in the filesystem.
|
||||||
@@ -53,38 +45,40 @@ TreeView {
|
|||||||
required property int index
|
required property int index
|
||||||
|
|
||||||
implicitHeight: 25
|
implicitHeight: 25
|
||||||
implicitWidth: fileSystemTreeView.width > 0 ? fileSystemTreeView.width : 250
|
implicitWidth: root.width
|
||||||
indentation: 12
|
indentation: 12
|
||||||
|
|
||||||
background: Rectangle {
|
background: Rectangle {
|
||||||
color: current ? RustColors.explorer_folder_open : "transparent"
|
color: current ? RustColors.explorer_folder_open : "transparent"
|
||||||
radius: 2.5
|
radius: 20
|
||||||
|
width: root.width - 15
|
||||||
}
|
}
|
||||||
|
// Item name.
|
||||||
contentItem: Text {
|
contentItem: Text {
|
||||||
anchors.left: directoryIcon.right
|
anchors.left: itemIcon.right
|
||||||
anchors.leftMargin: 5
|
anchors.leftMargin: 5
|
||||||
color: RustColors.explorer_text
|
color: RustColors.explorer_text
|
||||||
text: treeDelegate.fileName
|
text: treeDelegate.fileName
|
||||||
}
|
}
|
||||||
|
// Item Icon.
|
||||||
indicator: Label {
|
indicator: Label {
|
||||||
id: directoryIcon
|
id: itemIcon
|
||||||
|
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
antialiasing: true
|
antialiasing: true
|
||||||
|
enabled: false
|
||||||
|
focus: false
|
||||||
font.family: localFont.font.family
|
font.family: localFont.font.family
|
||||||
font.pixelSize: 18
|
font.pixelSize: 18
|
||||||
smooth: true
|
smooth: true
|
||||||
text: fileSystemTreeView.model.icon(filePath)
|
// Get the icon from Rust implementation.
|
||||||
x: treeDelegate.leftMargin + (treeDelegate.depth * treeDelegate.indentation) + (indicator.visible ? indicator.width : 0)
|
text: root.model.icon(filePath)
|
||||||
|
x: root.rootIndent + (treeDelegate.depth * treeDelegate.indentation) + (carrotIndicator.visible ? carrotIndicator.width : 0)
|
||||||
}
|
}
|
||||||
|
|
||||||
FontLoader {
|
// Directory carrot indicator.
|
||||||
id: localFont
|
|
||||||
|
|
||||||
source: "qrc:/fonts/saucecodepro-xlight.ttf"
|
|
||||||
}
|
|
||||||
Label {
|
Label {
|
||||||
id: indicator
|
id: carrotIndicator
|
||||||
|
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
font.family: localFont.font.family
|
font.family: localFont.font.family
|
||||||
@@ -92,12 +86,11 @@ TreeView {
|
|||||||
font.weight: localFont.font.weight
|
font.weight: localFont.font.weight
|
||||||
text: expanded ? "⮟" : "⮞"
|
text: expanded ? "⮟" : "⮞"
|
||||||
visible: isTreeNode && hasChildren
|
visible: isTreeNode && hasChildren
|
||||||
x: padding + (depth * indentation)
|
x: (root.rootIndent - implicitWidth) + (depth * indentation)
|
||||||
}
|
}
|
||||||
|
// Apply colorization effects to the icon for the item.
|
||||||
MultiEffect {
|
MultiEffect {
|
||||||
id: iconOverlay
|
anchors.fill: itemIcon
|
||||||
|
|
||||||
anchors.fill: directoryIcon
|
|
||||||
brightness: 1.0
|
brightness: 1.0
|
||||||
colorization: 1.0
|
colorization: 1.0
|
||||||
colorizationColor: {
|
colorizationColor: {
|
||||||
@@ -110,7 +103,7 @@ TreeView {
|
|||||||
else
|
else
|
||||||
return RustColors.explorer_folder;
|
return RustColors.explorer_folder;
|
||||||
}
|
}
|
||||||
source: directoryIcon
|
source: itemIcon
|
||||||
}
|
}
|
||||||
HoverHandler {
|
HoverHandler {
|
||||||
id: hoverHandler
|
id: hoverHandler
|
||||||
@@ -124,10 +117,10 @@ TreeView {
|
|||||||
switch (button) {
|
switch (button) {
|
||||||
case Qt.LeftButton:
|
case Qt.LeftButton:
|
||||||
if (treeDelegate.hasChildren) {
|
if (treeDelegate.hasChildren) {
|
||||||
fileSystemTreeView.toggleExpanded(treeDelegate.row);
|
root.toggleExpanded(treeDelegate.row);
|
||||||
} else {
|
} else {
|
||||||
// If this model item doesn't have children, it means it's representing a file.
|
// If this model item doesn't have children, it means it's representing a file.
|
||||||
fileSystemTreeView.fileClicked(treeDelegate.filePath);
|
root.fileClicked(treeDelegate.filePath);
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case Qt.RightButton:
|
case Qt.RightButton:
|
||||||
@@ -146,7 +139,7 @@ TreeView {
|
|||||||
|
|
||||||
onTriggered: {
|
onTriggered: {
|
||||||
Logger.debug("Setting new root directory: " + treeDelegate.filePath);
|
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")
|
text: qsTr("Reset root")
|
||||||
|
|
||||||
onTriggered: {
|
onTriggered: {
|
||||||
Logger.log("Resetting root directory: " + fileSystemTreeView.originalRootDirectory);
|
Logger.log("Resetting root directory: " + root.originalRootDirectory);
|
||||||
fileSystemTreeView.rootDirectory = fileSystemTreeView.originalRootDirectory;
|
root.rootDirectory = root.originalRootDirectory;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -164,4 +157,10 @@ TreeView {
|
|||||||
}
|
}
|
||||||
selectionModel: ItemSelectionModel {
|
selectionModel: ItemSelectionModel {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
FontLoader {
|
||||||
|
id: localFont
|
||||||
|
|
||||||
|
source: "qrc:/fonts/saucecodepro-xlight.ttf"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ import QtQuick.Layouts 1.15
|
|||||||
import clide.module 1.0
|
import clide.module 1.0
|
||||||
import Logger 1.0
|
import Logger 1.0
|
||||||
|
|
||||||
Item {
|
Rectangle {
|
||||||
id: root
|
id: root
|
||||||
|
|
||||||
property var fullPaths: []
|
property var fullPaths: []
|
||||||
@@ -13,36 +13,32 @@ Item {
|
|||||||
property var segments: []
|
property var segments: []
|
||||||
|
|
||||||
signal crumbClicked(string path)
|
signal crumbClicked(string path)
|
||||||
|
signal resetRoot
|
||||||
|
|
||||||
function rebuildSegments() {
|
function rebuildSegments(): string {
|
||||||
var cleaned = path;
|
let cleaned = path;
|
||||||
if (cleaned.endsWith("/"))
|
if (cleaned.endsWith("/"))
|
||||||
cleaned = cleaned.slice(0, -1);
|
cleaned = cleaned.slice(0, -1);
|
||||||
var parts = cleaned.split("/");
|
|
||||||
root.segments = [];
|
|
||||||
root.fullPaths = [];
|
|
||||||
var current = "";
|
|
||||||
Logger.trace("Building segments for path: " + cleaned);
|
Logger.trace("Building segments for path: " + cleaned);
|
||||||
for (var i = 0; i < parts.length; ++i) {
|
segments = [];
|
||||||
if (parts[i] === "") {
|
fullPaths = [];
|
||||||
current = "/";
|
segments.push("/");
|
||||||
root.segments.push("/");
|
fullPaths.push("/");
|
||||||
root.fullPaths.push("/");
|
let parts = cleaned.split("/");
|
||||||
} else {
|
let current = "";
|
||||||
if (current === "/")
|
// We already pushed the root `/` path above, so skip index 0.
|
||||||
current += parts[i];
|
for (let i = 1; i < parts.length; ++i) {
|
||||||
else
|
current += "/" + parts[i];
|
||||||
current += "/" + parts[i];
|
Logger.trace("Pushing path: " + parts[i] + " Current: " + current);
|
||||||
Logger.trace("Pushing path: " + parts[i] + " Current: " + current);
|
segments.push(parts[i]);
|
||||||
root.segments.push(parts[i]);
|
fullPaths.push(current);
|
||||||
root.fullPaths.push(current);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
rep.model = root.segments;
|
// Update the model used in the Repeater to show the new segments.
|
||||||
|
repeater.model = segments;
|
||||||
}
|
}
|
||||||
|
|
||||||
anchors.leftMargin: 20
|
color: "transparent"
|
||||||
height: breadcrumbRow.implicitHeight
|
implicitHeight: breadcrumbRow.implicitHeight
|
||||||
width: parent.width
|
width: parent.width
|
||||||
|
|
||||||
Component.onCompleted: rebuildSegments()
|
Component.onCompleted: rebuildSegments()
|
||||||
@@ -51,28 +47,32 @@ Item {
|
|||||||
Flow {
|
Flow {
|
||||||
id: breadcrumbRow
|
id: breadcrumbRow
|
||||||
|
|
||||||
|
anchors.fill: parent
|
||||||
|
spacing: 2
|
||||||
|
width: parent.width
|
||||||
|
|
||||||
Repeater {
|
Repeater {
|
||||||
id: rep
|
id: repeater
|
||||||
|
|
||||||
model: root.segments
|
model: root.segments
|
||||||
|
|
||||||
delegate: Text {
|
delegate: Text {
|
||||||
id: linkText
|
required property int index
|
||||||
|
|
||||||
required property string modelData
|
required property string modelData
|
||||||
|
|
||||||
function getText() {
|
function getText(): string {
|
||||||
if (modelData === "/") {
|
if (modelData === "/") {
|
||||||
return modelData;
|
return modelData;
|
||||||
}
|
}
|
||||||
Logger.trace("Getting valid text:" + modelData);
|
|
||||||
return modelData + "/";
|
return modelData + "/";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Show blue underlined hyperlink text if the mouse is hovering a segment.
|
||||||
color: mouseArea.containsMouse ? "#2a7fff" : RustColors.explorer_text
|
color: mouseArea.containsMouse ? "#2a7fff" : RustColors.explorer_text
|
||||||
font.underline: mouseArea.containsMouse
|
font.underline: mouseArea.containsMouse
|
||||||
text: getText()
|
text: getText()
|
||||||
|
|
||||||
|
// Click events for each path segment call signal so the parent can set the file explorer root path.
|
||||||
MouseArea {
|
MouseArea {
|
||||||
id: mouseArea
|
id: mouseArea
|
||||||
|
|
||||||
@@ -80,8 +80,8 @@ Item {
|
|||||||
hoverEnabled: true
|
hoverEnabled: true
|
||||||
|
|
||||||
onClicked: {
|
onClicked: {
|
||||||
console.log("Breadcrumb clicked:", root.fullPaths[root.segments.indexOf(modelData)]);
|
Logger.info(index + "] Breadcrumb clicked:" + root.fullPaths[index]);
|
||||||
root.crumbClicked(root.fullPaths[root.segments.indexOf(modelData)]);
|
crumbClicked(root.fullPaths[index]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -90,7 +90,7 @@ Item {
|
|||||||
TapHandler {
|
TapHandler {
|
||||||
acceptedButtons: Qt.RightButton
|
acceptedButtons: Qt.RightButton
|
||||||
|
|
||||||
onSingleTapped: (eventPoint, button) => contextMenu.popup()
|
onSingleTapped: contextMenu.popup()
|
||||||
}
|
}
|
||||||
ClideMenu {
|
ClideMenu {
|
||||||
id: contextMenu
|
id: contextMenu
|
||||||
@@ -100,8 +100,8 @@ Item {
|
|||||||
text: qsTr("Reset root")
|
text: qsTr("Reset root")
|
||||||
|
|
||||||
onTriggered: {
|
onTriggered: {
|
||||||
Logger.log("Resetting root directory: " + clideTreeView.originalRootDirectory);
|
Logger.info("Resetting root directory from ClideBreadCrumbs");
|
||||||
clideTreeView.rootDirectory = clideTreeView.originalRootDirectory;
|
resetRoot();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -11,9 +11,10 @@ ScrollBar {
|
|||||||
id: scrollBar
|
id: scrollBar
|
||||||
|
|
||||||
// Height, opacitiy, width
|
// Height, opacitiy, width
|
||||||
property int h: scrollBar.interactive ? 4 * 2 : 4
|
property int h: scrollBar.interactive ? sizeModifier * 2 : sizeModifier
|
||||||
property int o: scrollBar.active && scrollBar.size < 1.0 ? 1.0 : 0.0
|
property int o: scrollBar.active && scrollBar.size < 1.0 ? 1.0 : 0.0
|
||||||
property int w: scrollBar.interactive ? 4 * 2 : 4
|
property int sizeModifier: 4
|
||||||
|
property int w: scrollBar.interactive ? sizeModifier * 2 : sizeModifier
|
||||||
|
|
||||||
// Scroll bar gutter
|
// Scroll bar gutter
|
||||||
background: Rectangle {
|
background: Rectangle {
|
||||||
@@ -25,6 +26,7 @@ ScrollBar {
|
|||||||
|
|
||||||
// Fade the scrollbar gutter when inactive.
|
// Fade the scrollbar gutter when inactive.
|
||||||
opacity: scrollBar.o
|
opacity: scrollBar.o
|
||||||
|
radius: 20
|
||||||
|
|
||||||
Behavior on opacity {
|
Behavior on opacity {
|
||||||
OpacityAnimator {
|
OpacityAnimator {
|
||||||
@@ -55,6 +57,7 @@ ScrollBar {
|
|||||||
|
|
||||||
// Fade the scrollbar when inactive.
|
// Fade the scrollbar when inactive.
|
||||||
opacity: scrollBar.o
|
opacity: scrollBar.o
|
||||||
|
radius: 20
|
||||||
|
|
||||||
// Smooth transition between color changes based on the state above.
|
// Smooth transition between color changes based on the state above.
|
||||||
Behavior on color {
|
Behavior on color {
|
||||||
|
|||||||
@@ -22,9 +22,7 @@ ApplicationWindow {
|
|||||||
menuBar: ClideMenuBar {
|
menuBar: ClideMenuBar {
|
||||||
}
|
}
|
||||||
|
|
||||||
ClideProjectView {
|
ClideApplicationView {
|
||||||
id: clideProjectView
|
|
||||||
|
|
||||||
projectDir: appWindow.appContextPath
|
projectDir: appWindow.appContextPath
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user