minor ui fixes
This commit is contained in:
parent
ed1afa7549
commit
4e6c1094f3
11 changed files with 53 additions and 33 deletions
|
@ -62,25 +62,13 @@ Item {
|
||||||
hoverEnabled: false
|
hoverEnabled: false
|
||||||
image: rightImageSource
|
image: rightImageSource
|
||||||
imageColor: rightImageColor
|
imageColor: rightImageColor
|
||||||
visible: rightImageSource ? true : false
|
|
||||||
|
|
||||||
implicitSize: 18
|
icon.width: 18
|
||||||
backGroudRadius: 5
|
icon.height: 18
|
||||||
horizontalPadding: 0
|
backgroundRadius: 16
|
||||||
padding: 0
|
horizontalPadding: 4
|
||||||
spacing: 0
|
topPadding: 4
|
||||||
|
bottomPadding: 3
|
||||||
|
|
||||||
Rectangle {
|
|
||||||
id: rightImageBackground
|
|
||||||
anchors.fill: parent
|
|
||||||
radius: 16
|
|
||||||
color: "transparent"
|
|
||||||
|
|
||||||
Behavior on color {
|
|
||||||
PropertyAnimation { duration: 200 }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -107,26 +95,25 @@ Item {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
MouseArea {
|
MouseArea {
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
cursorShape: Qt.PointingHandCursor
|
cursorShape: Qt.PointingHandCursor
|
||||||
hoverEnabled: true
|
hoverEnabled: true
|
||||||
|
|
||||||
onEntered: {
|
onEntered: {
|
||||||
rightImageBackground.color = rightImage.hoveredColor
|
rightImage.backgroundColor = rightImage.hoveredColor
|
||||||
|
|
||||||
root.textOpacity = 0.8
|
root.textOpacity = 0.8
|
||||||
}
|
}
|
||||||
|
|
||||||
onExited: {
|
onExited: {
|
||||||
rightImageBackground.color = rightImage.defaultColor
|
rightImage.backgroundColor = rightImage.defaultColor
|
||||||
|
|
||||||
root.textOpacity = 1
|
root.textOpacity = 1
|
||||||
}
|
}
|
||||||
|
|
||||||
onPressedChanged: {
|
onPressedChanged: {
|
||||||
rightImageBackground.color = pressed ? rightImage.pressedColor : entered ? rightImage.hoveredColor : rightImage.defaultColor
|
rightImage.backgroundColor = pressed ? rightImage.pressedColor : entered ? rightImage.hoveredColor : rightImage.defaultColor
|
||||||
|
|
||||||
root.textOpacity = 0.7
|
root.textOpacity = 0.7
|
||||||
}
|
}
|
||||||
|
|
|
@ -23,6 +23,9 @@ Item {
|
||||||
image: backButtonImage
|
image: backButtonImage
|
||||||
imageColor: "#D7D8DB"
|
imageColor: "#D7D8DB"
|
||||||
|
|
||||||
|
implicitWidth: 40
|
||||||
|
implicitHeight: 40
|
||||||
|
|
||||||
onClicked: {
|
onClicked: {
|
||||||
if (backButtonFunction && typeof backButtonFunction === "function") {
|
if (backButtonFunction && typeof backButtonFunction === "function") {
|
||||||
backButtonFunction()
|
backButtonFunction()
|
||||||
|
|
|
@ -24,6 +24,8 @@ Item {
|
||||||
property string rootButtonImage: "qrc:/images/controls/chevron-down.svg"
|
property string rootButtonImage: "qrc:/images/controls/chevron-down.svg"
|
||||||
property string rootButtonImageColor: "#D7D8DB"
|
property string rootButtonImageColor: "#D7D8DB"
|
||||||
property string rootButtonBackgroundColor: "#1C1D21"
|
property string rootButtonBackgroundColor: "#1C1D21"
|
||||||
|
property string rootButtonBackgroundHoveredColor: "#1C1D21"
|
||||||
|
property string rootButtonBackgroundPressedColor: "#1C1D21"
|
||||||
|
|
||||||
property string rootButtonHoveredBorderColor: "#494B50"
|
property string rootButtonHoveredBorderColor: "#494B50"
|
||||||
property string rootButtonDefaultBorderColor: "#2C2D30"
|
property string rootButtonDefaultBorderColor: "#2C2D30"
|
||||||
|
@ -71,6 +73,10 @@ Item {
|
||||||
Behavior on border.color {
|
Behavior on border.color {
|
||||||
PropertyAnimation { duration: 200 }
|
PropertyAnimation { duration: 200 }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Behavior on color {
|
||||||
|
PropertyAnimation { duration: 200 }
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
RowLayout {
|
RowLayout {
|
||||||
|
@ -112,6 +118,9 @@ Item {
|
||||||
ImageButtonType {
|
ImageButtonType {
|
||||||
Layout.rightMargin: 16
|
Layout.rightMargin: 16
|
||||||
|
|
||||||
|
implicitWidth: 40
|
||||||
|
implicitHeight: 40
|
||||||
|
|
||||||
hoverEnabled: false
|
hoverEnabled: false
|
||||||
image: rootButtonImage
|
image: rootButtonImage
|
||||||
imageColor: rootButtonImageColor
|
imageColor: rootButtonImageColor
|
||||||
|
@ -126,12 +135,20 @@ Item {
|
||||||
onEntered: {
|
onEntered: {
|
||||||
if (menu.visible === false) {
|
if (menu.visible === false) {
|
||||||
rootButtonBackground.border.color = rootButtonHoveredBorderColor
|
rootButtonBackground.border.color = rootButtonHoveredBorderColor
|
||||||
|
rootButtonBackground.color = rootButtonBackgroundHoveredColor
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onExited: {
|
onExited: {
|
||||||
if (menu.visible === false) {
|
if (menu.visible === false) {
|
||||||
rootButtonBackground.border.color = rootButtonDefaultBorderColor
|
rootButtonBackground.border.color = rootButtonDefaultBorderColor
|
||||||
|
rootButtonBackground.color = rootButtonBackgroundColor
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onPressed: {
|
||||||
|
if (menu.visible === false) {
|
||||||
|
rootButtonBackground.color = pressed ? rootButtonBackgroundPressedColor : entered ? rootButtonHoveredBorderColor : rootButtonDefaultBorderColor
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -31,6 +31,9 @@ Item {
|
||||||
ImageButtonType {
|
ImageButtonType {
|
||||||
id: headerActionButton
|
id: headerActionButton
|
||||||
|
|
||||||
|
implicitWidth: 40
|
||||||
|
implicitHeight: 40
|
||||||
|
|
||||||
image: root.actionButtonImage
|
image: root.actionButtonImage
|
||||||
imageColor: "#D7D8DB"
|
imageColor: "#D7D8DB"
|
||||||
|
|
||||||
|
|
|
@ -36,6 +36,9 @@ Item {
|
||||||
ImageButtonType {
|
ImageButtonType {
|
||||||
id: headerActionButton
|
id: headerActionButton
|
||||||
|
|
||||||
|
implicitWidth: 40
|
||||||
|
implicitHeight: 40
|
||||||
|
|
||||||
Layout.alignment: Qt.AlignRight
|
Layout.alignment: Qt.AlignRight
|
||||||
|
|
||||||
image: root.actionButtonImage
|
image: root.actionButtonImage
|
||||||
|
|
|
@ -15,11 +15,8 @@ Button {
|
||||||
property string imageColor: "#878B91"
|
property string imageColor: "#878B91"
|
||||||
property string disableImageColor: "#2C2D30"
|
property string disableImageColor: "#2C2D30"
|
||||||
|
|
||||||
property int backGroudRadius: 12
|
property alias backgroundColor: background.color
|
||||||
property int implicitSize: 40
|
property alias backgroundRadius: background.radius
|
||||||
|
|
||||||
implicitWidth: implicitSize
|
|
||||||
implicitHeight: implicitSize
|
|
||||||
|
|
||||||
hoverEnabled: true
|
hoverEnabled: true
|
||||||
|
|
||||||
|
@ -34,16 +31,16 @@ Button {
|
||||||
id: background
|
id: background
|
||||||
|
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
radius: backGroudRadius
|
|
||||||
color: {
|
color: {
|
||||||
if (root.enabled) {
|
if (root.enabled) {
|
||||||
if(root.pressed) {
|
if (root.pressed) {
|
||||||
return pressedColor
|
return pressedColor
|
||||||
}
|
}
|
||||||
return hovered ? hoveredColor : defaultColor
|
return hovered ? hoveredColor : defaultColor
|
||||||
}
|
}
|
||||||
return defaultColor
|
return defaultColor
|
||||||
}
|
}
|
||||||
|
radius: 12
|
||||||
Behavior on color {
|
Behavior on color {
|
||||||
PropertyAnimation { duration: 200 }
|
PropertyAnimation { duration: 200 }
|
||||||
}
|
}
|
||||||
|
|
|
@ -119,6 +119,9 @@ Item {
|
||||||
ImageButtonType {
|
ImageButtonType {
|
||||||
id: rightImage
|
id: rightImage
|
||||||
|
|
||||||
|
implicitWidth: 40
|
||||||
|
implicitHeight: 40
|
||||||
|
|
||||||
hoverEnabled: false
|
hoverEnabled: false
|
||||||
image: rightImageSource
|
image: rightImageSource
|
||||||
imageColor: rightImageColor
|
imageColor: rightImageColor
|
||||||
|
|
|
@ -167,7 +167,7 @@ Item {
|
||||||
}
|
}
|
||||||
|
|
||||||
onEntered: {
|
onEntered: {
|
||||||
backgroud.border.color = getBackgroundBorderColor(bgBorderHoveredColor)
|
backgroud.border.color = getBackgroundBorderColor(bgBorderHoveredColor)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -23,6 +23,9 @@ Popup {
|
||||||
image: "qrc:/images/svg/close_black_24dp.svg"
|
image: "qrc:/images/svg/close_black_24dp.svg"
|
||||||
imageColor: "#D7D8DB"
|
imageColor: "#D7D8DB"
|
||||||
|
|
||||||
|
implicitWidth: 40
|
||||||
|
implicitHeight: 40
|
||||||
|
|
||||||
onClicked: {
|
onClicked: {
|
||||||
PageController.goToDrawerRootPage()
|
PageController.goToDrawerRootPage()
|
||||||
}
|
}
|
||||||
|
|
|
@ -134,8 +134,10 @@ PageType {
|
||||||
|
|
||||||
rootButtonImageColor: "#0E0E11"
|
rootButtonImageColor: "#0E0E11"
|
||||||
rootButtonBackgroundColor: "#D7D8DB"
|
rootButtonBackgroundColor: "#D7D8DB"
|
||||||
|
rootButtonBackgroundHoveredColor: Qt.rgba(215, 216, 219, 0.8)
|
||||||
|
rootButtonBackgroundPressedColor: Qt.rgba(215, 216, 219, 0.65)
|
||||||
rootButtonHoveredBorderColor: "transparent"
|
rootButtonHoveredBorderColor: "transparent"
|
||||||
rootButtonPressedBorderColor: "transparent"
|
rootButtonDefaultBorderColor: "transparent"
|
||||||
rootButtonTextTopMargin: 8
|
rootButtonTextTopMargin: 8
|
||||||
rootButtonTextBottomMargin: 8
|
rootButtonTextBottomMargin: 8
|
||||||
|
|
||||||
|
@ -304,6 +306,8 @@ PageType {
|
||||||
|
|
||||||
DividerType {
|
DividerType {
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
|
Layout.leftMargin: 0
|
||||||
|
Layout.rightMargin: 0
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -62,6 +62,7 @@ PageType {
|
||||||
id: header
|
id: header
|
||||||
|
|
||||||
implicitWidth: parent.width
|
implicitWidth: parent.width
|
||||||
|
headerTextMaximumLineCount: 10
|
||||||
|
|
||||||
headerText: qsTr("What is the level of internet control in your region?")
|
headerText: qsTr("What is the level of internet control in your region?")
|
||||||
}
|
}
|
||||||
|
@ -145,14 +146,13 @@ PageType {
|
||||||
|
|
||||||
Item {
|
Item {
|
||||||
implicitWidth: 1
|
implicitWidth: 1
|
||||||
implicitHeight: 1
|
implicitHeight: 54
|
||||||
}
|
}
|
||||||
|
|
||||||
BasicButtonType {
|
BasicButtonType {
|
||||||
id: continueButton
|
id: continueButton
|
||||||
|
|
||||||
implicitWidth: parent.width
|
implicitWidth: parent.width
|
||||||
anchors.topMargin: 24
|
|
||||||
|
|
||||||
text: qsTr("Continue")
|
text: qsTr("Continue")
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue