styling fixup

examples/mvvmdatasyncquick/DataSyncSampleQuick/main.qml

@@ -1,6 +1,11 @@
 import QtQuick 2.10
 import de.skycoder42.QtMvvm.Quick 1.0
+import QtQuick.Controls.Material 2.3
 
 QtMvvmApp {
+
+	Material.accent: Material.DeepPurple
+	Material.primary: Material.Lime
+
 	title: qsTr("QtMvvm Quick Sample")
 }

src/imports/mvvmdatasyncquick/DataSyncView.qml

@@ -12,7 +12,7 @@ Page {
 	id: _dataSyncView
 	property DataSyncViewModel viewModel: null
 
-	header: ToolBar {
+	header: ContrastToolBar {
 		id: _toolBar
 
 		RowLayout {
@@ -28,30 +28,30 @@ Page {
 				horizontalAlignment: Qt.AlignLeft
 				verticalAlignment: Qt.AlignVCenter
 				Layout.fillWidth: true
-				Layout.minimumHeight: 56
+				Layout.leftMargin: 16
-				Layout.leftMargin: 10
 
 				text: qsTr("Synchronization")
 			}
 
 			ActionButton {
 				id: _syncButton
-				source: "image://svg/de/skycoder42/qtmvvm/quick/icons/ic_sync"
+				icon.name: "view-refresh"
-				toolTip: qsTr("Synchronize")
+				icon.source: "image://svg/de/skycoder42/qtmvvm/quick/icons/ic_sync"
+				text: qsTr("Synchronize")
 				onClicked: viewModel.syncOrConnect()
 			}
 
 			ActionButton {
 				id: _idButton
-				source: "image://svg/de/skycoder42/qtmvvm/quick/icons/ic_fingerprint"
+				icon.source: "image://svg/de/skycoder42/qtmvvm/quick/icons/ic_fingerprint"
-				toolTip: qsTr("Edit Identity")
+				text: qsTr("Edit Identity")
 				onClicked: viewModel.showDeviceInfo()
 			}
 
 			ActionButton {
 				id: _moreButton
-				source: "image://svg/de/skycoder42/qtmvvm/quick/icons/ic_more_vert"
+				icon.source: "image://svg/de/skycoder42/qtmvvm/quick/icons/ic_more_vert"
-				toolTip: qsTr("More…")
+				text: qsTr("More…")
 				checkable: true
 				checked: _moreMenu.visible
 
@@ -102,7 +102,7 @@ Page {
 		ColumnLayout {
 			id: _layout
 			anchors.fill: parent
-			spacing: 14
+			spacing: 16
 
 			Switch {
 				id: _syncSwitch
@@ -180,7 +180,7 @@ Page {
 
 					contentItem: ColumnLayout {
 						id: _delegateLayout
-						spacing: 7
+						spacing: 8
 
 						Label {
 							id: _nameLabel
@@ -237,8 +237,8 @@ Page {
 
 						ActionButton {
 							anchors.fill: parent
-							source: "image://svg/de/skycoder42/qtmvvm/quick/icons/ic_delete_forever"
+							icon.source: "image://svg/de/skycoder42/qtmvvm/quick/icons/ic_delete_forever"
-							toolTip: qsTr("Remove Device")
+							text: qsTr("Remove Device")
 
 							Material.foreground: "white"
 							Universal.foreground: "white"

src/imports/mvvmquick/ActionButton.qml

@@ -6,21 +6,19 @@ import de.skycoder42.QtMvvm.Quick 1.0
 ToolButton {
 	id: _toolButton
 
-	property alias source: _tintIcon.source
+	property string toolTip: _toolButton.text
-	property alias toolTip: _backToolTip.text
 
-	implicitHeight: 56.0
+	display: AbstractButton.IconOnly
-	implicitWidth: 56.0
 
-	contentItem: TintIcon {
+	implicitHeight: 48
-		id: _tintIcon
+	implicitWidth: 48
-		implicitHeight: _toolButton.implicitHeight
+
-		implicitWidth: _toolButton.implicitWidth
+	icon.width: 24
-	}
+	icon.height: 24
 
 	ToolTip {
 		id: _backToolTip
-		Material.foreground: "#FFFFFF"
+		text: _toolButton.toolTip
 	}
 
 	onPressAndHold: {

src/imports/mvvmquick/ContrastToolBar.qml

@@ -0,0 +1,24 @@
+import QtQuick 2.10
+import QtQuick.Controls 2.3
+import QtQuick.Controls.Material 2.3
+
+ToolBar {
+	id: _contrastToolBar
+
+	height: 56
+
+	function accentTextColor(accentColor, baseColor) {
+		var a = (0.299 * accentColor.r + 0.587 * accentColor.g + 0.144 * accentColor.b);
+		if(typeof baseColor !== "undefined") {
+			var b = (0.299 * baseColor.r + 0.587 * baseColor.g + 0.144 * baseColor.b);
+			if (Math.abs(a - b) >= 0.5)
+				return baseColor;
+		}
+		if(a < 0.5)
+			return "#FFFFFF";
+		else
+			return "#000000";
+	}
+
+	Material.foreground: accentTextColor(Material.primary)
+}

src/imports/mvvmquick/InputDialog.qml

@@ -10,7 +10,6 @@ MsgBoxBase {
 
 	ColumnLayout {
 		anchors.fill: parent
-		spacing: 14
 
 		Label {
 			id: _contentLabel

src/imports/mvvmquick/ListSection.qml

@@ -10,7 +10,7 @@ Label {
 	width: parent.width
 	font.bold: true
 	font.capitalization: Font.SmallCaps
-	padding: 14
+	padding: 16
 	bottomPadding: 4
 	text: title + qsTr(":")
 

src/imports/mvvmquick/MsgBoxBase.qml

@@ -18,43 +18,44 @@ Dialog {
 
 	x: parent ? (parent.width - width) / 2 : 0
 	y: parent ? deltaY() : 0
-	width: parent ? Math.min(Math.max(implicitWidth, baseWidth), parent.width - 28) : implicitWidth
+	width: parent ? Math.min(Math.max(implicitWidth, baseWidth), parent.width - 24) : implicitWidth
-	height: parent ? Math.min(implicitHeight, parent.height - 28) : implicitWidth
+	height: parent ? Math.min(implicitHeight, parent.height - 24) : implicitWidth
 	modal: true
 	focus: true
 
 	function deltaY() {
 		var unscaled = Qt.inputMethod.keyboardRectangle.height / Screen.devicePixelRatio;
-		var availHeight = (parent.height + extraHeight) - unscaled - 28;//spacing
+		var availHeight = (parent.height + extraHeight) - unscaled - 24; //margins
 		var rawDelta = (Math.max(0, availHeight - height) / 2);
-		return rawDelta + 14 - extraHeight;//spacing
+		return rawDelta + 12 - extraHeight; //spacing
 	}
 
-	header: RowLayout {
+	header: Pane {
-		spacing: 14
+		id: _headerPane
+		background: Item {}
+		bottomPadding: 0
 
-		TintIcon {
+		RowLayout {
-			id: _icon
+			anchors.fill: parent
-			visible: false
+			spacing: _headerPane.padding
 
-			Layout.preferredWidth: 24
+			TintIcon {
-			Layout.preferredHeight: 24
+				id: _icon
-			Layout.margins: 24
+				visible: false
-			Layout.bottomMargin: 0
+
-			Layout.rightMargin: 0
+				Layout.preferredWidth: 24
-		}
+				Layout.preferredHeight: 24
+				Layout.alignment: Qt.AlignVCenter
+			}
 
-		Label {
+			Label {
-			id: _title
+				id: _title
-			text: msgConfig.title
+				text: msgConfig.title
-			visible: msgConfig.title
+				visible: msgConfig.title
-			elide: Label.ElideRight
+				elide: Label.ElideRight
-			font.bold: true
+				font.bold: true
-			font.pixelSize: 16
+				Layout.fillWidth: true
-			Layout.fillWidth: true
+			}
-			Layout.margins: 24
-			Layout.bottomMargin: 0
-			Layout.leftMargin: _icon.visible ? 0 : 24
 		}
 	}
 

src/imports/mvvmquick/OverviewListView.qml

@@ -25,7 +25,7 @@ ListView {
 			id: grid
 			rows: 2
 			columns: 3
-			columnSpacing: 14
+			columnSpacing: 16
 
 			TintIcon {
 				id: tintIcon

src/imports/mvvmquick/SettingsView.qml

@@ -14,7 +14,7 @@ Page {
 		return !fullClose && _settingsStack.closeAction();
 	}
 
-	header: ToolBar {
+	header: ContrastToolBar {
 		id: _toolBar
 
 		RowLayout {
@@ -26,8 +26,8 @@ Page {
 				id: _labelContainer
 
 				Layout.fillWidth: true
-				Layout.minimumHeight: 56
+				Layout.fillHeight: true
-				Layout.leftMargin: 10
+				Layout.leftMargin: 16
 
 				Label {
 					id: _titleLabel
@@ -56,15 +56,15 @@ Page {
 			ActionButton {
 				id: _searchButton
 				visible: _builder.allowSearch
-				toolTip: qsTr("Search in settings")
+				text: qsTr("Search in settings")
 				onClicked: toggleSearchState()
 			}
 
 			ActionButton {
 				id: _restoreButton
 				visible: _builder.allowRestore
-				source: "image://svg/de/skycoder42/qtmvvm/quick/icons/ic_settings_backup_restore"
+				icon.source: "image://svg/de/skycoder42/qtmvvm/quick/icons/ic_settings_backup_restore"
-				toolTip: qsTr("Restore settings")
+				text: qsTr("Restore settings")
 				onClicked: _builder.restoreDefaults()
 			}
 		}
@@ -75,7 +75,8 @@ Page {
 			name: "title"
 			PropertyChanges {
 				target: _searchButton
-				source: "image://svg/de/skycoder42/qtmvvm/quick/icons/ic_search"
+				icon.name: "search"
+				icon.source: "image://svg/de/skycoder42/qtmvvm/quick/icons/ic_search"
 			}
 			PropertyChanges {
 				target: _titleLabel
@@ -95,7 +96,8 @@ Page {
 			name: "search"
 			PropertyChanges {
 				target: _searchButton
-				source: "image://svg/de/skycoder42/qtmvvm/quick/icons/ic_close"
+				icon.name: "gtk-close"
+				icon.source: "image://svg/de/skycoder42/qtmvvm/quick/icons/ic_close"
 			}
 			PropertyChanges {
 				target: _titleLabel

src/imports/mvvmquick/mvvmquick.pro

@@ -10,19 +10,19 @@ HEADERS += \
 	qtmvvmquick_plugin.h \
 	qqmlquickpresenter.h \
 	svgimageprovider.h \
-    settingsuibuilder.h \
+	settingsuibuilder.h \
-    settingssectionmodel.h \
+	settingssectionmodel.h \
-    multifilterproxymodel.h \
+	multifilterproxymodel.h \
-    settingsentrymodel.h
+	settingsentrymodel.h
 
 SOURCES += \
 	qtmvvmquick_plugin.cpp \
 	qqmlquickpresenter.cpp \
 	svgimageprovider.cpp \
-    settingsuibuilder.cpp \
+	settingsuibuilder.cpp \
-    settingssectionmodel.cpp \
+	settingssectionmodel.cpp \
-    multifilterproxymodel.cpp \
+	multifilterproxymodel.cpp \
-    settingsentrymodel.cpp
+	settingsentrymodel.cpp
 
 QML_FILES += \
 	QtMvvmApp.qml \
@@ -31,6 +31,7 @@ QML_FILES += \
 	PopupPresenter.qml \
 	DialogPresenter.qml \
 	TintIcon.qml \
+	ContrastToolBar.qml \
 	ActionButton.qml \
 	MsgBoxBase.qml \
 	MsgBox.qml \

src/imports/mvvmquick/qmldir

@@ -16,6 +16,7 @@ internal ListSection ListSection.qml
 internal SectionListView SectionListView.qml
 internal OverviewListView OverviewListView.qml
 
+ContrastToolBar 1.0 ContrastToolBar.qml
 ActionButton 1.0 ActionButton.qml
 
 PresenterProgress 1.0 PresenterProgress.qml