Adds an (optional) status check feature, plus some refactoring

src/components/LinkItems/StatusIndicator.vue

@@ -0,0 +1,122 @@
+<template>
+  <div
+    v-tooltip="{
+      content: statusText || otherStatusText, classes: ['status-tooltip', `tip-${color()}`] }"
+    class="indicator"
+    @click="showToast()">
+    <div :class="`dot dot-${color()}`">
+      <span><span></span></span>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'StatusIndicator',
+  props: {
+    statusText: String,
+    statusSuccess: Boolean,
+  },
+  methods: {
+    /* Returns a color, based on success status */
+    color() {
+      switch (this.statusSuccess) {
+        case undefined: return ((new Date() - this.startTime) > 2000) ? 'grey' : 'yellow';
+        case true: return 'green'; // Success!
+        default: return 'red'; // Not success, therefore failure
+      }
+    },
+  },
+  data() {
+    return {
+      startTime: new Date(), // Used for timeout
+      otherStatusText: 'Checking...', // Used before server has responded
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      if (!this.statusText) this.otherStatusText = 'Request timed out';
+    }, 2000);
+  },
+};
+</script>
+
+<style scoped lang="scss">
+
+.indicator {
+  padding: 5px;
+  transition: all .2s ease-in-out;
+  cursor: help;
+  &:hover {
+    transform: scale(1.25);
+    filter: saturate(2);
+    opacity: 1;
+  }
+}
+
+@keyframes pulse {
+  0% { opacity: .75; transform: scale(1); }
+  25% { opacity: 0.75; transform: scale(1); }
+  100% { opacity: 0; transform: scale(1.8); }
+}
+@keyframes applyOpacity {
+  50% { opacity: 0.9; }
+  to { opacity: 0.8; }
+}
+
+.dot {
+  border-radius: 50%;
+  height: 12px;
+  width: 12px;
+  animation: applyOpacity 1s ease-in 8s forwards;
+  > span, > span span, > span span:after {
+    animation: pulse 1s linear 0.5s 2;
+    border-radius: 50%;
+    display: block;
+    height: 12px;
+    width: 12px;
+    content: '';
+  }
+  &.dot-green {
+    background-color: var(--success);
+    span, span:after {
+      background-color: var(--success);
+      opacity: 0.4;
+    }
+  }
+  &.dot-red {
+    background-color: var(--danger);
+    span, span:after {
+      background-color: var(--danger);
+      opacity: 0.4;
+    }
+  }
+  &.dot-yellow {
+    background-color: var(--warning);
+    span, span:after {
+      background-color: var(--warning);
+      opacity: 0.4;
+    }
+  }
+  &.dot-grey {
+    background-color: var(--medium-grey);
+    span, span:after {
+      background-color: var(--medium-grey);
+      opacity: 0.4;
+    }
+  }
+}
+
+</style>
+
+<style lang="scss">
+.status-tooltip {
+  background: var(--background-darker) !important;
+  font-size: 1rem;
+  z-index: 10;
+  &.tip-green { border: 1px solid var(--success); }
+  &.tip-yellow { border: 1px solid var(--warning); }
+  &.tip-red { border: 1px solid var(--danger); }
+}
+</style>