Commit 362ec515 authored by Lasse Holmstedt's avatar Lasse Holmstedt
Browse files

Native CSS-styled scrollbars and QML-based ones fixed for Bauhaus

Reviewed-by: Christiaan Janssen
parent bb17a05f
......@@ -868,7 +868,6 @@ private:
{
_content = content;
sa->setWidget(content);
sa->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOn);
sa->verticalScrollBar()->show();
setupProperWheelBehaviour();
}
......
......@@ -92,5 +92,7 @@
<file>images/slider_indikator.png</file>
<file>images/slider_line.png</file>
<file>formeditorstylesheet.css</file>
<file>images/scrollbar-borderimage-horizontal.png</file>
<file>images/scrollbar-borderimage-vertical.png</file>
</qresource>
</RCC>
QScrollBar:vertical {
border: 1px solid #8F8F8F;
background: transparent;
width: 10px;
margin: 0px 0 0px 0;
border-image: url(:/qmldesigner/images/scrollbar-borderimage-vertical.png);
border-left: 0;
border-right: 0;
border-top: 3;
border-bottom: 3;
margin-top: 3;
margin-bottom: 3;
width: 10;
}
QScrollBar::handle:vertical {
background-color: qlineargradient(x1: 0, y1: 0, x2: 0.5, y2: 0
stop: 0 #cEcEcE,
stop: 1 #8E8E8E);
min-height: 20px;
border: 2px solid #0F0F0F;
border-radius: 6px;
border-width: 1;
background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
stop: 0.20 #888888,
stop: 0.23 #656565,
stop: 0.85 #393939);
margin-top: -5;
margin-bottom: -5;
min-height: 18px;
width: 8px;
border: 1px solid #313131;
border-radius: 4px;
border-width: 1;
}
QScrollBar::add-line:vertical {
border: 0px solid grey;
background: #808080;
......@@ -31,30 +39,37 @@
subcontrol-origin: margin;
}
QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical {
border: 2px solid grey;
width: 3px;
height: 3px;
background: white;
border: 0px solid;
width: 0px;
height: 0px;
}
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
background: none;
}
QScrollBar:horizontal {
border: 1px solid #8F8F8F;
background: transparent;
height: 10px;
margin: 0 0 0 0;
border-image: url(:/qmldesigner/images/scrollbar-borderimage-horizontal.png);
border-left: 3;
border-right: 3;
border-top: 0;
border-bottom: 0;
margin-left: 3;
margin-right: 3;
height: 10;
}
QScrollBar::handle:horizontal {
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 0.5
stop: 0 #cEcEcE,
stop: 1 #8E8E8E);
min-width: 20px;
border: 2px solid #0F0F0F;
border-radius: 6px;
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0.20 #888888,
stop: 0.23 #656565,
stop: 0.85 #393939);
margin-left: -5;
margin-right: -5;
min-width: 18px;
height: 8px;
border: 1px solid #313131;
border-radius: 4px;
border-width: 1;
}
......@@ -75,10 +90,9 @@
}
QScrollBar::left-arrow:horizontal, QScrollBar::right-arrow:horizontal {
border: 2px solid grey;
width: 3px;
height: 3px;
background: white;
border: 0px solid;
width: 0px;
height: 0px;
}
QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
......
import Qt 4.6
Item {
property var flickable: this;
property int viewPosition: 0;
property int viewSize: ( flickable.width>=0 ? flickable.width : 0 );
property int contentSize: ( flickable.contentWidth >= 0 ? flickable.contentWidth : 0 );
signal unFocus();
id: horizontalScrollbar
width: 300
height: 10
onViewPositionChanged: flickable.contentX=viewPosition;
onViewSizeChanged: {
if ((contentSize > viewSize) && (viewPosition > contentSize - viewSize))
viewPosition = contentSize - viewSize;
}
function contentSizeDecreased() {
if ((contentSize > viewSize) && (viewPosition > contentSize - viewSize))
viewPosition = contentSize - viewSize;
}
Rectangle {
id: groove
width: parent.width - 4
height: 6
color: "#444444"
radius: 3
border.width: 1
border.color: "#333333"
anchors.right: parent.right
anchors.rightMargin: 2
anchors.left: parent.left
anchors.leftMargin: 2
anchors.verticalCenter: parent.verticalCenter
x: 2
}
// the scrollbar
Item {
id: bar
width: parent.width
height: parent.height
x: Math.floor( (horizontalScrollbar.contentSize > 0 ? horizontalScrollbar.viewPosition * horizontalScrollbar.width / horizontalScrollbar.contentSize : 0));
Rectangle {
id: handle
width: {
if (horizontalScrollbar.contentSize > 0) {
if (horizontalScrollbar.viewSize > horizontalScrollbar.contentSize || parent.width < 0) {
horizontalScrollbar.visible = false;
return parent.width;
} else {
horizontalScrollbar.visible = true;
return Math.floor(horizontalScrollbar.viewSize / horizontalScrollbar.contentSize * parent.width);
}
} else {
return 0;
}
}
height: parent.height
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" }
}
MouseArea {
property int dragging:0;
property int originalX:0;
anchors.fill: parent
onPressed: { dragging = 1; originalX = mouse.x; horizontalScrollbar.unFocus(); }
onReleased: { dragging = 0; }
onPositionChanged: {
if (dragging) {
var newX = mouse.x - originalX + bar.x;
if (newX<0) newX=0;
if (newX>horizontalScrollbar.width - handle.width)
newX=horizontalScrollbar.width - handle.width;
horizontalScrollbar.viewPosition = (newX * horizontalScrollbar.contentSize / horizontalScrollbar.width);
}
}
}
}
}
}
<RCC>
<qresource prefix="/stateseditor" >
<qresource prefix="/stateseditor">
<file>stateslist.qml</file>
<file>HorizontalScrollBar.qml</file>
</qresource>
</RCC>
......@@ -451,7 +451,7 @@ Rectangle {
id: removeStateButton
color: "#4f4f4f"
border.color: "black"
border.width: 1
border.width: 0
width: removeStateText.width
height: removeStateText.height+3
anchors.left: renameStateButton.right
......@@ -510,94 +510,22 @@ Rectangle {
parent.state = "";
root.unFocus();
root.deleteState(root.currentStateIndex);
horizontalScrollbar.totalLengthDecreased();
horizontalScrollbar.contentSizeDecreased();
}
}
}
Item {
HorizontalScrollBar {
id: horizontalScrollbar
property int viewPosition: 0;
property int viewLength: ( listView.width>=0 ? listView.width : 0 );
property int totalLength: ( listView.contentWidth>=0 ? listView.contentWidth : 0 );
onViewPositionChanged: listView.contentX=viewPosition;
onViewLengthChanged: {
if ((totalLength>viewLength) && (viewPosition > totalLength-viewLength))
viewPosition = totalLength-viewLength;
}
function totalLengthDecreased() {
if ((totalLength>viewLength) && (viewPosition > totalLength-viewLength))
viewPosition = totalLength-viewLength;
}
//opacity: viewLength < totalLength;
//anchors.left : listView.left
flickable: listView
anchors.left: removeStateButton.right
anchors.right : listView.right
anchors.top : listView.bottom
anchors.topMargin: -2
anchors.topMargin: 0
anchors.rightMargin: 1
anchors.bottom: root.bottom
anchors.bottomMargin: 1
// the bar itself
Item {
id: draggableBar
width: if (horizontalScrollbar.totalLength>0) {
if (horizontalScrollbar.viewLength>horizontalScrollbar.totalLength) parent.width;
else horizontalScrollbar.viewLength/horizontalScrollbar.totalLength * parent.width;
} else 0;
height: parent.height;
x: (horizontalScrollbar.totalLength>0?horizontalScrollbar.viewPosition*horizontalScrollbar.width/horizontalScrollbar.totalLength:0);
Rectangle {
height:parent.height-1
width:parent.width
y:1
color: "black"
}
Rectangle {
height:parent.height-3
width:parent.width - 3
y:2
x:2
gradient: Gradient {
GradientStop { position: 0.0; color: "#C6C6C6" }
GradientStop { position: 1.0; color: "#7E7E7E" }
}
}
MouseArea {
anchors.fill:parent
property int dragging:0;
property int originalX:0;
onPressed: { dragging = 1; originalX = mouse.x;root.unFocus(); }
onReleased: { dragging = 0; }
onPositionChanged: if (dragging)
{
var newX = mouse.x - originalX + parent.x;
if (newX<0) newX=0;
if (newX>horizontalScrollbar.width-draggableBar.width)
newX=horizontalScrollbar.width-draggableBar.width;
horizontalScrollbar.viewPosition = newX*horizontalScrollbar.totalLength/horizontalScrollbar.width;
}
}
}
// border
Rectangle {
anchors.fill:parent;
color:"transparent"
border.width:1;
border.color:"#8F8F8F";
}
height: 10
onUnFocus: root.unFocus();
}
}
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