From 55ce41a9e32bfdb232734b4e1d4ab59b7741c8b0 Mon Sep 17 00:00:00 2001 From: pouya Date: Mon, 5 Feb 2024 20:11:10 +0330 Subject: [PATCH] Add 3 variants of buttens --- Page1.qml | 23 ++++++++- SepantaUiKit/Colors.qml | 4 +- SepantaUiKit/SKBtn/SKBtn.qml | 98 +++++++++++++++++++++++++++--------- SepantaUiKit/Setting.qml | 11 +++- 4 files changed, 105 insertions(+), 31 deletions(-) diff --git a/Page1.qml b/Page1.qml index ecb3228..c10f1b8 100644 --- a/Page1.qml +++ b/Page1.qml @@ -1,5 +1,6 @@ import QtQuick 2.13 import "./SepantaUiKit/SKBtn" +import "./SepantaUiKit" Item { anchors.fill: parent @@ -8,11 +9,29 @@ Item { anchors.margins: 20 anchors.fill: parent SKBtn { - text: "Enable" + text: "Enable P" } SKBtn { - text: "Disable" + text: "Disable P" isEnable: false } + SKBtn { + text: "Enable S" + buttonType: Setting.Secondary + } + SKBtn { + text: "Disable S" + isEnable: false + buttonType: Setting.Secondary + } + SKBtn { + text: "Enable T" + buttonType: Setting.Tertiary + } + SKBtn { + text: "Disable T" + isEnable: false + buttonType: Setting.Tertiary + } } } diff --git a/SepantaUiKit/Colors.qml b/SepantaUiKit/Colors.qml index cdc474e..69a9f43 100644 --- a/SepantaUiKit/Colors.qml +++ b/SepantaUiKit/Colors.qml @@ -7,11 +7,11 @@ Item { property string primaryEnable: "#B2F7EF" property string primaryPressed: "#3CFCE6" //Secondary - property string secondaryEnable: "#007dff" + property string secondaryEnable: "#D0D8D8" property string secondaryPressed: "#abb5be" //Tertiary property string tertiaryEnable: "#E9E8E8" - property string tertiaryPressed: "#D0D0d0" + property string tertiaryPressed: "#E0E7E9" //Other property string white: "#f8f8f8" property string balck: "#0b0b0b" diff --git a/SepantaUiKit/SKBtn/SKBtn.qml b/SepantaUiKit/SKBtn/SKBtn.qml index 8b207f3..4c20135 100644 --- a/SepantaUiKit/SKBtn/SKBtn.qml +++ b/SepantaUiKit/SKBtn/SKBtn.qml @@ -7,18 +7,13 @@ Item { width: 140 height: 50 property bool isEnable: true - onIsEnableChanged: enableHandle() - function enableHandle() { - if (isEnable) { - stateOfComponent = Setting.Enable - } else { - stateOfComponent = Setting.Disabel - } - } - + property var buttonType: Setting.Primary property var stateOfComponent: Setting.Enable - onStateOfComponentChanged: stateChanged() property alias text: idText.text + + onIsEnableChanged: enableHandle() + onStateOfComponentChanged: stateChanged() + //======================================================================== Rectangle { id: idBackGround anchors.fill: parent @@ -31,7 +26,11 @@ Item { verticalAlignment: Text.AlignVCenter color: Colors.balck font: Fonts.h3 - Component.onCompleted: console.log(JSON.stringify(idText.fontInfo)) + Behavior on color { + ColorAnimation { + duration: Setting.animationDuration + } + } } Behavior on color { ColorAnimation { @@ -62,21 +61,70 @@ Item { } } } - + //======================================================================== 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 + if (buttonType === Setting.Primary) { + 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, + Setting.hoverCoeffecient) + break + case Setting.Disabel: + idBackGround.color = Qt.darker(Colors.primaryEnable, + Setting.disableCoeffecient) + break + } + } else if (buttonType === Setting.Secondary) { + switch (stateOfComponent) { + case Setting.Enable: + idBackGround.color = Colors.secondaryEnable + break + case Setting.Pressed: + idBackGround.color = Colors.secondaryPressed + break + case Setting.Hoverd: + idBackGround.color = Qt.lighter(Colors.secondaryEnable, + Setting.hoverCoeffecient) + break + case Setting.Disabel: + idBackGround.color = Qt.darker(Colors.secondaryEnable, + Setting.disableCoeffecient) + break + } + } else if (buttonType === Setting.Tertiary) { + idBackGround.color = Colors.balck + idBackGround.border.width = 1 + idBackGround.border.color = Colors.tertiaryEnable + idText.color = Colors.white + switch (stateOfComponent) { + case Setting.Enable: + idBackGround.border.color = Colors.tertiaryEnable + break + case Setting.Pressed: + idBackGround.border.color = Colors.tertiaryPressed + break + case Setting.Hoverd: + idBackGround.border.color = Qt.lighter(Colors.tertiaryEnable, + Setting.hoverCoeffecient) + break + case Setting.Disabel: + idBackGround.border.color = Qt.darker( + Colors.tertiaryEnable, Setting.disableCoeffecient) + break + } + } + } + function enableHandle() { + if (isEnable) { + stateOfComponent = Setting.Enable + } else { + stateOfComponent = Setting.Disabel } } diff --git a/SepantaUiKit/Setting.qml b/SepantaUiKit/Setting.qml index 3dc9678..e8aa46c 100644 --- a/SepantaUiKit/Setting.qml +++ b/SepantaUiKit/Setting.qml @@ -6,12 +6,19 @@ Item { property int radius: 25 property real disableOpacity: 0.25 property real hoverOpacity: 0.20 - property int animationDuration: 200 + property int animationDuration: 180 + property real hoverCoeffecient: 1.07 + property real disableCoeffecient: 4 enum State { + //status Enable, Pressed, Hoverd, - Disabel + Disabel, + //button type + Primary, + Secondary, + Tertiary } }