Merge pull request #1216 from iynaix/sessionmenu-single-row

SessionMenu: add single row layout

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"

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<var> powerOptions: [
         {

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

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")