Add Primary Btn

2 years ago · 663550d552
18 changed files with 156 additions and 20 deletions
--- a/Page1.qml
+++ b/Page1.qml
@ -0,0 +1,18 @@
+import QtQuick 2.13
+import "./SepantaUiKit/SKBtn"
+
+Item {
+    anchors.fill: parent
+    Grid {
+        spacing: 20
+        anchors.margins: 20
+        anchors.fill: parent
+        SKBtn {
+            text: "Enable"
+        }
+        SKBtn {
+            text: "Disable"
+            isEnable: false
+        }
+    }
+}
--- a/SepantaUiKit/Colors.qml
+++ b/SepantaUiKit/Colors.qml
@ -1,4 +1,6 @@
-import QtQuick 2.15
+pragma Singleton
+
+import QtQuick 2.13

 Item {
    //Primary
@ -6,7 +8,6 @@ Item {
    property string primaryPressed: "#3CFCE6"
    //Secondary
    property string secondaryEnable: "#007dff"
-
    property string secondaryPressed: "#abb5be"
    //Tertiary
    property string tertiaryEnable: "#E9E8E8"
--- a/SepantaUiKit/Fonts.qml
+++ b/SepantaUiKit/Fonts.qml
@ -1,40 +1,42 @@
-import QtQuick 2.15
+pragma Singleton
+
+import QtQuick 2.13

 Item {
    property font h1: Qt.font({
                                  "family": 'Roboto',
                                  "weight": Font.Normal,
                                  "italic": false,
-                                  "pointSize": 40
+                                  "pixelSize": 40
                              })
    property font h2: Qt.font({
                                  "family": 'Roboto',
                                  "weight": Font.Medium,
                                  "italic": false,
-                                  "pointSize": 20
+                                  "pixelSize": 20
                              })
    property font h3: Qt.font({
                                  "family": 'Roboto',
                                  "weight": Font.Bold,
                                  "italic": false,
-                                  "pointSize": 16
+                                  "pixelSize": 16
                              })
    property font h4: Qt.font({
                                  "family": 'Roboto',
                                  "weight": Font.DemiBold,
                                  "italic": false,
-                                  "pointSize": 16
+                                  "pixelSize": 16
                              })
    property font h5: Qt.font({
                                  "family": 'Roboto',
                                  "weight": Font.Normal,
                                  "italic": false,
-                                  "pointSize": 16
+                                  "pixelSize": 16
                              })
    property font h6: Qt.font({
                                  "family": 'Roboto',
                                  "weight": Font.Normal,
                                  "italic": false,
-                                  "pointSize": 12
+                                  "pixelSize": 12
                              })
 }
--- a/SepantaUiKit/SKBtn/SKBtn.qml
+++ b/SepantaUiKit/SKBtn/SKBtn.qml
@ -1,5 +1,87 @@
-import QtQuick 2.15
+import QtQuick 2.13
+import QtQml 2.13
+import "qrc:/SepantaUiKit"

 Item {
+    id: root
+    width: 140
+    height: 50
+    property bool isEnable: true
+    onIsEnableChanged: enableHandle()
+    function enableHandle() {
+        if (isEnable) {
+            stateOfComponent = Setting.Enable
+        } else {
+            stateOfComponent = Setting.Disabel
+        }
+    }

+    property var stateOfComponent: Setting.Enable
+    onStateOfComponentChanged: stateChanged()
+    property alias text: idText.text
+    Rectangle {
+        id: idBackGround
+        anchors.fill: parent
+        radius: Setting.radius
+
+        Text {
+            id: idText
+            anchors.fill: parent
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            color: Colors.balck
+            font: Fonts.h3
+            Component.onCompleted: console.log(JSON.stringify(idText.fontInfo))
+        }
+        Behavior on color {
+            ColorAnimation {
+                duration: Setting.animationDuration
+            }
+        }
+    }
+    MouseArea {
+        anchors.fill: parent
+        hoverEnabled: true
+        onHoveredChanged: {
+            if (isEnable) {
+                if (containsMouse) {
+                    stateOfComponent = Setting.Hoverd
+                } else {
+                    stateOfComponent = Setting.Enable
+                }
+            }
+        }
+        onPressed: {
+            if (isEnable) {
+                stateOfComponent = Setting.Pressed
+            }
+        }
+        onReleased: {
+            if (isEnable) {
+                stateOfComponent = Setting.Enable
+            }
+        }
+    }
+
+    function stateChanged() {
+        switch (stateOfComponent) {
+        case Setting.Enable:
+            idBackGround.color = Colors.primaryEnable
+            break
+        case Setting.Pressed:
+            idBackGround.color = Colors.primaryPressed
+            break
+        case Setting.Hoverd:
+            idBackGround.color = Qt.lighter(Colors.primaryEnable, 1.07)
+            break
+        case Setting.Disabel:
+            idBackGround.color = Qt.darker(Colors.primaryEnable, 4)
+            break
+        }
+    }
+
+    Component.onCompleted: {
+        enableHandle()
+        stateChanged()
+    }
 }
--- a/SepantaUiKit/SKBtnIcon/SKBtnIcon.qml
+++ b/SepantaUiKit/SKBtnIcon/SKBtnIcon.qml
@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick 2.13

 Item {

--- a/SepantaUiKit/SKCheckBox/SKCheckBox.qml
+++ b/SepantaUiKit/SKCheckBox/SKCheckBox.qml
@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick 2.13

 Item {

--- a/SepantaUiKit/SKDropDown/SKDropDown.qml
+++ b/SepantaUiKit/SKDropDown/SKDropDown.qml
@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick 2.13

 Item {

--- a/SepantaUiKit/SKMultiOption/SKMultiOption.qml
+++ b/SepantaUiKit/SKMultiOption/SKMultiOption.qml
@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick 2.13

 Item {

--- a/SepantaUiKit/SKMultiOptionWithDropDown/SKMultiOptionWithDropDown.qml
+++ b/SepantaUiKit/SKMultiOptionWithDropDown/SKMultiOptionWithDropDown.qml
@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick 2.13

 Item {

--- a/SepantaUiKit/SKPathSelector/SKPathSelector.qml
+++ b/SepantaUiKit/SKPathSelector/SKPathSelector.qml
@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick 2.13

 Item {

--- a/SepantaUiKit/SKTextField/SKTextField.qml
+++ b/SepantaUiKit/SKTextField/SKTextField.qml
@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick 2.13

 Item {

--- a/SepantaUiKit/Setting.qml
+++ b/SepantaUiKit/Setting.qml
@ -0,0 +1,17 @@
+pragma Singleton
+
+import QtQuick 2.13
+
+Item {
+    property int radius: 25
+    property real disableOpacity: 0.25
+    property real hoverOpacity: 0.20
+    property int animationDuration: 200
+
+    enum State {
+        Enable,
+        Pressed,
+        Hoverd,
+        Disabel
+    }
+}
--- a/SepantaUiKit/SkScrollView/SkScrollView.qml
+++ b/SepantaUiKit/SkScrollView/SkScrollView.qml
@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick 2.13

 Item {

--- a/SepantaUiKit/aCommon/Effects.qml
+++ b/SepantaUiKit/aCommon/Effects.qml
@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick 2.13

 Item {

--- a/SepantaUiKit/aCommon/GradientEffect1.qml
+++ b/SepantaUiKit/aCommon/GradientEffect1.qml
@ -0,0 +1,5 @@
+import QtQuick 2.13
+
+Item {
+
+}
--- a/SepantaUiKit/qmldir
+++ b/SepantaUiKit/qmldir
@ -0,0 +1,3 @@
+singleton Colors 1.0 Colors.qml
+singleton Fonts 1.0 Fonts.qml
+singleton Setting 1.0 Setting.qml
--- a/main.qml
+++ b/main.qml
@ -1,6 +1,5 @@
 import QtQuick 2.13
 import QtQuick.Window 2.13
-import "./SepantaUiKit/SKBtn"
 import QtQuick.Window 2.11

 Window {
@ -11,6 +10,11 @@ Window {
    title: "SepantaUiKit"
    color: "black"

+    Page1 {
+
+    }
+
+
    Shortcut {
        sequence: "F5"
        onActivated: {
--- a/qml.qrc
+++ b/qml.qrc
@ -13,5 +13,9 @@
        <file>SepantaUiKit/SKPathSelector/SKPathSelector.qml</file>
        <file>SepantaUiKit/SkScrollView/SkScrollView.qml</file>
        <file>SepantaUiKit/aCommon/Effects.qml</file>
+        <file>Page1.qml</file>
+        <file>SepantaUiKit/Setting.qml</file>
+        <file>SepantaUiKit/qmldir</file>
+        <file>SepantaUiKit/aCommon/GradientEffect1.qml</file>
    </qresource>
 </RCC>