From 67bb1dd78368ae601f70c6f4ed09f28523943caa Mon Sep 17 00:00:00 2001
From: Thomas Hartmann <Thomas.Hartmann@digia.com>
Date: Thu, 24 Oct 2013 14:18:14 +0200
Subject: [PATCH] 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: Thomas Hartmann <Thomas.Hartmann@digia.com>
---
.../components/itemlibrary/qml/ItemsView.qml | 1 +
.../components/itemlibrary/qml/Scrollbar.qml | 21 +++++--------
.../components/resources/scrollbar.css | 31 +++++++------------
.../stateseditor/HorizontalScrollBar.qml | 10 ++----
4 files changed, 21 insertions(+), 42 deletions(-)
diff --git a/src/plugins/qmldesigner/components/itemlibrary/qml/ItemsView.qml b/src/plugins/qmldesigner/components/itemlibrary/qml/ItemsView.qml
index 793d7ea7f01..697d3a95a8c 100644
--- a/src/plugins/qmldesigner/components/itemlibrary/qml/ItemsView.qml
+++ b/src/plugins/qmldesigner/components/itemlibrary/qml/ItemsView.qml
@@ -223,6 +223,7 @@ content position out of scope regarding the scrollbar. */
anchors.bottom: parent.bottom
anchors.bottomMargin: 1
anchors.right: parent.right
+ anchors.rightMargin: 2
width: (itemsFlickable.contentHeight > itemsFlickable.height)? 11:0
Scrollbar {
diff --git a/src/plugins/qmldesigner/components/itemlibrary/qml/Scrollbar.qml b/src/plugins/qmldesigner/components/itemlibrary/qml/Scrollbar.qml
index 33bc50fc800..23adc86abb2 100644
--- a/src/plugins/qmldesigner/components/itemlibrary/qml/Scrollbar.qml
+++ b/src/plugins/qmldesigner/components/itemlibrary/qml/Scrollbar.qml
@@ -39,11 +39,11 @@ Item {
property variant flickable
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() {
- handle.y = 0
+ handle.y = 2
}
// internal
@@ -62,8 +62,7 @@ Item {
anchors.bottom: parent.bottom
anchors.bottomMargin: 3
anchors.horizontalCenter: parent.horizontalCenter
- width: 6
- radius: 3
+ width: 10
color: style.scrollbarColor
border.width: 1
border.color: style.scrollbarBorderColor
@@ -77,7 +76,7 @@ Item {
flickable.contentY / (flickable.contentHeight - flickable.height),
1)
else
- handle.y = 0
+ handle.y = 2
handle.updateFlickable = true
}
@@ -109,6 +108,7 @@ Item {
Item {
id: handle
+ y: 2
anchors.left: parent.left
anchors.right: parent.right
@@ -125,27 +125,20 @@ Item {
width: parent.height
height: parent.width
y: -height - 2
- x: -2
rotation: 90
transformOrigin: Item.BottomLeft
border.color: style.scrollbarBorderColor
border.width: 1
- radius: 3
-
- gradient: Gradient {
- GradientStop { position: 0.15; color: style.scrollbarGradientStartColor }
- GradientStop { position: 0.78; color: style.scrollbarGradientMiddleColor }
- GradientStop { position: 0.80; color: style.scrollbarGradientEndColor }
- }
+ color: style.sectionTitleBackgroundColor
}
MouseArea {
anchors.fill: parent
drag.target: parent
drag.axis: "YAxis"
- drag.minimumY: 0
+ drag.minimumY: 2
drag.maximumY: scrollHeight
}
}
diff --git a/src/plugins/qmldesigner/components/resources/scrollbar.css b/src/plugins/qmldesigner/components/resources/scrollbar.css
index 34e8af8acbd..661c987cb93 100644
--- a/src/plugins/qmldesigner/components/resources/scrollbar.css
+++ b/src/plugins/qmldesigner/components/resources/scrollbar.css
@@ -1,26 +1,21 @@
QScrollBar:vertical {
- border-image: url(:/qmldesigner/images/scrollbar-borderimage-vertical.png);
- border-left: 0;
- border-right: 0;
- border-top: 3;
- border-bottom: 3;
+ background-color: #444444;
+ border: 1px solid #333333;
margin-top: 3;
margin-bottom: 3;
width: 10;
}
QScrollBar::handle:vertical {
- background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
- stop: 0.20 #888888,
- stop: 0.23 #656565,
- stop: 0.85 #393939);
+ background-color: #656565;
margin-top: -5;
margin-bottom: -5;
min-height: 18px;
width: 8px;
border: 1px solid #313131;
- border-radius: 4px;
border-width: 1;
+ margin-left: -1;
+ margin-right: -1;
}
QScrollBar::add-line:vertical {
@@ -49,28 +44,24 @@
}
QScrollBar:horizontal {
- border-image: url(:/qmldesigner/images/scrollbar-borderimage-horizontal.png);
- border-left: 3;
- border-right: 3;
- border-top: 0;
- border-bottom: 0;
+ background-color: #444444;
+ border: 1px solid #333333;
margin-left: 3;
margin-right: 3;
height: 10;
}
QScrollBar::handle:horizontal {
- background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
- stop: 0.20 #888888,
- stop: 0.23 #656565,
- stop: 0.85 #393939);
+ background-color: #656565;
+
margin-left: -5;
margin-right: -5;
min-width: 18px;
height: 8px;
border: 1px solid #313131;
- border-radius: 4px;
border-width: 1;
+ margin-top: -1;
+ margin-bottom: -1;
}
QScrollBar::add-line:horizontal {
diff --git a/src/plugins/qmldesigner/components/stateseditor/HorizontalScrollBar.qml b/src/plugins/qmldesigner/components/stateseditor/HorizontalScrollBar.qml
index a1077e7ead8..08479b6a70a 100644
--- a/src/plugins/qmldesigner/components/stateseditor/HorizontalScrollBar.qml
+++ b/src/plugins/qmldesigner/components/stateseditor/HorizontalScrollBar.qml
@@ -55,9 +55,8 @@ Item {
Rectangle {
id: groove
width: parent.width - 4
- height: 6
+ height: 10
color: "#444444"
- radius: 3
border.width: 1
border.color: "#333333"
anchors.right: parent.right
@@ -95,13 +94,8 @@ Item {
y:0
border.color: "#333333"
border.width: 1
- radius: 3
- gradient: Gradient {
- GradientStop { position: 0.20; color: "#888888" }
- GradientStop { position: 0.23; color: "#656565" }
- GradientStop { position: 0.85; color: "#393939" }
- }
+ color: "#656565"
MouseArea {
property int dragging:0;
--
GitLab