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

QmlDesigner: Refactor Effect maker nodes view

Browse Source 
Also add node click handler

Change-Id: I4b4e327f5c69f27d64ef2f2c3d13628aea46f0af
Reviewed-by: Miikka Heikkinen <miikka.heikkinen@qt.io>
This commit is contained in:
Mahmoud Badri
2023-08-15 15:40:46 +03:00
parent 8812c1816b
commit bf6ea8496a
5 changed files with 144 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
share/qtcreator/qmldesigner/effectMakerQmlSources/EffectMaker.qml
View File

@@ -2,8 +2,6 @@
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only WITH Qt-GPL-exception-1.0
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import HelperWidgets as HelperWidgets
import StudioControls as StudioControls
import StudioTheme as StudioTheme
@@ -36,136 +34,8 @@ Item {
height: StudioTheme.Values.toolbarHeight
color: StudioTheme.Values.themeToolbarBackground
StudioControls.ComboBox {
id: effectNodesComboBox
actionIndicatorVisible: false
x: 5
width: parent.width - 50
anchors.verticalCenter: parent.verticalCenter
model: [qsTr("+ Add Effect")]
// hide default popup
popup.width: 0
popup.height: 0
Connections {
target: effectNodesComboBox.popup
function onAboutToShow() {
var a = root.mapToGlobal(0, 0)
var b = effectNodesComboBox.mapToItem(root, 0, 0)
effectNodesWindow.x = a.x + b.x + effectNodesComboBox.width - effectNodesWindow.width
effectNodesWindow.y = a.y + b.y + effectNodesComboBox.height - 1
effectNodesWindow.show()
effectNodesWindow.requestActivate()
}
function onAboutToHide() {
effectNodesWindow.hide()
}
}
Window {
id: effectNodesWindow
width: row.width + 2 // 2: scrollView left and right 1px margins
height: Math.min(800, Math.min(row.height + 2, Screen.height - y - 40)) // 40: some bottom margin to cover OS bottom toolbar
flags: Qt.Popup | Qt.FramelessWindowHint
onActiveChanged: {
if (!active)
effectNodesComboBox.popup.close()
}
Rectangle {
anchors.fill: parent
color: StudioTheme.Values.themePanelBackground
border.color: StudioTheme.Values.themeInteraction
border.width: 1
HelperWidgets.ScrollView {
anchors.fill: parent
anchors.margins: 1
Row {
id: row
onWidthChanged: {
// Needed to update on first window showing, as row.width only gets
// correct value after the window is shown, so first showing is off
var a = root.mapToGlobal(0, 0)
var b = effectNodesComboBox.mapToItem(root, 0, 0)
effectNodesWindow.x = a.x + b.x + effectNodesComboBox.width - row.width
}
padding: 10
spacing: 10
Repeater {
model: EffectMakerBackend.effectMakerNodesModel
Column {
spacing: 10
Text {
text: categoryName
color: StudioTheme.Values.themeTextColor
font.pointSize: StudioTheme.Values.baseFontSize
}
Item { width: 1; height: 5 } // spacer
Repeater {
model: categoryNodes
Rectangle {
width: 140
height: 22
color: mouseArea.containsMouse ? StudioTheme.Values.themeControlBackgroundInteraction
: "transparent"
MouseArea {
id: mouseArea
anchors.fill: parent
hoverEnabled: true
}
Row {
spacing: 5
IconImage {
id: nodeIcon
width: 22
height: 22
color: StudioTheme.Values.themeTextColor
source: modelData.nodeIcon
}
Text {
text: modelData.nodeName
color: StudioTheme.Values.themeTextColor
font.pointSize: StudioTheme.Values.smallFontSize
anchors.verticalCenter: nodeIcon.verticalCenter
}
}
}
}
}
}
}
}
}
}
EffectNodesComboBox {
mainRoot: root
}
}

65
share/qtcreator/qmldesigner/effectMakerQmlSources/EffectNode.qml
View File

@@ -3,70 +3,51 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuickDesignerTheme
import HelperWidgets
import StudioControls as StudioControls
import StudioTheme 1.0 as StudioTheme
import EffectMakerBackend
// TODO: this will be redone based on new specs
Rectangle {
property real margin: StudioTheme.Values.marginTopBottom
id: root
height: col.height + margin * 2
signal showContextMenu()
width: 140
height: 22
border.width: EffectMakerBackend.effectMakerModel.selectedIndex === index ? 3 : 0
border.color: EffectMakerBackend.effectMakerModel.selectedIndex === index
? StudioTheme.Values.themeControlOutlineInteraction
: "transparent"
color: "transparent"
visible: true // TODO: from rolename -> effectVisible
color: mouseArea.containsMouse ? StudioTheme.Values.themeControlBackgroundInteraction
: "transparent"
MouseArea {
id: mouseArea
anchors.fill: parent
acceptedButtons: Qt.LeftButton | Qt.RightButton
hoverEnabled: true
acceptedButtons: Qt.LeftButton
onPressed: (mouse) => {
EffectMakerBackend.effectMakerModel.selectEffect(index)
EffectMakerBackend.rootView.focusSection(0) // TODO: Set the correct section based on current effect
if (mouse.button === Qt.LeftButton)
// TODO: Start dragging here
;
else if (mouse.button === Qt.RightButton)
root.showContextMenu()
onClicked: {
EffectMakerBackend.rootView.addEffectNode(modelData.nodeName)
}
}
ColumnLayout {
id: col
Layout.topMargin: margin
Layout.bottomMargin: margin
Row {
Row {
spacing: 5
width: parent.width
IconImage {
id: nodeIcon
Text {
anchors.verticalCenter: parent.verticalCenter
rightPadding: margin * 3
text: '⋮⋮'
color: StudioTheme.Values.themeTextColorDisabled
font.letterSpacing: -10
font.bold: true
font.pointSize: StudioTheme.Values.mediumIconFontSize
}
width: 22
height: 22
StudioControls.CheckBox {
text: modelData
actionIndicatorVisible: false
}
color: StudioTheme.Values.themeTextColor
source: modelData.nodeIcon
}
Text {
text: modelData.nodeName
color: StudioTheme.Values.themeTextColor
font.pointSize: StudioTheme.Values.smallFontSize
anchors.verticalCenter: nodeIcon.verticalCenter
}
}
}

109
share/qtcreator/qmldesigner/effectMakerQmlSources/EffectNodesComboBox.qml Normal file
View File

@@ -0,0 +1,109 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only WITH Qt-GPL-exception-1.0
import QtQuick
import QtQuickDesignerTheme
import HelperWidgets as HelperWidgets
import StudioControls as StudioControls
import StudioTheme 1.0 as StudioTheme
import EffectMakerBackend
StudioControls.ComboBox {
id: root
actionIndicatorVisible: false
x: 5
width: parent.width - 50
anchors.verticalCenter: parent.verticalCenter
model: [qsTr("+ Add Effect")]
// hide default popup
popup.width: 0
popup.height: 0
required property Item mainRoot
Connections {
target: root.popup
function onAboutToShow() {
var a = mainRoot.mapToGlobal(0, 0)
var b = root.mapToItem(mainRoot, 0, 0)
effectNodesWindow.x = a.x + b.x + root.width - effectNodesWindow.width
effectNodesWindow.y = a.y + b.y + root.height - 1
effectNodesWindow.show()
effectNodesWindow.requestActivate()
}
function onAboutToHide() {
effectNodesWindow.hide()
}
}
Window {
id: effectNodesWindow
width: row.width + 2 // 2: scrollView left and right 1px margins
height: Math.min(800, Math.min(row.height + 2, Screen.height - y - 40)) // 40: some bottom margin to cover OS bottom toolbar
flags: Qt.Popup | Qt.FramelessWindowHint
onActiveChanged: {
if (!active)
root.popup.close()
}
Rectangle {
anchors.fill: parent
color: StudioTheme.Values.themePanelBackground
border.color: StudioTheme.Values.themeInteraction
border.width: 1
HelperWidgets.ScrollView {
anchors.fill: parent
anchors.margins: 1
Row {
id: row
onWidthChanged: {
// Needed to update on first window showing, as row.width only gets
// correct value after the window is shown, so first showing is off
var a = mainRoot.mapToGlobal(0, 0)
var b = root.mapToItem(mainRoot, 0, 0)
effectNodesWindow.x = a.x + b.x + root.width - row.width
}
padding: 10
spacing: 10
Repeater {
model: EffectMakerBackend.effectMakerNodesModel
Column {
spacing: 10
Text {
text: categoryName
color: StudioTheme.Values.themeTextColor
font.pointSize: StudioTheme.Values.baseFontSize
}
Item { width: 1; height: 5 } // spacer
Repeater {
model: categoryNodes
EffectNode {}
}
}
}
}
}
}
}
}

9
src/plugins/qmldesigner/components/effectmaker/effectmakerwidget.cpp
View File

@@ -99,6 +99,15 @@ QPointer<EffectMakerNodesModel> EffectMakerWidget::effectMakerNodesModel() const
return m_effectMakerNodesModel;
}
void EffectMakerWidget::addEffectNode(const QString &nodeName)
{
Q_UNUSED(nodeName)
// TODO: implement adding a node to the composition
// TODO: nodeName might be changed to nodeId?
// m_effectMakerModel.addNode(nodeName);
}
void EffectMakerWidget::focusSection(int section)
{
Q_UNUSED(section)

1
src/plugins/qmldesigner/components/effectmaker/effectmakerwidget.h
View File

@@ -35,6 +35,7 @@ public:
QPointer<EffectMakerModel> effectMakerModel() const;
QPointer<EffectMakerNodesModel> effectMakerNodesModel() const;
Q_INVOKABLE void addEffectNode(const QString &nodeName);
Q_INVOKABLE void focusSection(int section);
protected: