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