Add menu, material card
diff --git a/ide/qml/Constants.qml b/ide/qml/Constants.qml
new file mode 100644
index 0000000..a6d02fb
--- /dev/null
+++ b/ide/qml/Constants.qml
@@ -0,0 +1,8 @@
+pragma Singleton
+
+import QtQuick 2.0
+import QtQuick.Controls.Material 2.0
+
+QtObject {
+ readonly property var buttonGrey: Material.color(Material.Grey, Material.theme == Material.Dark ? Material.Shade400 : Material.Shade600)
+}
diff --git a/ide/qml/DocumentPadding.qml b/ide/qml/DocumentPadding.qml
deleted file mode 100644
index 3c47413..0000000
--- a/ide/qml/DocumentPadding.qml
+++ /dev/null
@@ -1,9 +0,0 @@
-import QtQuick 2.0
-import QtQuick.Layouts 1.3
-
-ColumnLayout {
- Layout.topMargin: 10
- Layout.bottomMargin: 10
- Layout.leftMargin: 12
- Layout.rightMargin: 12
-}
diff --git a/ide/qml/InsertRow.qml b/ide/qml/InsertRow.qml
index fd7d8b9..a60dab7 100644
--- a/ide/qml/InsertRow.qml
+++ b/ide/qml/InsertRow.qml
@@ -57,7 +57,7 @@
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)
+ icon.color: Constants.buttonGrey
flat: true
onClicked: root.insertClicked()
diff --git a/ide/qml/NotebookCell.qml b/ide/qml/NotebookCell.qml
index f51ffaa..240e7f8 100644
--- a/ide/qml/NotebookCell.qml
+++ b/ide/qml/NotebookCell.qml
@@ -11,89 +11,128 @@
required property string code
required property string result
property int status: Cell.IDLE
+ property bool cellActive: false
signal insertBelowClicked()
signal codeEditingFinished(string code)
signal cellFocused()
+ signal cellUnfocused()
signal runClicked()
+ signal deleteClicked()
height: column.height
- MouseArea {
- id: selectCell
-
- anchors.fill: column
-
- onClicked: root.cellFocused()
- }
+ Keys.onEscapePressed: root.cellUnfocused()
ColumnLayout {
id: column
- width: parent.width
+ width: parent.width - 20
+ anchors.centerIn: parent
- RowLayout {
- id: row
+ Item {
+ implicitWidth: row.implicitWidth
+ implicitHeight: row.implicitHeight
Layout.fillWidth: true
- RoundButton {
- Layout.alignment: Qt.AlignTop
- icon.source: iconForState(root.state)
- icon.color: Material.color(Material.Grey, Material.Shade600)
- flat: true
+ Pane {
+ anchors.fill: parent
+ anchors.topMargin: -5
+ anchors.bottomMargin: -5
- onClicked: root.runClicked()
-
- function iconForState(state) {
- if (state === Cell.RUNNING)
- return "qrc:///icons/square.svg"
-
- return "qrc:///icons/play-circle.svg"
- }
+ Material.elevation: root.cellActive ? 4 : 0
}
- ColumnLayout {
- Layout.fillWidth: true
- Layout.fillHeight: true
+ MouseArea {
+ id: selectCell
- TextArea {
+ anchors.fill: row
+
+ onClicked: root.cellFocused()
+ }
+
+ RowLayout {
+ anchors.fill: parent
+ id: row
+
+ RoundButton {
+ Layout.alignment: Qt.AlignTop
+ icon.source: iconForState(root.state)
+ icon.color: Material.color(Material.Grey, Material.Shade600)
+ flat: true
+
+ onClicked: root.runClicked()
+
+ function iconForState(state) {
+ if (state === Cell.RUNNING)
+ return "qrc:///icons/square.svg"
+
+ return "qrc:///icons/play-circle.svg"
+ }
+ }
+
+ 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 = text.slice(0, cursorPosition) + " " + text.slice(cursorPosition);
- cursorPosition = pos
+ TextArea {
+ Layout.fillWidth: true
+ Layout.fillHeight: true
+ id: code
+ font.family: "monospace"
+ text: root.code
+ selectByMouse: true
+ wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
+
+ placeholderText: "Write some code..."
+
+ Keys.onTabPressed: {
+ var pos = cursorPosition + 4
+ text = text.slice(0, cursorPosition) + " " + text.slice(cursorPosition);
+ cursorPosition = pos
+ }
+
+// Keys.onEscapePressed: {
+// focus = false
+// }
+
+ onEditingFinished: {
+ root.codeEditingFinished(text)
+ }
+
+ onFocusChanged: if (focus) root.cellFocused()
+ onActiveFocusChanged: if (activeFocus) root.cellFocused()
}
- Keys.onEscapePressed: {
- root.forceActiveFocus()
- }
+ Label {
+ visible: root.result.length > 0
+ Layout.fillWidth: true
+ font.family: "monospace"
+ text: root.result
- onEditingFinished: {
- root.codeEditingFinished(text)
+ Layout.bottomMargin: 5
}
-
- onFocusChanged: if (focus) root.cellFocused()
}
- Label {
- visible: root.result.length > 0
- Layout.fillWidth: true
- font.family: "monospace"
- text: root.result
- }
- }
+ RoundButton {
+ icon.source: "qrc:///icons/menu.svg"
+ icon.color: Constants.buttonGrey
+ flat: true
- RoundButton {
- icon.source: "qrc:///icons/trash.svg"
- icon.color: Material.color(Material.Grey, Material.theme == Material.Dark ? Material.Shade400 : Material.Shade600)
- flat: true
+ onClicked: cellContextMenu.popup()
+
+ Menu {
+ id: cellContextMenu
+
+ MenuItem {
+ icon.source: "qrc:///icons/trash.svg"
+ icon.color: Material.color(Material.Red)
+ text: "Delete"
+
+ onClicked: root.deleteClicked()
+ }
+ }
+ }
}
}
diff --git a/ide/qml/main.qml b/ide/qml/main.qml
index ef6134a..e561ae0 100644
--- a/ide/qml/main.qml
+++ b/ide/qml/main.qml
@@ -19,12 +19,6 @@
id: notebook
}
- Component.onCompleted: {
- notebook.cellModel.addCell("Refal { = Hi!; }", "");
- notebook.cellModel.addCell("<Refal>", "Hi!");
- notebook.cellModel.addCell("Hello there", "Hello there");
- }
-
ColumnLayout {
id: column
anchors.fill: parent
@@ -35,12 +29,12 @@
Layout.fillWidth: true
TabButton {
- text: "Example Workspace"
+ text: "Notebook"
width: implicitWidth
}
TabButton {
- text: "Another Workspace"
+ text: "Another Notebook"
width: implicitWidth
}
@@ -63,10 +57,12 @@
model: notebook.cellModel
clip: true
+ spacing: 5
+
header: ColumnLayout {
width: codeEditor.width
- DocumentPadding {
+ Pane {
Layout.bottomMargin: 0
Label {
@@ -87,11 +83,12 @@
required property var index
required property var uuid
- width: codeEditor.width - 5
+ width: codeEditor.width
code: model.code
result: model.result.trim()
status: model.status
+ cellActive: codeEditor.currentIndex === index
onCodeEditingFinished: model.code = code
@@ -104,6 +101,18 @@
console.info("Cell run clicked")
notebook.runCell(uuid)
}
+
+ onCellFocused: {
+ codeEditor.currentIndex = index
+ }
+
+ onDeleteClicked: {
+ notebook.cellModel.deleteCellAt(index)
+ }
+
+ onCellUnfocused: {
+ codeEditor.currentIndex = -1
+ }
}
}
diff --git a/ide/qml/qmldir b/ide/qml/qmldir
new file mode 100644
index 0000000..0df2a6f
--- /dev/null
+++ b/ide/qml/qmldir
@@ -0,0 +1 @@
+singleton Constants Constants.qml
diff --git a/ide/qml/qtquickcontrols2.conf b/ide/qml/qtquickcontrols2.conf
new file mode 100644
index 0000000..433a54e
--- /dev/null
+++ b/ide/qml/qtquickcontrols2.conf
@@ -0,0 +1,5 @@
+[Controls]
+Style=Material
+
+[Material]
+Variant=Dense