Merge pull request #291 from CatalystCode/enhancement/color-palette

Added color dropdown to help choose contrasting colors for the labels.

app/server/static/components/label.vue

@@ -52,23 +52,22 @@
                 label.label Color
                 div.field.has-addons
                   div.control
-                    a.button(
-                      v-bind:style="{ \
-                        color: newLabel.text_color, \
-                        backgroundColor: newLabel.background_color \
-                      }"
+                    div.form__field
+                      div.form__input
+                        swatches(
+                          v-model="newLabel.background_color"
+                          colors="basic"
+                          show-fallback=true
+                          popover-to=""
+                          v-bind:trigger-style="{ width: '36px', height: '36px' }"
+                        )
+                  div.control
+                    a.button.random-color-button(
                       v-on:click="setColor(newLabel)"
                     )
                       span.icon.is-small
                         i.fas.fa-sync-alt
 
-                  div.control.is-expanded
-                    input.input(
-                      type="text"
-                      placeholder="Text input"
-                      v-model="newLabel.background_color"
-                    )
-
             div.column
               div.field
                 label.label  
@@ -151,20 +150,22 @@
                 label.label Color
                 div.field.has-addons
                   div.control
-                    a.button.has-text-white(
-                      v-bind:style="{ backgroundColor: label.background_color }"
-                      v-on:click="setColor(label)"
+                    div.form__field
+                      div.form__input
+                        swatches(
+                          v-model="label.background_color"
+                          colors="basic"
+                          show-fallback=true
+                          popover-to=""
+                          v-bind:trigger-style="{ width: '36px', height: '36px' }"
+                        )
+                  div.control
+                    a.button.random-color-button(
+                      v-on:click="setEditColor"
                     )
                       span.icon.is-small
                         i.fas.fa-sync-alt
 
-                  div.control.is-expanded
-                    input.input(
-                      type="text"
-                      placeholder="Text input"
-                      v-model="label.background_color"
-                    )
-
             div.column
               div.field
                 label.label  
@@ -176,13 +177,25 @@
                     a.button.is-primary(v-on:click="doneEdit(label)") Save changes
 </template>
 
+<style scoped>
+.random-color-button {
+  height: 36px;
+  width: 36px;
+  background-color: transparent;
+  color: #404040;
+  border: none;
+}
+</style>
+
 <script>
+import Swatches from 'vue-swatches';
+import 'vue-swatches/dist/vue-swatches.min.css';
 import HTTP from './http';
 import Messages from './messages.vue';
 import { simpleShortcut } from './filter';
 
 export default {
-  components: { Messages },
+  components: { Messages, Swatches },
 
   filters: { simpleShortcut },
 
@@ -203,8 +216,8 @@ export default {
 
   methods: {
     generateColor() {
-      const color = Math.floor(Math.random() * 0xFFFFFF).toString(16);
-      const randomColor = '#' + ('000000' + color).slice(-6);
+      const gencolor = Math.floor(Math.random() * 0xFFFFFF).toString(16);
+      const randomColor = '#' + ('000000' + gencolor).slice(-6);
       return randomColor;
     },
 
@@ -222,6 +235,10 @@ export default {
       label.text_color = textColor;
     },
 
+    setEditColor() {
+      this.setColor(this.editedLabel);
+    },
+
     shortcutKey(label) {
       let shortcut = label.suffix_key;
       if (label.prefix_key) {
@@ -264,6 +281,7 @@ export default {
         background_color: '#209cee',
         text_color: '#ffffff',
       };
+      this.setColor(this.newLabel);
     },
 
     cancelCreate() {

app/server/static/package.json

@@ -14,19 +14,20 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "axios": "^0.18.0",
+    "axios": "^0.19.0",
     "axios-mock-adapter": "^1.17.0",
     "chart.js": "^2.7.2",
     "highlight.js": "^9.12.0",
     "lodash.isempty": "^4.4.0",
-    "marked": "^0.3.19",
+    "marked": "^0.7.0",
     "swiper": "^4.3.3",
     "vue": "^2.5.16",
     "vue-chartjs": "^3.4.0",
     "vue-debounce": "^1.1.0",
     "vue-json-pretty": "^1.6.0",
     "vue-loader": "^15.2.4",
-    "vue-shortkey": "^3.1.6"
+    "vue-shortkey": "^3.1.6",
+    "vue-swatches": "^1.0.3"
   },
   "devDependencies": {
     "babel-eslint": "^10.0.1",