Pause button now changes icon when paused to indicate "Resume" state better, also added tooltips

Updated german translation accordingly, other translations will have to follow once the community translates the new strings.

src/octoprint/static/js/app/viewmodels/printerstate.js

@@ -28,6 +28,14 @@ function PrinterStateViewModel(loginStateViewModel) {
 
     self.currentHeight = ko.observable(undefined);
 
+    self.TITLE_PRINT_BUTTON_PAUSED = gettext("Restarts the print job from the beginning");
+    self.TITLE_PRINT_BUTTON_UNPAUSED = gettext("Starts the print job");
+    self.TITLE_PAUSE_BUTTON_PAUSED = gettext("Resumes the print job");
+    self.TITLE_PAUSE_BUTTON_UNPAUSED = gettext("Pauses the print job");
+
+    self.titlePrintButton = ko.observable(self.TITLE_PRINT_BUTTON_UNPAUSED);
+    self.titlePauseButton = ko.observable(self.TITLE_PAUSE_BUTTON_UNPAUSED);
+
     self.estimatedPrintTimeString = ko.computed(function() {
         if (self.lastPrintTime())
             return formatDuration(self.lastPrintTime());
@@ -104,6 +112,8 @@ function PrinterStateViewModel(loginStateViewModel) {
     };
 
     self._processStateData = function(data) {
+        var prevPaused = self.isPaused();
+
         self.stateString(gettext(data.text));
         self.isErrorOrClosed(data.flags.closedOrError);
         self.isOperational(data.flags.operational);
@@ -112,6 +122,16 @@ function PrinterStateViewModel(loginStateViewModel) {
         self.isError(data.flags.error);
         self.isReady(data.flags.ready);
         self.isSdReady(data.flags.sdReady);
+
+        if (self.isPaused() != prevPaused) {
+            if (self.isPaused()) {
+                self.titlePrintButton(self.TITLE_PRINT_BUTTON_PAUSED);
+                self.titlePauseButton(self.TITLE_PAUSE_BUTTON_PAUSED);
+            } else {
+                self.titlePrintButton(self.TITLE_PRINT_BUTTON_UNPAUSED);
+                self.titlePauseButton(self.TITLE_PAUSE_BUTTON_UNPAUSED);
+            }
+        }
     };
 
     self._processJobData = function(data) {
@@ -181,13 +201,18 @@ function PrinterStateViewModel(loginStateViewModel) {
         self._jobCommand("cancel");
     };
 
-    self._jobCommand = function(command) {
+    self._jobCommand = function(command, callback) {
         $.ajax({
             url: API_BASEURL + "job",
             type: "POST",
             dataType: "json",
             contentType: "application/json; charset=UTF-8",
-            data: JSON.stringify({command: command})
+            data: JSON.stringify({command: command}),
+            success: function(response) {
+                if (callback != undefined) {
+                    callback();
+                }
+            }
         });
     }
 }

src/octoprint/templates/index.jinja2

@@ -164,9 +164,9 @@
                                 </div>
 
                                 <div class="row-fluid print-control" style="display: none;" data-bind="visible: loginState.isUser">
-                                    <button class="btn btn-primary span4" data-bind="click: print, enable: isOperational() && isReady() && !isPrinting() && loginState.isUser(), css: {'btn-danger': isPaused()}" id="job_print"><i class="icon-white" data-bind="css: {'icon-print': !isPaused(), 'icon-undo': isPaused()}"></i> <span data-bind="text: (isPaused() ? '{{ _('Restart') }}' : '{{ _('Print') }}')">{{ _('Print') }}</span></button>
-                                    <button class="btn span4" id="job_pause" data-bind="click: pause, enable: isOperational() && (isPrinting() || isPaused()) && loginState.isUser(), css: {active: isPaused()}"><i class="icon-pause"></i> <span>{{ _('Pause') }}</span></button>
-                                    <button class="btn span4" id="job_cancel" data-bind="click: cancel, enable: isOperational() && (isPrinting() || isPaused()) && loginState.isUser()"><i class="icon-stop"></i> {{ _('Cancel') }}</button>
+                                    <button class="btn btn-primary span4" data-bind="click: print, enable: isOperational() && isReady() && !isPrinting() && loginState.isUser(), css: {'btn-danger': isPaused()}, attr: {title: titlePrintButton}" id="job_print"><i class="icon-white" data-bind="css: {'icon-print': !isPaused(), 'icon-undo': isPaused()}"></i> <span data-bind="text: (isPaused() ? '{{ _('Restart') }}' : '{{ _('Print') }}')">{{ _('Print') }}</span></button>
+                                    <button class="btn span4" id="job_pause" data-bind="click: pause, enable: isOperational() && (isPrinting() || isPaused()) && loginState.isUser(), css: {active: isPaused()}, attr: {title: titlePauseButton}"><i data-bind="css: {'icon-pause': !isPaused(), 'icon-play': isPaused()}"></i> <span data-bind="visible: !isPaused()">{{ _('Pause') }}</span><span data-bind="visible: isPaused()">{{ _('Resume') }}</span></button>
+                                    <button class="btn span4" id="job_cancel" data-bind="click: cancel, enable: isOperational() && (isPrinting() || isPaused()) && loginState.isUser()" title="{{ _('Cancels the print job') }}"><i class="icon-stop"></i> {{ _('Cancel') }}</button>
                                 </div>
                             </div>
                         </div>