summaryrefslogtreecommitdiff
path: root/examples/quickcontrols/extras/flat/main.qml
diff options
context:
space:
mode:
authorLiang Qi <liang.qi@qt.io>2016-05-10 21:11:23 +0200
committerLiang Qi <liang.qi@qt.io>2016-05-10 21:11:23 +0200
commitc6713e212ef0b97c45d6466b73220567e94a05f1 (patch)
tree8774d26bf05f2087c510d16da42bfd0dc59a54b1 /examples/quickcontrols/extras/flat/main.qml
parentce97d9c8ef4e6f8cb2166065b6732cad3cccf604 (diff)
parent0e00f9fa1cbdbdd2128f2ca31172d88f701ecb59 (diff)
downloadqtquickcontrols-c6713e212ef0b97c45d6466b73220567e94a05f1.tar.gz
Merge remote-tracking branch 'origin/5.6' into 5.7
Conflicts: examples/quickcontrols/extras/flat/main.cpp src/controls/Private/qquickcontrolsettings.cpp Change-Id: I9eb9342a2ee994611f3cb18daab6dd89eb924ccc
Diffstat (limited to 'examples/quickcontrols/extras/flat/main.qml')
-rw-r--r--examples/quickcontrols/extras/flat/main.qml489
1 files changed, 489 insertions, 0 deletions
diff --git a/examples/quickcontrols/extras/flat/main.qml b/examples/quickcontrols/extras/flat/main.qml
new file mode 100644
index 00000000..d91c2063
--- /dev/null
+++ b/examples/quickcontrols/extras/flat/main.qml
@@ -0,0 +1,489 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** BSD License Usage
+** Alternatively, you may use this file under the terms of the BSD license
+** as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+** * Redistributions of source code must retain the above copyright
+** notice, this list of conditions and the following disclaimer.
+** * Redistributions in binary form must reproduce the above copyright
+** notice, this list of conditions and the following disclaimer in
+** the documentation and/or other materials provided with the
+** distribution.
+** * Neither the name of The Qt Company Ltd nor the names of its
+** contributors may be used to endorse or promote products derived
+** from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.4
+import QtQuick.Layouts 1.0
+import QtQuick.Controls 1.4
+import QtQuick.Controls.Styles.Flat 1.0 as Flat
+import QtQuick.Extras 1.4
+import QtQuick.Extras.Private 1.0
+
+ApplicationWindow {
+ id: window
+ width: 480
+ height: 860
+ title: "Flat Example"
+ visible: true
+
+ readonly property bool contentLoaded: contentLoader.item
+ readonly property alias anchorItem: controlsMenu
+ property int currentMenu: -1
+ readonly property int textMargins: Math.round(32 * Flat.FlatStyle.scaleFactor)
+ readonly property int menuMargins: Math.round(13 * Flat.FlatStyle.scaleFactor)
+ readonly property int menuWidth: Math.min(window.width, window.height) * 0.75
+
+ onCurrentMenuChanged: {
+ xBehavior.enabled = true;
+ anchorCurrentMenu();
+ }
+
+ onMenuWidthChanged: anchorCurrentMenu()
+
+ function anchorCurrentMenu() {
+ switch (currentMenu) {
+ case -1:
+ anchorItem.x = -menuWidth;
+ break;
+ case 0:
+ anchorItem.x = 0;
+ break;
+ case 1:
+ anchorItem.x = -menuWidth * 2;
+ break;
+ }
+ }
+
+ Item {
+ id: container
+ anchors.fill: parent
+
+ Item {
+ id: loadingScreen
+ anchors.fill: parent
+ visible: !contentLoaded
+
+ Timer {
+ running: true
+ interval: 100
+ // TODO: Find a way to know when the loading screen has been rendered instead
+ // of using an abritrary amount of time.
+ onTriggered: contentLoader.sourceComponent = Qt.createComponent("Content.qml")
+ }
+
+ Column {
+ anchors.centerIn: parent
+ spacing: Math.round(10 * Flat.FlatStyle.scaleFactor)
+
+ BusyIndicator {
+ anchors.horizontalCenter: parent.horizontalCenter
+ }
+
+ Label {
+ text: "Loading Light Flat UI..."
+ width: Math.min(loadingScreen.width, loadingScreen.height) * 0.8
+ height: font.pixelSize
+ anchors.horizontalCenter: parent.horizontalCenter
+ renderType: Text.QtRendering
+ font.pixelSize: Math.round(26 * Flat.FlatStyle.scaleFactor)
+ horizontalAlignment: Text.AlignHCenter
+ fontSizeMode: Text.Fit
+ font.family: Flat.FlatStyle.fontFamily
+ font.weight: Font.Light
+ }
+ }
+ }
+
+ Rectangle {
+ id: controlsMenu
+ x: container.x - width
+ z: contentContainer.z + 1
+ width: menuWidth
+ height: parent.height
+
+ // Don't let the menus become visible when resizing the window
+ Binding {
+ target: controlsMenu
+ property: "x"
+ value: container.x - controlsMenu.width
+ when: !xBehavior.enabled && !xNumberAnimation.running && currentMenu == -1
+ }
+
+ Behavior on x {
+ id: xBehavior
+ enabled: false
+ NumberAnimation {
+ id: xNumberAnimation
+ easing.type: Easing.OutExpo
+ duration: 500
+ onRunningChanged: xBehavior.enabled = false
+ }
+ }
+
+ Rectangle {
+ id: controlsTitleBar
+ width: parent.width
+ height: toolBar.height
+ color: Flat.FlatStyle.defaultTextColor
+
+ Label {
+ text: "Controls"
+ font.family: Flat.FlatStyle.fontFamily
+ font.pixelSize: Math.round(16 * Flat.FlatStyle.scaleFactor)
+ renderType: Text.QtRendering
+ color: "white"
+ anchors.left: parent.left
+ anchors.leftMargin: menuMargins
+ anchors.verticalCenter: parent.verticalCenter
+ }
+ }
+
+ ListView {
+ id: controlView
+ width: parent.width
+ anchors.top: controlsTitleBar.bottom
+ anchors.bottom: parent.bottom
+ clip: true
+ currentIndex: 0
+ model: contentLoaded ? contentLoader.item.componentModel : null
+ delegate: MouseArea {
+ id: delegateItem
+ width: parent.width
+ height: 64 * Flat.FlatStyle.scaleFactor
+ onClicked: {
+ if (controlView.currentIndex != index)
+ controlView.currentIndex = index;
+
+ currentMenu = -1;
+ }
+
+ Rectangle {
+ width: parent.width
+ height: Flat.FlatStyle.onePixel
+ anchors.bottom: parent.bottom
+ color: Flat.FlatStyle.lightFrameColor
+ }
+
+ Label {
+ text: delegateItem.ListView.view.model[index].name
+ font.pixelSize: Math.round(15 * Flat.FlatStyle.scaleFactor)
+ font.family: Flat.FlatStyle.fontFamily
+ renderType: Text.QtRendering
+ color: delegateItem.ListView.isCurrentItem ? Flat.FlatStyle.styleColor : Flat.FlatStyle.defaultTextColor
+ anchors.left: parent.left
+ anchors.leftMargin: menuMargins
+ anchors.verticalCenter: parent.verticalCenter
+ }
+ }
+
+ Rectangle {
+ width: parent.height
+ height: 8 * Flat.FlatStyle.scaleFactor
+ rotation: 90
+ anchors.left: parent.right
+ transformOrigin: Item.TopLeft
+
+ gradient: Gradient {
+ GradientStop {
+ color: Qt.rgba(0, 0, 0, 0.15)
+ position: 0
+ }
+ GradientStop {
+ color: Qt.rgba(0, 0, 0, 0.05)
+ position: 0.5
+ }
+ GradientStop {
+ color: Qt.rgba(0, 0, 0, 0)
+ position: 1
+ }
+ }
+ }
+ }
+ }
+
+ Item {
+ id: contentContainer
+ anchors.top: parent.top
+ anchors.bottom: parent.bottom
+ anchors.left: controlsMenu.right
+ width: parent.width
+
+ ToolBar {
+ id: toolBar
+ visible: !loadingScreen.visible
+ width: parent.width
+ height: 54 * Flat.FlatStyle.scaleFactor
+ z: contentLoader.z + 1
+ style: Flat.ToolBarStyle {
+ padding.left: 0
+ padding.right: 0
+ }
+
+ RowLayout {
+ anchors.fill: parent
+
+ MouseArea {
+ id: controlsButton
+ Layout.preferredWidth: toolBar.height + textMargins
+ Layout.preferredHeight: toolBar.height
+ onClicked: currentMenu = currentMenu == 0 ? -1 : 0
+
+ Column {
+ id: controlsIcon
+ anchors.left: parent.left
+ anchors.leftMargin: textMargins
+ anchors.verticalCenter: parent.verticalCenter
+ spacing: Math.round(2 * Flat.FlatStyle.scaleFactor)
+
+ Repeater {
+ model: 3
+
+ Rectangle {
+ width: Math.round(4 * Flat.FlatStyle.scaleFactor)
+ height: width
+ radius: width / 2
+ color: Flat.FlatStyle.defaultTextColor
+ }
+ }
+ }
+ }
+
+ Text {
+ text: "Light Flat UI Demo"
+ font.family: Flat.FlatStyle.fontFamily
+ font.pixelSize: Math.round(16 * Flat.FlatStyle.scaleFactor)
+ horizontalAlignment: Text.AlignHCenter
+ color: "#666666"
+ Layout.fillWidth: true
+ }
+
+ MouseArea {
+ id: settingsButton
+ Layout.preferredWidth: controlsButton.Layout.preferredWidth
+ Layout.preferredHeight: controlsButton.Layout.preferredHeight
+ onClicked: currentMenu = currentMenu == 1 ? -1 : 1
+
+ SettingsIcon {
+ width: Math.round(32 * Flat.FlatStyle.scaleFactor)
+ height: Math.round(32 * Flat.FlatStyle.scaleFactor)
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.right: parent.right
+ anchors.rightMargin: textMargins - Math.round(8 * Flat.FlatStyle.scaleFactor)
+ }
+ }
+ }
+ }
+
+ Loader {
+ id: contentLoader
+ anchors.left: parent.left
+ anchors.right: parent.right
+ anchors.top: toolBar.bottom
+ anchors.bottom: parent.bottom
+
+ property QtObject settingsData: QtObject {
+ readonly property bool checks: disableSingleItemsAction.checked
+ readonly property bool frames: !greyBackgroundAction.checked
+ readonly property bool allDisabled: disableAllAction.checked
+ }
+ property QtObject controlData: QtObject {
+ readonly property int componentIndex: controlView.currentIndex
+ readonly property int textMargins: window.textMargins
+ }
+
+ MouseArea {
+ enabled: currentMenu != -1
+ // We would be able to just set this to true here, if it weren't for QTBUG-43083.
+ hoverEnabled: enabled
+ anchors.fill: parent
+ preventStealing: true
+ onClicked: currentMenu = -1
+ focus: enabled
+ z: 1000
+ }
+ }
+ }
+
+ Rectangle {
+ id: settingsMenu
+ z: contentContainer.z + 1
+ width: menuWidth
+ height: parent.height
+ anchors.left: contentContainer.right
+
+ Rectangle {
+ id: optionsTitleBar
+ width: parent.width
+ height: toolBar.height
+ color: Flat.FlatStyle.defaultTextColor
+
+ Label {
+ text: "Options"
+ font.family: Flat.FlatStyle.fontFamily
+ font.pixelSize: Math.round(16 * Flat.FlatStyle.scaleFactor)
+ renderType: Text.QtRendering
+ color: "white"
+ anchors.left: parent.left
+ anchors.leftMargin: menuMargins
+ anchors.verticalCenter: parent.verticalCenter
+ }
+ }
+
+ Action {
+ id: disableAllAction
+ checkable: true
+ checked: false
+ }
+
+ Action {
+ id: disableSingleItemsAction
+ checkable: true
+ checked: false
+ }
+
+ Action {
+ id: greyBackgroundAction
+ checkable: true
+ checked: false
+ }
+
+ ListView {
+ id: optionsListView
+ width: parent.width
+ anchors.top: optionsTitleBar.bottom
+ anchors.bottom: parent.bottom
+ clip: true
+ interactive: delegateHeight * count > height
+
+ readonly property int delegateHeight: 64 * Flat.FlatStyle.scaleFactor
+
+ model: [
+ { name: "Disable all", action: disableAllAction },
+ { name: "Disable single items", action: disableSingleItemsAction },
+ { name: "Grey background", action: greyBackgroundAction },
+ { name: "Exit", action: null }
+ ]
+ delegate: Rectangle {
+ id: optionDelegateItem
+ width: parent.width
+ height: optionsListView.delegateHeight
+
+ Rectangle {
+ width: parent.width
+ height: Flat.FlatStyle.onePixel
+ anchors.bottom: parent.bottom
+ color: Flat.FlatStyle.lightFrameColor
+ }
+
+ Loader {
+ sourceComponent: optionText !== "Exit"
+ ? optionsListView.checkBoxComponent : optionsListView.exitComponent
+ anchors.fill: parent
+ anchors.leftMargin: menuMargins
+
+ property string optionText: optionsListView.model[index].name
+ property int optionIndex: index
+ }
+ }
+
+ property Component checkBoxComponent: Item {
+ Label {
+ text: optionText
+ font.family: Flat.FlatStyle.fontFamily
+ font.pixelSize: Math.round(15 * Flat.FlatStyle.scaleFactor)
+ fontSizeMode: Text.Fit
+ renderType: Text.QtRendering
+ verticalAlignment: Text.AlignVCenter
+ color: Flat.FlatStyle.defaultTextColor
+ height: parent.height
+ anchors.left: parent.left
+ anchors.right: checkBox.left
+ anchors.rightMargin: Flat.FlatStyle.twoPixels
+ }
+
+ CheckBox {
+ id: checkBox
+ checked: optionsListView.model[optionIndex].action.checked
+ anchors.right: parent.right
+ anchors.rightMargin: menuMargins
+ anchors.verticalCenter: parent.verticalCenter
+ onCheckedChanged: optionsListView.model[optionIndex].action.checked = checkBox.checked
+ }
+ }
+
+ property Component exitComponent: MouseArea {
+ anchors.fill: parent
+ onClicked: Qt.quit()
+
+ Label {
+ text: optionText
+ font.family: Flat.FlatStyle.fontFamily
+ font.pixelSize: Math.round(15 * Flat.FlatStyle.scaleFactor)
+ renderType: Text.QtRendering
+ color: Flat.FlatStyle.defaultTextColor
+ anchors.verticalCenter: parent.verticalCenter
+ }
+ }
+
+ Rectangle {
+ width: parent.height
+ height: 8 * Flat.FlatStyle.scaleFactor
+ rotation: -90
+ anchors.right: parent.left
+ transformOrigin: Item.TopRight
+
+ gradient: Gradient {
+ GradientStop {
+ color: Qt.rgba(0, 0, 0, 0.15)
+ position: 0
+ }
+ GradientStop {
+ color: Qt.rgba(0, 0, 0, 0.05)
+ position: 0.5
+ }
+ GradientStop {
+ color: Qt.rgba(0, 0, 0, 0)
+ position: 1
+ }
+ }
+ }
+ }
+ }
+ }
+}