Skip to content
Snippets Groups Projects
Commit 58ea914b authored by Thilo Wischmeyer's avatar Thilo Wischmeyer Committed by Thilo Wischmeyer
Browse files

Made spacing in label ui a little more consistent

parent 0486aabe
Branches
Tags
1 merge request!247Resolve "Update Vuetify"
<template>
<v-row
justify="start"
>
<v-col
class="ml-3"
cols="9"
>
<v-text-field
id="label-name"
v-model="mutableName"
label="Name"
/>
</v-col>
<v-col
class="ml-3"
cols="9"
>
<v-textarea
id="label-description"
v-model="mutableDescription"
label="Description"
placeholder="The description can be seen when hovering above the label"
auto-grow
/>
</v-col>
<v-col
class="ml-2"
cols="12"
<div>
<v-text-field
id="label-name"
v-model="mutableName"
label="Name"
/>
<v-textarea
id="label-description"
v-model="mutableDescription"
label="Description"
placeholder="The description can be seen when hovering above the label"
auto-grow
/>
<compact-picker
v-model="mutableColour"
style="width:85%;box-shadow:none;"
/>
<v-btn
v-if="!is_update"
id="create-label-btn"
:loading="loading"
color="teal"
@click="createLabel"
>
<compact-picker
v-model="mutableColour"
style="width:85%;box-shadow:none;"
/>
</v-col>
<v-col
class="ml-1 mb-3"
cols="4"
Create
</v-btn>
<v-btn
v-else
id="update-label-btn"
color="teal"
:loading="loading"
@click="updateLabel"
>
<v-btn
v-if="!is_update"
id="create-label-btn"
:loading="loading"
color="teal"
@click="createLabel"
>
Create
</v-btn>
<v-btn
v-else
id="update-label-btn"
color="teal"
:loading="loading"
@click="updateLabel"
>
Update
</v-btn>
</v-col>
</v-row>
Update
</v-btn>
</div>
</template>
<script lang="ts">
......
......@@ -31,10 +31,6 @@ export default {
<style scoped>
div.label {
display: inline-block;
margin: 8px 0 0 8px;
}
div.label:last-child {
margin-bottom: 8px;
margin: 0 8px 8px 0;
}
</style>
......@@ -45,13 +45,19 @@
Update
</v-tab>
<v-tab-item>
<feedback-label-list />
<v-container>
<feedback-label-list />
</v-container>
</v-tab-item>
<v-tab-item>
<feedback-label-form />
<v-container>
<feedback-label-form />
</v-container>
</v-tab-item>
<v-tab-item>
<feedback-label-updater />
<v-container>
<feedback-label-updater />
</v-container>
</v-tab-item>
</v-tabs>
</v-card>
......
<template>
<v-row>
<v-col
class="mx-2"
cols="12"
<div>
<v-autocomplete
id="label-update-autocomplete"
:items="feedbackLabels"
item-text="name"
item-value="pk"
append-icon="search"
placeholder="search for keywords"
@input="setLabel"
>
<v-autocomplete
id="label-update-autocomplete"
:items="feedbackLabels"
item-text="name"
item-value="pk"
append-icon="search"
placeholder="search for keywords"
@input="setLabel"
>
<template #item="{ item }">
<div class="label-updater-item">
<feedback-label-component v-bind="item" />
</div>
</template>
</v-autocomplete>
</v-col>
<v-col
<template #item="{ item }">
<div class="label-updater-item">
<feedback-label-component v-bind="item" />
</div>
</template>
</v-autocomplete>
<feedback-label-form
v-if="label.pk !== -1"
cols="12"
>
<feedback-label-form
is_update
v-bind="currentLabel"
@label-updated="setLabel"
/>
</v-col>
</v-row>
is_update
v-bind="currentLabel"
@label-updated="setLabel"
/>
</div>
</template>
<script lang="ts">
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment