diff --git a/Page1.qml b/Page1.qml
index 3e9b08c..0dc69b8 100644
--- a/Page1.qml
+++ b/Page1.qml
@@ -5,12 +5,17 @@ import "./SepantaUiKit/SKBtnIcon"
import "./SepantaUiKit/SKMultiOption"
import "./SepantaUiKit/aCommon"
import "./SepantaUiKit/SKDropDown"
+import "./SepantaUiKit/SKCheckBox"
+import "./SepantaUiKit/SKMultiOptionWithDropDown"
+import "./SepantaUiKit/SKTextField"
+import "./SepantaUiKit/SkScrollView"
+import "./SepantaUiKit/SKPathSelector"
Item {
anchors.fill: parent
Column {
anchors.fill: parent
- spacing: 20
+ spacing: 30
anchors.margins: 20
Row {
spacing: 20
@@ -46,18 +51,24 @@ Item {
SKMultiOption {}
SKDropDown {}
+ SKMultiOptionWithDropDown {}
}
- }
- ListView {
- y: 300
- x: 300
- width: 400
- height: 400
- model: ["A", "b", "c"]
- delegate: Text {
- text: "Hi"
- color: "white"
+ Row {
+ spacing: 20
+
+ SKTextField {
+ text: "Pouya"
+ }
+ SKCheckBox {}
}
+ Row {
+ spacing: 20
+ SkScrollView {
+
+ }
+ SKPathSelector {
+ }
+ }
}
}
diff --git a/SepantaUiKit/SKCheckBox/SKCheckBox.qml b/SepantaUiKit/SKCheckBox/SKCheckBox.qml
index 180d1c8..6fe801b 100644
--- a/SepantaUiKit/SKCheckBox/SKCheckBox.qml
+++ b/SepantaUiKit/SKCheckBox/SKCheckBox.qml
@@ -1,5 +1,31 @@
import QtQuick 2.13
+import "../aCommon"
+import "../"
Item {
-
+ id: root
+ height: 38
+ width: 400
+ property bool isChecked: false
+ property string title: "check me pouya!"
+ Row {
+ anchors.fill: parent
+ Rectangle {
+ anchors.verticalCenter: parent.verticalCenter
+ height: 24
+ width: 24
+ radius: Setting.mediumRadius
+ color: "transparent"
+ border.width: 1
+ border.color: Colors.tertiaryEnable
+ }
+ Text {
+ leftPadding: 13
+ height: parent.height
+ verticalAlignment: Text.AlignVCenter
+ color: Colors.tertiaryEnable
+ text: root.title
+ font: Fonts.h5
+ }
+ }
}
diff --git a/SepantaUiKit/SKDropDown/SKDropDown.qml b/SepantaUiKit/SKDropDown/SKDropDown.qml
index 0156913..da4719c 100644
--- a/SepantaUiKit/SKDropDown/SKDropDown.qml
+++ b/SepantaUiKit/SKDropDown/SKDropDown.qml
@@ -64,8 +64,6 @@ Item {
y: idBackGround.height
implicitHeight: contentItem.implicitHeight
padding: 0
- visible: true
- onVisibleChanged: console.log("Visible: " + visible)
closePolicy: Popup.CloseOnPressOutsideParent
contentItem: ListView {
id: idContentItem
diff --git a/SepantaUiKit/SKMultiOption/SKMultiOption.qml b/SepantaUiKit/SKMultiOption/SKMultiOption.qml
index 157054c..5e30679 100644
--- a/SepantaUiKit/SKMultiOption/SKMultiOption.qml
+++ b/SepantaUiKit/SKMultiOption/SKMultiOption.qml
@@ -87,8 +87,6 @@ Item {
}
}
- Line {}
-
Component.onCompleted: {
buildComponent()
}
diff --git a/SepantaUiKit/SKMultiOptionWithDropDown/DropDownItem.qml b/SepantaUiKit/SKMultiOptionWithDropDown/DropDownItem.qml
new file mode 100644
index 0000000..b7035fe
--- /dev/null
+++ b/SepantaUiKit/SKMultiOptionWithDropDown/DropDownItem.qml
@@ -0,0 +1,103 @@
+import QtQuick 2.13
+import QtQml 2.13
+import QtQuick.Layouts 1.13
+import QtQuick.Controls 2.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 int currentIndex: idContentItem.currentIndex
+
+ property var stateOfComponent: Setting.Enable
+
+ Rectangle {
+
+ id: idBackGround
+ anchors.fill: parent
+ radius: Setting.mediumRadius
+ color: "transparent"
+
+ clip: true
+
+ Text {
+ anchors.fill: parent
+ text: currentText
+ font: Fonts.h5
+ color: Colors.tertiaryEnable
+ verticalAlignment: Text.AlignVCenter
+ horizontalAlignment: Text.AlignHCenter
+ }
+
+ UImage {
+ width: 16
+ height: 16
+ anchors.right: parent.right
+ anchors.rightMargin: 10
+ anchors.verticalCenter: parent.verticalCenter
+ color: Colors.tertiaryEnable
+ source: "qrc:/SepantaUiKit/icons/downArrow.svg"
+ }
+ MouseArea {
+ anchors.fill: parent
+ onPressed: {
+ if (idPopup.visible)
+ idPopup.close()
+ else
+ idPopup.open()
+ }
+ }
+ }
+
+ Popup {
+ id: idPopup
+ width: parent.width
+ y: idBackGround.height
+ implicitHeight: contentItem.implicitHeight
+ padding: 0
+ closePolicy: Popup.CloseOnPressOutsideParent
+ contentItem: ListView {
+ id: idContentItem
+ implicitHeight: contentHeight
+ width: parent.width
+ model: options
+ currentIndex: 0
+ delegate: Item {
+ id: idDelegate
+ width: parent.width
+ height: idBackGround.height
+ Text {
+ leftPadding: 10
+ anchors.fill: parent
+ text: modelData
+ font: Fonts.h5
+ color: Colors.tertiaryEnable
+ verticalAlignment: Text.AlignVCenter
+ horizontalAlignment: Text.AlignVCenter
+ }
+ MouseArea {
+ anchors.fill: parent
+ onClicked: {
+ currentIndex = index
+ idPopup.close()
+ }
+ }
+ }
+ }
+ background: Rectangle {
+ anchors.fill: parent
+ radius: Setting.mediumRadius
+ color: "transparent"
+ border.color: Colors.tertiaryEnable
+ border.width: 1
+ clip: true
+ }
+ }
+}
diff --git a/SepantaUiKit/SKMultiOptionWithDropDown/SKMultiOptionWithDropDown.qml b/SepantaUiKit/SKMultiOptionWithDropDown/SKMultiOptionWithDropDown.qml
index 180d1c8..6a834a9 100644
--- a/SepantaUiKit/SKMultiOptionWithDropDown/SKMultiOptionWithDropDown.qml
+++ b/SepantaUiKit/SKMultiOptionWithDropDown/SKMultiOptionWithDropDown.qml
@@ -1,5 +1,66 @@
import QtQuick 2.13
+import QtQml 2.13
+import QtQuick.Layouts 1.13
+import "../"
+import "../aCommon"
+import "../SKMultiOption"
Item {
+ id: root
+ height: 38
+ width: 400
+ property var listOfObj: []
+ property var options: ["High", "Low"]
+ 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
+ MultiOptionBtn {
+ text: options[1]
+ indexManager: indexManager
+ myIndex: 1
+ leftHasRadius: true
+ radius: idBackGround.radius
+ }
+ Line {
+ color: Colors.tertiaryEnable
+ Layout.fillHeight: true
+ width: 1
+ }
+ DropDownItem {
+ width: undefined
+ height: undefined
+ Layout.fillHeight: true
+ Layout.fillWidth: true
+ }
+ }
+ }
+
+ 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() {}
+
+ Component.onCompleted: {
+ buildComponent()
+ }
}
diff --git a/SepantaUiKit/SKPathSelector/FolderItem.qml b/SepantaUiKit/SKPathSelector/FolderItem.qml
new file mode 100644
index 0000000..954e24e
--- /dev/null
+++ b/SepantaUiKit/SKPathSelector/FolderItem.qml
@@ -0,0 +1,28 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import QtQuick.Layouts 1.2
+import QtQml 2.13
+import "../"
+import "../aCommon"
+import "../SKTextField"
+
+Item {
+ Layout.fillHeight: true
+ Layout.preferredWidth: 150
+ RowLayout {
+ anchors.fill: parent
+ clip: true
+ Icon {
+ Layout.alignment: Qt.AlignVCenter
+ source: "qrc:/SepantaUiKit/icons/folder.svg"
+ color: Colors.tertiaryEnable
+ }
+ FolderName {
+ width: undefined
+ height: undefined
+ Layout.fillHeight: true
+ Layout.fillWidth: true
+ text: "Sono"
+ }
+ }
+}
diff --git a/SepantaUiKit/SKPathSelector/FolderName.qml b/SepantaUiKit/SKPathSelector/FolderName.qml
new file mode 100644
index 0000000..7f7584d
--- /dev/null
+++ b/SepantaUiKit/SKPathSelector/FolderName.qml
@@ -0,0 +1,35 @@
+import QtQuick 2.13
+import "../"
+import "../aCommon"
+
+Item {
+ height: 38
+ width: 400
+ property alias text: idText.text
+ Rectangle {
+
+ id: idBackGround
+ anchors.fill: parent
+ radius: Setting.mediumRadius
+ color: "transparent"
+ border.color: Colors.tertiaryEnable
+ border.width: 0
+ clip: true
+
+ TextInput {
+ id: idText
+ anchors.leftMargin: 2
+ anchors.rightMargin: 10
+ anchors.fill: parent
+ font: Fonts.h5
+ color: Colors.tertiaryEnable
+ verticalAlignment: Text.AlignVCenter
+ horizontalAlignment: Text.AlignVCenter
+ readOnly: true
+ }
+
+ // MouseArea {
+ // anchors.fill: parent
+ // }
+ }
+}
diff --git a/SepantaUiKit/SKPathSelector/SKPathSelector.qml b/SepantaUiKit/SKPathSelector/SKPathSelector.qml
index 180d1c8..9df9cdc 100644
--- a/SepantaUiKit/SKPathSelector/SKPathSelector.qml
+++ b/SepantaUiKit/SKPathSelector/SKPathSelector.qml
@@ -1,5 +1,86 @@
import QtQuick 2.13
+import QtQuick.Controls 2.13
+import QtQuick.Layouts 1.2
+import QtQml 2.13
+import "../"
+import "../aCommon"
+import "../SKTextField"
-Item {
+Rectangle {
+ width: 500
+ height: 250
+ color: "#14191D"
+ radius: Setting.mediumRadius
+ RowLayout {
+ id: idTopSection
+ anchors.right: parent.right
+ anchors.left: parent.left
+ height: 70
+ anchors.leftMargin: 20
+ anchors.rightMargin: 20
+ spacing: 13
+ Icon {
+ Layout.alignment: Qt.AlignVCenter
+ source: "qrc:/SepantaUiKit/icons/back folder.svg"
+ }
+ SKTextField {
+ width: undefined
+ Layout.fillWidth: true
+ Layout.preferredWidth: 300
+ }
+ Icon {
+ Layout.alignment: Qt.AlignVCenter
+ source: "qrc:/SepantaUiKit/icons/folder-plus.svg"
+ color: "#DEFFDD"
+ }
+ Icon {
+ Layout.alignment: Qt.AlignVCenter
+ source: "qrc:/SepantaUiKit/icons/delete folder.svg"
+ color: "#DC3545"
+ }
+ }
+ Flickable {
+ anchors.rightMargin: 20
+ anchors.leftMargin: 20
+ anchors.top: idTopSection.bottom
+ anchors.bottom: parent.bottom
+ anchors.right: parent.right
+ anchors.left: parent.left
+ contentHeight: height
+ contentWidth: idGridView.width
+ boundsMovement: Flickable.StopAtBounds
+ flickableDirection: Flickable.HorizontalFlick
+ ScrollBar.horizontal: ScrollBar {
+ height: 8
+ anchors.bottom: parent.bottom
+ policy: ScrollBar.AlwaysOn
+ }
+ clip: true
+ GridLayout {
+ id: idGridView
+ flow: GridLayout.TopToBottom
+ height: parent.height
+ rows: 5
+ columnSpacing: 13
+ rowSpacing: 8
+ FolderItem {}
+ FolderItem {}
+ FolderItem {}
+ FolderItem {}
+ FolderItem {}
+ FolderItem {}
+ FolderItem {}
+ FolderItem {}
+ FolderItem {}
+ FolderItem {}
+ FolderItem {}
+ FolderItem {}
+ FolderItem {}
+ FolderItem {}
+ FolderItem {}
+ FolderItem {}
+ FolderItem {}
+ }
+ }
}
diff --git a/SepantaUiKit/SKTextField/SKTextField.qml b/SepantaUiKit/SKTextField/SKTextField.qml
index 180d1c8..79a0fec 100644
--- a/SepantaUiKit/SKTextField/SKTextField.qml
+++ b/SepantaUiKit/SKTextField/SKTextField.qml
@@ -1,5 +1,34 @@
import QtQuick 2.13
+import "../"
+import "../aCommon"
Item {
+ height: 38
+ width: 400
+ property alias text: idText.text
+ Rectangle {
+ id: idBackGround
+ anchors.fill: parent
+ radius: Setting.mediumRadius
+ color: "transparent"
+ border.color: Colors.tertiaryEnable
+ border.width: 1
+ clip: true
+
+ TextInput {
+ id: idText
+ anchors.leftMargin: 12
+ anchors.rightMargin: 12
+ anchors.fill: parent
+ font: Fonts.h5
+ color: Colors.tertiaryEnable
+ verticalAlignment: Text.AlignVCenter
+ horizontalAlignment: Text.AlignVCenter
+ }
+
+ // MouseArea {
+ // anchors.fill: parent
+ // }
+ }
}
diff --git a/SepantaUiKit/SkScrollView/SkScrollView.qml b/SepantaUiKit/SkScrollView/SkScrollView.qml
index 180d1c8..f4793bd 100644
--- a/SepantaUiKit/SkScrollView/SkScrollView.qml
+++ b/SepantaUiKit/SkScrollView/SkScrollView.qml
@@ -1,5 +1,107 @@
import QtQuick 2.13
+import QtQuick.Controls 2.13
+import QtQuick.Layouts 1.2
+import QtQml 2.13
-Item {
+Rectangle {
+ width: 500
+ height: 300
+ color: "#0f0f0f"
+ Flickable {
+ anchors.fill: parent
+ contentWidth: parent.width
+ contentHeight: idGridView.height
+ boundsMovement: Flickable.StopAtBounds
+ flickableDirection: Flickable.VerticalFlick
+ clip: true
+ ScrollBar.vertical: ScrollBar {
+ width: 8
+ anchors.right: parent.right // adjust the anchor as suggested by derM
+ policy: ScrollBar.AlwaysOn
+ }
+ GridLayout {
+ id: idGridView
+ width: parent.width
+ onHeightChanged: console.log(height)
+ columns: 3
+ columnSpacing: 24
+ rowSpacing: 24
+ Component.onCompleted: {
+ console.log(height)
+ }
+ Rectangle {
+ Layout.fillWidth: true
+ Layout.fillHeight: false
+ Layout.preferredHeight: width
+ color: "gray"
+ }
+ Rectangle {
+ Layout.fillWidth: true
+ Layout.fillHeight: false
+ Layout.preferredHeight: width
+ color: "gray"
+ }
+ Rectangle {
+ Layout.fillWidth: true
+ Layout.fillHeight: false
+ Layout.preferredHeight: width
+ color: "gray"
+ }
+ Rectangle {
+ Layout.fillWidth: true
+ Layout.fillHeight: false
+ Layout.preferredHeight: width
+ color: "gray"
+ }
+ Rectangle {
+ Layout.fillWidth: true
+ Layout.fillHeight: false
+ Layout.preferredHeight: width
+ color: "gray"
+ }
+ Rectangle {
+ Layout.fillWidth: true
+ Layout.fillHeight: false
+ Layout.preferredHeight: width
+ color: "gray"
+ }
+ Rectangle {
+ Layout.fillWidth: true
+ Layout.fillHeight: false
+ Layout.preferredHeight: width
+ color: "gray"
+ }
+ Rectangle {
+ Layout.fillWidth: true
+ Layout.fillHeight: false
+ Layout.preferredHeight: width
+ color: "gray"
+ }
+ Rectangle {
+ Layout.fillWidth: true
+ Layout.fillHeight: false
+ Layout.preferredHeight: width
+ color: "gray"
+ }
+ Rectangle {
+ Layout.fillWidth: true
+ Layout.fillHeight: false
+ Layout.preferredHeight: width
+ color: "gray"
+ }
+ Rectangle {
+ Layout.fillWidth: true
+ Layout.fillHeight: false
+ Layout.preferredHeight: width
+ color: "gray"
+ }
+ Rectangle {
+ Layout.fillWidth: true
+ Layout.fillHeight: false
+ Layout.preferredHeight: width
+ color: "gray"
+ }
+ }
+ }
}
diff --git a/SepantaUiKit/aCommon/Icon.qml b/SepantaUiKit/aCommon/Icon.qml
new file mode 100644
index 0000000..ac54505
--- /dev/null
+++ b/SepantaUiKit/aCommon/Icon.qml
@@ -0,0 +1,8 @@
+import QtQuick 2.13
+import "../"
+
+UImage {
+ width: 24
+ height: 24
+ color: Colors.tertiaryEnable
+}
diff --git a/qml.qrc b/qml.qrc
index 6c20408..9c29bd6 100644
--- a/qml.qrc
+++ b/qml.qrc
@@ -35,5 +35,9 @@
SepantaUiKit/aCommon/CurrentSelectedManager.qml
SepantaUiKit/aCommon/RectangleWithRadius.qml
SepantaUiKit/aCommon/Line.qml
+ SepantaUiKit/SKMultiOptionWithDropDown/DropDownItem.qml
+ SepantaUiKit/aCommon/Icon.qml
+ SepantaUiKit/SKPathSelector/FolderItem.qml
+ SepantaUiKit/SKPathSelector/FolderName.qml