diff --git a/share/qtcreator/qmldesigner/statusbar/Main.qml b/share/qtcreator/qmldesigner/statusbar/Main.qml index 70972031775..bd8a4b9925e 100644 --- a/share/qtcreator/qmldesigner/statusbar/Main.qml +++ b/share/qtcreator/qmldesigner/statusbar/Main.qml @@ -12,8 +12,8 @@ import ToolBar 1.0 Item { id: toolbarContainer - height: 24 - width: 2024 + height: 41 + width: 4048 ToolBarBackend { id: backend @@ -21,69 +21,86 @@ Item { Rectangle { - color: "#2d2d2d" + color: StudioTheme.Values.themeStatusbarBackground anchors.fill: parent - - ToolbarButton { - id: settingButton - x: 16 - width: 24 - - buttonIcon: StudioTheme.Constants.actionIconBinding - anchors.verticalCenter: parent.verticalCenter - onClicked: backend.triggerProjectSettings() - } - - TopLevelComboBox { - id: kits - style: StudioTheme.ControlStyle { - controlSize: Qt.size(StudioTheme.Values.topLevelComboWidth, 24) - baseIconFontSize: StudioTheme.Values.topLevelComboIcon - smallIconFontSize: 8 + Row { + anchors.fill: parent + anchors.bottomMargin: 5 + anchors.leftMargin: 5 + spacing: 29 + ToolbarButton { + id: settingButton + style: StudioTheme.Values.statusbarButtonStyle + buttonIcon: StudioTheme.Constants.settings_medium + anchors.verticalCenter: parent.verticalCenter + onClicked: backend.triggerProjectSettings() } - width: 160 - anchors.verticalCenter: parent.verticalCenter - anchors.left: settingButton.right - anchors.leftMargin: 32 - model: [ "Qt 6", "Qt 5", "Boot2Qt", "Android" ] - //onActivated: backend.setCurrentWorkspace(workspaces.currentText) - openUpwards: true - enabled: backend.isInDesignMode - } - TopLevelComboBox { - id: styles - style: StudioTheme.ControlStyle { - controlSize: Qt.size(StudioTheme.Values.topLevelComboWidth, 24) - baseIconFontSize: StudioTheme.Values.topLevelComboIcon - smallIconFontSize: 8 + Text { + anchors.top: parent.top + anchors.bottom: parent.bottom + color: StudioTheme.Values.themeTextColor + text: "Kit" + font.pixelSize: StudioTheme.Values.baseFontSize + horizontalAlignment: Text.AlignRight + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight } - width: 160 - anchors.verticalCenter: parent.verticalCenter - anchors.left: kits.right - anchors.leftMargin: 32 - model: backend.styles - onActivated: backend.setCurrentStyle(styles.currentIndex) - openUpwards: true - enabled: backend.isInDesignMode - currentIndex: backend.currentStyle + TopLevelComboBox { + id: kits + style: StudioTheme.Values.statusbarControlStyle + + width: 160 + anchors.verticalCenter: parent.verticalCenter + //anchors.left: settingButton.right + //anchors.leftMargin: 32 + model: [ "Qt 6", "Qt 5", "Boot2Qt", "Android" ] + //onActivated: backend.setCurrentWorkspace(workspaces.currentText) + openUpwards: true + enabled: backend.isInDesignMode + } + + Text { + anchors.top: parent.top + anchors.bottom: parent.bottom + color: StudioTheme.Values.themeTextColor + text: "Style" + font.pixelSize: StudioTheme.Values.baseFontSize + horizontalAlignment: Text.AlignRight + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + } + + TopLevelComboBox { + id: styles + style: StudioTheme.Values.statusbarControlStyle + width: 160 + anchors.verticalCenter: parent.verticalCenter + // anchors.left: kits.right + // anchors.leftMargin: 32 + model: backend.styles + onActivated: backend.setCurrentStyle(styles.currentIndex) + openUpwards: true + enabled: backend.isInDesignMode + currentIndex: backend.currentStyle + } } - Rectangle { - color: "red" - width: 2 - height: 24 - } +// Rectangle { +// color: "red" +// width: 2 +// height: 41 +// } - Rectangle { - color: "green" - width: 2 - height: 24 - x: toolbarContainer.width - 2 - } +// Rectangle { +// color: "green" +// width: 2 +// height: 41 +// x: toolbarContainer.width - 2 +// } } } diff --git a/share/qtcreator/qmldesigner/toolbar/Main.qml b/share/qtcreator/qmldesigner/toolbar/Main.qml index b0a335cd596..3bb671c3567 100644 --- a/share/qtcreator/qmldesigner/toolbar/Main.qml +++ b/share/qtcreator/qmldesigner/toolbar/Main.qml @@ -10,7 +10,7 @@ import ToolBar 1.0 Rectangle { id: toolbarContainer - color: "#2d2d2d" + color: StudioTheme.Values.themeToolbarBackground border.color: "#00000000" height: 56 @@ -31,11 +31,21 @@ Rectangle { anchors.left: parent.left anchors.leftMargin: 10 enabled: backend.isDesignModeEnabled - tooltip: qsTr("Switch to Design Mode.") - buttonIcon: StudioTheme.Constants.topToolbar_designMode + tooltip: qsTr("Switch to Design Mode.") + buttonIcon: StudioTheme.Constants.designMode_large onClicked: backend.triggerModeChange() } + + Text { + id: backTo + visible: backend.isDesignModeEnabled + anchors.verticalCenter: parent.verticalCenter + text: qsTr("Return to Design") + anchors.left: homeOther.right + anchors.leftMargin: 10 + color: StudioTheme.Values.themeTextColor + } } Item { @@ -48,9 +58,7 @@ Rectangle { anchors.verticalCenter: parent.verticalCenter anchors.left: parent.left anchors.leftMargin: 10 - buttonIcon: StudioTheme.Constants.topToolbar_home - tooltip: qsTr("Switch to Welcome Mode.") - + buttonIcon: StudioTheme.Constants.home_large onClicked: backend.triggerModeChange() } @@ -59,10 +67,29 @@ Rectangle { anchors.verticalCenter: parent.verticalCenter anchors.left: home.right anchors.leftMargin: 10 - buttonIcon: StudioTheme.Constants.topToolbar_runProject + buttonIcon: StudioTheme.Constants.runProjOutline_large style: StudioTheme.ToolbarStyle { + radius: StudioTheme.Values.smallRadius + icon: StudioTheme.ControlStyle.IconColors { - idle: "#649a5d" + idle: StudioTheme.Values.themeIdleGreen + hover: StudioTheme.Values.themeRunningGreen + interaction: "#ffffff" + disabled: "#636363" + } + + background: StudioTheme.ControlStyle.BackgroundColors { + idle: StudioTheme.Values.themeControlBackground_toolbarIdle + hover: StudioTheme.Values.themeControlBackground_topToolbarHover + interaction: StudioTheme.Values.themeInteraction + disabled: StudioTheme.Values.themeControlBackground_toolbarIdle + } + + border: StudioTheme.ControlStyle.BorderColors { + idle: StudioTheme.Values.themeControlBackground_toolbarIdle + hover: StudioTheme.Values.themeControlBackground_toolbarHover + interaction: StudioTheme.Values.themeInteraction + disabled: StudioTheme.Values.themeControlBackground_toolbarIdle } } @@ -121,7 +148,7 @@ Rectangle { anchors.leftMargin: 10 enabled: backend.canGoBack tooltip: qsTr("Go Back") - buttonIcon: StudioTheme.Constants.topToolbar_navFile + buttonIcon: StudioTheme.Constants.previousFile_large iconRotation: 0 onClicked: backend.goBackward() @@ -134,8 +161,7 @@ Rectangle { anchors.leftMargin: 10 enabled: backend.canGoForward tooltip: qsTr("Go Forward") - buttonIcon: StudioTheme.Constants.topToolbar_navFile - iconRotation: 180 + buttonIcon: StudioTheme.Constants.nextFile_large onClicked: backend.goForward() } @@ -146,7 +172,7 @@ Rectangle { anchors.left: forwardButton.right anchors.leftMargin: 10 tooltip: qsTr("Close") - buttonIcon: StudioTheme.Constants.topToolbar_closeFile + buttonIcon: StudioTheme.Constants.closeFile_large onClicked: backend.closeCurrentDocument() } @@ -173,7 +199,7 @@ Rectangle { anchors.rightMargin: 10 enabled: moveToComponentBackend.available tooltip: moveToComponentBackend.tooltip - buttonIcon: StudioTheme.Constants.topToolbar_makeComponent + buttonIcon: StudioTheme.Constants.createComponent_large onClicked: moveToComponentBackend.trigger() @@ -190,7 +216,7 @@ Rectangle { anchors.rightMargin: 10 enabled: goIntoComponentBackend.available tooltip: goIntoComponentBackend.tooltip - buttonIcon: StudioTheme.Constants.topToolbar_enterComponent + buttonIcon: StudioTheme.Constants.editComponent_large onClicked: goIntoComponentBackend.trigger() @@ -219,7 +245,7 @@ Rectangle { anchors.right: shareButton.left anchors.rightMargin: 10 tooltip: qsTr("Edit Annotations") - buttonIcon: StudioTheme.Constants.topToolbar_annotations + buttonIcon: StudioTheme.Constants.annotations_large onClicked: backend.editGlobalAnnoation() } @@ -229,12 +255,24 @@ Rectangle { style: StudioTheme.Values.primaryToolbarStyle width: 96 anchors.verticalCenter: parent.verticalCenter - anchors.right: parent.right + anchors.right: moreItems.left anchors.rightMargin: 8 iconFont: StudioTheme.Constants.font buttonIcon: qsTr("Share") onClicked: backend.shareApplicationOnline() } + + ToolbarButton { + // this needs a pop-up panel where overflow toolbar content goes when toolbar is not wide enough + id: moreItems + anchors.verticalCenter: parent.verticalCenter + anchors.right: parent.right + anchors.rightMargin: 10 + tooltip: qsTr("More Items") + buttonIcon: StudioTheme.Constants.more_medium + enabled: false + //onClicked: backend.editGlobalAnnoation() + } } } diff --git a/share/qtcreator/qmldesigner/toolbar/ToolbarButton.qml b/share/qtcreator/qmldesigner/toolbar/ToolbarButton.qml index af3ea57a412..706f0f19605 100644 --- a/share/qtcreator/qmldesigner/toolbar/ToolbarButton.qml +++ b/share/qtcreator/qmldesigner/toolbar/ToolbarButton.qml @@ -11,7 +11,7 @@ StudioControls.AbstractButton { property alias tooltip: toolTipArea.tooltip - style: StudioTheme.Values.toolbarStyle + style: StudioTheme.Values.toolbarButtonStyle hover: toolTipArea.containsMouse ToolTipArea {