feedc0de/qt-creator
1
0
Fork 0
forked from qt-creator/qt-creator
Code Pull Requests Activity

QmlDesigner: Apply style to toolbars

Browse Source 
Change-Id: I9e25b999f2c0830e28bd36db9efda3246f9bd324
Reviewed-by: Henning Gründl <henning.gruendl@qt.io>
Reviewed-by: <github-actions-qt-creator@cristianadam.eu>
This commit is contained in:
Brook Cronin
2023-02-02 14:15:54 +01:00
parent a53af31b6c
commit 27f431bc6e
3 changed files with 127 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
share/qtcreator/qmldesigner/statusbar/Main.qml
View File

@@ -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
// }
}
}

70
share/qtcreator/qmldesigner/toolbar/Main.qml
View File

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

2
share/qtcreator/qmldesigner/toolbar/ToolbarButton.qml
View File

@@ -11,7 +11,7 @@ StudioControls.AbstractButton {
property alias tooltip: toolTipArea.tooltip
style: StudioTheme.Values.toolbarStyle
style: StudioTheme.Values.toolbarButtonStyle
hover: toolTipArea.containsMouse
ToolTipArea {