Use icon buttons for file selection and creation

Those are smaller and thus fit better on screen size constrained mobile platforms and work fine on desktop as well. Also allows to create snapshot files that way. TODO: - Document and test createDialogLoader logic - Rename saveDialogSupported to saveDialogCanOverwrite?
nspire-emus · Apr 15, 2022 · cc9f081 · cc9f081
1 parent a1b13c4
commit cc9f081
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 30 deletions.
diff --git a/qml/ConfigPageKits.qml b/qml/ConfigPageKits.qml
@@ -79,32 +79,23 @@ ColumnLayout {
                 elide: Text.ElideMiddle
             }
 
-            ColumnLayout {
+            FileSelect {
+                id: flashEdit
                 Layout.fillWidth: true
-
-                FileSelect {
-                    id: flashEdit
-                    Layout.fillWidth: true
-                    filePath: kitList.currentItem.myData.flash
-                    onFilePathChanged: {
-                        if(filePath !== kitList.currentItem.myData.flash)
-                            kitModel.setDataRow(kitList.currentIndex, filePath, KitModel.FlashRole);
-                        filePath = Qt.binding(function() { return kitList.currentItem.myData.flash; });
-                    }
-                }
-
-                FlashDialog {
-                    id: flashDialog
-                    onFlashCreated: {
+                filePath: kitList.currentItem.myData.flash
+                onFilePathChanged: {
+                    if(filePath !== kitList.currentItem.myData.flash)
                         kitModel.setDataRow(kitList.currentIndex, filePath, KitModel.FlashRole);
-                    }
+                    filePath = Qt.binding(function() { return kitList.currentItem.myData.flash; });
                 }
+                showCreateButton: true
+                onCreate: flashDialog.visible = true
+            }
 
-                Button {
-                    id: createButton
-                    Layout.alignment: Qt.AlignRight
-                    text: qsTr("New")
-                    onClicked: flashDialog.visible = true
+            FlashDialog {
+                id: flashDialog
+                onFlashCreated: {
+                    kitModel.setDataRow(kitList.currentIndex, filePath, KitModel.FlashRole);
                 }
             }
 

diff --git a/qml/Firebird/UIComponents/FileSelect.qml b/qml/Firebird/UIComponents/FileSelect.qml
@@ -5,17 +5,18 @@ import QtQuick.Layouts 1.0
 import Firebird.Emu 1.0
 
 RowLayout {
-    id: root
     property string filePath: ""
     property bool selectExisting: true
+    property bool showCreateButton: false
+    signal create()
 
     Loader {
         id: dialogLoader
         active: false
         sourceComponent: FileDialog {
             folder: filePath ? Emu.dir(filePath) : Global.lastFileDialogDir
             // If save dialogs are not supported, force an open dialog
-            selectExisting: root.selectExisting || !Emu.saveDialogSupported()
+            selectExisting: parent.selectExisting || !Emu.saveDialogSupported()
             onAccepted: {
                 filePath = Emu.toLocalFile(fileUrl);
                 Global.lastFileDialogDir = Emu.dir(filePath);
@@ -38,13 +39,40 @@ RowLayout {
         color: (!selectExisting || filePath === "" || Emu.fileExists(filePath)) ? paletteActive.text : "red"
     }
 
-    Button {
-        id: selectButton
-        text: qsTr("Select")
+    // Button for either custom creation functionality (onCreate) or
+    // if the open file dialog doesn't allow creation, to open a file creation dialog.
+    IconButton {
+        visible: showCreateButton || (!selectExisting && !Emu.saveDialogSupported())
+        icon: "qrc:/icons/resources/icons/document-new.png"
 
+        Loader {
+            id: createDialogLoader
+            active: false
+            sourceComponent: FileDialog {
+                folder: filePath ? Emu.dir(filePath) : Global.lastFileDialogDir
+                selectExisting: false
+                onAccepted: {
+                    filePath = Emu.toLocalFile(fileUrl);
+                    Global.lastFileDialogDir = Emu.dir(filePath);
+                }
+            }
+        }
+
+        onClicked: {
+            if(showCreateButton)
+                parent.create()
+            else {
+                createDialogLoader.active = true;
+                createDialogLoader.item.visible = true;
+            }
+        }
+    }
+
+    IconButton {
+        icon: "qrc:/icons/resources/icons/document-edit.png"
         onClicked: {
-            dialogLoader.active = true
-            dialogLoader.item.visible = true
+            dialogLoader.active = true;
+            dialogLoader.item.visible = true;
         }
     }
 }
diff --git a/qml/Firebird/UIComponents/IconButton.qml b/qml/Firebird/UIComponents/IconButton.qml
@@ -0,0 +1,23 @@
+import QtQuick 2.0
+import QtQuick.Controls 1.0
+
+/* A push button with a symbol instead of text.
+ * ToolButton and <img/> in Label don't size correctly,
+ * so do it manually.
+ * With QQC2, button icons have a better default size
+ * and it can also be specified explicitly. */
+
+Button {
+    property alias icon: image.source
+
+    implicitHeight: TextMetrics.normalSize * 2.5
+    implicitWidth: implicitHeight
+
+    Image {
+        id: image
+        height: parent.height * 0.6
+        anchors.centerIn: parent
+
+        fillMode: Image.PreserveAspectFit
+    }
+}
diff --git a/qml/FlashDialog.qml b/qml/FlashDialog.qml
@@ -23,7 +23,7 @@ Dialog {
     GridLayout {
         id: layout
         width: parent.width
-        columns: width > modelCombo.implicitWidth * 2 ? 2 : 1
+        columns: 2
 
         FBLabel {
             Layout.minimumHeight: implicitHeight

diff --git a/resources.qrc b/resources.qrc
@@ -22,6 +22,8 @@
         <file>resources/icons/drive-removable-media-usb.png</file>
         <file>resources/icons/smartphone.png</file>
         <file>resources/icons/video-display.png</file>
+        <file>resources/icons/document-edit.png</file>
+        <file>resources/icons/document-new.png</file>
     </qresource>
     <qresource prefix="/qml">
         <file>qml/Keypad.qml</file>
@@ -58,6 +60,7 @@
         <file>qml/Firebird/UIComponents/VerticalSwipeBar.qml</file>
         <file>qml/Firebird/UIComponents/Global.qml</file>
         <file>qml/FlashDialog.qml</file>
+        <file>qml/Firebird/UIComponents/IconButton.qml</file>
     </qresource>
     <qresource prefix="/i18n">
         <file>i18n/de_DE.qm</file>

diff --git a/resources/icons/document-edit.png b/resources/icons/document-edit.png
diff --git a/resources/icons/document-new.png b/resources/icons/document-new.png