Skip to content

Commit 3f0397f

Browse files
author
Adesh Singh
committed
Qt QML Modern Component Added
1 parent 58f679e commit 3f0397f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+2724
-0
lines changed

‎AkshUI.pro

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
QT += quick
2+
3+
# You can make your code fail to compile if it uses deprecated APIs.
4+
# In order to do so, uncomment the following line.
5+
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000 # disables all the APIs deprecated before Qt 6.0.0
6+
7+
SOURCES += \
8+
main.cpp
9+
10+
RESOURCES += qml.qrc
11+
12+
# Additional import path used to resolve QML modules in Qt Creator's code model
13+
QML_IMPORT_PATH =
14+
15+
# Additional import path used to resolve QML modules just for Qt Quick Designer
16+
QML_DESIGNER_IMPORT_PATH =
17+
18+
# Default rules for deployment.
19+
qnx: target.path = /tmp/$${TARGET}/bin
20+
else: unix:!android: target.path = /opt/$${TARGET}/bin
21+
!isEmpty(target.path): INSTALLS += target

‎AkshUI.pro.user

Lines changed: 426 additions & 0 deletions
Large diffs are not rendered by default.

‎AppStyle.qml

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
pragma Singleton
2+
import QtQuick 2.15
3+
4+
QtObject {
5+
readonly property color background: "#232429"
6+
readonly property color hoverColor: "#2a2d36"
7+
readonly property color textBackground: "#2b2f3b"
8+
readonly property color popupBackground: "#333742"
9+
readonly property color appStyle: "#1d5ffe"
10+
readonly property color labelColor: "#85889b"
11+
readonly property color textColor: "#ffffff"
12+
readonly property color borderColor: "#464a53"
13+
readonly property color placeholderColor: "#757985"
14+
}

‎Components/Button.qml

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
import QtQuick 2.9
2+
import QtQuick.Controls 2.5 as T
3+
import QtQuick.Layouts 1.3
4+
import QtGraphicalEffects 1.15
5+
6+
import AppStyle 1.0
7+
import "./"
8+
T.Button {
9+
id: control
10+
property bool isDefault : true
11+
property string setIcon : ""
12+
property string style : AppStyle.appStyle
13+
14+
width: setIcon ? 110 * 1.5 : 110
15+
implicitHeight: 46
16+
Layout.fillWidth: true
17+
implicitWidth: 110
18+
opacity: control.enabled ? 1 : 0.5
19+
20+
contentItem: RowLayout {
21+
width: parent.width
22+
Layout.fillWidth: true
23+
spacing: 0
24+
25+
Item { width: 5; }
26+
27+
Label {
28+
text: control.text
29+
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
30+
Layout.fillWidth: false
31+
font.pixelSize: FontStyle.h3
32+
33+
Behavior on color {
34+
ColorAnimation {
35+
duration: 200;
36+
easing.type: Easing.Linear;
37+
}
38+
}
39+
40+
horizontalAlignment: Text.AlignHCenter
41+
verticalAlignment: Text.AlignVCenter
42+
elide: Text.ElideRight
43+
scale: control.pressed ? 0.9 : 1.0
44+
Behavior on scale { NumberAnimation { duration: 200; } }
45+
}
46+
47+
Item { visible: setIcon ? true : false }
48+
49+
Label {
50+
text: setIcon
51+
font.pixelSize: FontStyle.h3
52+
horizontalAlignment: Text.AlignHCenter
53+
verticalAlignment: Text.AlignVCenter
54+
elide: Text.ElideRight
55+
visible: setIcon ? true : false
56+
scale: control.pressed ? 0.9 : 1.0
57+
Behavior on scale { NumberAnimation { duration: 200; } }
58+
}
59+
60+
Item { width: 5; }
61+
}
62+
63+
background: Rectangle {
64+
implicitWidth: control.width
65+
implicitHeight: control.height
66+
Layout.fillWidth: true
67+
radius: width
68+
color: isDefault ? style : "transparent";
69+
border.width: isDefault ? 0 : 1
70+
border.color: isDefault ? "transparent" : style
71+
72+
visible: false
73+
74+
Behavior on color {
75+
ColorAnimation {
76+
duration: 200;
77+
easing.type: Easing.Linear;
78+
}
79+
}
80+
81+
Rectangle {
82+
id: indicator
83+
property int mx
84+
property int my
85+
x: mx - width / 2
86+
y: my - height / 2
87+
height: width
88+
radius: width / 2
89+
color: Qt.lighter(style)
90+
}
91+
}
92+
93+
Rectangle {
94+
id: mask
95+
radius: width
96+
anchors.fill: parent
97+
visible: false
98+
}
99+
100+
OpacityMask {
101+
anchors.fill: background
102+
source: background
103+
maskSource: mask
104+
}
105+
106+
MouseArea {
107+
id: mouseArea
108+
hoverEnabled: true
109+
acceptedButtons: Qt.NoButton
110+
cursorShape: Qt.PointingHandCursor
111+
anchors.fill: parent
112+
}
113+
114+
ParallelAnimation {
115+
id: anim
116+
NumberAnimation {
117+
target: indicator
118+
property: 'width'
119+
from: 0
120+
to: control.width * 2.5
121+
duration: 200
122+
}
123+
NumberAnimation {
124+
target: indicator;
125+
property: 'opacity'
126+
from: 0.9
127+
to: 0
128+
duration: 200
129+
}
130+
}
131+
132+
onPressed: {
133+
indicator.mx = mouseArea.mouseX
134+
indicator.my = mouseArea.mouseY
135+
anim.restart();
136+
}
137+
}

‎Components/CheckBox.qml

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import QtQuick 2.15
2+
import QtQuick.Controls 2.5 as Control
3+
import QtQuick.Layouts 1.3
4+
import AppStyle 1.0
5+
import "./"
6+
Control.CheckBox {
7+
id: control
8+
property string indicatorIcon: "+"
9+
10+
checked: true
11+
spacing: 15
12+
13+
contentItem:Label{
14+
enabled: control.enabled
15+
width: control.width
16+
text: control.text
17+
font.pixelSize: FontStyle.h3
18+
leftPadding: indicatorRect.implicitWidth + control.spacing
19+
verticalAlignment: Text.AlignVCenter
20+
}
21+
22+
indicator: Rectangle {
23+
id:indicatorRect
24+
implicitWidth: 28
25+
implicitHeight: 28
26+
x: control.leftPadding
27+
y: parent.height / 2 - height / 2
28+
radius: 6
29+
color: control.enabled ? (control.checked ? AppStyle.appStyle : checkBoxHover.hovered ? "#22356c" : "#333742" ) : "#21356c"
30+
border.width: control.activeFocus ? 2 : 1
31+
border.color: control.enabled ? (control.checked ? AppStyle.appStyle : control.activeFocus ? AppStyle.appStyle : "#424650") : "#21356c"
32+
33+
HoverHandler{
34+
id:checkBoxHover
35+
}
36+
37+
Label{
38+
enabled: control.enabled
39+
text: indicatorIcon
40+
padding: 0
41+
isBold: true
42+
font.pixelSize: FontStyle.h2
43+
bottomPadding: 4
44+
visible:control.checked
45+
anchors.centerIn: parent
46+
}
47+
}
48+
}

‎Components/ComboBox.qml

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
import QtQuick 2.9
2+
import QtQuick.Controls 2.5 as Control
3+
import QtQuick.Layouts 1.3
4+
5+
import "./"
6+
import AppStyle 1.0
7+
8+
Control.ComboBox {
9+
id: root
10+
implicitWidth: 300
11+
implicitHeight: 55
12+
property real radius: 12.0
13+
property string backgroundColor: "#2a2d36"
14+
property color checkedColor: AppStyle.popupBackground
15+
16+
delegate: Control.ItemDelegate {
17+
id:itemDelegate
18+
width: root.implicitWidth * 1.2
19+
height: root.implicitHeight
20+
hoverEnabled: true
21+
focus: true
22+
23+
background: Rectangle{
24+
color: itemDelegate.hovered ? backgroundColor/*AppStyle.appStyle*/ : "transparent"
25+
anchors.fill: parent
26+
radius: 8
27+
}
28+
29+
RowLayout {
30+
Layout.alignment: Qt.AlignVCenter
31+
width: parent.width
32+
height: parent.height
33+
anchors.fill: parent
34+
spacing: 10
35+
Layout.leftMargin: 10
36+
Layout.rightMargin: 10
37+
38+
Label {
39+
opacity: 0.87
40+
text: modelData
41+
font.pixelSize: FontStyle.h3
42+
color: itemDelegate.hovered ? "white" : AppStyle.textColor
43+
Layout.fillWidth: true
44+
verticalAlignment: Image.AlignVCenter
45+
Layout.alignment: Qt.AlignVCenter
46+
Layout.leftMargin: 10
47+
}
48+
49+
Image{
50+
source: "qrc:/Images/tick.svg"
51+
sourceSize: Qt.size(24,24)
52+
visible: root.currentIndex === index
53+
verticalAlignment: Image.AlignVCenter
54+
horizontalAlignment: Image.AlignRight
55+
Layout.alignment: Qt.AlignVCenter
56+
Layout.rightMargin: 10
57+
}
58+
}
59+
60+
}
61+
62+
indicator: Canvas {
63+
id: canvas
64+
x: root.width - width - 10
65+
y: (root.availableHeight - height) / 2
66+
width: 12
67+
height: 8
68+
contextType: "2d"
69+
70+
Connections {
71+
target: root
72+
function onPressedChanged(){
73+
canvas.requestPaint()
74+
}
75+
}
76+
77+
onPaint: {
78+
context.reset();
79+
context.moveTo(0, 0);
80+
context.lineTo(width, 0);
81+
context.lineTo(width / 2, height);
82+
context.closePath();
83+
context.fillStyle = "white"
84+
context.fill();
85+
}
86+
}
87+
88+
contentItem: Item {
89+
width: root.background.width - root.indicator.width - 10
90+
height: root.background.height
91+
92+
RowLayout {
93+
anchors.fill: parent
94+
spacing: 10
95+
96+
Label {
97+
opacity: 0.87
98+
font.pixelSize: FontStyle.h3
99+
text: root.displayText
100+
Layout.fillWidth: true
101+
verticalAlignment: Image.AlignVCenter
102+
Layout.alignment: Qt.AlignVCenter
103+
Layout.leftMargin: 10
104+
}
105+
}
106+
107+
}
108+
109+
background: Rectangle {
110+
implicitWidth: root.implicitWidth
111+
implicitHeight: root.implicitHeight
112+
color: root.down ? Qt.darker(root.checkedColor, 1.2) : root.checkedColor
113+
radius: root.radius
114+
border.width: root.activeFocus ? 2 : 0.6
115+
border.color: root.activeFocus ? AppStyle.appStyle : AppStyle.borderColor
116+
}
117+
118+
popup: Control.Popup {
119+
y: root.height + 2
120+
width: root.implicitWidth * 1.26
121+
implicitHeight: contentItem.implicitHeight > 250 ? 250 : contentItem.implicitHeight
122+
padding: 4
123+
contentItem: ListView {
124+
leftMargin: 5
125+
implicitHeight: contentHeight
126+
keyNavigationEnabled: true
127+
model: root.popup.visible ? root.delegateModel : null
128+
clip: true
129+
focus: true
130+
currentIndex: root.highlightedIndex
131+
}
132+
133+
background: Rectangle {
134+
anchors.fill: parent
135+
color: AppStyle.popupBackground
136+
radius: 6
137+
border.width: 0.6
138+
border.color: AppStyle.borderColor
139+
clip: true
140+
}
141+
}
142+
}

0 commit comments

Comments
 (0)