fix: remove external dependency for icones (#805)

* change all icons to use iconify

* fix minor UI elements

* fix layout of table
This commit is contained in:
Hayden 2024-02-29 19:20:18 -06:00 committed by GitHub
parent cf166ac641
commit f91b33db38
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
40 changed files with 303 additions and 183 deletions

View file

@ -1,6 +1,11 @@
<script setup lang="ts">
import { AnyDetail, Detail, Details, filterZeroValues } from "~~/components/global/DetailsSection/types";
import { ItemAttachment } from "~~/lib/api/types/data-contracts";
import MdiClose from "~icons/mdi/close";
import MdiPackageVariant from "~icons/mdi/package-variant";
import MdiPlus from "~icons/mdi/plus";
import MdiMinus from "~icons/mdi/minus";
import MdiDownload from "~icons/mdi/download";
definePageMeta({
middleware: ["auth"],
@ -439,10 +444,10 @@
<div ref="refDialogBody" class="relative">
<div class="absolute right-0 -mt-3 -mr-3 sm:-mt-4 sm:-mr-4 space-x-1">
<a class="btn btn-sm sm:btn-md btn-primary btn-circle" :href="dialoged.src" download>
<Icon class="h-5 w-5" name="mdi-download" />
<MdiDownload class="h-5 w-5" />
</a>
<button class="btn btn-sm sm:btn-md btn-primary btn-circle" @click="closeDialog()">
<Icon class="h-5 w-5" name="mdi-close" />
<MdiClose class="h-5 w-5" />
</button>
</div>
@ -456,7 +461,7 @@
<div class="flex flex-wrap items-end gap-2">
<div class="avatar placeholder mb-auto">
<div class="bg-neutral-focus text-neutral-content rounded-full w-12">
<Icon name="mdi-package-variant" class="h-7 w-7" />
<MdiPackageVariant class="h-7 w-7" />
</div>
</div>
<div>
@ -525,10 +530,10 @@
class="opacity-0 group-hover:opacity-100 ml-4 my-0 duration-75 transition-opacity inline-flex gap-2"
>
<button class="btn btn-circle btn-xs" @click="adjustQuantity(-1)">
<Icon name="mdi-minus" class="h-3 w-3" />
<MdiMinus class="h-3 w-3" />
</button>
<button class="btn btn-circle btn-xs" @click="adjustQuantity(1)">
<Icon name="mdi-plus" class="h-3 w-3" />
<MdiPlus class="h-3 w-3" />
</button>
</span>
</template>

View file

@ -5,6 +5,9 @@
import { useLocationStore } from "~~/stores/locations";
import { capitalize } from "~~/lib/strings";
import Autocomplete from "~~/components/Form/Autocomplete.vue";
import MdiDelete from "~icons/mdi/delete";
import MdiPencil from "~icons/mdi/pencil";
import MdiContentSaveOutline from "~icons/mdi/content-save-outline";
definePageMeta({
middleware: ["auth"],
@ -445,12 +448,12 @@
</div>
<BaseButton size="sm" @click="saveItem">
<template #icon>
<Icon name="mdi-content-save-outline" />
<MdiContentSaveOutline />
</template>
Save
</BaseButton>
<BaseButton class="btn btn-sm btn-error" @click="deleteItem()">
<Icon name="mdi-delete" class="mr-2" />
<MdiDelete class="mr-2" />
Delete
</BaseButton>
</div>
@ -522,7 +525,7 @@
<FormTextField v-model="field.textValue" label="Value" />
<div class="tooltip" data-tip="Delete">
<button class="btn btn-sm btn-square mb-2 ml-2" @click="item.fields.splice(idx, 1)">
<Icon name="mdi-delete" />
<MdiDelete />
</button>
</div>
</div>
@ -576,12 +579,12 @@
<div class="flex gap-2 justify-end">
<div class="tooltip" data-tip="Delete">
<button class="btn btn-sm btn-square" @click="deleteAttachment(attachment.id)">
<Icon name="mdi-delete" />
<MdiDelete />
</button>
</div>
<div class="tooltip" data-tip="Edit">
<button class="btn btn-sm btn-square" @click="openAttachmentEditDialog(attachment)">
<Icon name="mdi-pencil" />
<MdiPencil />
</button>
</div>
</div>

View file

@ -2,6 +2,13 @@
import DatePicker from "~~/components/Form/DatePicker.vue";
import { StatsFormat } from "~~/components/global/StatCard/types";
import { ItemOut, MaintenanceEntry } from "~~/lib/api/types/data-contracts";
import MdiPost from "~icons/mdi/post";
import MdiPlus from "~icons/mdi/plus";
import MdiCheck from "~icons/mdi/check";
import MdiDelete from "~icons/mdi/delete";
import MdiEdit from "~icons/mdi/edit";
import MdiCalendar from "~icons/mdi/calendar";
import MdiWrenchClock from "~icons/mdi/wrench-clock";
const props = defineProps<{
item: ItemOut;
@ -184,7 +191,7 @@
<div class="py-2 flex justify-end">
<BaseButton type="submit" class="ml-2 mt-2">
<template #icon>
<Icon name="mdi-post" />
<MdiPost />
</template>
{{ entry.id ? "Update" : "Create" }}
</BaseButton>
@ -214,7 +221,7 @@
</div>
<BaseButton class="ml-auto" size="sm" @click="newEntry()">
<template #icon>
<Icon name="mdi-plus" />
<MdiPlus />
</template>
New
</BaseButton>
@ -228,11 +235,11 @@
<template #description>
<div class="flex flex-wrap gap-2">
<div v-if="validDate(e.completedDate)" class="badge p-3">
<Icon name="mdi-check" class="mr-2" />
<MdiCheck class="mr-2" />
<DateTime :date="e.completedDate" format="human" datetime-type="date" />
</div>
<div v-else-if="validDate(e.scheduledDate)" class="badge p-3">
<Icon name="mdi-calendar" class="mr-2" />
<MdiCalendar class="mr-2" />
<DateTime :date="e.scheduledDate" format="human" datetime-type="date" />
</div>
<div class="tooltip tooltip-primary" data-tip="Cost">
@ -249,13 +256,13 @@
<div class="flex justify-end p-4 gap-1">
<BaseButton size="sm" @click="openEditDialog(e)">
<template #icon>
<Icon name="mdi-edit" />
<MdiEdit />
</template>
Edit
</BaseButton>
<BaseButton size="sm" @click="deleteEntry(e.id)">
<template #icon>
<Icon name="mdi-delete" />
<MdiDelete />
</template>
Delete
</BaseButton>
@ -267,7 +274,7 @@
class="relative block w-full rounded-lg border-2 border-dashed border-base-content p-12 text-center"
@click="newEntry()"
>
<Icon name="mdi-wrench-clock" class="h-16 w-16"></Icon>
<MdiWrenchClock class="h-16 w-16 inline" />
<span class="mt-2 block text-sm font-medium text-gray-900"> Create Your First Entry </span>
</button>
</div>