Style Button controls

interface/resources/qml/controls-uit/Button.qml

@@ -0,0 +1,54 @@
+//
+//  Button.qml
+//
+//  Created by David Rowe on 16 Feb 2016
+//  Copyright 2016 High Fidelity, Inc.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+//
+
+import QtQuick 2.5
+import QtQuick.Controls 1.4 as Original
+import QtQuick.Controls.Styles 1.4
+
+import "../styles-uit"
+
+Original.Button {
+    id: button
+    property int color: 0
+    width: 120
+    height: 30
+
+    style: ButtonStyle {
+
+        background: Rectangle {
+            radius: hifi.buttons.radius
+            gradient: Gradient {
+                GradientStop {
+                    position: 0.2
+                    color: enabled
+                           ? (!pressed && button.color != hifi.buttons.black || (!hovered || pressed) && button.color == hifi.buttons.black
+                              ? hifi.buttons.colorStart[button.color] : hifi.buttons.colorFinish[button.color])
+                           : hifi.buttons.colorStart[hifi.buttons.white]
+                }
+                GradientStop {
+                    position: 1.0
+                    color: enabled
+                           ? ((!hovered || pressed) && button.color != hifi.buttons.black || !pressed && button.color == hifi.buttons.black
+                              ? hifi.buttons.colorFinish[button.color] : hifi.buttons.colorStart[button.color])
+                           : hifi.buttons.colorFinish[hifi.buttons.white]
+                }
+            }
+        }
+
+        label: RalewayBold {
+            font.capitalization: Font.AllUppercase
+            color: enabled ? hifi.buttons.textColor[button.color] : hifi.colors.lightGrayText
+            size: hifi.fontSizes.buttonLabel
+            verticalAlignment: Text.AlignVCenter
+            horizontalAlignment: Text.AlignHCenter
+            text: control.text
+        }
+    }
+}

interface/resources/qml/hifi/dialogs/RunningScripts.qml

@@ -88,8 +88,16 @@ Window {
             Row {
                 id: allButtons
                 spacing: 8
-                Button { text: "Reload all"; onClicked: reloadAll() }
+                HifiControls.Button {
-                Button { text: "Stop all"; onClicked: stopAll() }
+                    text: "Reload all"
+                    color: hifi.buttons.black
+                    onClicked: reloadAll()
+                }
+                HifiControls.Button {
+                    text: "Stop all"
+                    color: hifi.buttons.red
+                    onClicked: stopAll()
+                }
             }
 
             ScrollView {
@@ -163,12 +171,14 @@ Window {
             hasSeparator: true
 
             Row {
-                id: row1
                 spacing: 8
+                anchors.right: parent.right
 
-                Button {
+                HifiControls.Button {
-                    text: "from URL";
+                    text: "from URL"
-                    onClicked: fromUrlTimer.running = true;
+                    color: hifi.buttons.black
+                    height: 26
+                    onClicked: fromUrlTimer.running = true
 
                     // For some reason trigginer an API that enters
                     // an internal event loop directly from the button clicked
@@ -186,9 +196,11 @@ Window {
                     }
                 }
 
-                Button {
+                HifiControls.Button {
                     text: "from Disk"
-                    onClicked: fromDiskTimer.running = true;
+                    color: hifi.buttons.black
+                    height: 26
+                    onClicked: fromDiskTimer.running = true
 
                     Timer {
                         id: fromDiskTimer
@@ -265,9 +277,10 @@ Window {
                 }
             }
 
-            Button {
+            HifiControls.Button {
                 id: loadButton
                 text: "Load"
+                color: hifi.buttons.blue
                 enabled: selectedScript.text != ""
                 onClicked: root.loadScript(selectedScript.text)
             }

interface/resources/qml/styles-uit/HifiConstants.qml

@@ -15,6 +15,7 @@ Item {
     readonly property alias colors: colors
     readonly property alias dimensions: dimensions
     readonly property alias fontSizes: fontSizes
+    readonly property alias buttons: buttons
     readonly property alias effects: effects
 
     Item {
@@ -61,8 +62,8 @@ Item {
         readonly property real sectionName: dimensions.largeScreen? 11 : 9
         readonly property real inputLabel: dimensions.largeScreen? 11 : 9
         readonly property real textFieldInput: dimensions.largeScreen? 16 : 11
-        readonly property real buttonLabel: dimensions.largeScreen? 15 : 10
+        readonly property real buttonLabel: dimensions.largeScreen? 12 : 10
-        readonly property real button: dimensions.largeScreen? 15 : 10
+        readonly property real button: dimensions.largeScreen? 12 : 10
         readonly property real listItem: dimensions.largeScreen? 11 : 9
         readonly property real tabularData: dimensions.largeScreen? 11 : 9
         readonly property real logo: dimensions.largeScreen? 15 : 10
@@ -72,6 +73,18 @@ Item {
         readonly property real shortcutText: dimensions.largeScreen? 12 : 8
     }
 
+    Item {
+        id: buttons
+        readonly property int white: 0
+        readonly property int blue: 1
+        readonly property int red: 2
+        readonly property int black: 3
+        readonly property var textColor: [ colors.darkGray, colors.white, colors.white, colors.white ]
+        readonly property var colorStart: [ "#ffffff", "#00b4ef", "#d42043", "#343434" ]
+        readonly property var colorFinish: [ "#afafaf", "#1080b8", "#94132e", "#000000" ]
+        readonly property int radius: 5
+    }
+
     /*
     SystemPalette { id: sysPalette; colorGroup: SystemPalette.Active }
     readonly property alias colors: colors