moved buttons from appbar to element

This commit is contained in:
BurnLP2013 2024-07-11 13:25:39 +02:00
parent 8e8d1194ee
commit 05b0155114
2 changed files with 29 additions and 46 deletions

View file

@ -159,41 +159,6 @@
</v-form>
</v-card>
</v-dialog>
<!-- -->
<!-- EDIT SECTION -->
<!-- -->
<v-btn icon class="mr-3" @click="edit = true">
<Pencil />
</v-btn>
<v-dialog v-model="edit" width="600" persistent>
<v-card max-width="600">
<v-form @submit.prevent="submit">
<v-card-title>
<span class="headline">Edit License</span>
</v-card-title>
<v-card-subtitle>
<span> Edit a License inside the Database</span>
</v-card-subtitle>
<v-card-text>
<!-- PLACEHOLDER FOR ELEMENTS -->
</v-card-text>
<v-card-actions>
<v-row>
<v-col cols="10" align="right" no-gutters>
<v-btn
class="ms-auto"
text="Cancel"
@click="edit = false"
></v-btn>
</v-col>
<v-col>
<v-btn class="ms-auto" text="Save" type="submit"></v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-form>
</v-card>
</v-dialog>
</div>
<!-- Search -->

View file

@ -78,28 +78,39 @@
</div>
</v-expansion-panel-title>
<v-expansion-panel-text>
Notes:
<v-row
class="flex-nowrap bg-surface-variant"
class="flex-nowrap"
no-gutters
>
<v-col
class="flex-grow-0 flex-shrink-0"
cols="7"
class="flex-grow-1 flex-shrink-0 overflow-x-auto border-e-md"
cols="10"
>
Notes: {{ props.notes }}
{{ props.notes }}
</v-col>
<v-col
class="flex-grow-0 flex-shrink-1"
cols="5"
class="flex-grow-0 flex-shrink-1 overflow-x-auto"
cols="2"
align="end"
>
I'm 5 column wide and I shrink if there's not enough space
<!-- -->
<!-- EDIT SECTION -->
<!-- -->
<v-btn class="mr-3" flat size="small">
<Pencil />
</v-btn>
<!-- -->
<!-- DELETE BTN -->
<!-- -->
<v-btn class="mr-3" flat size="small" color="red" variant="text">
<Trash />
</v-btn>
</v-col>
</v-row>
</v-expansion-panel-text>
</v-expansion-panel>
</v-expansion-panels>
@ -107,7 +118,8 @@
</template>
<script setup lang="ts">
import { Infinity, KeyRound, CalendarCheck, CalendarX } from "lucide-vue-next";
import { Infinity, KeyRound, CalendarCheck, CalendarX, Pencil, Trash } from "lucide-vue-next";
import { ref } from "vue";
const props = defineProps({
licenseName: String,
@ -117,6 +129,12 @@ const props = defineProps({
amount: Number,
notes: String,
});
//
// EDIT SECTION
//
const edit = ref(false);
</script>
<style scoped>