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

feat(StatusScrollView): New scrollview component without twitches (#766)

This commit is contained in:
Mikhail Rogachev 2022-07-14 15:29:14 +03:00 committed by Michał Cieślak
parent 170660a6be
commit bd2932594a
9 changed files with 272 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/StatusQ/sandbox/demoapp/StatusAppCommunitiesPortalView.qml
View File

@ -10,7 +10,7 @@ import StatusQ.Components 0.1
import "../demoapp/data" 1.0 import "../demoapp/data" 1.0
ScrollView { StatusScrollView {
id: root id: root
QtObject { QtObject {

2
ui/StatusQ/sandbox/demoapp/StatusAppCommunityView.qml
View File

@ -59,7 +59,7 @@ StatusAppThreePanelLayout {
} }
} }
ScrollView { StatusScrollView {
id: scrollView id: scrollView
anchors.top: statusChatInfoToolBar.bottom anchors.top: statusChatInfoToolBar.bottom

3
ui/StatusQ/sandbox/demoapp/StatusAppProfileSettingsView.qml
View File

@ -3,6 +3,7 @@ import QtQuick.Controls 2.14
import StatusQ.Components 0.1 import StatusQ.Components 0.1
import StatusQ.Layout 0.1 import StatusQ.Layout 0.1
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1 import StatusQ.Core.Theme 0.1
import "data" 1.0 import "data" 1.0
@ -21,7 +22,7 @@ StatusAppTwoPanelLayout {
text: "Profile" text: "Profile"
} }
ScrollView { StatusScrollView {
anchors.top: profileHeadline.bottom anchors.top: profileHeadline.bottom
anchors.topMargin: 16 anchors.topMargin: 16
anchors.bottom: parent.bottom anchors.bottom: parent.bottom

398
ui/StatusQ/sandbox/main.qml
View File

@ -132,215 +132,201 @@ StatusWindow {
storeSettings.fillPage = false storeSettings.fillPage = false
} }
leftPanel: Item { leftPanel: StatusScrollView {
anchors.fill: parent anchors.fill: parent
ScrollView { anchors.topMargin: 48
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter
contentHeight: navigation.height + 56
contentWidth: navigation.width
clip: true
Column {
id: navigation
anchors.top: parent.top
anchors.topMargin: 48
anchors.horizontalCenter: parent.horizontalCenter
spacing: 0
StatusListSectionHeadline { text: "StatusQ.Core" } Column {
StatusNavigationListItem { id: navigation
title: "Icons" spacing: 0
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.control(title);
}
StatusListSectionHeadline { text: "StatusQ.Layout" } StatusListSectionHeadline { text: "StatusQ.Core" }
StatusNavigationListItem { StatusNavigationListItem {
title: "Layouts" title: "Icons"
selected: viewLoader.source.toString().includes(title) selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.control(title.substring(0, title.length - 1)); onClicked: mainPageView.control(title);
} }
StatusListSectionHeadline { text: "StatusQ.Controls" } StatusListSectionHeadline { text: "StatusQ.Layout" }
StatusNavigationListItem { StatusNavigationListItem {
title: "Buttons" title: "Layouts"
selected: viewLoader.source.toString().includes(title) selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.control(title); onClicked: mainPageView.control(title.substring(0, title.length - 1));
} }
StatusNavigationListItem {
title: "StatusSwitchTab" StatusListSectionHeadline { text: "StatusQ.Controls" }
selected: viewLoader.source.toString().includes(title) StatusNavigationListItem {
onClicked: mainPageView.page("StatusTabSwitch"); title: "Buttons"
} selected: viewLoader.source.toString().includes(title)
StatusNavigationListItem { onClicked: mainPageView.control(title);
title: "StatusChatCommandButton" }
selected: viewLoader.source.toString().includes(title) StatusNavigationListItem {
onClicked: mainPageView.page(title); title: "StatusSwitchTab"
} selected: viewLoader.source.toString().includes(title)
StatusNavigationListItem { onClicked: mainPageView.page("StatusTabSwitch");
title: "Controls" }
selected: viewLoader.source.toString().includes(title) StatusNavigationListItem {
onClicked: mainPageView.control(title); title: "StatusChatCommandButton"
} selected: viewLoader.source.toString().includes(title)
StatusNavigationListItem { onClicked: mainPageView.page(title);
title: "StatusTabBarButton" }
selected: viewLoader.source.toString().includes(title) StatusNavigationListItem {
onClicked: mainPageView.page(title); title: "Controls"
} selected: viewLoader.source.toString().includes(title)
StatusNavigationListItem { onClicked: mainPageView.control(title);
title: "StatusTabBarIconButton" }
selected: viewLoader.source.toString().includes(title) StatusNavigationListItem {
onClicked: mainPageView.page(title); title: "StatusTabBarButton"
} selected: viewLoader.source.toString().includes(title)
StatusNavigationListItem { onClicked: mainPageView.page(title);
title: "StatusInput" }
selected: viewLoader.source.toString().includes(title) StatusNavigationListItem {
onClicked: mainPageView.page(title); title: "StatusTabBarIconButton"
} selected: viewLoader.source.toString().includes(title)
StatusNavigationListItem { onClicked: mainPageView.page(title);
title: "StatusSelect" }
selected: viewLoader.source.toString().includes(title) StatusNavigationListItem {
onClicked: mainPageView.page(title); title: "StatusInput"
} selected: viewLoader.source.toString().includes(title)
StatusNavigationListItem { onClicked: mainPageView.page(title);
title: "StatusAccountSelector" }
selected: viewLoader.source.toString().includes(title) StatusNavigationListItem {
onClicked: mainPageView.page(title); title: "StatusSelect"
} selected: viewLoader.source.toString().includes(title)
StatusNavigationListItem { onClicked: mainPageView.page(title);
title: "StatusAssetSelector" }
selected: viewLoader.source.toString().includes(title) StatusNavigationListItem {
onClicked: mainPageView.page(title); title: "StatusAccountSelector"
} selected: viewLoader.source.toString().includes(title)
StatusNavigationListItem { onClicked: mainPageView.page(title);
title: "StatusColorSelector" }
selected: viewLoader.source.toString().includes(title) StatusNavigationListItem {
onClicked: mainPageView.page(title); title: "StatusAssetSelector"
} selected: viewLoader.source.toString().includes(title)
StatusNavigationListItem { onClicked: mainPageView.page(title);
title: "StatusWalletColorButton" }
selected: viewLoader.source.toString().includes(title) StatusNavigationListItem {
onClicked: mainPageView.page(title); title: "StatusColorSelector"
} selected: viewLoader.source.toString().includes(title)
StatusNavigationListItem { onClicked: mainPageView.page(title);
title: "StatusWalletColorSelect" }
selected: viewLoader.source.toString().includes(title) StatusNavigationListItem {
onClicked: mainPageView.page(title); title: "StatusWalletColorButton"
} selected: viewLoader.source.toString().includes(title)
StatusNavigationListItem { onClicked: mainPageView.page(title);
title: "StatusPasswordStrengthIndicator" }
selected: viewLoader.source.toString().includes(title) StatusNavigationListItem {
onClicked: mainPageView.page(title); title: "StatusWalletColorSelect"
} selected: viewLoader.source.toString().includes(title)
StatusNavigationListItem { onClicked: mainPageView.page(title);
title: "StatusPinInput" }
selected: viewLoader.source.toString().includes(title) StatusNavigationListItem {
onClicked: mainPageView.page(title); title: "StatusPasswordStrengthIndicator"
} selected: viewLoader.source.toString().includes(title)
StatusListSectionHeadline { text: "StatusQ.Components" } onClicked: mainPageView.page(title);
StatusNavigationListItem { }
title: "StatusAddress" StatusNavigationListItem {
selected: viewLoader.source.toString().includes(title) title: "StatusPinInput"
onClicked: mainPageView.page(title); selected: viewLoader.source.toString().includes(title)
} onClicked: mainPageView.page(title);
StatusNavigationListItem { }
title: "List Items" StatusListSectionHeadline { text: "StatusQ.Components" }
selected: viewLoader.source.toString().includes(title.replace(/\s+/g, '')) StatusNavigationListItem {
onClicked: mainPageView.control(title.replace(/\s+/g, '')); title: "StatusAddress"
} selected: viewLoader.source.toString().includes(title)
StatusNavigationListItem { onClicked: mainPageView.page(title);
title: "StatusChatInfoToolBar" }
selected: viewLoader.source.toString().includes(title) StatusNavigationListItem {
onClicked: mainPageView.page(title); title: "List Items"
} selected: viewLoader.source.toString().includes(title.replace(/\s+/g, ''))
StatusNavigationListItem { onClicked: mainPageView.control(title.replace(/\s+/g, ''));
title: "Others" }
selected: viewLoader.source.toString().includes(title) StatusNavigationListItem {
onClicked: mainPageView.control(title); title: "StatusChatInfoToolBar"
} selected: viewLoader.source.toString().includes(title)
StatusNavigationListItem { onClicked: mainPageView.page(title);
title: "StatusExpandableItem" }
selected: viewLoader.source.toString().includes(title) StatusNavigationListItem {
onClicked: mainPageView.page("StatusExpandableSettingsItem"); title: "Others"
} selected: viewLoader.source.toString().includes(title)
StatusNavigationListItem { onClicked: mainPageView.control(title);
title: "StatusTagSelector" }
selected: viewLoader.source.toString().includes(title) StatusNavigationListItem {
onClicked: mainPageView.page(title); title: "StatusExpandableItem"
} selected: viewLoader.source.toString().includes(title)
StatusNavigationListItem { onClicked: mainPageView.page("StatusExpandableSettingsItem");
title: "StatusToastMessage" }
selected: viewLoader.source.toString().includes(title) StatusNavigationListItem {
onClicked: mainPageView.page(title); title: "StatusTagSelector"
} selected: viewLoader.source.toString().includes(title)
StatusNavigationListItem { onClicked: mainPageView.page(title);
title: "StatusWizardStepper" }
selected: viewLoader.source.toString().includes(title) StatusNavigationListItem {
onClicked: mainPageView.page(title); title: "StatusToastMessage"
} selected: viewLoader.source.toString().includes(title)
StatusNavigationListItem { onClicked: mainPageView.page(title);
title: "StatusListPicker" }
selected: viewLoader.source.toString().includes(title) StatusNavigationListItem {
onClicked: mainPageView.page(title); title: "StatusWizardStepper"
} selected: viewLoader.source.toString().includes(title)
StatusNavigationListItem { onClicked: mainPageView.page(title);
title: "StatusCommunityCard" }
selected: viewLoader.source.toString().includes(title) StatusNavigationListItem {
onClicked: mainPageView.page(title); title: "StatusListPicker"
} selected: viewLoader.source.toString().includes(title)
StatusNavigationListItem { onClicked: mainPageView.page(title);
title: "StatusCommunityTags" }
selected: viewLoader.source.toString().includes(title) StatusNavigationListItem {
onClicked: mainPageView.page(title); title: "StatusCommunityCard"
} selected: viewLoader.source.toString().includes(title)
StatusNavigationListItem { onClicked: mainPageView.page(title);
title: "StatusItemSelector" }
selected: viewLoader.source.toString().includes(title) StatusNavigationListItem {
onClicked: mainPageView.page(title); title: "StatusCommunityTags"
} selected: viewLoader.source.toString().includes(title)
StatusListSectionHeadline { text: "StatusQ.Popup" } onClicked: mainPageView.page(title);
StatusNavigationListItem { }
title: "StatusPopupMenu" StatusListSectionHeadline { text: "StatusQ.Popup" }
selected: viewLoader.source.toString().includes(title) StatusNavigationListItem {
onClicked: mainPageView.page(title); title: "StatusPopupMenu"
} selected: viewLoader.source.toString().includes(title)
StatusNavigationListItem { onClicked: mainPageView.page(title);
title: "StatusModal" }
selected: viewLoader.source.toString().includes("Popups") StatusNavigationListItem {
onClicked: mainPageView.control("Popups"); title: "StatusModal"
} selected: viewLoader.source.toString().includes("Popups")
StatusNavigationListItem { onClicked: mainPageView.control("Popups");
title: "StatusDialog" }
selected: viewLoader.source.toString().includes(title) StatusNavigationListItem {
onClicked: mainPageView.page(title); title: "StatusDialog"
} selected: viewLoader.source.toString().includes(title)
StatusListSectionHeadline { text: "StatusQ.Platform" } onClicked: mainPageView.page(title);
StatusNavigationListItem { }
title: "StatusMacNotification" StatusListSectionHeadline { text: "StatusQ.Platform" }
selected: viewLoader.source.toString().includes(title) StatusNavigationListItem {
onClicked: mainPageView.page(title); title: "StatusMacNotification"
} selected: viewLoader.source.toString().includes(title)
StatusNavigationListItem { onClicked: mainPageView.page(title);
title: "StatusColorSelectorGrid" }
selected: viewLoader.source.toString().includes(title) StatusNavigationListItem {
onClicked: mainPageView.page(title); title: "StatusColorSelectorGrid"
} selected: viewLoader.source.toString().includes(title)
StatusNavigationListItem { onClicked: mainPageView.page(title);
title: "StatusImageCropPanel" }
selected: viewLoader.source.toString().includes(title) StatusNavigationListItem {
onClicked: mainPageView.page(title, true); title: "StatusImageCropPanel"
} selected: viewLoader.source.toString().includes(title)
StatusNavigationListItem { onClicked: mainPageView.page(title, true);
title: "StatusColorSpace" }
selected: viewLoader.source.toString().includes(title) StatusNavigationListItem {
onClicked: mainPageView.page(title, true); title: "StatusColorSpace"
} selected: viewLoader.source.toString().includes(title)
StatusNavigationListItem { onClicked: mainPageView.page(title, true);
title: "StatusCard" }
selected: viewLoader.source.toString().includes(title) StatusNavigationListItem {
onClicked: mainPageView.page(title, true); title: "StatusCard"
} selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page(title, true);
} }
} }
} }
@ -349,7 +335,7 @@ StatusWindow {
id: rightPanel id: rightPanel
anchors.fill: parent anchors.fill: parent
ScrollView { StatusScrollView {
visible: !storeSettings.fillPage visible: !storeSettings.fillPage
anchors.fill: parent anchors.fill: parent
anchors.topMargin: 64 anchors.topMargin: 64

24
ui/StatusQ/src/StatusQ/Controls/StatusScrollBar.qml Normal file
View File

@ -0,0 +1,24 @@
import QtQuick 2.14
import QtQuick.Controls 2.14 as T
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
T.ScrollBar {
id: root
// TODO: add this sizes to Theme
implicitWidth: 14
implicitHeight: 14
background: null
contentItem: Rectangle {
color: root.hovered || root.active ? Theme.palette.primaryColor3 : Theme.palette.baseColor2
opacity: enabled ? 1.0 : 0.0
radius: Math.min(width, height) / 2
Behavior on opacity { NumberAnimation { duration: 100 } }
}
}

1
ui/StatusQ/src/StatusQ/Controls/qmldir
View File

@ -47,3 +47,4 @@ StatusFloatingButtonsSelector 0.1 StatusFloatingButtonsSelector.qml
StatusActivityCenterButton 0.1 StatusActivityCenterButton.qml StatusActivityCenterButton 0.1 StatusActivityCenterButton.qml
StatusDropdown 0.1 StatusDropdown.qml StatusDropdown 0.1 StatusDropdown.qml
StatusIconTextButton 0.1 StatusIconTextButton.qml StatusIconTextButton 0.1 StatusIconTextButton.qml
StatusScrollBar 0.1 StatusScrollBar.qml

48
ui/StatusQ/src/StatusQ/Core/StatusScrollView.qml Normal file
View File

@ -0,0 +1,48 @@
import QtQuick 2.14
import QtQuick.Controls 2.14
import StatusQ.Controls 0.1
/*!
\qmltype StatusScrollView
\inherits ScrollView
\inqmlmodule StatusQ.Core
\since StatusQ.Core 0.1
\brief ScrollView wrapper with tuned flickable.
The \c StatusScrollView can be used just like a plain ScrollView but with tuned scrolling parameters.
Example of how to use it:
\qml
StatusScrollView {
id: scrollView
anchors.fill: parent
ColumnView {
width: scrollView.avaiulableWidth
}
}
\endqml
For a list of components available see StatusQ.
*/
ScrollView {
id: root
clip: true // NOTE: in Qt6 clip true will be default
background: null
ScrollBar.horizontal.policy: ScrollBar.AsNeeded
ScrollBar.vertical.policy: ScrollBar.AsNeeded
Flickable {
id: flickable
contentWidth: contentItem.childrenRect.width
contentHeight: contentItem.childrenRect.height
boundsBehavior: Flickable.StopAtBounds
maximumFlickVelocity: 0
synchronousDrag: true
}
}

2
ui/StatusQ/src/StatusQ/Core/qmldir
View File

@ -11,3 +11,5 @@ StatusModalHeaderSettings 0.1 StatusModalHeaderSettings.qml
StatusTooltipSettings 0.1 StatusTooltipSettings.qml StatusTooltipSettings 0.1 StatusTooltipSettings.qml
StatusAppNavBarFilterModel 0.1 StatusAppNavBarFilterModel.qml StatusAppNavBarFilterModel 0.1 StatusAppNavBarFilterModel.qml
StatusAnimatedStack 0.1 StatusAnimatedStack.qml StatusAnimatedStack 0.1 StatusAnimatedStack.qml
StatusScrollView 0.1 StatusScrollView.qml

2
ui/StatusQ/src/StatusQ/Popups/StatusColorDialog.qml
View File

@ -33,7 +33,7 @@ StatusModal {
width: 680 width: 680
implicitHeight: 820 implicitHeight: 820
contentItem: ScrollView { contentItem: StatusScrollView {
id: scroll id: scroll
width: parent.width width: parent.width
topPadding: 30 topPadding: 30