Implementation of .btn & primary reuses it

4 files changed, 61 insertions, 34 deletions

diff --git a/Button/Btn.ui.qml b/Button/Btn.ui.qml
new file mode 100644
index 0000000..cdf730b
--- /dev/null
+++ b/Button/Btn.ui.qml
@@ -0,0 +1,25 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import Bootstrap 5.3
+
+Button {
+	id: button
+	horizontalPadding: Bootstrap.btnPaddingX
+	verticalPadding: Bootstrap.btnPaddingY
+	font: Bootstrap.btnFont
+	contentItem: Text {
+		text: button.text
+		font: button.font
+		color: Bootstrap.btnColor
+		horizontalAlignment: Text.AlignHCenter
+		verticalAlignment: Text.AlignVCenter
+	}
+	background: Rectangle {
+		color: Bootstrap.btnBg
+		border {
+			width: Bootstrap.btnBorderWidth
+			color: Bootstrap.btnBorderColor
+		}
+		radius: Bootstrap.btnBorderRadius
+	}
+}
diff --git a/Button/Primary.ui.qml b/Button/Primary.ui.qml
index 831430a..dec0148 100644
--- a/Button/Primary.ui.qml
+++ b/Button/Primary.ui.qml
@@ -2,27 +2,21 @@ import QtQuick 2.15
 import QtQuick.Controls 2.15
 import Bootstrap 5.3
 
-Button {
+Btn {
 	id: button
-	horizontalPadding: 16
-	verticalPadding: 8
-	font: Bootstrap.btnFont
-	contentItem: Text {
-		text: button.text
-		font: button.font
-		color: Bootstrap.btnColor
-		horizontalAlignment: Text.AlignHCenter
-		verticalAlignment: Text.AlignVCenter
-	}
 	background: Rectangle {
-		color: button.down ? Bootstrap.btnActiveBG : button.enabled
-			? Bootstrap.btnBg : Bootstrap.btnDisabledBg
+		color: button.down ? Bootstrap.btnPrimaryActiveBG
+			: button.enabled
+			? Bootstrap.btnPrimaryBg
+			: Bootstrap.btnPrimaryDisabledBg
 		border {
-			color: button.down ? Bootstrap.btnActiveBorderColor
-				: button.enabled ? Bootstrap.btnBorderColor
-				: Bootstrap.btnDisabledBorderColor
-			width: 1
+			color: button.down
+				? Bootstrap.btnPrimaryActiveBorderColor
+				: button.enabled
+				? Bootstrap.btnPrimaryBorderColor
+				: Bootstrap.btnPrimaryDisabledBorderColor
+			width: Bootstrap.btnBorderWidth
 		}
-		radius: 5.2
+		radius: Bootstrap.btnBorderRadius
 	}
 }
diff --git a/Eduport.qrc b/Eduport.qrc
index f2fbe9b..d165114 100644
--- a/Eduport.qrc
+++ b/Eduport.qrc
@@ -16,6 +16,7 @@
 		<file>Label/H1.ui.qml</file>
 		<file>Label/Display6.ui.qml</file>
 		<file>TextField/Input.ui.qml</file>
+		<file>Button/Btn.ui.qml</file>
 		<file>Button/Primary.ui.qml</file>
 	</qresource>
 </RCC>
diff --git a/imports/Bootstrap/Bootstrap.qml b/imports/Bootstrap/Bootstrap.qml
index 57051ba..31c6aa3 100644
--- a/imports/Bootstrap/Bootstrap.qml
+++ b/imports/Bootstrap/Bootstrap.qml
@@ -4,13 +4,30 @@ import QtQuick 2.15
 QtObject {
 	readonly property real badgeFontSize: 13.6
 
+	readonly property real btnPaddingX: 16
+	readonly property real btnPaddingY: 8
+	readonly property font btnFont: Qt.font({
+		family: haveRoboto ? "Roboto" : medium.name,
+		weight: Font.Medium,
+		pointSize: 15
+	})
 	readonly property color btnColor: "#ffffff"
-	readonly property color btnBg: "#066ac9"
-	readonly property color btnBorderColor: "#066ac9"
-	readonly property color btnActiveBg: "#0555a1"
-	readonly property color btnActiveBorderColor: "#055097"
-	readonly property color btnDisabledBg: "#a6066ac9"
-	readonly property color btnDisabledBorderColor: "#a6066ac9"
+	readonly property color btnBg: "transparent"
+	readonly property real btnBorderWidth: 1
+	readonly property color btnBorderColor: "transparent"
+	readonly property real btnBorderRadius: 5.2
+	readonly property color btnPrimaryBg: "#066ac9"
+	readonly property color btnPrimaryBorderColor: "#066ac9"
+	readonly property color btnPrimaryActiveBg: "#0555a1"
+	readonly property color btnPrimaryActiveBorderColor: "#055097"
+	readonly property color btnPrimaryDisabledBg: "#a6066ac9"
+	readonly property color btnPrimaryDisabledBorderColor: "#a6066ac9"
+
+	readonly property font bodyFont: Qt.font({
+		family: haveRoboto ? "Roboto" : regular.name,
+		weight: Font.Normal,
+		pointSize: 15
+	})
 
 	readonly property bool haveRoboto: Qt.platform.os === "android"
 					|| Qt.platform.os === "linux"
@@ -23,14 +40,4 @@ QtObject {
 	readonly property FontLoader regular: FontLoader {
 		source: haveRoboto ? "" : "../../Roboto/Roboto-Regular.ttf"
 	}
-	readonly property font bodyFont: Qt.font({
-		family: haveRoboto ? "Roboto" : regular.name,
-		weight: Font.Normal,
-		pointSize: 15
-	})
-	readonly property font btnFont: Qt.font({
-		family: haveRoboto ? "Roboto" : medium.name,
-		weight: Font.Medium,
-		pointSize: 15
-	})
 }