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

QmlDesigner: GradientPreset cleanup

Browse Source 
- Remove Controls 1 imports
 - Rework states
 - Utilize theme values

Change-Id: I2d7b818f450387ad0325aae41aac7f8c1b30ea5f
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
Reviewed-by: Aleksei German <aleksei.german@qt.io>
This commit is contained in:
Henning Gruendl
2020-01-06 15:51:48 +01:00
committed by Henning Gründl
parent 887058f621
commit c2c48598d4
2 changed files with 163 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetList.qml
View File

@@ -25,42 +25,43 @@
import QtQuick 2.11 import QtQuick 2.11
import QtQuick.Layouts 1.12 import QtQuick.Layouts 1.12
import QtQuick.Controls 2.5
import QtQuick.Dialogs 1.3 import QtQuick.Dialogs 1.3
import HelperWidgets 2.0 import HelperWidgets 2.0
import QtQuickDesignerTheme 1.0 import QtQuickDesignerTheme 1.0
import StudioControls 1.0 as StudioControls
import StudioTheme 1.0 as StudioTheme
Dialog { Dialog {
id: dialogWindow id: dialogWindow
width: 1200 width: 1200
height: 650 height: 650
title: "Gradient Picker" title: qsTr("Gradient Picker")
signal saved; signal saved
property alias gradientData: gradientPickerData; property alias gradientData: gradientPickerData
QtObject { QtObject {
id: gradientPickerData id: gradientPickerData
property var stops; property var stops
property var colors; property var colors
property int stopsCount; property int stopsCount
property int presetID; property int presetID
property int presetType; //default(0) or custom(1) property int presetType // default(0) or custom(1)
property Item selectedItem; property Item selectedItem
} }
function addGradient(stopsPositions, stopsColors, stopsCount) { function addGradient(stopsPositions, stopsColors, stopsCount) {
customPresetListModel.addGradient(stopsPositions, stopsColors, stopsCount); customPresetListModel.addGradient(stopsPositions, stopsColors, stopsCount)
} }
function updatePresets() { function updatePresets() {
customPresetListModel.readPresets(); customPresetListModel.readPresets()
} }
GradientPresetDefaultListModel { id: defaultPresetListModel; } GradientPresetDefaultListModel { id: defaultPresetListModel }
GradientPresetCustomListModel { id: customPresetListModel; } GradientPresetCustomListModel { id: customPresetListModel }
standardButtons: Dialog.NoButton standardButtons: Dialog.NoButton
@@ -68,27 +69,30 @@ Dialog {
anchors.fill: parent anchors.fill: parent
anchors.margins: -12 anchors.margins: -12
anchors.bottomMargin: -70 anchors.bottomMargin: -70
color: "#363636" color: StudioTheme.Values.themeColumnBackground
ColumnLayout { ColumnLayout {
anchors.fill: parent anchors.fill: parent
anchors.margins: 13 anchors.margins: 13
anchors.bottomMargin: 71 anchors.bottomMargin: 71
TabView { TabView {
id: presetTabView id: presetTabView
Layout.alignment: Qt.AlignTop | Qt.AlignHCenter Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
Layout.fillHeight: true Layout.fillHeight: true
Layout.fillWidth: true Layout.fillWidth: true
Tab { Tab {
title: qsTr("System Presets") title: qsTr("System Presets")
anchors.fill:parent anchors.fill: parent
GradientPresetTabContent { GradientPresetTabContent {
id: defaultTabContent id: defaultTabContent
viewModel: defaultPresetListModel viewModel: defaultPresetListModel
editableName: false editableName: false
} }
}
} //tab default
Tab { Tab {
title: qsTr("User Presets") title: qsTr("User Presets")
anchors.fill: parent anchors.fill: parent
@@ -97,11 +101,12 @@ Dialog {
id: customTabContent id: customTabContent
viewModel: customPresetListModel viewModel: customPresetListModel
editableName: true editableName: true
onPresetNameChanged: customPresetListModel.changePresetName(id, name); onPresetNameChanged: customPresetListModel.changePresetName(id, name)
property int deleteId;
property int deleteId
onDeleteButtonClicked: { onDeleteButtonClicked: {
deleteId = id; deleteId = id
deleteDialog.open() deleteDialog.open()
} }
@@ -112,11 +117,12 @@ Dialog {
standardButtons: Dialog.No | Dialog.Yes standardButtons: Dialog.No | Dialog.Yes
title: qsTr("Delete preset?") title: qsTr("Delete preset?")
text: qsTr("Are you sure you want to delete this preset?") text: qsTr("Are you sure you want to delete this preset?")
onAccepted: customPresetListModel.deletePreset(customTabContent.deleteId); onAccepted: customPresetListModel.deletePreset(customTabContent.deleteId)
} }
} }
} //tab custom }
} //tabview }
RowLayout { RowLayout {
Layout.alignment: Qt.AlignBottom | Qt.AlignRight Layout.alignment: Qt.AlignBottom | Qt.AlignRight
Layout.topMargin: 5 Layout.topMargin: 5
@@ -124,7 +130,7 @@ Dialog {
Button { id: buttonClose; text: qsTr("Close"); onClicked: { dialogWindow.reject(); } } Button { id: buttonClose; text: qsTr("Close"); onClicked: { dialogWindow.reject(); } }
Button { id: buttonSave; text: qsTr("Save"); onClicked: { dialogWindow.saved(); } } Button { id: buttonSave; text: qsTr("Save"); onClicked: { dialogWindow.saved(); } }
Button { id: buttonApply; text: qsTr("Apply"); onClicked: { dialogWindow.apply(); } } Button { id: buttonApply; text: qsTr("Apply"); onClicked: { dialogWindow.apply(); } }
} //RowLayout }
} //ColumnLayout }
} //rectangle }
} //dialog }

302
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetTabContent.qml
View File

@@ -25,31 +25,28 @@
import QtQuick 2.11 import QtQuick 2.11
import QtQuick.Layouts 1.12 import QtQuick.Layouts 1.12
import QtQuick.Controls 2.5
import QtQuick.Controls.Styles 1.4
import QtQuick.Dialogs 1.3 import QtQuick.Dialogs 1.3
import HelperWidgets 2.0 import HelperWidgets 2.0
import QtQuickDesignerTheme 1.0 import QtQuickDesignerTheme 1.0
import QtQuick.Controls.Private 1.0 as PrivateControls import StudioControls 1.0 as StudioControls
import StudioTheme 1.0 as StudioTheme
Rectangle { Rectangle {
id: tabBackground id: tabBackground
width: parent.width width: parent.width
height: parent.height height: parent.height
color: "#242424" color: StudioTheme.Values.themeControlBackground
anchors.fill: parent anchors.fill: parent
property alias viewModel : gradientTable.model; property alias viewModel: gradientTable.model
property bool editableName : false; property bool editableName: false
signal presetNameChanged(int id, string name) signal presetNameChanged(int id, string name)
signal deleteButtonClicked(int id) signal deleteButtonClicked(int id)
property real delegateWidth: 154; property real delegateWidth: 154
property real delegateHeight: 178; property real delegateHeight: 178
property real gridCellWidth: 160; property real gridCellWidth: 160
ScrollView { ScrollView {
Layout.fillWidth: true Layout.fillWidth: true
@@ -74,7 +71,7 @@ Rectangle {
Rectangle { Rectangle {
id: backgroundCard id: backgroundCard
color: "#404040" color: StudioTheme.Values.themeControlOutline
clip: true clip: true
property real flexibleWidth: (gradientTable.width - gradientTable.cellWidth * gradientTable.gridColumns) / gradientTable.gridColumns property real flexibleWidth: (gradientTable.width - gradientTable.cellWidth * gradientTable.gridColumns) / gradientTable.gridColumns
@@ -84,82 +81,78 @@ Rectangle {
height: tabBackground.delegateHeight height: tabBackground.delegateHeight
radius: 16 radius: 16
function selectPreset(index) {
gradientTable.currentIndex = index
gradientData.stops = stopsPosList
gradientData.colors = stopsColorList
gradientData.stopsCount = stopListSize
gradientData.presetID = presetID
gradientData.presetType = presetTabView.currentIndex
if (gradientData.selectedItem != null)
gradientData.selectedItem.isSelected = false
backgroundCard.isSelected = true
gradientData.selectedItem = backgroundCard
}
MouseArea { MouseArea {
id: rectMouseArea id: rectMouseArea
anchors.fill: parent anchors.fill: parent
hoverEnabled: true hoverEnabled: true
onClicked: { onClicked: {
gradientTable.currentIndex = index; presetNameBox.edit = false
gradientData.stops = stopsPosList; nameInput.focus = false
gradientData.colors = stopsColorList; backgroundCard.selectPreset(index)
gradientData.stopsCount = stopListSize;
gradientData.presetID = presetID;
gradientData.presetType = presetTabView.currentIndex
if (gradientData.selectedItem != null)
gradientData.selectedItem.isSelected = false
backgroundCard.isSelected = true
gradientData.selectedItem = backgroundCard
} }
onEntered: {
if (backgroundCard.state != "CLICKED") {
backgroundCard.state = "HOVER";
}
}
onExited: {
if (backgroundCard.state != "CLICKED") {
backgroundCard.state = "USUAL";
}
}
} //mouseArea
onIsSelectedChanged: {
if (isSelected)
backgroundCard.state = "CLICKED"
else
backgroundCard.state = "USUAL"
} }
states: [ states: [
State { State {
name: "HOVER" name: "default"
when: !(rectMouseArea.containsMouse || removeButton.hovered ||
(nameMouseArea.containsMouse && !tabBackground.editableName)) &&
!backgroundCard.isSelected
PropertyChanges { PropertyChanges {
target: backgroundCard target: backgroundCard
color: "#606060" color: StudioTheme.Values.themeControlOutline
border.width: 1
border.color: "#029de0"
}
},
State {
name: "CLICKED"
PropertyChanges {
target: backgroundCard
color:"#029de0"
border.width: 1
border.color: "#606060"
}
},
State {
name: "USUAL"
PropertyChanges
{
target: backgroundCard
color: "#404040"
border.width: 0 border.width: 0
} }
},
State {
name: "hovered"
when: (rectMouseArea.containsMouse || removeButton.hovered ||
(nameMouseArea.containsMouse && !tabBackground.editableName)) &&
!backgroundCard.isSelected
PropertyChanges {
target: backgroundCard
color: StudioTheme.Values.themeControlBackgroundPressed
border.width: 1
border.color: StudioTheme.Values.themeInteraction
}
},
State {
name: "selected"
when: backgroundCard.isSelected
PropertyChanges {
target: backgroundCard
color:StudioTheme.Values.themeInteraction
border.width: 1
border.color: StudioTheme.Values.themeControlBackgroundPressed
}
} }
] //states ]
ColumnLayout { ColumnLayout {
spacing: 2 spacing: 2
anchors.fill: parent anchors.fill: parent
Rectangle { Rectangle {
width: 150; height: 150
id: gradientRect id: gradientRect
width: 150
height: 150
radius: 16 radius: 16
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter //was top Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
Layout.topMargin: 2 Layout.topMargin: 2
gradient: Gradient { gradient: Gradient {
@@ -174,36 +167,26 @@ Rectangle {
Component.onCompleted: { Component.onCompleted: {
var stopsAmount = stopListSize; var stopsAmount = stopListSize;
var newStops = []; var newStops = [];
for (var i = 0; i < stopsAmount; i++ ) { for (var i = 0; i < stopsAmount; i++) {
newStops.push( stopComponent.createObject(showGr, { "position": stopsPosList[i], "color": stopsColorList[i] }) ); newStops.push( stopComponent.createObject(showGr, { "position": stopsPosList[i], "color": stopsColorList[i] }) );
} }
showGr.stops = newStops; showGr.stops = newStops;
} }
Rectangle { AbstractButton {
id: removeItemRect id: removeButton
visible: editableName && (rectMouseArea.containsMouse || removeButton.hovered)
backgroundRadius: StudioTheme.Values.smallRectWidth
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: 5 anchors.rightMargin: 5
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 5 anchors.topMargin: 5
height: 16 width: Math.round(StudioTheme.Values.smallRectWidth)
width: 16 height: Math.round(StudioTheme.Values.smallRectWidth)
visible: editableName && rectMouseArea.containsMouse buttonIcon: StudioTheme.Constants.closeCross
color: "#804682b4" onClicked: tabBackground.deleteButtonClicked(index)
}
MouseArea { }
anchors.fill: parent;
onClicked: tabBackground.deleteButtonClicked(index);
}
Image {
source: "image://icons/close"
fillMode: Image.PreserveAspectFit
anchors.fill: parent;
Layout.alignment: Qt.AlignCenter
} //image remove
} //rectangle remove
} //rectangle gradient
Item { Item {
id: presetNameBox id: presetNameBox
@@ -212,19 +195,7 @@ Rectangle {
Layout.preferredHeight: backgroundCard.height - gradientRect.height - 4 Layout.preferredHeight: backgroundCard.height - gradientRect.height - 4
Layout.bottomMargin: 4 Layout.bottomMargin: 4
property bool readOnly : true; property bool edit: false
onReadOnlyChanged: {
if (!readOnly) {
nameInput.visible = true;
nameInput.forceActiveFocus();
//have to select text like this, otherwise there is an issue with long names
nameInput.cursorPosition = 0;
nameInput.cursorPosition = nameInput.length;
nameInput.selectAll();
}
} //onReadOnlyChanged
Rectangle { Rectangle {
id: nameBackgroundColor id: nameBackgroundColor
@@ -233,131 +204,118 @@ Rectangle {
radius: 16 radius: 16
visible: true visible: true
anchors.fill: parent anchors.fill: parent
} //rectangle }
MouseArea { ToolTipArea {
id: nameMouseArea id: nameMouseArea
visible: tabBackground.editableName
hoverEnabled: true
anchors.fill: parent anchors.fill: parent
tooltip: nameText.text
propagateComposedEvents: true
onClicked: presetNameBox.state = "Clicked"; onClicked: {
if (!tabBackground.editableName) {
onEntered: { backgroundCard.selectPreset(index)
if (presetNameBox.state != "Clicked") return
{
presetNameBox.state = "Hover";
} }
presetNameBox.edit = true
nameInput.forceActiveFocus()
// have to select text like this, otherwise there is an issue with long names
nameInput.cursorPosition = 0
nameInput.cursorPosition = nameInput.length
nameInput.selectAll()
} }
}
onExited: {
if (presetNameBox.state != "Clicked")
{
presetNameBox.state = "Normal";
}
PrivateControls.Tooltip.hideText()
}
Timer {
interval: 1000
running: nameMouseArea.containsMouse && presetNameBox.readOnly
onTriggered: PrivateControls.Tooltip.showText(nameMouseArea, Qt.point(nameMouseArea.mouseX, nameMouseArea.mouseY), presetName)
}
onCanceled: Tooltip.hideText()
} //mouseArea
Text { Text {
id: nameText id: nameText
visible: presetNameBox.readOnly
text: presetName text: presetName
anchors.fill: parent anchors.fill: parent
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
color: "#ffffff" color: StudioTheme.Values.themeTextColor
elide: Text.ElideMiddle elide: Text.ElideMiddle
maximumLineCount: 1 maximumLineCount: 1
} //text }
TextInput { TextInput {
id: nameInput id: nameInput
visible: !presetNameBox.readOnly enabled: tabBackground.editableName
visible: false
text: presetName text: presetName
anchors.fill: parent anchors.fill: parent
anchors.leftMargin: 5 anchors.leftMargin: 5
anchors.rightMargin: 5 anchors.rightMargin: 5
horizontalAlignment: TextInput.AlignHCenter horizontalAlignment: TextInput.AlignHCenter
verticalAlignment: TextInput.AlignVCenter verticalAlignment: TextInput.AlignVCenter
color: "#ffffff" color: StudioTheme.Values.themeTextColor
selectionColor: "#029de0" selectionColor: StudioTheme.Values.themeInteraction
selectByMouse: true
activeFocusOnPress: true activeFocusOnPress: true
wrapMode: TextInput.NoWrap wrapMode: TextInput.NoWrap
clip: true clip: true
onEditingFinished: { onEditingFinished: {
nameText.text = text nameText.text = text
tabBackground.presetNameChanged(index, text); tabBackground.presetNameChanged(index, text)
presetNameBox.state = "Normal"; presetNameBox.edit = false
} }
Keys.onPressed: { Keys.onPressed: {
if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return) { if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return) {
event.accepted = true; event.accepted = true
editingFinished(); nameInput.editingFinished()
focus = false; nameInput.focus = false
} //if }
} //Keys.onPressed
} //textInput if (event.key === Qt.Key_Escape) {
event.accepted = true
nameInput.text = nameText.text
nameInput.focus = false
}
}
}
states: [ states: [
State { State {
name: "Normal" name: "default"
when: tabBackground.editableName && !nameMouseArea.containsMouse && !presetNameBox.edit
PropertyChanges { PropertyChanges {
target: nameBackgroundColor target: nameBackgroundColor
color: "transparent" color: "transparent"
border.width: 0 border.width: 0
} }
PropertyChanges { PropertyChanges { target: nameText; visible: true }
target: presetNameBox PropertyChanges { target: nameInput; visible: false }
readOnly: true
}
}, },
State { State {
name: "Hover" name: "hovered"
when: tabBackground.editableName && nameMouseArea.containsMouse && !presetNameBox.edit
PropertyChanges { PropertyChanges {
target: nameBackgroundColor target: nameBackgroundColor
color: "#606060" color: StudioTheme.Values.themeControlBackgroundPressed
border.width: 0 border.width: 0
} }
PropertyChanges { PropertyChanges { target: nameText; visible: true }
target: presetNameBox PropertyChanges { target: nameInput; visible: false }
readOnly: true
}
}, },
State { State {
name: "Clicked" name: "edit"
when: tabBackground.editableName && presetNameBox.edit
PropertyChanges { PropertyChanges {
target: nameBackgroundColor target: nameBackgroundColor
color: "#606060" color: StudioTheme.Values.themeControlBackgroundPressed
border.color: "#029de0" border.color: StudioTheme.Values.themeInteraction
border.width: 1 border.width: 1
} }
PropertyChanges { PropertyChanges { target: nameText; visible: false }
target: presetNameBox PropertyChanges { target: nameInput; visible: true }
readOnly: false
}
PropertyChanges {
target: nameInput
visible: true
}
} }
] //states ]
} //gradient name Item }
} //columnLayout }
} //rectangle background }
} //component delegate }
} //gridview }
} //scrollView }
} //rectangle }