GlosSIConfig: Move settings to collapsible card

GlosSIConfig/GlosSIConfig.vcxproj

@@ -137,6 +137,7 @@
     <ClCompile Include="UIModel.cpp" />
     <None Include=".clang-format" />
     <None Include="GetAUMIDs.ps1" />
+    <None Include="qml\CollapsiblePane.qml" />
     <None Include="qml\SteamInputXboxDisabledDialog.qml" />
     <None Include="qml\AddSelectTypeDialog.qml" />
     <None Include="qml\FluentTextInput.qml" />

GlosSIConfig/GlosSIConfig.vcxproj.filters

@@ -71,6 +71,9 @@
     <None Include="qml\SteamInputXboxDisabledDialog.qml">
       <Filter>qml</Filter>
     </None>
+    <None Include="qml\CollapsiblePane.qml">
+      <Filter>qml</Filter>
+    </None>
   </ItemGroup>
   <ItemGroup>
     <QtMoc Include="UIModel.h">

GlosSIConfig/Resource.rc

@@ -51,8 +51,8 @@ END
 //
 
 VS_VERSION_INFO VERSIONINFO
- FILEVERSION 0,0,8,105004039005
- PRODUCTVERSION 0,0,8,105004039005
+ FILEVERSION 0,0,8,1023005406006
+ PRODUCTVERSION 0,0,8,1023005406006
  FILEFLAGSMASK 0x3fL
 #ifdef _DEBUG
  FILEFLAGS 0x1L
@@ -69,12 +69,12 @@ BEGIN
         BEGIN
             VALUE "CompanyName", "Peter Repukat - FlatspotSoftware"
             VALUE "FileDescription", "GlosSI - Config"
-            VALUE "FileVersion", "0.0.8.1-5-g40390b5"
+            VALUE "FileVersion", "0.0.8.1-23-g54e6bf6"
             VALUE "InternalName", "GlosSIConfig"
             VALUE "LegalCopyright", "Copyright (C) 2021 Peter Repukat - FlatspotSoftware"
             VALUE "OriginalFilename", "GlosSIConfig.exe"
             VALUE "ProductName", "GlosSI"
-            VALUE "ProductVersion", "0.0.8.1-5-g40390b5"
+            VALUE "ProductVersion", "0.0.8.1-23-g54e6bf6"
         END
     END
     BLOCK "VarFileInfo"
@@ -872,6 +872,226 @@ IDI_ICON1               ICON                    "..\GloSC_Icon.ico"
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 

GlosSIConfig/qml.qrc

@@ -17,5 +17,7 @@
         <file>svg/help_outline_white_24dp.svg</file>
         <file>qml/SteamNotFoundDialog.qml</file>
         <file>qml/SteamInputXboxDisabledDialog.qml</file>
+        <file>qml/CollapsiblePane.qml</file>
+        <file>svg/expand_more_white_24dp.svg</file>
     </qresource>
 </RCC>

GlosSIConfig/qml/CollapsiblePane.qml

@@ -0,0 +1,96 @@
+/*
+Copyright 2021-2022 Peter Repukat - FlatspotSoftware
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import QtQuick 2.9
+import QtQuick.Controls 2.9
+import QtQuick.Controls.Material 2.9
+import QtQuick.Controls.Material.impl 2.9
+
+
+RPane {
+    property alias title: paneTitle.text
+	width: parent.width
+
+    property alias content: ldr.sourceComponent
+    clip: true
+    height: paneTitle.height + collapseColumn.spacing
+    property bool collapsed: true
+	id: collapsePane
+
+    Behavior on height {
+        NumberAnimation {
+            duration: 300
+            easing.type: Easing.InOutQuad
+        }
+    }
+
+    Column {
+	    id: collapseColumn
+	    width: parent.width
+        spacing: 16
+		Item {
+        	width: parent.width
+			height: paneTitle.height
+        	Label {
+		        id: paneTitle
+                anchors.left: parent.left
+                anchors.leftMargin: 4
+                font.bold: true
+                font.pixelSize: 24
+				anchors.top: parent.top
+				anchors.topMargin: -2
+            }
+            RoundButton {
+			    width: 48
+                height: 48
+                Material.elevation: 0
+                anchors.rightMargin: 0
+				anchors.top: parent.top
+				anchors.topMargin: -12
+				onClicked: function(){
+                    collapsed = !collapsed;
+                    if (collapsed) {
+                        collapsePane.height = paneTitle.height + collapseColumn.spacing
+                    } else {
+                        collapsePane.height = paneTitle.height + collapseColumn.spacing * 3 + ldr.item.height
+                    }
+				}
+                Image {
+				    id: arrowImg
+                    anchors.centerIn: parent
+                    source: "qrc:/svg/expand_more_white_24dp.svg"
+                    width: 24
+                    height: 24
+					transform: Rotation{
+                        angle: collapsed ? 0 : 180
+                        origin.x: arrowImg.width/2
+                        origin.y: arrowImg.height/2          
+                        Behavior on angle {
+                            NumberAnimation {
+                                duration: 125
+                                easing.type: Easing.InOutQuad
+                            }
+                        }
+                    }
+                }
+			    anchors.right: parent.right
+            }
+        }
+        Loader {
+            id: ldr
+            width: parent.width
+        }
+	}
+}

GlosSIConfig/qml/ShortcutProps.qml

@@ -311,7 +311,13 @@ Item {
                 width: 1
                 height: 8
             }
-            Row {
+
+			CollapsiblePane {
+                radius: 4
+                Material.elevation: 32
+                bgOpacity: 0.97
+				title: qsTr("Advanced")
+                content: Row {
                     spacing: 16
                     width: parent.width
 
@@ -537,6 +543,9 @@ Item {
                         }
                     }
                 }
+
+            }
+
             Item {
                 id: bottomspacing
                 width: 1

GlosSIConfig/svg/expand_more_white_24dp.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="#FFFFFF"><path d="m12 15.375-6-6 1.4-1.4 4.6 4.6 4.6-4.6 1.4 1.4Z"/></svg>