mirror of
https://github.com/amnezia-vpn/amnezia-client.git
synced 2026-06-23 02:00:20 +07:00
remove Flickable references in LabelWithButtonType
This commit is contained in:
Cyril Anisimov
@@ -1,328 +1,309 @@
|
|||||||
import QtQuick
|
import QtQuick
|
||||||
import QtQuick.Controls
|
import QtQuick.Controls
|
||||||
import QtQuick.Layouts
|
import QtQuick.Layouts
|
||||||
|
|
||||||
import Style 1.0
|
import Style 1.0
|
||||||
|
|
||||||
import "TextTypes"
|
import "TextTypes"
|
||||||
|
|
||||||
Item {
|
Item {
|
||||||
id: root
|
id: root
|
||||||
|
|
||||||
property string text
|
// property alias focusObjectName: eyeImage.objectName
|
||||||
property int textMaximumLineCount: 2
|
property string text
|
||||||
property int textElide: Qt.ElideRight
|
property int textMaximumLineCount: 2
|
||||||
|
property int textElide: Qt.ElideRight
|
||||||
property string descriptionText
|
|
||||||
|
property string descriptionText
|
||||||
property var clickedFunction
|
|
||||||
|
property var clickedFunction
|
||||||
property string buttonImageSource
|
|
||||||
property string rightImageSource
|
property string buttonImageSource
|
||||||
property string leftImageSource
|
property string rightImageSource
|
||||||
property bool isLeftImageHoverEnabled: true
|
property string leftImageSource
|
||||||
property bool isSmallLeftImage: false
|
property bool isLeftImageHoverEnabled: true
|
||||||
|
property bool isSmallLeftImage: false
|
||||||
property alias rightButton: rightImage
|
|
||||||
property alias eyeButton: eyeImage
|
property alias rightButton: rightImage
|
||||||
property FlickableType parentFlickable
|
property alias eyeButton: eyeImage
|
||||||
|
|
||||||
property string textColor: AmneziaStyle.color.paleGray
|
property string textColor: AmneziaStyle.color.paleGray
|
||||||
property string textDisabledColor: AmneziaStyle.color.mutedGray
|
property string textDisabledColor: AmneziaStyle.color.mutedGray
|
||||||
property string descriptionColor: AmneziaStyle.color.mutedGray
|
property string descriptionColor: AmneziaStyle.color.mutedGray
|
||||||
property string descriptionDisabledColor: AmneziaStyle.color.charcoalGray
|
property string descriptionDisabledColor: AmneziaStyle.color.charcoalGray
|
||||||
property real textOpacity: 1.0
|
property real textOpacity: 1.0
|
||||||
|
|
||||||
property string borderFocusedColor: AmneziaStyle.color.paleGray
|
property string borderFocusedColor: AmneziaStyle.color.paleGray
|
||||||
property int borderFocusedWidth: 1
|
property int borderFocusedWidth: 1
|
||||||
|
|
||||||
property string rightImageColor: AmneziaStyle.color.paleGray
|
property string rightImageColor: AmneziaStyle.color.paleGray
|
||||||
|
|
||||||
property bool descriptionOnTop: false
|
property bool descriptionOnTop: false
|
||||||
property bool hideDescription: true
|
property bool hideDescription: true
|
||||||
|
|
||||||
property bool isFocusable: !(eyeImage.visible || rightImage.visible) // TODO: this component already has focusable items
|
property bool isFocusable: !(eyeImage.visible || rightImage.visible) // TODO: this component already has focusable items
|
||||||
|
|
||||||
Keys.onTabPressed: {
|
Keys.onTabPressed: {
|
||||||
FocusController.nextKeyTabItem()
|
FocusController.nextKeyTabItem()
|
||||||
}
|
}
|
||||||
|
|
||||||
Keys.onBacktabPressed: {
|
Keys.onBacktabPressed: {
|
||||||
FocusController.previousKeyTabItem()
|
FocusController.previousKeyTabItem()
|
||||||
}
|
}
|
||||||
|
|
||||||
Keys.onUpPressed: {
|
Keys.onUpPressed: {
|
||||||
FocusController.nextKeyUpItem()
|
FocusController.nextKeyUpItem()
|
||||||
}
|
}
|
||||||
|
|
||||||
Keys.onDownPressed: {
|
Keys.onDownPressed: {
|
||||||
FocusController.nextKeyDownItem()
|
FocusController.nextKeyDownItem()
|
||||||
}
|
}
|
||||||
|
|
||||||
Keys.onLeftPressed: {
|
Keys.onLeftPressed: {
|
||||||
FocusController.nextKeyLeftItem()
|
FocusController.nextKeyLeftItem()
|
||||||
}
|
}
|
||||||
|
|
||||||
Keys.onRightPressed: {
|
Keys.onRightPressed: {
|
||||||
FocusController.nextKeyRightItem()
|
FocusController.nextKeyRightItem()
|
||||||
}
|
}
|
||||||
|
|
||||||
implicitWidth: content.implicitWidth + content.anchors.topMargin + content.anchors.bottomMargin
|
implicitWidth: content.implicitWidth + content.anchors.topMargin + content.anchors.bottomMargin
|
||||||
implicitHeight: content.implicitHeight + content.anchors.leftMargin + content.anchors.rightMargin
|
implicitHeight: content.implicitHeight + content.anchors.leftMargin + content.anchors.rightMargin
|
||||||
|
|
||||||
onFocusChanged: {
|
MouseArea {
|
||||||
if (root.activeFocus) {
|
anchors.fill: parent
|
||||||
if (root.parentFlickable) {
|
cursorShape: Qt.PointingHandCursor
|
||||||
root.parentFlickable.ensureVisible(root)
|
hoverEnabled: root.enabled
|
||||||
}
|
|
||||||
}
|
onEntered: {
|
||||||
}
|
if (rightImageSource) {
|
||||||
|
rightImageBackground.color = rightImage.hoveredColor
|
||||||
Connections {
|
} else if (leftImageSource) {
|
||||||
target: rightImage
|
leftImageBackground.color = rightImage.hoveredColor
|
||||||
function onFocusChanged() {
|
}
|
||||||
if (rightImage.activeFocus) {
|
root.textOpacity = 0.8
|
||||||
if (root.parentFlickable) {
|
}
|
||||||
root.parentFlickable.ensureVisible(root)
|
|
||||||
}
|
onExited: {
|
||||||
}
|
if (rightImageSource) {
|
||||||
}
|
rightImageBackground.color = rightImage.defaultColor
|
||||||
}
|
} else if (leftImageSource) {
|
||||||
|
leftImageBackground.color = rightImage.defaultColor
|
||||||
MouseArea {
|
}
|
||||||
anchors.fill: parent
|
root.textOpacity = 1
|
||||||
cursorShape: Qt.PointingHandCursor
|
}
|
||||||
hoverEnabled: root.enabled
|
|
||||||
|
onPressedChanged: {
|
||||||
onEntered: {
|
if (rightImageSource) {
|
||||||
if (rightImageSource) {
|
rightImageBackground.color = pressed ? rightImage.pressedColor : entered ? rightImage.hoveredColor : rightImage.defaultColor
|
||||||
rightImageBackground.color = rightImage.hoveredColor
|
} else if (leftImageSource) {
|
||||||
} else if (leftImageSource) {
|
leftImageBackground.color = pressed ? rightImage.pressedColor : entered ? rightImage.hoveredColor : rightImage.defaultColor
|
||||||
leftImageBackground.color = rightImage.hoveredColor
|
}
|
||||||
}
|
root.textOpacity = 0.7
|
||||||
root.textOpacity = 0.8
|
}
|
||||||
}
|
|
||||||
|
onClicked: {
|
||||||
onExited: {
|
if (clickedFunction && typeof clickedFunction === "function") {
|
||||||
if (rightImageSource) {
|
clickedFunction()
|
||||||
rightImageBackground.color = rightImage.defaultColor
|
}
|
||||||
} else if (leftImageSource) {
|
}
|
||||||
leftImageBackground.color = rightImage.defaultColor
|
}
|
||||||
}
|
|
||||||
root.textOpacity = 1
|
RowLayout {
|
||||||
}
|
id: content
|
||||||
|
anchors.fill: parent
|
||||||
onPressedChanged: {
|
anchors.leftMargin: 16
|
||||||
if (rightImageSource) {
|
anchors.rightMargin: 16
|
||||||
rightImageBackground.color = pressed ? rightImage.pressedColor : entered ? rightImage.hoveredColor : rightImage.defaultColor
|
anchors.topMargin: 16
|
||||||
} else if (leftImageSource) {
|
anchors.bottomMargin: 16
|
||||||
leftImageBackground.color = pressed ? rightImage.pressedColor : entered ? rightImage.hoveredColor : rightImage.defaultColor
|
|
||||||
}
|
Rectangle {
|
||||||
root.textOpacity = 0.7
|
id: leftImageBackground
|
||||||
}
|
|
||||||
|
visible: leftImageSource ? true : false
|
||||||
onClicked: {
|
|
||||||
if (clickedFunction && typeof clickedFunction === "function") {
|
Layout.preferredHeight: (rightImageSource || !isLeftImageHoverEnabled || isSmallLeftImage) ? 40 : 56
|
||||||
clickedFunction()
|
Layout.preferredWidth: (rightImageSource || !isLeftImageHoverEnabled || isSmallLeftImage)? 40 : 56
|
||||||
}
|
Layout.rightMargin: isSmallLeftImage ? 8 : (rightImageSource || !isLeftImageHoverEnabled) ? 16 : 0
|
||||||
}
|
|
||||||
}
|
radius: 12
|
||||||
|
color: AmneziaStyle.color.transparent
|
||||||
RowLayout {
|
|
||||||
id: content
|
Behavior on color {
|
||||||
anchors.fill: parent
|
PropertyAnimation { duration: 200 }
|
||||||
anchors.leftMargin: 16
|
}
|
||||||
anchors.rightMargin: 16
|
|
||||||
anchors.topMargin: 16
|
Image {
|
||||||
anchors.bottomMargin: 16
|
id: leftImage
|
||||||
|
|
||||||
Rectangle {
|
anchors.centerIn: parent
|
||||||
id: leftImageBackground
|
source: leftImageSource
|
||||||
|
}
|
||||||
visible: leftImageSource ? true : false
|
}
|
||||||
|
|
||||||
Layout.preferredHeight: (rightImageSource || !isLeftImageHoverEnabled || isSmallLeftImage) ? 40 : 56
|
ColumnLayout {
|
||||||
Layout.preferredWidth: (rightImageSource || !isLeftImageHoverEnabled || isSmallLeftImage)? 40 : 56
|
property real textLineHeight: 21.6
|
||||||
Layout.rightMargin: isSmallLeftImage ? 8 : (rightImageSource || !isLeftImageHoverEnabled) ? 16 : 0
|
property real descriptionTextLineHeight: 16
|
||||||
|
|
||||||
radius: 12
|
property int textPixelSize: 18
|
||||||
color: AmneziaStyle.color.transparent
|
property int descriptionTextSize: 13
|
||||||
|
|
||||||
Behavior on color {
|
ListItemTitleType {
|
||||||
PropertyAnimation { duration: 200 }
|
text: root.text
|
||||||
}
|
color: {
|
||||||
|
if (root.enabled) {
|
||||||
Image {
|
return root.descriptionOnTop ? root.descriptionColor : root.textColor
|
||||||
id: leftImage
|
} else {
|
||||||
|
return root.descriptionOnTop ? root.descriptionDisabledColor : root.textDisabledColor
|
||||||
anchors.centerIn: parent
|
}
|
||||||
source: leftImageSource
|
}
|
||||||
}
|
|
||||||
}
|
maximumLineCount: root.textMaximumLineCount
|
||||||
|
elide: root.textElide
|
||||||
ColumnLayout {
|
|
||||||
property real textLineHeight: 21.6
|
opacity: root.textOpacity
|
||||||
property real descriptionTextLineHeight: 16
|
|
||||||
|
Layout.fillWidth: true
|
||||||
property int textPixelSize: 18
|
|
||||||
property int descriptionTextSize: 13
|
lineHeight: root.descriptionOnTop ? parent.descriptionTextLineHeight : parent.textLineHeight
|
||||||
|
font.pixelSize: root.descriptionOnTop ? parent.descriptionTextSize : parent.textPixelSize
|
||||||
ListItemTitleType {
|
font.letterSpacing: root.descriptionOnTop ? 0.02 : 0
|
||||||
text: root.text
|
|
||||||
color: {
|
horizontalAlignment: Text.AlignLeft
|
||||||
if (root.enabled) {
|
verticalAlignment: Text.AlignVCenter
|
||||||
return root.descriptionOnTop ? root.descriptionColor : root.textColor
|
|
||||||
} else {
|
Behavior on opacity {
|
||||||
return root.descriptionOnTop ? root.descriptionDisabledColor : root.textDisabledColor
|
PropertyAnimation { duration: 200 }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
maximumLineCount: root.textMaximumLineCount
|
|
||||||
elide: root.textElide
|
CaptionTextType {
|
||||||
|
id: description
|
||||||
opacity: root.textOpacity
|
|
||||||
|
text: (eyeImage.visible && hideDescription) ? replaceWithAsterisks(root.descriptionText) : root.descriptionText
|
||||||
Layout.fillWidth: true
|
color: {
|
||||||
|
if (root.enabled) {
|
||||||
lineHeight: root.descriptionOnTop ? parent.descriptionTextLineHeight : parent.textLineHeight
|
return root.descriptionOnTop ? root.textColor : root.descriptionColor
|
||||||
font.pixelSize: root.descriptionOnTop ? parent.descriptionTextSize : parent.textPixelSize
|
} else {
|
||||||
font.letterSpacing: root.descriptionOnTop ? 0.02 : 0
|
return root.descriptionOnTop ? root.textDisabledColor : root.descriptionDisabledColor
|
||||||
|
}
|
||||||
horizontalAlignment: Text.AlignLeft
|
}
|
||||||
verticalAlignment: Text.AlignVCenter
|
|
||||||
|
opacity: root.textOpacity
|
||||||
Behavior on opacity {
|
|
||||||
PropertyAnimation { duration: 200 }
|
visible: root.descriptionText !== ""
|
||||||
}
|
|
||||||
}
|
Layout.fillWidth: true
|
||||||
|
|
||||||
|
lineHeight: root.descriptionOnTop ? parent.textLineHeight : parent.descriptionTextLineHeight
|
||||||
CaptionTextType {
|
font.pixelSize: root.descriptionOnTop ? parent.textPixelSize : parent.descriptionTextSize
|
||||||
id: description
|
font.letterSpacing: root.descriptionOnTop ? 0 : 0.02
|
||||||
|
|
||||||
text: (eyeImage.visible && hideDescription) ? replaceWithAsterisks(root.descriptionText) : root.descriptionText
|
horizontalAlignment: Text.AlignLeft
|
||||||
color: {
|
verticalAlignment: Text.AlignVCenter
|
||||||
if (root.enabled) {
|
|
||||||
return root.descriptionOnTop ? root.textColor : root.descriptionColor
|
Behavior on opacity {
|
||||||
} else {
|
PropertyAnimation { duration: 200 }
|
||||||
return root.descriptionOnTop ? root.textDisabledColor : root.descriptionDisabledColor
|
}
|
||||||
}
|
|
||||||
}
|
function replaceWithAsterisks(input) {
|
||||||
|
return '*'.repeat(input.length)
|
||||||
opacity: root.textOpacity
|
}
|
||||||
|
}
|
||||||
visible: root.descriptionText !== ""
|
}
|
||||||
|
|
||||||
Layout.fillWidth: true
|
ImageButtonType {
|
||||||
|
id: eyeImage
|
||||||
lineHeight: root.descriptionOnTop ? parent.textLineHeight : parent.descriptionTextLineHeight
|
visible: buttonImageSource !== ""
|
||||||
font.pixelSize: root.descriptionOnTop ? parent.textPixelSize : parent.descriptionTextSize
|
|
||||||
font.letterSpacing: root.descriptionOnTop ? 0 : 0.02
|
implicitWidth: 40
|
||||||
|
implicitHeight: 40
|
||||||
horizontalAlignment: Text.AlignLeft
|
|
||||||
verticalAlignment: Text.AlignVCenter
|
hoverEnabled: true
|
||||||
|
image: buttonImageSource
|
||||||
Behavior on opacity {
|
imageColor: rightImageColor
|
||||||
PropertyAnimation { duration: 200 }
|
|
||||||
}
|
Layout.alignment: Qt.AlignRight
|
||||||
|
|
||||||
function replaceWithAsterisks(input) {
|
Rectangle {
|
||||||
return '*'.repeat(input.length)
|
id: eyeImageBackground
|
||||||
}
|
anchors.fill: parent
|
||||||
}
|
radius: 12
|
||||||
}
|
color: AmneziaStyle.color.transparent
|
||||||
|
|
||||||
ImageButtonType {
|
Behavior on color {
|
||||||
id: eyeImage
|
PropertyAnimation { duration: 200 }
|
||||||
visible: buttonImageSource !== ""
|
}
|
||||||
|
}
|
||||||
implicitWidth: 40
|
|
||||||
implicitHeight: 40
|
onClicked: {
|
||||||
|
hideDescription = !hideDescription
|
||||||
hoverEnabled: true
|
}
|
||||||
image: buttonImageSource
|
|
||||||
imageColor: rightImageColor
|
Keys.onEnterPressed: {
|
||||||
|
clicked()
|
||||||
Layout.alignment: Qt.AlignRight
|
}
|
||||||
|
|
||||||
Rectangle {
|
Keys.onReturnPressed: {
|
||||||
id: eyeImageBackground
|
clicked()
|
||||||
anchors.fill: parent
|
}
|
||||||
radius: 12
|
}
|
||||||
color: AmneziaStyle.color.transparent
|
|
||||||
|
ImageButtonType {
|
||||||
Behavior on color {
|
id: rightImage
|
||||||
PropertyAnimation { duration: 200 }
|
|
||||||
}
|
implicitWidth: 40
|
||||||
}
|
implicitHeight: 40
|
||||||
|
|
||||||
onClicked: {
|
hoverEnabled: false
|
||||||
hideDescription = !hideDescription
|
image: rightImageSource
|
||||||
}
|
imageColor: rightImageColor
|
||||||
|
visible: rightImageSource ? true : false
|
||||||
Keys.onEnterPressed: {
|
|
||||||
clicked()
|
Layout.alignment: Qt.AlignRight
|
||||||
}
|
|
||||||
|
Rectangle {
|
||||||
Keys.onReturnPressed: {
|
id: rightImageBackground
|
||||||
clicked()
|
anchors.fill: parent
|
||||||
}
|
radius: 12
|
||||||
}
|
color: AmneziaStyle.color.transparent
|
||||||
|
|
||||||
ImageButtonType {
|
Behavior on color {
|
||||||
id: rightImage
|
PropertyAnimation { duration: 200 }
|
||||||
|
}
|
||||||
implicitWidth: 40
|
}
|
||||||
implicitHeight: 40
|
onClicked: {
|
||||||
|
if (clickedFunction && typeof clickedFunction === "function") {
|
||||||
hoverEnabled: false
|
clickedFunction()
|
||||||
image: rightImageSource
|
}
|
||||||
imageColor: rightImageColor
|
}
|
||||||
visible: rightImageSource ? true : false
|
}
|
||||||
|
}
|
||||||
Layout.alignment: Qt.AlignRight
|
|
||||||
|
Rectangle {
|
||||||
Rectangle {
|
id: background
|
||||||
id: rightImageBackground
|
anchors.fill: root
|
||||||
anchors.fill: parent
|
color: AmneziaStyle.color.transparent
|
||||||
radius: 12
|
|
||||||
color: AmneziaStyle.color.transparent
|
border.color: root.activeFocus ? root.borderFocusedColor : AmneziaStyle.color.transparent
|
||||||
|
border.width: root.activeFocus ? root.borderFocusedWidth : 0
|
||||||
Behavior on color {
|
|
||||||
PropertyAnimation { duration: 200 }
|
|
||||||
}
|
Behavior on color {
|
||||||
}
|
PropertyAnimation { duration: 200 }
|
||||||
onClicked: {
|
}
|
||||||
if (clickedFunction && typeof clickedFunction === "function") {
|
}
|
||||||
clickedFunction()
|
|
||||||
}
|
Keys.onEnterPressed: {
|
||||||
}
|
if (clickedFunction && typeof clickedFunction === "function") {
|
||||||
}
|
clickedFunction()
|
||||||
}
|
}
|
||||||
|
}
|
||||||
Rectangle {
|
|
||||||
id: background
|
Keys.onReturnPressed: {
|
||||||
anchors.fill: root
|
if (clickedFunction && typeof clickedFunction === "function") {
|
||||||
color: AmneziaStyle.color.transparent
|
clickedFunction()
|
||||||
|
}
|
||||||
border.color: root.activeFocus ? root.borderFocusedColor : AmneziaStyle.color.transparent
|
}
|
||||||
border.width: root.activeFocus ? root.borderFocusedWidth : 0
|
}
|
||||||
|
|
||||||
|
|
||||||
Behavior on color {
|
|
||||||
PropertyAnimation { duration: 200 }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Keys.onEnterPressed: {
|
|
||||||
if (clickedFunction && typeof clickedFunction === "function") {
|
|
||||||
clickedFunction()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Keys.onReturnPressed: {
|
|
||||||
if (clickedFunction && typeof clickedFunction === "function") {
|
|
||||||
clickedFunction()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
Reference in New Issue
Block a user