From 85fb48bc51fed06a50b6178727fdf9e96aea4fc4 Mon Sep 17 00:00:00 2001 From: "Javier S. Pedro" 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