Initial component UI finished

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 {}
         }
-    }
+        Row {
-    ListView {
+            spacing: 20
-        y: 300
+
-        x: 300
+            SKTextField {
-        width: 400
+                text: "Pouya"
-        height: 400
+            }
-        model: ["A", "b", "c"]
+            SKCheckBox {}
-        delegate: Text {
-            text: "Hi"
-            color: "white"
         }
+        Row {
+            spacing: 20
+            SkScrollView {
+
+            }
+            SKPathSelector {
 
+            }
+        }
     }
 }

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
+        }
+    }
 }

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

SepantaUiKit/SKMultiOption/SKMultiOption.qml

@@ -87,8 +87,6 @@ Item {
         }
     }
 
-    Line {}
-
     Component.onCompleted: {
         buildComponent()
     }

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
+        }
+    }
+}

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()
+    }
 }

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"
+        }
+    }
+}

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
+        // }
+    }
+}

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 {}
+        }
+    }
 }

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
+        // }
+    }
 }

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"
+            }
+        }
+    }
 }

SepantaUiKit/aCommon/Icon.qml

@@ -0,0 +1,8 @@
+import QtQuick 2.13
+import "../"
+
+UImage {
+    width: 24
+    height: 24
+    color: Colors.tertiaryEnable
+}

qml.qrc

@@ -35,5 +35,9 @@
         <file>SepantaUiKit/aCommon/CurrentSelectedManager.qml</file>
         <file>SepantaUiKit/aCommon/RectangleWithRadius.qml</file>
         <file>SepantaUiKit/aCommon/Line.qml</file>
+        <file>SepantaUiKit/SKMultiOptionWithDropDown/DropDownItem.qml</file>
+        <file>SepantaUiKit/aCommon/Icon.qml</file>
+        <file>SepantaUiKit/SKPathSelector/FolderItem.qml</file>
+        <file>SepantaUiKit/SKPathSelector/FolderName.qml</file>
     </qresource>
 </RCC>