styling fixup

8 years ago · 971f2c19c5
11 changed files with 99 additions and 68 deletions
--- a/examples/mvvmdatasyncquick/DataSyncSampleQuick/main.qml
+++ b/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")
 }
--- a/src/imports/mvvmdatasyncquick/DataSyncView.qml
+++ b/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: 10
+				Layout.leftMargin: 16

 				text: qsTr("Synchronization")
 			}

 			ActionButton {
 				id: _syncButton
-				source: "image://svg/de/skycoder42/qtmvvm/quick/icons/ic_sync"
-				toolTip: qsTr("Synchronize")
+				icon.name: "view-refresh"
+				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"
-				toolTip: qsTr("Edit Identity")
+				icon.source: "image://svg/de/skycoder42/qtmvvm/quick/icons/ic_fingerprint"
+				text: qsTr("Edit Identity")
 				onClicked: viewModel.showDeviceInfo()
 			}

 			ActionButton {
 				id: _moreButton
-				source: "image://svg/de/skycoder42/qtmvvm/quick/icons/ic_more_vert"
-				toolTip: qsTr("More…")
+				icon.source: "image://svg/de/skycoder42/qtmvvm/quick/icons/ic_more_vert"
+				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"
-							toolTip: qsTr("Remove Device")
+							icon.source: "image://svg/de/skycoder42/qtmvvm/quick/icons/ic_delete_forever"
+							text: qsTr("Remove Device")

 							Material.foreground: "white"
 							Universal.foreground: "white"
--- a/src/imports/mvvmquick/ActionButton.qml
+++ b/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 alias toolTip: _backToolTip.text
+	property string toolTip: _toolButton.text

-	implicitHeight: 56.0
-	implicitWidth: 56.0
+	display: AbstractButton.IconOnly

-	contentItem: TintIcon {
-		id: _tintIcon
-		implicitHeight: _toolButton.implicitHeight
-		implicitWidth: _toolButton.implicitWidth
-	}
+	implicitHeight: 48
+	implicitWidth: 48
+
+	icon.width: 24
+	icon.height: 24

 	ToolTip {
 		id: _backToolTip
-		Material.foreground: "#FFFFFF"
+		text: _toolButton.toolTip
 	}

 	onPressAndHold: {
--- a/src/imports/mvvmquick/ContrastToolBar.qml
+++ b/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)
+}
--- a/src/imports/mvvmquick/InputDialog.qml
+++ b/src/imports/mvvmquick/InputDialog.qml
@ -10,7 +10,6 @@ MsgBoxBase {

 	ColumnLayout {
 		anchors.fill: parent
-		spacing: 14

 		Label {
 			id: _contentLabel
--- a/src/imports/mvvmquick/ListSection.qml
+++ b/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(":")

--- a/src/imports/mvvmquick/MsgBoxBase.qml
+++ b/src/imports/mvvmquick/MsgBoxBase.qml
@ -18,20 +18,26 @@ Dialog {

 	x: parent ? (parent.width - width) / 2 : 0
 	y: parent ? deltaY() : 0
-	width: parent ? Math.min(Math.max(implicitWidth, baseWidth), parent.width - 28) : implicitWidth
-	height: parent ? Math.min(implicitHeight, parent.height - 28) : implicitWidth
+	width: parent ? Math.min(Math.max(implicitWidth, baseWidth), parent.width - 24) : 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 {
-		spacing: 14
+	header: Pane {
+		id: _headerPane
+		background: Item {}
+		bottomPadding: 0
+
+		RowLayout {
+			anchors.fill: parent
+			spacing: _headerPane.padding

 			TintIcon {
 				id: _icon
@ -39,9 +45,7 @@ Dialog {

 				Layout.preferredWidth: 24
 				Layout.preferredHeight: 24
-			Layout.margins: 24
-			Layout.bottomMargin: 0
-			Layout.rightMargin: 0
+				Layout.alignment: Qt.AlignVCenter
 			}

 			Label {
@ -50,11 +54,8 @@ Dialog {
 				visible: msgConfig.title
 				elide: Label.ElideRight
 				font.bold: true
-			font.pixelSize: 16
 				Layout.fillWidth: true
-			Layout.margins: 24
-			Layout.bottomMargin: 0
-			Layout.leftMargin: _icon.visible ? 0 : 24
+			}
 		}
 	}

--- a/src/imports/mvvmquick/OverviewListView.qml
+++ b/src/imports/mvvmquick/OverviewListView.qml
@ -25,7 +25,7 @@ ListView {
 			id: grid
 			rows: 2
 			columns: 3
-			columnSpacing: 14
+			columnSpacing: 16

 			TintIcon {
 				id: tintIcon
--- a/src/imports/mvvmquick/SettingsView.qml
+++ b/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.leftMargin: 10
+				Layout.fillHeight: true
+				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"
-				toolTip: qsTr("Restore settings")
+				icon.source: "image://svg/de/skycoder42/qtmvvm/quick/icons/ic_settings_backup_restore"
+				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
--- a/src/imports/mvvmquick/mvvmquick.pro
+++ b/src/imports/mvvmquick/mvvmquick.pro
@ -31,6 +31,7 @@ QML_FILES += \
 	PopupPresenter.qml \
 	DialogPresenter.qml \
 	TintIcon.qml \
+	ContrastToolBar.qml \
 	ActionButton.qml \
 	MsgBoxBase.qml \
 	MsgBox.qml \
--- a/src/imports/mvvmquick/qmldir
+++ b/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