← Back to branch summary

~cimi/unity8/lp1350891_ScrollBackground

« back to all changes in this revision

Viewing changes to qml/Tutorial/Slider.qml

  • Committer: Ying-Chun Liu
  • Date: 2015-02-13 13:27:19 UTC
  • mfrom: (1431.1.180 unity8)
  • Revision ID: paul.liu@canonical.com-20150213132719-8itxhrauv317p18p
Merge trunk

Show diffs side-by-side

added added

removed removed

Lines of Context:
qml/Tutorial/Slider.qml
 
1
/*
 
2
 * Copyright (C) 2014 Canonical, Ltd.
 
3
 *
 
4
 * This program is free software; you can redistribute it and/or modify
 
5
 * it under the terms of the GNU General Public License as published by
 
6
 * the Free Software Foundation; version 3.
 
7
 *
 
8
 * This program is distributed in the hope that it will be useful,
 
9
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 
10
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 
11
 * GNU General Public License for more details.
 
12
 *
 
13
 * You should have received a copy of the GNU General Public License
 
14
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
15
 */
 
16
 
 
17
import QtQuick 2.3
 
18
import Ubuntu.Components 1.1
 
19
 
 
20
Item {
 
21
    id: root
 
22
 
 
23
    // Whether this slider is short or long
 
24
    property bool shortSwipe
 
25
 
 
26
    // How far the user has slid
 
27
    property real offset
 
28
 
 
29
    // Set to true when slider is being used
 
30
    property bool active
 
31
 
 
32
    // How far in percentage terms
 
33
    readonly property real percent: d.slideOffset / target.x
 
34
 
 
35
    QtObject {
 
36
        id: d
 
37
        readonly property color trayColor: "#424141"
 
38
        readonly property real margin: units.gu(0.5)
 
39
        readonly property real arrowSize: root.height - margin * 2
 
40
        readonly property real dotSize: units.dp(1)
 
41
        readonly property real slideOffset: MathUtils.clamp(root.offset - offscreenOffset, -offscreenOffset, target.x)
 
42
        readonly property real offscreenOffset: units.gu(2)
 
43
    }
 
44
 
 
45
    implicitWidth: shortSwipe ? units.gu(15) : units.gu(27.5)
 
46
    implicitHeight: units.gu(6.5)
 
47
 
 
48
    Rectangle {
 
49
        color: d.trayColor
 
50
        anchors.fill: parent
 
51
        anchors.rightMargin: clipBox.width - 1
 
52
    }
 
53
 
 
54
    // We want to have a circular border around the target.  But we can't just
 
55
    // do a radius on two of a rectangle's corners.  So we clip a full circle.
 
56
    Item {
 
57
        id: clipBox
 
58
 
 
59
        clip: true
 
60
        anchors.top: parent.top
 
61
        anchors.bottom: parent.bottom
 
62
        anchors.right: parent.right
 
63
        width: parent.height / 2
 
64
 
 
65
        Rectangle {
 
66
            color: d.trayColor
 
67
            anchors.top: parent.top
 
68
            anchors.bottom: parent.bottom
 
69
            anchors.right: parent.right
 
70
            width: parent.width * 2
 
71
            radius: parent.width
 
72
        }
 
73
    }
 
74
 
 
75
    Arrow {
 
76
        id: target
 
77
        width: d.arrowSize
 
78
        height: d.arrowSize
 
79
        color: "#73000000"
 
80
        chevronOpacity: 0.52
 
81
        anchors.right: parent.right
 
82
        anchors.rightMargin: d.margin
 
83
        anchors.verticalCenter: parent.verticalCenter
 
84
    }
 
85
 
 
86
    Row {
 
87
        anchors.left: handle.horizontalCenter
 
88
        anchors.right: target.horizontalCenter
 
89
        anchors.verticalCenter: parent.verticalCenter
 
90
 
 
91
        layoutDirection: Qt.RightToLeft
 
92
        spacing: d.dotSize * 2
 
93
 
 
94
        Repeater {
 
95
            model: parent.width / (parent.spacing + d.dotSize)
 
96
            Rectangle {
 
97
                anchors.verticalCenter: parent ? parent.verticalCenter : undefined
 
98
                height: d.dotSize
 
99
                width: height
 
100
                radius: width
 
101
                color: "white"
 
102
                opacity: 0.2
 
103
            }
 
104
        }
 
105
    }
 
106
 
 
107
    Arrow {
 
108
        id: handle
 
109
        width: d.arrowSize
 
110
        height: d.arrowSize
 
111
        color: UbuntuColors.orange
 
112
        darkenBy: root.active ? 0.5 : 0
 
113
        anchors.left: parent.left
 
114
        // We use a Translate transform rather than anchors.leftMargin because
 
115
        // the latter has weird performance problems on the TutorialRight page.
 
116
        transform: [
 
117
            Translate {
 
118
                x: d.slideOffset
 
119
            }
 
120
        ]
 
121
        anchors.verticalCenter: parent.verticalCenter
 
122
    }
 
123
}