← Back to branch summary

~loic.molinari/ubuntu-ui-toolkit/ubuntu-ui-toolkit-private-shapes

« back to all changes in this revision

Viewing changes to modules/Ubuntu/Components/Themes/Ambiance/ButtonStyle.qml

  • Committer: Christian Dywan
  • Date: 2014-04-30 10:22:44 UTC
  • mfrom: (1000.17.3 staging)
  • mto: (1000.41.5 staging)
  • mto: This revision was merged to the branch mainline in revision 1022.
  • Revision ID: christian.dywan@canonical.com-20140430102244-uti97msd0thmk31d
Merge lp:~ubuntu-sdk-team/ubuntu-ui-toolkit/staging

Show diffs side-by-side

added added

removed removed

Lines of Context:
modules/Ubuntu/Components/Themes/Ambiance/ButtonStyle.qml
17
17
 */
18
18
 
19
19
import QtQuick 2.0
20
 
import Ubuntu.Components 0.1
 
20
import Ubuntu.Components 1.1
21
21
 
22
22
Item {
23
23
    id: buttonStyle
26
26
    property real minimumWidth: units.gu(10)
27
27
    property real horizontalPadding: units.gu(1)
28
28
    property color defaultColor: UbuntuColors.orange
 
29
    property font defaultFont: Qt.font({family: "Ubuntu", pixelSize: FontUtils.sizeToPixels("medium")})
29
30
    property Gradient defaultGradient
 
31
    property real buttonFaceOffset: 0
 
32
    /*!
 
33
      The property overrides the button's default background with an item. This
 
34
      item can be used by derived styles to reuse the ButtonStyle and override
 
35
      the default coloured background with an image or any other drawing.
 
36
      The default value is null.
 
37
      */
 
38
    property Item backgroundSource: null
30
39
 
31
40
    width: button.width
32
41
    height: button.height
36
45
    LayoutMirroring.enabled: Qt.application.layoutDirection == Qt.RightToLeft
37
46
    LayoutMirroring.childrenInherit: true
38
47
 
 
48
    /*! \internal */
 
49
    // Color properties in a JS ternary operator don't work as expected in
 
50
    // QML because it overwrites alpha values with 1. A workaround is to use
 
51
    // Qt.rgba(). For more information, see
 
52
    // https://bugs.launchpad.net/ubuntu-ui-toolkit/+bug/1197802 and
 
53
    // https://bugreports.qt-project.org/browse/QTBUG-32238.
 
54
    function __colorHack(color) { return Qt.rgba(color.r, color.g, color.b, color.a); }
 
55
 
 
56
 
39
57
    /* The proxy is necessary because Gradient.stops and GradientStop.color are
40
58
       non-NOTIFYable properties. They cannot be written to so it is fine but
41
59
       the proxy avoids the warnings.
42
60
    */
 
61
    property QtObject gradientProxy: gradientProxyObject
43
62
    QtObject {
44
 
        id: gradientProxy
 
63
        id: gradientProxyObject
45
64
        property color topColor
46
65
        property color bottomColor
47
66
 
67
86
        id: background
68
87
        anchors.fill: parent
69
88
        borderSource: "radius_idle.sci"
70
 
        visible: color.a != 0.0
 
89
        visible: (color.a != 0.0) || backgroundSource
 
90
        image: backgroundSource
71
91
 
72
 
        // Color properties in a JS ternary operator don't work as expected in
73
 
        // QML because it overwrites alpha values with 1. A workaround is to use
74
 
        // Qt.rgba(). For more information, see
75
 
        // https://bugs.launchpad.net/ubuntu-ui-toolkit/+bug/1197802 and
76
 
        // https://bugreports.qt-project.org/browse/QTBUG-32238.
77
 
        function colorHack(color) { return Qt.rgba(color.r, color.g, color.b, color.a); }
78
 
        color: isGradient ? colorHack(gradientProxy.topColor) : colorHack(button.color)
79
 
        gradientColor: isGradient ? colorHack(gradientProxy.bottomColor) : colorHack(button.color)
 
92
        color: backgroundSource ? "#00000000" : (isGradient ? __colorHack(gradientProxy.topColor) : __colorHack(button.color))
 
93
        gradientColor: backgroundSource ? "#00000000" : (isGradient ? __colorHack(gradientProxy.bottomColor) : __colorHack(button.color))
80
94
    }
81
95
 
82
96
    UbuntuShape {
98
112
    ButtonForeground {
99
113
        id: foreground
100
114
        width: parent.width - 2*horizontalPadding
101
 
        anchors.centerIn: parent
 
115
        anchors {
 
116
            centerIn: parent
 
117
            horizontalCenterOffset: buttonFaceOffset
 
118
        }
102
119
        text: button.text
103
120
        /* Pick either a clear or dark text color depending on the luminance of the
104
121
           background color to maintain good contrast (works in most cases)
107
124
        iconSource: button.iconSource
108
125
        iconPosition: button.iconPosition
109
126
        iconSize: units.gu(3)
 
127
        font: button.font
110
128
        spacing: horizontalPadding
111
129
        transformOrigin: Item.Top
112
130
        scale: button.pressed ? 0.98 : 1.0