[components] Add Button control and styling

examples/touch/content/ButtonPage.qml

@@ -40,6 +40,7 @@
 
 import QtQuick 2.1
 import QtQuick.Controls.Nemo 1.0
+import QtQuick.Controls.Styles.Nemo 1.0
 
 Item {
     width: parent.width
@@ -51,19 +52,25 @@ Item {
 
         Button {
             anchors.margins: 20
-            text: "Press me"
+            text: (Theme.themeName == NemoControls.themes[0]) ? "Set Ugly Theme"
+                                                              : "Set Nice Theme"
+            onClicked: NemoControls.setTheme((Theme.themeName == NemoControls.themes[0]) ? NemoControls.themes[1]
+                                                                                            : NemoControls.themes[0])
         }
 
         Button {
             anchors.margins: 20
-            text: "Press me too"
+            enabled: false
+            text: "Disabled"
         }
 
         Button {
             anchors.margins: 20
-            text: "Dont press me"
+            primary: true
+            text: "Go back"
             onClicked: if (stackView) stackView.pop()
         }
 
+
     }
 }

src/controls/Button.qml

+/*
+ * Copyright (C) 2013 Andrea Bernabei <and.bernabei@gmail.com>
+ *
+ * This library is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Library General Public
+ * License as published by the Free Software Foundation; either
+ * version 2 of the License, or (at your option) any later version.
+ *
+ * This library is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Library General Public License for more details.
+ *
+ * You should have received a copy of the GNU Library General Public License
+ * along with this library; see the file COPYING.LIB.  If not, write to
+ * the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
+ * Boston, MA 02110-1301, USA.
+ */
+
+import QtQuick 2.1
+import QtQuick.Controls 1.0
+import QtQuick.Controls.Nemo 1.0
+
+Button {
+    // XXX HACK: We are assuming we'll find Button's private mouseArea with childAt(0,0)!!!
+    property variant __buttonMouseArea: childAt(0,0)
+    property int pressX: 0
+    property int pressY: 0
+
+    // A primary button is the main button of a view, and it is styled accordingly.
+    property bool primary: false
+
+    // XXX HACK: Workaround for QQC Button not exposing x/y of pressed state
+    // We need those for Glacier's Button pressed effect
+    Connections {
+        target: __buttonMouseArea
+        onPressed: {
+            pressX = mouse.x
+            pressY = mouse.y
+        }
+	onPositionChanged: {
+            pressX = mouse.x
+            pressY = mouse.y
+        }
+    }
+
+}
+
+

src/controls/controls.pro

@@ -4,6 +4,10 @@ QT += qml quick
 TARGET=nemocontrolsplugin
 PLUGIN_IMPORT_PATH = QtQuick/Controls/Nemo
 
+# Added/Reimplemented Controls
+QML_FILES += \
+    Button.qml
+
 # Private files
 QML_FILES += \
     private/NemoControls.qml

src/controls/qmldir

@@ -8,6 +8,7 @@ plugin nemocontrolsplugin
 # Example:
 # GlacierSlider 1.0 GlacierSlider.qml
 
+Button 1.0 Button.qml
 
 # MIRRORED CONTROLS: 
 # These are the controls that we take directly from official QQC.
@@ -18,7 +19,6 @@ plugin nemocontrolsplugin
 # case Nemo plugin doesn't provide an overridden component)
 # NOTE: "../" here is assumed to be the relative path to the official QQC!!
 
-Button 1.0 ../Button.qml
 ApplicationWindow 1.0 ../ApplicationWindow.qml
 CheckBox 1.0 ../CheckBox.qml
 ComboBox 1.0 ../ComboBox.qml

src/styles/ButtonStyle.qml

@@ -18,8 +18,64 @@
  */
 
 import QtQuick 2.1
+import QtQuick.Controls 1.0
 import QtQuick.Controls.Styles 1.0
+import QtGraphicalEffects 1.0
+
+//Styles.Nemo provides Theme
+import QtQuick.Controls.Styles.Nemo 1.0
 
 ButtonStyle {
+    id: buttonstyle
+
+    // The background of the button.
+    background: Rectangle {
+        implicitWidth: 240
+        implicitHeight: 50
+        clip: true
+        color: control.primary ? Theme.primaryButton.backgroundColor
+                               : Theme.button.backgroundColor
+        Image {
+            id: disabledImg
+            anchors.fill: parent
+            visible: !control.enabled
+            source: "images/disabled-overlay.png"
+            fillMode: Image.Tile
+        }
+
+        // The effect which shows the pressed state
+        RadialGradient {
+            x: control.pressX - width/2
+            y: control.pressY - height/2
+            width: Theme.button.pressedGradient.width
+            height: Theme.button.pressedGradient.height
+            visible: control.pressed
+
+            gradient: Gradient {
+                GradientStop {
+                    position: Theme.button.pressedGradient.center;
+                    color: control.primary ? Theme.primaryButton.pressedGradient.centerColor
+                                           : Theme.button.pressedGradient.centerColor
+                }
+                GradientStop {
+                    position: Theme.button.pressedGradient.edge;
+                    color: control.primary ? Theme.primaryButton.pressedGradient.edgeColor
+                                           : Theme.button.pressedGradient.edgeColor
+                }
+            }
+        }
+    }
 
+    // The label of the button.
+    label: Text {
+        renderType: Text.NativeRendering
+        verticalAlignment: Text.AlignVCenter
+        horizontalAlignment: Text.AlignHCenter
+        text: control.text
+        color: Theme.button.text.color
+        font.family: Theme.fontFamily
+        font.pointSize: Theme.button.text.font.pointSize
+        font.weight: control.primary ? Theme.primaryButton.text.font.weight : Theme.button.text.font.weight
+        opacity: control.enabled ? 1.0 : 0.3
+    }
 }

src/styles/private/ControlsStyleConfig.qml

@@ -33,6 +33,43 @@ QtObject {
     readonly property string themeName: themeConfig.themeName
 
     onThemeNameChanged: console.log("Theme successfully updated to " + themeName)
+
+    // ({ }) is QML notation for assigning JS object to a var property
+    // Automagically updated when themeConfig is updated
+    property var button :
+        ({
+             backgroundColor: themeConfig.button.background,
+             text: {
+                 color: themeConfig.button.text,
+                 font: {
+                     pointSize: 24,
+                     weight: 25 //Font.Light
+                 }
+             },
+             pressedGradient: {
+                 width: 240,
+                 height: 240,
+                 center: 0.29,
+                 edge: 0.5,
+                 centerColor: themeConfig.button.pressedGradient.centerColor,
+                 edgeColor: themeConfig.button.pressedGradient.edgeColor
+             }
+         })
+
+    // Only holds special styling for the primary button, the rest is in button
+    property var primaryButton:
+        ({
+             backgroundColor: themeConfig.primaryButton.background,
+             text: {
+                 font: {
+                     weight: 63 //Font.DemiBold
+                 }
+             },
+             pressedGradient: {
+                 centerColor: themeConfig.primaryButton.pressedGradient.centerColor,
+                 edgeColor: themeConfig.primaryButton.pressedGradient.edgeColor
+             }
+         })
 }
 
 

src/styles/styles.pro

@@ -57,7 +57,8 @@ QML_FILES += \
     images/arrow-left.png \
     images/arrow-left@2x.png \
     images/arrow-right.png \
-    images/arrow-right@2x.png
+    images/arrow-right@2x.png \
+    images/disabled-overlay.png
 
 OTHER_FILES += qmldir \
     themes/Theme1.js \

src/styles/themes/Theme1.js

@@ -23,3 +23,22 @@ var themeName = "Glacier"
 var accentColor = "#0091e5"
 
 var fillColor = "#474747"
+
+// BUTTON STYLING
+var button = {
+    background: fillColor,
+    text: "white",
+    pressedGradient: {
+        centerColor: accentColor,
+        edgeColor: "transparent"
+    }
+}
+
+// PRIMARY BUTTON STYLING
+var primaryButton = {
+    background: accentColor,
+    pressedGradient: {
+        centerColor: "white",
+        edgeColor: accentColor
+    }
+}

src/styles/themes/Theme2.js

@@ -23,3 +23,22 @@ var themeName = "Ugly Test Theme"
 var accentColor = "#FF7F00"
 
 var fillColor = "#474747"
+
+// BUTTON STYLING
+var button = {
+    background: fillColor,
+    text: "blue",
+    pressedGradient: {
+        centerColor: accentColor,
+        edgeColor: "transparent"
+    }
+}
+
+// PRIMARY BUTTON STYLING
+var primaryButton = {
+    background: accentColor,
+    pressedGradient: {
+        centerColor: "white",
+        edgeColor: accentColor
+    }
+}