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 <miikka.heikkinen@qt.io>
Reviewed-by: Shrief Gabr <shrief.gabr@qt.io>
This commit is contained in:
Ali Kianian
2024-12-02 10:17:31 +02:00
parent 27c8a0673d
commit ec13696749
3 changed files with 23 additions and 7 deletions

View File

@@ -18,9 +18,15 @@ Rectangle {
RowLayout { RowLayout {
id: rowLayout id: rowLayout
property real leftMargin: StudioTheme.Values.tabBarHorizontalMargin
width: parent.width width: parent.width
anchors.verticalCenter: parent.verticalCenter anchors.bottom: parent.bottom
spacing: StudioTheme.Values.controlGap spacing: StudioTheme.Values.tabBarSpacing
Item { // Empty item as a left margin
implicitWidth: rowLayout.leftMargin - rowLayout.spacing
}
TabButton { TabButton {
text: qsTr("Fragment Shader") text: qsTr("Fragment Shader")
@@ -32,7 +38,7 @@ Rectangle {
tabId: "VERTEX" tabId: "VERTEX"
} }
Item { Item { // Spacer
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 1 Layout.preferredHeight: 1
} }
@@ -44,13 +50,16 @@ Rectangle {
required property string tabId required property string tabId
readonly property bool selected: rootEditor.selectedShader === tabId readonly property bool selected: rootEditor.selectedShader === tabId
Layout.preferredHeight: 40 Layout.alignment: Qt.AlignBottom
Layout.preferredWidth: 120
font.pixelSize: StudioTheme.Values.mediumFont font.pixelSize: StudioTheme.Values.mediumFont
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
padding: 10
leftPadding: StudioTheme.Values.tabButtonHorizontalPadding
rightPadding: StudioTheme.Values.tabButtonHorizontalPadding
topPadding: StudioTheme.Values.tabButtonVerticalPadding
bottomPadding: StudioTheme.Values.tabButtonVerticalPadding
color: { color: {
if (!tabButton.enabled) if (!tabButton.enabled)

View File

@@ -257,6 +257,13 @@ QtObject {
readonly property int cellWidth: 200 readonly property int cellWidth: 200
readonly property int cellHeight: 40 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 // Theme Colors
property bool isLightTheme: values.themeControlBackground.hsvValue > values.themeTextColor.hsvValue property bool isLightTheme: values.themeControlBackground.hsvValue > values.themeTextColor.hsvValue

View File

@@ -344,7 +344,7 @@ void EffectShadersCodeEditor::createQmlTabs()
m_qmlTabWidget->setClearColor(QmlDesigner::Theme::getColor( m_qmlTabWidget->setClearColor(QmlDesigner::Theme::getColor(
QmlDesigner::Theme::Color::QmlDesigner_BackgroundColorDarkAlternate)); QmlDesigner::Theme::Color::QmlDesigner_BackgroundColorDarkAlternate));
m_qmlTabWidget->rootContext()->setContextProperty("shaderEditor", QVariant::fromValue(this)); m_qmlTabWidget->rootContext()->setContextProperty("shaderEditor", QVariant::fromValue(this));
m_qmlTabWidget->setFixedHeight(43); m_qmlTabWidget->setFixedHeight(37);
} }
void EffectShadersCodeEditor::createQmlFooter() void EffectShadersCodeEditor::createQmlFooter()