Skip to content

Commit

Permalink
added SwitcherType and TabButtonType
Browse files Browse the repository at this point in the history
- change CheckBoxType root type
- added PageTest
  • Loading branch information
Nethius committed Apr 29, 2023
1 parent cfc17cf commit c7acd63
Show file tree
Hide file tree
Showing 9 changed files with 492 additions and 280 deletions.
4 changes: 3 additions & 1 deletion client/resources.qrc
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,6 @@
<file>server_scripts/check_user_in_sudo.sh</file>
<file>ui/qml/Controls2/BasicButtonType.qml</file>
<file>ui/qml/Controls2/TextFieldWithHeaderType.qml</file>
<file>ui/qml/Pages/PageTest.qml</file>
<file>fonts/pt-root-ui_vf.ttf</file>
<file>ui/qml/Controls2/LabelWithButtonType.qml</file>
<file>images/controls/arrow-right.svg</file>
Expand All @@ -200,5 +199,8 @@
<file>ui/qml/Controls2/TextTypes/Header2TextType.qml</file>
<file>ui/qml/Controls2/HorizontalRadioButton.qml</file>
<file>ui/qml/Controls2/VerticalRadioButton.qml</file>
<file>ui/qml/Controls2/SwitcherType.qml</file>
<file>ui/qml/Pages2/PageTest.qml</file>
<file>ui/qml/Controls2/TabButtonType.qml</file>
</qresource>
</RCC>
137 changes: 58 additions & 79 deletions client/ui/qml/Controls2/CheckBoxType.qml
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,9 @@ import QtQuick.Controls
import QtQuick.Layouts
import Qt5Compat.GraphicalEffects

Item {
CheckBox {
id: root

property string text
property string descriptionText

property string hoveredColor: Qt.rgba(1, 1, 1, 0.05)
Expand All @@ -22,107 +21,87 @@ Item {

property string imageSource: "qrc:/images/controls/check.svg"

implicitWidth: content.implicitWidth
implicitHeight: content.implicitHeight
hoverEnabled: true

RowLayout {
id: content
indicator: Rectangle {
id: checkBoxBackground

anchors.fill: parent
implicitWidth: 56
implicitHeight: 56
radius: 16

color: {
if (root.hovered) {
return hoveredColor
}
return defaultColor
}

CheckBox {
id: checkBox
Behavior on color {
PropertyAnimation { duration: 200 }
}

Rectangle {
id: imageBorder

implicitWidth: 56
implicitHeight: 56
anchors.centerIn: parent
width: 24
height: 24
color: "transparent"
border.color: root.checked ? checkedBorderColor : defaultBorderColor
border.width: 1
radius: 4

indicator: Image {
Image {
id: indicator
anchors.verticalCenter: checkBox.verticalCenter
anchors.horizontalCenter: checkBox.horizontalCenter
anchors.centerIn: parent

source: root.pressed ? imageSource : root.checked ? imageSource : ""

ColorOverlay {
id: imageColor
anchors.fill: indicator
source: indicator
}
}

Rectangle {
id: imageBorder

anchors.verticalCenter: checkBox.verticalCenter
anchors.horizontalCenter: checkBox.horizontalCenter
width: 24
height: 24
color: "transparent"
border.color: checkBox.checked ? checkedBorderColor : defaultBorderColor
border.width: 1
radius: 4
}

background: Rectangle {
id: checkBoxBackground
radius: 16

color: "transparent"

Behavior on color {
PropertyAnimation { duration: 200 }
color: root.pressed ? pressedImageColor : root.checked ? checkedImageColor : defaultImageColor
}
}
}
}

ColumnLayout {
Text {
text: root.text
color: "#D7D8DB"
font.pixelSize: 18
font.weight: 400
font.family: "PT Root UI VF"
contentItem: ColumnLayout {
anchors.fill: parent
anchors.leftMargin: 8 + checkBoxBackground.width

height: 22
Layout.fillWidth: true
}
Text {
text: root.text
color: "#D7D8DB"
font.pixelSize: 18
font.weight: 400
font.family: "PT Root UI VF"

height: 22
Layout.fillWidth: true
}

Text {
text: root.descriptionText
color: "#878b91"
font.pixelSize: 13
font.weight: 400
font.family: "PT Root UI VF"
font.letterSpacing: 0.02
Text {
text: root.descriptionText
color: "#878b91"
font.pixelSize: 13
font.weight: 400
font.family: "PT Root UI VF"
font.letterSpacing: 0.02

height: 16
Layout.fillWidth: true
}
height: 16
Layout.fillWidth: true
}
}

MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
hoverEnabled: true

onEntered: {
checkBoxBackground.color = hoveredColor
}

onExited: {
checkBoxBackground.color = defaultColor
}

onPressedChanged: {
indicator.source = pressed ? imageSource : checkBox.checked ? imageSource : ""
imageColor.color = pressed ? pressedImageColor : checkBox.checked ? checkedImageColor : defaultImageColor
checkBoxBackground.color = pressed ? pressedColor : entered ? hoveredColor : defaultColor
}

onClicked: {
checkBox.checked = !checkBox.checked
indicator.source = checkBox.checked ? imageSource : ""
imageColor.color = checkBox.checked ? checkedImageColor : defaultImageColor
imageBorder.border.color = checkBox.checked ? checkedBorderColor : defaultBorderColor
}
enabled: false
}
}


4 changes: 4 additions & 0 deletions client/ui/qml/Controls2/HeaderType.qml
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,9 @@ Item {

image: root.buttonImage
imageColor: "#D7D8DB"

visible: image ? true : false

onClicked: {
UiLogic.closePage()
}
Expand Down Expand Up @@ -58,6 +61,7 @@ Item {
wrapMode: Text.WordWrap

height: 24
Layout.topMargin: 16
Layout.fillWidth: true
}
}
Expand Down
83 changes: 83 additions & 0 deletions client/ui/qml/Controls2/SwitcherType.qml
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Switch {
id: root

property string checkedIndicatorColor: "#412102"
property string defaultIndicatorColor: "transparent"
property string checkedIndicatorBorderColor: "#412102"
property string defaultIndicatorBorderColor: "#494B50"

property string checkedInnerCircleColor: "#FBB26A"
property string defaultInnerCircleColor: "#D7D8DB"

property string hoveredIndicatorBackgroundColor: Qt.rgba(1, 1, 1, 0.08)
property string defaultIndicatorBackgroundColor: "transparent"

indicator: Rectangle {
implicitWidth: 52
implicitHeight: 32
x: content.width - width
radius: 16
color: root.checked ? checkedIndicatorColor : defaultIndicatorColor
border.color: root.checked ? checkedIndicatorBorderColor : defaultIndicatorBorderColor

Behavior on color {
PropertyAnimation { duration: 200 }
}
Behavior on border.color {
PropertyAnimation { duration: 200 }
}

Rectangle {
id: innerCircle

anchors.verticalCenter: parent.verticalCenter
x: root.checked ? parent.width - width - 4 : 8
width: root.checked ? 24 : 16
height: root.checked ? 24 : 16
radius: 23
color: root.checked ? checkedInnerCircleColor : defaultInnerCircleColor

Behavior on x {
PropertyAnimation { duration: 200 }
}
}

Rectangle {
anchors.centerIn: innerCircle
width: 40
height: 40
radius: 23
color: hovered ? hoveredIndicatorBackgroundColor : defaultIndicatorBackgroundColor

Behavior on color {
PropertyAnimation { duration: 200 }
}
}
}

contentItem: ColumnLayout {
id: content

Text {
text: root.text
color: "#D7D8DB"
font.pixelSize: 18
font.weight: 400
font.family: "PT Root UI VF"

height: 22
Layout.fillWidth: true
Layout.bottomMargin: 16
}
}

MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
enabled: false
}
}
56 changes: 56 additions & 0 deletions client/ui/qml/Controls2/TabButtonType.qml
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import QtQuick
import QtQuick.Controls

TabButton {
id: root

property string hoveredColor: "#412102"
property string defaultColor: "#2C2D30"
property string selectedColor: "#FBB26A"

property string textColor: "#D7D8DB"

property bool isSelected: false

implicitHeight: 48

hoverEnabled: true

background: Rectangle {
id: background

anchors.fill: parent
color: "transparent"

Rectangle {
width: parent.width
height: 1
y: parent.height - height
color: {
if(root.isSelected) {
return selectedColor
}
return hovered ? hoveredColor : defaultColor
}

Behavior on color {
PropertyAnimation { duration: 200 }
}
}
}

contentItem: Text {
anchors.fill: background
height: 24

font.family: "PT Root UI"
font.styleName: "normal"
font.weight: 500
font.pixelSize: 16
color: textColor
text: root.text

horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
}
9 changes: 1 addition & 8 deletions client/ui/qml/Controls2/VerticalRadioButton.qml
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,6 @@ RadioButton {

property string defaultInnerCircleColor: "#FBB26A"

implicitWidth: background.implicitWidth + content.implicitWidth
implicitHeight: background.implicitWidth

hoverEnabled: true

indicator: Rectangle {
Expand Down Expand Up @@ -121,14 +118,10 @@ RadioButton {
}
}

contentItem: Item {}

ColumnLayout {
contentItem: ColumnLayout {
id: content
anchors.fill: parent
anchors.leftMargin: 8 + background.width
anchors.topMargin: 4
anchors.bottomMargin: 4

Text {
text: root.text
Expand Down
Loading

0 comments on commit c7acd63

Please sign in to comment.