controlcenter: taskbar panel layout reorg
This commit is contained in:
ATMDA
parent
1850a844ee
commit
821ee4389a
3 changed files with 380 additions and 324 deletions
|
|
@ -10,6 +10,7 @@ StyledRect {
|
||||||
|
|
||||||
default property alias content: contentColumn.data
|
default property alias content: contentColumn.data
|
||||||
property real contentSpacing: Appearance.spacing.larger
|
property real contentSpacing: Appearance.spacing.larger
|
||||||
|
property bool alignTop: false
|
||||||
|
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
implicitHeight: contentColumn.implicitHeight + Appearance.padding.large * 2
|
implicitHeight: contentColumn.implicitHeight + Appearance.padding.large * 2
|
||||||
|
|
@ -22,7 +23,8 @@ StyledRect {
|
||||||
|
|
||||||
anchors.left: parent.left
|
anchors.left: parent.left
|
||||||
anchors.right: parent.right
|
anchors.right: parent.right
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
anchors.top: root.alignTop ? parent.top : undefined
|
||||||
|
anchors.verticalCenter: root.alignTop ? undefined : parent.verticalCenter
|
||||||
anchors.margins: Appearance.padding.large
|
anchors.margins: Appearance.padding.large
|
||||||
|
|
||||||
spacing: root.contentSpacing
|
spacing: root.contentSpacing
|
||||||
|
|
|
||||||
|
|
@ -113,6 +113,24 @@ StyledRect {
|
||||||
button.isChecked = root.rootItem.showLockStatus;
|
button.isChecked = root.rootItem.showLockStatus;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function onTrayBackgroundChanged() {
|
||||||
|
if (modelData.propertyName === "trayBackground") {
|
||||||
|
button.isChecked = root.rootItem.trayBackground;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onTrayCompactChanged() {
|
||||||
|
if (modelData.propertyName === "trayCompact") {
|
||||||
|
button.isChecked = root.rootItem.trayCompact;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onTrayRecolourChanged() {
|
||||||
|
if (modelData.propertyName === "trayRecolour") {
|
||||||
|
button.isChecked = root.rootItem.trayRecolour;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Match utilities Toggles radius styling
|
// Match utilities Toggles radius styling
|
||||||
|
|
|
||||||
|
|
@ -161,11 +161,7 @@ Item {
|
||||||
|
|
||||||
spacing: Appearance.spacing.small
|
spacing: Appearance.spacing.small
|
||||||
|
|
||||||
readonly property bool allSectionsExpanded:
|
readonly property bool allSectionsExpanded: true
|
||||||
clockSection.expanded &&
|
|
||||||
barBehaviorSection.expanded &&
|
|
||||||
traySettingsSection.expanded &&
|
|
||||||
workspacesSection.expanded
|
|
||||||
|
|
||||||
RowLayout {
|
RowLayout {
|
||||||
spacing: Appearance.spacing.smaller
|
spacing: Appearance.spacing.smaller
|
||||||
|
|
@ -185,11 +181,7 @@ Item {
|
||||||
type: IconButton.Text
|
type: IconButton.Text
|
||||||
label.animate: true
|
label.animate: true
|
||||||
onClicked: {
|
onClicked: {
|
||||||
const shouldExpand = !sidebarLayout.allSectionsExpanded;
|
// No collapsible sections remaining
|
||||||
clockSection.expanded = shouldExpand;
|
|
||||||
barBehaviorSection.expanded = shouldExpand;
|
|
||||||
traySettingsSection.expanded = shouldExpand;
|
|
||||||
workspacesSection.expanded = shouldExpand;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -258,9 +250,206 @@ Item {
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
CollapsibleSection {
|
RowLayout {
|
||||||
id: clockSection
|
Layout.fillWidth: true
|
||||||
title: qsTr("Clock")
|
spacing: Appearance.spacing.small
|
||||||
|
|
||||||
|
ColumnLayout {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
Layout.alignment: Qt.AlignTop
|
||||||
|
spacing: 0
|
||||||
|
|
||||||
|
SectionContainer {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
alignTop: true
|
||||||
|
|
||||||
|
StyledText {
|
||||||
|
text: qsTr("Workspaces")
|
||||||
|
font.pointSize: Appearance.font.size.normal
|
||||||
|
}
|
||||||
|
|
||||||
|
StyledRect {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
implicitHeight: workspacesShownRow.implicitHeight + Appearance.padding.large * 2
|
||||||
|
radius: Appearance.rounding.normal
|
||||||
|
color: Colours.layer(Colours.palette.m3surfaceContainer, 2)
|
||||||
|
|
||||||
|
Behavior on implicitHeight {
|
||||||
|
Anim {}
|
||||||
|
}
|
||||||
|
|
||||||
|
RowLayout {
|
||||||
|
id: workspacesShownRow
|
||||||
|
anchors.left: parent.left
|
||||||
|
anchors.right: parent.right
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
anchors.margins: Appearance.padding.large
|
||||||
|
spacing: Appearance.spacing.normal
|
||||||
|
|
||||||
|
StyledText {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
text: qsTr("Shown")
|
||||||
|
}
|
||||||
|
|
||||||
|
CustomSpinBox {
|
||||||
|
min: 1
|
||||||
|
max: 20
|
||||||
|
value: root.workspacesShown
|
||||||
|
onValueModified: value => {
|
||||||
|
root.workspacesShown = value;
|
||||||
|
root.saveConfig();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
StyledRect {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
implicitHeight: workspacesActiveIndicatorRow.implicitHeight + Appearance.padding.large * 2
|
||||||
|
radius: Appearance.rounding.normal
|
||||||
|
color: Colours.layer(Colours.palette.m3surfaceContainer, 2)
|
||||||
|
|
||||||
|
Behavior on implicitHeight {
|
||||||
|
Anim {}
|
||||||
|
}
|
||||||
|
|
||||||
|
RowLayout {
|
||||||
|
id: workspacesActiveIndicatorRow
|
||||||
|
anchors.left: parent.left
|
||||||
|
anchors.right: parent.right
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
anchors.margins: Appearance.padding.large
|
||||||
|
spacing: Appearance.spacing.normal
|
||||||
|
|
||||||
|
StyledText {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
text: qsTr("Active indicator")
|
||||||
|
}
|
||||||
|
|
||||||
|
StyledSwitch {
|
||||||
|
checked: root.workspacesActiveIndicator
|
||||||
|
onToggled: {
|
||||||
|
root.workspacesActiveIndicator = checked;
|
||||||
|
root.saveConfig();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
StyledRect {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
implicitHeight: workspacesOccupiedBgRow.implicitHeight + Appearance.padding.large * 2
|
||||||
|
radius: Appearance.rounding.normal
|
||||||
|
color: Colours.layer(Colours.palette.m3surfaceContainer, 2)
|
||||||
|
|
||||||
|
Behavior on implicitHeight {
|
||||||
|
Anim {}
|
||||||
|
}
|
||||||
|
|
||||||
|
RowLayout {
|
||||||
|
id: workspacesOccupiedBgRow
|
||||||
|
anchors.left: parent.left
|
||||||
|
anchors.right: parent.right
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
anchors.margins: Appearance.padding.large
|
||||||
|
spacing: Appearance.spacing.normal
|
||||||
|
|
||||||
|
StyledText {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
text: qsTr("Occupied background")
|
||||||
|
}
|
||||||
|
|
||||||
|
StyledSwitch {
|
||||||
|
checked: root.workspacesOccupiedBg
|
||||||
|
onToggled: {
|
||||||
|
root.workspacesOccupiedBg = checked;
|
||||||
|
root.saveConfig();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
StyledRect {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
implicitHeight: workspacesShowWindowsRow.implicitHeight + Appearance.padding.large * 2
|
||||||
|
radius: Appearance.rounding.normal
|
||||||
|
color: Colours.layer(Colours.palette.m3surfaceContainer, 2)
|
||||||
|
|
||||||
|
Behavior on implicitHeight {
|
||||||
|
Anim {}
|
||||||
|
}
|
||||||
|
|
||||||
|
RowLayout {
|
||||||
|
id: workspacesShowWindowsRow
|
||||||
|
anchors.left: parent.left
|
||||||
|
anchors.right: parent.right
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
anchors.margins: Appearance.padding.large
|
||||||
|
spacing: Appearance.spacing.normal
|
||||||
|
|
||||||
|
StyledText {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
text: qsTr("Show windows")
|
||||||
|
}
|
||||||
|
|
||||||
|
StyledSwitch {
|
||||||
|
checked: root.workspacesShowWindows
|
||||||
|
onToggled: {
|
||||||
|
root.workspacesShowWindows = checked;
|
||||||
|
root.saveConfig();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
StyledRect {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
implicitHeight: workspacesPerMonitorRow.implicitHeight + Appearance.padding.large * 2
|
||||||
|
radius: Appearance.rounding.normal
|
||||||
|
color: Colours.layer(Colours.palette.m3surfaceContainer, 2)
|
||||||
|
|
||||||
|
Behavior on implicitHeight {
|
||||||
|
Anim {}
|
||||||
|
}
|
||||||
|
|
||||||
|
RowLayout {
|
||||||
|
id: workspacesPerMonitorRow
|
||||||
|
anchors.left: parent.left
|
||||||
|
anchors.right: parent.right
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
anchors.margins: Appearance.padding.large
|
||||||
|
spacing: Appearance.spacing.normal
|
||||||
|
|
||||||
|
StyledText {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
text: qsTr("Per monitor workspaces")
|
||||||
|
}
|
||||||
|
|
||||||
|
StyledSwitch {
|
||||||
|
checked: root.workspacesPerMonitor
|
||||||
|
onToggled: {
|
||||||
|
root.workspacesPerMonitor = checked;
|
||||||
|
root.saveConfig();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ColumnLayout {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
Layout.alignment: Qt.AlignTop
|
||||||
|
spacing: Appearance.spacing.small
|
||||||
|
|
||||||
|
SectionContainer {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
alignTop: true
|
||||||
|
|
||||||
|
StyledText {
|
||||||
|
text: qsTr("Clock")
|
||||||
|
font.pointSize: Appearance.font.size.normal
|
||||||
|
}
|
||||||
|
|
||||||
SwitchRow {
|
SwitchRow {
|
||||||
label: qsTr("Show clock icon")
|
label: qsTr("Show clock icon")
|
||||||
|
|
@ -272,9 +461,57 @@ Item {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
CollapsibleSection {
|
SectionContainer {
|
||||||
id: barBehaviorSection
|
Layout.fillWidth: true
|
||||||
title: qsTr("Bar Behavior")
|
alignTop: true
|
||||||
|
|
||||||
|
ConnectedButtonGroup {
|
||||||
|
rootItem: root
|
||||||
|
title: qsTr("Tray Settings")
|
||||||
|
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
label: qsTr("Background"),
|
||||||
|
propertyName: "trayBackground",
|
||||||
|
onToggled: function(checked) {
|
||||||
|
root.trayBackground = checked;
|
||||||
|
root.saveConfig();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: qsTr("Compact"),
|
||||||
|
propertyName: "trayCompact",
|
||||||
|
onToggled: function(checked) {
|
||||||
|
root.trayCompact = checked;
|
||||||
|
root.saveConfig();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: qsTr("Recolour"),
|
||||||
|
propertyName: "trayRecolour",
|
||||||
|
onToggled: function(checked) {
|
||||||
|
root.trayRecolour = checked;
|
||||||
|
root.saveConfig();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ColumnLayout {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
Layout.alignment: Qt.AlignTop
|
||||||
|
spacing: 0
|
||||||
|
|
||||||
|
SectionContainer {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
alignTop: true
|
||||||
|
|
||||||
|
StyledText {
|
||||||
|
text: qsTr("Bar Behavior")
|
||||||
|
font.pointSize: Appearance.font.size.normal
|
||||||
|
}
|
||||||
|
|
||||||
SwitchRow {
|
SwitchRow {
|
||||||
label: qsTr("Persistent")
|
label: qsTr("Persistent")
|
||||||
|
|
@ -393,210 +630,9 @@ Item {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
CollapsibleSection {
|
|
||||||
id: traySettingsSection
|
|
||||||
title: qsTr("Tray Settings")
|
|
||||||
|
|
||||||
SwitchRow {
|
|
||||||
label: qsTr("Background")
|
|
||||||
checked: root.trayBackground
|
|
||||||
onToggled: checked => {
|
|
||||||
root.trayBackground = checked;
|
|
||||||
root.saveConfig();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
SwitchRow {
|
|
||||||
label: qsTr("Compact")
|
|
||||||
checked: root.trayCompact
|
|
||||||
onToggled: checked => {
|
|
||||||
root.trayCompact = checked;
|
|
||||||
root.saveConfig();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
SwitchRow {
|
|
||||||
label: qsTr("Recolour")
|
|
||||||
checked: root.trayRecolour
|
|
||||||
onToggled: checked => {
|
|
||||||
root.trayRecolour = checked;
|
|
||||||
root.saveConfig();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
CollapsibleSection {
|
|
||||||
id: workspacesSection
|
|
||||||
title: qsTr("Workspaces")
|
|
||||||
|
|
||||||
StyledRect {
|
|
||||||
Layout.fillWidth: true
|
|
||||||
implicitHeight: workspacesShownRow.implicitHeight + Appearance.padding.large * 2
|
|
||||||
radius: Appearance.rounding.normal
|
|
||||||
color: Colours.tPalette.m3surfaceContainer
|
|
||||||
|
|
||||||
Behavior on implicitHeight {
|
|
||||||
Anim {}
|
|
||||||
}
|
|
||||||
|
|
||||||
RowLayout {
|
|
||||||
id: workspacesShownRow
|
|
||||||
anchors.left: parent.left
|
|
||||||
anchors.right: parent.right
|
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
|
||||||
anchors.margins: Appearance.padding.large
|
|
||||||
spacing: Appearance.spacing.normal
|
|
||||||
|
|
||||||
StyledText {
|
|
||||||
Layout.fillWidth: true
|
|
||||||
text: qsTr("Shown")
|
|
||||||
}
|
|
||||||
|
|
||||||
CustomSpinBox {
|
|
||||||
min: 1
|
|
||||||
max: 20
|
|
||||||
value: root.workspacesShown
|
|
||||||
onValueModified: value => {
|
|
||||||
root.workspacesShown = value;
|
|
||||||
root.saveConfig();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
StyledRect {
|
|
||||||
Layout.fillWidth: true
|
|
||||||
implicitHeight: workspacesActiveIndicatorRow.implicitHeight + Appearance.padding.large * 2
|
|
||||||
radius: Appearance.rounding.normal
|
|
||||||
color: Colours.tPalette.m3surfaceContainer
|
|
||||||
|
|
||||||
Behavior on implicitHeight {
|
|
||||||
Anim {}
|
|
||||||
}
|
|
||||||
|
|
||||||
RowLayout {
|
|
||||||
id: workspacesActiveIndicatorRow
|
|
||||||
anchors.left: parent.left
|
|
||||||
anchors.right: parent.right
|
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
|
||||||
anchors.margins: Appearance.padding.large
|
|
||||||
spacing: Appearance.spacing.normal
|
|
||||||
|
|
||||||
StyledText {
|
|
||||||
Layout.fillWidth: true
|
|
||||||
text: qsTr("Active indicator")
|
|
||||||
}
|
|
||||||
|
|
||||||
StyledSwitch {
|
|
||||||
checked: root.workspacesActiveIndicator
|
|
||||||
onToggled: {
|
|
||||||
root.workspacesActiveIndicator = checked;
|
|
||||||
root.saveConfig();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
StyledRect {
|
|
||||||
Layout.fillWidth: true
|
|
||||||
implicitHeight: workspacesOccupiedBgRow.implicitHeight + Appearance.padding.large * 2
|
|
||||||
radius: Appearance.rounding.normal
|
|
||||||
color: Colours.tPalette.m3surfaceContainer
|
|
||||||
|
|
||||||
Behavior on implicitHeight {
|
|
||||||
Anim {}
|
|
||||||
}
|
|
||||||
|
|
||||||
RowLayout {
|
|
||||||
id: workspacesOccupiedBgRow
|
|
||||||
anchors.left: parent.left
|
|
||||||
anchors.right: parent.right
|
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
|
||||||
anchors.margins: Appearance.padding.large
|
|
||||||
spacing: Appearance.spacing.normal
|
|
||||||
|
|
||||||
StyledText {
|
|
||||||
Layout.fillWidth: true
|
|
||||||
text: qsTr("Occupied background")
|
|
||||||
}
|
|
||||||
|
|
||||||
StyledSwitch {
|
|
||||||
checked: root.workspacesOccupiedBg
|
|
||||||
onToggled: {
|
|
||||||
root.workspacesOccupiedBg = checked;
|
|
||||||
root.saveConfig();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
StyledRect {
|
|
||||||
Layout.fillWidth: true
|
|
||||||
implicitHeight: workspacesShowWindowsRow.implicitHeight + Appearance.padding.large * 2
|
|
||||||
radius: Appearance.rounding.normal
|
|
||||||
color: Colours.tPalette.m3surfaceContainer
|
|
||||||
|
|
||||||
Behavior on implicitHeight {
|
|
||||||
Anim {}
|
|
||||||
}
|
|
||||||
|
|
||||||
RowLayout {
|
|
||||||
id: workspacesShowWindowsRow
|
|
||||||
anchors.left: parent.left
|
|
||||||
anchors.right: parent.right
|
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
|
||||||
anchors.margins: Appearance.padding.large
|
|
||||||
spacing: Appearance.spacing.normal
|
|
||||||
|
|
||||||
StyledText {
|
|
||||||
Layout.fillWidth: true
|
|
||||||
text: qsTr("Show windows")
|
|
||||||
}
|
|
||||||
|
|
||||||
StyledSwitch {
|
|
||||||
checked: root.workspacesShowWindows
|
|
||||||
onToggled: {
|
|
||||||
root.workspacesShowWindows = checked;
|
|
||||||
root.saveConfig();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
StyledRect {
|
|
||||||
Layout.fillWidth: true
|
|
||||||
implicitHeight: workspacesPerMonitorRow.implicitHeight + Appearance.padding.large * 2
|
|
||||||
radius: Appearance.rounding.normal
|
|
||||||
color: Colours.tPalette.m3surfaceContainer
|
|
||||||
|
|
||||||
Behavior on implicitHeight {
|
|
||||||
Anim {}
|
|
||||||
}
|
|
||||||
|
|
||||||
RowLayout {
|
|
||||||
id: workspacesPerMonitorRow
|
|
||||||
anchors.left: parent.left
|
|
||||||
anchors.right: parent.right
|
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
|
||||||
anchors.margins: Appearance.padding.large
|
|
||||||
spacing: Appearance.spacing.normal
|
|
||||||
|
|
||||||
StyledText {
|
|
||||||
Layout.fillWidth: true
|
|
||||||
text: qsTr("Per monitor workspaces")
|
|
||||||
}
|
|
||||||
|
|
||||||
StyledSwitch {
|
|
||||||
checked: root.workspacesPerMonitor
|
|
||||||
onToggled: {
|
|
||||||
root.workspacesPerMonitor = checked;
|
|
||||||
root.saveConfig();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue