From a7353367b7d29eacc70ea960409e8eb682fe4e9c Mon Sep 17 00:00:00 2001 From: Gatis Paeglis Date: Thu, 10 Apr 2014 15:18:26 +0200 Subject: Update enterprise controls demos to version 1.1 Task-number: QTEE-482 Change-Id: I79f665de133cbe1c77962a8d93acdddd2e05fcc1 Reviewed-by: Samuli Piippo --- .../enterprise-dashboard/DashboardGaugeStyle.qml | 2 +- basicsuite/enterprise-dashboard/IconGaugeStyle.qml | 2 +- .../enterprise-dashboard/TachometerStyle.qml | 2 +- basicsuite/enterprise-dashboard/TurnIndicator.qml | 2 +- .../enterprise-dashboard/fonts/DejaVuSans.ttf | Bin 0 -> 720856 bytes basicsuite/enterprise-dashboard/main.qml | 4 +- .../enterprise-gallery/CircularGaugeDarkStyle.qml | 2 +- .../CircularGaugeDefaultStyle.qml | 2 +- .../enterprise-gallery/CircularGaugeLightStyle.qml | 2 +- .../enterprise-gallery/CircularGaugeView.qml | 12 +- basicsuite/enterprise-gallery/ControlLabel.qml | 28 ++++ .../enterprise-gallery/ControlViewToolbar.qml | 1 - .../enterprise-gallery/CustomizerCheckBox.qml | 45 ------ basicsuite/enterprise-gallery/CustomizerLabel.qml | 2 +- basicsuite/enterprise-gallery/CustomizerSwitch.qml | 26 +++ .../enterprise-gallery/PieMenuControlView.qml | 31 +--- basicsuite/enterprise-gallery/PieMenuDarkStyle.qml | 2 +- .../enterprise-gallery/PieMenuDefaultStyle.qml | 2 +- basicsuite/enterprise-gallery/StylePicker.qml | 4 +- basicsuite/enterprise-gallery/main.qml | 178 ++++++++++++++++----- basicsuite/enterprise-gallery/preview_l.jpg | Bin 9016 -> 9525 bytes 21 files changed, 216 insertions(+), 133 deletions(-) create mode 100644 basicsuite/enterprise-dashboard/fonts/DejaVuSans.ttf create mode 100644 basicsuite/enterprise-gallery/ControlLabel.qml delete mode 100644 basicsuite/enterprise-gallery/CustomizerCheckBox.qml create mode 100644 basicsuite/enterprise-gallery/CustomizerSwitch.qml diff --git a/basicsuite/enterprise-dashboard/DashboardGaugeStyle.qml b/basicsuite/enterprise-dashboard/DashboardGaugeStyle.qml index 7958fca..632b63b 100644 --- a/basicsuite/enterprise-dashboard/DashboardGaugeStyle.qml +++ b/basicsuite/enterprise-dashboard/DashboardGaugeStyle.qml @@ -19,7 +19,7 @@ ****************************************************************************/ import QtQuick 2.0 -import QtQuick.Enterprise.Controls.Styles 1.0 +import QtQuick.Enterprise.Controls.Styles 1.1 CircularGaugeStyle { tickmarkInset: toPixels(0.04) diff --git a/basicsuite/enterprise-dashboard/IconGaugeStyle.qml b/basicsuite/enterprise-dashboard/IconGaugeStyle.qml index 0b24351..a04d0e9 100644 --- a/basicsuite/enterprise-dashboard/IconGaugeStyle.qml +++ b/basicsuite/enterprise-dashboard/IconGaugeStyle.qml @@ -19,7 +19,7 @@ ****************************************************************************/ import QtQuick 2.0 -import QtQuick.Enterprise.Controls.Styles 1.0 +import QtQuick.Enterprise.Controls.Styles 1.1 DashboardGaugeStyle { id: fuelGaugeStyle diff --git a/basicsuite/enterprise-dashboard/TachometerStyle.qml b/basicsuite/enterprise-dashboard/TachometerStyle.qml index c4649da..15a2601 100644 --- a/basicsuite/enterprise-dashboard/TachometerStyle.qml +++ b/basicsuite/enterprise-dashboard/TachometerStyle.qml @@ -19,7 +19,7 @@ ****************************************************************************/ import QtQuick 2.0 -import QtQuick.Enterprise.Controls.Styles 1.0 +import QtQuick.Enterprise.Controls.Styles 1.1 DashboardGaugeStyle { id: tachometerStyle diff --git a/basicsuite/enterprise-dashboard/TurnIndicator.qml b/basicsuite/enterprise-dashboard/TurnIndicator.qml index 9dd7d5f..22d0ea9 100644 --- a/basicsuite/enterprise-dashboard/TurnIndicator.qml +++ b/basicsuite/enterprise-dashboard/TurnIndicator.qml @@ -19,7 +19,7 @@ ****************************************************************************/ import QtQuick 2.0 -import QtQuick.Enterprise.Controls.Styles 1.0 +import QtQuick.Enterprise.Controls.Styles 1.1 Item { // This enum is actually keyboard-related, but it serves its purpose diff --git a/basicsuite/enterprise-dashboard/fonts/DejaVuSans.ttf b/basicsuite/enterprise-dashboard/fonts/DejaVuSans.ttf new file mode 100644 index 0000000..19ed0b4 Binary files /dev/null and b/basicsuite/enterprise-dashboard/fonts/DejaVuSans.ttf differ diff --git a/basicsuite/enterprise-dashboard/main.qml b/basicsuite/enterprise-dashboard/main.qml index da5f296..7f8ee75 100644 --- a/basicsuite/enterprise-dashboard/main.qml +++ b/basicsuite/enterprise-dashboard/main.qml @@ -22,8 +22,8 @@ import QtQuick 2.0 import QtQuick.Window 2.1 import QtQuick.Controls 1.0 import QtQuick.Controls.Styles 1.0 -import QtQuick.Enterprise.Controls 1.0 -import QtQuick.Enterprise.Controls.Styles 1.0 +import QtQuick.Enterprise.Controls 1.1 +import QtQuick.Enterprise.Controls.Styles 1.1 Rectangle { id: root diff --git a/basicsuite/enterprise-gallery/CircularGaugeDarkStyle.qml b/basicsuite/enterprise-gallery/CircularGaugeDarkStyle.qml index fb85f86..0de1180 100644 --- a/basicsuite/enterprise-gallery/CircularGaugeDarkStyle.qml +++ b/basicsuite/enterprise-gallery/CircularGaugeDarkStyle.qml @@ -19,7 +19,7 @@ ****************************************************************************/ import QtQuick 2.0 -import QtQuick.Enterprise.Controls.Styles 1.0 +import QtQuick.Enterprise.Controls.Styles 1.1 CircularGaugeStyle { id: root diff --git a/basicsuite/enterprise-gallery/CircularGaugeDefaultStyle.qml b/basicsuite/enterprise-gallery/CircularGaugeDefaultStyle.qml index 7aec7b6..23b25c4 100644 --- a/basicsuite/enterprise-gallery/CircularGaugeDefaultStyle.qml +++ b/basicsuite/enterprise-gallery/CircularGaugeDefaultStyle.qml @@ -19,7 +19,7 @@ ****************************************************************************/ import QtQuick 2.0 -import QtQuick.Enterprise.Controls.Styles 1.0 +import QtQuick.Enterprise.Controls.Styles 1.1 CircularGaugeStyle { labelStepSize: 20 diff --git a/basicsuite/enterprise-gallery/CircularGaugeLightStyle.qml b/basicsuite/enterprise-gallery/CircularGaugeLightStyle.qml index 7d00c1f..87afa7d 100644 --- a/basicsuite/enterprise-gallery/CircularGaugeLightStyle.qml +++ b/basicsuite/enterprise-gallery/CircularGaugeLightStyle.qml @@ -19,7 +19,7 @@ ****************************************************************************/ import QtQuick 2.0 -import QtQuick.Enterprise.Controls.Styles 1.0 +import QtQuick.Enterprise.Controls.Styles 1.1 CircularGaugeStyle { id: root diff --git a/basicsuite/enterprise-gallery/CircularGaugeView.qml b/basicsuite/enterprise-gallery/CircularGaugeView.qml index 92ee6c5..a24b980 100644 --- a/basicsuite/enterprise-gallery/CircularGaugeView.qml +++ b/basicsuite/enterprise-gallery/CircularGaugeView.qml @@ -20,7 +20,7 @@ import QtQuick 2.0 import QtQuick.Controls 1.0 -import QtQuick.Enterprise.Controls 1.0 +import QtQuick.Enterprise.Controls 1.1 ControlView { id: controlView @@ -66,8 +66,8 @@ ControlView { id: gauge minimumValue: customizerItem.minimumValue maximumValue: customizerItem.maximumValue - width: root.toPixels(0.65) - height: width + width: controlBounds.width + height: controlBounds.height value: accelerating ? maximumValue : 0 style: styleMap[customizerItem.currentStylePath] @@ -174,7 +174,7 @@ ControlView { minimumValue: 0 value: 0 maximumValue: 360 - stepSize: labelStepSizeSlider.stepSize + stepSize: 1 } CustomizerLabel { @@ -184,9 +184,9 @@ ControlView { CustomizerSlider { id: maximumValueSlider minimumValue: 0 - value: 220 + value: 240 maximumValue: 300 - stepSize: labelStepSizeSlider.stepSize + stepSize: 1 } CustomizerLabel { diff --git a/basicsuite/enterprise-gallery/ControlLabel.qml b/basicsuite/enterprise-gallery/ControlLabel.qml new file mode 100644 index 0000000..0335342 --- /dev/null +++ b/basicsuite/enterprise-gallery/ControlLabel.qml @@ -0,0 +1,28 @@ +/**************************************************************************** +** +** Copyright (C) 2014 Digia Plc +** All rights reserved. +** For any questions to Digia, please use contact form at http://qt.digia.com +** +** This file is part of the QtQuick Enterprise Controls Add-on. +** +** $QT_BEGIN_LICENSE$ +** Licensees holding valid Qt Commercial licenses may use this file in +** accordance with the Qt Commercial License Agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and Digia. +** +** If you have questions regarding the use of this file, please use +** contact form at http://qt.digia.com +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 + +Text { + font.pixelSize: Math.min(32, root.toPixels(0.045)) + color: "#4e4e4e" + styleColor: "#ffffff" + style: Text.Raised +} diff --git a/basicsuite/enterprise-gallery/ControlViewToolbar.qml b/basicsuite/enterprise-gallery/ControlViewToolbar.qml index 5aac041..f3dd07b 100644 --- a/basicsuite/enterprise-gallery/ControlViewToolbar.qml +++ b/basicsuite/enterprise-gallery/ControlViewToolbar.qml @@ -76,7 +76,6 @@ BlackButtonBackground { Image { source: "images/icon-settings.png" anchors.centerIn: parent - scale: -1 } } } diff --git a/basicsuite/enterprise-gallery/CustomizerCheckBox.qml b/basicsuite/enterprise-gallery/CustomizerCheckBox.qml deleted file mode 100644 index 542e09a..0000000 --- a/basicsuite/enterprise-gallery/CustomizerCheckBox.qml +++ /dev/null @@ -1,45 +0,0 @@ -/**************************************************************************** -** -** Copyright (C) 2014 Digia Plc -** All rights reserved. -** For any questions to Digia, please use contact form at http://qt.digia.com -** -** This file is part of the QtQuick Enterprise Controls Add-on. -** -** $QT_BEGIN_LICENSE$ -** Licensees holding valid Qt Commercial licenses may use this file in -** accordance with the Qt Commercial License Agreement provided with the -** Software or, alternatively, in accordance with the terms contained in -** a written agreement between you and Digia. -** -** If you have questions regarding the use of this file, please use -** contact form at http://qt.digia.com -** $QT_END_LICENSE$ -** -****************************************************************************/ - -import QtQuick 2.0 -import QtQuick.Controls 1.0 -import QtQuick.Controls.Styles 1.0 - -CheckBox { - id: checkBox - anchors.horizontalCenter: parent.horizontalCenter - width: root.width * 0.04 - height: width - - style: CheckBoxStyle { - indicator: Rectangle { - color: "#666" - height: control.height - width: height - - Rectangle { - anchors.fill: parent - anchors.margins: Math.round(checkBox.width * 0.1) - color: "#111" - visible: control.checked - } - } - } -} diff --git a/basicsuite/enterprise-gallery/CustomizerLabel.qml b/basicsuite/enterprise-gallery/CustomizerLabel.qml index c4cb69c..c85807c 100644 --- a/basicsuite/enterprise-gallery/CustomizerLabel.qml +++ b/basicsuite/enterprise-gallery/CustomizerLabel.qml @@ -21,7 +21,7 @@ import QtQuick 2.0 Text { - color: fontColor + color: darkBackground ? root.darkFontColor : root.lightFontColor font.pixelSize: root.toPixels(0.04) font.family: openSans.name anchors.horizontalCenter: parent.horizontalCenter diff --git a/basicsuite/enterprise-gallery/CustomizerSwitch.qml b/basicsuite/enterprise-gallery/CustomizerSwitch.qml new file mode 100644 index 0000000..3048aae --- /dev/null +++ b/basicsuite/enterprise-gallery/CustomizerSwitch.qml @@ -0,0 +1,26 @@ +/**************************************************************************** +** +** Copyright (C) 2014 Digia Plc +** All rights reserved. +** For any questions to Digia, please use contact form at http://qt.digia.com +** +** This file is part of the QtQuick Enterprise Controls Add-on. +** +** $QT_BEGIN_LICENSE$ +** Licensees holding valid Qt Commercial licenses may use this file in +** accordance with the Qt Commercial License Agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and Digia. +** +** If you have questions regarding the use of this file, please use +** contact form at http://qt.digia.com +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 +import QtQuick.Controls 1.1 + +Switch { + anchors.horizontalCenter: parent.horizontalCenter +} diff --git a/basicsuite/enterprise-gallery/PieMenuControlView.qml b/basicsuite/enterprise-gallery/PieMenuControlView.qml index cba341b..2c06176 100644 --- a/basicsuite/enterprise-gallery/PieMenuControlView.qml +++ b/basicsuite/enterprise-gallery/PieMenuControlView.qml @@ -21,7 +21,7 @@ import QtQuick 2.0 import QtGraphicalEffects 1.0 import QtQuick.Controls 1.0 -import QtQuick.Enterprise.Controls 1.0 +import QtQuick.Enterprise.Controls 1.1 Rectangle { id: view @@ -94,34 +94,7 @@ Rectangle { anchors.fill: parent onClicked: { - pieMenu.popup(touchArea.mouseX, touchArea.mouseY) - } - } - - Item { - width: labelText.width - height: labelText.height - anchors.bottom: pieMenu.top - anchors.bottomMargin: 10 - anchors.horizontalCenter: pieMenu.horizontalCenter - visible: pieMenu.visible - - Item { - id: labelBlurGuard - anchors.centerIn: parent - width: labelText.implicitWidth * 2 - height: labelText.implicitHeight * 2 - - Text { - id: labelText - font.pointSize: 20 - text: pieMenu.currentIndex !== -1 ? pieMenu.menuItems[pieMenu.currentIndex].text : "" - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - anchors.centerIn: parent - color: "#ccc" - antialiasing: true - } + pieMenu.popup(touchArea.mouseX, touchArea.mouseY); } } diff --git a/basicsuite/enterprise-gallery/PieMenuDarkStyle.qml b/basicsuite/enterprise-gallery/PieMenuDarkStyle.qml index 354775d..ab03701 100644 --- a/basicsuite/enterprise-gallery/PieMenuDarkStyle.qml +++ b/basicsuite/enterprise-gallery/PieMenuDarkStyle.qml @@ -18,7 +18,7 @@ ** ****************************************************************************/ -import QtQuick.Enterprise.Controls.Styles 1.0 +import QtQuick.Enterprise.Controls.Styles 1.1 PieMenuStyle { backgroundColor: "#222" diff --git a/basicsuite/enterprise-gallery/PieMenuDefaultStyle.qml b/basicsuite/enterprise-gallery/PieMenuDefaultStyle.qml index 1ad8480..4b0edb1 100644 --- a/basicsuite/enterprise-gallery/PieMenuDefaultStyle.qml +++ b/basicsuite/enterprise-gallery/PieMenuDefaultStyle.qml @@ -18,7 +18,7 @@ ** ****************************************************************************/ -import QtQuick.Enterprise.Controls.Styles 1.0 +import QtQuick.Enterprise.Controls.Styles 1.1 PieMenuStyle { } diff --git a/basicsuite/enterprise-gallery/StylePicker.qml b/basicsuite/enterprise-gallery/StylePicker.qml index 48c1298..f4e097e 100644 --- a/basicsuite/enterprise-gallery/StylePicker.qml +++ b/basicsuite/enterprise-gallery/StylePicker.qml @@ -21,8 +21,8 @@ import QtQuick 2.0 import QtQuick.Controls 1.0 import QtQuick.Controls.Styles 1.0 -import QtQuick.Enterprise.Controls 1.0 -import QtQuick.Enterprise.Controls.Styles 1.0 +import QtQuick.Enterprise.Controls 1.1 +import QtQuick.Enterprise.Controls.Styles 1.1 ListView { id: stylePicker diff --git a/basicsuite/enterprise-gallery/main.qml b/basicsuite/enterprise-gallery/main.qml index f1f2e17..de60f47 100644 --- a/basicsuite/enterprise-gallery/main.qml +++ b/basicsuite/enterprise-gallery/main.qml @@ -24,12 +24,14 @@ import QtQuick.Controls 1.0 import QtQuick.Controls.Styles 1.0 import QtQuick.Controls.Private 1.0 import QtQuick.Dialogs 1.0 -import QtQuick.Enterprise.Controls 1.0 -import QtQuick.Enterprise.Controls.Styles 1.0 +import QtQuick.Enterprise.Controls 1.1 +import QtQuick.Enterprise.Controls.Styles 1.1 +import QtQuick.Layouts 1.0 import QtQuick.Window 2.1 Rectangle { id: root + objectName: "window" visible: true width: 480 height: 800 @@ -42,8 +44,9 @@ Rectangle { } property bool isScreenPortrait: height > width - property color fontColor: "white" - readonly property color lightBackgroundColor: "#ccc" + property color lightFontColor: "#222" + property color darkFontColor: "#e7e7e7" + readonly property color lightBackgroundColor: "#cccccc" readonly property color darkBackgroundColor: "#161616" property real customizerPropertySpacing: 10 property real colorPickerRowSpacing: 8 @@ -53,34 +56,69 @@ Rectangle { property Component dial: ControlView { darkBackground: false - control: Dial { - id: dial - width: root.toPixels(0.3) - height: width + control: Column { + id: dialColumn + width: controlBounds.width + height: controlBounds.height - spacing + spacing: root.toPixels(0.05) + + Column { + id: volumeColumn + width: parent.width + height: (dialColumn.height - dialColumn.spacing) / 2 + spacing: height * 0.025 + + Dial { + id: volumeDial + width: parent.width + height: volumeColumn.height - volumeText.height - volumeColumn.spacing + + /*! + Determines whether the dial animates its rotation to the new value when + a single click or touch is received on the dial. + */ + property bool animate: customizerItem.animate + + Behavior on value { + enabled: volumeDial.animate && !volumeDial.pressed + NumberAnimation { + duration: 300 + easing.type: Easing.OutSine + } + } + } - /*! - Determines whether the dial animates its rotation to the new value when - a single click or touch is received on the dial. - */ - property bool animate: customizerItem.animate - - Behavior on value { - enabled: dial.animate && !dial.pressed - NumberAnimation { - duration: 300 - easing.type: Easing.OutSine + ControlLabel { + id: volumeText + text: "Volume" + anchors.horizontalCenter: parent.horizontalCenter } } - Text { - text: "Volume" - anchors.horizontalCenter: parent.horizontalCenter - anchors.top: dial.bottom - anchors.topMargin: 10 - font.pixelSize: root.toPixels(0.045) - color: "#4e4e4e" - styleColor: "#ffffff" - style: Text.Raised + Column { + id: trebleColumn + width: parent.width + height: (dialColumn.height - dialColumn.spacing) / 2 + spacing: height * 0.025 + + Dial { + id: dial2 + width: parent.width + height: trebleColumn.height - trebleText.height - trebleColumn.spacing + + stepSize: 1 + maximumValue: 10 + + style: DialStyle { + labelInset: outerRadius * 0 + } + } + + ControlLabel { + id: trebleText + text: "Treble" + anchors.horizontalCenter: parent.horizontalCenter + } } } @@ -91,10 +129,9 @@ Rectangle { CustomizerLabel { text: "Animate" - color: "black" } - CustomizerCheckBox { + CustomizerSwitch { id: animateCheckBox } } @@ -115,8 +152,8 @@ Rectangle { id: gaugeView control: Gauge { id: gauge - width: orientation === Qt.Vertical ? root.toPixels(0.15) : gaugeView.controlBounds.width * 0.65 - height: orientation === Qt.Vertical ? root.toPixels(0.65) : gaugeView.controlBounds.height * 0.15 + width: orientation === Qt.Vertical ? gaugeView.controlBounds.height * 0.3 : gaugeView.controlBounds.width + height: orientation === Qt.Vertical ? gaugeView.controlBounds.height : gaugeView.controlBounds.height * 0.3 anchors.centerIn: parent minimumValue: 0 @@ -150,7 +187,7 @@ Rectangle { text: "Vertical orientation" } - CustomizerCheckBox { + CustomizerSwitch { id: orientationCheckBox checked: true } @@ -159,7 +196,7 @@ Rectangle { text: controlItem.orientation === Qt.Vertical ? "Left align" : "Top align" } - CustomizerCheckBox { + CustomizerSwitch { id: alignCheckBox checked: true } @@ -179,6 +216,67 @@ Rectangle { property Component pieMenu: PieMenuControlView {} + property Component statusIndicator: ControlView { + id: statusIndicatorView + darkBackground: false + + Timer { + id: recordingFlashTimer + running: true + repeat: true + interval: 1000 + } + + ColumnLayout { + id: indicatorLayout + width: statusIndicatorView.controlBounds.width * 0.25 + height: statusIndicatorView.controlBounds.height * 0.75 + anchors.centerIn: parent + + Repeater { + model: ListModel { + id: indicatorModel + ListElement { + name: "Power" + indicatorColor: "green" + } + ListElement { + name: "Recording" + indicatorColor: "red" + } + } + + ColumnLayout { + Layout.preferredWidth: indicatorLayout.width +// Layout.preferredHeight: indicatorLayout.height * 0.25 + spacing: 0 + + StatusIndicator { + id: indicator + color: indicatorColor + Layout.preferredWidth: statusIndicatorView.controlBounds.width * 0.07 + Layout.preferredHeight: Layout.preferredWidth + Layout.alignment: Qt.AlignHCenter + on: true + + Connections { + target: recordingFlashTimer + onTriggered: if (name == "Recording") indicator.on = !indicator.on + } + } + ControlLabel { + id: indicatorLabel + text: name +// elide: Text.ElideRight + Layout.alignment: Qt.AlignHCenter + Layout.maximumWidth: parent.width + horizontalAlignment: Text.AlignHCenter + } + } + } + } + } + FontLoader { id: openSans Component.onCompleted: { @@ -196,6 +294,7 @@ Rectangle { "Dial": dial, "Gauge": gauge, "PieMenu": pieMenu, + "StatusIndicator": statusIndicator, "ToggleButton": toggleButton } @@ -217,9 +316,12 @@ Rectangle { ListElement { title: "Gauge" } - //ListElement { - // title: "PieMenu" - //} +// ListElement { +// title: "PieMenu" +// } + ListElement { + title: "StatusIndicator" + } ListElement { title: "ToggleButton" } @@ -238,7 +340,7 @@ Rectangle { } style: BlackButtonStyle { - fontColor: root.fontColor + fontColor: root.darkFontColor } onClicked: { diff --git a/basicsuite/enterprise-gallery/preview_l.jpg b/basicsuite/enterprise-gallery/preview_l.jpg index 8ddcad8..644bac5 100644 Binary files a/basicsuite/enterprise-gallery/preview_l.jpg and b/basicsuite/enterprise-gallery/preview_l.jpg differ -- cgit v1.2.3