6 files changed, 410 insertions, 135 deletions

diff --git a/heimdall-frontend/source/qml/DropFiles.qml b/heimdall-frontend/source/qml/DropFiles.qml
index ac5c7a7..ddcc90b 100644
--- a/heimdall-frontend/source/qml/DropFiles.qml
+++ b/heimdall-frontend/source/qml/DropFiles.qml
@@ -1,7 +1,101 @@
 import QtQuick 2.4
 import QtQuick.Controls 1.3
 import QtQuick.Layouts 1.1
+import QtQuick.Dialogs 1.2
 
 DropFilesForm {
+	id: background
+
+	property var fileUrls: []
+
 	signal nextPressed(var files)
+
+	ListModel {
+		id: fileModel
+	}
+
+	function setFileGridVisible(visible) {
+		if (fileGridContainer.visible !== visible) {
+			dropFilesContainer.visible = !visible;
+			bottomButtonsContainer.visible = visible;
+			fileGridContainer.visible = visible;
+
+			if (visible) {
+				fileGridView.forceActiveFocus();
+			}
+		}
+	}
+
+	function addFiles(urls) {
+		var count = urls.length;
+		if (count > 0) {
+			for (var i = 0; i < count; i++) {
+				var url = urls[i].toString();
+				var filename = url.slice(url.lastIndexOf('/') + 1, url.length);
+
+				fileModel.append({
+					icon: "drop_zone.svg",
+					text: filename
+				});
+
+				fileUrls.push(urls[i]);
+			}
+
+			setFileGridVisible(true);
+		}
+	}
+
+	function removeFile(index) {
+		if (index >= 0) {
+			fileModel.remove(index);
+			fileUrls.splice(index, 1);
+
+			if (fileUrls.length == 0) {
+				setFileGridVisible(false);
+			}
+		}
+	}
+
+	onKeyPressed: {
+		if (event.key === Qt.Key_Delete || event.key === Qt.Key_Backspace) {
+			event.accepted = true;
+			removeFile(fileGridView.currentIndex);
+		}
+	}
+
+	dropFilesArea {
+		onDropped: {
+			if ((drop.action == Qt.CopyAction || drop.action == Qt.MoveAction) && drop.urls.length > 0) {
+				addFiles(drop.urls);
+				drop.acceptProposedAction();
+				drop.accept(Qt.CopyAction);
+			}
+		}
+	}
+
+	browseButton.onClicked: {
+		browseDialog.open()
+	}
+
+	bottomBrowseButton.onClicked: {
+		browseDialog.open()
+	}
+
+	nextButton {
+		onClicked: nextPressed(fileUrls)
+	}
+
+	fileGridView {
+		model: fileModel
+	}
+
+	FileDialog {
+        id: browseDialog
+		title: "Select firmware file(s)"
+		selectMultiple: true
+		selectFolder: false
+        onAccepted: {
+			addFiles(browseDialog.fileUrls);
+        }
+    }
 }
diff --git a/heimdall-frontend/source/qml/DropFilesForm.qml b/heimdall-frontend/source/qml/DropFilesForm.qml
new file mode 100644
index 0000000..7f8ce68
--- /dev/null
+++ b/heimdall-frontend/source/qml/DropFilesForm.qml
@@ -0,0 +1,200 @@
+import QtQuick 2.4
+import QtQuick.Controls 1.3
+import QtQuick.Layouts 1.1
+
+Rectangle {
+	id: dropFilesForm
+	color: "#eeeeee"
+
+	property alias dropFilesArea: dropFilesArea
+	property alias fileGridView: fileGridView
+	property alias fileGridContainer: fileGridContainer
+	property alias browseButton: browseButton
+	property alias bottomBrowseButton: bottomBrowseButton
+	property alias nextButton: nextButton
+	property alias dropFilesContainer: dropFilesColumn
+	property alias bottomButtonsContainer: bottomButtonsContainer
+
+	signal keyPressed(var event)
+
+	DropArea {
+		id: dropFilesArea
+		anchors.fill: parent
+
+		onEntered: {
+			background.color = "#cccccc";
+		}
+		onDropped: {
+			background.color = "#eeeeee";
+		}
+		onExited: {
+			background.color = "#eeeeee";
+		}
+	}
+
+	Column {
+		id: dropFilesColumn
+		spacing: 12
+		anchors.verticalCenter: parent.verticalCenter
+		anchors.horizontalCenter: parent.horizontalCenter
+
+		Text {
+			id: dragFilesText
+			text: qsTr("Drop firmware files here")
+			anchors.horizontalCenter: parent.horizontalCenter
+			wrapMode: Text.WordWrap
+			horizontalAlignment: Text.AlignLeft
+			font.pixelSize: 18
+		}
+
+		Image {
+			width: 100
+			height: 100
+			anchors.horizontalCenter: parent.horizontalCenter
+			source: "drop_zone.svg"
+		}
+
+		Button {
+			id: browseButton
+			text: qsTr("Browse")
+			isDefault: true
+			anchors.horizontalCenter: parent.horizontalCenter
+		}
+	}
+
+	Item {
+		id: fileGridContainer
+		visible: false
+		anchors.fill: parent
+		anchors.bottomMargin: 36
+
+		ScrollView {
+			anchors.fill: parent
+
+			GridView {
+				id: fileGridView
+				flow: GridView.FlowLeftToRight
+				cellWidth: 148
+				cellHeight: 120
+				boundsBehavior: Flickable.StopAtBounds
+				focus: true
+				anchors {
+					fill: parent
+					margins: 4
+				}
+
+				highlight: Rectangle {
+					color: "#ccddff"
+					radius: 8
+				}
+
+				delegate: Item {
+					width: 148
+					height: 120
+
+					Column {
+						spacing: 8
+						anchors.centerIn: parent
+
+						Image {
+							width: 80
+							anchors.horizontalCenter: parent.horizontalCenter
+							fillMode: Image.PreserveAspectFit
+							source: model.icon
+						}
+
+						Text {
+							width: 140
+							anchors.horizontalCenter: parent.horizontalCenter
+							wrapMode: Text.NoWrap
+							horizontalAlignment: Text.AlignHCenter
+							text: model.text
+							elide: Text.ElideMiddle
+						}
+					}
+
+					MouseArea {
+						anchors.fill: parent
+
+						onClicked: {
+							fileGridView.currentIndex = index
+							fileGridView.forceActiveFocus()
+						}
+					}
+				}
+
+				Keys.onPressed: {
+					var columns = Math.floor(fileGridView.width / fileGridView.cellWidth);
+					var index = fileGridView.currentIndex;
+
+					switch (event.key) {
+						case Qt.Key_Left:
+							index--;
+							break;
+						case Qt.Key_Right:
+							index++;
+							break;
+						case Qt.Key_Up:
+							index -= columns;
+							break;
+						case Qt.Key_Down:
+							index += columns;
+							break;
+					}
+
+					var upperBound = fileGridView.model.count - 1;
+					var partialRowCount = fileGridView.model.count % columns;
+
+					if (partialRowCount > 0) {
+						upperBound += columns - partialRowCount;
+					}
+
+					if (index >= 0 && index <= upperBound) {
+						index = Math.min(fileGridView.model.count - 1, index);
+						fileGridView.currentIndex = index;
+					}
+
+					dropFilesForm.keyPressed(event);
+				}
+			}
+		}
+	}
+
+	Rectangle {
+		id: bottomButtonsContainer
+		height: 36
+		color: "#dddddd"
+		visible: false
+
+		anchors {
+			bottom: parent.bottom
+			left: parent.left
+			right: parent.right
+		}
+
+		Button {
+			id: bottomBrowseButton
+			text: qsTr("Browse")
+			anchors {
+				bottom: parent.bottom
+				bottomMargin: 4
+				left: parent.left
+				leftMargin: 8
+				verticalCenter: parent.verticalCenter
+			}
+		}
+
+		Button {
+			id: nextButton
+			text: qsTr("Next")
+			isDefault: true
+			anchors {
+				bottom: parent.bottom
+				bottomMargin: 4
+				right: parent.right
+				rightMargin: 8
+				verticalCenter: parent.verticalCenter
+			}
+		}
+	}
+}
diff --git a/heimdall-frontend/source/qml/DropFilesForm.ui.qml b/heimdall-frontend/source/qml/DropFilesForm.ui.qml
deleted file mode 100644
index 3c9dd00..0000000
--- a/heimdall-frontend/source/qml/DropFilesForm.ui.qml
+++ /dev/null
@@ -1,60 +0,0 @@
-import QtQuick 2.4
-import QtQuick.Controls 1.3
-import QtQuick.Layouts 1.1
-
-Rectangle {
-	Layout.preferredWidth: 420
-	Layout.preferredHeight: 440
-	color: "#eeeeee"
-
-	DropArea {
-		id: dropFilesArea
-	}
-
-	Column {
-		id: dropFilesColumn
-		spacing: 12
-		anchors.verticalCenter: parent.verticalCenter
-		anchors.horizontalCenter: parent.horizontalCenter
-
-		Text {
-			id: dragFilesText
-			text: qsTr("Drop firmware files here")
-			opacity: 1
-			anchors.horizontalCenter: parent.horizontalCenter
-			wrapMode: Text.WordWrap
-			horizontalAlignment: Text.AlignLeft
-			font.pixelSize: 18
-		}
-
-		Image {
-			id: image1
-			width: 100
-			height: 100
-			opacity: 1
-			anchors.horizontalCenter: parent.horizontalCenter
-			source: "drop_zone.svg"
-		}
-
-		Button {
-			id: browseButton
-			text: qsTr("Browse")
-			isDefault: true
-			anchors.horizontalCenter: parent.horizontalCenter
-		}
-	}
-
- Button {
-	 id: flashButton
-	 x: 556
-	 y: 606
-	 text: qsTr("Next")
-	 visible: false
-	 enabled: true
-	 isDefault: true
-	 anchors.bottom: parent.bottom
-	 anchors.bottomMargin: 8
-	 anchors.right: parent.right
-	 anchors.rightMargin: 8
- }
-}
diff --git a/heimdall-frontend/source/qml/RootForm.qml b/heimdall-frontend/source/qml/RootForm.qml
new file mode 100644
index 0000000..4212048
--- /dev/null
+++ b/heimdall-frontend/source/qml/RootForm.qml
@@ -0,0 +1,114 @@
+import QtQuick 2.4
+import QtQuick.Controls 1.3
+import QtQuick.Layouts 1.1
+
+Item {
+	width: 640
+	height: 460
+
+	RowLayout {
+		anchors.fill: parent
+		spacing: 0
+
+		Rectangle {
+			color: "#222222"
+			width: 172
+			anchors.top: parent.top
+			anchors.topMargin: 0
+			anchors.bottom: parent.bottom
+			anchors.bottomMargin: 0
+
+			ListView {
+				id: list
+				boundsBehavior: Flickable.StopAtBounds
+				anchors.fill: parent
+				focus: true
+
+				highlight: Item {
+					Rectangle {
+						height: 40
+						anchors.right: parent.right
+						anchors.rightMargin: 0
+						anchors.left: parent.left
+						anchors.leftMargin: 0
+						radius: 8
+						color: "#333333"
+					}
+					Rectangle {
+						height: 40
+						anchors.right: parent.right
+						anchors.rightMargin: 8
+						anchors.left: parent.left
+						anchors.leftMargin: 0
+						color: "#333333"
+					}
+				}
+
+				delegate: Item {
+					height: 40
+					anchors.right: parent.right
+					anchors.rightMargin: 12
+					anchors.left: parent.left
+					anchors.leftMargin: 0
+
+					Row {
+						spacing: 8
+
+						Rectangle {
+							width: 40
+							height: 40
+							color: colorCode
+						}
+
+						Text {
+							text: name
+							color: '#ffffff'
+							anchors.verticalCenter: parent.verticalCenter
+						}
+					}
+
+					MouseArea {
+						anchors.fill: parent
+						hoverEnabled: false
+
+						onClicked: {
+							list.currentIndex = index
+							list.forceActiveFocus()
+						}
+					}
+				}
+
+				model: ListModel {
+					ListElement {
+						name: "Load Firmware"
+						colorCode: "red"
+					}
+
+					ListElement {
+						name: "Utilities"
+						colorCode: "blue"
+					}
+
+					ListElement {
+						name: "Settings"
+						colorCode: "green"
+					}
+				}
+			}
+		}
+
+		Rectangle {
+			Layout.fillWidth: true
+			anchors.bottom: parent.bottom
+			anchors.bottomMargin: 0
+			anchors.top: parent.top
+			anchors.topMargin: 0
+
+			DropFiles {
+				id: dropFiles
+				anchors.fill: parent
+			}
+		}
+	}
+
+}
diff --git a/heimdall-frontend/source/qml/RootForm.ui.qml b/heimdall-frontend/source/qml/RootForm.ui.qml
deleted file mode 100644
index bc97a58..0000000
--- a/heimdall-frontend/source/qml/RootForm.ui.qml
+++ /dev/null
@@ -1,73 +0,0 @@
-import QtQuick 2.4
-import QtQuick.Controls 1.3
-import QtQuick.Layouts 1.1
-
-Rectangle {
-	id: rectangle1
-	width: 620
-	height: 460
-	color: "#eeeeee"
-
-	RowLayout {
-		id: rowLayout1
-		anchors.fill: parent
-
-		Rectangle {
-			id: rectangle6
-			color: "#222222"
-			width: 180
-			anchors.top: parent.top
-			anchors.topMargin: 0
-			anchors.bottom: parent.bottom
-			anchors.bottomMargin: 0
-
-			ListView {
-				id: listView1
-				anchors.fill: parent
-				delegate: Item {
-					anchors.right: parent.right
-					anchors.rightMargin: 0
-					anchors.left: parent.left
-					anchors.leftMargin: 0
-					height: 40
-					Row {
-						spacing: 8
-
-						Rectangle {
-							width: 40
-							height: 40
-							color: colorCode
-						}
-
-						Text {
-							text: name
-							color: '#eeeeee'
-							anchors.verticalCenter: parent.verticalCenter
-						}
-					}
-				}
-				model: ListModel {
-					ListElement {
-						name: "Load Firmware"
-						colorCode: "red"
-					}
-
-					ListElement {
-						name: "Utilities"
-						colorCode: "blue"
-					}
-
-					ListElement {
-						name: "Configuration"
-						colorCode: "green"
-					}
-				}
-			}
-		}
-		DropFiles {
-			id: dropFiles1
-			Layout.fillWidth: true
-		}
-	}
-
-}
diff --git a/heimdall-frontend/source/qml/qml.qrc b/heimdall-frontend/source/qml/qml.qrc
index 5dbe3d0..25799fc 100644
--- a/heimdall-frontend/source/qml/qml.qrc
+++ b/heimdall-frontend/source/qml/qml.qrc
@@ -2,8 +2,8 @@
     <qresource prefix="/">
         <file>main.qml</file>
         <file>Root.qml</file>
-        <file>RootForm.ui.qml</file>
+        <file>RootForm.qml</file>
         <file>DropFiles.qml</file>
-        <file>DropFilesForm.ui.qml</file>
+        <file>DropFilesForm.qml</file>
     </qresource>
 </RCC>
\ No newline at end of file