• Home

Squaby Demo

 /*
   This style enables the GUI Elements and ItemEditor styles from VPlay 1.0.
   */
 import Felgo 4.0
 import QtQuick 2.0

 Item {
   /*!
     This alias is used to access the buttonStyle. Used for instance in GameButton to assign the GameStyle to the QtQuick Controls Button element.
     \sa GameButton
   */
   property alias buttonStyle:buttonStyleComponent

   /*!
     This alias is used to access the switchStyle. Used for instance in GameSwitch to assign the GameStyle to the QtQuick Controls Switch element.
     \sa GameSwitch
   */
   property alias switchStyle:switchStyleComponent

   /*!
     This alias is used to access the sliderStyle. Used for instance in GameSlider to assign the GameStyle to the QtQuick Controls Slider element.
     \sa GameSlider
   */
   property alias sliderStyle:sliderStyleComponent

   /*!
     This alias is used to access the textFieldStyle. Used for instance in GameTextField to assign the GameStyle to the QtQuick Controls TextField element.
     \sa GameTextField
   */
   property alias textFieldStyle:textFieldStyleComponent

   /*!
     This alias is used to access the scrollViewStyle. Used for instance in GameScrollView to assign the GameStyle to the QtQuick ScrollView element.
     \sa GameScrollView
   */
   property alias scrollViewStyle:scrollViewStyleComponent

   /*!
     This alias is used to access the itemEditorStyle. Used for instance in ItemEditor to assign the GameStyle to the QtQuick GUI elements.
     \sa ItemEditor
     \sa ItemEditorStyle
   */
   property alias itemEditorStyle:itemEditorStyle

   /*!
     This property is used to change the color of the window background in GUI elements and in the ItemEditor.
     \sa ItemEditor
     \sa ItemEditorStyle
   */
   property color windowBackgroundColor: "#212126"

   /*!
     This property is used to change the color of the background in GUI elements.
   */
   property color elementBackgroundColor: "#2c2b2a"

   /*!
     This property is used to change the color of the foreground in GUI elements.
   */
   property color elementForegroundColor: "#413d3c"

   /*!
     This property is used to change the color of the highlight effects in GUI elements.
   */
   property color elementHighlightColor: Qt.lighter("#468bb7", 1.2)

   /*!
     This property is used to change the color of the highlight effects when the element is not hovered or pressed in GUI elements.
   */
   property color elementNormalColor: Qt.darker("#468bb7", 1.4)

   /*!
     This property is used to change the color of the GameButton text.
   */
   property color buttonTextColor: "white"

   /*!
     This property is used to change the pixel size of the GameButton text.
   */
   property int buttonTextPixelSize: 12

   /*!
     This property is used to change the color of the GameSwitch text.
   */
   property color switchTextColor: "white"

   /*!
     This property is used to change the pixel size of the GameSwitch text.
   */
   property int switchTextPixelSize: 11

   /*!
     This property is used to change the color of the GameTextField text.
   */
   property color textFieldTextColor: "white"

   /*!
     This property is used to change the color of the placeholder text of the GameTextField.
   */
   property color textFieldPlaceholderTextColor: "grey"

   /*!
     This property is used to change the pixel size of the GameTextField text.
   */
   property int textFieldTextPixelSize: 14

   /*!
     This property is used to change the color of the itemEditor label text.
   */
   property color itemEditorLabelTextColor: "white"

   /*!
     This property is used to change the pixel size of the itemEditor label text.
   */
   property int itemEditorLabelTextPixelSize: 11

   /*!
     This alias is used to change the font of the itemEditor label.
   */
   property alias itemEditorLabel: itemEditorLabel

   // Button Style
   Component {
     id: buttonStyleComponent
     ButtonStyle {
       contentItem: MultiResolutionImage {
         implicitHeight: 27
         implicitWidth: 69
         scale: control.pressed ? 0.9 : 1
         source: Qt.resolvedUrl("../../assets/img/buttons.png")
         Text {
           text: control.text
           anchors.centerIn: parent
           color: buttonTextColor
           font.pixelSize: buttonTextPixelSize
           // causes bad fonts and other problems http://qt-project.org/forums/viewthread/22158
           //renderType: Text.NativeRendering
           renderType: Text.QtRendering
         }
       }
     }
   }

   // Switch Style
   Component {
     id: switchStyleComponent
     SwitchStyle {
       background: Item {
         implicitHeight: 18
         implicitWidth: 54

         MultiResolutionImage {
           implicitHeight: 18
           implicitWidth: 78
           source: control.checked ? "../../assets/img/switch-on.png" : "../../assets/img/switch-off.png"
         }
       }
       handle: MultiResolutionImage {
         implicitHeight: 16
         implicitWidth: 25
         source: Qt.resolvedUrl("../../assets/img/switch-thumb.png")
       }
     }
   }

   // Slider Style
   Component {
     id: sliderStyleComponent
     SliderStyle {
       handle: MultiResolutionImage {
         implicitHeight: 38
         implicitWidth: 38
         source: Qt.resolvedUrl("../../assets/img/slider-handle.png")
       }

       background: MultiResolutionImage {
         implicitHeight: 35
         implicitWidth: 277
         source: Qt.resolvedUrl("../../assets/img/slider-background.png")
         Rectangle {
           z: -1
           anchors.verticalCenter: parent.verticalCenter
           antialiasing: true
           radius: 1
           color: elementHighlightColor
           height: 4
           width: styleData.handlePosition+5
         }
       }
     }
   }

   // TextField Style
   Component {
     id: textFieldStyleComponent
     TextFieldStyle {
       renderType: Text.QtRendering
       textColor: textFieldTextColor
       font.pixelSize: textFieldTextPixelSize
       padding { top: 0 ; left: Math.round(control.__contentHeight/3) ; right: control.__contentHeight/3 ; bottom: 0 }

       background: Item {
         implicitHeight: 25
         implicitWidth: 160
         MultiResolutionImage {
           source: Qt.resolvedUrl("../../assets/img/textinput.png")
           implicitHeight: 6
           implicitWidth: 160
           anchors.bottom: parent.bottom
           anchors.left: parent.left
           anchors.right: parent.right
         }
       }
     }
   }

   // ScrollView Style
   Component {
     id: scrollViewStyleComponent
     ScrollViewStyle {
       transientScrollBars: true
       handle: Item {
         implicitWidth: 7
         implicitHeight: 13
         Rectangle {
           color: elementBackgroundColor
           anchors.fill: parent
           anchors.topMargin: 3
           anchors.leftMargin: 2
           anchors.rightMargin: 2
           anchors.bottomMargin: 3
           Rectangle {
             color: elementForegroundColor
             anchors.fill: parent
             anchors.topMargin: 1
             anchors.leftMargin: 1
             anchors.rightMargin: 1
             anchors.bottomMargin: 1
           }
         }
       }
       scrollBarBackground: Item {
         implicitWidth: 7
         implicitHeight: 13
       }
     }
   }

   // ItemEditor Style
   ItemEditorStyle {
     id: itemEditorStyle
     contentDelegateBackground: Rectangle {
       anchors.fill: parent
       gradient: Gradient {
           GradientStop { position: 0.0; color: "#6a93c1" }
           GradientStop { position: 1.0; color: "#38587b" }
       }
     }
     contentDelegateTypeList: Rectangle {
       anchors.fill: parent
       gradient: Gradient {
           GradientStop { position: 0.0; color: "#6a93c1" }
           GradientStop { position: 1.0; color: "#38587b" }
       }
     }
     label: Text {
       id: itemEditorLabel
       color: itemEditorLabelTextColor
       font.pixelSize: itemEditorLabelTextPixelSize