← Back to branch summary

~ahayzen/music-app/use-scrollview

« back to all changes in this revision

Viewing changes to app/components/Themes/Ambiance/SliderStyle.qml

  • Committer: Andrew Hayzen
  • Date: 2016-03-28 09:50:01 UTC
  • mfrom: (963.1.34 music-app)
  • mto: This revision was merged to the branch mainline in revision 967.
  • Revision ID: ahayzen@gmail.com-20160328095001-j6b33l2pbl4pgepe
* Merge of trunk
* Fixes for SongView to use PageHeader instead of PageHeadState

Show diffs side-by-side

added added

removed removed

Lines of Context:
app/components/Themes/Ambiance/SliderStyle.qml
 
1
/*
 
2
 * Copyright 2016 Canonical Ltd.
 
3
 *
 
4
 * This program is free software; you can redistribute it and/or modify
 
5
 * it under the terms of the GNU Lesser 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 Lesser General Public License for more details.
 
12
 *
 
13
 * You should have received a copy of the GNU Lesser General Public License
 
14
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
15
 */
 
16
 
 
17
import QtQuick 2.4
 
18
import Ubuntu.Components 1.3
 
19
 
 
20
/*
 
21
  The default slider style consists of a bar and a thumb shape.
 
22
 
 
23
  This style is themed using the following properties:
 
24
  - thumbSpacing: spacing between the thumb and the bar
 
25
*/
 
26
Item {
 
27
    id: sliderStyle
 
28
 
 
29
    // CUSTOM: This was defined as UbuntuColors.blue
 
30
    //property color foregroundColor: theme.palette.normal.activity
 
31
    property color foregroundColor: UbuntuColors.blue
 
32
    // CUSTOM: This was defined as UbuntuColors.ash (#888888)
 
33
    //property color backgroundColor: theme.palette.normal.base
 
34
    property color backgroundColor: "#888888"
 
35
 
 
36
    property real thumbSpacing: units.gu(0)
 
37
    property Item bar: background
 
38
    property Item thumb: thumb
 
39
 
 
40
    implicitWidth: units.gu(38)
 
41
    implicitHeight: units.gu(5)
 
42
 
 
43
    UbuntuShapeOverlay {
 
44
        id: background
 
45
        anchors {
 
46
            verticalCenter: parent.verticalCenter
 
47
            right: parent.right
 
48
            left: parent.left
 
49
        }
 
50
        height: units.dp(2)
 
51
        backgroundColor: sliderStyle.backgroundColor
 
52
        aspect: UbuntuShape.Flat
 
53
        overlayColor: sliderStyle.foregroundColor
 
54
        overlayRect: Qt.application.layoutDirection == Qt.LeftToRight ?
 
55
            Qt.rect(0.0, 0.0, thumb.x / thumb.barMinusThumbWidth, 1.0) :
 
56
            Qt.rect(1.0 - (thumb.x / thumb.barMinusThumbWidth), 0.0, 1.0, 1.0)
 
57
    }
 
58
 
 
59
    UbuntuShape {
 
60
        id: thumb
 
61
 
 
62
        anchors {
 
63
            verticalCenter: parent.verticalCenter
 
64
            topMargin: thumbSpacing
 
65
            bottomMargin: thumbSpacing
 
66
        }
 
67
 
 
68
        property real barMinusThumbWidth: background.width - (thumb.width + 2.0*thumbSpacing)
 
69
        property real position: thumbSpacing + SliderUtils.normalizedValue(styledItem) * barMinusThumbWidth
 
70
        property bool pressed: SliderUtils.isPressed(styledItem)
 
71
        property bool positionReached: x == position
 
72
        x: position
 
73
 
 
74
        /* Enable the animation on x when pressing the slider.
 
75
           Disable it when x has reached the target position.
 
76
        */
 
77
        onPressedChanged: if (pressed) xBehavior.enabled = true;
 
78
        onPositionReachedChanged: if (positionReached) xBehavior.enabled = false;
 
79
 
 
80
        Behavior on x {
 
81
            id: xBehavior
 
82
            SmoothedAnimation {
 
83
                duration: UbuntuAnimation.FastDuration
 
84
            }
 
85
        }
 
86
        width: units.gu(2)
 
87
        height: units.gu(2)
 
88
        // CUSTOM: This was defined as #FFFFFFolors.blue
 
89
        //backgroundColor: theme.palette.normal.raised
 
90
        backgroundColor: "#FFFFFF"
 
91
 
 
92
        // CUSTOM: Commented out to avoid pulling in more dependencies
 
93
        //FocusShape {
 
94
        //}
 
95
    }
 
96
 
 
97
    BubbleShape {
 
98
        id: bubbleShape
 
99
 
 
100
        property real minimumWidth: units.gu(6)
 
101
        property real horizontalPadding: units.gu(1)
 
102
 
 
103
        width: label.implicitWidth + 2*horizontalPadding
 
104
        height: label.implicitHeight + 2*horizontalPadding
 
105
 
 
106
        // FIXME: very temporary implementation
 
107
        property real minX: 0.0
 
108
        property real maxX: background.width - width
 
109
        property real pointerSize: units.dp(6)
 
110
        property real targetMargin: units.gu(1)
 
111
        property point globalTarget: Qt.point(thumb.x + thumb.width / 2.0, thumb.y - targetMargin)
 
112
 
 
113
        x: MathUtils.clamp(globalTarget.x - width / 2.0, minX, maxX)
 
114
        y: globalTarget.y - height - pointerSize
 
115
        target: Qt.point(globalTarget.x - x, globalTarget.y - y)
 
116
 
 
117
        property bool pressed: SliderUtils.isPressed(styledItem)
 
118
        property bool shouldShow: pressed && label.text != ""
 
119
        onShouldShowChanged: if (shouldShow) {
 
120
                                show();
 
121
                             } else {
 
122
                                hide();
 
123
                             }
 
124
 
 
125
        Label {
 
126
            id: label
 
127
            anchors.centerIn: parent
 
128
            text: styledItem.formatValue(SliderUtils.liveValue(styledItem))
 
129
            textSize: Label.Medium
 
130
            color: theme.palette.normal.overlayText
 
131
        }
 
132
    }
 
133
}