Custom EndpointButton, Download logs using EndpointButton

webapp/src/assets/less/theme.less

@@ -201,7 +201,6 @@ h4, .uk-h4 {
 
 .uk-card {
     border-radius: @paper-border-radius;
-    //border: 1px solid rgba(180, 180, 180, 0.25);
     box-shadow: @small-shadow;
 }
 
@@ -220,31 +219,13 @@ h4, .uk-h4 {
     margin: 0 auto;
 }
 
-.uk-card-default .uk-card-footer {
-    border-top: 1px solid rgba(180, 180, 180, 0.25);
-}
-
-.uk-card-primary .uk-card-footer {
-    border-top: 1px solid rgba(0, 0, 0, 0.075);
-}
-
-.uk-card-default {
-    color: @global-color;
-}
-
 .hook-inverse() {
 
     // Override background colour in dark mode
-    .uk-card-default {
+    .uk-card {
         background-color: #2a2a2a !important;
         color: @inverse-global-color;
     }
-
-    // Lighten on hover to show depth in dark mode
-    .uk-card-default:hover {
-        transition: background-color @animation-fast-duration ease;
-        background-color: #333 !important;
-    }
 }
 
 /*
@@ -385,7 +366,7 @@ a:hover {
 
 .hook-inverse() {
     .uk-button {
-        background-color: rgba(180, 180, 180, 0.15);
+        background-color: rgba(27, 13, 13, 0.15);
         color: @inverse-primary-muted-color;
         border-color: @inverse-primary-muted-color;
     }
@@ -396,7 +377,7 @@ a:hover {
     }
 
     .uk-button-primary {
-        background-color: rgba(180, 180, 180, 0.15);
+        background-color: rgb(0, 0, 0);
         color: @inverse-primary-muted-color;
         border-color: @inverse-primary-muted-color;
     }
@@ -408,6 +389,12 @@ a:hover {
     }
 }
 
+.disabled {
+  border: 1px solid #999999 !important;
+  background-color: #cccccc !important;
+  color: #919191 !important;
+}
+
 .uk-icon-button,
 .uk-icon-button:hover {
     text-decoration: none

webapp/src/components/labThingsComponents/endpointButton.vue

@@ -0,0 +1,48 @@
+<template>
+    <a
+      class="uk-button"
+      :class="[isDisabled ? 'disabled' : '', buttonPrimary ? 'uk-button-primary' : 'uk-button-default']"
+      :href="URL"
+      download
+      > {{ buttonLabel }}</a
+    >
+</template>
+
+<script>
+
+export default {
+  name: "EndpointButton",
+
+  props: {
+    buttonPrimary: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    URL: {
+      type: String,
+      required: true,
+    },
+    isDisabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    destinationName: {
+      type: String,
+      required: false,
+      default: null
+    },
+    buttonLabel: {
+      type: String,
+      required: false,
+      default: "Download File"
+    }
+  },
+};
+</script>
+
+<style lang="less" scoped>
+@import "../../assets/less/theme.less";
+
+</style>

webapp/src/components/tabContentComponents/loggingContent.vue

@@ -30,12 +30,12 @@
             </button>
           </div>
           <div>
-            <a
-              class="uk-button uk-button-default"
-              :href="logFileURI"
-              download="openflexure_microscope.log"
-              >Download Log File</a
-            >
+          <EndpointButton
+            class="uk-button uk-width-1-1"
+            :URL="logFileURI"
+            buttonLabel="Download Log File"
+            :buttonPrimary="false"
+            />
           </div>
         </div>
       </div>
@@ -94,12 +94,14 @@
 <script>
 import axios from "axios";
 import Paginate from "vuejs-paginate";
+import EndpointButton from "../labThingsComponents/endpointButton.vue";
 
 export default {
   name: "LoggingContent",
 
   components: {
-    Paginate
+    Paginate,
+    EndpointButton
   },
 
   data: function() {

webapp/src/components/tabContentComponents/scanListContent.vue

@@ -86,7 +86,9 @@
               </div>
               <h3 class="uk-card-title" style="text-align: center;">{{ item.name }}</h3>
               <div class="button-container">
+              <div class="uk-button-group" style="width:100%">
                 <action-button
+                class="uk-width-1-2"
                 thing="smart_scan"
                 action="download_zip"
                 submit-label="Download All"
@@ -95,15 +97,15 @@
                 :button-primary="true"
                 @response="downloadZipFile"
                 @error="modalError"
-                class="uk-button uk-width-1-2"
                 />
-                <a
-                  class="uk-button uk-button-primary uk-width-1-2"
-                  :class="item.stitch_available ? '' : 'disabled'"
-                  :href="downloadStitchFile( item.name )"
-                  download
-                  >Download Stitch</a
-                >
+                <EndpointButton
+                  class="uk-width-1-2"
+                  :buttonPrimary=true
+                  :isDisabled=!item.stitch_available
+                  :URL="downloadStitchFile( item.name )"
+                  buttonLabel="Download JPEG"
+                  />
+              </div>
               <button
                 class="uk-button uk-button-default uk-width-1-1"
                 @click="deleteScan(item.name)"
@@ -120,6 +122,7 @@
                 :button-primary="false"
                 :modal-progress="true"
                 @error="modalError"
+                @response="updateScans"
               />
               <button
                 v-if="item.dzi" class="uk-button uk-button-default uk-width-1-1"
@@ -151,11 +154,12 @@ import axios from "axios";
 import UIkit from "uikit";
 import actionButton from "../labThingsComponents/actionButton.vue";
 import OpenSeadragonViewer from "./scanListComponents/openSeadragonViewer.vue";
+import EndpointButton from "../labThingsComponents/endpointButton.vue";
 
 // Export main app
 export default {
   name: "ScanListContent",
-  components: { actionButton, OpenSeadragonViewer },
+  components: { actionButton, OpenSeadragonViewer, EndpointButton },
 
   data: function() {
     return {