Merge pull request #42 from ocs-url/feature/ui

Feature/ui

app/app.pri

@@ -16,6 +16,7 @@ SOURCES += \
 
 RESOURCES += \
     $${PWD}/configs/configs.qrc \
+    $${PWD}/images/images.qrc \
     $${PWD}/qml/qml.qrc
 
 INCLUDEPATH += $${PWD}/src

app/images/icons/dialog-information.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="128" height="128" viewBox="0, 0, 128, 128">
+  <g id="icon">
+    <path d="M64,8 C33.072,8 8,33.072 8,64 C8,94.928 33.072,120 64,120 C94.928,120 120,94.928 120,64 C120,33.072 94.928,8 64,8 z M64,24 C68.418,24 72,27.582 72,32 C72,36.418 68.418,40 64,40 C59.582,40 56,36.418 56,32 C56,27.582 59.582,24 64,24 z M48,48 L72,48 L72,96 L80,96 L80,104 L48,104 L48,96 L56,96 L56,56 L48,56 L48,48 z" fill="#000000" id="dialog-information"/>
+  </g>
+</svg>

app/images/icons/dialog-warning.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="128" height="128" viewBox="0, 0, 128, 128">
+  <g id="icon">
+    <path d="M64,16 L8,112 L120,112 L64,16 z M56,48 L72,48 L72,80 L56,80 L56,48 z M64,88 C68.418,88 72,91.582 72,96 C72,100.418 68.418,104 64,104 C59.582,104 56,100.418 56,96 C56,91.582 59.582,88 64,88 z" fill="#000000" id="dialog-warning"/>
+  </g>
+</svg>

app/images/icons/emblem-default.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="128" height="128" viewBox="0, 0, 128, 128">
+  <g id="icon">
+    <path d="M64,8 C33.072,8 8,33.072 8,64 C8,94.928 33.072,120 64,120 C94.928,120 120,94.928 120,64 C120,33.072 94.928,8 64,8 z M80,32 L104,32 L56,104 L32,80 L32,56 L56,80 L80,32 z" fill="#000000" id="emblem-default"/>
+  </g>
+</svg>

app/images/icons/emblem-downloads.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="128" height="128" viewBox="0, 0, 128, 128">
+  <g id="icon">
+    <path d="M40,8 L40,48 L16,48 L64,96 L112,48 L88,48 L88,8 L40,8 z M8,72 L8,120 L120,120 L120,72 L104,72 L104,104 L24,104 L24,72 L8,72 z" fill="#000000" id="emblem-downloads"/>
+  </g>
+</svg>

app/images/images.qrc

+<RCC>
+    <qresource prefix="/images">
+        <file>icons/dialog-information.svg</file>
+        <file>icons/dialog-warning.svg</file>
+        <file>icons/emblem-default.svg</file>
+        <file>icons/emblem-downloads.svg</file>
+    </qresource>
+</RCC>

app/qml/main.qml

-import QtQuick 2.3
-import QtQuick.Window 2.0
-import QtQuick.Controls 1.2
-import QtQuick.Dialogs 1.2
+// Still support Qt 5.2
+import QtQuick 2.0
+import QtQuick.Layouts 1.0
+import QtQuick.Controls 1.0
+
+import "ui" as Ui
 
 import "scripts/Utility.js" as Utility
 
-Window {
+ApplicationWindow {
     id: app
-    title: Qt.application.name
+
+    title: configHandler.getAppConfigApplication().name
+
+    visible: true
     width: 400
-    height: 200
     minimumWidth: 400
+    maximumWidth: 400
+    height: 200
     minimumHeight: 200
-    maximumWidth: 800
     maximumHeight: 400
 
-    MessageDialog {
-        id: confirmDialog
-        title: app.title
-        icon: StandardIcon.Question
-        text: ""
-        informativeText: ""
-        detailedText: ""
-        standardButtons: StandardButton.Ok | StandardButton.Cancel
-        onAccepted: ocsUrlHandler.process()
-        onRejected: Qt.quit()
-    }
-
-    MessageDialog {
-        id: infoDialog
-        title: app.title
-        icon: StandardIcon.Information
-        text: ""
-        informativeText: ""
-        detailedText: ""
-        standardButtons: StandardButton.Open | StandardButton.Close
-        onAccepted: {
-            ocsUrlHandler.openDestination();
-            Qt.quit();
-        }
-        onRejected: Qt.quit()
-    }
-
-    MessageDialog {
-        id: errorDialog
-        title: app.title
-        icon: StandardIcon.Warning
-        text: ""
-        informativeText: ""
-        detailedText: ""
-        standardButtons: StandardButton.Close
-        onRejected: Qt.quit()
-    }
-
-    Dialog {
-        id: progressDialog
-        title: app.title
-        property alias primaryLabel: primaryLabel
-        property alias informativeLabel: informativeLabel
-        property alias progressBar: progressBar
-        property alias progressLabel: progressLabel
-        contentItem: Item {
-            implicitWidth: 400
-            implicitHeight: 150
-            Column {
-                anchors.fill: parent
-                anchors.margins: 12
-                spacing: 8
-                Label {
-                    id: primaryLabel
-                    text: " "
-                    font.bold: true
-                }
-                Label {
-                    id: informativeLabel
-                    text: " "
-                }
-                ProgressBar {
-                    id: progressBar
-                    maximumValue: 1
-                    minimumValue: 0
-                    value: 0
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                }
-                Label {
-                    id: progressLabel
-                    text: " "
-                    anchors.right: parent.right
-                }
-                Button {
-                    id: cancelButton
-                    text: qsTr("Cancel")
-                    anchors.right: parent.right
-                    onClicked: Qt.quit()
-                }
-            }
-        }
-    }
-
-    Component.onCompleted: {
+    function init() {
         var metadata = ocsUrlHandler.metadata();
+
         var primaryMessages = {
             "success_download": qsTr("Download successfull"),
             "success_install": qsTr("Installation successfull"),
@@ -116,7 +38,7 @@ Window {
 
         ocsUrlHandler.finishedWithSuccess.connect(function(result) {
             progressDialog.close();
-            infoDialog.text = primaryMessages[result.status];
+            infoDialog.primaryText = primaryMessages[result.status];
             infoDialog.informativeText = metadata.filename;
             infoDialog.detailedText = result.message;
             infoDialog.open();
@@ -124,37 +46,112 @@ Window {
 
         ocsUrlHandler.finishedWithError.connect(function(result) {
             progressDialog.close();
-            errorDialog.text = primaryMessages[result.status];
+            errorDialog.primaryText = primaryMessages[result.status];
             errorDialog.informativeText = metadata.filename;
             errorDialog.detailedText = result.message;
             errorDialog.open();
         });
 
         ocsUrlHandler.downloadProgress.connect(function(id, bytesReceived, bytesTotal) {
-            progressDialog.primaryLabel.text = qsTr("Downloading");
-            progressDialog.informativeLabel.text = metadata.filename;
-            progressDialog.progressBar.value = bytesReceived / bytesTotal;
-            progressDialog.progressLabel.text = Utility.convertByteToHumanReadable(bytesReceived)
-                    + " / " + Utility.convertByteToHumanReadable(bytesTotal)
+            progressDialog.primaryText = qsTr("Downloading");
+            progressDialog.informativeText = metadata.filename;
+            progressDialog.progress = bytesReceived / bytesTotal;
+            progressDialog.progressText
+                    = Utility.convertByteToHumanReadable(bytesReceived)
+                    + " / " + Utility.convertByteToHumanReadable(bytesTotal);
         });
 
         if (ocsUrlHandler.isValid()) {
             if (metadata.command === "download") {
-                confirmDialog.text = qsTr("Do you want to download?");
+                confirmDialog.primaryText = qsTr("Do you want to download?");
             }
             else if (metadata.command === "install") {
-                confirmDialog.text = qsTr("Do you want to install?");
+                confirmDialog.primaryText = qsTr("Do you want to install?");
             }
             confirmDialog.informativeText = metadata.filename;
-            confirmDialog.detailedText = qsTr("URL") + ": " + metadata.url + "\n\n"
-                    + qsTr("File") + ": " + metadata.filename + "\n\n"
-                    + qsTr("Type") + ": " + metadata.type;
+            confirmDialog.detailedText
+                    = qsTr("URL") + ": " + metadata.url + "\n"
+                    + qsTr("File") + ": " + metadata.filename + "\n"
+                    + qsTr("Type") + ": " + configHandler.getAppConfigInstallTypes()[metadata.type].name;
             confirmDialog.open();
         }
         else {
-            errorDialog.text = qsTr("Validation error");
+            errorDialog.primaryText = primaryMessages["error_validation"];
             errorDialog.detailedText = qsTr("Invalid OCS-URL");
             errorDialog.open();
         }
     }
+
+    Ui.Dialog {
+        id: confirmDialog
+        icon: "qrc:/images/icons/dialog-information.svg"
+        acceptButton.text: qsTr("OK")
+        acceptButton.onClicked: {
+            close();
+            ocsUrlHandler.process();
+        }
+        rejectButton.text: qsTr("Cancel")
+        rejectButton.onClicked: {
+            close();
+            Qt.quit();
+        }
+    }
+
+    Ui.Dialog {
+        id: infoDialog
+        icon: "qrc:/images/icons/emblem-default.svg"
+        acceptButton.text: qsTr("Open")
+        acceptButton.onClicked: {
+            close();
+            ocsUrlHandler.openDestination();
+            Qt.quit();
+        }
+        rejectButton.text: qsTr("Close")
+        rejectButton.onClicked: {
+            close();
+            Qt.quit();
+        }
+    }
+
+    Ui.Dialog {
+        id: errorDialog
+        icon: "qrc:/images/icons/dialog-warning.svg"
+        rejectButton.text: qsTr("Close")
+        rejectButton.onClicked: {
+            close();
+            Qt.quit();
+        }
+    }
+
+    Ui.Dialog {
+        id: progressDialog
+        icon: "qrc:/images/icons/emblem-downloads.svg"
+        property alias progress: progressBar.value
+        property alias progressText: progressText.text
+        content: ColumnLayout {
+            anchors.fill: parent
+            spacing: 4
+            ProgressBar {
+                id: progressBar
+                minimumValue: 0
+                maximumValue: 1
+                value: 0
+                Layout.fillWidth: true
+            }
+            Label {
+                id: progressText
+                text: ""
+                Layout.alignment: Qt.AlignRight
+            }
+        }
+        rejectButton.text: qsTr("Cancel")
+        rejectButton.onClicked: {
+            close();
+            Qt.quit();
+        }
+    }
+
+    Component.onCompleted: {
+        app.init();
+    }
 }

app/qml/qml.qrc

 <RCC>
     <qresource prefix="/qml">
         <file>main.qml</file>
+        <file>ui/Dialog.qml</file>
         <file>scripts/Utility.js</file>
     </qresource>
 </RCC>

app/qml/ui/Dialog.qml

+import QtQuick 2.0
+import QtQuick.Layouts 1.0
+import QtQuick.Controls 1.0
+
+ColumnLayout {
+    id: dialog
+
+    visible: false
+    anchors.fill: parent
+    anchors.margins: 12
+    spacing: 12
+
+    property alias icon: icon.source
+    property alias primaryText: primaryText.text
+    property alias informativeText: informativeText.text
+    property alias detailedText: detailedText.text
+    property alias content: content.children
+    property alias acceptButton: acceptButton
+    property alias rejectButton: rejectButton
+
+    function open() {
+        dialog.visible = true;
+    }
+
+    function close() {
+        dialog.visible = false;
+    }
+
+    RowLayout {
+        Layout.fillWidth: true
+        spacing: 12
+        Image {
+            id: icon
+            source: ""
+            visible: source.toString() ? true : false
+            Layout.preferredWidth: 48
+            Layout.preferredHeight: 48
+        }
+        ColumnLayout {
+            Layout.fillWidth: true
+            spacing: 4
+            Label {
+                id: primaryText
+                text: ""
+                visible: text ? true : false
+                Layout.fillWidth: true
+                wrapMode: Text.WrapAnywhere
+                font.bold: true
+            }
+            Label {
+                id: informativeText
+                text: ""
+                visible: text ? true : false
+                Layout.fillWidth: true
+                wrapMode: Text.WrapAnywhere
+            }
+        }
+    }
+
+    Label {
+        id: detailedText
+        text: ""
+        visible: text ? true : false
+        Layout.fillWidth: true
+        wrapMode: Text.WrapAnywhere
+        color: "#444444"
+    }
+
+    Item {
+        id: content
+        Layout.fillWidth: true
+    }
+
+    Item {
+        Layout.fillHeight: true
+    }
+
+    RowLayout {
+        Layout.fillWidth: true
+        spacing: 4
+        Item {
+            Layout.fillWidth: true
+        }
+        Button {
+            id: acceptButton
+            text: ""
+            visible: text ? true : false
+        }
+        Button {
+            id: rejectButton
+            text: ""
+            visible: text ? true : false
+        }
+    }
+}