diff options
Diffstat (limited to 'share/qtcreator/qmldesigner/propertyEditorQmlSources/imports')
65 files changed, 5446 insertions, 480 deletions
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/AligmentHorizontalButtons.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/AligmentHorizontalButtons.qml index af29773ce2..bb545d2369 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/AligmentHorizontalButtons.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/AligmentHorizontalButtons.qml @@ -25,21 +25,12 @@ import QtQuick 2.1 import HelperWidgets 2.0 +import StudioControls 1.0 as StudioControls +import StudioTheme 1.0 as StudioTheme Row { id: alignmentHorizontalButtons - RoundedPanel { - width: 16 - height: parent.height - roundLeft: true - ExtendedFunctionButton { - x: 2 - anchors.verticalCenter: parent.verticalCenter - backendValue: alignmentHorizontalButtons.backendValue - } - } - property bool blueHighlight: false property variant backendValue: backendValues.horizontalAlignment; @@ -48,19 +39,20 @@ Row { property bool baseStateFlag: isBaseState; + property color __currentColor: blueHighlight ? StudioTheme.Values.themeInteraction : StudioTheme.Values.themeTextColor + onValueChanged: { - buttonRow.initalChecked = 0 - buttonRow.checkedIndex = 0 + buttonAlignLeft.checked = true + buttonAlignHCenter.checked = false + buttonAlignRight.checked = false + if (value !== undefined) { if (value === "AlignLeft") { - buttonRow.initalChecked = 0 - buttonRow.checkedIndex = 0 + buttonAlignLeft.checked = true } else if (value === "AlignHCenter") { - buttonRow.initalChecked = 1 - buttonRow.checkedIndex = 1 + buttonAlignHCenter.checked = true } else if (value === "AlignRight") { - buttonRow.initalChecked = 2 - buttonRow.checkedIndex = 2 + buttonAlignRight.checked = true } } evaluate() @@ -89,27 +81,54 @@ Row { } } - ButtonRow { + ExtendedFunctionLogic { + id: extFuncLogic + backendValue: alignmentHorizontalButtons.backendValue + } + + StudioControls.ButtonRow { id: buttonRow - exclusive: true + actionIndicatorVisible: true + + actionIndicator.icon.color: extFuncLogic.color + actionIndicator.icon.text: extFuncLogic.glyph + actionIndicator.onClicked: extFuncLogic.show() + + StudioControls.ButtonGroup { + id: group + } - ButtonRowButton { - roundLeftButton: false - iconSource: "image://icons/alignment-left" + (blueHighlight ? "-h" : "") + StudioControls.AbstractButton { + id: buttonAlignLeft + buttonIcon: StudioTheme.Constants.textAlignLeft + checkable: true + autoExclusive: true + StudioControls.ButtonGroup.group: group + iconColor: __currentColor onClicked: { if (checked) backendValue.setEnumeration("Text", "AlignLeft") } } - ButtonRowButton { - iconSource: "image://icons/alignment-center" + (blueHighlight ? "-h" : "") + StudioControls.AbstractButton { + id: buttonAlignHCenter + buttonIcon: StudioTheme.Constants.textAlignCenter + checkable: true + autoExclusive: true + StudioControls.ButtonGroup.group: group + iconColor: __currentColor onClicked: { if (checked) backendValue.setEnumeration("Text", "AlignHCenter") } } - ButtonRowButton { - iconSource: "image://icons/alignment-right" + (blueHighlight ? "-h" : "") + StudioControls.AbstractButton { + id: buttonAlignRight + buttonIcon: StudioTheme.Constants.textAlignRight + checkable: true + autoExclusive: true + StudioControls.ButtonGroup.group: group + iconColor: __currentColor onClicked: { if (checked) backendValue.setEnumeration("Text", "AlignRight") diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/AligmentVerticalButtons.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/AligmentVerticalButtons.qml index ac3bd20f35..d74fa5d66e 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/AligmentVerticalButtons.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/AligmentVerticalButtons.qml @@ -25,22 +25,12 @@ import QtQuick 2.1 import HelperWidgets 2.0 +import StudioControls 1.0 as StudioControls +import StudioTheme 1.0 as StudioTheme Row { id: alignmentVerticalButtons - RoundedPanel { - width: 16 - height: parent.height - roundLeft: true - - ExtendedFunctionButton { - x: 2 - anchors.verticalCenter: parent.verticalCenter - backendValue: alignmentVerticalButtons.backendValue - } - } - property bool blueHighlight: false property variant backendValue: backendValues.verticalAlignment; @@ -49,19 +39,20 @@ Row { property bool baseStateFlag: isBaseState; + property color __currentColor: blueHighlight ? StudioTheme.Values.themeInteraction : StudioTheme.Values.themeTextColor + onValueChanged: { - buttonRow.initalChecked = 0 - buttonRow.checkedIndex = 0 + buttonAlignTop.checked = true + buttonAlignVCenter.checked = false + buttonAlignBottom.checked = false + if (value !== undefined) { if (value === "AlignTop") { - buttonRow.initalChecked = 0 - buttonRow.checkedIndex = 0 + buttonAlignTop.checked = true } else if (value === "AlignVCenter") { - buttonRow.initalChecked = 1 - buttonRow.checkedIndex = 1 + buttonAlignVCenter.checked = true } else if (value === "AlignBottom") { - buttonRow.initalChecked = 2 - buttonRow.checkedIndex = 2 + buttonAlignBottom.checked = true } } evaluate() @@ -90,27 +81,54 @@ Row { } } - ButtonRow { + ExtendedFunctionLogic { + id: extFuncLogic + backendValue: alignmentVerticalButtons.backendValue + } + + StudioControls.ButtonRow { id: buttonRow - exclusive: true + actionIndicatorVisible: true + + actionIndicator.icon.color: extFuncLogic.color + actionIndicator.icon.text: extFuncLogic.glyph + actionIndicator.onClicked: extFuncLogic.show() + + StudioControls.ButtonGroup { + id: group + } - ButtonRowButton { - roundLeftButton: false - iconSource: "image://icons/alignment-top" + (blueHighlight ? "-h" : "") + StudioControls.AbstractButton { + id: buttonAlignTop + buttonIcon: StudioTheme.Constants.textAlignTop + checkable: true + autoExclusive: true + StudioControls.ButtonGroup.group: group + iconColor: __currentColor onClicked: { if (checked) backendValue.setEnumeration("Text", "AlignTop") } } - ButtonRowButton { - iconSource: "image://icons/alignment-middle" + (blueHighlight ? "-h" : "") + StudioControls.AbstractButton { + id: buttonAlignVCenter + buttonIcon: StudioTheme.Constants.textAlignMiddle + checkable: true + autoExclusive: true + StudioControls.ButtonGroup.group: group + iconColor: __currentColor onClicked: { if (checked) backendValue.setEnumeration("Text", "AlignVCenter") } } - ButtonRowButton { - iconSource: "image://icons/alignment-bottom" + (blueHighlight ? "-h" : "") + StudioControls.AbstractButton { + id: buttonAlignBottom + buttonIcon: StudioTheme.Constants.textAlignBottom + checkable: true + autoExclusive: true + StudioControls.ButtonGroup.group: group + iconColor: __currentColor onClicked: { if (checked) backendValue.setEnumeration("Text", "AlignBottom") diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/AnchorButtons.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/AnchorButtons.qml index e7f9859ee4..963f578221 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/AnchorButtons.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/AnchorButtons.qml @@ -25,23 +25,32 @@ import QtQuick 2.1 import HelperWidgets 2.0 +import StudioControls 1.0 as StudioControls +import StudioTheme 1.0 as StudioTheme + +StudioControls.ButtonRow { + id: buttonRow -ButtonRow { enabled: anchorBackend.hasParent opacity: enabled ? 1 : 0.5 - id: buttonRow + actionIndicatorVisible: false - ButtonRowButton { - iconSource: "image://icons/anchor-top" - tooltip: qsTr("Anchor item to the top.") + StudioControls.ButtonGroup { + id: group + } + + StudioControls.AbstractButton { + checkable: true + buttonIcon: StudioTheme.Constants.anchorTop + //tooltip: qsTr("Anchor item to the top.") property bool topAnchored: anchorBackend.topAnchored onTopAnchoredChanged: { checked = topAnchored } - onClicked: { + onClicked: { if (checked) { if (anchorBackend.bottomAnchored) anchorBackend.verticalCentered = false; @@ -52,9 +61,10 @@ ButtonRow { } } - ButtonRowButton { - iconSource: "image://icons/anchor-bottom" - tooltip: qsTr("Anchor item to the bottom.") + StudioControls.AbstractButton { + checkable: true + buttonIcon: StudioTheme.Constants.anchorBottom + //tooltip: qsTr("Anchor item to the bottom.") property bool bottomAnchored: anchorBackend.bottomAnchored onBottomAnchoredChanged: { @@ -73,9 +83,10 @@ ButtonRow { } - ButtonRowButton { - iconSource: "image://icons/anchor-left" - tooltip: qsTr("Anchor item to the left.") + StudioControls.AbstractButton { + checkable: true + buttonIcon: StudioTheme.Constants.anchorLeft + //tooltip: qsTr("Anchor item to the left.") property bool leftAnchored: anchorBackend.leftAnchored onLeftAnchoredChanged: { @@ -93,9 +104,10 @@ ButtonRow { } } - ButtonRowButton { - iconSource: "image://icons/anchor-right" - tooltip: qsTr("Anchor item to the right.") + StudioControls.AbstractButton { + checkable: true + buttonIcon: StudioTheme.Constants.anchorRight + //tooltip: qsTr("Anchor item to the right.") property bool rightAnchored: anchorBackend.rightAnchored onRightAnchoredChanged: { @@ -113,14 +125,15 @@ ButtonRow { } } - ButtonRowButton { + StudioControls.AbstractButton { enabled: false } - ButtonRowButton { - iconSource: "image://icons/anchor-fill" - tooltip: qsTr("Fill parent item.") + StudioControls.AbstractButton { + checkable: true + buttonIcon: StudioTheme.Constants.anchorFill + //tooltip: qsTr("Fill parent item.") property bool isFilled: anchorBackend.isFilled onIsFilledChanged: { @@ -136,13 +149,14 @@ ButtonRow { } } - ButtonRowButton { + StudioControls.AbstractButton { enabled: false } - ButtonRowButton { - iconSource: "image://icons/anchor-vertical" - tooltip: qsTr("Anchor item vertically.") + StudioControls.AbstractButton { + checkable: true + buttonIcon: StudioTheme.Constants.centerVertical + //tooltip: qsTr("Anchor item vertically.") property bool verticalCentered: anchorBackend.verticalCentered; onVerticalCenteredChanged: { @@ -162,9 +176,10 @@ ButtonRow { } } - ButtonRowButton { - iconSource: "image://icons/anchor-horizontal" - tooltip: qsTr("Anchor item horizontally.") + StudioControls.AbstractButton { + checkable: true + buttonIcon: StudioTheme.Constants.centerHorizontal + //tooltip: qsTr("Anchor item horizontally.") property bool horizontalCentered: anchorBackend.horizontalCentered; onHorizontalCenteredChanged: { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/BoolButtonRowButton.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/BoolButtonRowButton.qml index 2b413caaef..45ff261928 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/BoolButtonRowButton.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/BoolButtonRowButton.qml @@ -25,33 +25,31 @@ import QtQuick 2.1 import HelperWidgets 2.0 +import StudioControls 1.0 as StudioControls +import StudioTheme 1.0 as StudioTheme -ButtonRowButton { - id: boolButtonRowButton +StudioControls.Button { + id: button property variant backendValue - property bool isHighlighted: false - property string standardIconSource - property string highlightedIconSource - - leftPadding: 18 - - iconSource: isHighlighted ? highlightedIconSource : standardIconSource + iconColor: isHighlighted ? StudioTheme.Values.themeInteraction : StudioTheme.Values.themeTextColor + actionIndicatorVisible: true + checkable: true QtObject { id: innerObject function evaluate() { if (innerObject.baseStateFlag) { - if (boolButtonRowButton.backendValue !== null + if (button.backendValue !== null && innerObject.isInModel) { isHighlighted = true } else { isHighlighted = false } } else { - if (boolButtonRowButton.backendValue !== null + if (button.backendValue !== null && innerObject.isInSubState) { isHighlighted = true } else { @@ -63,27 +61,30 @@ ButtonRowButton { property bool baseStateFlag: isBaseState onBaseStateFlagChanged: evaluate() - property bool isInModel: boolButtonRowButton.backendValue.isInModel + property bool isInModel: button.backendValue.isInModel onIsInModelChanged: evaluate() - property bool isInSubState: boolButtonRowButton.backendValue.isInSubState + property bool isInSubState: button.backendValue.isInSubState onIsInSubStateChanged: evaluate() - property variant theValue: boolButtonRowButton.backendValue.value + property variant theValue: button.backendValue.value onTheValueChanged: { evaluate() - boolButtonRowButton.checked = innerObject.theValue + button.checked = innerObject.theValue } } onCheckedChanged: { - boolButtonRowButton.backendValue.value = checked + button.backendValue.value = button.checked } - ExtendedFunctionButton { - backendValue: boolButtonRowButton.backendValue - x: 2 - anchors.verticalCenter: parent.verticalCenter + ExtendedFunctionLogic { + id: extFuncLogic + backendValue: button.backendValue } + + actionIndicator.icon.color: extFuncLogic.color + actionIndicator.icon.text: extFuncLogic.glyph + actionIndicator.onClicked: extFuncLogic.show() } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ButtonRowButton.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ButtonRowButton.qml index 8557552b53..6ba9957cd5 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ButtonRowButton.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ButtonRowButton.qml @@ -39,6 +39,8 @@ Item { signal clicked() + signal doubleClicked() + property alias tooltip: toolTipArea.tooltip width: 24 + leftPadding @@ -100,7 +102,8 @@ Item { buttonRowButton.parent.__checkButton(index()) } buttonRowButton.clicked() - } + } + onDoubleClicked: buttonRowButton.doubleClicked() } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/CheckBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/CheckBox.qml index d69490d53a..e599088e42 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/CheckBox.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/CheckBox.qml @@ -24,42 +24,37 @@ ****************************************************************************/ import QtQuick 2.1 -import QtQuick.Controls 1.1 as Controls +import StudioControls 1.0 as StudioControls import QtQuick.Controls.Styles 1.1 -Controls.CheckBox { - +StudioControls.CheckBox { id: checkBox - property color textColor: colorLogic.textColor - - opacity: enabled ? 1 : 0.5 - property variant backendValue + property string tooltip - ExtendedFunctionButton { - x: 22 - anchors.verticalCenter: parent.verticalCenter + ExtendedFunctionLogic { + id: extFuncLogic backendValue: checkBox.backendValue - visible: checkBox.enabled } + actionIndicator.icon.color: extFuncLogic.color + actionIndicator.icon.text: extFuncLogic.glyph + actionIndicator.onClicked: extFuncLogic.show() + + labelColor: colorLogic.textColor ColorLogic { id: colorLogic backendValue: checkBox.backendValue onValueFromBackendChanged: { - if (checkBox.checked !== valueFromBackend) - checkBox.checked = valueFromBackend; + if (colorLogic.valueFromBackend !== undefined + && checkBox.checked !== colorLogic.valueFromBackend) + checkBox.checked = colorLogic.valueFromBackend } } onCheckedChanged: { if (backendValue.value !== checkBox.checked) - backendValue.value = checkBox.checked; + backendValue.value = checkBox.checked } - - style: CustomCheckBoxStyle { - } - - } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorButton.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorButton.qml index 203e692a82..5449f85eb6 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorButton.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorButton.qml @@ -82,6 +82,9 @@ Item { lightnessSlider.value = lightness alphaSlider.value = alpha + redSlider.value = (color.r * 255) + greenSlider.value = (color.g * 255) + blueSlider.value = (color.b * 255) block = false } @@ -242,7 +245,6 @@ Item { anchors.margins: 6 y: 4 height: parent.height - 8 - //value: colorButton.hue onValueChanged: { if (colorButton.hue !== value) colorButton.hue = value @@ -250,101 +252,194 @@ Item { onClicked: colorButton.clicked() } - Column { + Row { anchors.left: hueSlider.right anchors.margins: colorButton.sliderMargins spacing: 10 - Row { - z: 3 - spacing: 4 - Label { - text: "H:" - width: 16 - color: "#eee" - elide: Text.ElideRight - anchors.verticalCenter: parent.verticalCenter + Column { + + spacing: 10 + + Row { + z: 3 + spacing: 1 + Label { + text: "R" + width: 16 + color: "#eee" + elide: Text.ElideRight + anchors.verticalCenter: parent.verticalCenter + } + DoubleSpinBox { + id: redSlider + width: 64 + + stepSize: 1 + minimumValue: 0 + maximumValue: 255 + decimals: 0 + + onCompressedValueModified: { + if (color.r !== value && !colorButton.block) { + color.r = (value / 255.0) + colorButton.clicked() + } + } + } } - DoubleSpinBox { - id: hueSlider2 - //value: colorButton.hue - onValueChanged: { - if (colorButton.hue !== value && !colorButton.block) { - colorButton.hue = value - colorButton.clicked() + + Row { + z: 2 + spacing: 1 + Label { + text: "G" + width: 16 + color: "#eee" + elide: Text.ElideRight + anchors.verticalCenter: parent.verticalCenter + } + + DoubleSpinBox { + id: greenSlider + width: 64 + + stepSize: 1 + minimumValue: 0 + maximumValue: 255 + decimals: 0 + + onCompressedValueModified: { + if (color.g !== value && !colorButton.block) { + color.g = (value / 255.0) + colorButton.clicked() + } } } } - } - Row { - z: 2 - spacing: 4 - Controls.Label { - text: "S:" - width: 16 - color: "#eee" - elide: Text.ElideRight - anchors.verticalCenter: parent.verticalCenter + Row { + z: 1 + spacing: 1 + Label { + text: "B" + width: 16 + color: "#eee" + elide: Text.ElideRight + anchors.verticalCenter: parent.verticalCenter + } + DoubleSpinBox { + id: blueSlider + width: 64 + + stepSize: 1 + minimumValue: 0 + maximumValue: 255 + decimals: 0 + + onCompressedValueModified: { + if (color.b !== value && !colorButton.block) { + color.b = (value / 255.0) + colorButton.clicked() + } + } + } } - DoubleSpinBox { - id: saturationSlider - //value: colorButton.saturation - onValueChanged: { - if (colorButton.saturation !== value && !colorButton.block) { - colorButton.saturation = value - colorButton.clicked() + Row { + z: 0 + spacing: 1 + Label { + text: "A" + width: 16 + color: "#eee" + elide: Text.ElideRight + anchors.verticalCenter: parent.verticalCenter + } + + DoubleSpinBox { + id: alphaSlider + width: 64 + onCompressedValueModified: { + if (colorButton.alpha !== value && !colorButton.block) { + colorButton.alpha = value + colorButton.clicked() + } } } } } - Row { - z: 1 - spacing: 4 - Controls.Label { - text: "L:" - width: 16 - color: "#eee" - elide: Text.ElideRight - anchors.verticalCenter: parent.verticalCenter - } - DoubleSpinBox { - id: lightnessSlider - //value: colorButton.lightness - onValueChanged: { - if (colorButton.lightness !== value && !colorButton.block) { - colorButton.lightness = value - colorButton.clicked() + Column { + + spacing: 10 + Row { + z: 3 + spacing: 1 + Label { + text: "H" + width: 16 + color: "#eee" + elide: Text.ElideRight + anchors.verticalCenter: parent.verticalCenter + } + DoubleSpinBox { + id: hueSlider2 + width: 64 + onCompressedValueModified: { + if (colorButton.hue !== value && !colorButton.block) { + colorButton.hue = value + colorButton.clicked() + } } } } - } - Row { - z: 0 - spacing: 4 - Controls.Label { - text: "A:" - width: 16 - color: "#eee" - elide: Text.ElideRight - anchors.verticalCenter: parent.verticalCenter + Row { + z: 2 + spacing: 1 + Label { + text: "S" + width: 16 + color: "#eee" + elide: Text.ElideRight + anchors.verticalCenter: parent.verticalCenter + } + + DoubleSpinBox { + id: saturationSlider + width: 64 + onCompressedValueModified: { + if (colorButton.saturation !== value && !colorButton.block) { + colorButton.saturation = value + colorButton.clicked() + } + } + } } - DoubleSpinBox { - id: alphaSlider - //value: colorButton.alpha - onValueChanged: { - if (colorButton.alpha !== value && !colorButton.block) { - colorButton.alpha = value - colorButton.clicked() + Row { + z: 1 + spacing: 1 + Label { + text: "L" + width: 16 + color: "#eee" + elide: Text.ElideRight + anchors.verticalCenter: parent.verticalCenter + } + DoubleSpinBox { + id: lightnessSlider + width: 64 + onCompressedValueModified: { + if (colorButton.lightness !== value && !colorButton.block) { + colorButton.lightness = value + colorButton.clicked() + } } } } } - } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorCheckButton.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorCheckButton.qml index 941d705abd..5f094dc00d 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorCheckButton.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorCheckButton.qml @@ -25,19 +25,54 @@ import QtQuick 2.1 -Rectangle { - id: checkBox - width: 18 - height: 18 +Item { + id: colorCheckButtonRoot + property bool checked: false + property alias buttonColor: checkBox.color + width: 30 + height: 24 - border.color: "black" - border.width: 1 - property bool checked: false + Rectangle { + id: backgroundBox + width: 24 + height: 24 + anchors.right: parent.right - MouseArea { - anchors.fill: parent - onClicked: checkBox.checked = !checkBox.checked + color: "white" + border.color: "white" + border.width: 1 + + Rectangle { + id: checkBox + width: 22 + height: 22 + anchors.centerIn: parent + + border.color: "black" + border.width: 1 + } } + Image { + id: arrowImage + width: 8 + height: 4 + source: "image://icons/down-arrow" + anchors.verticalCenter: parent.verticalCenter + anchors.right: backgroundBox.left + anchors.rightMargin: 2 + opacity: colorToolTip.containsMouse ? 1 : 0.8 + rotation: colorCheckButtonRoot.checked ? 0.0 : 270.0 + } + + ToolTipArea { + id: colorToolTip + + onClicked: checked = !checked + hoverEnabled: true + anchors.fill: parent + anchors.leftMargin: -arrowImage.width + tooltip: qsTr("Toggle color picker view") + } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorEditor.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorEditor.qml index e39bd8e88d..39fb95fce1 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorEditor.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorEditor.qml @@ -25,9 +25,7 @@ import QtQuick 2.1 import QtQuick.Layouts 1.0 -import QtQuick.Controls 1.0 as Controls import QtQuickDesignerTheme 1.0 -import QtQuick.Controls.Styles 1.1 Column { id: colorEditor @@ -38,7 +36,7 @@ Column { property bool supportGradient: false - property alias caption: label.text + property string caption: "Color" property variant backendValue @@ -50,8 +48,14 @@ Column { property alias transparent: transparentButton.checked + property color originalColor + function isNotInGradientMode() { - return (buttonRow.checkedIndex !== 1) + return (buttonRow.checkedIndex === 0 || transparent) + } + + function resetShapeColor() { + colorEditor.backendValue.resetValue() } onValueChanged: colorEditor.color = colorEditor.value @@ -73,7 +77,7 @@ Column { if (!gradientLine.isInValidState) return; - if (supportGradient && gradientLine.hasGradient) { + if (colorEditor.supportGradient && gradientLine.hasGradient) { textField.text = convertColorToString(color) gradientLine.currentColor = color } @@ -84,22 +88,27 @@ Column { } } + ColorLine { + visible: { + return (colorEditor.supportGradient && isNotInGradientMode()) + } + currentColor: colorEditor.color + width: parent.width + } + GradientLine { property bool isInValidState: false visible: { - if (colorEditor.shapeGradients) { - return buttonRow.checkedIndex > 0 && buttonRow.checkedIndex < 4 - } else { - return buttonRow.checkedIndex === 1 - } + return !(isNotInGradientMode()) } id: gradientLine width: parent.width onCurrentColorChanged: { - if (supportGradient && gradientLine.hasGradient) + if (colorEditor.supportGradient && gradientLine.hasGradient) { colorEditor.color = gradientLine.currentColor + } } onHasGradientChanged: { @@ -125,11 +134,21 @@ Column { buttonRow.initalChecked = 1 } colorEditor.color = gradientLine.currentColor + } else if (colorEditor.transparent) { + buttonRow.initalChecked = 4 } else { buttonRow.initalChecked = 0 colorEditor.color = colorEditor.value } + buttonRow.checkedIndex = buttonRow.initalChecked + colorEditor.originalColor = colorEditor.color + } + + onSelectedNodeChanged: { + if (colorEditor.supportGradient && gradientLine.hasGradient) { + colorEditor.originalColor = gradientLine.currentColor + } } Connections { @@ -137,18 +156,26 @@ Column { onSelectionToBeChanged: { colorEditorTimer.stop() gradientLine.isInValidState = false + if (colorEditor.originalColor !== colorEditor.color) { + if (colorEditor.color != "#ffffff" + && colorEditor.color != "#000000" + && colorEditor.color != "#00000000") { + colorPalette.addColorToPalette(colorEditor.color) + } + } } } Connections { target: modelNodeBackend onSelectionChanged: { - if (supportGradient && gradientLine.hasGradient) { + if (colorEditor.supportGradient && gradientLine.hasGradient) { colorEditor.color = gradientLine.currentColor gradientLine.currentColor = color textField.text = colorEditor.color } gradientLine.isInValidState = true + colorEditor.originalColor = colorEditor.color } } @@ -156,29 +183,21 @@ Column { SectionLayout { width: parent.width + columnSpacing: 0 + rowSpacing: checkButton.checked ? 8 : 2 rows: 5 + //spacer 1 Item { - height: 0 - width: 2 - } - - Item { - height: 0 - width: 2 - } - - Label { - id: label - text: "Color" + height: 6 } SecondColumnLayout { ColorCheckButton { id: checkButton - color: colorEditor.color + buttonColor: colorEditor.color } LineEdit { @@ -217,24 +236,30 @@ Column { iconSource: "images/icon_color_solid.png" onClicked: { - if (colorEditor.supportGradient) - gradientLine.deleteGradient() + gradientLine.deleteGradient() textField.text = colorEditor.color - colorEditor.backendValue.resetValue() + colorEditor.resetShapeColor() } tooltip: qsTr("Solid Color") } ButtonRowButton { - visible: supportGradient + visible: colorEditor.supportGradient iconSource: "images/icon_color_gradient.png" onClicked: { - colorEditor.backendValue.resetValue() - if (colorEditor.shapeGradients) { - gradientLine.deleteGradient() + colorEditor.resetShapeColor() + + if (colorEditor.shapeGradients) gradientLine.gradientTypeName = "LinearGradient" + else + gradientLine.gradientTypeName = "Gradient" + + if (gradientLine.hasGradient) + gradientLine.updateGradient() + else { + gradientLine.deleteGradient() + gradientLine.addGradient() } - gradientLine.addGradient() } tooltip: qsTr("Linear Gradient") @@ -305,15 +330,18 @@ Column { } } ButtonRowButton { - visible: supportGradient && colorEditor.shapeGradients + visible: colorEditor.supportGradient && colorEditor.shapeGradients iconSource: "images/icon_color_radial_gradient.png" onClicked: { - colorEditor.backendValue.resetValue() - if (colorEditor.shapeGradients) { + colorEditor.resetShapeColor() + gradientLine.gradientTypeName = "RadialGradient" + + if (gradientLine.hasGradient) + gradientLine.updateGradient() + else { gradientLine.deleteGradient() - gradientLine.gradientTypeName = "RadialGradient" + gradientLine.addGradient() } - gradientLine.addGradient() } tooltip: qsTr("Radial Gradient") @@ -402,18 +430,21 @@ Column { } } ButtonRowButton { - visible: supportGradient && colorEditor.shapeGradients + visible: colorEditor.supportGradient && colorEditor.shapeGradients iconSource: "images/icon_color_conical_gradient.png" onClicked: { - colorEditor.backendValue.resetValue() - if (colorEditor.shapeGradients) { + colorEditor.resetShapeColor() + gradientLine.gradientTypeName = "ConicalGradient" + + if (gradientLine.hasGradient) + gradientLine.updateGradient() + else { gradientLine.deleteGradient() - gradientLine.gradientTypeName = "ConicalGradient" + gradientLine.addGradient() } - gradientLine.addGradient() } - tooltip: qsTr("Concial Gradient") + tooltip: qsTr("Conical Gradient") GradientPopupIndicator { @@ -473,18 +504,94 @@ Column { id: transparentButton iconSource: "images/icon_color_none.png" onClicked: { + gradientLine.deleteGradient() + colorEditor.resetShapeColor() colorEditor.color = "#00000000" - if (colorEditor.supportGradient) - gradientLine.deleteGradient() } tooltip: qsTr("Transparent") } } + Rectangle { + id: gradientPickerButton + width: 20 + height: 20 + visible: colorEditor.supportGradient + + color: "white" + border.color: "white" + border.width: 1 + + ToolTipArea { + anchors.fill: parent + id: toolTipArea + tooltip: qsTr("Gradient Picker Dialog") + } + + GradientPresetList { + id: presetList + visible: false + + function applyPreset() { + if (presetList.gradientData.presetType == 0) { + gradientLine.setPresetByID(presetList.gradientData.presetID); + } + else if (presetList.gradientData.presetType == 1) { + gradientLine.setPresetByStops( + presetList.gradientData.stops, + presetList.gradientData.colors, + presetList.gradientData.stopsCount); + } + else { + console.log("INVALID GRADIENT TYPE: " + + presetList.gradientData.presetType); + } + } + + onApply: { + if (presetList.gradientData.stopsCount > 0) { + applyPreset(); + } + } + + onSaved: { + gradientLine.savePreset(); + presetList.updatePresets(); + } + + onAccepted: { //return key + if (presetList.gradientData.stopsCount > 0) { + applyPreset(); + } + } + } + + Rectangle { + width: 18 + height: 18 + anchors.centerIn: parent + color: "steelblue" + + border.color: "black" + border.width: 1 + + MouseArea { + anchors.fill: parent + onClicked: { + presetList.open() + } + } + } + } + ExpandingSpacer { } } + Item { + height: 8 + } + ColorButton { property color bindedColor: colorEditor.color @@ -496,24 +603,106 @@ Column { enabled: !colorEditor.transparent opacity: checkButton.checked ? 1 : 0 id: colorButton - width: 116 - height: checkButton.checked ? 116 : 0 - Layout.preferredWidth: 116 - Layout.preferredHeight: checkButton.checked ? 116 : 0 + Layout.preferredWidth: 124 + Layout.preferredHeight: checkButton.checked ? 124 : 0 - sliderMargins: Math.max(0, label.width - colorButton.width) + 4 + sliderMargins: 4 onClicked: colorEditor.color = colorButton.color } - SecondColumnLayout { + Item { + height: 1 } Item { - height: 4 - width :4 + height: 2 + visible: checkButton.checked } + Item { + height: 1 + } + + Item { + id: colorBoxes + + Layout.preferredWidth: 134 + Layout.preferredHeight: checkButton.checked ? 70 : 0 + visible: checkButton.checked + + + SecondColumnLayout { + spacing: 16 + RowLayout { + spacing: 2 + Column { + spacing: 5 + Label { + width: parent.width + text: qsTr("Original") + color: "#eee" + } + Rectangle { + id: originalColorRectangle + color: colorEditor.originalColor + height: 40 + width: 67 + + border.width: 1 + border.color: "#555555" + + MouseArea { + anchors.fill: parent + onClicked: { + if (!colorEditor.transparent) + colorEditor.color = colorEditor.originalColor + } + } + } + } + + Column { + spacing: 5 + Label { + width: parent.width + text: qsTr("New") + color: "#eee" + } + Rectangle { + id: newColorRectangle + color: colorEditor.color + height: 40 + width: 67 + + border.width: 1 + border.color: "#555555" + } + } + } + + Column { + spacing: 5 + Label { + width: parent.width + text: qsTr("Recent") + color: "#eee" + elide: Text.ElideRight + } + + SimpleColorPalette { + id: colorPalette + + clickable: !colorEditor.transparent + + onSelectedColorChanged: { + colorEditor.color = colorPalette.selectedColor; + } + } + } + + } + } } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorLine.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorLine.qml new file mode 100644 index 0000000000..c7256ba892 --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorLine.qml @@ -0,0 +1,53 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Creator. +** +** 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. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 3 as published by the Free Software +** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT +** included in the packaging of this file. Please review the following +** information to ensure the GNU General Public License requirements will +** be met: https://www.gnu.org/licenses/gpl-3.0.html. +** +****************************************************************************/ + +import QtQuick 2.1 +import HelperWidgets 2.0 +import QtQuick.Controls.Private 1.0 // showing a ToolTip + +Item { + width: 300 + height: 60 + + property alias currentColor : colorLine.color + + Column { + anchors.fill: parent + + Item { + width: 1 + height: 40 + } + Rectangle { + height: 16 + width: parent.width + border.color: "#555555" + border.width: 1 + + id: colorLine + color: "white" + } + } +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorLogic.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorLogic.qml index 97c03ea921..4426e95cde 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorLogic.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorLogic.qml @@ -28,20 +28,21 @@ import QtQuick.Controls 1.1 as Controls import QtQuick.Controls.Styles 1.0 import QtQuickDesignerTheme 1.0 import "Constants.js" as Constants +import StudioTheme 1.0 as StudioTheme QtObject { id: innerObject property variant backendValue - property color textColor: Theme.color(Theme.PanelTextColorLight) + property color textColor: StudioTheme.Values.themeTextColor//Theme.color(Theme.PanelTextColorLight) property variant valueFromBackend: backendValue.value; property bool baseStateFlag: isBaseState; property bool isInModel: backendValue.isInModel; property bool isInSubState: backendValue.isInSubState; property bool highlight: textColor === __changedTextColor - property color __defaultTextColor: Theme.color(Theme.PanelTextColorLight) - readonly property color __changedTextColor: Theme.color(Theme.QmlDesigner_HighlightColor) + property color __defaultTextColor: StudioTheme.Values.themeTextColor//Theme.color(Theme.PanelTextColorLight) + readonly property color __changedTextColor: StudioTheme.Values.themeInteraction//Theme.color(Theme.QmlDesigner_HighlightColor) onBackendValueChanged: { evaluate(); diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ComboBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ComboBox.qml index 08f76b4f25..62a285a52b 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ComboBox.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ComboBox.qml @@ -24,15 +24,16 @@ ****************************************************************************/ import QtQuick 2.1 -import QtQuick.Controls 1.1 as Controls import QtQuick.Controls.Styles 1.1 +import StudioControls 1.0 as StudioControls +import StudioTheme 1.0 as StudioTheme -Controls.ComboBox { +StudioControls.ComboBox { id: comboBox property variant backendValue - property color textColor: colorLogic.textColor + labelColor: edit ? StudioTheme.Values.themeTextColor : colorLogic.textColor property string scope: "Qt" property bool useInteger: false @@ -45,6 +46,19 @@ Controls.ComboBox { property bool block: false + property bool showExtendedFunctionButton: true + + ExtendedFunctionLogic { + id: extFuncLogic + backendValue: comboBox.backendValue + } + + actionIndicator.icon.color: extFuncLogic.color + actionIndicator.icon.text: extFuncLogic.glyph + actionIndicator.onClicked: extFuncLogic.show() + + actionIndicator.visible: showExtendedFunctionButton + ColorLogic { id: colorLogic backendValue: comboBox.backendValue @@ -84,7 +98,7 @@ Controls.ComboBox { } } - onCurrentTextChanged: { + onActivated: { if (!__isCompleted) return; @@ -106,14 +120,4 @@ Controls.ComboBox { __isCompleted = true; } - style: CustomComboBoxStyle { - textColor: comboBox.textColor - } - - ExtendedFunctionButton { - x: 2 - anchors.verticalCenter: parent.verticalCenter - backendValue: comboBox.backendValue - visible: comboBox.enabled - } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/DoubleSpinBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/DoubleSpinBox.qml index ca789fab43..5b368565ae 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/DoubleSpinBox.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/DoubleSpinBox.qml @@ -24,20 +24,70 @@ ****************************************************************************/ import QtQuick 2.1 -import QtQuick.Controls 1.0 import QtQuickDesignerTheme 1.0 +import StudioControls 1.0 as StudioControls -SpinBox { - id: spinBox - width: 76 - decimals: 2 - stepSize: 0.1 - minimumValue: 0 - maximumValue: 1 +Item { + id: wrapper - property color textColor: Theme.color(Theme.PanelTextColorLight) + property alias decimals: spinBox.decimals + property alias hasSlider: spinBox.hasSlider - style: CustomSpinBoxStyle { + property real minimumValue: 0.0 + property real maximumValue: 1.0 + property real stepSize: 0.1 + + property alias sliderIndicatorVisible: spinBox.sliderIndicatorVisible + + property real value + + onValueChanged: spinBox.value = wrapper.value * spinBox.factor + + signal compressedValueModified + signal valueModified + + width: 90 + implicitHeight: spinBox.height + + onStepSizeChanged: spinBox.convert("stepSize", wrapper.stepSize) + onMinimumValueChanged: spinBox.convert("from", wrapper.minimumValue) + onMaximumValueChanged: spinBox.convert("to", wrapper.maximumValue) + + StudioControls.SpinBox { + id: spinBox + + onValueModified: wrapper.valueModified() + onCompressedValueModified: wrapper.compressedValueModified() + + onValueChanged: { + if (spinBox.__initialized) + wrapper.value = spinBox.value / spinBox.factor + } + + width: wrapper.width + decimals: 2 + + actionIndicatorVisible: false + + property bool __initialized: false + + property bool hasSlider: spinBox.sliderIndicatorVisible + + Component.onCompleted: { + spinBox.__initialized = true + + spinBox.convert("stepSize", wrapper.stepSize) + spinBox.convert("from", wrapper.minimumValue) + spinBox.convert("to", wrapper.maximumValue) + + spinBox.value = wrapper.value * spinBox.factor + } + + function convert(target, value) { + if (!spinBox.__initialized) + return + spinBox[target] = Math.round(value * spinBox.factor) + } } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ExtendedFunctionLogic.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ExtendedFunctionLogic.qml new file mode 100644 index 0000000000..f64dd62220 --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ExtendedFunctionLogic.qml @@ -0,0 +1,207 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Creator. +** +** 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. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 3 as published by the Free Software +** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT +** included in the packaging of this file. Please review the following +** information to ensure the GNU General Public License requirements will +** be met: https://www.gnu.org/licenses/gpl-3.0.html. +** +****************************************************************************/ + +import QtQuick 2.1 +import StudioControls 1.0 as StudioControls +import StudioTheme 1.0 as StudioTheme +import QtQuickDesignerTheme 1.0 + +Item { + id: extendedFunctionButton + + property variant backendValue + property bool isBoundBackend: backendValue.isBound + property string backendExpression: backendValue.expression + + property string glyph: StudioTheme.Constants.actionIcon + property string color: StudioTheme.Constants.themeTextColor + property alias menuLoader: menuLoader + + signal reseted + + function show() { + menuLoader.show() + } + + function setIcon() { + extendedFunctionButton.color = StudioTheme.Values.themeTextColor + if (backendValue === null) { + extendedFunctionButton.glyph = StudioTheme.Constants.actionIcon + } else if (backendValue.isBound) { + if (backendValue.isTranslated) { + // translations are a special case + extendedFunctionButton.glyph = StudioTheme.Constants.actionIcon + } else { + extendedFunctionButton.glyph = StudioTheme.Constants.actionIconBinding + extendedFunctionButton.color = StudioTheme.Values.themeInteraction + } + } else { + if (backendValue.complexNode !== null + && backendValue.complexNode.exists) { + + } else { + extendedFunctionButton.glyph = StudioTheme.Constants.actionIcon + } + } + } + + onBackendValueChanged: { + setIcon() + } + + onIsBoundBackendChanged: { + setIcon() + } + + onBackendExpressionChanged: { + setIcon() + } + + Loader { + id: menuLoader + + active: false + + function show() { + active = true + item.popup() + } + + sourceComponent: Component { + StudioControls.Menu { + id: menu + + onAboutToShow: { + exportMenuItem.checked = backendValue.hasPropertyAlias() + exportMenuItem.enabled = !backendValue.isAttachedProperty() + } + + StudioControls.MenuItem { + text: qsTr("Reset") + onTriggered: { + transaction.start() + backendValue.resetValue() + backendValue.resetValue() + transaction.end() + extendedFunctionButton.reseted() + } + } + StudioControls.MenuItem { + text: qsTr("Set Binding") + onTriggered: expressionDialogLoader.show() + } + StudioControls.MenuItem { + id: exportMenuItem + text: qsTr("Export Property as Alias") + onTriggered: { + if (checked) + backendValue.exportPopertyAsAlias() + else + backendValue.removeAliasExport() + } + checkable: true + } + + StudioControls.MenuItem { + text: qsTr("Insert Keyframe") + enabled: hasActiveTimeline + onTriggered: insertKeyframe(backendValue.name) + } + } + } + } + + Loader { + id: expressionDialogLoader + parent: itemPane + anchors.fill: parent + + visible: false + active: visible + + function show() { + expressionDialogLoader.visible = true + } + + sourceComponent: Component { + Item { + id: expressionDialog + anchors.fill: parent + + Component.onCompleted: { + textField.text = backendValue.expression + textField.forceActiveFocus() + } + + Rectangle { + anchors.fill: parent + color: Theme.qmlDesignerBackgroundColorDarker() + opacity: 0.6 + } + + MouseArea { + anchors.fill: parent + onDoubleClicked: expressionDialog.visible = false + } + + Rectangle { + x: 4 + Component.onCompleted: { + var pos = itemPane.mapFromItem( + extendedFunctionButton.parent, 0, 0) + y = pos.y + 2 + } + + width: parent.width - 8 + height: 260 + + radius: 2 + color: Theme.qmlDesignerBackgroundColorDarkAlternate() + border.color: Theme.qmlDesignerBorderColor() + + Label { + x: 8 + y: 6 + font.bold: true + text: qsTr("Binding Editor") + } + ExpressionTextField { + id: textField + onRejected: expressionDialogLoader.visible = false + onAccepted: { + backendValue.expression = textField.text.trim() + expressionDialogLoader.visible = false + } + anchors.fill: parent + anchors.leftMargin: 8 + anchors.rightMargin: 8 + anchors.topMargin: 24 + anchors.bottomMargin: 32 + } + } + } + } + } +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FlickableSection.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FlickableSection.qml index 7a90e89413..50590efc1f 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FlickableSection.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FlickableSection.qml @@ -32,40 +32,12 @@ Section { anchors.right: parent.right caption: qsTr("Flickable") - SectionLayout { - Label { - text: qsTr("Content size") - } - - SecondColumnLayout { - - Label { - text: "W" - width: 12 - } - - SpinBox { - backendValue: backendValues.contentWidth - minimumValue: 0 - maximumValue: 8000 - } - - Label { - text: "H" - width: 12 - } - - SpinBox { - backendValue: backendValues.contentHeight - minimumValue: 0 - maximumValue: 8000 + id: root - } + property int spinBoxWidth: 62 - ExpandingSpacer { + SectionLayout { - } - } Label { text: qsTr("Flick direction") @@ -83,7 +55,7 @@ Section { Label { text: qsTr("Behavior") - tooltip: qsTr("Bounds behavior") + tooltip: qsTr("Determines whether the surface may be dragged beyond the Flickable's boundaries, or overshoot the Flickable's boundaries when flicked.") } SecondColumnLayout { @@ -96,6 +68,22 @@ Section { } + + Label { + text: qsTr("Movement") + tooltip: qsTr("Determines whether the flickable will give a feeling that the edges of the view are soft, rather than a hard physical boundary.") + } + + SecondColumnLayout { + ComboBox { + backendValue: backendValues.boundsMovement + model: ["FollowBoundsBehavior", "StopAtBounds"] + Layout.fillWidth: true + scope: "Flickable" + } + + } + Label { text:qsTr("Interactive") } @@ -143,5 +131,202 @@ Section { } } + Label { + text: qsTr("Press delay") + tooltip: qsTr("Holds the time to delay (ms) delivering a press to children of the Flickable.") + } + + SecondColumnLayout { + SpinBox { + backendValue: backendValues.pressDelay + minimumValue: 0 + maximumValue: 2000 + decimals: 0 + } + + ExpandingSpacer { + } + } + + Label { + text:qsTr("Pixel aligned") + } + + SecondColumnLayout { + CheckBox { + backendValue: backendValues.pixelAligned + tooltip: qsTr("Sets the alignment of contentX and contentY to pixels (true) or subpixels (false).") + } + + ExpandingSpacer { + } + } + + Label { + text: qsTr("Content size") + } + + SecondColumnLayout { + + Label { + text: "W" + width: 28 + } + + SpinBox { + backendValue: backendValues.contentWidth + minimumValue: 0 + maximumValue: 8000 + implicitWidth: root.spinBoxWidth + } + + Item { + width: 4 + height: 4 + } + + Label { + text: "H" + width: 28 + } + + SpinBox { + backendValue: backendValues.contentHeight + minimumValue: 0 + maximumValue: 8000 + implicitWidth: root.spinBoxWidth + + } + + ExpandingSpacer { + + } + } + + Label { + text: qsTr("Content") + } + + SecondColumnLayout { + + Label { + text: "X" + width: 28 + } + + SpinBox { + backendValue: backendValues.contentX + minimumValue: 0 + maximumValue: 8000 + implicitWidth: root.spinBoxWidth + } + + Item { + width: 4 + height: 4 + } + + Label { + text: "Y" + width: 28 + } + + SpinBox { + backendValue: backendValues.contentY + minimumValue: 0 + maximumValue: 8000 + implicitWidth: root.spinBoxWidth + + } + + ExpandingSpacer { + + } + } + + Label { + text: qsTr("Margins") + } + + SecondColumnLayout { + Layout.fillWidth: true + + Label { + text: "Top" + width: 28 + } + + SpinBox { + backendValue: backendValues.topMargin + maximumValue: 0xffff + minimumValue: 0 + decimals: 0 + implicitWidth: root.spinBoxWidth + } + + Item { + width: 4 + height: 4 + } + + Label { + text: "Bottom" + width: 28 + } + + SpinBox { + backendValue: backendValues.bottomMargin + maximumValue: 0xffff + minimumValue: 0 + decimals: 0 + implicitWidth: root.spinBoxWidth + } + ExpandingSpacer { + + } + } + + Label { + text: ("") + } + + SecondColumnLayout { + Layout.fillWidth: true + + Label { + text: "Left" + width: 28 + } + + SpinBox { + backendValue: backendValues.leftMargin + maximumValue: 0xffff + minimumValue: 0 + decimals: 0 + implicitWidth: root.spinBoxWidth + } + + Item { + width: 4 + height: 4 + } + + Label { + text: "Right" + width: 28 + } + + SpinBox { + backendValue: backendValues.rightMargin + maximumValue: 0xffff + minimumValue: 0 + decimals: 0 + implicitWidth: root.spinBoxWidth + } + ExpandingSpacer { + + } + } + } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FontComboBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FontComboBox.qml index 6cca085da7..5d9ae328d2 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FontComboBox.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FontComboBox.qml @@ -26,27 +26,66 @@ import QtQuick 2.1 import HelperWidgets 2.0 import QtQuick.Layouts 1.0 -import QtQuick.Controls 1.0 as Controls +import StudioControls 1.0 as StudioControls -Controls.ComboBox { +StudioControls.ComboBox { id: comboBox property variant backendValue property color textColor: colorLogic.textColor + labelColor: colorLogic.textColor + onTextColorChanged: setColor() editable: true - model: ["Arial", "Times New Roman", "Courier", "Verdana", "Tahoma"] + + property string fontFilter: "*.ttf *.otf" + + + FileResourcesModel { + modelNodeBackendProperty: modelNodeBackend + filter: comboBox.fontFilter + id: fileModel + } + + function fontUrlToName(url) { + var fontLoader = Qt.createQmlObject('import QtQuick 2.0; FontLoader { source: \"' + url + '\"; }', + comboBox, + "dynamicFontLoader"); + return fontLoader.name + } + + function setupModel() { + var files = fileModel.fileModel + var familyNames = ["Arial", "Times New Roman", "Courier", "Verdana", "Tahoma"] + + files.forEach(function (item, index) { + var name = fontUrlToName(fileModel.dirPath + "/" + item) + familyNames.push(name) + }); + + familyNames.sort() + comboBox.model = familyNames + } onModelChanged: { editText = comboBox.backendValue.valueToString } - style: CustomComboBoxStyle { - textColor: comboBox.textColor + ExtendedFunctionLogic { + id: extFuncLogic + backendValue: comboBox.backendValue } + actionIndicator.icon.color: extFuncLogic.color + actionIndicator.icon.text: extFuncLogic.glyph + actionIndicator.onClicked: extFuncLogic.show() + + property bool showExtendedFunctionButton: true + + actionIndicator.visible: showExtendedFunctionButton + ColorLogic { id: colorLogic backendValue: comboBox.backendValue @@ -82,21 +121,16 @@ Controls.ComboBox { backendValue.value = indexText; } - ExtendedFunctionButton { - x: 2 - anchors.verticalCenter: parent.verticalCenter - backendValue: comboBox.backendValue - visible: comboBox.enabled - } - Connections { target: modelNodeBackend onSelectionChanged: { comboBox.editText = backendValue.value + setupModel() } } Component.onCompleted: { + setupModel() //Hack to style the text input for (var i = 0; i < comboBox.children.length; i++) { if (comboBox.children[i].text !== undefined) { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FontSection.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FontSection.qml index 10d562da15..28621e4be6 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FontSection.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FontSection.qml @@ -26,7 +26,7 @@ import QtQuick 2.1 import HelperWidgets 2.0 import QtQuick.Layouts 1.0 -import QtQuick.Controls 1.0 as Controls +import StudioControls 1.0 as StudioControls import QtQuickDesignerTheme 1.0 Section { @@ -63,6 +63,7 @@ Section { FontComboBox { backendValue: fontSection.fontFamily Layout.fillWidth: true + width: 160 } Label { @@ -111,11 +112,13 @@ Section { } } - Controls.ComboBox { + StudioControls.ComboBox { id: sizeType model: ["pixels", "points"] property color textColor: Theme.color(Theme.PanelTextColorLight) - onCurrentIndexChanged: { + actionIndicatorVisible: false + + onActivated: { if (sizeWidget.isSetup) return; if (currentText == "pixels") { @@ -128,10 +131,6 @@ Section { } Layout.fillWidth: true - - style: CustomComboBoxStyle { - } - } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FontStyleButtons.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FontStyleButtons.qml index 23e5db53e5..ff06c1e1bd 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FontStyleButtons.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FontStyleButtons.qml @@ -25,6 +25,7 @@ import QtQuick 2.1 import HelperWidgets 2.0 +import StudioTheme 1.0 as StudioTheme ButtonRow { @@ -34,25 +35,31 @@ ButtonRow { property variant strikeout: backendValues.font_strikeout BoolButtonRowButton { - standardIconSource: "image://icons/style-bold" - highlightedIconSource: "image://icons/style-bold-h" + buttonIcon: StudioTheme.Constants.fontStyleBold backendValue: bold } + Item { + width: 4 + height: 4 + } BoolButtonRowButton { - standardIconSource: "image://icons/style-italic" - highlightedIconSource: "image://icons/style-italic-h" + buttonIcon: StudioTheme.Constants.fontStyleItalic backendValue: italic } + Item { + width: 4 + height: 4 + } BoolButtonRowButton { - standardIconSource: "image://icons/style-underline" - highlightedIconSource: "image://icons/style-underline-h" + buttonIcon: StudioTheme.Constants.fontStyleUnderline backendValue: underline } - + Item { + width: 4 + height: 4 + } BoolButtonRowButton { - standardIconSource: "image://icons/style-strikeout" - highlightedIconSource: "image://icons/style-strikeout-h" + buttonIcon: StudioTheme.Constants.fontStyleStrikethrough backendValue: strikeout } - } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientLine.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientLine.qml index 0f0c8b8586..f1886ada43 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientLine.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientLine.qml @@ -40,6 +40,8 @@ Item { property alias gradientPropertyName: gradientModel.gradientPropertyName property alias gradientTypeName: gradientModel.gradientTypeName + signal selectedNodeChanged + onHasGradientChanged: { colorLine.invalidate() } @@ -59,6 +61,26 @@ Item { gradientModel.deleteGradient() } + function setPresetByID(presetID) { + gradientModel.setPresetByID(presetID) + colorLine.invalidate() + colorLine.select(0) + } + + function setPresetByStops(stopsPositions, stopsColors, stopsCount) { + gradientModel.setPresetByStops(stopsPositions, stopsColors, stopsCount) + colorLine.invalidate() + colorLine.select(0) + } + + function savePreset() { + gradientModel.savePreset() + } + + function updateGradient() { + gradientModel.updateGradient() + } + Connections { target: modelNodeBackend onSelectionChanged: { @@ -89,6 +111,7 @@ Item { gradientModel.lock() currentColor = repeater.itemAt(index).item.color gradientModel.unlock() + selectedNodeChanged() } function invalidate() { @@ -118,6 +141,7 @@ Item { height: 40 anchors.left: parent.left anchors.right: parent.right + cursorShape: Qt.PointingHandCursor onClicked: { var currentPosition = mouseX / colorLine.effectiveWidth @@ -305,6 +329,7 @@ Item { drag.maximumX: colorLine.effectiveWidth drag.minimumY: !readOnly ? 0 : 20 drag.maximumY: 20 + cursorShape: Qt.PointingHandCursor // using pressed property instead of drag.active which was not working onExited: { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetList.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetList.qml new file mode 100644 index 0000000000..b96d858ba4 --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetList.qml @@ -0,0 +1,129 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Creator. +** +** 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. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 3 as published by the Free Software +** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT +** included in the packaging of this file. Please review the following +** information to ensure the GNU General Public License requirements will +** be met: https://www.gnu.org/licenses/gpl-3.0.html. +** +****************************************************************************/ + +import QtQuick 2.11 +import QtQuick.Layouts 1.12 +import QtQuick.Controls 2.5 +import QtQuick.Dialogs 1.3 + +import HelperWidgets 2.0 +import QtQuickDesignerTheme 1.0 + +Dialog { + id: dialogWindow + width: 1200 + height: 650 + title: "Gradient Picker" + + signal saved; + property alias gradientData: gradientPickerData; + + + QtObject { + id: gradientPickerData + property var stops; + property var colors; + property int stopsCount; + property int presetID; + property int presetType; //default(0) or custom(1) + } + + function addGradient(stopsPositions, stopsColors, stopsCount) { + customPresetListModel.addGradient(stopsPositions, stopsColors, stopsCount); + } + + function updatePresets() { + customPresetListModel.readPresets(); + } + + GradientPresetDefaultListModel { id: defaultPresetListModel; } + GradientPresetCustomListModel { id: customPresetListModel; } + + standardButtons: Dialog.NoButton + + Rectangle { + anchors.fill: parent + anchors.margins: -12 + anchors.bottomMargin: -70 + color: "#363636" + ColumnLayout { + anchors.fill: parent + anchors.margins: 13 + anchors.bottomMargin: 71 + TabView { + id: presetTabView + Layout.alignment: Qt.AlignTop | Qt.AlignHCenter + Layout.fillHeight: true + Layout.fillWidth: true + Tab { + title: qsTr("System Presets") + anchors.fill:parent + + GradientPresetTabContent { + id: defaultTabContent + viewModel: defaultPresetListModel + editableName: false + } + + } //tab default + Tab { + title: qsTr("User Presets") + anchors.fill: parent + + GradientPresetTabContent { + id: customTabContent + viewModel: customPresetListModel + editableName: true + onPresetNameChanged: customPresetListModel.changePresetName(id, name); + property int deleteId; + + onDeleteButtonClicked: { + deleteId = id; + deleteDialog.open() + } + + MessageDialog { + id: deleteDialog + visible: false + modality: Qt.WindowModal + standardButtons: Dialog.No | Dialog.Yes + title: qsTr("Delete preset?") + text: qsTr("Are you sure you want to delete this preset?") + onAccepted: customPresetListModel.deletePreset(customTabContent.deleteId); + } + } + } //tab custom + } //tabview + RowLayout { + Layout.alignment: Qt.AlignBottom | Qt.AlignRight + Layout.topMargin: 5 + + Button { id: buttonClose; text: qsTr("Close"); onClicked: { dialogWindow.reject(); } } + Button { id: buttonSave; text: qsTr("Save"); onClicked: { dialogWindow.saved(); } } + Button { id: buttonApply; text: qsTr("Apply"); onClicked: { dialogWindow.apply(); } } + } //RowLayout + } //ColumnLayout + } //rectangle +} //dialog diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetTabContent.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetTabContent.qml new file mode 100644 index 0000000000..fa59794b14 --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetTabContent.qml @@ -0,0 +1,217 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Creator. +** +** 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. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 3 as published by the Free Software +** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT +** included in the packaging of this file. Please review the following +** information to ensure the GNU General Public License requirements will +** be met: https://www.gnu.org/licenses/gpl-3.0.html. +** +****************************************************************************/ + +import QtQuick 2.11 +import QtQuick.Layouts 1.12 +import QtQuick.Controls 2.5 +import QtQuick.Controls.Styles 1.4 +import QtQuick.Dialogs 1.3 + +import HelperWidgets 2.0 +import QtQuickDesignerTheme 1.0 + + +Rectangle { + id: tabBackground + width: parent.width + height: parent.height + color: "#242424" + anchors.fill: parent + + property alias viewModel : gradientTable.model; + property bool editableName : false; + signal presetNameChanged(int id, string name) + signal deleteButtonClicked(int id) + + property int delegateWidth: 153; + property int delegateHeight: 173; + property int gridCellWidth: 160; + + + ScrollView { + Layout.fillWidth: true + Layout.fillHeight: true + anchors.fill: parent + + GridView { + id: gradientTable + Layout.fillWidth: true + Layout.fillHeight: true + anchors.fill: parent + anchors.leftMargin: 10 + clip: true + delegate: gradientDelegate + + + property int gridColumns: width / tabBackground.gridCellWidth; + cellWidth: width / gridColumns + cellHeight: 180 + + Component { + id: gradientDelegate + + Rectangle { + id: backgroundCard + color: "#404040" + clip: false + + property real flexibleWidth: (gradientTable.width - gradientTable.cellWidth * gradientTable.gridColumns) / gradientTable.gridColumns + width: gradientTable.cellWidth + flexibleWidth - 8; height: tabBackground.delegateHeight + radius: 16 + + MouseArea { + id: rectMouseArea + anchors.fill: parent + hoverEnabled: true + onClicked: { + gradientTable.currentIndex = index; + gradientData.stops = stopsPosList; + gradientData.colors = stopsColorList; + gradientData.stopsCount = stopListSize; + gradientData.presetID = presetID; + gradientData.presetType = presetTabView.currentIndex + +// console.log( "#" + preset + " " + presetName + " Stops: " + stopsPosList + " Colors: " + stopsColorList); + } + onEntered: { + if (backgroundCard.state != "CLICKED") { + backgroundCard.state = "HOVER"; + } + } + onExited: { + if (backgroundCard.state != "CLICKED") { + backgroundCard.state = "USUAL"; + } + } + } //mouseArea + + states: [ + State { + name: "HOVER" + PropertyChanges { + target: backgroundCard + color: "#606060" + z: 5 + clip: true + border.width: 1 + border.color: "#029de0" + } + }, + State { + name: "USUAL" + PropertyChanges + { + target: backgroundCard + color: "#404040" + scale: 1.0 + border.width: 0 + } + } + ] //states + + ColumnLayout { + anchors.fill: parent + + Rectangle { + width: 150; height: 150 + id: gradientRect + radius: 16 + Layout.alignment: Qt.AlignHCenter | Qt.AlignTop + Layout.topMargin: 2 + gradient: Gradient { + id: showGr + } + + Component { + id: stopComponent + GradientStop {} + } + + Component.onCompleted: { + var stopsAmount = stopListSize; + var newStops = []; + for (var i = 0; i < stopsAmount; i++ ) { + newStops.push( stopComponent.createObject(showGr, { "position": stopsPosList[i], "color": stopsColorList[i] }) ); + } + showGr.stops = newStops; + } + + Rectangle { + id: removeItemRect + anchors.right: parent.right + anchors.rightMargin: 2 + anchors.top: parent.top + anchors.topMargin: 2 + height: 16 + width: 16 + visible: editableName && rectMouseArea.containsMouse + color: "#804682b4" + + + MouseArea { + anchors.fill: parent; + onClicked: tabBackground.deleteButtonClicked(index); + } + + Image { + id: remoreItemImg + source: "image://icons/close" + fillMode: Image.PreserveAspectFit + anchors.fill: parent; + Layout.alignment: Qt.AlignCenter + } + } + } //rectangle gradient + + TextInput { + id: presetNameBox + readOnly: !editableName + text: (presetName) + Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom + Layout.preferredWidth: backgroundCard.width + Layout.topMargin: -5 + padding: 5.0 + topPadding: -2.0 + horizontalAlignment: Text.AlignHCenter + wrapMode: Text.Wrap + color: "#ffffff" + activeFocusOnPress: true + + onEditingFinished: tabBackground.presetNameChanged(index, text); + + Keys.onPressed: { + if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return) { + event.accepted = true; + editingFinished(); + focus = false; + } + } //Keys.onPressed + } //textInput + } //columnLayout + } //rectangle background + } //component delegate + } //gridview + } //scrollView +} //rectangle diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPropertySpinBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPropertySpinBox.qml index 4ca86b097d..54483e1598 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPropertySpinBox.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPropertySpinBox.qml @@ -25,20 +25,20 @@ import QtQuick 2.1 import QtQuick.Layouts 1.0 -import QtQuick.Controls 1.0 as Controls import QtQuickDesignerTheme 1.0 -import QtQuick.Controls.Styles 1.1 +import StudioControls 1.0 as StudioControls -DoubleSpinBox { +StudioControls.SpinBox { id: spinBox width: 82 Layout.minimumWidth: 82 property string propertyName + actionIndicatorVisible: false - minimumValue: -9999 - maximumValue: 9999 + from: -9999 + to: 9999 Component.onCompleted: spinBox.value = gradientLine.model.readGradientProperty(propertyName) - onValueChanged: gradientLine.model.setGradientProperty(propertyName, spinBox.value) + onCompressedValueModified: gradientLine.model.setGradientProperty(propertyName, spinBox.value) stepSize: 1 } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/Label.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/Label.qml index 8498f838ac..e4129c6dcf 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/Label.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/Label.qml @@ -28,6 +28,7 @@ import QtQuick.Controls 1.1 as Controls import QtQuick.Layouts 1.0 import QtQuick.Controls.Private 1.0 import QtQuickDesignerTheme 1.0 +import StudioTheme 1.0 as StudioTheme Controls.Label { id: label @@ -36,10 +37,12 @@ Controls.Label { // workaround because PictureSpecifics.qml still use this property alias toolTip: toolTipArea.tooltip - width: Math.max(Math.min(240, parent.width - 220), 80) + width: Math.max(Math.min(240, parent.width - 280), 50) color: Theme.color(Theme.PanelTextColorLight) elide: Text.ElideRight + font.pixelSize: StudioTheme.Values.myFontSize + Layout.preferredWidth: width Layout.minimumWidth: width Layout.maximumWidth: width diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/LineEdit.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/LineEdit.qml index c4ff04b7f1..90e222bead 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/LineEdit.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/LineEdit.qml @@ -24,24 +24,21 @@ ****************************************************************************/ import QtQuick 2.2 -import QtQuick.Controls 1.1 as Controls +import StudioControls 1.0 as StudioControls +import StudioTheme 1.0 as StudioTheme import QtQuick.Controls.Styles 1.0 import QtQuickDesignerTheme 1.0 -Controls.TextField { - - Controls.Action { - //Workaround to avoid that "Delete" deletes the item. - shortcut: "Delete" - } - +StudioControls.TextField { id: lineEdit + property variant backendValue property color borderColor: "#222" property color highlightColor: "orange" - property color textColor: colorLogic.textColor + color: lineEdit.edit ? StudioTheme.Values.themeTextColor : colorLogic.textColor property bool showTranslateCheckBox: true + translationIndicatorVisible: showTranslateCheckBox property bool writeValueManually: false @@ -49,6 +46,8 @@ Controls.TextField { property bool showExtendedFunctionButton: true + actionIndicator.visible: showExtendedFunctionButton + signal commitData property string context @@ -58,19 +57,21 @@ Controls.TextField { if (translateFunction() === "qsTranslate") { backendValue.expression = translateFunction() + "(\"" + backendValue.getTranslationContext() - + "\", " + "\"" + trCheckbox.escapeString(text) + "\")" + + "\", " + "\"" + escapeString(text) + "\")" } else { - backendValue.expression = translateFunction() + "(\"" + trCheckbox.escapeString(text) + "\")" + backendValue.expression = translateFunction() + "(\"" + escapeString(text) + "\")" } } - ExtendedFunctionButton { - x: 4 - anchors.verticalCenter: parent.verticalCenter + ExtendedFunctionLogic { + id: extFuncLogic backendValue: lineEdit.backendValue - visible: lineEdit.enabled && showExtendedFunctionButton } + actionIndicator.icon.color: extFuncLogic.color + actionIndicator.icon.text: extFuncLogic.glyph + actionIndicator.onClicked: extFuncLogic.show() + ColorLogic { id: colorLogic backendValue: lineEdit.backendValue @@ -102,7 +103,6 @@ Controls.TextField { } onEditingFinished: { - if (writeValueManually) return @@ -118,87 +118,35 @@ Controls.TextField { __dirty = false } - style: TextFieldStyle { - - selectionColor: Theme.color(Theme.PanelTextColorLight) - selectedTextColor: Theme.color(Theme.PanelTextColorMid) - textColor: lineEdit.textColor - placeholderTextColor: Theme.color(Theme.PanelTextColorMid) - - padding.top: 2 - padding.bottom: 2 - padding.left: 18 - padding.right: lineEdit.showTranslateCheckBox ? 16 : 1 - background: Rectangle { - implicitWidth: 100 - implicitHeight: 24 - color: Theme.qmlDesignerBackgroundColorDarker() - border.color: Theme.qmlDesignerBorderColor() - } - } - - Controls.CheckBox { - anchors.right: parent.right - anchors.verticalCenter: parent.verticalCenter - id: trCheckbox + property bool isTranslated: colorLogic.backendValue.isTranslated - - property bool isTranslated: colorLogic.backendValue.isTranslated - property bool backendValueValue: colorLogic.backendValue.value - - onIsTranslatedChanged: { - checked = lineEdit.backendValue.isTranslated - } - - onBackendValueValueChanged: { - checked = lineEdit.backendValue.isTranslated + translationIndicator.onClicked: { + if (translationIndicator.checked) { + setTranslateExpression() + } else { + var textValue = lineEdit.text + lineEdit.backendValue.value = textValue } + colorLogic.evaluate(); + } - onClicked: { - if (trCheckbox.checked) { - setTranslateExpression() - } else { - var textValue = lineEdit.text - lineEdit.backendValue.value = textValue - } - colorLogic.evaluate(); - } + property variant backendValueValueInternal: backendValue.value + onBackendValueValueInternalChanged: { + lineEdit.translationIndicator.checked = lineEdit.backendValue.isTranslated + } - function escapeString(string) { - var str = string; - str = str.replace(/\\/g, "\\\\"); - str.replace(/\"/g, "\\\""); - str = str.replace(/\t/g, "\\t"); - str = str.replace(/\r/g, "\\r"); - str = str.replace(/\n/g, '\\n'); - return str; - } + onIsTranslatedChanged: { + lineEdit.translationIndicator.checked = lineEdit.backendValue.isTranslated + } - visible: showTranslateCheckBox - - - style: CheckBoxStyle { - spacing: 8 - indicator: Item { - implicitWidth: 15 - implicitHeight: 15 - x: 7 - y: 1 - Rectangle { - anchors.fill: parent - border.color: Theme.qmlDesignerBorderColor() - color: Theme.qmlDesignerBackgroundColorDarker() - opacity: control.hovered || control.pressed ? 1 : 0.75 - } - Image { - x: 1 - y: 1 - width: 13 - height: 13 - source: "image://icons/tr" - opacity: control.checked ? 1 : 0.3; - } - } - } + function escapeString(string) { + var str = string; + str = str.replace(/\\/g, "\\\\"); + str.replace(/\"/g, "\\\""); + str = str.replace(/\t/g, "\\t"); + str = str.replace(/\r/g, "\\r"); + str = str.replace(/\n/g, '\\n'); + return str; } + } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/Section.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/Section.qml index b7c2664bdc..10b09287b7 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/Section.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/Section.qml @@ -27,6 +27,7 @@ import QtQuick 2.1 import QtQuick.Controls 1.1 as Controls import QtQuick.Layouts 1.0 import QtQuickDesignerTheme 1.0 +import StudioTheme 1.0 as StudioTheme Item { id: section @@ -54,6 +55,7 @@ Item { color: Theme.color(Theme.PanelTextColorLight) x: 22 font.bold: true + font.pixelSize: StudioTheme.Values.myFontSize } Image { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/SimpleColorPalette.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/SimpleColorPalette.qml new file mode 100644 index 0000000000..9cc787bd23 --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/SimpleColorPalette.qml @@ -0,0 +1,108 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Creator. +** +** 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. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 3 as published by the Free Software +** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT +** included in the packaging of this file. Please review the following +** information to ensure the GNU General Public License requirements will +** be met: https://www.gnu.org/licenses/gpl-3.0.html. +** +****************************************************************************/ + +import QtQuick 2.1 +import QtQuick.Controls 2.5 +import StudioControls 1.0 as StudioControls +import HelperWidgets 2.0 +import QtQuick.Controls.Private 1.0 // showing a ToolTip + +Item { + property color selectedColor + property bool clickable : true + + + width: 200 + height: 40 + enabled: clickable + + function addColorToPalette(colorCode) + { + paletteModel.addItem(colorCode) + } + + Component { + id: colorItemDelegate + + + Rectangle { + id: backgroundColor + property var favorite : isFavorite + height: 27 + width: 27 + border.color: (backgroundColor.favorite ? "#ffd700" : "#555555") + border.width: (backgroundColor.favorite ? 2 : 1) + color: "white" + radius: 0 + + Rectangle { + id: colorRectangle + width: 25 + height: 25 + anchors.centerIn: parent + color: colorCode + + border.color: "black" + border.width: 1 + } + + MouseArea { + anchors.fill: parent + acceptedButtons: Qt.LeftButton | Qt.RightButton + onClicked: { + if ((mouse.button === Qt.LeftButton) && clickable) + selectedColor = colorRectangle.color + } + onPressed: { + if (mouse.button === Qt.RightButton) + contextMenu.popup() + } + } + StudioControls.Menu { + id: contextMenu + StudioControls.MenuItem { + text: (backgroundColor.favorite + ? qsTr("Remove from Favorites") + : qsTr("Add to Favorites")) + onTriggered: { + paletteModel.toggleFavorite(index) + } + } + } + } + } + + SimpleColorPaletteModel { id: paletteModel } + ListView { + id: colorPaletteView + model: paletteModel + delegate: colorItemDelegate + orientation: Qt.Horizontal + anchors.fill: parent + clip: true + interactive: false + spacing: 2 + } +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/SpinBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/SpinBox.qml index cc50509cc0..02665fc77a 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/SpinBox.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/SpinBox.qml @@ -24,42 +24,79 @@ ****************************************************************************/ import QtQuick 2.1 -import QtQuick.Controls 1.1 as Controls import QtQuick.Controls.Styles 1.1 +import StudioControls 1.0 as StudioControls +import StudioTheme 1.0 as StudioTheme -Controls.SpinBox { - id: spinBox +Item { + id: wrapper - property color textColor: colorLogic.textColor - property variant backendValue; + property alias decimals: spinBox.decimals + property alias hasSlider: spinBox.hasSlider - implicitWidth: 74 + property real minimumValue: 0.0 + property real maximumValue: 99 + property real stepSize: 1.0 - ExtendedFunctionButton { - x: 4 - anchors.verticalCenter: parent.verticalCenter - backendValue: spinBox.backendValue - visible: spinBox.enabled - } + property alias backendValue: spinBox.backendValue + property alias sliderIndicatorVisible: spinBox.sliderIndicatorVisible - ColorLogic { - id: colorLogic - backendValue: spinBox.backendValue - onValueFromBackendChanged: { - spinBox.value = valueFromBackend; - } - } + width: 96 + implicitHeight: spinBox.height - property bool hasSlider: false + property bool __initialized: false - height: hasSlider ? 32 : implicitHeight + Component.onCompleted: { + wrapper.__initialized = true - onValueChanged: { - if (backendValue.value !== value) - backendValue.value = value; + convert("stepSize", stepSize) + convert("from", minimumValue) + convert("to", maximumValue) } - style: CustomSpinBoxStyle { + onStepSizeChanged: convert("stepSize", stepSize) + onMinimumValueChanged: convert("from", minimumValue) + onMaximumValueChanged: convert("to", maximumValue) + + function convert(target, value) { + if (!wrapper.__initialized) + return + spinBox[target] = Math.round(value * spinBox.factor) } + StudioControls.SpinBox { + id: spinBox + + property real realValue: value / factor + property variant backendValue + property bool hasSlider: wrapper.sliderIndicatorVisible + + from: minimumValue * factor + to: maximumValue * factor + width: wrapper.width + + ExtendedFunctionLogic { + id: extFuncLogic + backendValue: spinBox.backendValue + } + + actionIndicator.icon.color: extFuncLogic.color + actionIndicator.icon.text: extFuncLogic.glyph + actionIndicator.onClicked: extFuncLogic.show() + + ColorLogic { + id: colorLogic + backendValue: spinBox.backendValue + onValueFromBackendChanged: { + spinBox.value = valueFromBackend * spinBox.factor; + } + } + + labelColor: edit ? StudioTheme.Values.themeTextColor : colorLogic.textColor + + onCompressedValueModified: { + if (backendValue.value !== realValue) + backendValue.value = realValue; + } + } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/TabView.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/TabView.qml index 22c1923fad..b5e0ac0221 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/TabView.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/TabView.qml @@ -27,6 +27,7 @@ import QtQuick 2.1 import QtQuick.Controls 1.0 as Controls import QtQuick.Controls.Styles 1.1 import QtQuickDesignerTheme 1.0 +import StudioTheme 1.0 as StudioTheme Controls.TabView { id: root @@ -42,6 +43,7 @@ Controls.TabView { Text { id: text font.bold: true + font.pixelSize: StudioTheme.Values.myFontSize anchors.centerIn: parent anchors.verticalCenterOffset: -1 text: styleData.title diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ToolTipArea.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ToolTipArea.qml index 9b51f1f4d3..df39546d93 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ToolTipArea.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ToolTipArea.qml @@ -34,6 +34,8 @@ MouseArea { onExited: Tooltip.hideText() onCanceled: Tooltip.hideText() + onClicked: forceActiveFocus() + hoverEnabled: true property string tooltip diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/UrlChooser.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/UrlChooser.qml index 0c89aa119e..d4b59a32d9 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/UrlChooser.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/UrlChooser.qml @@ -25,7 +25,7 @@ import QtQuick 2.1 import HelperWidgets 2.0 -import QtQuick.Controls 1.1 as Controls +import StudioControls 1.0 as StudioControls import QtQuick.Layouts 1.0 import QtQuick.Controls.Styles 1.1 @@ -49,14 +49,16 @@ RowLayout { backendValue: urlChooser.backendValue } - Controls.ComboBox { + StudioControls.ComboBox { id: comboBox - ExtendedFunctionButton { - x: 2 - anchors.verticalCenter: parent.verticalCenter - backendValue: urlChooser.backendValue - visible: urlChooser.enabled + actionIndicator.icon.color: extFuncLogic.color + actionIndicator.icon.text: extFuncLogic.glyph + actionIndicator.onClicked: extFuncLogic.show() + + ExtendedFunctionLogic { + id: extFuncLogic + backendValue: comboBox.backendValue } property bool isComplete: false @@ -86,9 +88,6 @@ RowLayout { Layout.fillWidth: true editable: true - style: CustomComboBoxStyle { - textColor: urlChooser.textColor - } model: fileModel.fileModel diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/qmldir b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/qmldir index 2bb87380c3..007fb08d49 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/qmldir +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/qmldir @@ -9,6 +9,7 @@ CheckBox 2.0 CheckBox.qml ColorButton 2.0 ColorButton.qml ColorCheckButton 2.0 ColorCheckButton.qml ColorEditor 2.0 ColorEditor.qml +ColorLine 2.0 ColorLine.qml ColorLogic 2.0 ColorLogic.qml ComboBox 2.0 ComboBox.qml CustomCheckBoxStyle 2.0 CustomCheckBoxStyle.qml @@ -16,11 +17,14 @@ CustomComboBoxStyle 2.0 CustomComboBoxStyle.qml CustomSpinBoxStyle 2.0 CustomSpinBoxStyle.qml ExpandingSpacer 2.0 ExpandingSpacer.qml ExtendedFunctionButton 2.0 ExtendedFunctionButton.qml +ExtendedFunctionLogic 2.0 ExtendedFunctionLogic.qml FlickableSection 2.0 FlickableSection.qml FontComboBox 2.0 FontComboBox.qml FontSection 2.0 FontSection.qml FontStyleButtons 2.0 FontStyleButtons.qml GradientLine 2.0 GradientLine.qml +GradientPresetList 2.0 GradientPresetList.qml +GradientPresetTabContent 2.0 GradientPresetTabContent.qml GroupBox 2.0 GroupBox.qml HueSlider 2.0 HueSlider.qml IconLabel 2.0 IconLabel.qml @@ -31,6 +35,7 @@ ScrollView 2.0 ScrollView.qml SecondColumnLayout 2.0 SecondColumnLayout.qml Section 2.0 Section.qml SectionLayout 2.0 SectionLayout.qml +SimpleColorPalette 2.0 SimpleColorPalette.qml DoubleSpinBox 2.0 DoubleSpinBox.qml SpinBox 2.0 SpinBox.qml StandardTextSection 2.0 StandardTextSection.qml diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/AbstractButton.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/AbstractButton.qml new file mode 100644 index 0000000000..4dec58d4b6 --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/AbstractButton.qml @@ -0,0 +1,120 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Creator. +** +** 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. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 3 as published by the Free Software +** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT +** included in the packaging of this file. Please review the following +** information to ensure the GNU General Public License requirements will +** be met: https://www.gnu.org/licenses/gpl-3.0.html. +** +****************************************************************************/ + +import QtQuick 2.12 +import QtQuick.Templates 2.12 as T +import StudioTheme 1.0 as StudioTheme + +T.AbstractButton { + id: myButton + + property alias buttonIcon: buttonIcon.text + property alias iconColor: buttonIcon.color + property alias backgroundVisible: buttonBackground.visible + + implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, + implicitContentWidth + leftPadding + rightPadding) + implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, + implicitContentHeight + topPadding + bottomPadding) + height: StudioTheme.Values.height + width: StudioTheme.Values.height + z: myButton.checked ? 10 : 3 + activeFocusOnTab: false + + background: Rectangle { + id: buttonBackground + color: myButton.checked ? StudioTheme.Values.themeControlBackgroundChecked : StudioTheme.Values.themeControlBackground + border.color: myButton.checked ? StudioTheme.Values.themeInteraction : StudioTheme.Values.themeControlOutline + border.width: StudioTheme.Values.border + } + + indicator: Item { + x: 0 + y: 0 + implicitWidth: myButton.width + implicitHeight: myButton.height + + T.Label { + id: buttonIcon + color: StudioTheme.Values.themeTextColor + font.family: StudioTheme.Constants.iconFont.family + font.pixelSize: StudioTheme.Values.myIconFontSize + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + anchors.fill: parent + renderType: Text.QtRendering + } + } + + states: [ + State { + name: "default" + when: myButton.enabled && !myButton.hovered && !myButton.pressed + && !myButton.checked + PropertyChanges { + target: buttonBackground + color: StudioTheme.Values.themeControlBackground + } + PropertyChanges { + target: myButton + z: 3 + } + }, + State { + name: "hovered" + when: myButton.hovered && !myButton.pressed + PropertyChanges { + target: buttonBackground + color: StudioTheme.Values.themeHoverHighlight + } + }, + State { + name: "pressed" + when: myButton.hovered && myButton.pressed + PropertyChanges { + target: buttonBackground + color: StudioTheme.Values.themeControlBackgroundPressed + border.color: StudioTheme.Values.themeInteraction + } + PropertyChanges { + target: myButton + z: 10 + } + }, + State { + name: "disabled" + when: !myButton.enabled + PropertyChanges { + target: buttonBackground + color: StudioTheme.Values.themeControlBackgroundDisabled + border.color: StudioTheme.Values.themeControlOutlineDisabled + } + PropertyChanges { + target: buttonIcon + color: StudioTheme.Values.themeTextColorDisabled + } + } + ] +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ActionIndicator.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ActionIndicator.qml new file mode 100644 index 0000000000..c2a660228d --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ActionIndicator.qml @@ -0,0 +1,132 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Creator. +** +** 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. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 3 as published by the Free Software +** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT +** included in the packaging of this file. Please review the following +** information to ensure the GNU General Public License requirements will +** be met: https://www.gnu.org/licenses/gpl-3.0.html. +** +****************************************************************************/ + +import QtQuick 2.12 +import QtQuick.Templates 2.12 as T +import StudioTheme 1.0 as StudioTheme + +Rectangle { + id: actionIndicator + + property Item myControl + + property alias icon: actionIndicatorIcon + + property bool hover: false + property bool pressed: false + + color: StudioTheme.Values.themeControlBackground + border.color: StudioTheme.Values.themeControlOutline + state: "default" + + implicitWidth: StudioTheme.Values.height + implicitHeight: StudioTheme.Values.height + + signal clicked + + T.Label { + id: actionIndicatorIcon + anchors.fill: parent + text: StudioTheme.Constants.actionIcon + color: StudioTheme.Values.themeTextColor + font.family: StudioTheme.Constants.iconFont.family + font.pixelSize: StudioTheme.Values.myIconFontSize + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + } + + MouseArea { + id: actionIndicatorMouseArea + anchors.fill: parent + hoverEnabled: true + onContainsMouseChanged: actionIndicator.hover = containsMouse + onClicked: actionIndicator.clicked() + } + + states: [ + State { + name: "default" + when: myControl.enabled && !actionIndicator.hover + && !actionIndicator.pressed && !myControl.hover + && !myControl.edit && !myControl.drag + PropertyChanges { + target: actionIndicator + color: StudioTheme.Values.themeControlBackground + border.color: StudioTheme.Values.themeControlOutline + } + }, + State { + name: "hovered" + when: actionIndicator.hover && !actionIndicator.pressed + && !myControl.edit && !myControl.drag + PropertyChanges { + target: actionIndicatorIcon + scale: 1.2 + } + }, + State { + name: "globalHover" + when: myControl.hover && !actionIndicator.hover + && !actionIndicator.pressed && !myControl.edit + && !myControl.drag + PropertyChanges { + target: actionIndicator + color: StudioTheme.Values.themeHoverHighlight + border.color: StudioTheme.Values.themeControlOutline + } + }, + State { + name: "edit" + when: myControl.edit + PropertyChanges { + target: actionIndicator + color: StudioTheme.Values.themeFocusEdit + border.color: StudioTheme.Values.themeInteraction + } + }, + State { + name: "drag" + when: myControl.drag + PropertyChanges { + target: actionIndicator + color: StudioTheme.Values.themeFocusDrag + border.color: StudioTheme.Values.themeInteraction + } + }, + State { + name: "disabled" + when: !myControl.enabled + PropertyChanges { + target: actionIndicator + color: StudioTheme.Values.themeControlBackgroundDisabled + border.color: StudioTheme.Values.themeControlOutlineDisabled + } + PropertyChanges { + target: actionIndicatorIcon + color: StudioTheme.Values.themeTextColorDisabled + } + } + ] +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Button.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Button.qml new file mode 100644 index 0000000000..42d7b3eda8 --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Button.qml @@ -0,0 +1,44 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Creator. +** +** 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. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 3 as published by the Free Software +** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT +** included in the packaging of this file. Please review the following +** information to ensure the GNU General Public License requirements will +** be met: https://www.gnu.org/licenses/gpl-3.0.html. +** +****************************************************************************/ + +import QtQuick 2.12 +import QtQuick.Templates 2.12 as T +import StudioTheme 1.0 as StudioTheme + +ButtonRow { + id: myButtonRow + + property alias buttonIcon: myAbstractButton.buttonIcon + property alias iconColor: myAbstractButton.iconColor + property alias checkable: myAbstractButton.checkable + property alias checked: myAbstractButton.checked + + signal onCheckedChanged() + + AbstractButton { + id: myAbstractButton + onCheckedChanged: myButtonRow.onCheckedChanged() + } +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ButtonGroup.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ButtonGroup.qml new file mode 100644 index 0000000000..1b233c590b --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ButtonGroup.qml @@ -0,0 +1,31 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Creator. +** +** 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. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 3 as published by the Free Software +** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT +** included in the packaging of this file. Please review the following +** information to ensure the GNU General Public License requirements will +** be met: https://www.gnu.org/licenses/gpl-3.0.html. +** +****************************************************************************/ + +import QtQuick 2.12 +import QtQuick.Templates 2.12 as T + +T.ButtonGroup { + +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ButtonRow.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ButtonRow.qml new file mode 100644 index 0000000000..059c38ad2c --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ButtonRow.qml @@ -0,0 +1,51 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Creator. +** +** 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. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 3 as published by the Free Software +** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT +** included in the packaging of this file. Please review the following +** information to ensure the GNU General Public License requirements will +** be met: https://www.gnu.org/licenses/gpl-3.0.html. +** +****************************************************************************/ + +import QtQuick 2.12 +import QtQuick.Layouts 1.12 +import QtQuick.Templates 2.12 as T +import StudioTheme 1.0 as StudioTheme + +Row { + // TODO When using Item as root it won't react to outer layout + id: myButtonGroup + + property alias actionIndicator: actionIndicator + + property alias actionIndicatorVisible: actionIndicator.visible + property real __actionIndicatorWidth: StudioTheme.Values.squareComponentWidth + property real __actionIndicatorHeight: StudioTheme.Values.height + + ActionIndicator { + id: actionIndicator + myControl: myButtonGroup // TODO global hover issue. Can be solved with extra property in ActionIndicator + x: 0 + y: 0 + width: actionIndicator.visible ? __actionIndicatorWidth : 0 + height: actionIndicator.visible ? __actionIndicatorHeight : 0 + } + + spacing: -StudioTheme.Values.border // TODO Which one is better? Spacing vs. layout function. ALso depends on root item +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckBox.qml new file mode 100644 index 0000000000..142421ee99 --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckBox.qml @@ -0,0 +1,162 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Creator. +** +** 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. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 3 as published by the Free Software +** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT +** included in the packaging of this file. Please review the following +** information to ensure the GNU General Public License requirements will +** be met: https://www.gnu.org/licenses/gpl-3.0.html. +** +****************************************************************************/ + +import QtQuick 2.12 +import QtQuick.Templates 2.12 as T +import StudioTheme 1.0 as StudioTheme + +T.CheckBox { + id: myCheckBox + + property alias actionIndicator: actionIndicator + + property bool hover: myCheckBox.hovered + property bool edit: false + + property alias actionIndicatorVisible: actionIndicator.visible + property real __actionIndicatorWidth: StudioTheme.Values.squareComponentWidth + property real __actionIndicatorHeight: StudioTheme.Values.height + + property alias labelVisible: checkBoxLabel.visible + property alias labelColor: checkBoxLabel.color + + font.pixelSize: StudioTheme.Values.myFontSize + + implicitWidth: Math.max( + implicitBackgroundWidth + leftInset + rightInset, + implicitContentWidth + leftPadding + rightPadding + + implicitIndicatorWidth + spacing + actionIndicator.width) + implicitHeight: Math.max( + implicitBackgroundHeight + topInset + bottomInset, + implicitContentHeight + topPadding + bottomPadding, + implicitIndicatorHeight + topPadding + bottomPadding) + + spacing: StudioTheme.Values.checkBoxSpacing + hoverEnabled: true + activeFocusOnTab: false + + contentItem: T.Label { + id: checkBoxLabel + leftPadding: 0 + rightPadding: 0 + verticalAlignment: Text.AlignVCenter + text: myCheckBox.text + font: myCheckBox.font + color: StudioTheme.Values.themeTextColor + } + + ActionIndicator { + id: actionIndicator + myControl: myCheckBox // TODO global hover issue. Can be solved with extra property in ActionIndicator + + x: checkBoxLabel.visible ? checkBoxLabel.contentWidth + myCheckBox.spacing : 0 + y: 0 + width: actionIndicator.visible ? __actionIndicatorWidth : 0 + height: actionIndicator.visible ? __actionIndicatorHeight : 0 + } + + indicator: Rectangle { + id: checkBoxBackground + x: actionIndicator.x + actionIndicator.width + - (actionIndicator.visible ? StudioTheme.Values.border : 0) + y: 0 + z: 5 + implicitWidth: StudioTheme.Values.height + implicitHeight: StudioTheme.Values.height + color: StudioTheme.Values.themeControlBackground + border.color: StudioTheme.Values.themeControlOutline + border.width: StudioTheme.Values.border + + T.Label { + id: checkBoxIcon + x: (parent.width - width) / 2 + y: (parent.height - height) / 2 + text: StudioTheme.Constants.tickIcon + visible: myCheckBox.checkState === Qt.Checked + color: StudioTheme.Values.themeTextColor + font.pixelSize: StudioTheme.Values.sliderControlSizeMulti + font.family: StudioTheme.Constants.iconFont.family + } + + /* + // Tristate only + Rectangle { + x: (parent.width - width) / 2 + y: (parent.height - height) / 2 + width: 16 + height: 3 + color: myCheckBox.palette.text + visible: myCheckBox.checkState === Qt.PartiallyChecked + } +*/ + } + + states: [ + State { + name: "default" + when: myCheckBox.enabled && !myCheckBox.hovered + && !myCheckBox.pressed + PropertyChanges { + target: checkBoxBackground + color: StudioTheme.Values.themeControlBackground + } + }, + State { + name: "hovered" + when: myCheckBox.hovered && !myCheckBox.pressed + && !actionIndicator.hover + PropertyChanges { + target: checkBoxBackground + color: StudioTheme.Values.themeHoverHighlight + } + }, + State { + name: "pressed" + when: myCheckBox.hovered && myCheckBox.pressed + PropertyChanges { + target: checkBoxBackground + color: StudioTheme.Values.themeFocusEdit + border.color: StudioTheme.Values.themeInteraction + } + }, + State { + name: "disabled" + when: !myCheckBox.enabled + PropertyChanges { + target: checkBoxBackground + color: StudioTheme.Values.themeControlBackgroundDisabled + border.color: StudioTheme.Values.themeControlOutlineDisabled + } + PropertyChanges { + target: checkBoxIcon + color: StudioTheme.Values.themeTextColorDisabled + } + PropertyChanges { + target: checkBoxLabel + color: StudioTheme.Values.themeTextColorDisabled + } + } + ] +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckIndicator.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckIndicator.qml new file mode 100644 index 0000000000..4c314b9101 --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckIndicator.qml @@ -0,0 +1,138 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Creator. +** +** 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. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 3 as published by the Free Software +** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT +** included in the packaging of this file. Please review the following +** information to ensure the GNU General Public License requirements will +** be met: https://www.gnu.org/licenses/gpl-3.0.html. +** +****************************************************************************/ + +import QtQuick 2.12 +import QtQuick.Templates 2.12 as T +import StudioTheme 1.0 as StudioTheme + +Rectangle { + id: checkIndicator + + property T.Control myControl + property T.Popup myPopup + + property bool hover: false + property bool checked: false + + color: StudioTheme.Values.themeControlBackground + border.color: StudioTheme.Values.themeControlOutline + state: "default" + + Connections { + target: myPopup + onClosed: checkIndicator.checked = false + onOpened: checkIndicator.checked = true + } + + MouseArea { + id: checkIndicatorMouseArea + anchors.fill: parent + hoverEnabled: true + onContainsMouseChanged: checkIndicator.hover = checkIndicatorMouseArea.containsMouse + onPressed: { + myControl.forceActiveFocus() // TODO + myPopup.opened ? myPopup.close() : myPopup.open() + } + } + + T.Label { + id: checkIndicatorIcon + anchors.fill: parent + color: StudioTheme.Values.themeTextColor + text: StudioTheme.Constants.upDownSquare2 + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + font.pixelSize: StudioTheme.Values.sliderControlSizeMulti + font.family: StudioTheme.Constants.iconFont.family + } + + states: [ + State { + name: "default" + when: myControl.enabled && !(checkIndicator.hover + || myControl.hover) + && !checkIndicator.checked && !myControl.edit + && !myControl.drag + PropertyChanges { + target: checkIndicator + color: StudioTheme.Values.themeControlBackground + border.color: StudioTheme.Values.themeControlOutline + } + }, + State { + name: "hovered" + when: (checkIndicator.hover || myControl.hover) + && !checkIndicator.checked && !myControl.edit + && !myControl.drag + PropertyChanges { + target: checkIndicator + color: StudioTheme.Values.themeHoverHighlight + border.color: StudioTheme.Values.themeControlOutline + } + }, + State { + name: "checked" + when: checkIndicator.checked + PropertyChanges { + target: checkIndicator + color: StudioTheme.Values.themeInteraction + border.color: StudioTheme.Values.themeInteraction + } + }, + State { + name: "edit" + when: myControl.edit && !checkIndicator.checked + && !(checkIndicator.hover && myControl.hover) + PropertyChanges { + target: checkIndicator + color: StudioTheme.Values.themeFocusEdit + border.color: StudioTheme.Values.themeInteraction + } + }, + State { + name: "drag" + when: myControl.drag && !checkIndicator.checked + && !(checkIndicator.hover && myControl.hover) + PropertyChanges { + target: checkIndicator + color: StudioTheme.Values.themeFocusDrag + border.color: StudioTheme.Values.themeInteraction + } + }, + State { + name: "disabled" + when: !myControl.enabled + PropertyChanges { + target: checkIndicator + color: StudioTheme.Values.themeControlBackgroundDisabled + border.color: StudioTheme.Values.themeControlOutlineDisabled + } + PropertyChanges { + target: checkIndicatorIcon + color: StudioTheme.Values.themeTextColorDisabled + } + } + ] +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBox.qml new file mode 100644 index 0000000000..c61e7e0dbf --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBox.qml @@ -0,0 +1,256 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Creator. +** +** 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. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 3 as published by the Free Software +** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT +** included in the packaging of this file. Please review the following +** information to ensure the GNU General Public License requirements will +** be met: https://www.gnu.org/licenses/gpl-3.0.html. +** +****************************************************************************/ + +import QtQuick 2.12 +import QtQuick.Window 2.12 +import QtQuick.Templates 2.12 as T +import StudioTheme 1.0 as StudioTheme + +T.ComboBox { + id: myComboBox + + property alias actionIndicator: actionIndicator + property alias labelColor: comboBoxInput.color + + property bool hover: false // This property is used to indicate the global hover state + property bool edit: myComboBox.activeFocus + + property alias actionIndicatorVisible: actionIndicator.visible + property real __actionIndicatorWidth: StudioTheme.Values.squareComponentWidth + property real __actionIndicatorHeight: StudioTheme.Values.height + + property string __lastAcceptedText: "" + signal compressedActivated + + width: StudioTheme.Values.squareComponentWidth * 5 + height: StudioTheme.Values.height + + leftPadding: actionIndicator.width - (actionIndicatorVisible ? StudioTheme.Values.border : 0) + rightPadding: popupIndicator.width - StudioTheme.Values.border + font.pixelSize: StudioTheme.Values.myFontSize + wheelEnabled: false + + onFocusChanged: { + if (!focus) + comboBoxPopup.close() + } + + ActionIndicator { + id: actionIndicator + myControl: myComboBox + x: 0 + y: 0 + width: actionIndicator.visible ? __actionIndicatorWidth : 0 + height: actionIndicator.visible ? __actionIndicatorHeight : 0 + } + + contentItem: ComboBoxInput { + id: comboBoxInput + myControl: myComboBox + text: myComboBox.editText + } + + indicator: CheckIndicator { + id: popupIndicator + myControl: myComboBox + myPopup: myComboBox.popup + x: comboBoxInput.x + comboBoxInput.width - StudioTheme.Values.border + y: 0 + width: StudioTheme.Values.squareComponentWidth + height: StudioTheme.Values.height + } + + background: Rectangle { + id: comboBoxBackground + color: StudioTheme.Values.themeControlOutline + border.color: StudioTheme.Values.themeControlOutline + border.width: StudioTheme.Values.border + width: myComboBox.width + height: myComboBox.height + } + + // Set the initial value for __lastAcceptedText + Component.onCompleted: __lastAcceptedText = myComboBox.editText + + onAccepted: { + if (myComboBox.editText != __lastAcceptedText) { + var pos = find(myComboBox.editText) + activated(pos) + } + __lastAcceptedText = myComboBox.editText + } + + Timer { + id: myTimer + repeat: false + running: false + interval: 100 + onTriggered: myComboBox.compressedActivated() + } + + onActivated: myTimer.restart() + + delegate: ItemDelegate { + id: myItemDelegate + + width: comboBoxPopup.width - comboBoxPopup.leftPadding - comboBoxPopup.rightPadding + - (comboBoxPopupScrollBar.visible ? comboBoxPopupScrollBar.contentItem.implicitWidth + + 2 : 0) // TODO Magic number + height: StudioTheme.Values.height - 2 * StudioTheme.Values.border + padding: 0 + + contentItem: Text { + leftPadding: itemDelegateIconArea.width + text: modelData + color: StudioTheme.Values.themeTextColor + font: myComboBox.font + elide: Text.ElideRight + verticalAlignment: Text.AlignVCenter + } + + Item { + id: itemDelegateIconArea + width: myItemDelegate.height + height: myItemDelegate.height + + T.Label { + id: itemDelegateIcon + text: StudioTheme.Constants.tickIcon + color: myItemDelegate.highlighted ? StudioTheme.Values.themeTextColor : StudioTheme.Values.themeInteraction + font.family: StudioTheme.Constants.iconFont.family + font.pixelSize: StudioTheme.Values.spinControlIconSizeMulti + visible: myComboBox.currentIndex === index ? true : false + anchors.fill: parent + renderType: Text.NativeRendering + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + } + } + + highlighted: myComboBox.highlightedIndex === index + + background: Rectangle { + id: itemDelegateBackground + x: 0 + y: 0 + width: myItemDelegate.width + height: myItemDelegate.height + color: myItemDelegate.highlighted ? StudioTheme.Values.themeInteraction : "transparent" + } + } + + popup: T.Popup { + id: comboBoxPopup + x: comboBoxInput.x + y: myComboBox.height - StudioTheme.Values.border + width: comboBoxInput.width + popupIndicator.width - StudioTheme.Values.border + // TODO Setting the height on the popup solved the problem with the popup of height 0, + // but it has the problem that it sometimes extend over the border of the actual window + // and is then cut off. + height: Math.min(contentItem.implicitHeight + comboBoxPopup.topPadding + + comboBoxPopup.bottomPadding, + myComboBox.Window.height - topMargin - bottomMargin, + StudioTheme.Values.maxComboBoxPopupHeight) + padding: StudioTheme.Values.border + margins: 0 // If not defined margin will be -1 + closePolicy: T.Popup.CloseOnEscape | T.Popup.CloseOnPressOutsideParent + + contentItem: ListView { + clip: true + implicitHeight: contentHeight + model: myComboBox.popup.visible ? myComboBox.delegateModel : null + currentIndex: myComboBox.highlightedIndex + boundsBehavior: Flickable.StopAtBounds + ScrollBar.vertical: ScrollBar { + id: comboBoxPopupScrollBar + } + } + + background: Rectangle { + color: StudioTheme.Values.themeControlBackground + border.color: StudioTheme.Values.themeInteraction + border.width: StudioTheme.Values.border + } + + enter: Transition { + } + exit: Transition { + } + } + + states: [ + State { + name: "default" + when: !myComboBox.hover && !myComboBox.edit + PropertyChanges { + target: myComboBox + wheelEnabled: false + } + PropertyChanges { + target: comboBoxInput + selectByMouse: false + } + PropertyChanges { + target: comboBoxBackground + color: StudioTheme.Values.themeControlOutline + border.color: StudioTheme.Values.themeControlOutline + } + }, + State { + name: "focus" + when: myComboBox.edit && !myComboBox.editable + PropertyChanges { + target: myComboBox + wheelEnabled: true + } + PropertyChanges { + target: comboBoxInput + focus: true + } + }, + State { + name: "edit" + when: myComboBox.edit && myComboBox.editable + PropertyChanges { + target: myComboBox + wheelEnabled: true + } + PropertyChanges { + target: comboBoxInput + selectByMouse: true + } + PropertyChanges { + target: comboBoxBackground + color: StudioTheme.Values.themeInteraction + border.color: StudioTheme.Values.themeInteraction + } + } + ] + + Keys.onPressed: { + if (event.key === Qt.Key_Escape) + myComboBox.focus = false + } +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBoxInput.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBoxInput.qml new file mode 100644 index 0000000000..2ea123f90d --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBoxInput.qml @@ -0,0 +1,159 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Creator. +** +** 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. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 3 as published by the Free Software +** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT +** included in the packaging of this file. Please review the following +** information to ensure the GNU General Public License requirements will +** be met: https://www.gnu.org/licenses/gpl-3.0.html. +** +****************************************************************************/ + +import QtQuick 2.12 +import QtQuick.Templates 2.12 as T +import StudioTheme 1.0 as StudioTheme + +TextInput { + id: textInput + + property T.Control myControl + + property bool edit: textInput.activeFocus + property bool drag: false + + z: 2 + font: myControl.font + color: StudioTheme.Values.themeTextColor + selectionColor: StudioTheme.Values.themeTextSelectionColor + selectedTextColor: StudioTheme.Values.themeTextSelectedTextColor + + horizontalAlignment: Qt.AlignLeft + verticalAlignment: Qt.AlignVCenter + leftPadding: StudioTheme.Values.inputHorizontalPadding + rightPadding: StudioTheme.Values.inputHorizontalPadding + + readOnly: !myControl.editable + validator: myControl.validator + inputMethodHints: myControl.inputMethodHints + selectByMouse: false + activeFocusOnPress: false + clip: true + + Rectangle { + id: textInputArea + x: 0 + y: 0 + z: -1 + width: textInput.width + height: StudioTheme.Values.height + color: StudioTheme.Values.themeControlBackground + border.color: StudioTheme.Values.themeControlOutline + border.width: StudioTheme.Values.border + } + + TapHandler { + id: tapHandler + acceptedDevices: PointerDevice.Mouse + enabled: true + onTapped: { + if (textInput.readOnly) { + if (myControl.popup.opened) { + myControl.popup.close() + } else { + myControl.popup.open() + myControl.forceActiveFocus() + } + } else { + textInput.forceActiveFocus() + } + } + } + + MouseArea { + id: mouseArea + anchors.fill: parent + enabled: true + hoverEnabled: true + propagateComposedEvents: true + acceptedButtons: Qt.LeftButton + cursorShape: Qt.PointingHandCursor + // Sets the global hover + onContainsMouseChanged: myControl.hover = containsMouse + onPressed: mouse.accepted = false + } + + states: [ + State { + name: "default" + when: myControl.enabled && !textInput.edit + && !mouseArea.containsMouse && !myControl.drag + PropertyChanges { + target: textInputArea + color: StudioTheme.Values.themeControlBackground + border.color: StudioTheme.Values.themeControlOutline + } + PropertyChanges { + target: mouseArea + cursorShape: Qt.PointingHandCursor + } + }, + State { + name: "hovered" + when: myControl.hover && !textInput.edit && !myControl.drag + PropertyChanges { + target: textInputArea + color: StudioTheme.Values.themeHoverHighlight + border.color: StudioTheme.Values.themeControlOutline + } + }, + State { + name: "focus" + when: textInput.edit && !myControl.editable + PropertyChanges { + target: textInputArea + color: StudioTheme.Values.themeFocusEdit + border.color: StudioTheme.Values.themeInteraction + } + }, + State { + name: "edit" + when: textInput.edit && myControl.editable + extend: "focus" + PropertyChanges { + target: tapHandler + enabled: false + } + PropertyChanges { + target: mouseArea + cursorShape: Qt.IBeamCursor + } + }, + State { + name: "disabled" + when: !myControl.enabled + PropertyChanges { + target: textInputArea + color: StudioTheme.Values.themeControlBackgroundDisabled + border.color: StudioTheme.Values.themeControlOutlineDisabled + } + PropertyChanges { + target: textInput + color: StudioTheme.Values.themeTextColorDisabled + } + } + ] +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ContextMenu.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ContextMenu.qml new file mode 100644 index 0000000000..8589d8129f --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ContextMenu.qml @@ -0,0 +1,92 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Creator. +** +** 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. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 3 as published by the Free Software +** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT +** included in the packaging of this file. Please review the following +** information to ensure the GNU General Public License requirements will +** be met: https://www.gnu.org/licenses/gpl-3.0.html. +** +****************************************************************************/ + +import QtQuick 2.12 +import QtQuick.Controls 2.12 as Controls2 + +Menu { + id: contextMenu + + property Item myTextEdit + + Controls2.MenuItem { + text: "Undo" + enabled: myTextEdit.canUndo + onTriggered: myTextEdit.undo() + /* shortcut: StandardKey.Undo Shortcuts in QQC2 seem to override global shortcuts */ + } + Controls2.MenuItem { + text: "Redo" + enabled: myTextEdit.canRedo + onTriggered: myTextEdit.redo() + /* shortcut: StandardKey.Redo Shortcuts in QQC2 seem to override global shortcuts */ + } + + MenuSeparator { + } + + Controls2.MenuItem { + text: "Copy" + enabled: myTextEdit.selectedText !== "" + onTriggered: myTextEdit.copy() + /* shortcut: StandardKey.Copy Shortcuts in QQC2 seem to override global shortcuts */ + } + Controls2.MenuItem { + text: "Cut" + enabled: myTextEdit.selectedText !== "" && !myTextEdit.readOnly + onTriggered: myTextEdit.cut() + /* shortcut: StandardKey.Cut Shortcuts in QQC2 seem to override global shortcuts */ + } + Controls2.MenuItem { + text: "Paste" + enabled: myTextEdit.canPaste + onTriggered: myTextEdit.paste() + /* shortcut: StandardKey.Paste Shortcuts in QQC2 seem to override global shortcuts */ + } + Controls2.MenuItem { + text: "Delete" + enabled: myTextEdit.selectedText !== "" + onTriggered: myTextEdit.remove(myTextEdit.selectionStart, + myTextEdit.selectionEnd) + /* shortcut: StandardKey.Delete Shortcuts in QQC2 seem to override global shortcuts */ + } + Controls2.MenuItem { + text: "Clear" + enabled: myTextEdit.text !== "" + onTriggered: myTextEdit.clear() + /* shortcut: StandardKey.DeleteCompleteLine Shortcuts in QQC2 seem to override global shortcuts */ + } + + MenuSeparator { + } + + Controls2.MenuItem { + text: "Select All" + enabled: myTextEdit.text !== "" + && myTextEdit.selectedText !== myTextEdit.text + onTriggered: myTextEdit.selectAll() + /* shortcut: StandardKey.SelectAll Shortcuts in QQC2 seem to override global shortcuts */ + } +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ExpandingSpacer.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ExpandingSpacer.qml new file mode 100644 index 0000000000..9e48128c49 --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ExpandingSpacer.qml @@ -0,0 +1,31 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Creator. +** +** 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. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 3 as published by the Free Software +** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT +** included in the packaging of this file. Please review the following +** information to ensure the GNU General Public License requirements will +** be met: https://www.gnu.org/licenses/gpl-3.0.html. +** +****************************************************************************/ + +import QtQuick 2.12 +import QtQuick.Layouts 1.12 + +Item { + Layout.fillWidth: true +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ItemDelegate.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ItemDelegate.qml new file mode 100644 index 0000000000..c2190c5d83 --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ItemDelegate.qml @@ -0,0 +1,31 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Creator. +** +** 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. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 3 as published by the Free Software +** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT +** included in the packaging of this file. Please review the following +** information to ensure the GNU General Public License requirements will +** be met: https://www.gnu.org/licenses/gpl-3.0.html. +** +****************************************************************************/ + +import QtQuick 2.12 +import QtQuick.Templates 2.12 as T + +T.ItemDelegate { + +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Menu.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Menu.qml new file mode 100644 index 0000000000..01a86847fc --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Menu.qml @@ -0,0 +1,65 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Creator. +** +** 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. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 3 as published by the Free Software +** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT +** included in the packaging of this file. Please review the following +** information to ensure the GNU General Public License requirements will +** be met: https://www.gnu.org/licenses/gpl-3.0.html. +** +****************************************************************************/ + +import QtQuick 2.12 +import QtQuick.Window 2.12 +import QtQuick.Templates 2.12 as T +import StudioTheme 1.0 as StudioTheme + +T.Menu { + id: control + + implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, + contentWidth + leftPadding + rightPadding) + implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, + contentHeight + topPadding + bottomPadding) + + font.family: StudioTheme.Constants.font.family + font.pixelSize: StudioTheme.Values.myFontSize + + margins: 0 + overlap: 1 + padding: 0 + + closePolicy: T.Popup.CloseOnPressOutside | T.Popup.CloseOnPressOutsideParent | T.Popup.CloseOnEscape + + delegate: MenuItem { + } + + contentItem: ListView { + model: control.contentModel + interactive: Window.window ? contentHeight > Window.window.height : false + clip: false + currentIndex: control.currentIndex + } + + background: Rectangle { + implicitWidth: contentItem.childrenRect.width + implicitHeight: contentItem.childrenRect.height + color: StudioTheme.Values.themeControlBackground + border.color: StudioTheme.Values.themeControlOutline + border.width: StudioTheme.Values.border + } +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/MenuItem.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/MenuItem.qml new file mode 100644 index 0000000000..ff3c139679 --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/MenuItem.qml @@ -0,0 +1,88 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Creator. +** +** 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. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 3 as published by the Free Software +** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT +** included in the packaging of this file. Please review the following +** information to ensure the GNU General Public License requirements will +** be met: https://www.gnu.org/licenses/gpl-3.0.html. +** +****************************************************************************/ + +import QtQuick 2.12 +import QtQuick.Templates 2.12 as T +import StudioTheme 1.0 as StudioTheme +import QtQuick.Controls 2.12 + +T.MenuItem { + id: control + + property int labelSpacing: StudioTheme.Values.contextMenuLabelSpacing + + implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, + implicitContentWidth + leftPadding + rightPadding) + implicitHeight: Math.max( + implicitBackgroundHeight + topInset + bottomInset, + implicitContentHeight + topPadding + bottomPadding, + implicitIndicatorHeight + topPadding + bottomPadding) + + padding: 0 + spacing: 0 + horizontalPadding: StudioTheme.Values.contextMenuHorizontalPadding + action: Action {} + + contentItem: Item { + id: menuItem + + width: control.menu.width + height: StudioTheme.Values.height + + Text { + id: textLabel + text: control.text + font: control.font + color: control.enabled ? StudioTheme.Values.themeTextColor : StudioTheme.Values.themeTextColorDisabled + anchors.verticalCenter: parent.verticalCenter + } + + Text { + id: shortcutLabel + anchors.right: parent.right + anchors.verticalCenter: parent.verticalCenter + text: shortcut.nativeText + font: control.font + color: textLabel.color + + Shortcut { + id: shortcut + property int shortcutWorkaround: control.action.shortcut ? control.action.shortcut : 0 + sequence: shortcutWorkaround + } + } + } + + background: Rectangle { + implicitWidth: textLabel.implicitWidth + control.labelSpacing + shortcutLabel.implicitWidth + + control.leftPadding + control.rightPadding // TODO + implicitHeight: StudioTheme.Values.height + x: StudioTheme.Values.border + y: StudioTheme.Values.border + width: control.width - (StudioTheme.Values.border * 2) + height: control.height - (StudioTheme.Values.border * 2) + color: control.down ? control.palette.midlight : control.highlighted ? StudioTheme.Values.themeInteraction : "transparent" + } +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/MenuSeparator.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/MenuSeparator.qml new file mode 100644 index 0000000000..4e226f5c58 --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/MenuSeparator.qml @@ -0,0 +1,46 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Creator. +** +** 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. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 3 as published by the Free Software +** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT +** included in the packaging of this file. Please review the following +** information to ensure the GNU General Public License requirements will +** be met: https://www.gnu.org/licenses/gpl-3.0.html. +** +****************************************************************************/ + +import QtQuick 2.12 +import QtQuick.Templates 2.12 as T +import StudioTheme 1.0 as StudioTheme + +T.MenuSeparator { + id: control + + implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, + implicitContentWidth + leftPadding + rightPadding) + implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, + implicitContentHeight + topPadding + bottomPadding) + + padding: 0 + verticalPadding: padding + + contentItem: Rectangle { + implicitWidth: 10 + implicitHeight: StudioTheme.Values.border + color: StudioTheme.Values.themeControlOutline + } +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ScrollBar.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ScrollBar.qml new file mode 100644 index 0000000000..886e92206b --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ScrollBar.qml @@ -0,0 +1,63 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Creator. +** +** 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. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 3 as published by the Free Software +** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT +** included in the packaging of this file. Please review the following +** information to ensure the GNU General Public License requirements will +** be met: https://www.gnu.org/licenses/gpl-3.0.html. +** +****************************************************************************/ + +import QtQuick 2.12 +import QtQuick.Templates 2.12 as T +import StudioTheme 1.0 as StudioTheme + +T.ScrollBar { + id: control + + // This needs to be set, when using T.ScrollBar + implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, + implicitContentWidth + leftPadding + rightPadding) + implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, + implicitContentHeight + topPadding + bottomPadding) + + active: true + interactive: true + visible: control.size < 1.0 || T.ScrollBar.AlwaysOn + + snapMode: T.ScrollBar.SnapAlways // TODO + policy: T.ScrollBar.AsNeeded + + padding: 1 // TODO 0 + size: 1.0 + position: 1.0 + //orientation: Qt.Vertical + + contentItem: Rectangle { + id: controlHandle + implicitWidth: 4 + implicitHeight: 4 + radius: width / 2 // TODO 0 + color: StudioTheme.Values.themeScrollBarHandle + } + + background: Rectangle { + id: controlTrack + color: StudioTheme.Values.themeScrollBarTrack + } +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ScrollView.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ScrollView.qml new file mode 100644 index 0000000000..bf1b3937b9 --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ScrollView.qml @@ -0,0 +1,62 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Creator. +** +** 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. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 3 as published by the Free Software +** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT +** included in the packaging of this file. Please review the following +** information to ensure the GNU General Public License requirements will +** be met: https://www.gnu.org/licenses/gpl-3.0.html. +** +****************************************************************************/ + +import QtQuick 2.12 +import QtQuick.Templates 2.12 as T +import StudioTheme 1.0 as StudioTheme + +T.ScrollView { + id: control + + property alias horizontalThickness: horizontalScrollBar.height + property alias verticalThickness: verticalScrollBar.width + property bool bothVisible: verticalScrollBar.visible + && horizontalScrollBar.visible + + implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, + contentWidth + leftPadding + rightPadding) + implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, + contentHeight + topPadding + bottomPadding) + + ScrollBar.vertical: ScrollBar { + id: verticalScrollBar + parent: control + x: control.width - width - StudioTheme.Values.border + y: StudioTheme.Values.border + height: control.availableHeight - 2 * StudioTheme.Values.border + - (bothVisible ? horizontalThickness : 0) + active: control.ScrollBar.horizontal.active + } + + ScrollBar.horizontal: ScrollBar { + id: horizontalScrollBar + parent: control + x: StudioTheme.Values.border + y: control.height - height - StudioTheme.Values.border + width: control.availableWidth - 2 * StudioTheme.Values.border + - (bothVisible ? verticalThickness : 0) + active: control.ScrollBar.vertical.active + } +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SecondColumnLayout.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SecondColumnLayout.qml new file mode 100644 index 0000000000..d5c917f5ce --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SecondColumnLayout.qml @@ -0,0 +1,32 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Creator. +** +** 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. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 3 as published by the Free Software +** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT +** included in the packaging of this file. Please review the following +** information to ensure the GNU General Public License requirements will +** be met: https://www.gnu.org/licenses/gpl-3.0.html. +** +****************************************************************************/ + +import QtQuick 2.12 +import QtQuick.Layouts 1.12 + +RowLayout { + Layout.fillWidth: true + spacing: 4 +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Section.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Section.qml new file mode 100644 index 0000000000..98a163a322 --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Section.qml @@ -0,0 +1,130 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Creator. +** +** 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. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 3 as published by the Free Software +** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT +** included in the packaging of this file. Please review the following +** information to ensure the GNU General Public License requirements will +** be met: https://www.gnu.org/licenses/gpl-3.0.html. +** +****************************************************************************/ + +import QtQuick 2.12 +import QtQuick.Layouts 1.12 +import StudioTheme 1.0 as StudioTheme + +Item { + id: section + property alias caption: label.text + property int leftPadding: 8 + property int topPadding: 4 + property int rightPadding: 0 + + property int animationDuration: 0 + + property bool expanded: true + + clip: true + + Rectangle { + id: header + height: StudioTheme.Values.height + + anchors.left: parent.left + anchors.right: parent.right + + color: StudioTheme.Values.themeControlBackground + + SectionLabel { + id: label + anchors.verticalCenter: parent.verticalCenter + color: StudioTheme.Values.themeTextColor + x: 22 + //font.bold: true + font.pixelSize: StudioTheme.Values.myFontSize + // TODO font size? + } + + SectionLabel { + id: arrow + width: StudioTheme.Values.spinControlIconSizeMulti + height: StudioTheme.Values.spinControlIconSizeMulti + text: StudioTheme.Constants.upDownSquare2 + color: StudioTheme.Values.themeTextColor + renderType: Text.NativeRendering + anchors.left: parent.left + anchors.leftMargin: 4 + anchors.verticalCenter: parent.verticalCenter + font.pixelSize: StudioTheme.Values.spinControlIconSizeMulti + font.family: StudioTheme.Constants.iconFont.family + Behavior on rotation { + NumberAnimation { + easing.type: Easing.OutCubic + duration: animationDuration + } + } + } + + MouseArea { + anchors.fill: parent + onClicked: { + section.animationDuration = 120 + section.expanded = !section.expanded + if (!section.expanded) // TODO + section.forceActiveFocus() + } + } + } + + default property alias __content: row.children + + readonly property alias contentItem: row + + implicitHeight: Math.round(row.height + header.height) + + Row { + id: row + anchors.left: parent.left + anchors.leftMargin: leftPadding + anchors.right: parent.right + anchors.rightMargin: rightPadding + anchors.top: header.bottom + anchors.topMargin: topPadding + } + + Behavior on implicitHeight { + NumberAnimation { + easing.type: Easing.OutCubic + duration: animationDuration + } + } + + states: [ + State { + name: "Collapsed" + when: !section.expanded + PropertyChanges { + target: section + implicitHeight: header.height + } + PropertyChanges { + target: arrow + rotation: -90 + } + } + ] +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SectionLabel.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SectionLabel.qml new file mode 100644 index 0000000000..73fec21ce0 --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SectionLabel.qml @@ -0,0 +1,53 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Creator. +** +** 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. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 3 as published by the Free Software +** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT +** included in the packaging of this file. Please review the following +** information to ensure the GNU General Public License requirements will +** be met: https://www.gnu.org/licenses/gpl-3.0.html. +** +****************************************************************************/ + +import QtQuick 2.12 +import QtQuick.Layouts 1.12 +import QtQuick.Templates 2.12 as T +import StudioTheme 1.0 as StudioTheme + +T.Label { + id: label + + //property alias tooltip: toolTipArea.tooltip + // workaround because PictureSpecifics.qml still use this + //property alias toolTip: toolTipArea.tooltip + + width: Math.max(Math.min(240, parent.width - 220), 80) + color: StudioTheme.Values.themeTextColor + font.pixelSize: StudioTheme.Values.myFontSize // TODO + elide: Text.ElideRight + + Layout.preferredWidth: width + Layout.minimumWidth: width + Layout.maximumWidth: width +/* + ToolTipArea { + id: toolTipArea + anchors.fill: parent + tooltip: label.text + } +*/ +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SectionLayout.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SectionLayout.qml new file mode 100644 index 0000000000..22054feebb --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SectionLayout.qml @@ -0,0 +1,34 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Creator. +** +** 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. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 3 as published by the Free Software +** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT +** included in the packaging of this file. Please review the following +** information to ensure the GNU General Public License requirements will +** be met: https://www.gnu.org/licenses/gpl-3.0.html. +** +****************************************************************************/ + +import QtQuick 2.12 +import QtQuick.Layouts 1.12 + +GridLayout { + columns: 2 + columnSpacing: 12 + rowSpacing: 4 + width: parent.width - 16 +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Slider.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Slider.qml new file mode 100644 index 0000000000..7e111b6851 --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Slider.qml @@ -0,0 +1,294 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Creator. +** +** 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. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 3 as published by the Free Software +** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT +** included in the packaging of this file. Please review the following +** information to ensure the GNU General Public License requirements will +** be met: https://www.gnu.org/licenses/gpl-3.0.html. +** +****************************************************************************/ + +import QtQuick 2.12 +import QtQuick.Shapes 1.12 +import QtQuick.Templates 2.12 as T +import StudioTheme 1.0 as StudioTheme + +T.Slider { + id: slider + + property int decimals: 0 + property bool labels: true + property bool tickMarks: false + property real tickMarkStepSize: 0.0 // StepSize bug QTBUG-76136 + property real tickMarkWidth: 1.0 + property real tickMarkHeight: 4.0 + readonly property int tickMarkCount: tickMarkStepSize + !== 0.0 ? (to - from) / tickMarkStepSize + 1 : 0 + readonly property real tickMarkSpacing: tickMarkCount + !== 0 ? (sliderTrack.width - tickMarkWidth + * tickMarkCount) / (tickMarkCount - 1) : 0.0 + + property string __activeColor: StudioTheme.Values.themeSliderActiveTrack + property string __inactiveColor: StudioTheme.Values.themeSliderInactiveTrack + + property bool hover: false // This property is used to indicate the global hover state + property bool edit: slider.activeFocus + + property alias actionIndicatorVisible: actionIndicator.visible + property real __actionIndicatorWidth: StudioTheme.Values.squareComponentWidth + property real __actionIndicatorHeight: StudioTheme.Values.height + + implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, + implicitHandleWidth + leftPadding + rightPadding) + implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, + implicitHandleHeight + topPadding + bottomPadding, + StudioTheme.Values.height) + padding: 0 + leftPadding: actionIndicator.width + - (actionIndicatorVisible ? StudioTheme.Values.border + - StudioTheme.Values.sliderPadding : 0) + + wheelEnabled: false + + ActionIndicator { + id: actionIndicator + myControl: slider + x: 0 + y: 0 + width: actionIndicator.visible ? __actionIndicatorWidth : 0 + height: actionIndicator.visible ? __actionIndicatorHeight : 0 + } + + handle: Rectangle { + id: sliderHandle + x: slider.leftPadding + (slider.visualPosition * slider.availableWidth) + - sliderHandle.width / 2 + y: slider.topPadding + slider.availableHeight / 2 - sliderHandle.height / 2 + z: 20 + implicitWidth: StudioTheme.Values.sliderHandleWidth + implicitHeight: StudioTheme.Values.sliderHandleHeight + color: StudioTheme.Values.themeSliderHandle + + Shape { + id: sliderHandleLabelPointer + + property real __width: StudioTheme.Values.sliderPointerWidth + property real __height: StudioTheme.Values.sliderPointerHeight + property bool antiAlias: true + + layer.enabled: antiAlias + layer.smooth: antiAlias + layer.textureSize: Qt.size(width * 2, height * 2) + + implicitWidth: __width + implicitHeight: __height + + anchors.horizontalCenter: parent.horizontalCenter + anchors.top: sliderHandleLabelBackground.bottom + + ShapePath { + id: sliderHandleLabelPointerPath + strokeColor: "transparent" + strokeWidth: 0 + fillColor: StudioTheme.Values.themeInteraction + + startX: 0 + startY: 0 + + PathLine { + x: sliderHandleLabelPointer.__width + y: 0 + } + PathLine { + x: sliderHandleLabelPointer.__width / 2 + y: sliderHandleLabelPointer.__height + } + } + } + + Rectangle { + id: sliderHandleLabelBackground + x: -(sliderHandleLabelBackground.width / 2) + (sliderHandle.width / 2) + width: makeEven( + sliderHandleLabel.width + StudioTheme.Values.inputHorizontalPadding) + height: sliderHandleLabel.height + anchors.bottom: parent.top + anchors.bottomMargin: StudioTheme.Values.sliderMargin + color: StudioTheme.Values.themeInteraction + + Text { + id: sliderHandleLabel + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + text: Number.parseFloat(slider.value).toFixed(slider.decimals) + color: StudioTheme.Values.themeTextColor + font.pixelSize: StudioTheme.Values.sliderFontSize + } + } + } + + function makeEven(value) { + var v = Math.round(value) + return (v % 2 === 0) ? v : v + 1 + } + + background: Rectangle { + id: sliderTrack + x: slider.leftPadding + y: slider.topPadding + slider.availableHeight / 2 - height / 2 + width: slider.availableWidth + height: StudioTheme.Values.sliderTrackHeight + color: __inactiveColor + + Rectangle { + width: slider.visualPosition * parent.width + height: parent.height + color: __activeColor + } + } + + Item { + id: tickmarkBounds + x: sliderTrack.x + y: sliderTrack.y + + Text { + id: tickmarkFromLabel + x: 0 + y: StudioTheme.Values.sliderPadding + text: Number.parseFloat(slider.from).toFixed(slider.decimals) + color: StudioTheme.Values.themeTextColor + font.pixelSize: StudioTheme.Values.sliderFontSize + visible: slider.labels + } + + Text { + id: tickmarkToLabel + x: slider.availableWidth - width + y: StudioTheme.Values.sliderPadding + text: Number.parseFloat(slider.to).toFixed(slider.decimals) + color: StudioTheme.Values.themeTextColor + font.pixelSize: StudioTheme.Values.sliderFontSize + visible: slider.labels + } + + Row { + id: tickmarkRow + spacing: tickMarkSpacing + visible: slider.tickMarks + + Repeater { + id: tickmarkRepeater + model: tickMarkCount + delegate: Rectangle { + implicitWidth: tickMarkWidth + implicitHeight: StudioTheme.Values.sliderTrackHeight + color: x < (slider.visualPosition + * slider.availableWidth) ? __inactiveColor : __activeColor + } + } + } + } + + MouseArea { + id: mouseArea + x: actionIndicator.width + y: 0 + width: slider.width - actionIndicator.width + height: slider.height + enabled: true + hoverEnabled: true + propagateComposedEvents: true + acceptedButtons: Qt.LeftButton + cursorShape: Qt.PointingHandCursor + // Sets the global hover + onContainsMouseChanged: slider.hover = containsMouse + onPressed: mouse.accepted = false + } + + states: [ + State { + name: "default" + when: slider.enabled && !slider.hover && !slider.edit + PropertyChanges { + target: slider + wheelEnabled: false + } + }, + State { + name: "hovered" + when: slider.enabled && slider.hover && !slider.edit + PropertyChanges { + target: slider + __activeColor: StudioTheme.Values.themeSliderActiveTrackHover + __inactiveColor: StudioTheme.Values.themeSliderInactiveTrackHover + } + PropertyChanges { + target: sliderHandle + color: StudioTheme.Values.themeSliderHandleHover + } + }, + State { + name: "focus" + when: slider.enabled && slider.edit + PropertyChanges { + target: slider + wheelEnabled: true + __activeColor: StudioTheme.Values.themeSliderActiveTrackFocus + __inactiveColor: StudioTheme.Values.themeSliderInactiveTrackFocus + } + PropertyChanges { + target: sliderHandle + color: StudioTheme.Values.themeSliderHandleFocus + } + }, + State { + name: "disabled" + when: !slider.enabled + PropertyChanges { + target: tickmarkFromLabel + color: StudioTheme.Values.themeTextColorDisabled + } + PropertyChanges { + target: tickmarkToLabel + color: StudioTheme.Values.themeTextColorDisabled + } + PropertyChanges { + target: sliderHandleLabel + color: StudioTheme.Values.themeTextColorDisabled + } + PropertyChanges { + target: slider + __activeColor: StudioTheme.Values.themeControlBackgroundDisabled + __inactiveColor: StudioTheme.Values.themeControlBackgroundDisabled + } + PropertyChanges { + target: sliderHandleLabelBackground + color: StudioTheme.Values.themeControlBackgroundDisabled + } + PropertyChanges { + target: sliderHandleLabelPointerPath + fillColor: StudioTheme.Values.themeControlBackgroundDisabled + } + PropertyChanges { + target: sliderHandle + color: StudioTheme.Values.themeControlBackgroundDisabled + } + } + ] +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SliderPopup.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SliderPopup.qml new file mode 100644 index 0000000000..beb6da4a8f --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SliderPopup.qml @@ -0,0 +1,88 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Creator. +** +** 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. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 3 as published by the Free Software +** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT +** included in the packaging of this file. Please review the following +** information to ensure the GNU General Public License requirements will +** be met: https://www.gnu.org/licenses/gpl-3.0.html. +** +****************************************************************************/ + +import QtQuick 2.12 +import QtQuick.Templates 2.12 as T +import StudioTheme 1.0 as StudioTheme + +T.Popup { + id: sliderPopup + + property T.Control myControl + + dim: false + closePolicy: T.Popup.CloseOnEscape | T.Popup.CloseOnPressOutsideParent + + background: Rectangle { + color: StudioTheme.Values.themeControlBackground + border.color: StudioTheme.Values.themeInteraction + } + + contentItem: T.Slider { + id: slider + anchors.fill: parent + + bottomPadding: 0 + topPadding: 0 + rightPadding: 3 + leftPadding: 3 + + from: myControl.from + value: myControl.value + to: myControl.to + + focusPolicy: Qt.NoFocus + + handle: Rectangle { + x: slider.leftPadding + slider.visualPosition * (slider.availableWidth - width) + y: slider.topPadding + slider.availableHeight / 2 - height / 2 + width: StudioTheme.Values.sliderHandleWidth + height: StudioTheme.Values.sliderHandleHeight + radius: 0 + color: slider.pressed ? StudioTheme.Values.themeInteraction : StudioTheme.Values.themeControlOutline + } + + background: Rectangle { + x: slider.leftPadding + y: slider.topPadding + slider.availableHeight / 2 - height / 2 + width: slider.availableWidth + height: StudioTheme.Values.sliderTrackHeight + radius: 0 + color: StudioTheme.Values.themeSliderInactiveTrack + + Rectangle { + width: slider.visualPosition * parent.width + height: parent.height + color: StudioTheme.Values.themeSliderActiveTrack + radius: 0 + } + } + + onMoved: { + myControl.value = value + myControl.valueModified() + } + } +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBox.qml new file mode 100644 index 0000000000..e10a334bd6 --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBox.qml @@ -0,0 +1,338 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Creator. +** +** 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. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 3 as published by the Free Software +** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT +** included in the packaging of this file. Please review the following +** information to ensure the GNU General Public License requirements will +** be met: https://www.gnu.org/licenses/gpl-3.0.html. +** +****************************************************************************/ + +import QtQuick 2.12 +import QtQuick.Templates 2.12 as T +import StudioTheme 1.0 as StudioTheme + +T.SpinBox { + id: mySpinBox + + property alias labelColor: spinBoxInput.color + property alias actionIndicator: actionIndicator + + property int decimals: 0 + property int factor: Math.pow(10, decimals) + + property real defaultStepSize: 1 + property real minStepSize: 1 + property real maxStepSize: 10 + + property bool edit: spinBoxInput.activeFocus + property bool hover: false // This property is used to indicate the global hover state + property bool drag: false + + property alias actionIndicatorVisible: actionIndicator.visible + property real __actionIndicatorWidth: StudioTheme.Values.squareComponentWidth + property real __actionIndicatorHeight: StudioTheme.Values.height + + property bool spinBoxIndicatorVisible: true + property real __spinBoxIndicatorWidth: StudioTheme.Values.smallRectWidth - 2 + * StudioTheme.Values.border + property real __spinBoxIndicatorHeight: StudioTheme.Values.height / 2 + - StudioTheme.Values.border + + property alias sliderIndicatorVisible: sliderIndicator.visible + property real __sliderIndicatorWidth: StudioTheme.Values.squareComponentWidth + property real __sliderIndicatorHeight: StudioTheme.Values.height + + signal compressedValueModified + + // Use custom wheel handling due to bugs + property bool __wheelEnabled: false + wheelEnabled: false + + width: StudioTheme.Values.squareComponentWidth * 5 + height: StudioTheme.Values.height + + leftPadding: spinBoxIndicatorDown.x + spinBoxIndicatorDown.width + - (spinBoxIndicatorVisible ? 0 : StudioTheme.Values.border) + rightPadding: sliderIndicator.width - (sliderIndicatorVisible ? StudioTheme.Values.border : 0) + + font.pixelSize: StudioTheme.Values.myFontSize + editable: true + validator: mySpinBox.decimals ? doubleValidator : intValidator + + DoubleValidator { + id: doubleValidator + locale: mySpinBox.locale.name + notation: DoubleValidator.StandardNotation + decimals: mySpinBox.decimals + bottom: Math.min(mySpinBox.from, mySpinBox.to) / factor + top: Math.max(mySpinBox.from, mySpinBox.to) / factor + } + + IntValidator { + id: intValidator + locale: mySpinBox.locale.name + bottom: Math.min(mySpinBox.from, mySpinBox.to) + top: Math.max(mySpinBox.from, mySpinBox.to) + } + + ActionIndicator { + id: actionIndicator + myControl: mySpinBox + + x: 0 + y: 0 + width: actionIndicator.visible ? __actionIndicatorWidth : 0 + height: actionIndicator.visible ? __actionIndicatorHeight : 0 + } + + up.indicator: SpinBoxIndicator { + id: spinBoxIndicatorUp + myControl: mySpinBox + + visible: spinBoxIndicatorVisible + //hover: mySpinBox.up.hovered // TODO QTBUG-74688 + pressed: mySpinBox.up.pressed + iconFlip: -1 + + x: actionIndicator.width + (actionIndicator.visible ? 0 : StudioTheme.Values.border) + y: StudioTheme.Values.border + width: spinBoxIndicatorVisible ? __spinBoxIndicatorWidth : 0 + height: spinBoxIndicatorVisible ? __spinBoxIndicatorHeight : 0 + } + + down.indicator: SpinBoxIndicator { + id: spinBoxIndicatorDown + myControl: mySpinBox + + visible: spinBoxIndicatorVisible + //hover: mySpinBox.down.hovered // TODO QTBUG-74688 + pressed: mySpinBox.down.pressed + + x: actionIndicator.width + (actionIndicatorVisible ? 0 : StudioTheme.Values.border) + y: spinBoxIndicatorUp.y + spinBoxIndicatorUp.height + width: spinBoxIndicatorVisible ? __spinBoxIndicatorWidth : 0 + height: spinBoxIndicatorVisible ? __spinBoxIndicatorHeight : 0 + } + + contentItem: SpinBoxInput { + id: spinBoxInput + myControl: mySpinBox + } + + background: Rectangle { + id: spinBoxBackground + color: StudioTheme.Values.themeControlOutline + border.color: StudioTheme.Values.themeControlOutline + border.width: StudioTheme.Values.border + width: mySpinBox.width + height: mySpinBox.height + } + + CheckIndicator { + id: sliderIndicator + myControl: mySpinBox + myPopup: sliderPopup + + x: spinBoxInput.x + spinBoxInput.width - StudioTheme.Values.border + width: sliderIndicator.visible ? __sliderIndicatorWidth : 0 + height: sliderIndicator.visible ? __sliderIndicatorHeight : 0 + visible: false // reasonable default + } + + SliderPopup { + id: sliderPopup + myControl: mySpinBox + + x: spinBoxInput.x + y: StudioTheme.Values.height - StudioTheme.Values.border + width: spinBoxInput.width + sliderIndicator.width - StudioTheme.Values.border + height: StudioTheme.Values.sliderHeight + + enter: Transition { + } + exit: Transition { + } + } + + textFromValue: function (value, locale) { + return Number(value / factor).toLocaleString(locale, 'f', + mySpinBox.decimals) + } + + valueFromText: function (text, locale) { + return Number.fromLocaleString(locale, text) * factor + } + + states: [ + State { + name: "default" + when: mySpinBox.enabled && !mySpinBox.hover + && !mySpinBox.edit && !mySpinBox.drag + PropertyChanges { + target: mySpinBox + __wheelEnabled: false + } + PropertyChanges { + target: spinBoxInput + selectByMouse: false + } + PropertyChanges { + target: spinBoxBackground + color: StudioTheme.Values.themeControlOutline + border.color: StudioTheme.Values.themeControlOutline + } + }, + State { + name: "edit" + when: mySpinBox.edit + PropertyChanges { + target: mySpinBox + __wheelEnabled: true + } + PropertyChanges { + target: spinBoxInput + selectByMouse: true + } + PropertyChanges { + target: spinBoxBackground + color: StudioTheme.Values.themeInteraction + border.color: StudioTheme.Values.themeInteraction + } + }, + State { + name: "drag" + when: mySpinBox.drag + PropertyChanges { + target: spinBoxBackground + color: StudioTheme.Values.themeInteraction + border.color: StudioTheme.Values.themeInteraction + } + }, + State { + name: "disabled" + when: !mySpinBox.enabled + PropertyChanges { + target: spinBoxBackground + color: StudioTheme.Values.themeControlOutlineDisabled + border.color: StudioTheme.Values.themeControlOutlineDisabled + } + } + ] + + onActiveFocusChanged: { + if (mySpinBox.activeFocus) + // QTBUG-75862 && mySpinBox.focusReason === Qt.TabFocusReason) + spinBoxInput.selectAll() + + if (sliderPopup.opened && !mySpinBox.activeFocus) + sliderPopup.close() + } + + onFocusChanged: { + // FIX: This is a temporary fix for QTBUG-74239 + var currValue = mySpinBox.value + + if (!spinBoxInput.acceptableInput) + mySpinBox.value = clamp(valueFromText(spinBoxInput.text, + mySpinBox.locale), + mySpinBox.validator.bottom * factor, + mySpinBox.validator.top * factor) + else + mySpinBox.value = valueFromText(spinBoxInput.text, mySpinBox.locale) + + if (spinBoxInput.text !== mySpinBox.displayText) + spinBoxInput.text = mySpinBox.displayText + + if (mySpinBox.value !== currValue) + mySpinBox.valueModified() + } + + onDisplayTextChanged: { + spinBoxInput.text = mySpinBox.displayText + } + + Timer { + id: myTimer + repeat: false + running: false + interval: 100 + onTriggered: mySpinBox.compressedValueModified() + } + + onValueModified: myTimer.restart() + + Keys.onPressed: { + if (event.key === Qt.Key_Up || event.key === Qt.Key_Down) { + event.accepted = true + + mySpinBox.stepSize = defaultStepSize + + if (event.modifiers & Qt.ControlModifier) + mySpinBox.stepSize = minStepSize + + if (event.modifiers & Qt.ShiftModifier) + mySpinBox.stepSize = maxStepSize + + var val = mySpinBox.valueFromText(spinBoxInput.text, + mySpinBox.locale) + if (mySpinBox.value !== val) + mySpinBox.value = val + + var curValue = mySpinBox.value + + if (event.key === Qt.Key_Up) + mySpinBox.increase() + else + mySpinBox.decrease() + + if (curValue !== mySpinBox.value) + mySpinBox.valueModified() + } + + if (event.key === Qt.Key_Escape) + mySpinBox.focus = false + + // FIX: This is a temporary fix for QTBUG-74239 + if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter) { + var currValue = mySpinBox.value + + if (!spinBoxInput.spinBoxInput) + mySpinBox.value = clamp(valueFromText(spinBoxInput.text, + mySpinBox.locale), + mySpinBox.validator.bottom * factor, + mySpinBox.validator.top * factor) + else + mySpinBox.value = valueFromText(spinBoxInput.text, + mySpinBox.locale) + + if (spinBoxInput.text !== mySpinBox.displayText) + spinBoxInput.text = mySpinBox.displayText + + if (mySpinBox.value !== currValue) + mySpinBox.valueModified() + } + } + + function clamp(v, lo, hi) { + if (v < lo || v > hi) + return Math.min(Math.max(lo, v), hi) + + return v + } +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBoxIndicator.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBoxIndicator.qml new file mode 100644 index 0000000000..f75b8b47fd --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBoxIndicator.qml @@ -0,0 +1,133 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Creator. +** +** 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. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 3 as published by the Free Software +** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT +** included in the packaging of this file. Please review the following +** information to ensure the GNU General Public License requirements will +** be met: https://www.gnu.org/licenses/gpl-3.0.html. +** +****************************************************************************/ + +import QtQuick 2.12 +import QtQuick.Templates 2.12 as T +import StudioTheme 1.0 as StudioTheme + +Rectangle { + id: spinBoxIndicator + + property T.Control myControl + + property bool hover: false + property bool pressed: false + + property alias iconFlip: spinBoxIndicatorIconScale.yScale + + color: StudioTheme.Values.themeControlBackground + border.width: 0 + + // This MouseArea is a workaround to avoid some hover state related bugs + // when using the actual signal 'up.hovered'. QTBUG-74688 + MouseArea { + id: spinBoxIndicatorMouseArea + anchors.fill: parent + hoverEnabled: true + onContainsMouseChanged: spinBoxIndicator.hover = containsMouse + onPressed: { + myControl.forceActiveFocus() + mouse.accepted = false + } + } + + T.Label { + id: spinBoxIndicatorIcon + text: StudioTheme.Constants.upDownSquare2 + color: StudioTheme.Values.themeTextColor + renderType: Text.NativeRendering + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + font.pixelSize: StudioTheme.Values.spinControlIconSizeMulti + font.family: StudioTheme.Constants.iconFont.family + anchors.fill: parent + transform: Scale { + id: spinBoxIndicatorIconScale + origin.x: 0 + origin.y: spinBoxIndicatorIcon.height / 2 + yScale: 1 + } + } + + states: [ + State { + name: "default" + when: myControl.enabled && !(spinBoxIndicator.hover + || myControl.hover) + && !spinBoxIndicator.pressed && !myControl.edit + && !myControl.drag + PropertyChanges { + target: spinBoxIndicator + color: StudioTheme.Values.themeControlBackground + } + }, + State { + name: "hovered" + when: (spinBoxIndicator.hover || myControl.hover) + && !spinBoxIndicator.pressed && !myControl.edit + && !myControl.drag + PropertyChanges { + target: spinBoxIndicator + color: StudioTheme.Values.themeHoverHighlight + } + }, + State { + name: "pressed" + when: spinBoxIndicator.pressed + PropertyChanges { + target: spinBoxIndicator + color: StudioTheme.Values.themeInteraction + } + }, + State { + name: "edit" + when: myControl.edit + PropertyChanges { + target: spinBoxIndicator + color: StudioTheme.Values.themeFocusEdit + } + }, + State { + name: "drag" + when: myControl.drag + PropertyChanges { + target: spinBoxIndicator + color: StudioTheme.Values.themeFocusDrag + } + }, + State { + name: "disabled" + when: !myControl.enabled + PropertyChanges { + target: spinBoxIndicator + color: StudioTheme.Values.themeControlBackgroundDisabled + } + PropertyChanges { + target: spinBoxIndicatorIcon + color: StudioTheme.Values.themeTextColorDisabled + } + } + ] +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBoxInput.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBoxInput.qml new file mode 100644 index 0000000000..e2f718176e --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBoxInput.qml @@ -0,0 +1,215 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Creator. +** +** 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. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 3 as published by the Free Software +** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT +** included in the packaging of this file. Please review the following +** information to ensure the GNU General Public License requirements will +** be met: https://www.gnu.org/licenses/gpl-3.0.html. +** +****************************************************************************/ + +import QtQuick 2.12 +import QtQuick.Templates 2.12 as T +import StudioTheme 1.0 as StudioTheme + +TextInput { + id: textInput + + property T.Control myControl + + property bool edit: textInput.activeFocus + property bool drag: false + + z: 2 + font: myControl.font + color: StudioTheme.Values.themeTextColor + selectionColor: StudioTheme.Values.themeTextSelectionColor + selectedTextColor: StudioTheme.Values.themeTextSelectedTextColor + + horizontalAlignment: Qt.AlignRight + verticalAlignment: Qt.AlignVCenter + leftPadding: StudioTheme.Values.inputHorizontalPadding + rightPadding: StudioTheme.Values.inputHorizontalPadding + + readOnly: !myControl.editable + validator: myControl.validator + inputMethodHints: myControl.inputMethodHints + selectByMouse: false + activeFocusOnPress: false + clip: true + + // TextInput focus needs to be set to activeFocus whenever it changes, + // otherwise TextInput will get activeFocus whenever the parent SpinBox gets + // activeFocus. This will lead to weird side effects. + onActiveFocusChanged: textInput.focus = activeFocus + + Rectangle { + id: textInputArea + + color: StudioTheme.Values.themeControlBackground + border.color: StudioTheme.Values.themeControlOutline + border.width: StudioTheme.Values.border + + x: 0 + y: 0 + z: -1 + width: textInput.width + height: StudioTheme.Values.height + } + + DragHandler { + id: dragHandler + target: null + acceptedDevices: PointerDevice.Mouse + enabled: true + + property int initialValue: 0 + + onActiveChanged: { + if (active) { + initialValue = myControl.value + mouseArea.cursorShape = Qt.ClosedHandCursor + myControl.drag = true + } else { + mouseArea.cursorShape = Qt.PointingHandCursor + myControl.drag = false + } + } + onTranslationChanged: { + var curValue = myControl.value + myControl.value = initialValue + translation.x + + if (curValue !== myControl.value) + myControl.valueModified() + } + } + + TapHandler { + id: tapHandler + acceptedDevices: PointerDevice.Mouse + enabled: true + onTapped: { + textInput.forceActiveFocus() + textInput.deselect() // QTBUG-75862 + } + } + + MouseArea { + id: mouseArea + anchors.fill: parent + enabled: true + hoverEnabled: true + propagateComposedEvents: true + acceptedButtons: Qt.LeftButton + cursorShape: Qt.PointingHandCursor + // Sets the global hover + onContainsMouseChanged: myControl.hover = containsMouse + onPressed: mouse.accepted = false + onWheel: { + if (!myControl.__wheelEnabled) + return + + var val = myControl.valueFromText(textInput.text, myControl.locale) + if (myControl.value !== val) + myControl.value = val + + var curValue = myControl.value + myControl.value += wheel.angleDelta.y / 120 + + if (curValue !== myControl.value) + myControl.valueModified() + } + } + + states: [ + State { + name: "default" + when: myControl.enabled && !textInput.edit + && !mouseArea.containsMouse && !myControl.drag + PropertyChanges { + target: textInputArea + color: StudioTheme.Values.themeControlBackground + border.color: StudioTheme.Values.themeControlOutline + } + PropertyChanges { + target: dragHandler + enabled: true + } + PropertyChanges { + target: tapHandler + enabled: true + } + PropertyChanges { + target: mouseArea + cursorShape: Qt.PointingHandCursor + } + }, + State { + name: "hovered" + when: myControl.hover && !textInput.edit && !myControl.drag + PropertyChanges { + target: textInputArea + color: StudioTheme.Values.themeHoverHighlight + border.color: StudioTheme.Values.themeControlOutline + } + }, + State { + name: "edit" + when: textInput.edit + PropertyChanges { + target: textInputArea + color: StudioTheme.Values.themeFocusEdit + border.color: StudioTheme.Values.themeInteraction + } + PropertyChanges { + target: dragHandler + enabled: false + } + PropertyChanges { + target: tapHandler + enabled: false + } + PropertyChanges { + target: mouseArea + cursorShape: Qt.IBeamCursor + } + }, + State { + name: "drag" + when: myControl.drag + PropertyChanges { + target: textInputArea + color: StudioTheme.Values.themeFocusDrag + border.color: StudioTheme.Values.themeInteraction + } + }, + State { + name: "disabled" + when: !myControl.enabled + PropertyChanges { + target: textInputArea + color: StudioTheme.Values.themeControlBackgroundDisabled + border.color: StudioTheme.Values.themeControlOutlineDisabled + } + PropertyChanges { + target: textInput + color: StudioTheme.Values.themeTextColorDisabled + } + } + ] +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TextArea.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TextArea.qml new file mode 100644 index 0000000000..7432d00bb0 --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TextArea.qml @@ -0,0 +1,144 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Creator. +** +** 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. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 3 as published by the Free Software +** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT +** included in the packaging of this file. Please review the following +** information to ensure the GNU General Public License requirements will +** be met: https://www.gnu.org/licenses/gpl-3.0.html. +** +****************************************************************************/ + +import QtQuick 2.12 +import QtQuick.Templates 2.12 as T +import StudioTheme 1.0 as StudioTheme + +TextField { + id: myTextField + + property real relativePopupX: 0 // TODO Maybe call it leftPadding + property real popupWidth: myTextField.width + property string txtStorage + + property int temp: 0 + + T.Popup { + id: popup + x: relativePopupX + y: myTextField.height - StudioTheme.Values.border + width: popupWidth + height: scrollView.height + background: Rectangle { + color: StudioTheme.Values.themeFocusEdit + border.color: StudioTheme.Values.themeInteraction + border.width: StudioTheme.Values.border + } + + contentItem: ScrollView { + id: scrollView + padding: 0 + height: Math.min(textAreaPopup.contentHeight + scrollView.topPadding + + scrollView.bottomPadding, + StudioTheme.Values.maxTextAreaPopupHeight) + ScrollBar.horizontal.policy: ScrollBar.AlwaysOn + ScrollBar.vertical.policy: ScrollBar.AlwaysOn + + T.TextArea { + id: textAreaPopup + padding: 10 + width: textAreaPopup.contentWidth + textAreaPopup.leftPadding + + textAreaPopup.rightPadding + anchors.fill: parent + font.pixelSize: StudioTheme.Values.myFontSize + color: StudioTheme.Values.themeTextColor + selectionColor: StudioTheme.Values.themeTextSelectionColor + selectedTextColor: StudioTheme.Values.themeTextSelectedTextColor + selectByMouse: true + persistentSelection: textAreaPopup.focus + + MouseArea { + id: mouseArea + anchors.fill: parent + enabled: true + cursorShape: Qt.IBeamCursor + acceptedButtons: Qt.RightButton + onPressed: contextMenu.popup(textAreaPopup) + } + } + } + + ContextMenu { + id: contextMenu + myTextEdit: textAreaPopup + } + + AbstractButton { + id: acceptButton + x: popup.width - acceptButton.width + y: popup.height - StudioTheme.Values.border + width: Math.round(StudioTheme.Values.smallRectWidth) + height: Math.round(StudioTheme.Values.smallRectWidth) + buttonIcon: StudioTheme.Constants.tickIcon + } + + AbstractButton { + id: discardButton + x: popup.width - acceptButton.width - discardButton.width + StudioTheme.Values.border + y: popup.height - StudioTheme.Values.border + width: Math.round(StudioTheme.Values.smallRectWidth) + height: Math.round(StudioTheme.Values.smallRectWidth) + buttonIcon: StudioTheme.Constants.closeCross + } + + Component.onCompleted: { + storeAndFormatTextInput(myTextField.text) + } + + onOpened: { + textAreaPopup.text = txtStorage + myTextField.clear() + } + + onClosed: { + storeAndFormatTextInput(textAreaPopup.text) + myTextField.forceActiveFocus() + textAreaPopup.deselect() + } + } + + function storeAndFormatTextInput(inputText) { + txtStorage = inputText + var pos = txtStorage.search(/\n/g) + var sliceAt = Math.min(pos, 15) + myTextField.text = txtStorage.slice(0, sliceAt).padEnd(sliceAt + 3, '.') + } + + Keys.onPressed: { + if (event.key === Qt.Key_Escape) { + if (popup.opened) + popup.close() + else + myTextField.focus = false + } + + if ((event.key === Qt.Key_Return || event.key === Qt.Key_Enter) + && !popup.opened) { + popup.open() + textAreaPopup.forceActiveFocus() + } + } +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TextField.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TextField.qml new file mode 100644 index 0000000000..80ca6fd1c7 --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TextField.qml @@ -0,0 +1,174 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Creator. +** +** 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. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 3 as published by the Free Software +** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT +** included in the packaging of this file. Please review the following +** information to ensure the GNU General Public License requirements will +** be met: https://www.gnu.org/licenses/gpl-3.0.html. +** +****************************************************************************/ + +import QtQuick 2.12 +import QtQuick.Templates 2.12 as T +import StudioTheme 1.0 as StudioTheme + +T.TextField { + id: myTextField + + property alias actionIndicator: actionIndicator + property alias translationIndicator: translationIndicator + + property bool edit: myTextField.activeFocus + property bool hover: false // This property is used to indicate the global hover state + + property alias actionIndicatorVisible: actionIndicator.visible + property real __actionIndicatorWidth: StudioTheme.Values.squareComponentWidth + property real __actionIndicatorHeight: StudioTheme.Values.height + + property alias translationIndicatorVisible: translationIndicator.visible + property real __translationIndicatorWidth: StudioTheme.Values.squareComponentWidth + property real __translationIndicatorHeight: StudioTheme.Values.height + + horizontalAlignment: Qt.AlignLeft + verticalAlignment: Qt.AlignVCenter + + font.pixelSize: StudioTheme.Values.myFontSize + + color: StudioTheme.Values.themeTextColor + selectionColor: StudioTheme.Values.themeTextSelectionColor + selectedTextColor: StudioTheme.Values.themeTextSelectedTextColor + + readOnly: false + selectByMouse: true + persistentSelection: focus // QTBUG-73807 + clip: true + + height: StudioTheme.Values.height + implicitHeight: StudioTheme.Values.height + width: StudioTheme.Values.height * 5 + + leftPadding: StudioTheme.Values.inputHorizontalPadding + actionIndicator.width + - (actionIndicatorVisible ? StudioTheme.Values.border : 0) + rightPadding: StudioTheme.Values.inputHorizontalPadding + translationIndicator.width + - (translationIndicatorVisible ? StudioTheme.Values.border : 0) + + MouseArea { + id: mouseArea + anchors.fill: parent + enabled: true + hoverEnabled: true + propagateComposedEvents: true + acceptedButtons: Qt.LeftButton | Qt.RightButton + cursorShape: Qt.PointingHandCursor + onContainsMouseChanged: myTextField.hover = containsMouse // Sets the global hover + onPressed: { + if (mouse.button === Qt.RightButton) + contextMenu.popup(myTextField) + + mouse.accepted = false + } + } + + onPersistentSelectionChanged: { + if (!persistentSelection) + myTextField.deselect() + } + + ContextMenu { + id: contextMenu + myTextEdit: myTextField + } + + ActionIndicator { + id: actionIndicator + myControl: myTextField + x: 0 + y: 0 + width: actionIndicator.visible ? __actionIndicatorWidth : 0 + height: actionIndicator.visible ? __actionIndicatorHeight : 0 + } + + background: Rectangle { + id: textFieldBackground + color: StudioTheme.Values.themeControlBackground + border.color: StudioTheme.Values.themeControlOutline + border.width: StudioTheme.Values.border + anchors.fill: parent + } + + TranslationIndicator { + id: translationIndicator + myControl: myTextField + x: myTextField.width - translationIndicator.width + width: translationIndicator.visible ? __translationIndicatorWidth : 0 + height: translationIndicator.visible ? __translationIndicatorHeight : 0 + } + + states: [ + State { + name: "default" + when: myTextField.enabled && !myTextField.hover + && !myTextField.edit + PropertyChanges { + target: textFieldBackground + color: StudioTheme.Values.themeControlBackground + border.color: StudioTheme.Values.themeControlOutline + } + PropertyChanges { + target: mouseArea + cursorShape: Qt.PointingHandCursor + } + }, + State { + name: "hovered" + when: myTextField.hover && !myTextField.edit + PropertyChanges { + target: textFieldBackground + color: StudioTheme.Values.themeHoverHighlight + border.color: StudioTheme.Values.themeControlOutline + } + }, + State { + name: "edit" + when: myTextField.edit + PropertyChanges { + target: textFieldBackground + color: StudioTheme.Values.themeFocusEdit + border.color: StudioTheme.Values.themeInteraction + } + PropertyChanges { + target: mouseArea + cursorShape: Qt.IBeamCursor + } + }, + State { + name: "disabled" + when: !myTextField.enabled + PropertyChanges { + target: textFieldBackground + color: StudioTheme.Values.themeControlBackgroundDisabled + border.color: StudioTheme.Values.themeControlOutlineDisabled + } + } + ] + + Keys.onPressed: { + if (event.key === Qt.Key_Escape) + myTextField.focus = false + } +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TranslationIndicator.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TranslationIndicator.qml new file mode 100644 index 0000000000..7c4e0c90ce --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TranslationIndicator.qml @@ -0,0 +1,137 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Creator. +** +** 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. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 3 as published by the Free Software +** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT +** included in the packaging of this file. Please review the following +** information to ensure the GNU General Public License requirements will +** be met: https://www.gnu.org/licenses/gpl-3.0.html. +** +****************************************************************************/ + +import QtQuick 2.12 +import QtQuick.Templates 2.12 as T +import StudioTheme 1.0 as StudioTheme + +Item { + id: translationIndicator + + property Item myControl + + property bool hover: false + property bool pressed: false + property bool checked: false + + signal clicked + + state: "default" + + Rectangle { + id: translationIndicatorBackground + color: StudioTheme.Values.themeColumnBackground // TODO create extra variable, this one is used + border.color: StudioTheme.Values.themeTranslationIndicatorBorder + + anchors.centerIn: parent + + width: matchParity(translationIndicator.height, + StudioTheme.Values.smallRectWidth) + height: matchParity(translationIndicator.height, + StudioTheme.Values.smallRectWidth) + + function matchParity(root, value) { + // TODO maybe not necessary + var v = Math.round(value) + + if (root % 2 == 0) + // even + return (v % 2 == 0) ? v : v - 1 + else + // odd + return (v % 2 == 0) ? v - 1 : v + } + + MouseArea { + id: translationIndicatorMouseArea + anchors.fill: parent + hoverEnabled: true + onContainsMouseChanged: translationIndicator.hover = containsMouse + onPressed: mouse.accepted = true // TODO + onClicked: { + translationIndicator.checked = !translationIndicator.checked + translationIndicator.clicked() + } + } + } + + T.Label { + id: translationIndicatorIcon + text: "tr" + color: StudioTheme.Values.themeTextColor + font.family: StudioTheme.Constants.font.family + font.pixelSize: StudioTheme.Values.myIconFontSize + font.italic: true + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + anchors.fill: parent + } + + states: [ + State { + name: "default" + when: myControl.enabled && !translationIndicator.hover + && !translationIndicator.pressed && !myControl.hover + && !myControl.edit && !myControl.drag + && !translationIndicator.checked + PropertyChanges { + target: translationIndicatorBackground + color: StudioTheme.Values.themeColumnBackground + border.color: StudioTheme.Values.themeTranslationIndicatorBorder + } + }, + State { + name: "checked" + when: translationIndicator.checked + + PropertyChanges { + target: translationIndicatorBackground + color: StudioTheme.Values.themeInteraction // TODO + } + }, + State { + name: "hovered" + when: translationIndicator.hover && !translationIndicator.pressed + && !myControl.edit && !myControl.drag && !myControl.drag + PropertyChanges { + target: translationIndicatorBackground + color: StudioTheme.Values.themeFocusDrag // TODO + } + }, + State { + name: "disabled" + when: !myControl.enabled + PropertyChanges { + target: translationIndicatorBackground + color: StudioTheme.Values.themeControlBackgroundDisabled + border.color: StudioTheme.Values.themeControlOutlineDisabled + } + PropertyChanges { + target: translationIndicatorIcon + color: StudioTheme.Values.themeTextColorDisabled + } + } + ] +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/qmldir b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/qmldir new file mode 100644 index 0000000000..02acf99dff --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/qmldir @@ -0,0 +1,29 @@ +AbstractButton 1.0 AbstractButton.qml +ActionIndicator 1.0 ActionIndicator.qml +Button 1.0 Button.qml +ButtonGroup 1.0 ButtonGroup.qml +ButtonRow 1.0 ButtonRow.qml +CheckBox 1.0 CheckBox.qml +CheckIndicator 1.0 CheckIndicator.qml +ComboBox 1.0 ComboBox.qml +ComboBoxInput 1.0 ComboBoxInput.qml +ContextMenu 1.0 ContextMenu.qml +ExpandingSpacer 1.0 ExpandingSpacer.qml +ItemDelegate 1.0 ItemDelegate.qml +Menu 1.0 Menu.qml +MenuItem 1.0 MenuItem.qml +MenuSeparator 1.0 MenuSeparator.qml +ScrollBar 1.0 ScrollBar.qml +ScrollView 1.0 ScrollView.qml +SecondColumnLayout 1.0 SecondColumnLayout.qml +Section 1.0 Section.qml +SectionLabel 1.0 SectionLabel.qml +SectionLayout 1.0 SectionLayout.qml +Slider 1.0 Slider.qml +SliderPopup 1.0 SliderPopup.qml +SpinBox 1.0 SpinBox.qml +SpinBoxIndicator 1.0 SpinBoxIndicator.qml +SpinBoxInput 1.0 SpinBoxInput.qml +TextArea 1.0 TextArea.qml +TextField 1.0 TextField.qml +TranslationIndicator 1.0 TranslationIndicator.qml diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Constants.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Constants.qml new file mode 100644 index 0000000000..207a154719 --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Constants.qml @@ -0,0 +1,81 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Creator. +** +** 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. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 3 as published by the Free Software +** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT +** included in the packaging of this file. Please review the following +** information to ensure the GNU General Public License requirements will +** be met: https://www.gnu.org/licenses/gpl-3.0.html. +** +****************************************************************************/ + +pragma Singleton +import QtQuick 2.10 + +QtObject { + readonly property int width: 1920 + readonly property int height: 1080 + readonly property FontLoader mySystemFont: FontLoader { + name: "Arial" + } + readonly property FontLoader controlIcons: FontLoader { + source: "icons.ttf" + } + + readonly property string actionIcon: "\u0021" + readonly property string actionIconBinding: "\u0022" + readonly property string anchorBaseline: "\u0023" + readonly property string anchorBottom: "\u0024" + readonly property string anchorFill: "\u0025" + readonly property string anchorLeft: "\u0026" + readonly property string anchorRight: "\u0027" + readonly property string anchorTop: "\u0028" + readonly property string centerHorizontal: "\u0029" + readonly property string centerVertical: "\u002A" + readonly property string closeCross: "\u002B" + readonly property string fontStyleBold: "\u002C" + readonly property string fontStyleItalic: "\u002D" + readonly property string fontStyleStrikethrough: "\u002E" + readonly property string fontStyleUnderline: "\u002F" + readonly property string textAlignBottom: "\u0030" + readonly property string textAlignCenter: "\u0031" + readonly property string textAlignLeft: "\u0032" + readonly property string textAlignMiddle: "\u0033" + readonly property string textAlignRight: "\u0034" + readonly property string textAlignTop: "\u0035" + readonly property string tickIcon: "\u0036" + readonly property string triState: "\u0037" + readonly property string upDownIcon: "\u0038" + readonly property string upDownSquare2: "\u0039" + + readonly property font iconFont: Qt.font({ + "family": controlIcons.name, + "pixelSize": 12 + }) + + readonly property font font: Qt.font({ + "family": mySystemFont.name, + "pointSize": Qt.application.font.pixelSize + }) + + readonly property font largeFont: Qt.font({ + "family": mySystemFont.name, + "pointSize": Qt.application.font.pixelSize * 1.6 + }) + + readonly property color backgroundColor: "#c2c2c2" +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml new file mode 100644 index 0000000000..2055572e44 --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml @@ -0,0 +1,124 @@ +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of Qt Creator. +** +** 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. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 3 as published by the Free Software +** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT +** included in the packaging of this file. Please review the following +** information to ensure the GNU General Public License requirements will +** be met: https://www.gnu.org/licenses/gpl-3.0.html. +** +****************************************************************************/ + +pragma Singleton +import QtQuick 2.12 + +QtObject { + id: values + + property real baseHeight: 20 + property real baseFont: 12 + property real baseIconFont: 10 + + property real scaleFactor: 1 + + property real height: Math.round(values.baseHeight * values.scaleFactor) + property real myFontSize: Math.round(values.baseFont * values.scaleFactor) + property real myIconFontSize: Math.round(values.baseIconFont * values.scaleFactor) + + property real squareComponentWidth: values.height + property real smallRectWidth: values.height / 2 * 1.5 + + property real inputWidth: values.height * 4 + + property real sliderHeight: values.height / 2 * 1.5 // TODO:Have a look at -> sliderAreaHeight: Data.Values.height/2*1.5 + + property real sliderControlSize: 12 + property real sliderControlSizeMulti: sliderControlSize * scaleFactor + + property real spinControlIconSize: 8 + property real spinControlIconSizeMulti: spinControlIconSize * scaleFactor + + property real sliderTrackHeight: values.height / 4 + property real sliderHandleHeight: values.sliderTrackHeight * 2 + property real sliderHandleWidth: values.sliderTrackHeight + property real sliderFontSize: Math.round(8 * values.scaleFactor) + property real sliderPadding: Math.round(6 * values.scaleFactor) + property real sliderMargin: Math.round(3 * values.scaleFactor) + + property real sliderPointerWidth: Math.round(7 * values.scaleFactor) + property real sliderPointerHeight: Math.round(2 * values.scaleFactor) + + property real checkBoxSpacing: 6 // TODO Does look strange with scale factor applied + + property real columnWidth: 225 + (175 * (values.scaleFactor * 2)) + + property real marginTopBottom: 4 + property real border: 1 + + property real maxComboBoxPopupHeight: 300 + property real maxTextAreaPopupHeight: 150 + + property real contextMenuLabelSpacing: 30 + property real contextMenuHorizontalPadding: 6 + + property real inputHorizontalPadding: Math.round(4 * values.scaleFactor) + + // Theme Colors + + // Dark Theme Defaults + property string themeControlBackground: "#242424" + property string themeControlOutline: "#404040" + property string themeTextColor: "#ffffff" + + property string themePanelBackground: "#2a2a2a" + property string themeHoverHighlight: "#313131" + property string themeColumnBackground: "#363636" + property string themeFocusEdit: "#606060" + property string themeFocusDrag: "#565656" + + property string themeControlBackgroundPressed: "#606060" + property string themeControlBackgroundChecked: "#565656" + + property string themeInteraction: "#029de0" + + property string themeSliderActiveTrack: "#606060" + property string themeSliderInactiveTrack: "#404040" + property string themeSliderHandle: "#505050" + + property string themeSliderActiveTrackHover: "#7f7f7f" + property string themeSliderInactiveTrackHover: "#505050" + property string themeSliderHandleHover: "#606060" + + property string themeSliderActiveTrackFocus: "#aaaaaa" + property string themeSliderInactiveTrackFocus: "#606060" + property string themeSliderHandleFocus: values.themeInteraction + + // NEW NEW NEW NEW NEW + property string themeControlBackgroundDisabled: "#363636" + property string themeControlOutlineDisabled: "#404040" + property string themeTextColorDisabled: "#606060" + + property string themeTextSelectionColor: "#029de0" + property string themeTextSelectedTextColor: "#ffffff" + + property string themeScrollBarTrack: "#404040" + property string themeScrollBarHandle: "#505050" + + property string themeControlBackgroundInteraction: "#404040" // TODO Name. Right now themeFocusEdit is used for all 'edit' states. Is that correct? Different color! + + property string themeTranslationIndicatorBorder: "#7f7f7f" +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/icons.ttf b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/icons.ttf Binary files differnew file mode 100644 index 0000000000..9658c01782 --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/icons.ttf diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/qmldir b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/qmldir new file mode 100644 index 0000000000..b768fe63a2 --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/qmldir @@ -0,0 +1,2 @@ +singleton Values 1.0 Values.qml +singleton Constants 1.0 Constants.qml |