Add new translations interface (#7727)

* added v-select and button to start sidebyside view

* v-chip next to field name on translations

* v-chip color changed

* add baisc logic

* finish inner workings of translation interface

* finish design

* clean up code

* remove unused prop

* small tweaks

* finish translation interface

* fix lang icon

* tweak styling

* Use v-model over separate bind+event

* Tweak margin definition

* Add class to field-name to prevent span confusion

* Rename classes to match var names

* Add limit -1, remove commented code

* Tweak toggle tooltip wording

* Add hover state to v-icons

* Use self-closing elements

* Remove unused imports

* Rename newVal->sideBySideEnabled

* Use filter + length instead of reducer

* Fix param typo

* Move dividers into main translations component

* Base initial language on fetched languages array

* Move styling to language-select, simplify component

* Don't rely on deep styling

* Tweak interactive state of chip

* Use existing form-grid for side-by-side layoutin

* Only fetch preview values when we dont have them yet

* Improve stability of edited status

* Fix hover state of v-icon

Co-authored-by: Nitwel <nitwel@arcor.de>
Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>

app/src/components/v-chip/v-chip.vue

@@ -104,7 +104,7 @@ body {
 	border: var(--border-width) solid var(--v-chip-background-color);
 	border-radius: 16px;
 
-	&:hover {
+	&.clickable:hover {
 		color: var(--v-chip-color-hover);
 		background-color: var(--v-chip-background-color-hover);
 		border-color: var(--v-chip-background-color-hover);
@@ -120,7 +120,7 @@ body {
 		background-color: var(--v-chip-background-color);
 		border-color: var(--v-chip-background-color);
 
-		&:hover {
+		&.clickable:hover {
 			color: var(--v-chip-color);
 			background-color: var(--v-chip-background-color);
 			border-color: var(--v-chip-background-color);

app/src/components/v-field-select/v-field-select.vue

@@ -13,7 +13,7 @@
 		class="v-field-select"
 	>
 		<template #item="{ element }">
-			<v-chip v-tooltip="element.field" class="field draggable" @click="removeField(element.field)">
+			<v-chip v-tooltip="element.field" clickable class="field draggable" @click="removeField(element.field)">
 				{{ element.name }}
 			</v-chip>
 		</template>

app/src/components/v-form/form-field-label.vue

@@ -6,11 +6,12 @@
 			:value="field.field"
 			@update:model-value="$emit('toggle-batch', field)"
 		/>
-		<span v-tooltip="edited ? t('edited') : null" @click="toggle">
+		<span v-tooltip="edited ? t('edited') : null" class="field-name" @click="toggle">
 			{{ field.name }}
 			<v-icon v-if="field.meta?.required === true" class="required" sup name="star" />
 			<v-icon v-if="!disabled" class="ctx-arrow" :class="{ active }" name="arrow_drop_down" />
 		</span>
+		<v-chip v-if="badge" x-small>{{ badge }}</v-chip>
 	</div>
 </template>
 
@@ -53,6 +54,10 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		badge: {
+			type: String,
+			default: null,
+		},
 	},
 	emits: ['toggle-batch'],
 	setup() {
@@ -79,6 +84,11 @@ export default defineComponent({
 		margin-right: 4px;
 	}
 
+	.v-chip {
+		margin: 0;
+		margin-left: 8px;
+	}
+
 	.required {
 		--v-icon-color: var(--primary);
 
@@ -88,7 +98,7 @@ export default defineComponent({
 	.ctx-arrow {
 		position: absolute;
 		top: -3px;
-		right: -20px;
+		right: -24px;
 		color: var(--foreground-subdued);
 		opacity: 0;
 		transition: opacity var(--fast) var(--transition);
@@ -118,7 +128,7 @@ export default defineComponent({
 			pointer-events: none;
 		}
 
-		> span {
+		.field-name {
 			margin-left: -16px;
 			padding-left: 16px;
 		}

app/src/components/v-form/form-field.vue

@@ -11,6 +11,7 @@
 					:batch-active="batchActive"
 					:edited="isEdited"
 					:has-error="!!validationError"
+					:badge="badge"
 					@toggle-batch="$emit('toggle-batch', $event)"
 				/>
 			</template>
@@ -111,6 +112,10 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		badge: {
+			type: String,
+			default: null,
+		},
 	},
 	emits: ['toggle-batch', 'unset', 'update:modelValue'],
 	setup(props, { emit }) {

app/src/components/v-form/v-form.vue

@@ -52,6 +52,7 @@
 				:primary-key="primaryKey"
 				:loading="loading"
 				:validation-error="validationErrors.find((err) => err.field === field.field)"
+				:badge="badge"
 				@update:model-value="setValue(field, $event)"
 				@unset="unsetValue(field)"
 				@toggle-batch="toggleBatchField(field)"
@@ -124,6 +125,10 @@ export default defineComponent({
 			type: Number,
 			default: null,
 		},
+		badge: {
+			type: String,
+			default: null,
+		},
 	},
 	emits: ['update:modelValue'],
 	setup(props, { emit }) {

app/src/components/v-progress/linear/v-progress-linear.vue

@@ -1,14 +1,18 @@
 <template>
 	<div
 		class="v-progress-linear"
-		:class="{
-			absolute,
-			bottom,
-			fixed,
-			indeterminate,
-			rounded,
-			top,
-		}"
+		:class="[
+			{
+				absolute,
+				bottom,
+				fixed,
+				indeterminate,
+				rounded,
+				top,
+				colorful,
+			},
+			color,
+		]"
 		@animationiteration="$emit('animationiteration')"
 	>
 		<div
@@ -22,7 +26,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
 
 export default defineComponent({
 	props: {
@@ -54,8 +58,21 @@ export default defineComponent({
 			type: Number,
 			default: 0,
 		},
+		colorful: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	emits: ['animationiteration'],
+	setup(props) {
+		const color = computed(() => {
+			if (props.value <= 33) return 'danger';
+			if (props.value <= 66) return 'warning';
+			return 'success';
+		});
+
+		return { color };
+	},
 });
 </script>
 
@@ -116,6 +133,20 @@ body {
 	&.top {
 		top: 0;
 	}
+
+	&.colorful {
+		&.danger .inner {
+			background-color: var(--danger);
+		}
+
+		&.warning .inner {
+			background-color: var(--warning);
+		}
+
+		&.success .inner {
+			background-color: var(--success);
+		}
+	}
 }
 
 @keyframes indeterminate {

app/src/components/v-select/v-select.vue

@@ -23,7 +23,10 @@
 				@click="toggle"
 			>
 				<template v-if="$slots.prepend" #prepend><slot name="prepend" /></template>
-				<template #append><v-icon name="expand_more" :class="{ active }" /></template>
+				<template #append>
+					<v-icon name="expand_more" :class="{ active }" />
+					<slot name="append" />
+				</template>
 			</v-input>
 		</template>