Skip to content

scrollbar for desktop builds in feature lists #4145

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kaustuvpokharel wants to merge 18 commits into
base: master
Choose a base branch
from
Open

scrollbar for desktop builds in feature lists #4145

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
d74b85b
scrollbar addition
kaustuvpokharel Oct 10, 2025
d1e5bf2
added scrollbar to feature list with merginmap themed
kaustuvpokharel Oct 10, 2025
d2b907a
reduced the scope for the Qt platform api
kaustuvpokharel Oct 18, 2025
b8ace95
scrollbar always visible
kaustuvpokharel Oct 22, 2025
9bb46cf
scrollbar visible only
kaustuvpokharel Oct 22, 2025
2345869
scroll bar to all list WIP
kaustuvpokharel Oct 23, 2025
e702b7e
List and delegates, all uses the scrollbar if opened on desktop
kaustuvpokharel Oct 23, 2025
bb81009
implemented scrollbar for all scrollview
kaustuvpokharel Oct 27, 2025
d90b2c1
fixed suggestions
kaustuvpokharel Oct 30, 2025
e388951
Implemented review findings
gabriel-bolbotina Nov 27, 2025
cc62cf3
Addressed review findings
gabriel-bolbotina Nov 27, 2025
a71daba
Implemented code findings
gabriel-bolbotina Nov 28, 2025
bdd2737
Removed customised scroll bar
gabriel-bolbotina Dec 3, 2025
9d217c3
Added final version of the scrollbar
gabriel-bolbotina Dec 4, 2025
b0c16d5
Added parameter to the preview drawer
gabriel-bolbotina Dec 4, 2025
ff33ed9
Changes minor things
gabriel-bolbotina Dec 4, 2025
81d6b1a
Implemented code review findings
gabriel-bolbotina Dec 8, 2025
57cf411
Implemented code findings
gabriel-bolbotina Dec 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion app/qml/components/MMListDelegate.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,10 @@ Item {

property real verticalSpacing: root.secondaryText ? __style.margin8 : __style.margin20

implicitWidth: ListView?.view?.width ?? 0 // in case ListView is injected as attached property (usually it is)
implicitWidth: ListView?.view?.width ?? 0 // in case ListView is injected as attached property (usually it is)
implicitHeight: contentLayout.implicitHeight
height: visible ? implicitHeight : 0.1 // hide invisible items, for some reason setting 0 does not work ¯\_(ツ)_/¯
width: implicitWidth - ( ListView?.view?.scrollSpace ?? 0 )

MouseArea {
anchors.fill: contentLayout
Expand Down
20 changes: 20 additions & 0 deletions app/qml/components/MMListView.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,33 @@
***************************************************************************/

import QtQuick
import QtQuick.Controls
import QtQml

//
// Hot-fix for hotfix https://github.com/MerginMaps/mobile/issues/3417
// Seems like there is some issue with cache in ListView
//

ListView {
id: root

cacheBuffer: 0
readonly property bool isMobile: (Qt.platform.os === "android" || Qt.platform.os === "ios")
property int scrollSpace: !isMobile ? 10 : 0
property bool showScrollBar: true
Copy link
Contributor

@Withalion Withalion Nov 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • isMobile could be just internal property
  • scrollSpace I would rename it to something more meaningful like scrollBarWidth and it should be read only, and maybe we should use __style.margin10
  • showScrollBar I would change it to alias refering verticalScrollBar.policy and get rid of visible property

Copy link
Contributor

@gabriel-bolbotina gabriel-bolbotina Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How should I make isMobile an internal property?

Copy link
Contributor

@Withalion Withalion Dec 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With QtObject component as we do in other places


ScrollBar.vertical: ScrollBar {
id: verticalScrollBar

policy: isMobile ? ScrollBar.AlwaysOff : ScrollBar.AlwaysOn
visible: showScrollBar
opacity: active ? 0.7 : 0.4

contentItem: Rectangle {
implicitWidth: 5
radius: width / 2
color: __style.darkGreenColor
}
}
}
23 changes: 21 additions & 2 deletions app/qml/components/MMScrollView.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,34 @@

import QtQuick
import QtQuick.Controls
import QtQml

// Convenient class to use as a pageContent or drawerContent
// base element to make the content scroll

ScrollView {
id: root

contentWidth: availableWidth // to only scroll vertically
readonly property bool isMobile: (Qt.platform.os === "android" || Qt.platform.os === "ios")
property int scrollSpace: !isMobile ? 10 : 0
property bool showScrollBar: true

contentWidth: availableWidth - scrollSpace

ScrollBar.vertical.policy: ScrollBar.AlwaysOff
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ScrollBar.vertical: ScrollBar {
id: verticalScrollBar

policy: isMobile ? ScrollBar.AlwaysOff : ScrollBar.AlwaysOn
visible: showScrollBar
opacity: active ? 0.7 : 0.4
implicitHeight: root.height
anchors.right: parent.right

contentItem: Rectangle {
implicitWidth: 5
radius: width / 2
color: __style.darkGreenColor
}
}
}
1 change: 1 addition & 0 deletions app/qml/components/MMToolbar.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ Rectangle {

MMListView {
id: toolbar
showScrollBar : false

onWidthChanged: root.recalculate()
model: toolbarModel
Expand Down
2 changes: 1 addition & 1 deletion app/qml/form/MMFormPage.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -276,7 +276,7 @@ Page {

Item {

width: ListView.view.width
width: ListView.view.width - ListView.view.scrollSpace
implicitHeight: childrenRect.height

// In future, better to filter such fields in the field proxy model instead
Expand Down
2 changes: 1 addition & 1 deletion app/qml/form/MMPreviewDrawer.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,7 @@ Item {
model: root.controller.fieldModel

delegate: Item {
width: ListView.view.width
width: ListView.view.width - ListView.view.scrollSpace
height: childrenRect.height

Column {
Expand Down
4 changes: 2 additions & 2 deletions app/qml/project/MMProjectList.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ Item {
delegate: MMProjectComponents.MMProjectDelegate {
id: projectDelegate

width: ListView.view.width
width: ListView.view.width - ListView.view.scrollSpace
height: visible ? implicitHeight : 0

projectDisplayName: root.projectModelType === MM.ProjectsModel.WorkspaceProjectsModel ? model.ProjectName : model.ProjectFullName
Expand Down Expand Up @@ -202,7 +202,7 @@ Item {

topPadding: noLocalProjectsMessageContainer.visible ? noLocalProjectsMessageContainer.height + __style.margin40 : 0

width: ListView.view.width
width: ListView.view.width - ListView.view.scrollSpace

Item {
width: parent.width
Expand Down
2 changes: 1 addition & 1 deletion app/qml/project/MMProjectWizardPage.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ MMComponents.MMPage {
delegate: MMProjectComponents.MMProjectWizardDelegate {
id: fieldDelegate

width: ListView.view.width
width: ListView.view.width - ListView.view.scrollSpace

// find current index in the model
comboboxField.comboboxModel: typesmodel
Expand Down
1 change: 1 addition & 0 deletions app/qml/project/components/MMProjectDelegate.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ Control {
signal showChangesRequested()

height: implicitHeight
width: ListView.view.width - ListView.view.scrollSpace

topPadding: __style.margin20
rightPadding: __style.margin20
Expand Down
10 changes: 9 additions & 1 deletion app/qml/settings/MMLogPage.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,15 @@ MMPage {
width: parent.width
}

ScrollBar.vertical: ScrollBar { }
ScrollBar.vertical: ScrollBar {
opacity: active ? 0.7 : 0.4

contentItem: Rectangle {
implicitWidth: 5
radius: width / 2
color: __style.darkGreenColor
}
}
}

MMButton {
Expand Down
Loading