Improve column layout for editing persons

aleksis/core/frontend/components/generic/forms/FileField.vue

+<template>
+  <v-menu
+    ref="menu"
+    v-model="menu"
+    :close-on-content-click="false"
+    transition="scale-transition"
+    offset-y
+    min-width="auto"
+    eager
+  >
+    <template #activator="{ on, attrs }">
+      <v-text-field
+        v-model="color"
+        v-bind="$attrs"
+        v-on="$listeners"
+        placeholder="#AABBCC"
+        :rules="$rules().isHexColor(allowAlpha).build(rules)"
+      >
+        <template #prepend-inner>
+          <v-icon :color="color" v-bind="attrs" v-on="on"> mdi-circle </v-icon>
+        </template>
+      </v-text-field>
+    </template>
+    <v-color-picker v-if="menu" v-model="color" ref="picker"></v-color-picker>
+  </v-menu>
+</template>
+
+<script>
+import formRulesMixin from "../../../mixins/formRulesMixin";
+
+export default {
+  name: "ColorField",
+  extends: "v-text-field",
+  mixins: [formRulesMixin],
+  data() {
+    return {
+      menu: false,
+    };
+  },
+  props: {
+    value: {
+      type: String,
+      default: undefined,
+    },
+    rules: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    allowAlpha: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+  computed: {
+    color: {
+      get() {
+        return this.value;
+      },
+      set(newValue) {
+        this.$emit("input", newValue);
+      },
+    },
+  },
+};
+</script>
+
+<style scoped></style>

aleksis/core/frontend/components/person/PersonList.vue

@@ -46,10 +46,7 @@ export default {
         {
           text: this.$t("person.user"),
           value: "user",
-        },
-        {
-          text: this.$t("person.additional_name"),
-          value: "additionalName",
+          cols: 12
         },
         {
           text: this.$t("person.first_name"),
@@ -63,21 +60,29 @@ export default {
           text: this.$t("person.short_name"),
           value: "shortName",
         },
+        {
+          text: this.$t("person.additional_name"),
+          value: "additionalName",
+        },
         {
           text: this.$t("person.street"),
           value: "street",
+          cols: 9
         },
         {
           text: this.$t("person.housenumber"),
           value: "housenumber",
+          cols: 3
         },
         {
           text: this.$t("person.postal_code"),
           value: "postalCode",
+          cols: 4
         },
         {
           text: this.$t("person.place"),
           value: "place",
+          cols: 8
         },
         {
           text: this.$t("person.phone_number"),
@@ -92,6 +97,7 @@ export default {
         {
           text: this.$t("person.email"),
           value: "email",
+          cols: 12
         },
         {
           text: this.$t("person.date_of_birth"),
@@ -104,18 +110,32 @@ export default {
         {
           text: this.$t("person.sex.field"),
           value: "sex",
-        },
+          cols: 12
+        },o
         {
           text: this.$t("person.description"),
           value: "description",
+          cols: 12
         },
         {
           text: this.$t("person.guardians"),
           value: "guardians",
+          cols: 12
         },
         {
           text: this.$t("person.primary_group"),
           value: "primaryGroup",
+          cols: 12
+        },
+        {
+          text: this.$t("person.avatar"),
+          value: "avatar",
+          cols: 12
+        },
+        {
+          text: this.$t("person.photo"),
+          value: "photo",
+          cols: 12
         },
       ],
       i18nKey: "person",