replace gif status indicators with unicode symbols

2026-03-02 03:40:21 +00:00 · 2017-12-28 15:57:57 +01:00
parent 6e4c89bd73
commit ae961b97cb
7 changed files with 27 additions and 7 deletions
--- a/src/resources/cross.gif
+++ b/src/resources/cross.gif
--- a/src/resources/index.html
+++ b/src/resources/index.html
@@ -48,6 +48,22 @@
    right: 10px;
    padding: 20px;
  }
+  span.status {
+    display: inline-block;
+    width: 1em;
+    text-align: center;
+    font-family: sans-serif;
+  }
+  span.success { color: forestgreen; }
+  span.failed { color: firebrick; }
+  span.aborted { color: indigo; }
+  span.spin {
+    color: steelblue;
+    animation: 2s linear infinite spin;
+  }
+  @keyframes spin {
+    to { transform: rotate(360deg); }
+  }
 </style>
 </head>
 <body>
@@ -229,7 +245,7 @@
  </nav>
  <a v-on:click="toggleNotifications(!notify)" v-show="supportsNotifications" class="bell pull-right" :class="{'active':notify}" :title="(notify?'Disable':'Enable')+' notifications'">&#128276;</a>
  <router-view></router-view>
-  <div v-show="!connected" id="popup-connecting"><img src="/spin.gif">&nbsp;Connecting...</div>
+  <div v-show="!connected" id="popup-connecting"><span class="status spin">⚙&#xfe0e;</span>&nbsp;Connecting...</div>
 </div>
 </body>
 </html>
--- a/src/resources/js/app.js
+++ b/src/resources/js/app.js
@@ -75,7 +75,15 @@ const WebsocketHandler = function() {
 const Utils = {
  methods: {
    runIcon(result) {
-      return result === "success" ? '<img src="/tick.gif">' : result === "failed" || result === "aborted" ? '<img src="/cross.gif">' : '<img src="/spin.gif">';
+      var marker = '⚙';
+      var classname = result;
+      if (result === 'success')
+         marker = '✔';
+      else if (result === 'failed' || result === 'aborted')
+         marker = '✘';
+      else
+         classname = 'spin';
+      return '<span title="' + result + '" class="status ' + classname + '">' + marker + '&#xfe0e;</span>';
    },
    formatDate: function(unix) {
      // TODO: reimplement when toLocaleDateString() accepts formatting options on most browsers
--- a/src/resources/spin.gif
+++ b/src/resources/spin.gif
--- a/src/resources/tick.gif
+++ b/src/resources/tick.gif