Use OpacityRamp to hint at scrollable attachmentsOptions

This commit is contained in:
John Gibbon 2021-01-03 22:32:26 +01:00 committed by Sebastian Wolf
parent 2b634471dc
commit 81ffb53062
No known key found for this signature in database
GPG key ID: CEA9522B5F38A90A

View file

@ -1174,7 +1174,6 @@ Page {
spacing: Theme.paddingSmall spacing: Theme.paddingSmall
topPadding: Theme.paddingSmall topPadding: Theme.paddingSmall
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
clip: true
visible: height > 0 visible: height > 0
width: parent.width - ( 2 * Theme.horizontalPageMargin ) width: parent.width - ( 2 * Theme.horizontalPageMargin )
height: isNeeded ? implicitHeight : 0 height: isNeeded ? implicitHeight : 0
@ -1210,13 +1209,23 @@ Page {
id: attachmentOptionsFlickable id: attachmentOptionsFlickable
property bool isNeeded: false property bool isNeeded: false
width: parent.width width: chatPage.width
x: -Theme.horizontalPageMargin
height: isNeeded ? attachmentOptionsRow.height : 0 height: isNeeded ? attachmentOptionsRow.height : 0
Behavior on height { SmoothedAnimation { duration: 200 } } Behavior on height { SmoothedAnimation { duration: 200 } }
visible: height > 0 visible: height > 0
contentHeight: attachmentOptionsRow.height contentHeight: attachmentOptionsRow.height
contentWidth: Math.max(parent.width, attachmentOptionsRow.width) contentWidth: Math.max(width, attachmentOptionsRow.width)
clip: true property bool fadeRight: (attachmentOptionsRow.width-contentX) > width
property bool fadeLeft: !fadeRight && contentX > 0
layer.enabled: fadeRight || fadeLeft
layer.effect: OpacityRampEffectBase {
direction: attachmentOptionsFlickable.fadeRight ? OpacityRamp.LeftToRight : OpacityRamp.RightToLeft
source: attachmentOptionsFlickable
slope: 1 + 6 * (chatPage.width) / Screen.width
offset: 1 - 1 / slope
}
Row { Row {
id: attachmentOptionsRow id: attachmentOptionsRow
@ -1226,6 +1235,8 @@ Page {
anchors.right: parent.right anchors.right: parent.right
layoutDirection: Qt.RightToLeft layoutDirection: Qt.RightToLeft
spacing: Theme.paddingMedium spacing: Theme.paddingMedium
leftPadding: Theme.horizontalPageMargin
rightPadding: Theme.horizontalPageMargin
IconButton { IconButton {
id: attachImageIconButton id: attachImageIconButton