UI can now add some widgets around

10 files changed, 224 insertions, 31 deletions

diff --git a/qml/pages/AddWidget.qml b/qml/pages/AddWidget.qml
new file mode 100644
index 0000000..50bf63d
--- /dev/null
+++ b/qml/pages/AddWidget.qml
@@ -0,0 +1,36 @@
+import QtQuick 2.0
+import Sailfish.Silica 1.0
+import com.javispedro.salmeta 1.0
+
+Page {
+	id: page
+
+	property int addToPage
+	property int addToPos
+
+	SilicaListView {
+		id: allWidgetsListView
+		anchors.fill: parent
+
+		model: allWidgets
+
+		header: PageHeader {
+			title: "Add widget"
+		}
+
+		delegate : BackgroundItem {
+			contentHeight: Theme.itemSizeMedium
+
+			Label {
+				text: url
+				truncationMode: TruncationMode.Elide
+				color: highlighted ? Theme.highlightColor : Theme.primaryColor
+			}
+
+			onClicked: {
+				curWidgets.addWidget(url, addToPage, addToPos, size);
+				pageStack.pop();
+			}
+		}
+	}
+}
diff --git a/qml/pages/FirstPage.qml b/qml/pages/MainPage.qml
index b86029e..5448754 100644
--- a/qml/pages/FirstPage.qml
+++ b/qml/pages/MainPage.qml
@@ -2,14 +2,13 @@ import QtQuick 2.0
 import Sailfish.Silica 1.0
 import Sailfish.Bluetooth 1.0
 import org.nemomobile.configuration 1.0
-import com.javispedro.salmeta 1.0
 
 Page {
 	id: page
 
 	ConfigurationValue {
 		id: deviceAddress
-		key: settingsPrefix + "/address"
+		key: curSettingsPrefix + "/address"
 		defaultValue: "Select"
 	}
 
@@ -46,7 +45,7 @@ Page {
 					var dialog = pageStack.push("Sailfish.Bluetooth.BluetoothDevicePickerDialog");
 
 					dialog.selectedDeviceChanged.connect(function() {
-						if (dialog.selectedDevice != "") {
+						if (dialog.selectedDevice !== "") {
 							deviceAddress.value = dialog.selectedDevice
 						}
 					});
@@ -57,10 +56,44 @@ Page {
 				text: qsTr("Widgets");
 			}
 
-			WatchView {
-				anchors.horizontalCenter: parent.horizontalCenter
+			Item {
 				width: 96 * 4
 				height: 96 * 4
+				anchors.horizontalCenter: parent.horizontalCenter
+
+				WatchView {
+					id: watchView
+					anchors.centerIn: parent
+					scale: 4
+				}
+			}
+
+			Row {
+				anchors.horizontalCenter: parent.horizontalCenter
+				spacing: 8
+
+				Repeater {
+					model: 4
+
+					Rectangle {
+						// TODO These should be GlassItem.
+						width: 16
+						height: 16
+						radius: 8
+
+						color: "white"
+						opacity: watchView.curPage == index ? 0.9 : 0.3
+					}
+				}
+			}
+
+			SectionHeader {
+				text: qsTr("Notifications");
+			}
+
+			Label {
+				x: Theme.paddingLarge
+				text: "TODO"
 			}
 		}
 	}
diff --git a/qml/pages/WatchView.qml b/qml/pages/WatchView.qml
new file mode 100644
index 0000000..e738f4e
--- /dev/null
+++ b/qml/pages/WatchView.qml
@@ -0,0 +1,45 @@
+import QtQuick 2.0
+import "../watch"
+
+Flickable {
+	id: watchView
+	width: 96
+	height: 96
+	clip: true
+	flickableDirection: Flickable.HorizontalFlick
+
+	property int curPage: 0
+
+	WidgetView {
+		id: widgetView
+		model: curWidgets
+		editMode: true
+		onEmptyWidgetClicked: {
+			pageStack.push(Qt.resolvedUrl("AddWidget.qml"), {
+							   'addToPage': page,
+							   'addToPos': pos
+						   });
+		}
+	}
+
+	contentWidth: widgetView.width
+	contentHeight: widgetView.height
+
+	NumberAnimation {
+		id: pivotAnim
+		targets: watchView
+		property: "contentX"
+		to: curPage * watchView.width
+		duration: 100
+		easing.type: Easing.InOutQuad
+	}
+
+	onMovementStarted: {
+		pivotAnim.stop()
+	}
+
+	onMovementEnded: {
+		curPage = Math.round(watchView.contentX / watchView.width)
+		pivotAnim.start()
+	}
+}
diff --git a/qml/salmeta.qml b/qml/salmeta.qml
index bb031a4..e2f2896 100644
--- a/qml/salmeta.qml
+++ b/qml/salmeta.qml
@@ -34,8 +34,6 @@ import "pages"
 
 ApplicationWindow
 {
-    initialPage: Component { FirstPage { } }
+	initialPage: Component { MainPage { } }
     cover: Qt.resolvedUrl("cover/CoverPage.qml")
 }
-
-
diff --git a/qml/watch/WidgetView.qml b/qml/watch/WidgetView.qml
new file mode 100644
index 0000000..9e64fac
--- /dev/null
+++ b/qml/watch/WidgetView.qml
@@ -0,0 +1,93 @@
+import QtQuick 2.0
+import com.javispedro.salmeta 1.0
+
+Rectangle {
+	id: view
+	width: 96*4
+	height: 96
+
+	color: "white";
+
+	property alias model: rep.model
+	property bool editMode: false
+
+	signal emptyWidgetClicked(int page, int pos)
+
+	Grid {
+		id: editGrid
+		anchors.fill: parent
+		columns: 2 * 4
+		rows: 2
+		visible: editMode
+
+		function _calculatePagePosFromIndex(index) {
+			switch (index) {
+			case 0:  return [0, 0];
+			case 1:  return [0, 1];
+			case 8:  return [0, 2];
+			case 9:  return [0, 3];
+			case 2:  return [1, 0];
+			case 3:  return [1, 1];
+			case 10: return [1, 2];
+			case 11: return [1, 3];
+			case 4:  return [2, 0];
+			case 5:  return [2, 1];
+			case 12: return [2, 2];
+			case 13: return [2, 3];
+			case 6:  return [3, 0];
+			case 7:  return [3, 1];
+			case 14: return [3, 2];
+			case 15: return [3, 3];
+			}
+		}
+
+		Repeater {
+			model: 16
+			Rectangle {
+				width: 96 / 2
+				height: 96 / 2
+				Image {
+					anchors.centerIn: parent
+					source: "add_widget.png"
+				}
+				MouseArea {
+					anchors.fill: parent
+					onClicked: {
+						var pagePos = editGrid._calculatePagePosFromIndex(index);
+						view.emptyWidgetClicked(pagePos[0], pagePos[1]);
+					}
+				}
+			}
+		}
+	}
+
+	Repeater {
+		id: rep
+
+		Item {
+			id: widgetItem
+
+			x: (model.page * 96) + (model.position === WidgetInfo.PosNE || model.position === WidgetInfo.PosSE ? 96 / 2 : 0)
+			y: (model.position === WidgetInfo.PosSE || model.position === WidgetInfo.PosSW ? 96 / 2 : 0)
+			width: model.size === WidgetInfo.Size2QHorizontal | model.size === WidgetInfo.Size4Q ? 96 : 96 / 2
+			height: model.size === WidgetInfo.Size2QVertical | model.size === WidgetInfo.Size4Q ? 96 : 96 / 2
+
+			visible: widgetLoader.status === Loader.Ready;
+
+			Loader {
+				id: widgetLoader
+				anchors.fill: parent
+				source: url
+			}
+
+			MouseArea {
+				anchors.fill: parent
+				enabled: editMode
+
+				onClicked: {
+					curWidgets.removeWidget(index);
+				}
+			}
+		}
+	}
+}
diff --git a/qml/watch/add_widget.png b/qml/watch/add_widget.png
new file mode 100644
index 0000000..97f5bc4
--- /dev/null
+++ b/qml/watch/add_widget.png
diff --git a/qml/watch/faces/builtinface4.png b/qml/watch/faces/builtinface4.png
new file mode 100644
index 0000000..eb05c95
--- /dev/null
+++ b/qml/watch/faces/builtinface4.png
diff --git a/qml/watch/faces/builtinface4.qml b/qml/watch/faces/builtinface4.qml
new file mode 100644
index 0000000..f9eff50
--- /dev/null
+++ b/qml/watch/faces/builtinface4.qml
@@ -0,0 +1,11 @@
+import QtQuick 2.0
+
+Rectangle {
+	width: 96
+	height: 96
+
+	Image {
+		anchors.fill: parent
+		source: "builtinface4.png"
+	}
+}
diff --git a/qml/watch/main.qml b/qml/watch/main.qml
deleted file mode 100644
index 200a8b0..0000000
--- a/qml/watch/main.qml
+++ /dev/null
@@ -1,8 +0,0 @@
-import QtQuick 2.0
-
-Rectangle {
-    width: 96
-    height: 96
-
-    color: "white"
-}
diff --git a/qml/widgetview.qml b/qml/widgetview.qml
deleted file mode 100644
index 077431d..0000000
--- a/qml/widgetview.qml
+++ /dev/null
@@ -1,15 +0,0 @@
-import QtQuick 2.0
-
-Rectangle {
-    width: 96*4
-    height: 96
-
-    color: Qt.rgba(0, 0, 0, 1);
-
-    Repeater {
-        model: 16
-        Loader {
-
-        }
-    }
-}