Merge remote-tracking branch 'upstream/settings' into collection-settings

# Conflicts:
#	client/src/structs/settings/types/collection.js
#	client/src/ui/components/bd/setting/Collection.vue

client/src/data/user.settings.default.json

@@ -175,9 +175,6 @@
                         "type": ["kvp"],
                         "value": [
                             {
-                                "id": "kvp0",
-                                "type": "kvp",
-                                "text": "",
                                 "value": {
                                     "key": "kvpKey",
                                     "value": "kvpValue"

client/src/styles/partials/bdsettings/collection.scss

@@ -0,0 +1,53 @@
+.bd-formCollection {
+    display: flex;
+    flex-direction: column;
+
+    div:first-child {
+        flex: 1 1 auto;
+    }
+
+    .bd-collectionItem {
+        display: flex;
+        flex-grow: 1;
+        margin-top: 5px;
+
+        .bd-removeCollectionItem {
+            width: 20px;
+            flex: 0 1 auto;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+
+            &:hover {
+                svg {
+                    fill: #FFF;
+                }
+            }
+
+            svg {
+                width: 16px;
+                height: 16px;
+                fill: #ccc;
+            }
+        }
+    }
+
+    .bd-newCollectionItem {
+        font-weight: 500;
+        color: #ccc;
+        font-size: 26px;
+        width: 20px;
+        height: 20px;
+        margin-top: 5px;
+        text-align: center;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+
+        &:hover {
+            color: #FFF;
+        }
+    }
+}

client/src/styles/partials/bdsettings/index.scss

@@ -8,3 +8,4 @@
 @import './updater.scss';
 @import './window-preferences';
 @import './kvp';
+@import './collection';

client/src/ui/components/bd/setting/Collection.vue

@@ -10,24 +10,34 @@
 
 <template>
     <div class="bd-formCollection">
-        <template v-for="s in setting.items">
+        <div v-for="s in setting.items" class="bd-collectionItem">
             <Setting :setting="s" :key="s.id" />
-        </template>
+            <div class="bd-removeCollectionItem" @click="removeItem(s)"><MiMinus/></div>
+        </div>
+        <div class="bd-newCollectionItem" @click="addItem">+</div>
     </div>
 </template>
 
 <script>
     import Setting from './Setting.vue';
+    import { MiMinus } from '../../common';
 
     export default {
         props: ['setting'],
-        components: {},
+        components: {
+            MiMinus
+        },
+        methods: {
+            removeItem(item) {
+                this.setting.removeItem(item);
+            },
+            addItem() {
+                this.setting.addItem();
+            }
+        },
         beforeCreate() {
             // https://vuejs.org/v2/guide/components.html#Circular-References-Between-Components
             this.$options.components.Setting = Setting;
-        },
-        mounted() {
-            console.log('collection', this.setting);
         }
     }
 </script>

client/src/ui/components/bd/setting/KeyValuePair.vue

@@ -26,10 +26,10 @@
         props: ['setting'],
         methods: {
             keyChange(e) {
-                this.setting.value.key = e.target.value;
+                this.setting.value = { key: e.target.value, value: this.setting.value.value }
             },
             valueChange(e) {
-                this.setting.value.value = e.target.value;
+                this.setting.value = { key: this.setting.value.key, value: e.target.value }
             }
         }
     }