[prev in list] [next in list] [prev in thread] [next in thread] 

List:       kde-commits
Subject:    [ring-kde/next] src/timeline/qml: peerstimeline: Improve the timeline scrollbar
From:       Emmanuel Lepage Vallee <null () kde ! org>
Date:       2017-06-21 8:41:38
Message-ID: E1dNbCk-0005na-OX () code ! kde ! org
[Download RAW message or body]

Git commit 151d771cd98b158f7ba2a4cf435d33f427b43fdb by Emmanuel Lepage Vallee.
Committed on 21/06/2017 at 08:41.
Pushed by lepagevalleeemmanuel into branch 'next'.

peerstimeline: Improve the timeline scrollbar

It is still not completed, but now it's a real scrollbar, not a
mockup.

M  +26   -4    src/timeline/qml/peerstimeline.qml
M  +20   -2    src/timeline/qml/timelinescrollbar.qml

https://commits.kde.org/ring-kde/151d771cd98b158f7ba2a4cf435d33f427b43fdb

diff --git a/src/timeline/qml/peerstimeline.qml b/src/timeline/qml/peerstimeline.qml
index 547bd4b0..436252fc 100644
--- a/src/timeline/qml/peerstimeline.qml
+++ b/src/timeline/qml/peerstimeline.qml
@@ -65,7 +65,6 @@ Rectangle {
         interval: 0 // Run idle
         onTriggered: {
             search.text = ""
-            selectionMapper.contactMethod = cm
         }
     }
     onContactMethodSelected: {
@@ -151,6 +150,13 @@ Rectangle {
                     onCountChanged: {
                         if (count > 0)
                             newUserHelper.visible = false
+
+                        scrollBar.visible = count*50 > recentDock.height
+                        scrollBar.handleHeight = recentDock.height * \
(recentDock.height/(count*50)) +                    }
+
+                    onHeightChanged: {
+                        scrollBar.handleHeight = recentDock.height * \
(recentDock.height/(count*50))  }
                 }
             }
@@ -163,6 +169,14 @@ Rectangle {
                 width: 10
                 model: PeersTimelineModel.timelineSummaryModel
                 z: 100
+                onWidthChanged: {
+                    burryOverlay.width = scrollBar.fullWidth + 15
+                }
+                visible: PeersTimelineModel.deduplicatedTimelineModel.count*50 > \
recentDock.height +
+                onPositionChanged: {
+                    scrollView.flickableItem.contentY = \
scrollView.flickableItem.contentHeight*scrollBar.position +                }
             }
 
             // Add a blurry background
@@ -173,10 +187,10 @@ Rectangle {
                 sourceItem: scrollView
                 anchors.right: scrollView.right
                 anchors.top: scrollView.top
-                width: scrollView.width/2
+                width: scrollBar.fullWidth + 15
                 height: scrollView.height
 
-                sourceRect: Qt.rect(scrollView.width/2, 0, scrollView.width/2, \
scrollView.height) +                sourceRect: Qt.rect(scrollBar.fullWidth + 15, 0, \
scrollBar.fullWidth + 15, scrollView.height)  }
 
             Item {
@@ -185,7 +199,7 @@ Rectangle {
                 opacity: 0
                 anchors.right: scrollView.right
                 anchors.top: scrollView.top
-                width: scrollView.width/2
+                width: scrollBar.fullWidth + 15
                 height: scrollView.height
                 clip: true
 
@@ -215,6 +229,10 @@ Rectangle {
         }
     }
 
+    onHeightChanged: {
+        scrollBar.handleHeight = recentDock.height * \
(recentDock.height/(recentView.count*50)) +    }
+
     // Timeline scrollbar
     StateGroup {
         states: [
@@ -271,6 +289,10 @@ Rectangle {
                     width: scrollView.width
                     height: scrollView.height
                 }
+                PropertyChanges {
+                    target:  effectSource
+                    sourceRect: Qt.rect(0, 0, parent.width, parent.height)
+                }
             }
         ]
 
diff --git a/src/timeline/qml/timelinescrollbar.qml \
b/src/timeline/qml/timelinescrollbar.qml index 8c33567c..ae0624e7 100644
--- a/src/timeline/qml/timelinescrollbar.qml
+++ b/src/timeline/qml/timelinescrollbar.qml
@@ -22,7 +22,11 @@ import Ring 1.0
 
 Item {
     id: scrollbar
-    property alias model: tmlList.model
+    property alias  model: tmlList.model
+    property alias  tmlList: tmlList
+    property alias  fullWidth: tmlList.width
+    property alias  handleHeight: handle.height
+    property double position: 0
 
     property bool overlayVisible: false
 
@@ -43,6 +47,11 @@ Item {
         color: "black"
         width: parent.width
         height: 65
+
+        onYChanged: {
+            var relH = scrollbar.height - height
+            scrollbar.position = y/relH
+        }
     }
 
     Component {
@@ -95,7 +104,16 @@ Item {
         anchors.fill: parent
         hoverEnabled: true
         onEntered: overlayVisible = true
-        onExited: overlayVisible = false
+        onExited: overlayVisible = drag.active
+
+        drag.target: handle
+        drag.axis: Drag.YAxis
+        drag.minimumY: 0
+        drag.maximumY: scrollbar.height - handle.height
+
+        drag.onActiveChanged: {
+            overlayVisible = drag.active
+        }
 
         Item {
             id: timelineOverlay


[prev in list] [next in list] [prev in thread] [next in thread]