wip ds quick ui

src/imports/mvvmdatasyncquick/DataSyncView.qml

@@ -1,5 +1,253 @@
 import QtQuick 2.10
+import QtQuick.Controls 2.3
+import QtQuick.Controls.Material 2.3
+import QtQuick.Controls.Universal 2.3
+import QtQuick.Layouts 1.3
+import de.skycoder42.QtDataSync 4.0
+import de.skycoder42.QtMvvm.Core 1.0
+import de.skycoder42.QtMvvm.Quick 1.0
+import de.skycoder42.QtMvvm.DataSync.Core 1.0
 
-Item {
+Page {
+	id: _dataSyncView
+	property DataSyncViewModel viewModel: null
 
+	header: ToolBar {
+		id: _toolBar
+
+		RowLayout {
+			id: _toolLayout
+			anchors.fill: parent
+			spacing: 0
+
+			Label {
+				id: _titleLabel
+				font.pointSize: 14
+				font.bold: true
+				elide: Label.ElideRight
+				horizontalAlignment: Qt.AlignLeft
+				verticalAlignment: Qt.AlignVCenter
+				Layout.fillWidth: true
+				Layout.minimumHeight: 56
+				Layout.leftMargin: 10
+
+				text: qsTr("Synchronization")
+			}
+
+			ActionButton {
+				id: _syncButton
+				source: "image://svg/de/skycoder42/qtmvvm/quick/icons/ic_search"
+				toolTip: qsTr("Synchronize")
+				onClicked: viewModel.syncOrConnect()
+			}
+
+			ActionButton {
+				id: _idButton
+				source: "image://svg/de/skycoder42/qtmvvm/quick/icons/ic_settings_backup_restore"
+				toolTip: qsTr("Edit Identity")
+				onClicked: viewModel.showDeviceInfo()
+			}
+
+			ActionButton {
+				id: _moreButton
+				source: "image://svg/de/skycoder42/qtmvvm/quick/icons/ic_search"//"image://svg/de/skycoder42/quickextras/icons/ic_more_vert"
+				toolTip: qsTr("More…")
+				checkable: true
+				checked: _moreMenu.visible
+
+				MouseArea { //used to catch mouse events to prevent flickering
+					visible: _moreMenu.visible
+					anchors.fill: parent
+				}
+
+				Menu {
+					id: _moreMenu
+					visible: _moreButton.checked
+
+					MenuItem {
+						text: qsTr("Update exchange key")
+						onClicked: viewModel.accountManager.updateExchangeKey()
+					}
+
+					MenuSeparator {}
+
+					MenuItem {
+						text: qsTr("Reload devices list")
+						onClicked: viewModel.accountManager.listDevices()
+					}
+
+					MenuSeparator {}
+
+					MenuItem {
+						text: qsTr("Change remote server")
+						onClicked: viewModel.changeRemote()
+					}
+
+					MenuItem {
+						text: qsTr("Reset Identity")
+						onClicked: viewModel.performReset()
+					}
+				}
+
+				Component.onCompleted: {
+					if(QuickPresenter.currentStyle !== "Material")
+						_moreMenu.y = Qt.binding(function(){return _moreButton.height});
+				}
+			}
+		}
+	}
+
+	Pane {
+		anchors.fill: parent
+		ColumnLayout {
+			id: _layout
+			anchors.fill: parent
+			spacing: 14
+
+			Switch {
+				id: _syncSwitch
+				text: qsTr("Synchronization enabled")
+				Layout.fillWidth: true
+
+				MvvmBinding {
+					viewModel: _dataSyncView.viewModel.syncManager
+					viewModelProperty: "syncEnabled"
+					view: _syncSwitch
+					viewProperty: "checked"
+				}
+			}
+
+			Label {
+				id: _statusLabel
+				Layout.fillWidth: true
+				text: viewModel.statusString
+				font.bold: true
+				font.pointSize: 16
+				horizontalAlignment: Text.AlignHCenter
+				verticalAlignment: Text.AlignVCenter
+			}
+
+			ProgressBar {
+				id: _syncProgress
+				Layout.fillWidth: true
+				from: 0
+				to: 1
+				value: viewModel.syncManager.syncProgress
+				visible: !_errorLabel.visible
+			}
+
+			Label {
+				id: _errorLabel
+				Layout.fillWidth: true
+				wrapMode: Text.WordWrap
+				text: viewModel.syncManager.lastError
+				visible: text != ""
+				color: "#aa0000"
+				font.bold: true
+			}
+
+			Rectangle {
+				Layout.fillWidth: true
+				Layout.minimumHeight: 1
+				Layout.maximumHeight: 1
+				color: {
+					if(QuickPresenter.currentStyle === "Material")
+						return Material.foreground;
+					else if(QuickPresenter.currentStyle === "Universal")
+						return Universal.foreground;
+					else
+						return "black";
+				}
+			}
+
+			Label {
+				Layout.fillWidth: true
+				text: qsTr("Other Devices:")
+			}
+
+			ListView {
+				id: _devicesList
+				Layout.fillWidth: true
+				Layout.fillHeight: true
+				clip: true
+				model: viewModel.accountModel
+
+				ScrollBar.vertical: ScrollBar {}
+
+				delegate: SwipeDelegate {
+					id: _swipeDelegate
+					width: parent.width
+
+					contentItem: ColumnLayout {
+						id: _delegateLayout
+						spacing: 7
+
+						Label {
+							id: _nameLabel
+							Layout.column: 0
+							Layout.row: 0
+							Layout.fillWidth: true
+							text: name
+						}
+
+						Label {
+							id: _fpLabel
+							Layout.column: 0
+							Layout.row: 1
+							font.pointSize: _nameLabel.font.pointSize * 0.8
+							Layout.fillWidth: true
+							Layout.leftMargin: 7
+							text: fingerPrint
+							elide: Text.ElideMiddle
+							color: Qt.lighter(_nameLabel.color, 2.0)
+						}
+					}
+
+					ListView.onRemove: SequentialAnimation {
+						PropertyAction {
+							target: _swipeDelegate
+							property: "ListView.delayRemove"
+							value: true
+						}
+						NumberAnimation {
+							target: _swipeDelegate
+							property: "height"
+							to: 0
+							easing.type: Easing.InOutQuad
+						}
+						PropertyAction {
+							target: _swipeDelegate
+							property: "ListView.delayRemove"
+							value: false
+						}
+					}
+
+					swipe.right: Rectangle {
+						height: parent.height
+						width: height
+						anchors.right: parent.right
+						color: {
+							if(QuickPresenter.currentStyle === "Material")
+								return Material.color(Material.Red);
+							else if(QuickPresenter.currentStyle === "Universal")
+								return Universal.color(Universal.Red);
+							else
+								return "#FF0000";
+						}
+
+						ActionButton {
+							anchors.fill: parent
+							source: "image://svg/de/skycoder42/qtmvvm/quick/icons/ic_close"
+							toolTip: qsTr("Remove Device")
+
+							Material.foreground: "white"
+							Universal.foreground: "white"
+
+							onClicked: viewModel.accountModel.removeDevice(index)
+						}
+					}
+				}
+			}
+		}
+	}
 }

src/imports/mvvmdatasyncquick/qmldir

@@ -4,3 +4,5 @@ classname QtMvvmDataSyncQuickDeclarativeModule
 typeinfo plugins.qmltypes
 depends de.skycoder42.QtMvvm.DataSync.Core 1.0
 depends de.skycoder42.QtMvvm.Quick 1.0
+
+DataSyncView 1.0 DataSyncView.qml

src/imports/mvvmquick/SettingsView.qml

@@ -31,7 +31,7 @@ Page {
 
 				Label {
 					id: _titleLabel
-					font.pointSize: 16
+					font.pointSize: 14
 					font.bold: true
 					elide: Label.ElideRight
 					horizontalAlignment: Qt.AlignLeft

src/mvvmdatasynccore/accountmodel.cpp

@@ -154,14 +154,24 @@ void AccountModel::update(SyncManager::SyncState state)
 {
 	if(state == SyncManager::Disconnected ||
 	   state == SyncManager::Error ||
-	   state == SyncManager::Initializing)
+	   state == SyncManager::Initializing) {
+		d->reloaded = false;
+		if(!d->devices.isEmpty()) {
+			beginResetModel();
+			d->devices.clear();
+			endResetModel();
+		}
+	} else if(!d->reloaded) {
+		d->reloaded = true;
 		reload();
 	}
+}
 
 // ------------- Private Implementation -------------
 
 AccountModelPrivate::AccountModelPrivate() :
 	accountManager(nullptr),
 	syncManager(nullptr),
-	devices()
+	devices(),
+	reloaded(true)
 {}

src/mvvmdatasynccore/accountmodel_p.h

@@ -14,6 +14,7 @@ public:
 	QtDataSync::AccountManager *accountManager;
 	QtDataSync::SyncManager *syncManager;
 	QList<QtDataSync::DeviceInfo> devices;
+	bool reloaded;
 };
 
 }

src/mvvmdatasyncquick/DataSyncView.qml

@@ -0,0 +1,3 @@
+import de.skycoder42.QtMvvm.DataSync.Quick 1.0 as QtMvvm
+
+QtMvvm.DataSyncView {}

src/mvvmdatasyncquick/mvvmdatasyncquick.pro

@@ -32,3 +32,6 @@ else: include($$OUT_PWD/qpmx_generated.pri)
 qpmx_ts_target.files -= $$OUT_PWD/$$QPMX_WORKINGDIR/qtmvvmdatasyncquick_template.qm
 qpmx_ts_target.files += translations/qtmvvmdatasyncquick_template.ts
 
+RESOURCES += \
+    qtmvvmdatasyncquick_module.qrc
+

src/mvvmdatasyncquick/qtmvvmdatasyncquick_global.h

@@ -9,4 +9,10 @@
 #	define Q_MVVMDATASYNCQUICK_EXPORT Q_DECL_IMPORT
 #endif
 
+namespace QtMvvm {
+
+Q_MVVMDATASYNCQUICK_EXPORT void registerDataSyncQuick();
+
+}
+
 #endif // MVVMDATASYNCQUICK_GLOBAL_H

src/mvvmdatasyncquick/qtmvvmdatasyncquick_module.qrc

@@ -0,0 +1,5 @@
+<RCC>
+    <qresource prefix="/qtmvvm/views">
+        <file>DataSyncView.qml</file>
+    </qresource>
+</RCC>

src/mvvmdatasyncwidgets/datasyncwindow.ui

@@ -181,6 +181,9 @@
      <property name="alternatingRowColors">
       <bool>true</bool>
      </property>
+     <property name="textElideMode">
+      <enum>Qt::ElideMiddle</enum>
+     </property>
      <property name="rootIsDecorated">
       <bool>false</bool>
      </property>