Restructure QML and JS sources

`list` holds the components of the central list UI element.
`command` holds the UI and implementation parts of the command mode.
`widget` holds more or less general purpose elements that may also be of use in other circumstances.

2 files changed, 301 insertions, 0 deletions

diff --git a/src/list/TerminalItem.qml b/src/list/TerminalItem.qml
new file mode 100644
index 0000000..57197bd
--- /dev/null
+++ b/src/list/TerminalItem.qml
@@ -0,0 +1,176 @@
+import QtQuick 2.0
+import QtQuick.Controls 1.2
+import QtQuick.Layouts 1.1
+import Qt.labs.settings 1.0
+
+Item {
+	id: item
+
+	property int              index    : 0
+	property EmbeddedTerminal terminal : null
+
+	signal executed (int index)
+
+	Settings {
+		id: settings
+		category: "item"
+
+		property int    fontSize   : 18
+		property string fontFamily : "Monospace"
+		property string fontColor  : "white"
+	}
+
+	anchors {
+		left:  parent.left
+		right: parent.right
+	}
+
+	height: elementList.height
+
+	function select() {
+		if ( terminal === null ) {
+			highlighter.select();
+		} else {
+			terminal.select();
+		}
+	}
+
+	function deselect() {
+		if ( terminal === null ) {
+			highlighter.deselect();
+		} else {
+			terminal.deselect();
+		}
+	}
+
+	function forceActiveFocus() {
+		scope.forceActiveFocus();
+
+		if ( terminal === null ) {
+			scope.forceActiveFocus();
+			highlighter.select();
+			highlighter.focus();
+		}
+	}
+
+	function unfocus() {
+		if ( terminal === null ) {
+			highlighter.unfocus();
+		}
+	}
+
+	function heighten() {
+		if ( terminal !== null ) {
+			terminal.lines += 1;
+		}
+	}
+
+	function shorten() {
+		if ( terminal !== null ) {
+			if ( terminal.lines > 10 ) {
+				terminal.lines -= 1;
+			} else {
+				terminal.displayOverlay();
+			}
+		}
+	}
+
+	function reset() {
+		if ( terminal !== null ) {
+			terminal.destroy();
+
+			terminal         = null;
+			command.readOnly = false;
+			command.focus    = true;
+
+			unfocus();
+		}
+	}
+
+	FocusScope {
+		id: scope
+
+		anchors {
+			left:  parent.left
+			right: parent.right
+		}
+
+		Column {
+			id: elementList
+
+			anchors {
+				left:  parent.left
+				right: parent.right
+			}
+
+			function createTerminal(program) {
+				var terminalComponent   = Qt.createComponent("qrc:/EmbeddedTerminal.qml");
+				var instantiateTerminal = function() {
+					item.terminal = terminalComponent.createObject(elementList, {
+						"program"          : program,
+						"workingDirectory" : "$HOME",
+						"focus"            : true
+					});
+				}
+
+				if ( terminalComponent.status === Component.Ready ) {
+					instantiateTerminal();
+				} else {
+					terminalComponent.statusChanged.connect(instantiateTerminal);
+				}
+			}
+
+			RowLayout {
+				anchors {
+					left:  parent.left
+					right: parent.right
+				}
+
+				Highlighter {
+					id: highlighter
+
+					width: 10
+					height: command.height
+				}
+
+				TextInput {
+					id: command
+
+					font {
+						family:    settings.fontFamily
+						pointSize: settings.fontSize
+					}
+
+					color:             settings.fontColor
+					selectionColor:    settings.fontColor
+					selectedTextColor: "#161616"
+
+					selectByMouse:    true
+					focus:            true
+					Layout.fillWidth: true
+
+					onAccepted: {
+						if ( item.terminal === null ) {
+							readOnly = true;
+							focus    = false;
+
+							elementList.createTerminal(text);
+							item.executed(item.index);
+							highlighter.deselect();
+						}
+					}
+				}
+
+				Text {
+					font {
+						family: settings.fontFamily
+						pointSize: settings.fontSize / 1.5
+					}
+					color: settings.fontColor
+
+					text: item.index
+				}
+			}
+		}
+	}
+}
diff --git a/src/list/TerminalList.qml b/src/list/TerminalList.qml
new file mode 100644
index 0000000..6c6465b
--- /dev/null
+++ b/src/list/TerminalList.qml
@@ -0,0 +1,125 @@
+import QtQuick 2.0
+import QtQuick.Layouts 1.1
+
+Item {
+	id: item
+
+	property StateHandler state      : null
+	property int          activeItem : 0
+	property int          itemIndex  : 0
+
+	property alias children : column.children
+
+	function onItemExecuted(index) {
+		if ( index === (children.length - 1) ) {
+			createItem();
+		}
+	}
+
+	function createItem() {
+		var terminalItem = Qt.createComponent("qrc:/TerminalItem.qml");
+		var instantiateTerminal = function() {
+			var instance = terminalItem.createObject(column, {
+				"index": itemIndex,
+				"width": flickable.width
+			});
+			instance.onExecuted.connect(onItemExecuted);
+
+			++itemIndex;
+		}
+
+		if ( terminalItem.status === Component.Ready ) {
+			instantiateTerminal();
+		} else {
+			terminalItem.statusChanged.connect(instantiateTerminal);
+		}
+	}
+
+	function scrollTo(index) {
+		if ( column.height >= flickable.height ) {
+			var offset = children[index].y
+					   + (children[index].height / 2)
+					   - (flickable.height / 2);
+
+			var bound  = column.height
+					   - flickable.height;
+
+			if ( offset < 0 ) {
+				flickable.contentY = 0;
+			} else if ( offset >= bound ) {
+				flickable.contentY = bound;
+			} else {
+				flickable.contentY = offset;
+			}
+		}
+	}
+
+	function selectItem(index) {
+		children[activeItem].deselect();
+		children[index     ].select();
+
+		activeItem = typeof index === "number" ? index : parseInt(index);
+
+		scrollTo(index);
+	}
+
+	function selectNext() {
+		if ( activeItem < (children.length - 1) ) {
+			selectItem(activeItem + 1);
+		} else {
+			state.enterInsertMode();
+		}
+	}
+
+	function selectPrev() {
+		if ( activeItem > 0 ) {
+			selectItem(activeItem - 1);
+		}
+	}
+
+	function focusCurrent() {
+		children[activeItem].forceActiveFocus();
+	}
+
+	function unfocusCurrent() {
+		children[activeItem].unfocus();
+	}
+
+	function getCurrent() {
+		return children[activeItem];
+	}
+
+	function get(index) {
+		return children[index];
+	}
+
+	function iterate(func) {
+		for ( var i = 0; i < children.length; i++ ) {
+			func(children[i]);
+		}
+	}
+
+	Flickable {
+		id: flickable
+
+		anchors.fill: parent
+
+		boundsBehavior: Flickable.StopAtBounds
+		contentHeight:  column.height
+		contentWidth:   parent.width
+		pixelAligned:   true
+
+		Column {
+			id: column
+
+			anchors {
+				left:  parent.left
+				right: parent.right
+			}
+
+			spacing: 10
+
+			onHeightChanged: scrollTo(activeItem)
+		}
+	}
+}