mirror of
https://github.com/seanmorley15/AdventureLog.git
synced 2025-08-04 20:55:19 +02:00
feat: update button styles and add back and close functionality in location components
This commit is contained in:
parent
707c99651f
commit
7f5b969dbf
5 changed files with 28 additions and 4 deletions
|
@ -283,6 +283,7 @@
|
|||
steps[3].selected = false;
|
||||
steps[2].selected = true;
|
||||
}}
|
||||
on:close={() => close()}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
@ -777,7 +777,7 @@
|
|||
|
||||
<!-- Action Buttons -->
|
||||
<div class="flex gap-3 justify-end pt-4">
|
||||
<button class="btn btn-ghost gap-2" on:click={handleBack}>
|
||||
<button class="btn btn-neutral-200 gap-2" on:click={handleBack}>
|
||||
<ArrowLeftIcon class="w-5 h-5" />
|
||||
Back
|
||||
</button>
|
||||
|
|
|
@ -746,8 +746,8 @@
|
|||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="flex gap-3 justify-between pt-4">
|
||||
<button class="btn btn-ghost gap-2" on:click={handleBack}>
|
||||
<div class="flex gap-3 justify-end pt-4">
|
||||
<button class="btn btn-neutral-200 gap-2" on:click={handleBack}>
|
||||
<ArrowLeftIcon class="w-5 h-5" />
|
||||
Back
|
||||
</button>
|
||||
|
|
|
@ -447,7 +447,7 @@
|
|||
|
||||
<!-- Action Buttons -->
|
||||
<div class="flex gap-3 pt-4">
|
||||
<button class="btn btn-ghost flex-1" on:click={() => dispatch('cancel')}>
|
||||
<button class="btn btn-neutral-200 flex-1" on:click={() => dispatch('cancel')}>
|
||||
{$t('common.cancel') || 'Cancel'}
|
||||
</button>
|
||||
<button class="btn btn-primary flex-1" on:click={continueWithLocation}>
|
||||
|
|
|
@ -5,6 +5,7 @@
|
|||
import { updateLocalDate, updateUTCDate, validateDateRange, formatUTCDate } from '$lib/dateUtils';
|
||||
import { onMount } from 'svelte';
|
||||
import { isAllDay } from '$lib';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
// Icons
|
||||
import CalendarIcon from '~icons/mdi/calendar';
|
||||
|
@ -16,6 +17,7 @@
|
|||
import AlertIcon from '~icons/mdi/alert';
|
||||
import CheckIcon from '~icons/mdi/check';
|
||||
import SettingsIcon from '~icons/mdi/cog';
|
||||
import ArrowLeftIcon from '~icons/mdi/arrow-left';
|
||||
|
||||
// Props
|
||||
export let collection: Collection | null = null;
|
||||
|
@ -28,6 +30,8 @@
|
|||
export let visits: (Visit | TransportationVisit)[] | null = null;
|
||||
export let objectId: string;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
// Types
|
||||
type Visit = {
|
||||
id: string;
|
||||
|
@ -316,6 +320,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
function handleBack() {
|
||||
dispatch('back');
|
||||
}
|
||||
|
||||
function handleClose() {
|
||||
dispatch('close');
|
||||
}
|
||||
|
||||
// Lifecycle
|
||||
onMount(async () => {
|
||||
if ((type === 'transportation' || type === 'lodging') && utcStartDate) {
|
||||
|
@ -598,5 +610,16 @@
|
|||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
<div class="flex gap-3 justify-end pt-4">
|
||||
<button class="btn btn-neutral-200 gap-2" on:click={handleBack}>
|
||||
<ArrowLeftIcon class="w-5 h-5" />
|
||||
Back
|
||||
</button>
|
||||
|
||||
<button class="btn btn-primary gap-2" on:click={handleClose}>
|
||||
<CheckIcon class="w-5 h-5" />
|
||||
Done
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue