From 85fb48bc51fed06a50b6178727fdf9e96aea4fc4 Mon Sep 17 00:00:00 2001
From: "Javier S. Pedro" <dev.git@javispedro.com>
Date: Sat, 13 Sep 2014 22:40:39 +0200
Subject: UI can now add some widgets around
---
qml/pages/AddWidget.qml | 36 ++++++++++++++
qml/pages/FirstPage.qml | 69 --------------------------
qml/pages/MainPage.qml | 102 +++++++++++++++++++++++++++++++++++++++
qml/pages/WatchView.qml | 45 +++++++++++++++++
qml/salmeta.qml | 4 +-
qml/watch/WidgetView.qml | 93 +++++++++++++++++++++++++++++++++++
qml/watch/add_widget.png | Bin 0 -> 2475 bytes
qml/watch/faces/builtinface4.png | Bin 0 -> 1025 bytes
qml/watch/faces/builtinface4.qml | 11 +++++
qml/watch/main.qml | 8 ---
qml/widgetview.qml | 15 ------
11 files changed, 288 insertions(+), 95 deletions(-)
create mode 100644 qml/pages/AddWidget.qml
delete mode 100644 qml/pages/FirstPage.qml
create mode 100644 qml/pages/MainPage.qml
create mode 100644 qml/pages/WatchView.qml
create mode 100644 qml/watch/WidgetView.qml
create mode 100644 qml/watch/add_widget.png
create mode 100644 qml/watch/faces/builtinface4.png
create mode 100644 qml/watch/faces/builtinface4.qml
delete mode 100644 qml/watch/main.qml
delete mode 100644 qml/widgetview.qml
(limited to 'qml')
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/FirstPage.qml
deleted file mode 100644
index b86029e..0000000
--- a/qml/pages/FirstPage.qml
+++ /dev/null
@@ -1,69 +0,0 @@
-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"
- defaultValue: "Select"
- }
-
- SilicaFlickable {
- anchors.fill: parent
-
- PullDownMenu {
- MenuItem {
- text: qsTr("Not done yet")
- }
- }
-
- contentHeight: column.height
-
- Column {
- id: column
- width: page.width
- spacing: Theme.paddingLarge
-
- PageHeader {
- title: "Salmeta"
- }
-
- SectionHeader {
- text: qsTr("Device settings");
- }
-
- ValueButton {
- x: Theme.paddingLarge
- label: "Device"
- value: deviceAddress.value
-
- onClicked: {
- var dialog = pageStack.push("Sailfish.Bluetooth.BluetoothDevicePickerDialog");
-
- dialog.selectedDeviceChanged.connect(function() {
- if (dialog.selectedDevice != "") {
- deviceAddress.value = dialog.selectedDevice
- }
- });
- }
- }
-
- SectionHeader {
- text: qsTr("Widgets");
- }
-
- WatchView {
- anchors.horizontalCenter: parent.horizontalCenter
- width: 96 * 4
- height: 96 * 4
- }
- }
- }
-}
-
-
diff --git a/qml/pages/MainPage.qml b/qml/pages/MainPage.qml
new file mode 100644
index 0000000..5448754
--- /dev/null
+++ b/qml/pages/MainPage.qml
@@ -0,0 +1,102 @@
+import QtQuick 2.0
+import Sailfish.Silica 1.0
+import Sailfish.Bluetooth 1.0
+import org.nemomobile.configuration 1.0
+
+Page {
+ id: page
+
+ ConfigurationValue {
+ id: deviceAddress
+ key: curSettingsPrefix + "/address"
+ defaultValue: "Select"
+ }
+
+ SilicaFlickable {
+ anchors.fill: parent
+
+ PullDownMenu {
+ MenuItem {
+ text: qsTr("Not done yet")
+ }
+ }
+
+ contentHeight: column.height
+
+ Column {
+ id: column
+ width: page.width
+ spacing: Theme.paddingLarge
+
+ PageHeader {
+ title: "Salmeta"
+ }
+
+ SectionHeader {
+ text: qsTr("Device settings");
+ }
+
+ ValueButton {
+ x: Theme.paddingLarge
+ label: "Device"
+ value: deviceAddress.value
+
+ onClicked: {
+ var dialog = pageStack.push("Sailfish.Bluetooth.BluetoothDevicePickerDialog");
+
+ dialog.selectedDeviceChanged.connect(function() {
+ if (dialog.selectedDevice !== "") {
+ deviceAddress.value = dialog.selectedDevice
+ }
+ });
+ }
+ }
+
+ SectionHeader {
+ text: qsTr("Widgets");
+ }
+
+ 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
Binary files /dev/null and b/qml/watch/add_widget.png differ
diff --git a/qml/watch/faces/builtinface4.png b/qml/watch/faces/builtinface4.png
new file mode 100644
index 0000000..eb05c95
Binary files /dev/null and b/qml/watch/faces/builtinface4.png differ
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 {
-
- }
- }
-}
--
cgit v1.2.3