status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(@desktop/statusq): Fix StatusQ and shared components as part of 

new saved addresses UI implementation
  - Fixed StatusInput and StatusBaseInput to respect rich text.
  - Fixed AddressInput's height that breaks the layout when inside
of QtQuick Layout.
  - Added support for icon clicks in StatusListItem.
  - Fixed broken right alignment in ContactsListAndSearch.

Fixes #8599
This commit is contained in:
Ivan Belyakov 2023-02-17 15:22:37 +03:00 committed by IvanBelyakoff
parent 2a1ea3b0ae
commit bfdd9092e1
9 changed files with 53 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ui/StatusQ/src/StatusQ/Components/StatusListItem.qml
View File

@ -34,6 +34,7 @@ Rectangle {
property Component inlineTagDelegate
property bool loading: false
property bool loadingFailed: false
property bool iconHoverEnabled: false
property StatusAssetSettings asset: StatusAssetSettings {
height: isImage ? 40 : 20
@ -80,6 +81,7 @@ Rectangle {
signal clicked(string itemId, var mouse)
signal titleClicked(string titleId)
signal iconClicked(var mouse)
enum Type {
Primary,
@ -146,6 +148,9 @@ Rectangle {
badge.border.color: statusListItem.color
ringSettings: statusListItem.ringSettings
loading: statusListItem.loading
hoverEnabled: statusListItem.iconHoverEnabled
onClicked: statusListItem.iconClicked(mouse)
}
Item {

3
ui/StatusQ/src/StatusQ/Components/StatusRoundIcon.qml
View File

@ -13,12 +13,13 @@ Rectangle {
bgWidth: 40
bgHeight: 40
bgColor: Theme.palette.primaryColor3
bgRadius: bgWidth / 2
}
color: asset.bgColor
implicitWidth: asset.bgWidth
implicitHeight: asset.bgHeight
radius: asset.bgWidth / 2
radius: asset.bgRadius
StatusIcon {

29
ui/StatusQ/src/StatusQ/Components/StatusSmartIdenticon.qml
View File

@ -15,6 +15,7 @@ Loader {
property StatusAssetSettings asset: StatusAssetSettings {
width: 40
height: 40
bgRadius: bgWidth / 2
}
property StatusIdenticonRingSettings ringSettings: StatusIdenticonRingSettings {
@ -27,6 +28,10 @@ Loader {
!root.asset.isImage ? roundedIcon : roundedImage
property bool loading: false
property bool hoverEnabled: false
readonly property bool hovered: (sourceComponent == roundedIcon && item) ?
item.hovered : false
signal clicked()
Component {
id: roundedImage
@ -35,7 +40,6 @@ Loader {
width: root.asset.width
height: root.asset.height
StatusRoundedImage {
id: statusRoundImage
width: parent.width
@ -65,15 +69,20 @@ Loader {
Component {
id: roundedIcon
StatusRoundIcon {
asset.bgWidth: root.asset.bgWidth
asset.bgHeight: root.asset.bgHeight
asset.bgColor: root.asset.bgColor
asset.width: root.asset.width
asset.height: root.asset.height
asset.name: root.asset.name
asset.rotation: root.asset.rotation
asset.color: root.asset.color
StatusRoundButton {
width: root.asset.bgWidth
height: root.asset.bgHeight
color: root.asset.bgColor
icon.width: root.asset.width
icon.height: root.asset.height
icon.name: root.asset.name
icon.rotation: root.asset.rotation
icon.color: root.asset.color
icon.hoverColor: root.asset.hoverColor
radius: root.asset.bgRadius
hoverEnabled: root.hoverEnabled
onClicked: root.clicked()
}
}

8
ui/StatusQ/src/StatusQ/Controls/StatusBaseInput.qml
View File

@ -378,8 +378,8 @@ Item {
if (utf8Length > root.maximumLength) {
var cursor = cursorPosition
text = previousText
if (cursor > text.length) {
cursorPosition = text.length
if (cursor > length) {
cursorPosition = length
} else {
cursorPosition = cursor - 1
}
@ -405,7 +405,7 @@ Item {
StatusBaseText {
id: placeholder
visible: (edit.text.length === 0)
visible: (edit.length === 0)
anchors.fill: parent
verticalAlignment: parent.verticalAlignment
font.pixelSize: 15
@ -436,7 +436,7 @@ Item {
id: clearButton
StatusFlatRoundButton {
visible: edit.text.length != 0 && root.clearable && !root.multiline
visible: edit.length != 0 && root.clearable && !root.multiline
&& edit.activeFocus
type: StatusFlatRoundButton.Type.Secondary
width: 24

10
ui/StatusQ/src/StatusQ/Controls/StatusInput.qml
View File

@ -263,10 +263,11 @@ Item {
}
statusBaseInput.valid = true
const rawText = statusBaseInput.edit.getText(0, statusBaseInput.edit.length)
if (validators.length) {
for (let idx in validators) {
let validator = validators[idx]
let result = validator.validate(statusBaseInput.text)
let result = validator.validate(rawText)
if (typeof result === "boolean" && result) {
statusBaseInput.valid = statusBaseInput.valid && true
@ -284,6 +285,7 @@ Item {
// the only way to trigger bindings for var property
errors = errors
result.errorMessage = validator.errorMessage
statusBaseInput.valid = statusBaseInput.valid && false
@ -297,8 +299,8 @@ Item {
// Undo the last input
const cursor = statusBaseInput.cursorPosition;
statusBaseInput.text = _previousText;
if (statusBaseInput.cursor > statusBaseInput.text.length) {
statusBaseInput.cursorPosition = statusBaseInput.text.length;
if (statusBaseInput.cursor > statusBaseInput.edit.length) {
statusBaseInput.cursorPosition = statusBaseInput.edit.length;
} else {
statusBaseInput.cursorPosition = cursor-1;
}
@ -319,7 +321,7 @@ Item {
})
root.pending = true
pendingValidators.push(asyncValidator.name)
asyncValidator.asyncOperationInternal(statusBaseInput.text)
asyncValidator.asyncOperationInternal(rawText)
}
} else if (!asyncValidators.length && !Object.values(errors).length) {
root.validatedValue = root.text

16
ui/StatusQ/src/StatusQ/Controls/StatusRoundButton.qml
View File

@ -23,6 +23,8 @@ Rectangle {
return Theme.palette.primaryColor1;
case StatusRoundButton.Type.Quaternary:
return Theme.palette.dangerColor1;
case StatusRoundButton.Type.Quinary:
return Theme.palette.directColor1;
}
}
@ -36,6 +38,8 @@ Rectangle {
return Theme.palette.baseColor1;
case StatusRoundButton.Type.Quaternary:
return Theme.palette.dangerColor1;
case StatusRoundButton.Type.Quinary:
return Theme.palette.directColor1;
}
}
@ -49,6 +53,8 @@ Rectangle {
return Theme.palette.baseColor1;
case StatusRoundButton.Type.Quaternary:
return Theme.palette.baseColor1;
case StatusRoundButton.Type.Quinary:
return Theme.palette.baseColor1;
}
}
}
@ -56,6 +62,7 @@ Rectangle {
property bool loading: false
property alias hovered: sensor.containsMouse
property alias hoverEnabled: sensor.hoverEnabled
property bool highlighted: false
@ -70,7 +77,8 @@ Rectangle {
Primary,
Secondary,
Tertiary,
Quaternary
Quaternary,
Quinary
}
/// Implementation
@ -87,6 +95,8 @@ Rectangle {
return "transparent";
case StatusRoundButton.Type.Quaternary:
return Theme.palette.dangerColor3;
case StatusRoundButton.Type.Quinary:
return "transparent";
}
}
@ -100,6 +110,8 @@ Rectangle {
return Theme.palette.primaryColor3;
case StatusRoundButton.Type.Quaternary:
return Theme.palette.dangerColor2;
case StatusRoundButton.Type.Quinary:
return Theme.palette.primaryColor3;
}
}
@ -113,6 +125,8 @@ Rectangle {
return "transparent";
case StatusRoundButton.Type.Quaternary:
return Theme.palette.baseColor2;
case StatusRoundButton.Type.Quinary:
return "transparent";
}
}
}

1
ui/StatusQ/src/StatusQ/Core/StatusAssetSettings.qml
View File

@ -29,6 +29,7 @@ QtObject {
property real bgHeight
property int bgRadius
property color bgColor: "transparent"
property color bgBorderColor: "transparent"
//image
property bool isImage: false

2
ui/imports/shared/controls/AddressInput.qml
View File

@ -23,7 +23,7 @@ Item {
property alias wrongInputValidationError: contactFieldAndList.wrongInputValidationError
property alias ownAddressError: contactFieldAndList.ownAddressError
height: contactFieldAndList.chatKey.height
implicitHeight: contactFieldAndList.chatKey.height
onSelectedAddressChanged: validate()

1
ui/imports/shared/controls/ContactsListAndSearch.qml
View File

@ -67,7 +67,6 @@ Item {
ColumnLayout {
id: column
anchors.fill: parent
anchors.rightMargin: Style.current.bigPadding
spacing: Style.current.smallPadding
Input {