diff --git a/interface/resources/qml/controls-uit/Button.qml b/interface/resources/qml/controls-uit/Button.qml new file mode 100644 index 0000000000..9c7aee722b --- /dev/null +++ b/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 + } + } +} diff --git a/interface/resources/qml/hifi/dialogs/RunningScripts.qml b/interface/resources/qml/hifi/dialogs/RunningScripts.qml index de0f179fe3..ed7542c021 100644 --- a/interface/resources/qml/hifi/dialogs/RunningScripts.qml +++ b/interface/resources/qml/hifi/dialogs/RunningScripts.qml @@ -88,8 +88,16 @@ Window { Row { id: allButtons spacing: 8 - Button { text: "Reload all"; onClicked: reloadAll() } - Button { text: "Stop all"; onClicked: stopAll() } + HifiControls.Button { + 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 { - text: "from URL"; - onClicked: fromUrlTimer.running = true; + HifiControls.Button { + text: "from URL" + 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) } diff --git a/interface/resources/qml/styles-uit/HifiConstants.qml b/interface/resources/qml/styles-uit/HifiConstants.qml index c5634af7ad..9b81880332 100644 --- a/interface/resources/qml/styles-uit/HifiConstants.qml +++ b/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 button: dimensions.largeScreen? 15 : 10 + readonly property real buttonLabel: dimensions.largeScreen? 12 : 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