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?

Author: Vogtinator

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);
                 }
             }
 

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;
         }
     }
 }

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
+    }
+}

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

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>