diff --git a/client/src/data/user.settings.default.json b/client/src/data/user.settings.default.json
index 3a57d7c8..29137e6d 100644
--- a/client/src/data/user.settings.default.json
+++ b/client/src/data/user.settings.default.json
@@ -171,10 +171,9 @@
"type": "drawer",
"settings": [
{
- "id": "kvp0",
- "type": "kvp",
- "text": "",
- "value": { "key": "kvpKey", "value": "kvpValue" }
+ "id": "e2ekvps",
+ "type": ["kvp"],
+ "value": []
}
]
}
diff --git a/client/src/structs/settings/setting.js b/client/src/structs/settings/setting.js
index 82ba7ba1..618596ce 100644
--- a/client/src/structs/settings/setting.js
+++ b/client/src/structs/settings/setting.js
@@ -19,6 +19,7 @@ import KeybindSetting from './types/keybind';
import FileSetting from './types/file';
import GuildSetting from './types/guild';
import ArraySetting from './types/array';
+import CollectionSetting from './types/collection';
import KvpSetting from './types/kvp';
import CustomSetting from './types/custom';
@@ -27,6 +28,7 @@ export default class Setting {
constructor(args, ...merge) {
args = args.args || args;
+ if (args.type instanceof Array) args.subtype = args.type[0], args.type = 'collection';
if (args.type === 'color') args.type = 'colour';
if (args.type === 'bool') return new BoolSetting(args, ...merge);
@@ -40,8 +42,9 @@ export default class Setting {
else if (args.type === 'file') return new FileSetting(args, ...merge);
else if (args.type === 'guild') return new GuildSetting(args, ...merge);
else if (args.type === 'array') return new ArraySetting(args, ...merge);
- else if (args.type === 'custom') return new CustomSetting(args, ...merge);
+ else if (args.type === 'collection') return new CollectionSetting(args, ...merge);
else if (args.type === 'kvp') return new KvpSetting(args, ...merge);
+ else if (args.type === 'custom') return new CustomSetting(args, ...merge);
else throw {message: `Setting type ${args.type} unknown`};
}
diff --git a/client/src/structs/settings/types/collection.js b/client/src/structs/settings/types/collection.js
new file mode 100644
index 00000000..2390f489
--- /dev/null
+++ b/client/src/structs/settings/types/collection.js
@@ -0,0 +1,49 @@
+/**
+ * BetterDiscord Collection Setting Struct
+ * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
+ * All rights reserved.
+ * https://betterdiscord.net
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Utils } from 'common';
+import ArraySetting from './array';
+import Setting from '../setting';
+
+export default class CollectionSetting extends ArraySetting {
+
+ constructor(args, ...merge) {
+ // The ArraySetting constructor will call createItem which requires this to be set
+ if (!(args.setting instanceof Setting)) args.setting = new Setting(args.setting || {type: args.subtype});
+
+ super(args, ...merge);
+ }
+
+ get setting() {
+ return this.args.setting;
+ }
+
+ /**
+ * Creates a new setting for this collection setting.
+ * @param {Setting} item Values to merge into the new setting (optional)
+ * @return {Setting} The new set
+ */
+ createItem(item) {
+ if (item instanceof Setting)
+ return item;
+
+ const merge = [...arguments].filter(a => a);
+ const setting = this.setting.clone(...merge);
+ setting.args.id = item ? item.args ? item.args.id : item.id : Math.random();
+
+ setting.setSaved();
+ setting.on('settings-updated', async event => {
+ await this.emit('item-updated', { item: setting, event, updatedSettings: event.updatedSettings });
+ if (event.args.updating_array !== this) await this.updateValue();
+ });
+ return setting;
+ }
+
+}
diff --git a/client/src/structs/settings/types/index.js b/client/src/structs/settings/types/index.js
index 16f60e1e..3ad64c51 100644
--- a/client/src/structs/settings/types/index.js
+++ b/client/src/structs/settings/types/index.js
@@ -10,4 +10,5 @@ export { default as FileSetting } from './file';
export { default as GuildSetting } from './guild';
export { default as ArraySetting } from './array';
export { default as KvpSetting } from './kvp';
+export { default as CollectionSetting } from './kvp';
export { default as CustomSetting } from './custom';
diff --git a/client/src/structs/settings/types/kvp.js b/client/src/structs/settings/types/kvp.js
index 52c4a04a..466b0094 100644
--- a/client/src/structs/settings/types/kvp.js
+++ b/client/src/structs/settings/types/kvp.js
@@ -16,6 +16,6 @@ export default class KvpSetting extends Setting {
* The value to use when the setting doesn't have a value.
*/
get defaultValue() {
- return { key: 'Channel ID', value: 'Encryption Key' };
+ return { key: 'Key', value: 'Value' };
}
}
diff --git a/client/src/styles/partials/bdsettings/collection.scss b/client/src/styles/partials/bdsettings/collection.scss
new file mode 100644
index 00000000..3f086070
--- /dev/null
+++ b/client/src/styles/partials/bdsettings/collection.scss
@@ -0,0 +1,57 @@
+.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;
+ margin-bottom: 30px;
+
+ &:hover {
+ svg {
+ fill: #FFF;
+ }
+ }
+
+ svg {
+ width: 16px;
+ height: 16px;
+ fill: #ccc;
+ }
+ }
+ }
+
+ .bd-newCollectionItem {
+ display: flex;
+ cursor: pointer;
+ align-self: flex-end;
+ justify-content: center;
+ align-items: center;
+ margin-right: 2px;
+
+ svg {
+ width: 16px;
+ height: 16px;
+ fill: #ccc;
+ }
+
+ &:hover {
+ svg {
+ fill: #FFF;
+ }
+ }
+ }
+}
diff --git a/client/src/styles/partials/bdsettings/index.scss b/client/src/styles/partials/bdsettings/index.scss
index 56081af4..fbadb580 100644
--- a/client/src/styles/partials/bdsettings/index.scss
+++ b/client/src/styles/partials/bdsettings/index.scss
@@ -8,3 +8,4 @@
@import './updater.scss';
@import './window-preferences';
@import './kvp';
+@import './collection';
diff --git a/client/src/ui/components/bd/setting/Collection.vue b/client/src/ui/components/bd/setting/Collection.vue
new file mode 100644
index 00000000..5fa5ebf7
--- /dev/null
+++ b/client/src/ui/components/bd/setting/Collection.vue
@@ -0,0 +1,43 @@
+/**
+ * BetterDiscord Collection Setting Component
+ * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
+ * All rights reserved.
+ * https://betterdiscord.net
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+*/
+
+
+