From 8b71af06a82a2247eb0d0ae2f6f400313dd9159c Mon Sep 17 00:00:00 2001 From: Shaun Reed Date: Sat, 29 Mar 2025 09:55:09 -0400 Subject: [PATCH] Add placeholders for side panel and console. --- README.md | 2 +- qml/Menu/ClideMenu.qml | 2 +- qml/Menu/ClideMenuBar.qml | 3 +- qml/Menu/ClideMenuBarItem.qml | 2 +- qml/Menu/ClideMenuBarItem.qml.autosave | 16 +++ qml/main.qml | 145 ++++++++++++++++++++++++- 6 files changed, 165 insertions(+), 5 deletions(-) create mode 100644 qml/Menu/ClideMenuBarItem.qml.autosave diff --git a/README.md b/README.md index dcf168c..fce61ed 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ CLIDE is an IDE written in Rust that supports both full and headless Linux envir The following packages must be installed before the application will build. ```bash -sudo apt install qt6-base-dev qt6-declarative-dev qt6-tools-dev qml6-module-qtquick-controls qml6-module-qtquick-layouts qml6-module-qtquick-window qml6-module-qtqml-workerscript qml6-module-qtquick-templates qml6-module-qtquick +sudo apt install qt6-base-dev qt6-declarative-dev qt6-tools-dev qml6-module-qtquick-controls qml6-module-qtquick-layouts qml6-module-qtquick-window qml6-module-qtqml-workerscript qml6-module-qtquick-templates qml6-module-qtquick qml6-module-qtquick-dialogs ``` And of course, [Rust](https://www.rust-lang.org/tools/install). diff --git a/qml/Menu/ClideMenu.qml b/qml/Menu/ClideMenu.qml index 6616882..8b89d96 100644 --- a/qml/Menu/ClideMenu.qml +++ b/qml/Menu/ClideMenu.qml @@ -4,7 +4,7 @@ import QtQuick.Controls Menu { background: Rectangle { color: "#3c3f41" - implicitWidth: 200 + implicitWidth: 100 radius: 2 } } diff --git a/qml/Menu/ClideMenuBar.qml b/qml/Menu/ClideMenuBar.qml index 66356bd..9a7a58c 100644 --- a/qml/Menu/ClideMenuBar.qml +++ b/qml/Menu/ClideMenuBar.qml @@ -3,7 +3,7 @@ import QtQuick.Controls MenuBar { background: Rectangle { - color: "#3b3e40" // Dark background like CLion + color: "#3c3f41" } Action { @@ -25,6 +25,7 @@ MenuBar { id: actionExit text: qsTr("&Exit") + onTriggered: Qt.quit() } ClideMenu { diff --git a/qml/Menu/ClideMenuBarItem.qml b/qml/Menu/ClideMenuBarItem.qml index f740727..15f049f 100644 --- a/qml/Menu/ClideMenuBarItem.qml +++ b/qml/Menu/ClideMenuBarItem.qml @@ -9,7 +9,7 @@ MenuItem { radius: 2.5 } contentItem: IconLabel { - color: "white" + color: "black" font.family: "Helvetica" text: root.text } diff --git a/qml/Menu/ClideMenuBarItem.qml.autosave b/qml/Menu/ClideMenuBarItem.qml.autosave new file mode 100644 index 0000000..15f049f --- /dev/null +++ b/qml/Menu/ClideMenuBarItem.qml.autosave @@ -0,0 +1,16 @@ +import QtQuick +import QtQuick.Controls + +MenuItem { + id: root + + background: Rectangle { + color: root.hovered ? "#4b4f51" : "#3c3f41" // Hover effect + radius: 2.5 + } + contentItem: IconLabel { + color: "black" + font.family: "Helvetica" + text: root.text + } +} diff --git a/qml/main.qml b/qml/main.qml index 9345f21..efa1836 100644 --- a/qml/main.qml +++ b/qml/main.qml @@ -1,10 +1,13 @@ import QtQuick import QtQuick.Controls import QtQuick.Layouts +import QtQuick.Dialogs import "Menu" ApplicationWindow { + id: appWindow + height: 800 title: "CLIDE" visible: true @@ -15,6 +18,146 @@ ApplicationWindow { Rectangle { anchors.fill: parent - color: "#1e1f22" // Dark background + color: "#1e1f22" + } + MessageDialog { + id: errorDialog + + title: qsTr("Error") + } + RowLayout { + anchors.fill: parent + spacing: 0 + + SplitView { + Layout.fillHeight: true + Layout.fillWidth: true + + // Customized handle to drag between the Navigation and the Editor. + handle: Rectangle { + border.color: SplitHandle.hovered ? "#303234" : "#3c3f41" + color: SplitHandle.pressed ? "#4b4f51" : "#3c3f41" + implicitWidth: 8 + opacity: SplitHandle.hovered || navigationView.width < 15 ? 1.0 : 0.0 + + Behavior on opacity { + OpacityAnimator { + duration: 1400 + } + } + } + + Rectangle { + id: navigationView + + SplitView.fillHeight: true + SplitView.preferredWidth: 250 + color: "#303234" + + StackLayout { + anchors.fill: parent + + // Shows the help text. + Text { + color: "white" + text: qsTr("File system view placeholder") + wrapMode: TextArea.Wrap + } + + // TODO: Shows the files on the file system. + // ClideProjectView { + // id: fileSystemView + // color: Colors.surface1 + // onFileClicked: path => root.currentFilePath = path + // } + } + } + SplitView { + Layout.fillHeight: true + Layout.fillWidth: true + orientation: Qt.Vertical + + // Customized handle to drag between the Navigation and the Editor. + handle: Rectangle { + border.color: SplitHandle.hovered ? "#2b2b2b" : "#3c3f41" + color: SplitHandle.pressed ? "#4b4f51" : "#3c3f41" + implicitHeight: 8 + opacity: SplitHandle.hovered || navigationView.width < 15 ? 1.0 : 0.0 + + Behavior on opacity { + OpacityAnimator { + duration: 1400 + } + } + } + + TextArea { + id: areaText + + color: "#ccced3" + focus: true + persistentSelection: true + selectByMouse: true + // selectedTextColor: control.palette.highlightedText + // selectionColor: control.palette.highlight + textFormat: Qt.AutoText + wrapMode: TextArea.Wrap + + background: Rectangle { + color: "#2b2b2b" + implicitHeight: 650 + } + + onLinkActivated: function (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() + // } + // } + } + TextArea { + id: areaConsole + + bottomPadding: 0 + leftPadding: 6 + persistentSelection: true + placeholderText: qsTr("Placeholder for bash terminal.") + placeholderTextColor: "gray" + readOnly: true + rightPadding: 6 + selectByMouse: true + // selectedTextColor: control.palette.highlightedText + // selectionColor: control.palette.highlight + textFormat: Qt.AutoText + topPadding: 6 + wrapMode: TextArea.Wrap + + background: Rectangle { + color: "#2b2b2b" + implicitHeight: 20 + // border.color: control.enabled ? "#21be2b" : "transparent" + } + } + } + } } }