diff --git a/Assets/Translations/en.json b/Assets/Translations/en.json index 88654d247..49b1ef9aa 100644 --- a/Assets/Translations/en.json +++ b/Assets/Translations/en.json @@ -779,6 +779,10 @@ "hover": "Scroll on hover", "never": "Never scroll" }, + "session-menu-grid-layout": { + "grid": "Grid", + "single-row": "Single Row" + }, "settings-panel-mode": { "attached": "Panel attached to bar", "centered": "Centered panel", @@ -2358,6 +2362,10 @@ "description": "Display the session menu with large buttons in a grid layout.", "label": "Large buttons style" }, + "large-buttons-layout": { + "description": "Choose how session menu buttons are displayed.", + "label": "Large buttons layout" + }, "position": { "description": "Choose where the session menu panel appears when opened.", "label": "Position" diff --git a/Commons/Settings.qml b/Commons/Settings.qml index d02f97031..05f7dd930 100644 --- a/Commons/Settings.qml +++ b/Commons/Settings.qml @@ -529,6 +529,7 @@ Singleton { property string position: "center" property bool showHeader: true property bool largeButtonsStyle: false + property string largeButtonsLayout: "grid" property bool showNumberLabels: true property list powerOptions: [ { diff --git a/Modules/Panels/SessionMenu/SessionMenu.qml b/Modules/Panels/SessionMenu/SessionMenu.qml index 15c30e993..96fe9cd74 100644 --- a/Modules/Panels/SessionMenu/SessionMenu.qml +++ b/Modules/Panels/SessionMenu/SessionMenu.qml @@ -16,6 +16,7 @@ SmartPanel { id: root readonly property bool largeButtonsStyle: Settings.data.sessionMenu.largeButtonsStyle || false + readonly property bool largeButtonsLayout: Settings.data.sessionMenu.largeButtonsLayout || "grid" // Make panel background transparent for large buttons style panelBackgroundColor: largeButtonsStyle ? Color.transparent : Color.mSurface @@ -293,8 +294,14 @@ SmartPanel { } function getGridInfo() { - const columns = Math.min(3, Math.ceil(Math.sqrt(powerOptions.length))); - const rows = Math.ceil(powerOptions.length / columns); + if (Settings.data.sessionMenu.largeButtonsLayout === "single-row") { + const columns = powerOptions.length; + const rows = 1; + } else { + const columns = Math.min(3, Math.ceil(Math.sqrt(powerOptions.length))); + const rows = Math.ceil(powerOptions.length / columns); + } + return { columns, rows, @@ -521,7 +528,7 @@ SmartPanel { GridLayout { id: largeButtonsGrid Layout.alignment: Qt.AlignHCenter - columns: Math.min(3, Math.ceil(Math.sqrt(powerOptions.length))) + columns: Settings.data.sessionMenu.largeButtonsLayout === "single-row" ? powerOptions.length : Math.min(3, Math.ceil(Math.sqrt(powerOptions.length))) rowSpacing: Style.marginXL columnSpacing: Style.marginXL width: columns * 200 * Style.uiScaleRatio + (columns - 1) * Style.marginXL diff --git a/Modules/Panels/Settings/Tabs/SessionMenu/SessionMenuTab.qml b/Modules/Panels/Settings/Tabs/SessionMenu/SessionMenuTab.qml index c5324a458..8481e170f 100644 --- a/Modules/Panels/Settings/Tabs/SessionMenu/SessionMenuTab.qml +++ b/Modules/Panels/Settings/Tabs/SessionMenu/SessionMenuTab.qml @@ -178,6 +178,27 @@ ColumnLayout { onToggled: checked => Settings.data.sessionMenu.largeButtonsStyle = checked } + NComboBox { + visible: Settings.data.sessionMenu.largeButtonsStyle + Layout.fillWidth: true + label: I18n.tr("settings.session-menu.large-buttons-layout.label") + description: I18n.tr("settings.session-menu.large-buttons-layout.description") + model: [ + { + "key": "grid", + "name": I18n.tr("options.session-menu-grid-layout.grid") + }, + { + "key": "single-row", + "name": I18n.tr("options.session-menu-grid-layout.single-row") + } + ] + currentKey: Settings.data.sessionMenu.largeButtonsLayout + isSettings: true + defaultValue: Settings.getDefaultValue("sessionMenu.largeButtonsLayout") + onSelected: key => Settings.data.sessionMenu.largeButtonsLayout = key + } + NToggle { Layout.fillWidth: true label: I18n.tr("settings.session-menu.show-number-labels.label")