pouya
/
SepantaUIKit
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Initial component UI finished

master
pouya 1 year ago
parent
8078b2e9d6
commit
c5c316a3fb
13 changed files with 502 additions and 18 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 31
      Page1.qml
  2. 28
      SepantaUiKit/SKCheckBox/SKCheckBox.qml
  3. 2
      SepantaUiKit/SKDropDown/SKDropDown.qml
  4. 2
      SepantaUiKit/SKMultiOption/SKMultiOption.qml
  5. 103
      SepantaUiKit/SKMultiOptionWithDropDown/DropDownItem.qml
  6. 61
      SepantaUiKit/SKMultiOptionWithDropDown/SKMultiOptionWithDropDown.qml
  7. 28
      SepantaUiKit/SKPathSelector/FolderItem.qml
  8. 35
      SepantaUiKit/SKPathSelector/FolderName.qml
  9. 83
      SepantaUiKit/SKPathSelector/SKPathSelector.qml
  10. 29
      SepantaUiKit/SKTextField/SKTextField.qml
  11. 104
      SepantaUiKit/SkScrollView/SkScrollView.qml
  12. 8
      SepantaUiKit/aCommon/Icon.qml
  13. 4
      qml.qrc

31
Page1.qml
View File

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

28
SepantaUiKit/SKCheckBox/SKCheckBox.qml
View File

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

2
SepantaUiKit/SKDropDown/SKDropDown.qml
View File

@ -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

2
SepantaUiKit/SKMultiOption/SKMultiOption.qml
View File

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

103
SepantaUiKit/SKMultiOptionWithDropDown/DropDownItem.qml
View File

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

61
SepantaUiKit/SKMultiOptionWithDropDown/SKMultiOptionWithDropDown.qml
View File

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

28
SepantaUiKit/SKPathSelector/FolderItem.qml
View File

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

35
SepantaUiKit/SKPathSelector/FolderName.qml
View File

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

83
SepantaUiKit/SKPathSelector/SKPathSelector.qml
View File

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

29
SepantaUiKit/SKTextField/SKTextField.qml
View File

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

104
SepantaUiKit/SkScrollView/SkScrollView.qml
View File

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

8
SepantaUiKit/aCommon/Icon.qml
View File

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

4
qml.qrc
View File

@ -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>

Write Preview
Loading…
Cancel
Save