Add menu, material card
diff --git a/ide/CellModel.cpp b/ide/CellModel.cpp
index 0aa29bb..c48953c 100644
--- a/ide/CellModel.cpp
+++ b/ide/CellModel.cpp
@@ -152,6 +152,11 @@
insertRow(index);
}
+void CellModel::deleteCellAt(int index)
+{
+ removeRow(index);
+}
+
void CellModel::announceCellChange(Cell *cell, int role)
{
// TODO: Optimize
diff --git a/ide/CellModel.h b/ide/CellModel.h
index 428422a..a946441 100644
--- a/ide/CellModel.h
+++ b/ide/CellModel.h
@@ -45,6 +45,7 @@
Q_INVOKABLE void addCell(QString code, QString result);
Q_INVOKABLE void insertCellBefore(int index);
+ Q_INVOKABLE void deleteCellAt(int index);
private:
Notebook *_notebook;
diff --git a/ide/icons/menu.svg b/ide/icons/menu.svg
new file mode 100644
index 0000000..30a009c
--- /dev/null
+++ b/ide/icons/menu.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M64 384h384v-42.666H64V384zm0-106.666h384v-42.667H64v42.667zM64 128v42.665h384V128H64z"/></svg>
\ No newline at end of file
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
diff --git a/ide/resources.qrc b/ide/resources.qrc
index 23ecdd0..07d0bc0 100644
--- a/ide/resources.qrc
+++ b/ide/resources.qrc
@@ -6,7 +6,10 @@
<file>icons/add.svg</file>
<file>qml/InsertRow.qml</file>
<file>icons/trash.svg</file>
- <file>qml/DocumentPadding.qml</file>
<file>icons/square.svg</file>
+ <file>icons/menu.svg</file>
+ <file>qml/Constants.qml</file>
+ <file>qml/qmldir</file>
+ <file>qml/qtquickcontrols2.conf</file>
</qresource>
</RCC>
