diff options
Diffstat (limited to 'share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets')
31 files changed, 1867 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 |