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 { Item {
id: toolbarContainer id: toolbarContainer
height: 24 height: 41
width: 2024 width: 4048
ToolBarBackend { ToolBarBackend {
id: backend id: backend
@@ -21,69 +21,86 @@ Item {
Rectangle { Rectangle {
color: "#2d2d2d" color: StudioTheme.Values.themeStatusbarBackground
anchors.fill: parent anchors.fill: parent
Row {
ToolbarButton { anchors.fill: parent
id: settingButton anchors.bottomMargin: 5
x: 16 anchors.leftMargin: 5
width: 24 spacing: 29
ToolbarButton {
buttonIcon: StudioTheme.Constants.actionIconBinding id: settingButton
anchors.verticalCenter: parent.verticalCenter style: StudioTheme.Values.statusbarButtonStyle
onClicked: backend.triggerProjectSettings() buttonIcon: StudioTheme.Constants.settings_medium
} 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
} }
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 { Text {
id: styles anchors.top: parent.top
style: StudioTheme.ControlStyle { anchors.bottom: parent.bottom
controlSize: Qt.size(StudioTheme.Values.topLevelComboWidth, 24) color: StudioTheme.Values.themeTextColor
baseIconFontSize: StudioTheme.Values.topLevelComboIcon text: "Kit"
smallIconFontSize: 8 font.pixelSize: StudioTheme.Values.baseFontSize
horizontalAlignment: Text.AlignRight
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
} }
width: 160 TopLevelComboBox {
anchors.verticalCenter: parent.verticalCenter id: kits
anchors.left: kits.right style: StudioTheme.Values.statusbarControlStyle
anchors.leftMargin: 32
model: backend.styles width: 160
onActivated: backend.setCurrentStyle(styles.currentIndex) anchors.verticalCenter: parent.verticalCenter
openUpwards: true //anchors.left: settingButton.right
enabled: backend.isInDesignMode //anchors.leftMargin: 32
currentIndex: backend.currentStyle 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 { // Rectangle {
color: "red" // color: "red"
width: 2 // width: 2
height: 24 // height: 41
} // }
Rectangle { // Rectangle {
color: "green" // color: "green"
width: 2 // width: 2
height: 24 // height: 41
x: toolbarContainer.width - 2 // x: toolbarContainer.width - 2
} // }
} }
} }

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

@@ -10,7 +10,7 @@ import ToolBar 1.0
Rectangle { Rectangle {
id: toolbarContainer id: toolbarContainer
color: "#2d2d2d" color: StudioTheme.Values.themeToolbarBackground
border.color: "#00000000" border.color: "#00000000"
height: 56 height: 56
@@ -31,11 +31,21 @@ Rectangle {
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 10 anchors.leftMargin: 10
enabled: backend.isDesignModeEnabled 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() 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 { Item {
@@ -48,9 +58,7 @@ Rectangle {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 10 anchors.leftMargin: 10
buttonIcon: StudioTheme.Constants.topToolbar_home buttonIcon: StudioTheme.Constants.home_large
tooltip: qsTr("Switch to Welcome Mode.")
onClicked: backend.triggerModeChange() onClicked: backend.triggerModeChange()
} }
@@ -59,10 +67,29 @@ Rectangle {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.left: home.right anchors.left: home.right
anchors.leftMargin: 10 anchors.leftMargin: 10
buttonIcon: StudioTheme.Constants.topToolbar_runProject buttonIcon: StudioTheme.Constants.runProjOutline_large
style: StudioTheme.ToolbarStyle { style: StudioTheme.ToolbarStyle {
radius: StudioTheme.Values.smallRadius
icon: StudioTheme.ControlStyle.IconColors { 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 anchors.leftMargin: 10
enabled: backend.canGoBack enabled: backend.canGoBack
tooltip: qsTr("Go Back") tooltip: qsTr("Go Back")
buttonIcon: StudioTheme.Constants.topToolbar_navFile buttonIcon: StudioTheme.Constants.previousFile_large
iconRotation: 0 iconRotation: 0
onClicked: backend.goBackward() onClicked: backend.goBackward()
@@ -134,8 +161,7 @@ Rectangle {
anchors.leftMargin: 10 anchors.leftMargin: 10
enabled: backend.canGoForward enabled: backend.canGoForward
tooltip: qsTr("Go Forward") tooltip: qsTr("Go Forward")
buttonIcon: StudioTheme.Constants.topToolbar_navFile buttonIcon: StudioTheme.Constants.nextFile_large
iconRotation: 180
onClicked: backend.goForward() onClicked: backend.goForward()
} }
@@ -146,7 +172,7 @@ Rectangle {
anchors.left: forwardButton.right anchors.left: forwardButton.right
anchors.leftMargin: 10 anchors.leftMargin: 10
tooltip: qsTr("Close") tooltip: qsTr("Close")
buttonIcon: StudioTheme.Constants.topToolbar_closeFile buttonIcon: StudioTheme.Constants.closeFile_large
onClicked: backend.closeCurrentDocument() onClicked: backend.closeCurrentDocument()
} }
@@ -173,7 +199,7 @@ Rectangle {
anchors.rightMargin: 10 anchors.rightMargin: 10
enabled: moveToComponentBackend.available enabled: moveToComponentBackend.available
tooltip: moveToComponentBackend.tooltip tooltip: moveToComponentBackend.tooltip
buttonIcon: StudioTheme.Constants.topToolbar_makeComponent buttonIcon: StudioTheme.Constants.createComponent_large
onClicked: moveToComponentBackend.trigger() onClicked: moveToComponentBackend.trigger()
@@ -190,7 +216,7 @@ Rectangle {
anchors.rightMargin: 10 anchors.rightMargin: 10
enabled: goIntoComponentBackend.available enabled: goIntoComponentBackend.available
tooltip: goIntoComponentBackend.tooltip tooltip: goIntoComponentBackend.tooltip
buttonIcon: StudioTheme.Constants.topToolbar_enterComponent buttonIcon: StudioTheme.Constants.editComponent_large
onClicked: goIntoComponentBackend.trigger() onClicked: goIntoComponentBackend.trigger()
@@ -219,7 +245,7 @@ Rectangle {
anchors.right: shareButton.left anchors.right: shareButton.left
anchors.rightMargin: 10 anchors.rightMargin: 10
tooltip: qsTr("Edit Annotations") tooltip: qsTr("Edit Annotations")
buttonIcon: StudioTheme.Constants.topToolbar_annotations buttonIcon: StudioTheme.Constants.annotations_large
onClicked: backend.editGlobalAnnoation() onClicked: backend.editGlobalAnnoation()
} }
@@ -229,12 +255,24 @@ Rectangle {
style: StudioTheme.Values.primaryToolbarStyle style: StudioTheme.Values.primaryToolbarStyle
width: 96 width: 96
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right anchors.right: moreItems.left
anchors.rightMargin: 8 anchors.rightMargin: 8
iconFont: StudioTheme.Constants.font iconFont: StudioTheme.Constants.font
buttonIcon: qsTr("Share") buttonIcon: qsTr("Share")
onClicked: backend.shareApplicationOnline() 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 property alias tooltip: toolTipArea.tooltip
style: StudioTheme.Values.toolbarStyle style: StudioTheme.Values.toolbarButtonStyle
hover: toolTipArea.containsMouse hover: toolTipArea.containsMouse
ToolTipArea { ToolTipArea {