github
/
monero-gui
mirror of https://github.com/monero-project/monero-gui
1
Fork 0
Code Releases Activity

https://trello.com/c/GZwvrma5/55-scrollable-lists-should-have-scrollbars-that-come-into-view-when-hovering-over-that-area-the-extreme-right-of-the-list

This commit is contained in:
marcin 2014-07-23 12:39:35 +02:00
parent 43c7920233
commit d69870717f
11 changed files with 97 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
bitmonero.pro.user
View File

@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE QtCreatorProject>
<!-- Written by QtCreator 3.1.2, 2014-07-22T17:23:59. -->
<!-- Written by QtCreator 3.1.2, 2014-07-23T12:38:50. -->
<qtcreator>
<data>
<variable>ProjectExplorer.Project.ActiveTarget</variable>

30
components/DatePicker.qml
View File

@ -179,22 +179,6 @@ Item {
}
}
}
// Rectangle {
// anchors.left: parent.left
// anchors.bottom: parent.bottom
// height: 3; width: 3
// color: "#FFFFFF"
// visible: datePicker.expanded
// }
// Rectangle {
// anchors.right: parent.right
// anchors.bottom: parent.bottom
// height: 3; width: 3
// color: "#FFFFFF"
// visible: datePicker.expanded
// }
}
Rectangle {
@ -223,20 +207,6 @@ Item {
height: 1
}
// Rectangle {
// anchors.left: parent.left
// anchors.top: parent.top
// height: 3; width: 3
// color: "#FFFFFF"
// }
// Rectangle {
// anchors.right: parent.right
// anchors.top: parent.top
// height: 3; width: 3
// color: "#FFFFFF"
// }
Calendar {
id: calendar
anchors.left: parent.left

57
components/Scroll.qml
View File

@ -1,29 +1,56 @@
import QtQuick 2.0
Rectangle {
Item {
id: scrollItem
property var flickable
property int yPos: 0
width: 15
z: 1
function flickableContentYChanged() {
if(flickable === undefined)
return
var t = flickable.height - height
y = (flickable.contentY / (flickable.contentHeight - flickable.height)) * t + yPos
var t = flickable.height - scroll.height
scroll.y = (flickable.contentY / (flickable.contentHeight - flickable.height)) * t
}
width: 15
height: {
var t = (flickable.height * flickable.height) / flickable.contentHeight
return t < 20 ? 20 : t
MouseArea {
id: scrollArea
anchors.fill: parent
hoverEnabled: true
}
z: 1; y: yPos
color: "#DBDBDB"
anchors.right: flickable.right
opacity: flickable.moving ? 0.5 : 0
visible: flickable.contentHeight > flickable.height
Behavior on opacity {
NumberAnimation { duration: 100; easing.type: Easing.InQuad }
Rectangle {
id: scroll
width: 15
height: {
var t = (flickable.height * flickable.height) / flickable.contentHeight
return t < 20 ? 20 : t
}
y: 0; x: 0
color: "#DBDBDB"
opacity: flickable.moving || handleArea.pressed || scrollArea.containsMouse ? 0.5 : 0
visible: flickable.contentHeight > flickable.height
Behavior on opacity {
NumberAnimation { duration: 100; easing.type: Easing.InQuad }
}
MouseArea {
id: handleArea
anchors.fill: parent
drag.target: scroll
drag.axis: Drag.YAxis
drag.minimumY: 0
drag.maximumY: flickable.height - height
propagateComposedEvents: true
onPositionChanged: {
if(!pressed) return
var dy = scroll.y / (flickable.height - scroll.height)
flickable.contentY = (flickable.contentHeight - flickable.height) * dy
}
}
}
}

BIN
images/resize.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 245 B

BIN
images/resizeHovered.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 233 B

84
main.qml
View File

@ -86,7 +86,6 @@ ApplicationWindow {
height: 800
color: "#FFFFFF"
flags: Qt.FramelessWindowHint | Qt.WindowSystemMenuHint | Qt.Window | Qt.WindowMinimizeButtonHint
onVisibilityChanged: visible = visibility !== Window.Minimized
onWidthChanged: x -= 0
Component.onCompleted: {
@ -263,6 +262,46 @@ ApplicationWindow {
}
property int maxWidth: leftPanel.width + 655 + rightPanel.width
property int maxHeight: 700
MouseArea {
hoverEnabled: true
anchors.right: parent.right
anchors.bottom: parent.bottom
height: 48
width: 48
Rectangle {
anchors.fill: parent
color: parent.containsMouse || parent.pressed ? "#4A4949" : "transparent"
}
Image {
anchors.centerIn: parent
source: parent.containsMouse || parent.pressed ? "images/resizeHovered.png" :
"images/resize.png"
}
property int previousX: 0
property int previousY: 0
onPressed: {
previousX = mouseX
previousY = mouseY
}
onPositionChanged: {
if(!pressed) return
var dx = previousX - mouseX
var dy = previousY - mouseY
if(appWindow.width - dx > parent.maxWidth)
appWindow.width -= dx
else appWindow.width = parent.maxWidth
if(appWindow.height - dy > parent.maxHeight)
appWindow.height -= dy
else appWindow.height = parent.maxHeight
}
}
// MouseArea {
// anchors.top: parent.top
@ -280,49 +319,6 @@ ApplicationWindow {
// appWindow.width -= diff
// else appWindow.width = parent.maxWidth
// }
// }
// MouseArea {
// anchors.left: parent.left
// anchors.top: parent.top
// anchors.bottom: parent.bottom
// anchors.topMargin: 30
// anchors.bottomMargin: 3
// cursorShape: Qt.SizeHorCursor
// width: 3
// property int previousX: 0
// property int maximumX: 0
// onPressed: {
// var diff = appWindow.width - parent.maxWidth
// maximumX = appWindow.x + diff
// previousX = mouseX
// }
// onPositionChanged: {
// var diff = previousX - mouseX
// if(appWindow.x + diff < maximumX) {
// appWindow.width += diff
// appWindow.x -= diff
// } else {
// appWindow.width = parent.maxWidth
// appWindow.x = maximumX
// }
// }
// }
// MouseArea {
// anchors.left: parent.left
// anchors.right: parent.right
// anchors.bottom: parent.bottom
// anchors.leftMargin: 3
// anchors.rightMargin: 3
// height: 3
// cursorShape: Qt.SizeVerCursor
// property int previousY: 0
// onPressed: previousY = mouseY
// onPositionChanged: {
// var diff = previousY - mouseY
// appWindow.height -= diff
// }
// }
TitleBar {

4
pages/AddressBook.qml
View File

@ -178,9 +178,11 @@ Rectangle {
Scroll {
id: flickableScroll
anchors.right: table.right
anchors.rightMargin: -14
anchors.top: table.top
anchors.bottom: table.bottom
flickable: table
yPos: table.y
}
AddressBookTable {

4
pages/Dashboard.qml
View File

@ -130,9 +130,11 @@ Rectangle {
Scroll {
id: flickableScroll
anchors.right: table.right
anchors.rightMargin: -14
anchors.top: table.top
anchors.bottom: table.bottom
flickable: table
yPos: table.y
}
DashboardTable {

4
pages/History.qml
View File

@ -319,9 +319,11 @@ Rectangle {
Scroll {
id: flickableScroll
anchors.right: table.right
anchors.rightMargin: -14
anchors.top: table.top
anchors.bottom: table.bottom
flickable: table
yPos: table.y
}
HistoryTable {

2
qml.qrc
View File

@ -78,5 +78,7 @@
<file>images/moneroLogo2.png</file>
<file>components/PrivacyLevelSmall.qml</file>
<file>images/checkedVioletIcon.png</file>
<file>images/resize.png</file>
<file>images/resizeHovered.png</file>
</qresource>
</RCC>

4
tabs/Twitter.qml
View File

@ -75,9 +75,11 @@ Item {
Scroll {
id: flickableScroll
anchors.right: listView.right
anchors.rightMargin: -14
anchors.top: listView.top
anchors.bottom: listView.bottom
flickable: listView
yPos: listView.y
}
ListView {