1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
import QtQuick 2.4
import Ubuntu.Components 1.3
Rectangle {
id: color_picker
property var whatisit
property string pagetitle
property color selectedcolor
function snapSomewhere()
{
if (color_picker.y > topMargin + units.gu(2)) {
color_picker.y = color_picker.parent.height
}
else {
color_picker.y = topMargin
}
}
Behavior on y {NumberAnimation{}}
MouseArea {
anchors.fill: parent
}
PageHeader {
id: main_header
title: color_picker.pagetitle
trailingActionBar.actions: [
Action {
iconName: "ok"
onTriggered: {
color_picker.y = parent.height
}
}
]
MouseArea {
anchors.fill: parent
onReleased: snapSomewhere()
drag.target: color_picker
drag.axis: Drag.YAxis
propagateComposedEvents: true
}
}
Flickable {
id: flikable
anchors {
top: main_header.bottom
left: parent.left
right: parent.right
bottom: parent.bottom
}
contentHeight: color_grid.height + units.gu(2)
clip: true
Grid {
id: color_grid
spacing: (color_picker.width - units.gu(32))/5
rows: 5
columns: 4
anchors.centerIn: parent
Repeater {
id: color_rep
model: [
"#eeeeee", "#929292", "#5d5d5d", "#000000",
"#e69f00", "#d55e00", "#dd4814","#f32c36",
"#f0e442", "#8bcd32", "#00a132", "#009e73",
"#56b4e9", "#12a3d8", "#0072b2", "#7b2dd7",
"#7c23aa", "#762572", "#aa1f78", "#cc79a7"
]
UbuntuShape {
id: color_rect
scale: color == selectedcolor ? 1 : .8
color: modelData
width: units.gu(8)
height: width
radius: color == selectedcolor ? "small" : "large"
aspect: color == selectedcolor ? UbuntuShape.Inset : UbuntuShape.DropShadow
Behavior on scale { NumberAnimation { duration: 165 }}
MouseArea {
id: mouse_area
anchors.fill: parent
onClicked: {
selectedcolor = color_rect.color
color_picker.whatisit === "back" ? backColor = color_rect.color
: textColor = color_rect.color
}
}
}
}
}
}
}
|