src/plugins/pricelist/components/Tags.vue

@@ -3,30 +3,30 @@
     <q-page padding>
       <q-table title="Tags" :rows="rows" :row-key="(row) => row.id" :columns="columns">
         <template #top-right>
-          <q-btn color="primary" icon="mdi-plus" label="Hinzufügen">
+          <q-btn color="primary" icon="mdi-plus" round>
+            <q-tooltip> Tag hinzufügen </q-tooltip>
             <q-menu v-model="popup" anchor="center middle" self="center middle" persistent>
-              <div>
-                <q-input
-                  v-model="newTag.name"
-                  filled
-                  dense
-                  label="Name"
-                  class="q-pa-sm"
-                  :rule="[notExists]"
-                />
-                <q-color
-                  :model-value="newTag.color"
-                  class="q-pa-sm"
-                  @change="
-                    (val) => {
-                      newTag.color = val;
-                    }
-                  "
-                />
-                <div class="row q-gutter-sm justify-around">
-                  <q-btn v-close-popup label="Abbrechen" />
-                  <q-btn label="Speichern" color="primary" @click="save" />
-                </div>
+              <q-input
+                v-model="newTag.name"
+                filled
+                dense
+                label="Name"
+                class="q-pa-sm"
+                :rule="[notExists]"
+              />
+              <q-color
+                :model-value="newTag.color"
+                flat
+                class="q-pa-sm"
+                @change="
+                  (val) => {
+                    newTag.color = val;
+                  }
+                "
+              />
+              <div class="full-width row q-gutter-sm justify-around q-py-sm">
+                <q-btn v-close-popup flat label="Abbrechen" />
+                <q-btn flat label="Speichern" color="primary" @click="save" />
               </div>
             </q-menu>
           </q-btn>
@@ -51,9 +51,7 @@
                 @update:modelValue="updateTag(props.row)"
               >
                 <template #default="scope">
-                  <div class="fit row justify-around">
-                    <q-input v-model="scope.value" :rules="[notExists]" dense filled />
-                  </div>
+                  <q-input v-model="scope.value" :rules="[notExists]" dense filled />
                 </template>
               </q-popup-edit>
             </q-td>
@@ -72,8 +70,13 @@
                 @update:modelValue="updateTag(props.row)"
               >
                 <template #default="slot">
-                  <div class="fit row justify-around">
-                    <q-color :model-value="slot.value" @change="(val) => (slot.value = val)" />
+                  <div class="full-width row justify-center">
+                    <q-color
+                      :model-value="slot.value"
+                      class="full-width"
+                      flat
+                      @change="(val) => (slot.value = val)"
+                    />
                   </div>
                 </template>
               </q-popup-edit>
@@ -110,6 +113,7 @@ export default defineComponent({
         name: 'name',
         label: 'Name',
         field: 'name',
+        align: 'left',
       },
       {
         name: 'color',