spy4x/gb-lux
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ui: add buttons to the map draw

Browse Source
This commit is contained in:
Anton Shubin 2024-01-30 21:23:03 +08:00
parent 08ff0f1909
commit a9cc044eb3
9 changed files with 111 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps/front/src/app.css
View File

@ -4,7 +4,10 @@
@layer components {
.btn {
@apply flex items-center gap-2 rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2;
@apply cursor-pointer flex items-center gap-2
rounded-md px-3 py-2
text-sm font-semibold text-white shadow-sm
focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2;
}
.btn-primary {

14
apps/front/src/lib/client/components/icons/arrowUturnLeft.svelte Normal file
View File

@ -0,0 +1,14 @@
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="shrink-0 {$$props.size ? `size-${$$props.size}` : 'size-6'} {$$props.class || ''}"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 329 B

14
apps/front/src/lib/client/components/icons/arrowUturnRight.svelte Normal file
View File

@ -0,0 +1,14 @@
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="shrink-0 {$$props.size ? `size-${$$props.size}` : 'size-6'} {$$props.class || ''}"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m15 15 6-6m0 0-6-6m6 6H9a6 6 0 0 0 0 12h3"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 328 B

10
apps/front/src/lib/client/components/icons/check.svelte Normal file
View File

@ -0,0 +1,10 @@
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="shrink-0 {$$props.size ? `size-${$$props.size}` : 'size-6'} {$$props.class || ''}"
>
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 301 B

14
apps/front/src/lib/client/components/icons/cursorArrowRays.svelte Normal file
View File

@ -0,0 +1,14 @@
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="shrink-0 {$$props.size ? `size-${$$props.size}` : 'size-6'} {$$props.class || ''}"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.042 21.672 13.684 16.6m0 0-2.51 2.225.569-9.47 5.227 7.917-3.286-.672ZM12 2.25V4.5m5.834.166-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243-1.59-1.59"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 467 B

5
apps/front/src/lib/client/components/icons/index.ts
View File

@ -1,11 +1,16 @@
export { default as IconArrowUturnLeft } from './arrowUturnLeft.svelte';
export { default as IconArrowUturnRight } from './arrowUturnRight.svelte';
export { default as IconBell } from './bell.svelte';
export { default as IconBuildingOffice2 } from './buildingOffice2.svelte';
export { default as IconBulb } from './bulb.svelte';
export { default as IconChartPie } from './chartPie.svelte';
export { default as IconCheck } from './check.svelte';
export { default as IconCog6Tooth } from './cog6tooth.svelte';
export { default as IconCpuChip } from './cpuChip.svelte';
export { default as IconCursorArrowRays } from './cursorArrowRays.svelte';
export { default as IconExclamationTriangle } from './exclamationTriangle.svelte';
export { default as IconHome } from './home.svelte';
export { default as IconMap } from './map.svelte';
export { default as IconUser } from './user.svelte';
export { default as IconUsers } from './users.svelte';
export { default as IconXMark } from './xMark.svelte';

10
apps/front/src/lib/client/components/icons/xMark.svelte Normal file
View File

@ -0,0 +1,10 @@
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="shrink-0 {$$props.size ? `size-${$$props.size}` : 'size-6'} {$$props.class || ''}"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 300 B

4
apps/front/src/routes/+page.svelte
View File

@ -109,7 +109,7 @@
<span
class="relative size-6 flex items-center justify-center text-white bg-green-600 rounded-full"
>
<IconBulb size="4" />
<IconBulb class="size-4" />
<span
class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"
></span>
@ -119,7 +119,7 @@
<span
class="relative size-6 flex items-center justify-center text-white bg-red-600 rounded-full"
>
<IconBulb size="4" />
<IconBulb class="size-4" />
<span
class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"
></span>

39
apps/front/src/routes/map/+page.svelte
View File

@ -1,11 +1,48 @@
<script lang="ts">
import Map from '$lib/client/components/map.svelte';
import Table from '$lib/client/components/table.svelte';
import {
IconArrowUturnLeft,
IconArrowUturnRight,
IconCheck,
IconCursorArrowRays,
IconXMark
} from '../../lib/client/components/icons';
</script>
<section class="space-y-4 lg:space-y-8">
<div class="relative overflow-hidden rounded-xl border border-gray-200 bg-white">
<div class="flex relative overflow-hidden rounded-xl border border-gray-200 bg-white">
<Map />
<div class="top-2 absolute bg-white block right-2 rounded-xl shadow z-10">
<div class="flex flex-col gap-4 p-2">
<div class="flex flex-col gap-0.5">
<button type="button" class="btn btn-primary">
<IconArrowUturnLeft />
</button>
<button type="button" class="btn btn-primary"><IconArrowUturnRight /></button>
</div>
<button type="button" class="btn btn-primary"><IconCursorArrowRays /></button>
<div class="flex-col gap-0.5 hidden">
<button type="button" class="btn btn-primary"><IconCheck /></button>
<button type="button" class="btn btn-primary">
<IconXMark />
</button>
</div>
<div class="flex flex-col gap-0.5">
<button type="button" class="btn btn-primary">
<span class="size-6 border-2 border-white rounded block"></span>
</button>
<button type="button" class="btn btn-primary">
<span class="size-6 border-2 border-white rounded-full block"></span>
</button>
</div>
</div>
</div>
</div>
<div class="mx-auto max-w-6xl">
<div class="flex flex-col">