Commit 818a7b22 authored by Kai Koehne's avatar Kai Koehne
Browse files

New QmlDesigner plugin & Design mode

This adds a new "Design" mode that can be used to manipulate qml files
in a visual way. It will only get build if you have the declarativeui
module in Qt.

This is a squashed import from the Bauhaus project. Share & enjoy :)
parent ae535daa
......@@ -73,3 +73,6 @@ bin/qtcreator_process_stub*
bin/qtcreator.exe
share/doc/qtcreator/qtcreator.qch
tests/manual/cplusplus/cplusplus0
tests/auto/qml/qmldesigner/bauhaustests/tst_bauhaus
tests/auto/qml/qmldesigner/coretests/tst_qmldesigner_core
tests/auto/qml/qmldesigner/propertyeditortests/tst_propertyeditor
import Qt 4.6
Rectangle {
property var label: "Button"
signal clicked
width: 75
height: 20
radius: 10
color: "grey"
Rectangle {
anchors.fill: parent;
anchors.leftMargin: 1;
anchors.rightMargin: 1;
anchors.topMargin: 1;
anchors.bottomMargin: 1;
color: "#2c2c2c";
radius: 9
Rectangle {
id: buttonGradientRectangle
anchors.fill: parent;
anchors.leftMargin: 1;
anchors.rightMargin: 1;
anchors.topMargin: 1;
anchors.bottomMargin: 1;
color: "black";
gradient: normalGradient
radius: 8;
Gradient {
id: pressedGradient
GradientStop { position: 0.0; color: "#686868" }
GradientStop { position: 1.0; color: "#8a8a8a" }
}
Gradient {
id: normalGradient
GradientStop { position: 0.0; color: "#8a8a8a" }
GradientStop { position: 1.0; color: "#686868" }
}
}
}
Text {
color: "white"
text: parent.label
style: "Raised";
anchors.left: parent.left
anchors.top: parent.top
anchors.right: parent.right
anchors.bottom: parent.bottom
horizontalAlignment: "AlignHCenter";
verticalAlignment: "AlignVCenter";
}
MouseRegion {
id: mouseRegion
anchors.fill: parent
onReleased: { parent.clicked.emit(); }
}
states: [
State {
name: "released"
when: !mouseRegion.pressed
PropertyChanges {
target: buttonGradientRectangle
gradient: normalGradient
}
},
State {
name: "pressed"
when: mouseRegion.pressed
PropertyChanges {
target: buttonGradientRectangle
gradient: pressedGradient
}
}
]
}
import Qt 4.6
QWidget {
width:220;fixedWidth: width
height:220;fixedHeight: height
styleSheetFile: "anchorbox.css"
Script {
function isBorderAnchored() {
return anchorBackend.leftAnchored || anchorBackend.topAnchored || anchorBackend.rightAnchored || anchorBackend.bottomAnchored;
}
function fill() {
anchorBackend.fill();
}
function breakLayout() {
anchorBackend.resetLayout()
}
}
QPushButton {
text: "fill";
height:20;fixedHeight: height;
x: 0;
y: 0;
width:200;fixedWidth: width;
id: QPushButton1;
onReleased: fill();
}
QPushButton {
text: "break";
y: 200;
height:20;fixedHeight: height;
width:200;fixedWidth: width;
x: 0;
id: QPushButton3;
onReleased: breakLayout();
}
QPushButton {
height:100;fixedHeight: height;
text: "left";
font.bold: true;
x: 16 ;
y: 60;
//styleSheet: "border-radius:5px; background-color: #ffda82";
width:30;fixedWidth: width;
id: QPushButton5;
checkable: true;
checked: anchorBackend.leftAnchored;
onReleased: {
if (checked) {
anchorBackend.horizontalCentered = false;
anchorBackend.leftAnchored = true;
} else {
anchorBackend.leftAnchored = false;
}
}
}
QPushButton {
text: "top";
font.bold: true;
//styleSheet: "border-radius:5px; background-color: #ffda82";
height:72;fixedHeight: height;
width:100;fixedWidth: width;
x: 49;
y: 30;
id: QPushButton6;
checkable: true;
checked: anchorBackend.topAnchored;
onReleased: {
if (checked) {
anchorBackend.verticalCentered = false;
anchorBackend.topAnchored = true;
} else {
anchorBackend.topAnchored = false;
}
}
}
QPushButton {
text: "right";
font.bold: true;
x: 153;
y: 60;
//styleSheet: "border-radius:5px; background-color: #ffda82";
width:30;fixedWidth: width;
height:100;fixedHeight: height;
id: QPushButton7;
checkable: true;
checked: anchorBackend.rightAnchored;
onReleased: {
if (checked) {
anchorBackend.horizontalCentered = false;
anchorBackend.rightAnchored = true;
} else {
anchorBackend.rightAnchored = false;
}
}
}
QPushButton {
text: "bottom";
font.bold: true;
//styleSheet: "border-radius:5px; background-color: #ffda82";
width:100;fixedWidth: width;
x: 49;
y: 164;
height:27;fixedHeight: height;
id: QPushButton8;
checkable: true;
checked: anchorBackend.bottomAnchored;
onReleased: {
if (checked) {
anchorBackend.verticalCentered = false;
anchorBackend.bottomAnchored = true;
} else {
anchorBackend.bottomAnchored = false;
}
}
}
QToolButton {
width:100;fixedWidth: width;
//styleSheet: "border-radius:50px;background-color: rgba(85, 170, 255, 255)";
x: 49;
y: 60;
height:100;fixedHeight: height;
id: QPushButton9;
QPushButton {
width:24;fixedWidth: width;
//styleSheet: "border-radius:5px; background-color: #bf3f00;";
x: 38;
y: 2;
height:96;fixedHeight: height;
checkable: true;
id: horizontalCenterButton;
checked: anchorBackend.horizontalCentered;
onReleased: {
if (checked) {
anchorBackend.rightAnchored = false;
anchorBackend.leftAnchored = false;
anchorBackend.horizontalCentered = true;
} else {
anchorBackend.horizontalCentered = false;
}
}
}
QPushButton {
height:24;fixedHeight: height;
x: 2;
y: 38;
width:96;fixedWidth: width;
id: verticalCenterButton;
checkable: true;
checked: anchorBackend.verticalCentered;
onReleased: {
if (checked) {
anchorBackend.topAnchored = false;
anchorBackend.bottomAnchored = false;
anchorBackend.verticalCentered = true;
} else {
anchorBackend.verticalCentered = false;
}
}
}
QPushButton {
text: "center";
font.bold: true;
//styleSheet: "border-radius:20px; background-color: #ff5500";
width:40;fixedWidth: width;
height:40;fixedHeight: height;
x: 30;
y: 30;
id: centerButton;
checkable: true;
checked: anchorBackend.verticalCentered && anchorBackend.horizontalCentered;
onReleased: {
if (checked) {
anchorBackend.leftAnchored = false;
anchorBackend.topAnchored = false;
anchorBackend.rightAnchored = false;
anchorBackend.bottomAnchored = false;
anchorBackend.verticalCentered = true;
anchorBackend.horizontalCentered = true;
} else {
anchorBackend.verticalCentered = false;
anchorBackend.horizontalCentered = false;
}
}
}
}
}
import Qt 4.6
import Bauhaus 1.0
GroupBox {
maximumHeight: 240;
finished: finishedNotify;
caption: "Image";
layout: QVBoxLayout {
topMargin: 12;
bottomMargin: 12;
leftMargin: 12;
rightMargin: 12;
FileWidget {
enabled: isBaseState || backendValues.id.value != "";
maximumWidth: 250;
text: "Source: ";
fileName: backendValues.source.value;
onFileNameChanged: {
backendValues.source.value = fileName;
}
}
IntEditor {
id: pixelSize;
backendValue: backendValues.border_left;
caption: "Border Left: "
baseStateFlag: isBaseState;
step: 1;
minimumValue: 0;
maximumValue: 2000;
}
IntEditor {
backendValue: backendValues.border_right;
caption: "Border Right: "
baseStateFlag: isBaseState;
step: 1;
minimumValue: 0;
maximumValue: 2000;
}
IntEditor {
backendValue: backendValues.border_top;
caption: "Border Top: "
baseStateFlag: isBaseState;
step: 1;
minimumValue: 0;
maximumValue: 2000;
}
IntEditor {
backendValue: backendValues.border_bottom;
caption: "Border Bottom:"
baseStateFlag: isBaseState;
step: 1;
minimumValue: 0;
maximumValue: 2000;
}
}
}
import Qt 4.6
QCheckBox { //This is a special CheckBox that does color coding for states
id: CheckBox;
property var backendValue;
property var baseStateFlag;
checkable: true;
checked: backendValue.value === undefined ? false : backendValue.value;
onToggled: {
backendValue.value = checked;
}
onBaseStateFlagChanged: {
evaluate();
}
onBackendValueChanged: {
evaluate();
}
Script {
function evaluate() {
if (baseStateFlag) {
if (backendValue.isInModel)
CheckBox.setStyleSheet("color: white;");
else
CheckBox.setStyleSheet("color: gray;");
} else {
if (backendValue.IsInSubState)
CheckBox.setStyleSheet("color: blue;");
else
CheckBox.setStyleSheet("color: gray;");
}
}
}
}
import Qt 4.6
import Bauhaus 1.0
GroupBox {
maximumHeight: 200;
finished: finishedNotify;
caption: "Grid";
id: GridSpecifics;
layout: QVBoxLayout {
topMargin: 18;
bottomMargin: 2;
leftMargin: 8;
rightMargin: 8;
IntEditor {
id: spacing;
backendValue: backendValues.spacing;
caption: "Spacing: "
baseStateFlag: isBaseState;
step: 1;
minimumValue: 0;
maximumValue: 2000;
}
}
}
import Qt 4.6
import Bauhaus 1.0
QWidget { //This is a special DoubleSpinBox that does color coding for states
id: DoubleSpinBox;
property var backendValue;
property var baseStateFlag;
property alias singleStep: box.singleStep
property alias minimum: box.minimum
property alias maximum: box.maximum
minimumHeight: 22;
onBaseStateFlagChanged: {
evaluate();
setIcon();
}
onBackendValueChanged: {
evaluate();
setIcon();
}
Script {
function evaluate() {
if (baseStateFlag) {
if (backendValue != null && backendValue.isInModel)
DoubleSpinBox.setStyleSheet("color: white;");
else
DoubleSpinBox.setStyleSheet("color: gray;");
} else {
if (backendValue != null && backendValue.isInSubState)
DoubleSpinBox.setStyleSheet("color: blue;");
else
DoubleSpinBox.setStyleSheet("color: gray;");
}
}
}
layout: QHBoxLayout {
topMargin: 0;
bottomMargin: 0;
leftMargin: 0;
rightMargin: 2;
spacing: 0;
QDoubleSpinBox {
id: box;
decimals: 2;
keyboardTracking: false;
enabled: (backendValue == null || backendValue.complexNode == null) ? false : !backendValue.isBound && !backendValue.complexNode.exists
value: DoubleSpinBox.backendValue == null ? .0 : DoubleSpinBox.backendValue.value;
onValueChanged: {
if (DoubleSpinBox.backendValue != null)
DoubleSpinBox.backendValue.value = value;
}
onFocusChanged: {
//extendedSwitches.active = focus;
//extendedSwitches.backendValue = backendValue;
}
onMouseOverChanged: {
//extendedButton.active = mouseOver;
}
}
}
QToolButton {
property bool active: false;
id: extendedButton;
iconFromFile: "images/expression.png";
visible: false;
width: 14;
height: 14;
y: box.y + 2;
x: box.x + 2;
focusPolicy: "Qt::NoFocus";
opacity: 0;
opacity: Behavior {
NumberAnimation {
easing: "easeInSine"
duration: 200
}
}
onPressed: {
}
Script {
function setIcon() {
if (backendValue == null)
extendedButton.iconFromFile = "images/placeholder.png"
else if (backendValue.isBound) {
extendedButton.iconFromFile = "images/expression.png"
} else {
if (backendValue.complexNode != null && backendValue.complexNode.exists) {
extendedButton.iconFromFile = "images/behaivour.png"
} else {
extendedButton.iconFromFile = "images/placeholder.png"
}
}
}
}
onMouseOverChanged: {
if (mouseOver) {
iconFromFile = "images/submenu.png";
opacity = 1;
} else {
setIcon();
opacity = 0;
}
}
onActiveChanged: {
if (active) {
setIcon();
opacity = 1;
} else {
opacity = 0;
}
}
menu: QMenu {
actions: [
QAction {
text: "Reset";
},
QAction {
text: "Set Expression";
},
QAction {
text: "Add Behaivour";
}
]
}
toolButtonStyle: "Qt::ToolButtonIconOnly";
popupMode: "QToolButton::InstantPopup";
arrowType: "Qt::NoArrow";
}
}
import Qt 4.6
import Bauhaus 1.0
GroupBox {
caption: "Effects"
id: Extended;
maximumHeight: 260;