← Back to branch summary

~blue-shell/blue-shell/kde-workspace-systemsettings-qml

« back to all changes in this revision

Viewing changes to systemsettings/qml/main.qml

  • Committer: Eike Hein
  • Date: 2013-01-23 10:25:54 UTC
  • Revision ID: git-v1:cd6b36487ddc7ef8ff77defcc4ae40bb0c2e89ab
Basic QML Testbed view mode plugin.

Missing wip feature branches for:
- keyboard nav and associated scroll behavior
- item rect animations
- search filtering
- CJK-optimized label wordwrapping
- rtl layout experiments

To be finished/merged one by one soon.

Known bugs:
- scrollbar doesn't update on first show (minor)
- doesn't follow the single vs. doubleclick global setting
- whole bunch of hardcoded margins making for ugly code (mostly
  addressed in the rtl branch)

Show diffs side-by-side

added added

removed removed

Lines of Context:
systemsettings/qml/main.qml
 
1
import QtQuick 1.1
 
2
import org.kde.plasma.core 0.1 as PlasmaCore
 
3
import org.kde.plasma.components 0.1 as PlasmaComponents
 
4
import org.kde.qtextracomponents 0.1 as QtExtra
 
5
import SystemSettings 0.1
 
6
 
 
7
Flickable {
 
8
    id: root
 
9
    contentHeight: categoryList.height
 
10
    contentWidth: categoryList.width
 
11
    boundsBehavior: Flickable.StopAtBounds
 
12
 
 
13
    signal loadModule( string name )
 
14
 
 
15
    Component {
 
16
        id: menuItem
 
17
 
 
18
        ItemRect {
 
19
            id: frame
 
20
 
 
21
            width: icon.width * 3
 
22
            height: icon.height + label.height + 15
 
23
 
 
24
            Column {
 
25
                width: parent.width
 
26
                anchors.horizontalCenter: parent.horizontalCenter
 
27
                anchors.verticalCenter: parent.verticalCenter
 
28
 
 
29
                QtExtra.QIconItem {
 
30
                    id: icon
 
31
 
 
32
                    anchors.horizontalCenter: parent.horizontalCenter
 
33
 
 
34
                    width: 32
 
35
                    height: 32
 
36
 
 
37
                    icon: model.DecorationRole
 
38
                }
 
39
 
 
40
                FocusRect {
 
41
                    id: focusRect
 
42
 
 
43
                    width: parent.width
 
44
                    height: label.paintedHeight + 3
 
45
                    anchors.horizontalCenter: icon.horizontalCenter
 
46
 
 
47
                    Text {
 
48
                        id: label
 
49
 
 
50
                        width: parent.width - 10
 
51
                        x: 5
 
52
                        height: parent.height
 
53
 
 
54
                        wrapMode: Text.WordWrap
 
55
                        horizontalAlignment: Text.AlignHCenter
 
56
                        verticalAlignment: Text.AlignBottom
 
57
                        text: model.DisplayRole
 
58
                    }
 
59
                }
 
60
            }
 
61
 
 
62
            property bool mouseOver: false
 
63
            property bool mousePressed: false
 
64
 
 
65
            MouseArea {
 
66
                id: mouseArea
 
67
 
 
68
                anchors.fill: parent
 
69
 
 
70
                hoverEnabled: true
 
71
 
 
72
                onEntered: {
 
73
                    mouseOver = true;
 
74
                }
 
75
 
 
76
                onExited: {
 
77
                    mouseOver = false;
 
78
                    //FIXME: Hack for testing, breaks down with double-click.
 
79
                    mousePressed = false;
 
80
                }
 
81
 
 
82
                onPressed: {
 
83
                    mousePressed = true;
 
84
                }
 
85
 
 
86
                onClicked: {
 
87
                    root.loadModule( model.DisplayRole )
 
88
                }
 
89
            }
 
90
 
 
91
           states: [
 
92
                State {
 
93
                    name: "selected+hovered"
 
94
                    when: mousePressed && mouseOver
 
95
 
 
96
                    PropertyChanges {
 
97
                        target: frame
 
98
                        hovered: true
 
99
                        selected: true
 
100
                    }
 
101
                    PropertyChanges {
 
102
                        target: label
 
103
                        color: "white"
 
104
                    }
 
105
                },
 
106
                State {
 
107
                    name: "selected"
 
108
                    when: mousePressed && !mouseOver
 
109
 
 
110
                    PropertyChanges {
 
111
                        target: frame
 
112
                        hovered: false
 
113
                        selected: true
 
114
                    }
 
115
                    PropertyChanges {
 
116
                        target: label
 
117
                        color: "white"
 
118
                    }
 
119
                },
 
120
                State {
 
121
                    name: "hovered"
 
122
                    when: !mousePressed && mouseOver
 
123
 
 
124
                    PropertyChanges {
 
125
                        target: frame
 
126
                        hovered: true
 
127
                        selected: false
 
128
                    }
 
129
                    PropertyChanges {
 
130
                        target: label
 
131
                        color: "black"
 
132
                    }
 
133
                },
 
134
                State {
 
135
                    name: "none"
 
136
                    when: !mouseOver
 
137
 
 
138
                    PropertyChanges {
 
139
                        target: frame
 
140
                        hovered: false
 
141
                        selected: false
 
142
                    }
 
143
                    PropertyChanges {
 
144
                        target: label
 
145
                        color: "black"
 
146
                    }
 
147
                }
 
148
            ]
 
149
        }
 
150
    }
 
151
 
 
152
    Component {
 
153
        id: categoryView
 
154
 
 
155
        CategoryBackground
 
156
        {
 
157
            anchors.left: parent.left
 
158
            anchors.right: parent.right
 
159
            height: categoryContents.height + 10
 
160
 
 
161
 
 
162
            Column {
 
163
                id: categoryContents
 
164
                anchors.left: parent.left
 
165
                anchors.right: parent.right
 
166
                anchors.leftMargin: 5
 
167
                anchors.rightMargin: 5
 
168
 
 
169
                Text {
 
170
                    anchors.left: parent.left
 
171
                    anchors.leftMargin: 8
 
172
                    height: paintedHeight + 10
 
173
                    verticalAlignment: Text.AlignBottom
 
174
                    font.bold: true
 
175
                    opacity: 0.6
 
176
                    text: model.DisplayRole
 
177
                }
 
178
 
 
179
                VisualDataModel {
 
180
                    id: lense
 
181
                    model: menuModel
 
182
                    rootIndex: modelIndex(index)
 
183
                    delegate: menuItem
 
184
 
 
185
                    Component.onCompleted: {
 
186
                        lense.rootIndex = lense.modelIndex(index)
 
187
                    }
 
188
                }
 
189
 
 
190
                Flow {
 
191
                    anchors.left: parent.left
 
192
                    anchors.right: parent.right
 
193
 
 
194
                    Repeater { model: lense }
 
195
                }
 
196
            }
 
197
        }
 
198
    }
 
199
 
 
200
    Column {
 
201
        id: categoryList
 
202
        width: root.width
 
203
 
 
204
        Repeater {
 
205
            model: menuModel
 
206
            delegate: categoryView
 
207
        }
 
208
    }
 
209
}