fix(@desktop): Fix scrolling twitches using ScrollView amd Flickable items

Close #5781
This commit is contained in:
MishkaRogachev 2022-07-13 15:29:38 +03:00 committed by Mikhail Rogachev
parent 1298f13fa3
commit 0d3aed0611
45 changed files with 108 additions and 141 deletions

@ -1 +1 @@
Subproject commit 21669aba17b55345bb7b8bae37b2963e8f79045e
Subproject commit 930fa3daf01ef984d5e414b5ad6e322ce1eb02d0

View File

@ -3,9 +3,10 @@ import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import QtWebEngine 1.10
import shared.controls 1.0
import StatusQ.Core 0.1
import StatusQ.Controls 0.1
import shared.controls 1.0
import shared.popups 1.0
import utils 1.0
@ -36,7 +37,7 @@ ModalPopup {
}
}
ScrollView {
StatusScrollView {
id: svMessage
width: parent.width
height: 100

View File

@ -4,15 +4,16 @@ import QtQuick.Layouts 1.13
import QtQuick.Dialogs 1.3
import QtGraphicalEffects 1.13
import utils 1.0
import StatusQ.Core 0.1
import StatusQ.Controls 0.1
import StatusQ.Popups 0.1
import utils 1.0
import shared 1.0
import shared.views 1.0
import shared.panels 1.0
import shared.popups 1.0
import "../stores"
StatusModal {
@ -152,7 +153,7 @@ StatusModal {
anchors.fill: parent
anchors.leftMargin: Style.current.padding
anchors.rightMargin: Style.current.padding
ScrollView {
StatusScrollView {
width: parent.width
height: 150
TextArea {

View File

@ -1,12 +1,13 @@
import QtQuick 2.13
import QtQuick.Controls 2.3
import StatusQ.Core 0.1
import StatusQ.Components 0.1
import StatusQ.Controls 0.1
import utils 1.0
ScrollView {
StatusScrollView {
id: contactListPanel
property alias model: groupMembers.model
@ -19,7 +20,6 @@ ScrollView {
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ScrollBar.vertical.policy: groupMembers.contentHeight > groupMembers.height ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
ListView {
id: groupMembers
anchors.fill: parent

View File

@ -21,7 +21,7 @@ import "../../controls/community"
import "../../../CommunitiesPortal/controls"
import "../../../CommunitiesPortal/panels"
Flickable {
StatusScrollView {
id: root
property alias name: nameInput.text
@ -45,12 +45,6 @@ Flickable {
readonly property bool saveChangesButtonEnabled: true
contentWidth: layout.width
contentHeight: layout.height
clip: true
interactive: contentHeight > height
flickableDirection: Flickable.VerticalFlick
implicitWidth: layout.implicitWidth
implicitHeight: layout.implicitHeight

View File

@ -2,15 +2,17 @@ import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQml.Models 2.13
import QtGraphicalEffects 1.13
import StatusQ.Core 0.1
import StatusQ.Controls 0.1
import shared 1.0
import shared.popups 1.0
import utils 1.0
import StatusQ.Controls 0.1
import "../views"
import "../panels"
import utils 1.0
Popup {
enum Filter {
All,
@ -88,14 +90,13 @@ Popup {
}
}
ScrollView {
StatusScrollView {
id: scrollView
anchors.top: activityCenterTopBar.bottom
anchors.topMargin: 13
anchors.bottom: parent.bottom
anchors.bottomMargin: Style.current.smallPadding
width: parent.width
clip: true
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff

View File

@ -5,6 +5,7 @@ import QtQuick.Layouts 1.13
import utils 1.0
import shared.controls 1.0
import StatusQ.Core 0.1
import StatusQ.Controls 0.1
import shared.panels 1.0
@ -71,9 +72,8 @@ ModalPopup {
validationError: channelNameValidationError
}
ScrollView {
StatusScrollView {
id: sview
clip: true
anchors.top: channelName.bottom
anchors.topMargin: Style.current.smallPadding

View File

@ -69,13 +69,12 @@ StatusModal {
StatusModalDivider { topPadding: 8 }
ScrollView {
StatusScrollView {
width: parent.width
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
topPadding: 8
bottomPadding: 8
height: 400
clip: true
ListView {
anchors.fill: parent

View File

@ -110,15 +110,14 @@ StatusModal {
}
}
ScrollView {
StatusScrollView {
width: root.width
height: 300
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
clip: true
ListView {
id: chatList
anchors.fill: parent
clip: true
model: community.chats
boundsBehavior: Flickable.StopAtBounds
delegate: StatusListItem {

View File

@ -71,7 +71,7 @@ StatusModal {
bottomPadding: 8
}
ScrollView {
StatusScrollView {
id: scrollView
width: root.width
@ -82,7 +82,6 @@ StatusModal {
contentHeight: content.height
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
clip: true
function scrollBackUp() {
vScrollBar.setPosition(0)

View File

@ -76,7 +76,7 @@ StatusModal {
communityColorValidator) === ""
}
contentItem: ScrollView {
contentItem: StatusScrollView {
id: scrollView
@ -86,12 +86,10 @@ StatusModal {
property alias channelDescription: descriptionTextArea
property alias channelColorDialog: colorDialog
contentHeight: content.height
height: Math.min(content.height, 432)
width: popup.width
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
clip: true
function scrollBackUp() {
vScrollBar.setPosition(0)

View File

@ -43,19 +43,17 @@ StatusModal {
width: parent.width
}
ScrollView {
StatusScrollView {
width: parent.width
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
topPadding: 8
bottomPadding: 8
height: 300
clip: true
ListView {
id: membershipRequestList
anchors.fill: parent
model: popup.communityData.pendingRequestsToJoin
clip: true
delegate: StatusListItem {
anchors.horizontalCenter: parent.horizontalCenter

View File

@ -100,7 +100,7 @@ Item {
}
}
ScrollView {
StatusScrollView {
id: chatGroupsContainer
anchors.top: membershipRequests.bottom
anchors.topMargin: Style.current.padding
@ -112,7 +112,6 @@ Item {
width: parent.width
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
clip: true
contentHeight: communityChatListAndCategories.height
+ bannerColumn.height
+ Style.current.bigPadding

View File

@ -138,18 +138,16 @@ Item {
}
// chat list
ScrollView {
StatusScrollView {
id: scrollView
Layout.fillWidth: true
Layout.fillHeight: true
contentHeight: channelList.childrenRect.height
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
clip: true
StatusChatList {
id: channelList
width: parent.width
width: scrollView.availableWidth
model: root.chatSectionModule.model
highlightItem: !root.store.openCreateChat
onChatItemSelected: {
@ -236,6 +234,15 @@ Item {
}
}
}
EmptyViewPanel {
id: emptyViewAndSuggestions
visible: !localAccountSensitiveSettings.hideChannelSuggestions
anchors.top: channelList.bottom
anchors.topMargin: Style.current.padding
rootStore: root.store
onSuggestedMessageClicked: chatSectionModule.createPublicChat(channel)
}
}
}

View File

@ -38,7 +38,6 @@ StatusScrollView {
contentHeight: column.height + d.layoutVMargin
contentWidth: column.width + d.layoutHMargin
clip: true
ColumnLayout {
id: column

View File

@ -9,7 +9,7 @@ import StatusQ.Controls.Validators 0.1
import StatusQ.Components 0.1
import StatusQ.Popups 0.1
ScrollView {
StatusScrollView {
id: root
property string title: qsTr("Community Colour")
@ -35,8 +35,6 @@ ScrollView {
hexInput.text = color.toString();
}
contentHeight: column.height
ScrollBar.vertical.policy: ScrollBar.AsNeeded
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff

View File

@ -10,7 +10,7 @@ import StatusQ.Popups 0.1
import utils 1.0
ScrollView {
StatusScrollView {
id: root
property string tags
@ -61,8 +61,6 @@ ScrollView {
}
onSelectedTagsChanged: updateSelectedTags()
contentHeight: column.height
ScrollBar.vertical.policy: ScrollBar.AsNeeded
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff

View File

@ -41,13 +41,8 @@ StatusStackModal {
}
stackItems: [
Flickable {
StatusScrollView {
id: generalView
clip: true
contentHeight: generalViewLayout.height
implicitHeight: generalViewLayout.implicitHeight
interactive: contentHeight > height
flickableDirection: Flickable.VerticalFlick
ColumnLayout {
id: generalViewLayout

View File

@ -4,6 +4,7 @@ import QtQuick.Layouts 1.13
import utils 1.0
import StatusQ.Core 0.1
import StatusQ.Controls 0.1
import StatusQ.Components 0.1
import StatusQ.Popups 0.1
@ -77,15 +78,11 @@ Item {
anchors.left: parent.left
}
ScrollView {
StatusScrollView {
id: sview
clip: true
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ScrollBar.vertical.policy: ScrollBar.AlwaysOn
contentHeight: tokenList.height
anchors.top: searchBox.bottom
anchors.topMargin: Style.current.smallPadding
anchors.left: parent.left

View File

@ -3,6 +3,8 @@ import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3
import QtQml.Models 2.3
import StatusQ.Core 0.1
import utils 1.0
import shared 1.0
import shared.panels 1.0
@ -43,7 +45,7 @@ ModalPopup {
font.weight: Font.Bold
}
ScrollView {
StatusScrollView {
anchors.fill: parent
anchors.top: lbl2.bottom
anchors.topMargin: 70

View File

@ -32,11 +32,9 @@ StatusModal {
destroy()
}
contentItem: ScrollView {
contentItem: StatusScrollView {
height: parent.height
width: parent.width
contentHeight: nodesColumn.height
clip: true
Column {
id: nodesColumn

View File

@ -1,12 +1,13 @@
import QtQuick 2.12
import QtQuick.Layouts 1.12
import StatusQ.Controls 0.1
import StatusQ.Core.Theme 0.1
import shared.panels 1.0
import utils 1.0
import StatusQ.Controls 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Core 0.1
ColumnLayout {
id: root
@ -14,18 +15,14 @@ ColumnLayout {
spacing: Style.current.padding
Flickable {
StatusScrollView {
id: flick
clip: true
contentHeight: flickLayout.height
interactive: contentHeight > height
flickableDirection: Flickable.VerticalFlick
Layout.fillWidth: true
Layout.fillHeight: true
ColumnLayout {
id: flickLayout
width: parent.width
width: flick.availableWidth
spacing: Style.current.padding
Image {

View File

@ -2,13 +2,14 @@ import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import StatusQ.Core 0.1
import StatusQ.Controls 0.1
import StatusQ.Controls.Validators 0.1
import shared.panels 1.0
import utils 1.0
Flickable {
StatusScrollView {
id: root
property int wordRandomNumber: -1
@ -19,11 +20,7 @@ Flickable {
default property alias content: column.children
clip: true
contentHeight: column.height
implicitHeight: 520
interactive: contentHeight > height
flickableDirection: Flickable.VerticalFlick
ColumnLayout {
id: column

View File

@ -193,10 +193,8 @@ Item {
height: 200
id: ensList
ScrollView {
StatusScrollView {
anchors.fill: parent
Layout.fillWidth: true
Layout.fillHeight: true
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ScrollBar.vertical.policy: lvEns.contentHeight > lvEns.height ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff

View File

@ -82,12 +82,11 @@ Item {
id: popup
title: qsTr("Terms of name registration")
ScrollView {
StatusScrollView {
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ScrollBar.vertical.policy: ScrollBar.AlwaysOn
width: parent.width
height: parent.height
clip: true
Column {
spacing: Style.current.halfPadding
@ -212,11 +211,9 @@ Item {
}
}
ScrollView {
StatusScrollView {
id: sview
clip: true
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
contentHeight: contentItem.childrenRect.height
anchors.top: sectionTitle.bottom
anchors.topMargin: Style.current.padding
anchors.bottom: startBtn.top

View File

@ -16,11 +16,9 @@ Item {
property string username: ""
property int profileContentWidth
ScrollView {
StatusScrollView {
id: sview
clip: true
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
contentHeight: contentItem.childrenRect.height
anchors.top: parent.top
anchors.topMargin: 24
anchors.bottom: startBtn.top

View File

@ -1,10 +1,13 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import StatusQ.Components 0.1
import utils 1.0
import StatusQ.Core 0.1
import StatusQ.Components 0.1
import utils 1.0
import shared 1.0
import shared.popups 1.0
import "../panels"
Item {
@ -22,7 +25,7 @@ Item {
anchors.horizontalCenter: parent.horizontalCenter
}
ScrollView {
StatusScrollView {
contentWidth: availableWidth
contentHeight: profileMenu.height + 24
anchors.right: parent.right
@ -32,7 +35,6 @@ Item {
anchors.top: title.bottom
anchors.topMargin: Style.current.padding
anchors.bottom: parent.bottom
clip: true
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
MenuPanel {

View File

@ -99,16 +99,15 @@ Item {
}
}
ScrollView {
StatusScrollView {
id: scrollView
anchors.top: titleRow.visible ? titleRow.bottom : topHeader.bottom
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.topMargin: Style.current.bigPadding
width: root.contentWidth
clip: true
Flickable {
StatusScrollView {
id: contentFliackable
contentWidth: Math.max(contentLayout.implicitWidth, scrollView.width)
contentHeight: Math.max(contentLayout.implicitHeight, scrollView.height) + scrollView.anchors.topMargin

View File

@ -3,12 +3,13 @@ import QtQuick.Controls 2.13
import QtGraphicalEffects 1.13
import QtQml.Models 2.13
import StatusQ.Core 0.1
import StatusQ.Controls 0.1
import utils 1.0
import shared.panels 1.0
import StatusQ.Controls 0.1
ScrollView {
StatusScrollView {
id: collectiblesContent
readonly property int imageSize: 164
@ -23,7 +24,6 @@ ScrollView {
width: parent.width
ScrollBar.vertical.policy: ScrollBar.AlwaysOff
ScrollBar.horizontal.policy: ScrollBar.AsNeeded
clip: true
Loader {
id: contentLoader

View File

@ -152,19 +152,18 @@ StatusModal {
}
}
contentItem: ScrollView {
contentItem: StatusScrollView {
id: scroll
width: root.width
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
topPadding: Style.current.halfPadding
bottomPadding: Style.current.halfPadding
leftPadding: Style.current.padding
rightPadding: Style.current.padding
height: Style.dp(400)
clip: true
Column {
property alias accountNameInput: accountNameInput
width: parent.width
width: scroll.availableWidth
spacing: Style.current.halfPadding
topPadding: Style.dp(20)

View File

@ -38,14 +38,13 @@ Popup {
}
}
contentItem: ScrollView {
contentItem: StatusScrollView {
id: scrollView
contentHeight: content.height
width: popup.width
height: popup.height
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
clip: true
Column {
id: content

View File

@ -2,6 +2,9 @@ import QtQuick 2.13
import QtQuick.Controls 2.13
import QtGraphicalEffects 1.13
import StatusQ.Core 0.1
import StatusQ.Components 0.1
import utils 1.0
import shared 1.0
import shared.panels 1.0
@ -10,8 +13,6 @@ import "../stores"
import "../popups"
import "collectibles"
import StatusQ.Components 0.1
Item {
id: root
width: parent.width
@ -46,9 +47,8 @@ Item {
Component {
id: loaded
ScrollView {
StatusScrollView {
id: scrollView
clip: true
Column {
id: collectiblesSection

View File

@ -9,6 +9,7 @@ import shared.panels 1.0
import shared.controls 1.0
import StatusQ.Components 0.1
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1

View File

@ -225,7 +225,7 @@ Item {
text: qsTr("No saved addresses")
}
ScrollView {
StatusScrollView {
anchors.top: errorMessage.bottom
anchors.topMargin: Style.current.padding
anchors.bottom: parent.bottom
@ -233,14 +233,12 @@ Item {
anchors.right: parent.right
anchors.left: parent.left
visible: listView.count > 0
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ListView {
id: listView
model: RootStore.savedAddresses
clip: true
spacing: 5
anchors.fill: parent
width: parent.width
boundsBehavior: Flickable.StopAtBounds
delegate: delegateSavedAddress
}

View File

@ -47,7 +47,7 @@ StatusDialog {
image.source: root.imageSrc
}
ScrollView {
StatusScrollView {
Layout.preferredWidth: contentWidth
Layout.minimumWidth: 300
@ -55,18 +55,12 @@ StatusDialog {
Layout.preferredHeight: contentHeight
Layout.maximumHeight: 400
contentWidth: messageContent.width
contentHeight: messageContent.height
clip: true
StatusBaseText {
id: messageContent
width: Math.min(implicitWidth, 640)
text: root.introMessage !== "" ? root.introMessage : qsTr("Community <b>%1</b> has no intro message...").arg(root.name)
clip: true
color: Theme.palette.directColor1
wrapMode: Text.WordWrap
}

View File

@ -260,18 +260,17 @@ StatusModal {
source: border
}
ScrollView {
StatusScrollView {
id: scrollView
height: stack.height - assetAndAmmountSelector.height
width: parent.width
anchors.top: border.bottom
anchors.topMargin: Style.current.halfPadding
anchors.left: parent.left
contentHeight: recipientSelector.height + addressSelector.height + networkSelector.height +
fees.height + Style.current.halfPadding
ScrollBar.vertical.policy: ScrollBar.AlwaysOff
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
contentHeight: recipientSelector.height + addressSelector.height + networkSelector.height + fees.height + Style.current.halfPadding
clip: true
// To-do use standard StatusInput component once the flow for ens name resolution is clear
RecipientSelector {

View File

@ -16,6 +16,7 @@ import shared.stores 1.0
//TODO remove this dependency
import AppLayouts.Chat.panels 1.0
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Core.Utils 0.1 as StatusQUtils
import StatusQ.Components 0.1
@ -928,7 +929,7 @@ Rectangle {
visible: control.isStatusUpdateInput
}
ScrollView {
StatusScrollView {
id: scrollView
anchors.top: parent.top
anchors.bottom: parent.bottom

View File

@ -3,6 +3,7 @@ import QtQuick.Controls 2.13
import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.0
import StatusQ.Core 0.1
import StatusQ.Controls 0.1
import StatusQ.Components 0.1
import StatusQ.Core.Utils 0.1 as StatusQUtils
@ -279,8 +280,8 @@ Popup {
}
}
ScrollView {
property ScrollBar vScrollBar: ScrollBar.vertical
StatusScrollView {
readonly property ScrollBar vScrollBar: ScrollBar.vertical
property var categrorySectionHeightRatios: []
property int activeCategory: 0
@ -292,7 +293,6 @@ Popup {
Layout.topMargin: Style.current.smallPadding
Layout.alignment: Qt.AlignTop | Qt.AlignLeft
Layout.preferredHeight: 400 - Style.current.smallPadding - emojiHeader.height
clip: true
ScrollBar.vertical.policy: ScrollBar.AlwaysOn
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
@ -332,6 +332,7 @@ Popup {
model: popup.categories
StatusEmojiSection {
width: scrollView.availableWidth
searchString: popup.searchString
addEmoji: popup.addEmoji
}

View File

@ -22,9 +22,8 @@ Item {
anchors.top: index === 0 ? parent.top : parent.children[index - 1].bottom
anchors.topMargin: 0
width: parent.width
// childrenRect caused a binding loop here
height: this.visible ? emojiGrid.height + categoryText.height + noRecentText.height + Style.current.padding : 0
height: this.visible ? emojiGrid.height + categoryText.height + noRecentText.height + Style.current.padding : 0
StyledText {
id: categoryText

View File

@ -3,6 +3,7 @@ import QtQuick.Controls 2.13
import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.0
import StatusQ.Core 0.1
import StatusQ.Components 0.1
import StatusQ.Controls 0.1
@ -296,10 +297,9 @@ Popup {
Component {
id: gifItems
ScrollView {
StatusScrollView {
id: scrollView
property ScrollBar vScrollBar: ScrollBar.vertical
clip: true
topPadding: Style.current.smallPadding
leftPadding: Style.current.smallPadding
rightPadding: Style.current.smallPadding

View File

@ -6,6 +6,7 @@ import QtGraphicalEffects 1.0
import utils 1.0
import shared.panels 1.0
import StatusQ.Core 0.1
import StatusQ.Controls 0.1 as StatusQControls
import StatusQ.Components 0.1
//TODO improve this!
@ -228,12 +229,11 @@ Popup {
}
}
ScrollView {
StatusScrollView {
id: installedStickersSV
anchors.bottom: parent.bottom
height: 32
clip: true
ScrollBar.vertical.policy: ScrollBar.AlwaysOff
ScrollBar.vertical.policy: ScrollBar.AlwaysOff
RowLayout {
id: stickersRowLayout

View File

@ -2,6 +2,8 @@ import QtQuick 2.13
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.14
import StatusQ.Core 0.1
import utils 1.0
import shared 1.0
@ -13,7 +15,7 @@ Item {
height: assetListView.height
ScrollView {
StatusScrollView {
anchors.fill: parent
Layout.fillWidth: true
Layout.fillHeight: true

View File

@ -2,6 +2,8 @@ import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import StatusQ.Core 0.1
import utils 1.0
import shared.status 1.0
import shared.stores 1.0
@ -30,7 +32,7 @@ Item {
}
ScrollView {
StatusScrollView {
anchors.fill: parent
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff

View File

@ -14,7 +14,7 @@ import "../controls"
Item {
id: root
height: visible ? tabBar.height + stackLayout.height + 2* Style.current.xlPadding : 0
implicitHeight: visible ? tabBar.height + stackLayout.height + 2* Style.current.xlPadding : 0
property var store
property var suggestedRoutes
@ -123,4 +123,4 @@ Item {
}
}
}
}
}

View File

@ -3,6 +3,7 @@ import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import QtGraphicalEffects 1.13
import StatusQ.Core 0.1
import StatusQ.Controls 0.1 as StatusQ
import StatusQ.Components 0.1
@ -535,7 +536,7 @@ Item {
anchors.fill: parent
anchors.leftMargin: 0
anchors.rightMargin: 0
ScrollView {
StatusScrollView {
width: parent.width
height: 150
TextArea {