Add ScrollDecorator component
ScrollDecorators API is defined in QtComponents's common API This component just diplay how a Flickable content size and content position is. It's similar to a ScrollBar but is not interactive. The current implemetation makes it visible only when flickable content is moved. The plasma implementation has 2 extra properties: - orientation: Qt.Vertical / Qt.Horizontal orientaion - inverted: true if the scroll decorator should appear inverted (the same logic of Slider and ScrollBar) it has a false default value Signed-off-by: Daker Fernandes Pinheiro <dakerfp@gmail.com>
This commit is contained in:
Daker Fernandes Pinheiro
parent
00576442cc
commit
355655e0d4
126
declarativeimports/plasmacomponents/ScrollDecorator.qml
Normal file
126
declarativeimports/plasmacomponents/ScrollDecorator.qml
Normal file
@ -0,0 +1,126 @@
|
||||
/*
|
||||
* Copyright (C) 2011 by Daker Fernandes Pinheiro <dakerfp@gmail.com>
|
||||
*
|
||||
* This program is free software; you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Library General Public License as
|
||||
* published by the Free Software Foundation; either version 2, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details
|
||||
*
|
||||
* You should have received a copy of the GNU Library General Public
|
||||
* License along with this program; if not, write to the
|
||||
* Free Software Foundation, Inc.,
|
||||
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
|
||||
*/
|
||||
|
||||
import QtQuick 1.1
|
||||
import org.kde.plasma.core 0.1 as PlasmaCore
|
||||
|
||||
Item {
|
||||
id: scrollDecorator
|
||||
|
||||
// Common API
|
||||
property Flickable flickableItem: null
|
||||
|
||||
// Plasma API
|
||||
property int orientation: Qt.Horizontal
|
||||
property bool inverted: false
|
||||
|
||||
// Convinience API
|
||||
property bool _isVertical: orientation == Qt.Vertical
|
||||
property bool _inverted: _isVertical ?
|
||||
!scrollDecorator.inverted : scrollDecorator.inverted
|
||||
property alias _value: range.value
|
||||
|
||||
implicitWidth: _isVertical ? 22 : 200
|
||||
implicitHeight: _isVertical ? 200 : 22
|
||||
|
||||
visible: flickableItem && handle.width < contents.width
|
||||
|
||||
Item {
|
||||
width: _isVertical ? scrollDecorator.height : scrollDecorator.width
|
||||
height: _isVertical ? scrollDecorator.width : scrollDecorator.height
|
||||
rotation: _isVertical ? -90 : 0
|
||||
|
||||
anchors.centerIn: parent
|
||||
|
||||
PlasmaCore.Svg {
|
||||
id: scrollDecoratorSvg
|
||||
imagePath: "widgets/scrollDecorator"
|
||||
}
|
||||
|
||||
Item {
|
||||
id: contents
|
||||
|
||||
anchors.fill: parent
|
||||
|
||||
PlasmaCore.RangeModel {
|
||||
id: range
|
||||
|
||||
minimumValue: 0
|
||||
maximumValue: {
|
||||
var diff;
|
||||
if (_isVertical)
|
||||
diff = flickableItem.contentHeight - flickableItem.height;
|
||||
else
|
||||
diff = flickableItem.contentWidth - flickableItem.width;
|
||||
|
||||
return Math.max(0, diff);
|
||||
}
|
||||
stepSize: 0.0
|
||||
inverted: _inverted
|
||||
positionAtMinimum: 0 + handle.width / 2
|
||||
positionAtMaximum: contents.width - handle.width / 2
|
||||
value: _isVertical ? flickableItem.contentY : flickableItem.contentX
|
||||
}
|
||||
|
||||
PlasmaCore.FrameSvgItem {
|
||||
id: handle
|
||||
|
||||
x: range.position
|
||||
transform: Translate { x: - handle.width / 2 }
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
width: {
|
||||
var ratio;
|
||||
if (_isVertical)
|
||||
ratio = flickableItem.visibleArea.heightRatio;
|
||||
else
|
||||
ratio = flickableItem.visibleArea.widthRatio;
|
||||
|
||||
return ratio * parent.width;
|
||||
}
|
||||
height: parent.height - margins.top // TODO: check mergin
|
||||
imagePath: "widgets/scrollbar"
|
||||
prefix: "slider"
|
||||
opacity: flickableItem && flickableItem.flicking ? 1 : 0
|
||||
|
||||
Connections {
|
||||
target: flickableItem
|
||||
onMovementStarted: handle.opacity = 1
|
||||
onMovementEnded: opacityAnimation.start()
|
||||
}
|
||||
|
||||
Behavior on x {
|
||||
PropertyAnimation {
|
||||
duration: 150
|
||||
easing.type: Easing.OutSine
|
||||
}
|
||||
}
|
||||
|
||||
PropertyAnimation {
|
||||
id: opacityAnimation
|
||||
|
||||
target: handle
|
||||
property: "opacity"
|
||||
from: 1; to: 0
|
||||
duration: 500
|
||||
easing.type: Easing.Linear
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -12,6 +12,7 @@ Highlight 0.1 Highlight.qml
|
||||
PushButton 0.1 PushButton.qml
|
||||
RadioButton 0.1 RadioButton.qml
|
||||
ScrollBar 0.1 ScrollBar.qml
|
||||
ScrollDecorator 0.1 ScrollDecorator.qml
|
||||
Slider 0.1 Slider.qml
|
||||
Switch 0.1 Switch.qml
|
||||
ToolButton 0.1 ToolButton.qml
|
||||
|
||||
@ -21,8 +21,8 @@ import QtQuick 1.0
|
||||
import org.kde.plasma.components 0.1 as PlasmaComponents
|
||||
|
||||
Rectangle {
|
||||
width: 800
|
||||
height: 400
|
||||
width: 1000
|
||||
height: 800
|
||||
color: "lightgrey"
|
||||
|
||||
Flickable {
|
||||
@ -248,6 +248,75 @@ Rectangle {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
font.pixelSize: 20
|
||||
text: "Scroll Decorator"
|
||||
}
|
||||
|
||||
Item {
|
||||
width: 200
|
||||
height: 200
|
||||
PlasmaComponents.Highlight {
|
||||
anchors.fill: parent
|
||||
anchors.margins: -10
|
||||
}
|
||||
Flickable {
|
||||
id: scrollArea
|
||||
anchors.fill: parent
|
||||
clip: true
|
||||
contentWidth: 400
|
||||
contentHeight: 400
|
||||
|
||||
// Flickable Contents
|
||||
Rectangle {
|
||||
color: "green"
|
||||
width: 100
|
||||
height: 100
|
||||
}
|
||||
Rectangle {
|
||||
x: 80
|
||||
y: 80
|
||||
color: "blue"
|
||||
width: 200
|
||||
height: 200
|
||||
}
|
||||
Rectangle {
|
||||
x: 200
|
||||
y: 200
|
||||
color: "red"
|
||||
width: 150
|
||||
height: 150
|
||||
}
|
||||
}
|
||||
|
||||
// Scroll Decorators
|
||||
PlasmaComponents.ScrollDecorator {
|
||||
orientation: Qt.Vertical
|
||||
flickableItem: scrollArea
|
||||
inverted: true
|
||||
anchors {
|
||||
top: scrollArea.top
|
||||
right: scrollArea.right
|
||||
bottom: scrollArea.bottom
|
||||
}
|
||||
Text {
|
||||
y: parent.height / 2
|
||||
x: 13
|
||||
rotation: -90
|
||||
text: "inverted"
|
||||
}
|
||||
}
|
||||
PlasmaComponents.ScrollDecorator {
|
||||
orientation: Qt.Horizontal
|
||||
flickableItem: scrollArea
|
||||
anchors {
|
||||
left: scrollArea.left
|
||||
right: scrollArea.right
|
||||
bottom: scrollArea.bottom
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Column {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user