diff --git a/Page1.qml b/Page1.qml
index c10f1b8..5550953 100644
--- a/Page1.qml
+++ b/Page1.qml
@@ -1,37 +1,47 @@
import QtQuick 2.13
-import "./SepantaUiKit/SKBtn"
import "./SepantaUiKit"
+import "./SepantaUiKit/SKBtn"
+import "./SepantaUiKit/SKBtnIcon"
+import "./SepantaUiKit/SKMultiOption"
+import "./SepantaUiKit/aCommon"
Item {
anchors.fill: parent
- Grid {
+ Column {
+ anchors.fill: parent
spacing: 20
anchors.margins: 20
- anchors.fill: parent
- SKBtn {
- text: "Enable P"
- }
- SKBtn {
- text: "Disable P"
- isEnable: false
+ Row {
+ spacing: 20
+ SKBtn {
+ text: "Enable P"
+ }
+ SKBtn {
+ 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
+ }
}
- 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
+
+ Row {
+ SKMultiOption {}
}
}
}
diff --git a/SepantaUiKit/Colors.qml b/SepantaUiKit/Colors.qml
index 69a9f43..7a551a6 100644
--- a/SepantaUiKit/Colors.qml
+++ b/SepantaUiKit/Colors.qml
@@ -14,7 +14,7 @@ Item {
property string tertiaryPressed: "#E0E7E9"
//Other
property string white: "#f8f8f8"
- property string balck: "#0b0b0b"
+ property string black: "#0b0b0b"
property string success: "#28a745"
property string danger: "#dc3545"
property string warning: "#ffc107"
diff --git a/SepantaUiKit/SKBtn/SKBtn.qml b/SepantaUiKit/SKBtn/SKBtn.qml
index 4c20135..9945dcd 100644
--- a/SepantaUiKit/SKBtn/SKBtn.qml
+++ b/SepantaUiKit/SKBtn/SKBtn.qml
@@ -24,7 +24,6 @@ Item {
anchors.fill: parent
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
- color: Colors.balck
font: Fonts.h3
Behavior on color {
ColorAnimation {
@@ -64,6 +63,7 @@ Item {
//========================================================================
function stateChanged() {
if (buttonType === Setting.Primary) {
+ idText.color = Colors.black
switch (stateOfComponent) {
case Setting.Enable:
idBackGround.color = Colors.primaryEnable
@@ -81,6 +81,7 @@ Item {
break
}
} else if (buttonType === Setting.Secondary) {
+ idText.color = Colors.black
switch (stateOfComponent) {
case Setting.Enable:
idBackGround.color = Colors.secondaryEnable
@@ -98,10 +99,10 @@ Item {
break
}
} else if (buttonType === Setting.Tertiary) {
- idBackGround.color = Colors.balck
+ idBackGround.color = Colors.black
idBackGround.border.width = 1
idBackGround.border.color = Colors.tertiaryEnable
- idText.color = Colors.white
+
switch (stateOfComponent) {
case Setting.Enable:
idBackGround.border.color = Colors.tertiaryEnable
@@ -118,6 +119,13 @@ Item {
Colors.tertiaryEnable, Setting.disableCoeffecient)
break
}
+
+ if (stateOfComponent === Setting.Disabel) {
+ idText.color = Qt.darker(Colors.tertiaryEnable,
+ Setting.disableCoeffecient)
+ } else {
+ idText.color = Colors.white
+ }
}
}
function enableHandle() {
diff --git a/SepantaUiKit/SKBtnIcon/SKBtnIcon.qml b/SepantaUiKit/SKBtnIcon/SKBtnIcon.qml
index 180d1c8..7fb6d54 100644
--- a/SepantaUiKit/SKBtnIcon/SKBtnIcon.qml
+++ b/SepantaUiKit/SKBtnIcon/SKBtnIcon.qml
@@ -1,5 +1,23 @@
import QtQuick 2.13
+import "../"
+import "../aCommon"
Item {
+ width: 16
+ height: 16
+ property string iconPath: ""
+ property bool isEnable: true
+ Rectangle {
+ anchors.fill: parent
+ color: Colors.black
+ border.width: 1
+ border.color: Colors.tertiaryEnable
+ radius: Setting.smallRadius
+ UImage {
+ anchors.fill: parent
+ color: Colors.tertiaryEnable
+ source: "qrc:/SepantaUiKit/icons/person.svg"
+ }
+ }
}
diff --git a/SepantaUiKit/SKMultiOption/MultiOptionBtn.qml b/SepantaUiKit/SKMultiOption/MultiOptionBtn.qml
new file mode 100644
index 0000000..e0d8bee
--- /dev/null
+++ b/SepantaUiKit/SKMultiOption/MultiOptionBtn.qml
@@ -0,0 +1,95 @@
+import QtQuick 2.13
+import QtQml 2.13
+import QtQuick.Layouts 1.13
+import QtGraphicalEffects 1.13
+import "../"
+import "../aCommon"
+
+Item {
+ id: root
+ property bool isSelected: false
+ property var stateOfComponent: Setting.Enable
+ property var indexManager
+ property var myIndex
+ property var currentIndex: indexManager.currentIndex
+
+ property bool rightHasRadius: false
+ property bool leftHasRadius: false
+
+ property int radius: 0
+
+ onCurrentIndexChanged: {
+ if (currentIndex === myIndex) {
+ isSelected = true
+ } else
+ isSelected = false
+ }
+
+ onIsSelectedChanged: buildComponent()
+ property alias text: idText.text
+ Layout.fillHeight: true
+ Layout.fillWidth: true
+
+ RectangleWithRadius {
+ id: idBackGround
+ anchors.fill: parent
+ topLeftRadiusEnable: leftHasRadius
+ buttonLeftRadiusEnable: leftHasRadius
+
+ topRightRadiusEnable: rightHasRadius
+ buttonRighttRadiusEnable: rightHasRadius
+
+ radius: root.radius
+ Behavior on color {
+ ColorAnimation {
+ duration: Setting.animationDuration
+ }
+ }
+ }
+
+ Text {
+ id: idText
+ anchors.fill: parent
+ horizontalAlignment: Text.AlignHCenter
+ verticalAlignment: Text.AlignVCenter
+ font: Fonts.h5
+ color: Colors.tertiaryEnable
+ Behavior on color {
+ ColorAnimation {
+ duration: Setting.animationDuration
+ }
+ }
+ }
+ MouseArea {
+ anchors.fill: parent
+ hoverEnabled: true
+ onHoveredChanged: {
+ if (containsMouse) {
+ stateOfComponent = Setting.Hoverd
+ } else {
+ stateOfComponent = Setting.Enable
+ }
+ }
+ onPressed: {
+ stateOfComponent = Setting.Pressed
+ indexManager.clicked(myIndex)
+ }
+ onReleased: {
+ stateOfComponent = Setting.Enable
+ }
+ }
+
+ function buildComponent() {
+ if (isSelected) {
+ idBackGround.color = Colors.primaryEnable
+ idText.color = Colors.black
+ } else {
+ idBackGround.color = "transparent"
+ idText.color = Colors.tertiaryEnable
+ }
+ }
+
+ Component.onCompleted: {
+ buildComponent()
+ }
+}
diff --git a/SepantaUiKit/SKMultiOption/SKMultiOption.qml b/SepantaUiKit/SKMultiOption/SKMultiOption.qml
index 180d1c8..157054c 100644
--- a/SepantaUiKit/SKMultiOption/SKMultiOption.qml
+++ b/SepantaUiKit/SKMultiOption/SKMultiOption.qml
@@ -1,5 +1,95 @@
import QtQuick 2.13
+import QtQml 2.13
+import QtQuick.Layouts 1.13
+import "../"
+import "../aCommon"
Item {
+ id: root
+ height: 38
+ width: 400
+ property var listOfObj: []
+ property var options: ["High", "Low", "Medium"]
+ property var currentText: options[currentIndex]
+ property var currentIndex: 0
+
+ property var stateOfComponent: Setting.Enable
+ Item {
+ anchors.fill: parent
+
+ RowLayout {
+ id: idLayout
+ anchors.fill: parent
+ spacing: 0
+ }
+ }
+
+ Rectangle {
+ id: idBackGround
+ anchors.fill: parent
+ radius: Setting.mediumRadius
+ color: "transparent"
+ border.color: Colors.tertiaryEnable
+ border.width: 1
+ clip: true
+ }
+
+ CurrentSelectedManager {
+ id: indexManager
+ }
+
+ function buildComponent() {
+
+ let lengthOfList = listOfObj.length
+ for (var k = 0; k < lengthOfList; k++) {
+ listOfObj[k].destroy()
+ }
+ listOfObj = []
+
+ let numberOfBtns = options.length
+ let numberOfLines = numberOfBtns - 1
+
+ let btnCompoent = Qt.createComponent("MultiOptionBtn.qml")
+ let lineComponent = Qt.createComponent(
+ "qrc:/SepantaUiKit/aCommon/Line.qml")
+
+ if (numberOfLines > 0) {
+ let lengthOfEachBtn = root.width / numberOfBtns
+ for (var j = 0; j < numberOfBtns; j++) {
+ let rightHasRadius = false
+ let leftHasRadius = false
+ if (j === 0) {
+ leftHasRadius = true
+ } else if (j === numberOfBtns - 1) {
+ rightHasRadius = true
+ }
+
+ let sprite = btnCompoent.createObject(idLayout, {
+ "text": options[j],
+ "indexManager": indexManager,
+ "myIndex": j,
+ "leftHasRadius": leftHasRadius,
+ "rightHasRadius": rightHasRadius,
+ "radius": idBackGround.radius
+ })
+ listOfObj.push(sprite)
+
+ if (j !== numberOfBtns - 1) {
+ let spriteL = lineComponent.createObject(idLayout, {
+ "color": Colors.tertiaryEnable,
+ "Layout.fillHeight": true,
+ "width": 1
+ })
+ listOfObj.push(spriteL)
+ }
+ }
+ }
+ }
+
+ Line {}
+
+ Component.onCompleted: {
+ buildComponent()
+ }
}
diff --git a/SepantaUiKit/Setting.qml b/SepantaUiKit/Setting.qml
index e8aa46c..91f440d 100644
--- a/SepantaUiKit/Setting.qml
+++ b/SepantaUiKit/Setting.qml
@@ -4,6 +4,8 @@ import QtQuick 2.13
Item {
property int radius: 25
+ property int mediumRadius: 6
+ property int smallRadius: 2
property real disableOpacity: 0.25
property real hoverOpacity: 0.20
property int animationDuration: 180
diff --git a/SepantaUiKit/aCommon/CurrentSelectedManager.qml b/SepantaUiKit/aCommon/CurrentSelectedManager.qml
new file mode 100644
index 0000000..3c1bbf9
--- /dev/null
+++ b/SepantaUiKit/aCommon/CurrentSelectedManager.qml
@@ -0,0 +1,13 @@
+import QtQuick 2.13
+
+Item {
+ id: root
+
+ //from child component
+ signal clicked(var index)
+ onClicked: {
+ currentIndex = index
+ }
+
+ property int currentIndex: 0
+}
diff --git a/SepantaUiKit/aCommon/Line.qml b/SepantaUiKit/aCommon/Line.qml
new file mode 100644
index 0000000..dfafe2a
--- /dev/null
+++ b/SepantaUiKit/aCommon/Line.qml
@@ -0,0 +1,7 @@
+import QtQuick 2.13
+import QtQuick.Layouts 1.13
+
+Rectangle {
+ Layout.preferredWidth: width
+ Layout.preferredHeight: height
+}
diff --git a/SepantaUiKit/aCommon/RectangleWithRadius.qml b/SepantaUiKit/aCommon/RectangleWithRadius.qml
new file mode 100644
index 0000000..ee8b5cf
--- /dev/null
+++ b/SepantaUiKit/aCommon/RectangleWithRadius.qml
@@ -0,0 +1,48 @@
+import QtQuick 2.13
+
+Item {
+ id: root
+ property int radius
+ property string color: "white"
+ property bool topLeftRadiusEnable: false
+ property bool topRightRadiusEnable: false
+ property bool buttonLeftRadiusEnable: false
+ property bool buttonRighttRadiusEnable: false
+ layer.enabled: true
+ Rectangle {
+ id: main
+ anchors.fill: parent
+ color: root.color
+ radius: root.radius
+ }
+ Rectangle {
+ visible: !topLeftRadiusEnable
+ width: main.radius
+ height: main.radius
+ color: root.color
+ }
+
+ Rectangle {
+ visible: !topRightRadiusEnable
+ width: main.radius
+ height: main.radius
+ x: parent.width - width
+ color: root.color
+ }
+ Rectangle {
+ visible: !buttonLeftRadiusEnable
+ width: main.radius
+ height: main.radius
+ y: parent.height - height
+ color: root.color
+ }
+
+ Rectangle {
+ visible: !buttonRighttRadiusEnable
+ width: main.radius
+ height: main.radius
+ x: parent.width - width
+ y: parent.height - height
+ color: root.color
+ }
+}
diff --git a/SepantaUiKit/aCommon/UImage.qml b/SepantaUiKit/aCommon/UImage.qml
new file mode 100644
index 0000000..e25d2cc
--- /dev/null
+++ b/SepantaUiKit/aCommon/UImage.qml
@@ -0,0 +1,19 @@
+import QtQuick 2.13
+import QtGraphicalEffects 1.13
+
+Item {
+ property alias color: idOverlay.color
+ property alias source: idImage.source
+ Image {
+ id: idImage
+ visible: false
+ fillMode: Image.PreserveAspectFit
+ sourceSize.width: width
+ sourceSize.height: height
+ }
+ ColorOverlay {
+ id: idOverlay
+ anchors.fill: parent
+ source: idImage
+ }
+}
diff --git a/SepantaUiKit/icons/Icons.qml b/SepantaUiKit/icons/Icons.qml
new file mode 100644
index 0000000..68c2108
--- /dev/null
+++ b/SepantaUiKit/icons/Icons.qml
@@ -0,0 +1,5 @@
+import QtQuick 2.15
+
+Item {
+
+}
diff --git a/qml.qrc b/qml.qrc
index b67ff49..6c20408 100644
--- a/qml.qrc
+++ b/qml.qrc
@@ -17,5 +17,23 @@
SepantaUiKit/Setting.qml
SepantaUiKit/qmldir
SepantaUiKit/aCommon/GradientEffect1.qml
+ SepantaUiKit/icons/Icons.qml
+ SepantaUiKit/aCommon/UImage.qml
+ SepantaUiKit/icons/back folder.svg
+ SepantaUiKit/icons/check-square-fill.svg
+ SepantaUiKit/icons/delete folder.svg
+ SepantaUiKit/icons/Disk.svg
+ SepantaUiKit/icons/downArrow.svg
+ SepantaUiKit/icons/exam icon.svg
+ SepantaUiKit/icons/file.svg
+ SepantaUiKit/icons/folder.svg
+ SepantaUiKit/icons/folder-plus.svg
+ SepantaUiKit/icons/person.svg
+ SepantaUiKit/icons/unckeck squre.svg
+ SepantaUiKit/icons/USB.svg
+ SepantaUiKit/SKMultiOption/MultiOptionBtn.qml
+ SepantaUiKit/aCommon/CurrentSelectedManager.qml
+ SepantaUiKit/aCommon/RectangleWithRadius.qml
+ SepantaUiKit/aCommon/Line.qml