main.qml Example File

  /****************************************************************************
  **
  ** 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
                          }
                      }
                  }
              }
          }
      }
  }