Skip to content

feat(materials): Inspector preview pane + Material Editor redesign (Phase 5 slice I) #492

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
fernandotonon merged 4 commits into from
May 11, 2026
Merged

feat(materials): Inspector preview pane + Material Editor redesign (Phase 5 slice I) #492

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5c1084f
feat(materials): Inspector preview pane + Material Editor redesign (P…
fernandotonon May 11, 2026
3096b75
fix(materials): address CodeRabbit review for slice I PR
fernandotonon May 11, 2026
ced3723
Merge remote-tracking branch 'origin/master' into feat/phase5-slice-i…
fernandotonon May 11, 2026
724c9a2
fix(tests): drop interactive preview cases from MaterialEditorQMLWith…
fernandotonon May 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
429 changes: 367 additions & 62 deletions qml/MaterialEditorWindow.qml
View file
Open in desktop

Large diffs are not rendered by default.

304 changes: 220 additions & 84 deletions qml/PassPropertiesPanel.qml
View file
Open in desktop

Large diffs are not rendered by default.

523 changes: 505 additions & 18 deletions qml/PropertiesPanel.qml
View file
Open in desktop

Large diffs are not rendered by default.

213 changes: 152 additions & 61 deletions qml/TexturePropertiesPanel.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,41 +5,42 @@ import MaterialEditorQML 1.0

GroupBox {
title: "Texture Properties"

// Apply theme colors to GroupBox

// Slice I: flat Inspector-style header.
topPadding: 22
leftPadding: 6
rightPadding: 6
bottomPadding: 6
background: Rectangle {
color: panelColor
border.color: borderColor
border.width: 1
radius: 4
color: "transparent"
Rectangle {
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
height: 1
color: borderColor
}
}

label: Label {
label: ThemedLabel {
text: parent.title
color: textColor
font.bold: true
x: parent.leftPadding
width: parent.availableWidth
topPadding: 4
}

Component.onCompleted: {
console.log("TexturePropertiesPanel: loaded successfully")
}

// Enhanced dynamic theme colors based on system palette
readonly property color backgroundColor: palette.window
readonly property color panelColor: palette.base
readonly property color textColor: palette.windowText
readonly property color borderColor: palette.mid
readonly property color highlightColor: palette.highlight
readonly property color buttonColor: palette.button
readonly property color buttonTextColor: palette.buttonText
readonly property color disabledTextColor: palette.placeholderText

SystemPalette {
id: palette
colorGroup: SystemPalette.Active
}
// Slice I: align local colors with MaterialEditorQML so the
// GroupBox surfaces match the outer Material Editor pane.
readonly property color backgroundColor: MaterialEditorQML.backgroundColor
readonly property color panelColor: MaterialEditorQML.panelColor
readonly property color textColor: MaterialEditorQML.textColor
readonly property color borderColor: MaterialEditorQML.borderColor
readonly property color highlightColor: MaterialEditorQML.highlightColor
readonly property color buttonColor: MaterialEditorQML.buttonColor
readonly property color buttonTextColor: MaterialEditorQML.buttonTextColor
readonly property color disabledTextColor: MaterialEditorQML.disabledTextColor

ColumnLayout {
anchors.fill: parent
Expand All @@ -49,15 +50,25 @@ GroupBox {
GroupBox {
title: "Texture Selection"
Layout.fillWidth: true
// Slice I: flat Inspector-style header.
topPadding: 22
leftPadding: 6
rightPadding: 6
bottomPadding: 6
background: Rectangle {
color: panelColor
border.color: borderColor
border.width: 1
radius: 4
color: "transparent"
Rectangle {
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
height: 1
color: borderColor
}
}
label: ThemedLabel {
text: parent.title
font.bold: true
topPadding: 4
}

ColumnLayout {
Expand Down Expand Up @@ -135,15 +146,25 @@ GroupBox {
title: "Preview"
Layout.fillWidth: true
Layout.preferredHeight: 200
// Slice I: flat Inspector-style header.
topPadding: 22
leftPadding: 6
rightPadding: 6
bottomPadding: 6
background: Rectangle {
color: panelColor
border.color: borderColor
border.width: 1
radius: 4
color: "transparent"
Rectangle {
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
height: 1
color: borderColor
}
}
label: ThemedLabel {
text: parent.title
font.bold: true
topPadding: 4
}

Rectangle {
Expand Down Expand Up @@ -214,15 +235,25 @@ GroupBox {
// Texture Coordinates Group
GroupBox {
title: "Texture Coordinates"
// Slice I: flat Inspector-style header.
topPadding: 22
leftPadding: 6
rightPadding: 6
bottomPadding: 6
background: Rectangle {
color: MaterialEditorQML.panelColor
border.color: MaterialEditorQML.borderColor
border.width: 1
radius: 4
color: "transparent"
Rectangle {
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
height: 1
color: MaterialEditorQML.borderColor
}
}
label: ThemedLabel {
text: parent.title
font.bold: true
topPadding: 4
}

ColumnLayout {
Expand Down Expand Up @@ -303,15 +334,25 @@ GroupBox {
// Texture Filtering Group
GroupBox {
title: "Texture Filtering"
// Slice I: flat Inspector-style header.
topPadding: 22
leftPadding: 6
rightPadding: 6
bottomPadding: 6
background: Rectangle {
color: MaterialEditorQML.panelColor
border.color: MaterialEditorQML.borderColor
border.width: 1
radius: 4
color: "transparent"
Rectangle {
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
height: 1
color: MaterialEditorQML.borderColor
}
}
label: ThemedLabel {
text: parent.title
font.bold: true
topPadding: 4
}

ColumnLayout {
Expand Down Expand Up @@ -370,15 +411,25 @@ GroupBox {
// Texture Transform Group
GroupBox {
title: "Texture Transform"
// Slice I: flat Inspector-style header.
topPadding: 22
leftPadding: 6
rightPadding: 6
bottomPadding: 6
background: Rectangle {
color: MaterialEditorQML.panelColor
border.color: MaterialEditorQML.borderColor
border.width: 1
radius: 4
color: "transparent"
Rectangle {
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
height: 1
color: MaterialEditorQML.borderColor
}
}
label: ThemedLabel {
text: parent.title
font.bold: true
topPadding: 4
}

ColumnLayout {
Expand Down Expand Up @@ -511,15 +562,25 @@ GroupBox {
// Environment Mapping Group
GroupBox {
title: "Environment Mapping"
// Slice I: flat Inspector-style header.
topPadding: 22
leftPadding: 6
rightPadding: 6
bottomPadding: 6
background: Rectangle {
color: MaterialEditorQML.panelColor
border.color: MaterialEditorQML.borderColor
border.width: 1
radius: 4
color: "transparent"
Rectangle {
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
height: 1
color: MaterialEditorQML.borderColor
}
}
label: ThemedLabel {
text: parent.title
font.bold: true
topPadding: 4
}

ColumnLayout {
Expand Down Expand Up @@ -554,15 +615,25 @@ GroupBox {
// Texture Animation Group
GroupBox {
title: "Texture Animation"
// Slice I: flat Inspector-style header.
topPadding: 22
leftPadding: 6
rightPadding: 6
bottomPadding: 6
background: Rectangle {
color: MaterialEditorQML.panelColor
border.color: MaterialEditorQML.borderColor
border.width: 1
radius: 4
color: "transparent"
Rectangle {
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
height: 1
color: MaterialEditorQML.borderColor
}
}
label: ThemedLabel {
text: parent.title
font.bold: true
topPadding: 4
}

ColumnLayout {
Expand Down Expand Up @@ -686,15 +757,25 @@ GroupBox {
visible: MaterialEditorQML.stableDiffusionEnabled
Layout.fillWidth: true

// Slice I: flat Inspector-style header.
topPadding: 22
leftPadding: 6
rightPadding: 6
bottomPadding: 6
background: Rectangle {
color: MaterialEditorQML.panelColor
border.color: MaterialEditorQML.borderColor
border.width: 1
radius: 4
color: "transparent"
Rectangle {
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
height: 1
color: MaterialEditorQML.borderColor
}
}
label: ThemedLabel {
text: parent.title
font.bold: true
topPadding: 4
}

ColumnLayout {
Expand Down Expand Up @@ -791,15 +872,25 @@ GroupBox {
GroupBox {
title: "Information"
Layout.fillWidth: true
// Slice I: flat Inspector-style header.
topPadding: 22
leftPadding: 6
rightPadding: 6
bottomPadding: 6
background: Rectangle {
color: panelColor
border.color: borderColor
border.width: 1
radius: 4
color: "transparent"
Rectangle {
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
height: 1
color: borderColor
}
}
label: ThemedLabel {
text: parent.title
font.bold: true
topPadding: 4
}

ColumnLayout {
Expand Down
37 changes: 23 additions & 14 deletions qml/ThemedButton.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,38 @@
import QtQuick
import QtQuick.Controls

// Slice I: re-skinned to match the Inspector's flat compact look.
// Uses MaterialEditorQML palette colors that are bound to the same
// system palette as PropertiesPanelController.
Button {
implicitHeight: 24
leftPadding: 10
rightPadding: 10
topPadding: 2
bottomPadding: 2
font.pixelSize: 11

background: Rectangle {
color: parent.enabled ? (parent.hovered ? Qt.lighter(MaterialEditorQML.buttonColor, 1.2) : MaterialEditorQML.buttonColor) : Qt.darker(MaterialEditorQML.buttonColor, 1.5)
radius: 3
color: !parent.enabled
? Qt.darker(MaterialEditorQML.buttonColor, 1.4)
: parent.pressed
? Qt.darker(MaterialEditorQML.highlightColor, 1.1)
: parent.hovered
? MaterialEditorQML.highlightColor
: MaterialEditorQML.buttonColor
border.color: MaterialEditorQML.borderColor
border.width: 1
radius: 3

Rectangle {
anchors.fill: parent
anchors.margins: 1
color: "transparent"
border.color: parent.enabled && parent.parent.pressed ? Qt.lighter(MaterialEditorQML.borderColor, 1.5) : "transparent"
border.width: 1
radius: 2
}
}

contentItem: Text {
text: parent.text
font: parent.font
color: parent.enabled ? MaterialEditorQML.buttonTextColor : Qt.darker(MaterialEditorQML.buttonTextColor, 2.0)
color: parent.enabled
? MaterialEditorQML.buttonTextColor
: Qt.darker(MaterialEditorQML.buttonTextColor, 2.0)
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
}
}
Loading
Loading