Add Notebook
diff --git a/ide/qml/InsertRow.qml b/ide/qml/InsertRow.qml
index 00bad8b..fd7d8b9 100644
--- a/ide/qml/InsertRow.qml
+++ b/ide/qml/InsertRow.qml
@@ -6,6 +6,8 @@
Rectangle {
id: root
+ signal insertClicked()
+
color: Material.color(Material.Grey, Material.theme == Material.Dark ? Material.Shade800 : Material.Shade300)
height: 2
Layout.fillWidth: true
@@ -51,12 +53,14 @@
height: 24
width: 24
- Button {
+ RoundButton {
id: addButton
anchors.centerIn: parent
icon.source: "qrc:///icons/add.svg"
icon.color: Material.color(Material.Grey, Material.theme == Material.Dark ? Material.Shade400 : Material.Shade600)
flat: true
+
+ onClicked: root.insertClicked()
}
}
}
diff --git a/ide/qml/NotebookCell.qml b/ide/qml/NotebookCell.qml
index a441b73..3466d05 100644
--- a/ide/qml/NotebookCell.qml
+++ b/ide/qml/NotebookCell.qml
@@ -3,51 +3,89 @@
import QtQuick.Controls.Material 2.0
import QtQuick.Layouts 1.0
-ColumnLayout {
+Item {
id: root
required property string code
required property string result
- RowLayout {
- Layout.fillWidth: true
+ signal insertBelowClicked()
+ signal codeEditingFinished(string code)
+ signal cellFocused()
- Button {
- Layout.alignment: Qt.AlignTop
- icon.source: "qrc:///icons/play-circle.svg"
- icon.color: Material.color(Material.Grey, Material.Shade600)
- flat: true
- }
+ height: column.height
- ColumnLayout {
+ MouseArea {
+ id: selectCell
+
+ anchors.fill: column
+
+ onClicked: root.cellFocused()
+ }
+
+ ColumnLayout {
+ id: column
+
+ width: parent.width
+
+ RowLayout {
+ id: row
Layout.fillWidth: true
- Layout.fillHeight: true
- TextArea {
+ RoundButton {
+ Layout.alignment: Qt.AlignTop
+ icon.source: "qrc:///icons/play-circle.svg"
+ icon.color: Material.color(Material.Grey, Material.Shade600)
+ flat: true
+ }
+
+ ColumnLayout {
Layout.fillWidth: true
Layout.fillHeight: true
- id: code
- font.family: "monospace"
- text: root.code
- selectByMouse: true
- wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
- Keys.onTabPressed: {
- var pos = cursorPosition + 4
- text += " ";
- cursorPosition = pos
+ TextArea {
+ Layout.fillWidth: true
+ Layout.fillHeight: true
+ id: code
+ font.family: "monospace"
+ text: root.code
+ selectByMouse: true
+ wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
+
+ Keys.onTabPressed: {
+ var pos = cursorPosition + 4
+ text = text.slice(0, cursorPosition) + " " + text.slice(cursorPosition);
+ cursorPosition = pos
+ }
+
+ Keys.onEscapePressed: {
+ root.forceActiveFocus()
+ }
+
+ onEditingFinished: {
+ root.codeEditingFinished(text)
+ }
+
+ onFocusChanged: if (focus) root.cellFocused()
+ }
+
+ Label {
+ visible: root.result.length > 0
+ Layout.fillWidth: true
+ font.family: "monospace"
+ text: root.result
}
}
- Label {
- Layout.fillWidth: true
- font.family: "monospace"
- text: root.result
+ RoundButton {
+ icon.source: "qrc:///icons/trash.svg"
+ icon.color: Material.color(Material.Grey, Material.theme == Material.Dark ? Material.Shade400 : Material.Shade600)
+ flat: true
}
}
- }
- InsertRow {
-
+ InsertRow {
+ onInsertClicked: root.insertBelowClicked()
+ }
}
}
diff --git a/ide/qml/main.qml b/ide/qml/main.qml
index 73a4581..a28d47d 100644
--- a/ide/qml/main.qml
+++ b/ide/qml/main.qml
@@ -15,14 +15,14 @@
Material.theme: Material.Light
Material.accent: Material.Orange
- CellModel {
- id: model
+ Notebook {
+ id: notebook
}
Component.onCompleted: {
- model.addCell("Refal { = Hi!; }", "");
- model.addCell("<Refal>", "Hi!");
- model.addCell("Hello there", "Hello there");
+ notebook.cellModel.addCell("Refal { = Hi!; }", "");
+ notebook.cellModel.addCell("<Refal>", "Hi!");
+ notebook.cellModel.addCell("Hello there", "Hello there");
}
ColumnLayout {
@@ -36,14 +36,17 @@
TabButton {
text: "Example Workspace"
+ width: implicitWidth
}
TabButton {
text: "Another Workspace"
+ width: implicitWidth
}
TabButton {
text: "Testing"
+ width: implicitWidth
}
}
@@ -57,11 +60,26 @@
id: codeEditor
SplitView.fillWidth: true
SplitView.minimumWidth: 400
- model: model
+ model: notebook.cellModel
clip: true
delegate: NotebookCell {
+ id: notebookCell
+
+ required property var model
+ required property var index
+
width: codeEditor.width - 5
+
+ code: model.code
+ result: model.result
+
+ onCodeEditingFinished: model.code = code
+
+ onInsertBelowClicked: {
+ console.info(index)
+ cellModel.insertRows(cellModel.index(0, index), 1)
+ }
}
}