← Back to branch summary

~faenil/ubuntu-ui-toolkit/listitemlayout_fixes_and_docs

« back to all changes in this revision

Viewing changes to src/Ubuntu/Components/Themes/Ambiance/1.3/SwitchStyle.qml

  • Committer: Andrea Bernabei
  • Date: 2016-01-20 13:47:23 UTC
  • mfrom: (1795.2.13 staging)
  • Revision ID: andrea.bernabei@canonical.com-20160120134723-hn6rkf4s3pie0wwp
merge staging

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/Ubuntu/Components/Themes/Ambiance/1.3/SwitchStyle.qml
23
23
    /*!
24
24
      The padding between the thumb and the outside border of the switch.
25
25
     */
26
 
    property real thumbPadding: units.gu(0.33)
27
 
 
28
 
    /*!
29
 
      The padding between the icon and the border of the thumb.
30
 
     */
31
 
    property real iconPadding: thumbPadding
32
 
 
33
 
    implicitWidth: units.gu(6)
34
 
    implicitHeight: units.gu(3)
35
 
    opacity: styledItem.enabled ? 1.0 : 0.5
 
26
    property real thumbPadding: 0
 
27
 
 
28
    implicitWidth: units.gu(5)
 
29
    implicitHeight: units.gu(2.5)
36
30
    LayoutMirroring.enabled: false
37
31
    LayoutMirroring.childrenInherit: true
38
32
 
39
33
    /*!
40
34
      The background color of the switch.
41
35
     */
42
 
    property color backgroundColor: theme.palette.normal.base
43
 
 
44
 
    /*!
45
 
      The background color of the thumb when the switch is checked.
46
 
     */
47
 
    property color checkedThumbColor: UbuntuColors.green
48
 
 
49
 
    /*!
50
 
      The background color of the thumb when the switch is not checked.
51
 
     */
52
 
    property color uncheckedThumbColor: Qt.rgba(0, 0, 0, 0.2)
53
 
 
54
 
    /*!
55
 
      The foreground color of the icon that is currently selected.
56
 
     */
57
 
    property color selectedIconColor: theme.palette.normal.foregroundText
58
 
 
59
 
   /*!
60
 
     The color of the icon that is not currently selected.
61
 
    */
62
 
    property color unselectedIconColor: theme.palette.normal.backgroundText
63
 
 
64
 
    /*!
65
 
      The source of the selected icon when the switch is checked.
66
 
     */
67
 
    property url checkedIconSource: "image://theme/tick"
68
 
 
69
 
    /*!
70
 
      The source of the selected icon when the switch is not checked.
71
 
     */
72
 
    property url uncheckedIconSource: "image://theme/close"
 
36
    property color backgroundColor: styledItem.enabled ? theme.palette.normal.base : theme.palette.inactive.base
 
37
 
 
38
    /*!
 
39
      The background color of the checked switch.
 
40
      */
 
41
    property color checkedBackgroundColor: styledItem.enabled ? theme.palette.normal.positive : theme.palette.inactive.base
 
42
    /*!
 
43
      The background color of the thumb.
 
44
     */
 
45
    property color thumbColor: styledItem.enabled ? theme.palette.normal.raised : theme.palette.inactive.raised
73
46
 
74
47
    FocusShape {
75
48
    }
86
59
                State {
87
60
                    name: "checked"
88
61
                    when: styledItem.checked
89
 
                    PropertyChanges {
 
62
                    AnchorChanges {
90
63
                        target: thumb
91
 
                        x: rightThumbPosition.x
92
 
                        backgroundColor: switchStyle.checkedThumbColor
 
64
                        anchors.left: undefined
 
65
                        anchors.right: parent.right
93
66
                    }
94
 
                },
95
 
                State {
96
 
                    name: "unchecked"
97
 
                    when: !styledItem.checked
98
67
                    PropertyChanges {
99
 
                        target: thumb
100
 
                        x: leftThumbPosition.x
101
 
                        backgroundColor: switchStyle.uncheckedThumbColor
 
68
                        target: background
 
69
                        backgroundColor: switchStyle.checkedBackgroundColor
102
70
                    }
103
71
                }
104
72
            ]
107
75
                // Avoid animations on width changes (during initialization)
108
76
                // by explicitly setting from and to for the Transitions.
109
77
                Transition {
110
 
                    from: "unchecked"
 
78
                    from: "*"
111
79
                    to: "checked"
112
 
                    UbuntuNumberAnimation {
113
 
                        target: thumb
114
 
                        properties: "x"
115
 
                        duration: UbuntuAnimation.FastDuration
116
 
                        easing: UbuntuAnimation.StandardEasing
117
 
                    }
118
 
                    ColorAnimation {
119
 
                        target: thumb
120
 
                        properties: "backgroundColor"
121
 
                        duration: UbuntuAnimation.FastDuration
122
 
                        easing: UbuntuAnimation.StandardEasing
123
 
                    }
124
 
                },
125
 
                Transition {
126
 
                    from: "checked"
127
 
                    to: "unchecked"
128
 
                    UbuntuNumberAnimation {
129
 
                        target: thumb
130
 
                        properties: "x"
 
80
                    reversible: true
 
81
                    enabled: animated
 
82
                    AnchorAnimation {
 
83
                        targets: thumb
131
84
                        duration: UbuntuAnimation.FastDuration
132
85
                        easing: UbuntuAnimation.StandardEasing
133
86
                    }
140
93
                }
141
94
            ]
142
95
 
 
96
            backgroundColor: switchStyle.thumbColor
143
97
            width: (background.width - switchStyle.thumbPadding * 3.0) / 2.0
144
98
            anchors {
145
99
                top: parent.top
146
100
                bottom: parent.bottom
 
101
                left: parent.left
147
102
                topMargin: switchStyle.thumbPadding
148
103
                bottomMargin: switchStyle.thumbPadding
149
104
            }
150
105
 
151
 
            property real iconSize: Math.min(width, height) - 2*switchStyle.iconPadding
152
 
 
153
 
            PartialColorize {
154
 
                anchors {
155
 
                    verticalCenter: parent.verticalCenter
156
 
                    right: parent.left
157
 
                    rightMargin: switchStyle.iconPadding + switchStyle.thumbPadding
158
 
                }
159
 
                rightColor: switchStyle.unselectedIconColor
160
 
                source: Image {
161
 
                    source: switchStyle.uncheckedIconSource
162
 
                    sourceSize {
163
 
                        width: thumb.iconSize
164
 
                        height: thumb.iconSize
165
 
                    }
166
 
                }
167
 
            }
168
 
 
169
 
            PartialColorize {
170
 
                anchors {
171
 
                    verticalCenter: parent.verticalCenter
172
 
                    left: parent.right
173
 
                    leftMargin: switchStyle.iconPadding + switchStyle.thumbPadding
174
 
                }
175
 
                rightColor: switchStyle.unselectedIconColor
176
 
                source: Image {
177
 
                    source: switchStyle.checkedIconSource
178
 
                    sourceSize {
179
 
                        width: thumb.iconSize
180
 
                        height: thumb.iconSize
181
 
                    }
182
 
                }
183
 
            }
184
 
        }
185
 
 
186
 
        Item {
187
 
            id: leftThumbPosition
188
 
            anchors {
189
 
                left: parent.left
190
 
                top: parent.top
191
 
                leftMargin: switchStyle.thumbPadding
192
 
                topMargin: switchStyle.thumbPadding
193
 
            }
194
 
            height: thumb.height
195
 
            width: thumb.width
196
 
 
197
 
            PartialColorize {
198
 
                anchors.centerIn: parent
199
 
                source: Image {
200
 
                    source: switchStyle.uncheckedIconSource
201
 
                    sourceSize {
202
 
                        width: thumb.iconSize
203
 
                        height: thumb.iconSize
204
 
                    }
205
 
                }
206
 
                progress: MathUtils.clamp((thumb.x - parent.x - x) / width, 0.0, 1.0)
207
 
                leftColor: "transparent"
208
 
                rightColor: switchStyle.selectedIconColor
209
 
            }
210
 
        }
211
 
 
212
 
        Item {
213
 
            id: rightThumbPosition
214
 
            anchors {
215
 
                right: parent.right
216
 
                top: parent.top
217
 
                rightMargin: switchStyle.thumbPadding
218
 
                topMargin: switchStyle.thumbPadding
219
 
            }
220
 
            height: thumb.height
221
 
            width: thumb.width
222
 
 
223
 
            PartialColorize {
224
 
                anchors.centerIn: parent
225
 
                source: Image {
226
 
                    source: switchStyle.checkedIconSource
227
 
                    sourceSize {
228
 
                        width: thumb.iconSize
229
 
                        height: thumb.iconSize
230
 
                    }
231
 
                }
232
 
                progress: MathUtils.clamp((thumb.x + thumb.width - parent.x - x) / width, 0.0, 1.0)
233
 
                leftColor: switchStyle.selectedIconColor
234
 
                rightColor: "transparent"
235
 
            }
236
106
        }
237
107
    }
238
108
}