From f01eadd3530e61063b43aa615123dcd82ce3d239 Mon Sep 17 00:00:00 2001
From: Adrian Kummerlaender
Date: Mon, 29 Jun 2015 22:31:24 +0200
Subject: Added vim-like UI normal and insert modes

Normal mode allows for selecting the a terminal or newline text input.
Insert mode sets the keyboard focus to the currently selected item.
This transforms _MetaTerm_ into a fully keyboard driven application.
---
 TerminalItem.qml | 128 ++++++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 88 insertions(+), 40 deletions(-)

(limited to 'TerminalItem.qml')

diff --git a/TerminalItem.qml b/TerminalItem.qml
index 9fce337..883d911 100644
--- a/TerminalItem.qml
+++ b/TerminalItem.qml
@@ -8,60 +8,108 @@ Item {
 
 	height: elementList.height
 
-	function focus() {
+	function select() {
 		if ( command.readOnly ) {
-			elementList.children[1].focus();
+			elementList.children[1].select();
 		} else {
-			command.forceActiveFocus();
+			highlighter.select();
 		}
 	}
 
-	Column {
-		id: elementList
-
-		function createTerminal(program) {
-			var terminal = Qt.createComponent("EmbeddedTerminal.qml");
-			var instantiateTerminal = function() {
-				terminal.createObject(elementList, {
-					"columns": 90,
-					"lines": 20,
-					"program": program,
-					"workingDirectory": "$HOME"
-				});
-			}
+	function deselect() {
+		if ( command.readOnly ) {
+			elementList.children[1].deselect();
+		} else {
+			highlighter.deselect();
+		}
+	}
 
-			if ( terminal.status == Component.Ready ) {
-				instantiateTerminal();
-			} else {
-				terminal.statusChanged.connect(instantiateTerminal);
-			}
+	function forceActiveFocus() {
+		if ( command.readOnly ) {
+			scope.forceActiveFocus();
+		} else {
+			scope.forceActiveFocus();
+			highlighter.select();
+			highlighter.focus();
+		}
+	}
+
+	function unfocus() {
+		if ( !command.readOnly ) {
+			highlighter.unfocus();
 		}
+	}
 
-		RowLayout {
-			width: terminalItem.width
+	FocusScope {
+		id: scope
 
-			Text {
-				text: "> "
-				font.pointSize: 18
-				color: "white"
+		Column {
+			id: elementList
+
+			function createTerminal(program) {
+				var terminal = Qt.createComponent("EmbeddedTerminal.qml");
+				var instantiateTerminal = function() {
+					terminal.createObject(elementList, {
+						"columns": 90,
+						"lines": 20,
+						"program": program,
+						"workingDirectory": "$HOME",
+						"focus": true
+					});
+				}
+
+				if ( terminal.status == Component.Ready ) {
+					instantiateTerminal();
+				} else {
+					terminal.statusChanged.connect(instantiateTerminal);
+				}
 			}
 
-			TextInput {
-				id: command
+			RowLayout {
+				width: terminalItem.width
+
+				Rectangle {
+					id: highlighter
+
+					width: 10
+					height: command.height
+					opacity: 0
+
+					color: "#909636"
+
+					Behavior on opacity {
+						NumberAnimation {
+							duration: 300
+							easing.type: Easing.OutCubic
+						}
+					}
+
+					function select()   { opacity = 1         }
+					function deselect() { opacity = 0         }
+					function focus()    { color   = "#352F6A" }
+					function unfocus()  { color   = "#909636" }
+				}
+
+				TextInput {
+					id: command
 
-				font.pointSize: 18
-				color: "white"
-				selectedTextColor: "#161616"
-				selectionColor: "white"
-				selectByMouse: true
+					font.pointSize: 18
+					color: "white"
+					selectedTextColor: "#161616"
+					selectionColor: "white"
+					selectByMouse: true
+					focus: true
 
-				Layout.fillWidth: true
+					Layout.fillWidth: true
 
-				onAccepted: {
-					if ( !readOnly ) {
-						readOnly = true;
-						elementList.createTerminal(text);
-						terminalItem.executed();
+					onAccepted: {
+						if ( !readOnly ) {
+							readOnly = true;
+							focus    = false;
+							elementList.createTerminal(text);
+							terminalItem.executed();
+							highlighter.deselect();
+						}
 					}
 				}
 			}
-- 
cgit v1.2.3