From ec13696749683794dd1382fc09fc505a1a06d37a Mon Sep 17 00:00:00 2001 From: Ali Kianian Date: Mon, 2 Dec 2024 10:17:31 +0200 Subject: [PATCH] EffectComposer: Tweak tab bar sizes * A left margin is applied to the tab bar (10 px) * Tab buttons have paddings instead of a fixed size Task-number: QDS-14244 Change-Id: Ibe4953b9447a1ba48c83cb0f9865068fb8cbec38 Reviewed-by: Miikka Heikkinen Reviewed-by: Shrief Gabr --- .../CodeEditorTabs.qml | 21 +++++++++++++------ .../imports/StudioTheme/Values.qml | 7 +++++++ .../effectshaderscodeeditor.cpp | 2 +- 3 files changed, 23 insertions(+), 7 deletions(-) diff --git a/share/qtcreator/qmldesigner/effectComposerQmlSources/CodeEditorTabs.qml b/share/qtcreator/qmldesigner/effectComposerQmlSources/CodeEditorTabs.qml index 897023a1715..f7f43085aff 100644 --- a/share/qtcreator/qmldesigner/effectComposerQmlSources/CodeEditorTabs.qml +++ b/share/qtcreator/qmldesigner/effectComposerQmlSources/CodeEditorTabs.qml @@ -18,9 +18,15 @@ Rectangle { RowLayout { id: rowLayout + property real leftMargin: StudioTheme.Values.tabBarHorizontalMargin + width: parent.width - anchors.verticalCenter: parent.verticalCenter - spacing: StudioTheme.Values.controlGap + anchors.bottom: parent.bottom + spacing: StudioTheme.Values.tabBarSpacing + + Item { // Empty item as a left margin + implicitWidth: rowLayout.leftMargin - rowLayout.spacing + } TabButton { text: qsTr("Fragment Shader") @@ -32,7 +38,7 @@ Rectangle { tabId: "VERTEX" } - Item { + Item { // Spacer Layout.fillWidth: true Layout.preferredHeight: 1 } @@ -44,13 +50,16 @@ Rectangle { required property string tabId readonly property bool selected: rootEditor.selectedShader === tabId - Layout.preferredHeight: 40 - Layout.preferredWidth: 120 + Layout.alignment: Qt.AlignBottom font.pixelSize: StudioTheme.Values.mediumFont verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter - padding: 10 + + leftPadding: StudioTheme.Values.tabButtonHorizontalPadding + rightPadding: StudioTheme.Values.tabButtonHorizontalPadding + topPadding: StudioTheme.Values.tabButtonVerticalPadding + bottomPadding: StudioTheme.Values.tabButtonVerticalPadding color: { if (!tabButton.enabled) diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml index 9d857513488..96f452c7019 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml @@ -257,6 +257,13 @@ QtObject { readonly property int cellWidth: 200 readonly property int cellHeight: 40 + // Tab + readonly property int tabBarHorizontalMargin: 10 + readonly property int tabBarSpacing: 2 + readonly property int tabButtonHorizontalPadding: 15 + readonly property int tabButtonVerticalPadding: 1 + + // Theme Colors property bool isLightTheme: values.themeControlBackground.hsvValue > values.themeTextColor.hsvValue diff --git a/src/plugins/effectcomposer/effectshaderscodeeditor.cpp b/src/plugins/effectcomposer/effectshaderscodeeditor.cpp index eff223a4ee9..484e16de3d5 100644 --- a/src/plugins/effectcomposer/effectshaderscodeeditor.cpp +++ b/src/plugins/effectcomposer/effectshaderscodeeditor.cpp @@ -344,7 +344,7 @@ void EffectShadersCodeEditor::createQmlTabs() m_qmlTabWidget->setClearColor(QmlDesigner::Theme::getColor( QmlDesigner::Theme::Color::QmlDesigner_BackgroundColorDarkAlternate)); m_qmlTabWidget->rootContext()->setContextProperty("shaderEditor", QVariant::fromValue(this)); - m_qmlTabWidget->setFixedHeight(43); + m_qmlTabWidget->setFixedHeight(37); } void EffectShadersCodeEditor::createQmlFooter()