Newer
Older
import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
import QGroundControl.Palette 1.0
import QGroundControl.Controls 1.0
Rectangle {
property var palette: QGCPalette { colorGroupEnabled: true }
QGCRadioButton {
text: "Light"
exclusiveGroup: themeGroup
onClicked: { palette.globalTheme = QGCPalette.Light }
}
QGCRadioButton {
text: "Dark"
exclusiveGroup: themeGroup
onClicked: { palette.globalTheme = QGCPalette.Dark }
}
Row {
spacing: 30
Grid {
columns: 3
spacing: 5
Component {
id: colorSquare
Rectangle {
width: 80
height: 20
border.width: 1
border.color: "white"
color: parent.color
}
}
Component {
id: rowHeader
Text {
width: 180
height: 20
horizontalAlignment: Text.AlignRight
verticalAlignment: Text.AlignVCenter
color: palette.text
text: parent.text
}
}
// Header row
Loader {
sourceComponent: rowHeader
property var text: ""
}
horizontalAlignment: Text.AlignHCenter
text: "Disabled"
}
Text {
width: 80
height: 20
color: palette.text
horizontalAlignment: Text.AlignHCenter
text: "Enabled"
// window
Loader {
sourceComponent: rowHeader
property var text: "window"
}
Loader {
property var palette: QGCPalette { colorGroupEnabled: false }
property var color: palette.window
sourceComponent: colorSquare
}
Loader {
property var palette: QGCPalette { colorGroupEnabled: true }
property var color: palette.window
sourceComponent: colorSquare
}
// windowShade
Loader {
sourceComponent: rowHeader
property var text: "windowShade"
}
Loader {
property var palette: QGCPalette { colorGroupEnabled: false }
property var color: palette.windowShade
sourceComponent: colorSquare
}
Loader {
property var palette: QGCPalette { colorGroupEnabled: true }
property var color: palette.windowShade
sourceComponent: colorSquare
}
// windowShadeDark
Loader {
sourceComponent: rowHeader
property var text: "windowShadeDark"
}
Loader {
property var palette: QGCPalette { colorGroupEnabled: false }
property var color: palette.windowShadeDark
sourceComponent: colorSquare
}
Loader {
property var palette: QGCPalette { colorGroupEnabled: true }
property var color: palette.windowShadeDark
sourceComponent: colorSquare
}
// text
Loader {
sourceComponent: rowHeader
property var text: "text"
}
Loader {
property var palette: QGCPalette { colorGroupEnabled: false }
property var color: palette.text
sourceComponent: colorSquare
}
Loader {
property var palette: QGCPalette { colorGroupEnabled: true }
property var color: palette.text
sourceComponent: colorSquare
}
// button
Loader {
sourceComponent: rowHeader
property var text: "button"
}
Loader {
property var palette: QGCPalette { colorGroupEnabled: false }
property var color: palette.button
sourceComponent: colorSquare
}
Loader {
property var palette: QGCPalette { colorGroupEnabled: true }
property var color: palette.button
sourceComponent: colorSquare
}
// buttonText
Loader {
sourceComponent: rowHeader
property var text: "buttonText"
}
Loader {
property var palette: QGCPalette { colorGroupEnabled: false }
property var color: palette.buttonText
sourceComponent: colorSquare
}
Loader {
property var palette: QGCPalette { colorGroupEnabled: true }
property var color: palette.buttonText
sourceComponent: colorSquare
}
// buttonHighlight
Loader {
sourceComponent: rowHeader
property var text: "buttonHighlight"
}
Loader {
property var palette: QGCPalette { colorGroupEnabled: false }
property var color: palette.buttonHighlight
sourceComponent: colorSquare
}
Loader {
property var palette: QGCPalette { colorGroupEnabled: true }
property var color: palette.buttonHighlight
sourceComponent: colorSquare
}
// buttonHighlightText
Loader {
sourceComponent: rowHeader
property var text: "buttonHighlightText"
}
Loader {
property var palette: QGCPalette { colorGroupEnabled: false }
property var color: palette.buttonHighlightText
sourceComponent: colorSquare
}
Loader {
property var palette: QGCPalette { colorGroupEnabled: true }
property var color: palette.buttonHighlightText
sourceComponent: colorSquare
}
// primaryButton
Loader {
sourceComponent: rowHeader
property var text: "primaryButton"
}
Loader {
property var palette: QGCPalette { colorGroupEnabled: false }
property var color: palette.primaryButton
sourceComponent: colorSquare
}
Loader {
property var palette: QGCPalette { colorGroupEnabled: true }
property var color: palette.primaryButton
sourceComponent: colorSquare
}
// primaryButtonText
Loader {
sourceComponent: rowHeader
property var text: "primaryButtonText"
}
Loader {
property var palette: QGCPalette { colorGroupEnabled: false }
property var color: palette.primaryButtonText
sourceComponent: colorSquare
}
Loader {
property var palette: QGCPalette { colorGroupEnabled: true }
property var color: palette.primaryButtonText
sourceComponent: colorSquare
}
// textField
Loader {
sourceComponent: rowHeader
property var text: "textField"
}
Loader {
property var palette: QGCPalette { colorGroupEnabled: false }
property var color: palette.textField
sourceComponent: colorSquare
}
Loader {
property var palette: QGCPalette { colorGroupEnabled: true }
property var color: palette.textField
sourceComponent: colorSquare
}
// textFieldText
Loader {
sourceComponent: rowHeader
property var text: "textFieldText"
}
Loader {
property var palette: QGCPalette { colorGroupEnabled: false }
property var color: palette.textFieldText
sourceComponent: colorSquare
}
Loader {
property var palette: QGCPalette { colorGroupEnabled: true }
property var color: palette.textFieldText
sourceComponent: colorSquare
}
Text {
width: 120
height: 20
horizontalAlignment: Text.AlignRight
verticalAlignment: Text.AlignVCenter
color: palette.text
text: parent.text
}
}
// Header row
Loader {
sourceComponent: ctlRowHeader
property var text: ""
}
horizontalAlignment: Text.AlignHCenter
text: "Enabled"
}
Text {
width: 100
height: 20
color: palette.text
horizontalAlignment: Text.AlignHCenter
text: "Disabled"
// QGCLabel
Loader {
sourceComponent: ctlRowHeader
property var text: "QGCLabel"
}
QGCLabel {
width: 100
height: 20
text: "Label"
}
QGCLabel {
width: 100
height: 20
text: "Label"
enabled: false
}
// QGCButton
Loader {
sourceComponent: ctlRowHeader
property var text: "QGCButton"
}
QGCButton {
width: 100
height: 20
text: "Button"
}
QGCButton {
width: 100
height: 20
text: "Button"
enabled: false
}
// QGCButton - primary
Loader {
sourceComponent: ctlRowHeader
property var text: "QGCButton(primary)"
}
QGCButton {
width: 100
height: 20
primary: true
text: "Button"
}
QGCButton {
width: 100
height: 20
text: "Button"
primary: true
enabled: false
}
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
// QGCButton - menu
Loader {
sourceComponent: ctlRowHeader
property var text: "QGCButton(menu)"
}
Menu {
id: buttonMenu
MenuItem {
text: "Item 1"
}
MenuItem {
text: "Item 2"
}
MenuItem {
text: "Item 3"
}
}
QGCButton {
width: 100
height: 20
text: "Button"
menu: buttonMenu
}
QGCButton {
width: 100
height: 20
text: "Button"
enabled: false
menu: buttonMenu
}
// QGCRadioButton
Loader {
sourceComponent: ctlRowHeader
property var text: "QGCRadioButton"
}
QGCRadioButton {
width: 100
height: 20
text: "Radio"
}
QGCRadioButton {
width: 100
height: 20
text: "Radio"
enabled: false
}
// QGCCheckBox
Loader {
sourceComponent: ctlRowHeader
property var text: "QGCCheckBox"
}
QGCCheckBox {
width: 100
height: 20
text: "Check Box"
}
QGCCheckBox {
width: 100
height: 20
text: "Check Box"
enabled: false
}
// QGCTextField
Loader {
sourceComponent: ctlRowHeader
property var text: "QGCTextField"
}
QGCTextField {
width: 100
height: 20
text: "QGCTextField"
}
QGCTextField {
width: 100
height: 20
text: "QGCTextField"
enabled: false
}
// QGCComboBox
Loader {
sourceComponent: ctlRowHeader
property var text: "QGCComboBox"
}
QGCComboBox {
width: 100
height: 20
model: [ "Item 1", "Item 2", "Item 3" ]
}
QGCComboBox {
width: 100
height: 20
model: [ "Item 1", "Item 2", "Item 3" ]
enabled: false
}
// SubMenuButton
Loader {
sourceComponent: ctlRowHeader
property var text: "SubMenuButton"
}
SubMenuButton {
width: 100
height: 100
text: "SUB MENU"
}
SubMenuButton {
width: 100
height: 100
text: "SUB MENU"
enabled: false
}
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
Row {
Column {
Text { font.pixelSize: 8; color: "white"; text: "Text Test 8px"; }
Text { font.pixelSize: 9; color: "white"; text: "Text Test 9px"; }
Text { font.pixelSize: 10; color: "white"; text: "Text Test 10px"; }
Text { font.pixelSize: 11; color: "white"; text: "Text Test 11px"; }
Text { font.pixelSize: 12; color: "white"; text: "Text Test 12px"; }
Text { font.pixelSize: 13; color: "white"; text: "Text Test 13px"; }
Text { font.pixelSize: 14; color: "white"; text: "Text Test 14px"; }
Text { font.pixelSize: 15; color: "white"; text: "Text Test 15px"; }
Text { font.pixelSize: 16; color: "white"; text: "Text Test 16px"; }
Text { font.pixelSize: 17; color: "white"; text: "Text Test 17px"; }
Text { font.pixelSize: 18; color: "white"; text: "Text Test 18px"; }
Text { font.pixelSize: 19; color: "white"; text: "Text Test 19px"; }
Text { font.pixelSize: 20; color: "white"; text: "Text Test 20px"; }
}
Column {
Text { font.pixelSize: 8; color: "white"; text: "Text Test 8pt"; }
Text { font.pixelSize: 9; color: "white"; text: "Text Test 9pt"; }
Text { font.pixelSize: 10; color: "white"; text: "Text Test 10pt"; }
Text { font.pixelSize: 11; color: "white"; text: "Text Test 11pt"; }
Text { font.pixelSize: 12; color: "white"; text: "Text Test 12pt"; }
Text { font.pixelSize: 13; color: "white"; text: "Text Test 13pt"; }
Text { font.pixelSize: 14; color: "white"; text: "Text Test 14pt"; }
Text { font.pixelSize: 15; color: "white"; text: "Text Test 15pt"; }
Text { font.pixelSize: 16; color: "white"; text: "Text Test 16pt"; }
Text { font.pixelSize: 17; color: "white"; text: "Text Test 17pt"; }
Text { font.pixelSize: 18; color: "white"; text: "Text Test 18pt"; }
Text { font.pixelSize: 19; color: "white"; text: "Text Test 19pt"; }
Text { font.pixelSize: 20; color: "white"; text: "Text Test 20pt"; }
}
}