Use consistent adaptive buttons

src/qml/AboutDialog.qml

@@ -35,6 +35,8 @@ import org.kde.kirigami 2.8 as Kirigami
 
 import im.kaidan.kaidan 1.0
 
+import "elements"
+
 Controls.Dialog {
 	id: aboutDialog
 	modal: true
@@ -97,11 +99,9 @@ Controls.Dialog {
 				horizontalAlignment: Qt.AlignHCenter
 			}
 
-			Controls.ToolButton {
-				text: qsTr("View source code online")
+			CenteredAdaptiveButton {
+				label.text: qsTr("View source code online")
 				onClicked: Qt.openUrlExternally(Utils.applicationSourceCodeUrl())
-				Layout.fillWidth: true
-				Layout.alignment: Qt.AlignHCenter
 			}
 		}
 	}

src/qml/LoginPage.qml

@@ -29,10 +29,10 @@
  */
 
 import QtQuick 2.7
-import QtQuick.Controls 2.3 as Controls
-import QtQuick.Controls.Material 2.3
 import QtQuick.Layouts 1.3
+import QtQuick.Controls 2.3 as Controls
 import org.kde.kirigami 2.8 as Kirigami
+
 import im.kaidan.kaidan 1.0
 
 import "elements"
@@ -94,11 +94,9 @@ Kirigami.Page {
 			}
 
 			// Connect button
-			Button {
+			CenteredAdaptiveHighlightedButton {
 				id: connectButton
-				Layout.fillWidth: true
-				highlighted: true
-				Kirigami.Theme.backgroundColor: Material.accent
+				label.text: qsTr("Connect")
 
 				state: kaidan.connectionState !== Enums.StateDisconnected ? "connecting" : ""
 				states: [
@@ -106,13 +104,11 @@ Kirigami.Page {
 						name: "connecting"
 						PropertyChanges {
 							target: connectButton
+							label.text: "<i>" + qsTr("Connecting…") + "</i>"
+							label.color: "black"
+							label.textFormat: Text.StyledText
 							enabled: false
 						}
-						PropertyChanges {
-							target: connectLabel
-							text: "<i>" + qsTr("Connecting…") + "</i>"
-							color: "black"
-						}
 					}
 				]
 
@@ -122,14 +118,6 @@ Kirigami.Page {
 					kaidan.password = passField.text
 					kaidan.mainConnect()
 				}
-
-				Controls.Label {
-					id: connectLabel
-					anchors.centerIn: connectButton
-					text: qsTr("Connect")
-					color: Kirigami.Theme.highlightedTextColor
-					textFormat: Text.StyledText
-				}
 			}
 
 			// connect when return was pressed

src/qml/elements/CenteredAdaptiveButton.qml

+/*
+ *  Kaidan - A user-friendly XMPP client for every device!
+ *
+ *  Copyright (C) 2016-2019 Kaidan developers and contributors
+ *  (see the LICENSE file for a full list of copyright authors)
+ *
+ *  Kaidan is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  In addition, as a special exception, the author of Kaidan gives
+ *  permission to link the code of its release with the OpenSSL
+ *  project's "OpenSSL" library (or with modified versions of it that
+ *  use the same license as the "OpenSSL" library), and distribute the
+ *  linked executables. You must obey the GNU General Public License in
+ *  all respects for all of the code used other than "OpenSSL". If you
+ *  modify this file, you may extend this exception to your version of
+ *  the file, but you are not obligated to do so.  If you do not wish to
+ *  do so, delete this exception statement from your version.
+ *
+ *  Kaidan is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with Kaidan.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.7
+import QtQuick.Layouts 1.11
+import QtQuick.Controls 2.4 as Controls
+
+/**
+ * This is a centered button having an adjustable label and fitting its parent's width.
+ */
+Button {
+	property alias label: label
+
+	Layout.alignment: Qt.AlignHCenter
+	Layout.fillWidth: true
+
+	Controls.Label {
+		id: label
+		anchors.centerIn: parent
+		textFormat: Text.PlainText
+	}
+}

src/qml/elements/CenteredAdaptiveHighlightedButton.qml

+/*
+ *  Kaidan - A user-friendly XMPP client for every device!
+ *
+ *  Copyright (C) 2016-2019 Kaidan developers and contributors
+ *  (see the LICENSE file for a full list of copyright authors)
+ *
+ *  Kaidan is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  In addition, as a special exception, the author of Kaidan gives
+ *  permission to link the code of its release with the OpenSSL
+ *  project's "OpenSSL" library (or with modified versions of it that
+ *  use the same license as the "OpenSSL" library), and distribute the
+ *  linked executables. You must obey the GNU General Public License in
+ *  all respects for all of the code used other than "OpenSSL". If you
+ *  modify this file, you may extend this exception to your version of
+ *  the file, but you are not obligated to do so.  If you do not wish to
+ *  do so, delete this exception statement from your version.
+ *
+ *  Kaidan is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with Kaidan.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick.Controls.Material 2.2 as Material
+import org.kde.kirigami 2.8 as Kirigami
+
+/**
+ * This is a highlighted button.
+ *
+ * It is used for main actions.
+ */
+CenteredAdaptiveButton {
+	label.color: Kirigami.Theme.highlightedTextColor
+
+	Kirigami.Theme.backgroundColor: Material.Material.accent
+	highlighted: true
+}

src/qml/qml.qrc

@@ -22,6 +22,8 @@
 		<file>elements/RoundedImage.qml</file>
 		<file>elements/RoundImage.qml</file>
 		<file>elements/Button.qml</file>
+		<file>elements/CenteredAdaptiveButton.qml</file>
+		<file>elements/CenteredAdaptiveHighlightedButton.qml</file>
 		<file>elements/IconButton.qml</file>
 		<file>elements/FileChooser.qml</file>
 		<file>elements/FileChooserDesktop.qml</file>