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>

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)

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

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()