feedc0de/qt-creator
1
0
Fork 0
forked from qt-creator/qt-creator
Code Pull Requests Activity

QmlDesigner: Use studio controls for property editor

Browse Source 
* CheckBox
 * ComboBox
 * LineEdit

Adjusting some details in property editor.

Change-Id: I8f9d6ef87c187f5a3be7c5fb368a1813e6dba92c
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
This commit is contained in:
Thomas Hartmann
2019-06-05 16:28:52 +02:00
parent a18d3d1f9a
commit 029884c80e
13 changed files with 97 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/RectangleSpecifics.qml
View File

@@ -73,7 +73,7 @@ Column {
SpinBox {
backendValue: backendValues.border_width
hasSlider: true
Layout.preferredWidth: 80
Layout.preferredWidth: 120
}
ExpandingSpacer {
@@ -86,7 +86,7 @@ Column {
SpinBox {
backendValue: backendValues.radius
hasSlider: true
Layout.preferredWidth: 80
Layout.preferredWidth: 120
minimumValue: 0
maximumValue: Math.min(backendValues.height.value, backendValues.width.value) / 2
}

23
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/CheckBox.qml
View File

@@ -24,26 +24,25 @@
****************************************************************************/
import QtQuick 2.1
import QtQuick.Controls 1.1 as Controls
import StudioControls 1.0 as Controls
import QtQuick.Controls.Styles 1.1
Controls.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
@@ -58,8 +57,4 @@ Controls.CheckBox {
backendValue.value = checkBox.checked;
}
style: CustomCheckBoxStyle {
}
}

25
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ComboBox.qml
View File

@@ -24,7 +24,7 @@
****************************************************************************/
import QtQuick 2.1
import QtQuick.Controls 1.1 as Controls
import StudioControls 1.0 as Controls
import QtQuick.Controls.Styles 1.1
Controls.ComboBox {
@@ -32,7 +32,7 @@ Controls.ComboBox {
property variant backendValue
property color textColor: colorLogic.textColor
labelColor: colorLogic.textColor
property string scope: "Qt"
property bool useInteger: false
@@ -45,6 +45,15 @@ Controls.ComboBox {
property bool block: false
ExtendedFunctionLogic {
id: extFuncLogic
backendValue: comboBox.backendValue
}
actionIndicator.icon.color: extFuncLogic.color
actionIndicator.icon.text: extFuncLogic.glyph
actionIndicator.onClicked: extFuncLogic.show()
ColorLogic {
id: colorLogic
backendValue: comboBox.backendValue
@@ -84,7 +93,7 @@ Controls.ComboBox {
}
}
onCurrentTextChanged: {
onActivated: {
if (!__isCompleted)
return;
@@ -106,14 +115,4 @@ Controls.ComboBox {
__isCompleted = true;
}
style: CustomComboBoxStyle {
textColor: comboBox.textColor
}
ExtendedFunctionButton {
x: 2
anchors.verticalCenter: parent.verticalCenter
backendValue: comboBox.backendValue
visible: comboBox.enabled
}
}

2
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ExtendedFunctionLogic.qml
View File

@@ -26,7 +26,7 @@
import QtQuick 2.1
import StudioControls 1.0 as StudioControls
import StudioTheme 1.0 as StudioTheme
import QtQuickDesignerTheme 1.0
Item {
id: extendedFunctionButton

3
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/Label.qml
View File

@@ -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
@@ -40,6 +41,8 @@ Controls.Label {
color: Theme.color(Theme.PanelTextColorLight)
elide: Text.ElideRight
font.pixelSize: StudioTheme.Values.myFontSize
Layout.preferredWidth: width
Layout.minimumWidth: width
Layout.maximumWidth: width

131
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/LineEdit.qml
View File

@@ -24,24 +24,20 @@
****************************************************************************/
import QtQuick 2.2
import QtQuick.Controls 1.1 as Controls
import StudioControls 1.0 as Controls
import QtQuick.Controls.Styles 1.0
import QtQuickDesignerTheme 1.0
Controls.TextField {
Controls.Action {
//Workaround to avoid that "Delete" deletes the item.
shortcut: "Delete"
}
id: lineEdit
property variant backendValue
property color borderColor: "#222"
property color highlightColor: "orange"
property color textColor: colorLogic.textColor
color: colorLogic.textColor
property bool showTranslateCheckBox: true
translationIndicatorVisible: showTranslateCheckBox
property bool writeValueManually: false
@@ -58,19 +54,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 +100,6 @@ Controls.TextField {
}
onEditingFinished: {
if (writeValueManually)
return
@@ -118,87 +115,35 @@ Controls.TextField {
__dirty = false
}
style: TextFieldStyle {
property bool isTranslated: colorLogic.backendValue.isTranslated
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()
translationIndicator.onClicked: {
if (translationIndicator.checked) {
setTranslateExpression()
} else {
var textValue = lineEdit.text
lineEdit.backendValue.value = textValue
}
colorLogic.evaluate();
}
Controls.CheckBox {
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
id: trCheckbox
property bool isTranslated: colorLogic.backendValue.isTranslated
property bool backendValueValue: colorLogic.backendValue.value
onIsTranslatedChanged: {
checked = lineEdit.backendValue.isTranslated
}
onBackendValueValueChanged: {
checked = lineEdit.backendValue.isTranslated
}
onClicked: {
if (trCheckbox.checked) {
setTranslateExpression()
} else {
var textValue = lineEdit.text
lineEdit.backendValue.value = textValue
}
colorLogic.evaluate();
}
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;
}
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;
}
}
}
property variant backendValueValueInternal: backendValue.value
onBackendValueValueInternalChanged: {
lineEdit.translationIndicator.checked = lineEdit.backendValue.isTranslated
}
onIsTranslatedChanged: {
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;
}
}

2
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/Section.qml
View File

@@ -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 {

2
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/SpinBox.qml
View File

@@ -39,7 +39,7 @@ Item {
property alias backendValue: spinBox.backendValue
width: 100
width: 120
implicitHeight: spinBox.height
property bool __initialized: false

2
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/TabView.qml
View File

@@ -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

3
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckBox.qml
View File

@@ -30,7 +30,7 @@ import StudioTheme 1.0 as StudioTheme
T.CheckBox {
id: myCheckBox
property alias actionIcon: actionIndicator.icon
property alias actionIndicator: actionIndicator
property bool hover: myCheckBox.hovered // TODO two underscores
@@ -39,6 +39,7 @@ T.CheckBox {
property real __actionIndicatorHeight: StudioTheme.Values.height
property alias labelVisible: checkBoxLabel.visible
property alias labelColor: checkBoxLabel.color
font.pixelSize: StudioTheme.Values.myFontSize

4
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBox.qml
View File

@@ -31,7 +31,9 @@ import StudioTheme 1.0 as StudioTheme
T.ComboBox {
id: myComboBox
property alias actionIcon: actionIndicator.icon
property alias actionIndicator: actionIndicator
property alias labelColor: comboBoxInput.color
property bool hover: false // This property is used to indicate the global hover state

4
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TextField.qml
View File

@@ -30,7 +30,9 @@ import StudioTheme 1.0 as StudioTheme
T.TextField {
id: myTextField
property alias actionIcon: actionIndicator.icon
property alias actionIndicator: actionIndicator
property alias translationIndicator: translationIndicator
property bool edit: false
property bool hover: false // This property is used to indicate the global hover state

18
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TranslationIndicator.qml
View File

@@ -34,6 +34,9 @@ Item {
property bool hover: false
property bool pressed: false
property bool checked: false
signal clicked
state: "default"
@@ -67,6 +70,10 @@ Item {
hoverEnabled: true
onContainsMouseChanged: translationIndicator.hover = containsMouse
onPressed: mouse.accepted = true // TODO
onClicked: {
translationIndicator.checked = !translationIndicator.checked
translationIndicator.clicked()
}
}
}
@@ -88,12 +95,23 @@ Item {
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.themeFocusDrag // TODO
color: "red"
}
},
State {
name: "hovered"
when: translationIndicator.hover && !translationIndicator.pressed