Commit 67bb1dd7 authored by Thomas Hartmann's avatar Thomas Hartmann
Browse files

QmlDesigner: adjusting scrollbar



Going for a simpler and cleaner design that works well with css.
The old one looked broken.

Change-Id: I034febcd2b9d9f395945ebad153934990c1e3d81
Reviewed-by: default avatarThomas Hartmann <Thomas.Hartmann@digia.com>
parent cc18936d
...@@ -223,6 +223,7 @@ content position out of scope regarding the scrollbar. */ ...@@ -223,6 +223,7 @@ content position out of scope regarding the scrollbar. */
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.bottomMargin: 1 anchors.bottomMargin: 1
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: 2
width: (itemsFlickable.contentHeight > itemsFlickable.height)? 11:0 width: (itemsFlickable.contentHeight > itemsFlickable.height)? 11:0
Scrollbar { Scrollbar {
......
...@@ -39,11 +39,11 @@ Item { ...@@ -39,11 +39,11 @@ Item {
property variant flickable property variant flickable
function scroll(delta) { function scroll(delta) {
handle.y = Math.max(0, Math.min(scrollHeight, handle.y + delta)) handle.y = Math.max(2, Math.min(scrollHeight, handle.y + delta))
} }
function reset() { function reset() {
handle.y = 0 handle.y = 2
} }
// internal // internal
...@@ -62,8 +62,7 @@ Item { ...@@ -62,8 +62,7 @@ Item {
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.bottomMargin: 3 anchors.bottomMargin: 3
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
width: 6 width: 10
radius: 3
color: style.scrollbarColor color: style.scrollbarColor
border.width: 1 border.width: 1
border.color: style.scrollbarBorderColor border.color: style.scrollbarBorderColor
...@@ -77,7 +76,7 @@ Item { ...@@ -77,7 +76,7 @@ Item {
flickable.contentY / (flickable.contentHeight - flickable.height), flickable.contentY / (flickable.contentHeight - flickable.height),
1) 1)
else else
handle.y = 0 handle.y = 2
handle.updateFlickable = true handle.updateFlickable = true
} }
...@@ -109,6 +108,7 @@ Item { ...@@ -109,6 +108,7 @@ Item {
Item { Item {
id: handle id: handle
y: 2
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
...@@ -125,27 +125,20 @@ Item { ...@@ -125,27 +125,20 @@ Item {
width: parent.height width: parent.height
height: parent.width height: parent.width
y: -height - 2 y: -height - 2
x: -2
rotation: 90 rotation: 90
transformOrigin: Item.BottomLeft transformOrigin: Item.BottomLeft
border.color: style.scrollbarBorderColor border.color: style.scrollbarBorderColor
border.width: 1 border.width: 1
radius: 3 color: style.sectionTitleBackgroundColor
gradient: Gradient {
GradientStop { position: 0.15; color: style.scrollbarGradientStartColor }
GradientStop { position: 0.78; color: style.scrollbarGradientMiddleColor }
GradientStop { position: 0.80; color: style.scrollbarGradientEndColor }
}
} }
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
drag.target: parent drag.target: parent
drag.axis: "YAxis" drag.axis: "YAxis"
drag.minimumY: 0 drag.minimumY: 2
drag.maximumY: scrollHeight drag.maximumY: scrollHeight
} }
} }
......
QScrollBar:vertical { QScrollBar:vertical {
border-image: url(:/qmldesigner/images/scrollbar-borderimage-vertical.png); background-color: #444444;
border-left: 0; border: 1px solid #333333;
border-right: 0;
border-top: 3;
border-bottom: 3;
margin-top: 3; margin-top: 3;
margin-bottom: 3; margin-bottom: 3;
width: 10; width: 10;
} }
QScrollBar::handle:vertical { QScrollBar::handle:vertical {
background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0, background-color: #656565;
stop: 0.20 #888888,
stop: 0.23 #656565,
stop: 0.85 #393939);
margin-top: -5; margin-top: -5;
margin-bottom: -5; margin-bottom: -5;
min-height: 18px; min-height: 18px;
width: 8px; width: 8px;
border: 1px solid #313131; border: 1px solid #313131;
border-radius: 4px;
border-width: 1; border-width: 1;
margin-left: -1;
margin-right: -1;
} }
QScrollBar::add-line:vertical { QScrollBar::add-line:vertical {
...@@ -49,28 +44,24 @@ ...@@ -49,28 +44,24 @@
} }
QScrollBar:horizontal { QScrollBar:horizontal {
border-image: url(:/qmldesigner/images/scrollbar-borderimage-horizontal.png); background-color: #444444;
border-left: 3; border: 1px solid #333333;
border-right: 3;
border-top: 0;
border-bottom: 0;
margin-left: 3; margin-left: 3;
margin-right: 3; margin-right: 3;
height: 10; height: 10;
} }
QScrollBar::handle:horizontal { QScrollBar::handle:horizontal {
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, background-color: #656565;
stop: 0.20 #888888,
stop: 0.23 #656565,
stop: 0.85 #393939);
margin-left: -5; margin-left: -5;
margin-right: -5; margin-right: -5;
min-width: 18px; min-width: 18px;
height: 8px; height: 8px;
border: 1px solid #313131; border: 1px solid #313131;
border-radius: 4px;
border-width: 1; border-width: 1;
margin-top: -1;
margin-bottom: -1;
} }
QScrollBar::add-line:horizontal { QScrollBar::add-line:horizontal {
......
...@@ -55,9 +55,8 @@ Item { ...@@ -55,9 +55,8 @@ Item {
Rectangle { Rectangle {
id: groove id: groove
width: parent.width - 4 width: parent.width - 4
height: 6 height: 10
color: "#444444" color: "#444444"
radius: 3
border.width: 1 border.width: 1
border.color: "#333333" border.color: "#333333"
anchors.right: parent.right anchors.right: parent.right
...@@ -95,13 +94,8 @@ Item { ...@@ -95,13 +94,8 @@ Item {
y:0 y:0
border.color: "#333333" border.color: "#333333"
border.width: 1 border.width: 1
radius: 3
gradient: Gradient { color: "#656565"
GradientStop { position: 0.20; color: "#888888" }
GradientStop { position: 0.23; color: "#656565" }
GradientStop { position: 0.85; color: "#393939" }
}
MouseArea { MouseArea {
property int dragging:0; property int dragging:0;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment