From dc2bb6f745f877a7a8dc768a36ec0ecd4094b03f Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Thu, 10 Sep 2020 15:47:05 +0200
Subject: [PATCH 1/5] hide too many checkboxes behind a button

---
 app/src/interfaces/checkboxes/checkboxes.vue | 54 ++++++++++++++------
 1 file changed, 37 insertions(+), 17 deletions(-)

diff --git a/app/src/interfaces/checkboxes/checkboxes.vue b/app/src/interfaces/checkboxes/checkboxes.vue
index 6473640035..83d8c1d765 100644
--- a/app/src/interfaces/checkboxes/checkboxes.vue
+++ b/app/src/interfaces/checkboxes/checkboxes.vue
@@ -12,7 +12,7 @@
 	>
 		<v-checkbox
 			block
-			v-for="item in choices"
+			v-for="item in choicesDisplayed"
 			:key="item.value"
 			:value="item.value"
 			:label="item.text"
@@ -24,20 +24,6 @@
 		/>
 
 		<template v-if="allowOther">
-			<button
-				:disabled="disabled"
-				v-if="allowOther"
-				class="add-new custom"
-				align="left"
-				outlined
-				dashed
-				secondary
-				@click="addOtherValue()"
-			>
-				<v-icon name="add" />
-				{{ $t('other') }}
-			</button>
-
 			<v-checkbox
 				block
 				custom-value
@@ -51,12 +37,27 @@
 				@update:value="setOtherValue(otherValue.key, $event)"
 				@change="$emit('input', $event)"
 			/>
+
+			<button
+				:disabled="disabled"
+				v-if="allowOther"
+				class="add-new custom"
+				align="left"
+				outlined
+				dashed
+				secondary
+				@click="addOtherValue()"
+			>
+				<v-icon name="add" />
+				{{ $t('other') }}
+			</button>
 		</template>
+		<v-button v-if="hideChoices" large @click="toggleAll">{{showAll ? 'Show less': 'Show all'}}</v-button>
 	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, toRefs, PropType } from '@vue/composition-api';
+import { defineComponent, computed, toRefs, PropType, ref } from '@vue/composition-api';
 import { useCustomSelectionMultiple } from '@/composables/use-custom-selection';
 
 type Option = {
@@ -101,6 +102,17 @@ export default defineComponent({
 	},
 	setup(props, { emit }) {
 		const { choices, value } = toRefs(props);
+		const showAll = ref(false);
+
+		const hideChoices = computed(() => props.choices.length >= 8 - Number(props.allowOther))
+
+		const choicesDisplayed = computed(() => {
+			if(showAll.value || hideChoices.value === false) {
+				return props.choices
+			}
+			return props.choices.slice(0, 7 - Number(props.allowOther))
+
+		})
 
 		const gridClass = computed(() => {
 			if (choices.value === null) return null;
@@ -123,7 +135,11 @@ export default defineComponent({
 
 		const { otherValues, addOtherValue, setOtherValue } = useCustomSelectionMultiple(value, choices, emit);
 
-		return { gridClass, otherValues, addOtherValue, setOtherValue };
+		return { gridClass, otherValues, addOtherValue, setOtherValue, choicesDisplayed, hideChoices, toggleAll, showAll };
+
+		function toggleAll() {
+			showAll.value = !showAll.value
+		}
 	},
 });
 </script>
@@ -132,6 +148,10 @@ export default defineComponent({
 .checkboxes {
 	display: grid;
 	grid-gap: 12px 32px;
+
+	.v-button {
+		--v-button-width: 100%;
+	}
 }
 
 .grid-1 {

From 398ecda5e5d3294aeae8f681ad2b56f224326c3b Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Thu, 10 Sep 2020 15:50:49 +0200
Subject: [PATCH 2/5] add translation

---
 app/src/interfaces/checkboxes/checkboxes.vue | 2 +-
 app/src/lang/en-US/interfaces.json           | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/src/interfaces/checkboxes/checkboxes.vue b/app/src/interfaces/checkboxes/checkboxes.vue
index 83d8c1d765..84bbd27982 100644
--- a/app/src/interfaces/checkboxes/checkboxes.vue
+++ b/app/src/interfaces/checkboxes/checkboxes.vue
@@ -52,7 +52,7 @@
 				{{ $t('other') }}
 			</button>
 		</template>
-		<v-button v-if="hideChoices" large @click="toggleAll">{{showAll ? 'Show less': 'Show all'}}</v-button>
+		<v-button v-if="hideChoices" large @click="toggleAll">{{$t(`interfaces.checkboxes.show_${showAll ? 'less' : 'all'}`) }}</v-button>
 	</div>
 </template>
 
diff --git a/app/src/lang/en-US/interfaces.json b/app/src/lang/en-US/interfaces.json
index 4e3efee393..35ec161f86 100644
--- a/app/src/lang/en-US/interfaces.json
+++ b/app/src/lang/en-US/interfaces.json
@@ -4,7 +4,9 @@
 			"checkboxes": "Checkboxes",
 			"description": "Choose between multiple options via checkboxes.",
 			"allow_other": "Allow Other",
-			"enable_custom_values": "Enable custom values"
+			"enable_custom_values": "Enable custom values",
+			"show_all": "Show all",
+			"show_less": "Show less"
 		},
 		"code": {
 			"code": "Code",

From 44cfb391ed3572ed151c40f4a962c8fd8c7a581b Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Thu, 10 Sep 2020 17:10:38 +0200
Subject: [PATCH 3/5] add label to v-detail and itemsShown to checkboxes

---
 app/src/components/v-detail/readme.md        |  7 +-
 app/src/components/v-detail/v-detail.vue     |  7 +-
 app/src/interfaces/checkboxes/checkboxes.vue | 85 ++++++++++++++++----
 app/src/interfaces/checkboxes/index.ts       | 12 +++
 app/src/lang/en-US/interfaces.json           |  5 +-
 5 files changed, 94 insertions(+), 22 deletions(-)

diff --git a/app/src/components/v-detail/readme.md b/app/src/components/v-detail/readme.md
index b8c8b14f2e..af5f8e3f04 100644
--- a/app/src/components/v-detail/readme.md
+++ b/app/src/components/v-detail/readme.md
@@ -10,9 +10,10 @@ Allows for collapsable content
 
 ## Props
 
-| Prop     | Description         | Default |
-|----------|---------------------|---------|
-| `active` | Used with `v-model` | `false` |
+| Prop     | Description         | Default        |
+|----------|---------------------|----------------|
+| `active` | Used with `v-model` | `false`        |
+| `label`  | Label of detail     | `$t('toggle')` |
 
 ## Events
 | Event    | Description                 | Value     |
diff --git a/app/src/components/v-detail/v-detail.vue b/app/src/components/v-detail/v-detail.vue
index a6d4527e53..ccd8678303 100644
--- a/app/src/components/v-detail/v-detail.vue
+++ b/app/src/components/v-detail/v-detail.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="v-detail" :class="{ _active }">
 		<v-divider @click.native="_active = !_active">
-			<slot name="title">{{ $t('toggle') }}</slot>
+			<slot name="title">{{ label }}</slot>
 			<v-icon name="unfold_more" small />
 		</v-divider>
 		<transition-expand>
@@ -14,6 +14,7 @@
 
 <script lang="ts">
 import { defineComponent, computed, ref } from '@vue/composition-api';
+import { i18n } from '@/lang';
 
 export default defineComponent({
 	model: {
@@ -26,6 +27,10 @@ export default defineComponent({
 			type: Boolean,
 			default: undefined,
 		},
+		label: {
+			type: String,
+			default: i18n.t('toggle')
+		}
 	},
 
 	setup(props, { emit }) {
diff --git a/app/src/interfaces/checkboxes/checkboxes.vue b/app/src/interfaces/checkboxes/checkboxes.vue
index 84bbd27982..d28b0d6b20 100644
--- a/app/src/interfaces/checkboxes/checkboxes.vue
+++ b/app/src/interfaces/checkboxes/checkboxes.vue
@@ -22,6 +22,27 @@
 			:input-value="value || []"
 			@change="$emit('input', $event)"
 		/>
+		<v-detail 
+			v-if="hideChoices"
+			:class="gridClass"
+			:label="$t(`interfaces.checkboxes.show_${showAll? 'less':'more'}`, {count: choicesHidden.length})"
+			@toggle="showAll = $event"
+		>
+			<div class="checkboxes" :class="gridClass">
+				<v-checkbox
+					block
+					v-for="item in choicesHidden"
+					:key="item.value"
+					:value="item.value"
+					:label="item.text"
+					:disabled="disabled"
+					:icon-on="iconOn"
+					:icon-off="iconOff"
+					:input-value="value || []"
+					@change="$emit('input', $event)"
+				/>
+			</div>
+		</v-detail>
 
 		<template v-if="allowOther">
 			<v-checkbox
@@ -52,7 +73,6 @@
 				{{ $t('other') }}
 			</button>
 		</template>
-		<v-button v-if="hideChoices" large @click="toggleAll">{{$t(`interfaces.checkboxes.show_${showAll ? 'less' : 'all'}`) }}</v-button>
 	</div>
 </template>
 
@@ -99,21 +119,32 @@ export default defineComponent({
 			type: String,
 			default: 'var(--primary)',
 		},
+		itemsShown: {
+			type: Number,
+			default: 8
+		}		
 	},
 	setup(props, { emit }) {
 		const { choices, value } = toRefs(props);
 		const showAll = ref(false);
 
-		const hideChoices = computed(() => props.choices.length >= 8 - Number(props.allowOther))
+		const hideChoices = computed(() => props.choices.length > props.itemsShown - Number(props.allowOther))
 
 		const choicesDisplayed = computed(() => {
-			if(showAll.value || hideChoices.value === false) {
+			if(hideChoices.value === false) {
 				return props.choices
 			}
-			return props.choices.slice(0, 7 - Number(props.allowOther))
+			return props.choices.slice(0, props.itemsShown - Number(props.allowOther))
 
 		})
 
+		const choicesHidden = computed(() => {
+			if(hideChoices.value === false) {
+				return []
+			}
+			return props.choices.slice(props.itemsShown - Number(props.allowOther))
+		})
+
 		const gridClass = computed(() => {
 			if (choices.value === null) return null;
 
@@ -135,7 +166,7 @@ export default defineComponent({
 
 		const { otherValues, addOtherValue, setOtherValue } = useCustomSelectionMultiple(value, choices, emit);
 
-		return { gridClass, otherValues, addOtherValue, setOtherValue, choicesDisplayed, hideChoices, toggleAll, showAll };
+		return { gridClass, otherValues, addOtherValue, setOtherValue, choicesDisplayed, choicesHidden, hideChoices, toggleAll, showAll };
 
 		function toggleAll() {
 			showAll.value = !showAll.value
@@ -149,25 +180,47 @@ export default defineComponent({
 	display: grid;
 	grid-gap: 12px 32px;
 
+	&.grid-1 {
+		grid-template-columns: repeat(1, 1fr);
+	}
+
+	&.grid-2 {
+		grid-template-columns: repeat(2, 1fr);
+	}
+
+	&.grid-3 {
+		grid-template-columns: repeat(3, 1fr);
+	}
+
+	&.grid-4 {
+		grid-template-columns: repeat(4, 1fr);
+	}
+
 	.v-button {
 		--v-button-width: 100%;
 	}
 }
 
-.grid-1 {
-	grid-template-columns: repeat(1, 1fr);
-}
+.v-detail {
+	margin-top: 0;
+	margin-bottom: 0;
 
-.grid-2 {
-	grid-template-columns: repeat(2, 1fr);
-}
+	&.grid-1 {
+		grid-column: span 1;
+	}
 
-.grid-3 {
-	grid-template-columns: repeat(3, 1fr);
-}
+	&.grid-2 {
+		grid-column: span 2;
+	}
 
-.grid-4 {
-	grid-template-columns: repeat(4, 1fr);
+	&.grid-3 {
+		grid-column: span 3;
+	}
+
+	&.grid-4 {
+		grid-column: span 4;
+	}
+	
 }
 
 .add-new {
diff --git a/app/src/interfaces/checkboxes/index.ts b/app/src/interfaces/checkboxes/index.ts
index 9855904c73..a810c8c8e1 100644
--- a/app/src/interfaces/checkboxes/index.ts
+++ b/app/src/interfaces/checkboxes/index.ts
@@ -93,6 +93,18 @@ export default defineInterface(({ i18n }) => ({
 				default_value: 'check_box_outline_blank'
 			}
 		},
+		{
+			field: 'itemsShown',
+			name: i18n.t('interfaces.checkboxes.items_shown'),
+			type: 'integer',
+			meta: {
+				width: 'half',
+				interface: 'numeric'
+			},
+			schema: {
+				default_value: 8
+			}
+		},
 	],
 	recommendedDisplays: ['tags'],
 }));
diff --git a/app/src/lang/en-US/interfaces.json b/app/src/lang/en-US/interfaces.json
index 35ec161f86..36ab3deb80 100644
--- a/app/src/lang/en-US/interfaces.json
+++ b/app/src/lang/en-US/interfaces.json
@@ -5,8 +5,9 @@
 			"description": "Choose between multiple options via checkboxes.",
 			"allow_other": "Allow Other",
 			"enable_custom_values": "Enable custom values",
-			"show_all": "Show all",
-			"show_less": "Show less"
+			"show_more": "Show {count} more",
+			"show_less": "Show {count} less",
+			"items_shown": "Items Shown"
 		},
 		"code": {
 			"code": "Code",

From ab78b28292d3ce127c50e737e6287339da082123 Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Thu, 10 Sep 2020 17:26:33 +0200
Subject: [PATCH 4/5] nuke the v-detail after clicking

---
 app/src/interfaces/checkboxes/checkboxes.vue | 40 ++++----------------
 app/src/lang/en-US/interfaces.json           |  1 -
 2 files changed, 8 insertions(+), 33 deletions(-)

diff --git a/app/src/interfaces/checkboxes/checkboxes.vue b/app/src/interfaces/checkboxes/checkboxes.vue
index d28b0d6b20..0d2720f95c 100644
--- a/app/src/interfaces/checkboxes/checkboxes.vue
+++ b/app/src/interfaces/checkboxes/checkboxes.vue
@@ -23,25 +23,11 @@
 			@change="$emit('input', $event)"
 		/>
 		<v-detail 
-			v-if="hideChoices"
+			v-if="hideChoices && showAll === false"
 			:class="gridClass"
-			:label="$t(`interfaces.checkboxes.show_${showAll? 'less':'more'}`, {count: choicesHidden.length})"
-			@toggle="showAll = $event"
+			:label="$t(`interfaces.checkboxes.show_more`, {count: hiddenCount})"
+			@toggle="showAll = true"
 		>
-			<div class="checkboxes" :class="gridClass">
-				<v-checkbox
-					block
-					v-for="item in choicesHidden"
-					:key="item.value"
-					:value="item.value"
-					:label="item.text"
-					:disabled="disabled"
-					:icon-on="iconOn"
-					:icon-off="iconOff"
-					:input-value="value || []"
-					@change="$emit('input', $event)"
-				/>
-			</div>
 		</v-detail>
 
 		<template v-if="allowOther">
@@ -128,22 +114,16 @@ export default defineComponent({
 		const { choices, value } = toRefs(props);
 		const showAll = ref(false);
 
-		const hideChoices = computed(() => props.choices.length > props.itemsShown - Number(props.allowOther))
+		const hideChoices = computed(() => props.choices.length > props.itemsShown)
 
 		const choicesDisplayed = computed(() => {
-			if(hideChoices.value === false) {
+			if(showAll.value || hideChoices.value === false) {
 				return props.choices
 			}
-			return props.choices.slice(0, props.itemsShown - Number(props.allowOther))
-
+			return props.choices.slice(0, props.itemsShown)
 		})
 
-		const choicesHidden = computed(() => {
-			if(hideChoices.value === false) {
-				return []
-			}
-			return props.choices.slice(props.itemsShown - Number(props.allowOther))
-		})
+		const hiddenCount = computed(() => props.choices.length - props.itemsShown)
 
 		const gridClass = computed(() => {
 			if (choices.value === null) return null;
@@ -166,11 +146,7 @@ export default defineComponent({
 
 		const { otherValues, addOtherValue, setOtherValue } = useCustomSelectionMultiple(value, choices, emit);
 
-		return { gridClass, otherValues, addOtherValue, setOtherValue, choicesDisplayed, choicesHidden, hideChoices, toggleAll, showAll };
-
-		function toggleAll() {
-			showAll.value = !showAll.value
-		}
+		return { gridClass, otherValues, addOtherValue, setOtherValue, choicesDisplayed, hideChoices, showAll, hiddenCount };
 	},
 });
 </script>
diff --git a/app/src/lang/en-US/interfaces.json b/app/src/lang/en-US/interfaces.json
index 36ab3deb80..65edc92a92 100644
--- a/app/src/lang/en-US/interfaces.json
+++ b/app/src/lang/en-US/interfaces.json
@@ -6,7 +6,6 @@
 			"allow_other": "Allow Other",
 			"enable_custom_values": "Enable custom values",
 			"show_more": "Show {count} more",
-			"show_less": "Show {count} less",
 			"items_shown": "Items Shown"
 		},
 		"code": {

From 3bef4be1c745a272a0cab38068d0a9ea4c7d084f Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Thu, 10 Sep 2020 19:55:14 +0200
Subject: [PATCH 5/5] fix dropdown closing when clicked inside

---
 app/src/interfaces/color/color.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/interfaces/color/color.vue b/app/src/interfaces/color/color.vue
index 58a77f757c..08d3bdf784 100644
--- a/app/src/interfaces/color/color.vue
+++ b/app/src/interfaces/color/color.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-menu attached :disabled="disabled" v-model="menuActive">
+	<v-menu attached :disabled="disabled" v-model="menuActive" :close-on-content-click="false">
 		<template #activator>
 			<v-input
 				:disabled="disabled"