chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

fix(01): dialog drawer form

Browse source
This commit is contained in:
puriphatt 2024-08-02 03:52:56 +00:00
parent ef9aeb930a
commit 073635c95b
5 changed files with 227 additions and 105 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/components/01_branch-management/FormQr.vue
View file

@ -35,7 +35,7 @@ defineEmits<{
}"
class="col-12 row branch-form-show-qr-code"
>
<div class="col-12 flex flex-center q-py-md">
<div class="col-12 column flex-center q-py-md">
<q-img
v-if="qr"
:src="qr as string"
@ -52,18 +52,17 @@ defineEmits<{
</q-img>
<q-btn
@click="$emit('upload')"
class="branch-form-btn-qr-code"
:class="{ 'dark-form-btn-qr-code': $q.dark.isActive }"
v-else
@click="$emit('upload')"
class="branch-form-btn-qr-code q-mb-md"
:class="{ 'dark-form-btn-qr-code': $q.dark.isActive }"
unelevated
:color="$q.dark.isActive ? 'black' : 'grey-2'"
:text-color="$q.dark.isActive ? 'white' : 'grey-5'"
>
<Icon icon="teenyicons:add-outline" width="30px" height="50px" />
</q-btn>
</div>
<div class="col-12 flex flex-center q-pb-md">
<q-btn
v-if="!readonly"
:text-color="$q.dark.isActive ? 'black' : 'white'"

30
src/components/02_personnel-management/InfoForm.vue
View file

@ -51,26 +51,20 @@ const employeeTab = defineModel<string>('employeeTab');
</q-tabs>
</div>
<div
class="col full-height q-pa-md full-width"
:class="{ row: $q.screen.gt.sm, column: $q.screen.lt.md }"
>
<div class="col-md-2 q-mr-md" v-if="$slots['person-card']">
<slot name="person-card"></slot>
<div class="row col full-width scroll">
<!-- prepend -->
<div class="col" v-if="$slots.prepend">
<slot name="prepend"></slot>
</div>
<div
class="rounded scroll full-height col full-width"
:class="{
'q-mt-md': $q.screen.lt.md,
}"
>
<div
class="row q-col-gutter-y-md surface-1 rounded bordered"
:class="{ 'q-pa-md': !noPaddingTab }"
>
<slot></slot>
</div>
<!-- center -->
<div class="col column full-height">
<slot></slot>
</div>
<!-- append -->
<div class="col" v-if="$slots.append">
<slot name="append"></slot>
</div>
</div>
</div>

14
src/components/ImageUploadDialog.vue
View file

@ -24,7 +24,7 @@ const file = defineModel<File | null>('file', {
required: true,
});
defineEmits<{
(e: 'save', v: File | null): void;
(e: 'save', file: File | null, url: string | null): void;
}>();
const reader = new FileReader();
@ -131,7 +131,7 @@ function change(e: Event) {
type="submit"
color="primary"
class="q-px-md"
@click="$emit('save', inputFile?.files?.[0] || null)"
@click="$emit('save', inputFile?.files?.[0] || null, imageUrl)"
:label="$t('save')"
/>
</div>
@ -190,4 +190,14 @@ function change(e: Event) {
.image-container > :deep(*:not(:first-child)) {
display: none;
}
.close-btn {
color: hsl(var(--negative-bg));
background-color: hsla(var(--negative-bg) / 0.1);
&.dark {
background-color: transparent;
border: 1px solid hsl(var(--negative-bg));
}
}
</style>

12
src/components/ProfileBanner.vue
View file

@ -4,11 +4,11 @@ import { ref } from 'vue';
defineProps<{
icon?: string;
color?: string;
img?: string;
img?: string | null;
bgColor?: string;
title?: string;
caption?: string;
cover?: string;
cover?: string | null;
hideFade?: boolean;
active?: boolean;
@ -40,7 +40,11 @@ const showOverlay = ref(false);
<div class="absolute-top flex items-center full-height q-pl-lg">
<div
class="surface-1"
style="border-radius: 50%; border: 4px solid var(--surface-1)"
style="
border-radius: 50%;
border: 4px solid var(--surface-1);
overflow: hidden;
"
>
<div
class="avatar__status"
@ -51,7 +55,7 @@ const showOverlay = ref(false);
size="6rem"
font-size="3rem"
class="cursor-pointer"
style="z-index: 1; overflow: hidden"
style="z-index: 1"
:style="`background-color: ${img ? 'white' : bgColor || 'var(--brand-1)'}; color: ${color || 'white'}`"
@mouseover="showOverlay = true"
@mouseleave="showOverlay = false"