Introduced styles - first version of Widgets
[opentodolist:opentodolist.git] / OpenTodoList / qml / OpenTodoList / styles / neutral / controls / ProgressIndicator.qml
1 /*
2  *  OpenTodoList - A todo and task manager
3  *  Copyright (C) 2013  Martin Höher <martin@rpdev.net>
4  *
5  *  This program is free software: you can redistribute it and/or modify
6  *  it under the terms of the GNU General Public License as published by
7  *  the Free Software Foundation, either version 3 of the License, or
8  *  (at your option) any later version.
9  *
10  *  This program is distributed in the hope that it will be useful,
11  *  but WITHOUT ANY WARRANTY; without even the implied warranty of
12  *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
13  *  GNU General Public License for more details.
14  *
15  *  You should have received a copy of the GNU General Public License
16  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
17  */
18
19 import QtQuick 2.0
20
21 Item {
22     id: indicator
23
24     property int percentage: 25
25     property int indicatorBorder: 10
26     property bool readOnly: false
27     property color innerColor: colors.button
28     property color outerColor: colors.complementaryColorDarker2
29
30     signal decreasePressed()
31     signal increasePressed()
32
33     function stepUp() {
34         return Math.max( 0, Math.min( 100, percentage + 10 ) );
35     }
36
37     function stepDown() {
38         return Math.max( 0, Math.min( 100, percentage - 10 ) );
39     }
40
41     Behavior on percentage { SmoothedAnimation { velocity: 120 } }
42
43     width: row.width + 50
44     height: width
45
46     Image {
47         source: "image://primitives/pie/fill=" +
48                 indicator.innerColor + ",percentage=100"
49         width: indicator.width
50         height: indicator.height
51
52         Component.onCompleted: {
53             // Initialize once to avoid flickering during resize
54             sourceSize.width = width;
55             sourceSize.height = height;
56         }
57     }
58
59     Image {
60         source: "image://primitives/pie/fill=" +
61                 indicator.outerColor +
62                 ",percentage=" + indicator.percentage
63         width: indicator.width
64         height: indicator.height
65         Component.onCompleted: {
66             // Initialize once to avoid flickering during resize
67             sourceSize.width = width;
68             sourceSize.height = height;
69         }
70     }
71
72     Image {
73         source: "image://primitives/pie/fill=" +
74                 indicator.innerColor + ",percentage=100"
75         width: indicator.width - indicator.indicatorBorder * 2
76         height: indicator.height - indicator.indicatorBorder * 2
77         x: indicator.indicatorBorder
78         y: indicator.indicatorBorder
79         sourceSize.width: width
80         sourceSize.height: height
81     }
82
83     Row {
84         id: row
85         spacing: decreaseButton.height
86         anchors.centerIn: parent
87         SymbolButton {
88             id: decreaseButton
89             text: "\uf068"
90             font.pointSize: fonts.h2
91             anchors.verticalCenter: parent.verticalCenter
92             color: colors.fontColorFor( indicator.innerColor )
93
94             onClicked: indicator.decreasePressed()
95         }
96
97         Text {
98             anchors.verticalCenter: parent.verticalCenter
99             text: indicator.percentage + "%"
100             font.pointSize: fonts.h2
101             color: colors.fontColorFor( indicator.innerColor )
102         }
103
104         SymbolButton {
105             id: increaseButton
106             text: "\uf067"
107             font.pointSize: fonts.h2
108             color: colors.fontColorFor( indicator.innerColor )
109             anchors.verticalCenter: parent.verticalCenter
110
111             onClicked: indicator.increasePressed()
112         }
113     }
114 }