Rename OutputGCodeButton to SaveButton and update styling

qml/OutputGCodeButton.qml

@@ -1,110 +0,0 @@
-import QtQuick 2.2
-import QtQuick.Controls 1.1
-import QtQuick.Controls.Styles 1.1
-import QtQuick.Layouts 1.1
-
-import UM 1.0 as UM
-
-UM.AngledCornerRectangle {
-    id: base;
-
-    color: UM.Theme.colors.secondary;
-    cornerSize: UM.Theme.sizes.default_margin.width;
-
-    signal saveRequested();
-    signal saveToSDRequested();
-
-    UM.AngledCornerRectangle {
-        anchors.fill: parent;
-        anchors.margins: 1;
-        cornerSize: UM.Theme.sizes.default_margin.width;
-    }
-
-    UM.AngledCornerRectangle {
-        id: icon;
-
-        anchors.left: parent.left;
-        width: parent.height;
-        height: parent.height;
-        cornerSize: UM.Theme.sizes.default_margin.width;
-        color: UM.Theme.colors.secondary;
-
-        Image {
-            anchors.centerIn: parent;
-
-            width: UM.Theme.sizes.button_icon.width;
-            height: UM.Theme.sizes.button_icon.height;
-
-            sourceSize.width: width;
-            sourceSize.height: height;
-
-            source: UM.Theme.icons.save;
-        }
-    }
-
-    Label {
-        id: label;
-        anchors.verticalCenter: parent.verticalCenter;
-        anchors.left: icon.left;
-        anchors.right: parent.right;
-        horizontalAlignment: Text.AlignHCenter;
-        font.pointSize: UM.Styles.largeTextSize;
-
-        //: Save file to disk button
-        text: qsTr("Save");
-    }
-
-    MouseArea {
-        anchors.fill: parent;
-
-        onClicked: {
-            switch(base.state) {
-                case 'sdcard':
-                    base.saveToSDRequested();
-                    break;
-                default:
-                    base.saveRequested();
-                    break;
-            }
-        }
-    }
-
-//     states: [
-//         State {
-//             name: 'sdcard';
-//             when: Printer.removableDrives.length > 0;
-//             PropertyChanges {
-//                 target: label;
-//                 //: Write to SD card button
-//                 text: qsTr("Write to SD");
-//             }
-//             PropertyChanges { target: iconImage; source: UM.Resources.getIcon('sdcard.png'); }
-//         },
-//         State {
-//             name: 'usb';
-//             PropertyChanges {
-//                 target: label
-//                 //: Send print over USB button
-//                 text: qsTr("Send over USB");
-//             }
-//             PropertyChanges { target: iconImage; source: UM.Resources.getIcon('usb.png'); }
-//         }
-//     ]
-/*
-    transitions: [
-        Transition {
-            SequentialAnimation {
-                ParallelAnimation {
-                    NumberAnimation { target: label; property: 'opacity'; to: 0; duration: 250; }
-                    NumberAnimation { target: iconImage; property: 'opacity'; to: 0; duration: 250; }
-                }
-                PropertyAction { target: label; property: 'text'; }
-                PropertyAction { target: iconImage; property: 'source'; }
-                ParallelAnimation {
-                    NumberAnimation { target: label; property: 'opacity'; to: 1; duration: 250; }
-                    NumberAnimation { target: iconImage; property: 'opacity'; to: 1; duration: 250; }
-                }
-            }
-        }
-    ]*/
-}

qml/SaveButton.qml

@@ -0,0 +1,121 @@
+import QtQuick 2.2
+import QtQuick.Controls 1.1
+import QtQuick.Controls.Styles 1.1
+import QtQuick.Layouts 1.1
+
+import UM 1.0 as UM
+
+Button {
+    id: base;
+
+    property Action saveAction;
+
+    property real progress: UM.Backend.progress;
+    Behavior on progress { NumberAnimation { duration: 250; } }
+
+    enabled: progress >= 0.95;
+
+    iconSource: UM.Theme.icons[Printer.outputDeviceIcon];
+
+    style: ButtonStyle {
+        background: UM.AngledCornerRectangle {
+            implicitWidth: control.width;
+            implicitHeight: control.height;
+
+            color: UM.Theme.colors.save_button_border;
+            cornerSize: UM.Theme.sizes.default_margin.width;
+
+            UM.AngledCornerRectangle {
+                anchors.fill: parent;
+                anchors.margins: UM.Theme.sizes.save_button_border.width;
+                cornerSize: UM.Theme.sizes.default_margin.width;
+                color: UM.Theme.colors.save_button;
+            }
+
+            UM.AngledCornerRectangle {
+                anchors {
+                    left: parent.left;
+                    top: parent.top;
+                    bottom: parent.bottom;
+                }
+
+                width: Math.max(parent.height + (parent.width - parent.height) * control.progress, parent.height);
+                cornerSize: UM.Theme.sizes.default_margin.width;
+
+                color: !control.enabled ? UM.Theme.colors.save_button_inactive : control.hovered ? UM.Theme.colors.save_button_active_hover : UM.Theme.colors.save_button_active;
+                Behavior on color { ColorAnimation { duration: 50; } }
+            }
+
+            UM.AngledCornerRectangle {
+                anchors.left: parent.left;
+                width: parent.height + UM.Theme.sizes.save_button_border.width;
+                height: parent.height;
+                cornerSize: UM.Theme.sizes.default_margin.width;
+                color: UM.Theme.colors.save_button;
+            }
+
+            UM.AngledCornerRectangle {
+                anchors.left: parent.left;
+                width: parent.height + UM.Theme.sizes.save_button_border.width;
+                height: parent.height;
+                cornerSize: UM.Theme.sizes.default_margin.width;
+
+                color: UM.Theme.colors.save_button;
+            }
+
+            UM.AngledCornerRectangle {
+                id: icon;
+
+                anchors.left: parent.left;
+                width: parent.height;
+                height: parent.height;
+                cornerSize: UM.Theme.sizes.default_margin.width;
+                color: !control.enabled ? UM.Theme.colors.save_button_inactive : control.hovered ? UM.Theme.colors.save_button_active_hover : UM.Theme.colors.save_button_active;
+                Behavior on color { ColorAnimation { duration: 50; } }
+
+                Image {
+                    anchors.centerIn: parent;
+
+                    width: UM.Theme.sizes.button_icon.width;
+                    height: UM.Theme.sizes.button_icon.height;
+
+                    sourceSize.width: width;
+                    sourceSize.height: height;
+
+                    source: control.iconSource;
+                }
+            }
+        }
+
+        label: Label {
+            id: label;
+            anchors.top: parent.top;
+            anchors.topMargin: UM.Theme.sizes.save_button_label_margin.height;
+            anchors.left: parent.left;
+            anchors.leftMargin: control.height + UM.Theme.sizes.save_button_label_margin.width;
+
+            color: UM.Theme.colors.save_button_text;
+            font: UM.Theme.fonts.default;
+
+            text: control.text;
+        }
+    }
+
+    text: {
+        if(base.progress < 0) {
+            return qsTr("Please load a 3D model");
+        } else if (base.progress < 0.95) {
+            return qsTr("Calculating Print-time");
+        } else {
+            return qsTr("Estimated Print-time");
+        }
+    }
+
+    onClicked: {
+        if(Printer.outputDevice != "local_file") {
+            Printer.writeToOutputDevice();
+        } else if(base.saveAction) {
+            base.saveAction.trigger();
+        }
+    }
+}

qml/Sidebar.qml

@@ -10,6 +10,7 @@ UM.AngledCornerRectangle {
 
     property Action addMachineAction;
     property Action configureMachinesAction;
+    property alias saveAction: saveButton.saveAction;
 
     cornerSize: UM.Theme.sizes.default_margin.width;
 
@@ -58,10 +59,11 @@ UM.AngledCornerRectangle {
 
             property Item sidebar: base;
 
-            onLoaded: item.configureSettings = base.configureMachinesAction
+            onLoaded: if(item) item.configureSettings = base.configureMachinesAction
         }
 
-        OutputGCodeButton {
+        SaveButton {
+            id: saveButton;
             Layout.preferredWidth: base.width - UM.Theme.sizes.default_margin.width * 2;
             Layout.preferredHeight: UM.Theme.sizes.button.height;
             Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter;