Skip to content

Commit c8217f2

Browse files
Git002Git002
committed
UI tweaks and key interactions on input with new component names
1 parent d6b8301 commit c8217f2

File tree

8 files changed

+71
-76
lines changed

8 files changed

+71
-76
lines changed

‎src/lib/PropertyComponents/Selector.svelte

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<script lang="ts">
22
import Dropdown from '../UI/Dropdown.svelte';
33
import ButtonGroup from '../UI/ButtonGroup.svelte';
4-
import Input from '$lib/UI/Input.svelte';
5-
import TagInput from '$lib/UI/TagInput.svelte';
4+
import InputBar from '$lib/UI/InputBar.svelte';
5+
import TagInputBar from '$lib/UI/TagInputBar.svelte';
66
77
// show/hide class & ID input on button click
88
function toggleClassId(e: Event) {
@@ -29,6 +29,6 @@
2929
/>
3030
</div>
3131

32-
<TagInput placeholder={'Add a new class'} id={'class-input'} />
33-
<Input placeholder={'Add a new id'} Class={'id-input hidden'} />
32+
<TagInputBar placeholder={'Add a new class'} id={'class-input'} />
33+
<InputBar placeholder={'Add a new id'} Class={'id-input hidden'} />
3434
</div>

‎src/lib/PropertyComponents/Sizing.svelte

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
<script>
2-
import InputBar from '$lib/UI/InputBar.svelte';
2+
import MiniInputBar from '$lib/UI/MiniInputBar.svelte';
33
import Dropdown from '$lib/UI/Dropdown.svelte';
44
</script>
55

66
<div class="flex flex-col gap-[12px] text-[10px] tracking-wide text-[#b8b6b6]">
77
<div class="grid grid-cols-2 gap-[8px]">
8-
<InputBar FieldName="width" value="100" />
9-
<InputBar FieldName="height" value="80" />
10-
<InputBar FieldName="min w" value="50" />
11-
<InputBar FieldName="min h" value="40" />
12-
<InputBar FieldName="max w" value="150" />
13-
<InputBar FieldName="max h" value="120" />
8+
<MiniInputBar FieldName="width" value="100" />
9+
<MiniInputBar FieldName="height" value="80" />
10+
<MiniInputBar FieldName="min w" value="50" />
11+
<MiniInputBar FieldName="min h" value="40" />
12+
<MiniInputBar FieldName="max w" value="150" />
13+
<MiniInputBar FieldName="max h" value="120" />
1414
</div>
1515

1616
<div class="flex flex-row justify-between items-center gap-[12px]">

‎src/lib/PropertyComponents/Spacing.svelte

+14-42
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,53 @@
1+
<script lang="ts">
2+
import Input from '$lib/UI/Input.svelte';
3+
</script>
4+
15
<div
2-
class="grid grid-cols-4 rounded-[6px] bg-[#404040] text-[12px] px-[8px] py-[6px] border-2 border-[#505050] text-[#b8b6b6] text-center items-center w-full gap-[8px] relative"
6+
class="grid grid-cols-4 rounded-[6px] bg-[#404040] text-[12px] px-[8px] py-[8px] border-2 border-[#505050] text-[#b8b6b6] text-center items-center w-full gap-[8px] relative"
37
>
48
<div
59
class="absolute top-[4px] left-[6px] text-[8px] tracking-wider font-semibold text-[#9a9898] italic"
610
>
711
MARGIN
812
</div>
913
<div class="col-span-6">
10-
<input
11-
class="col-span-6 w-[32px] bg-[#404040] rounded-[2px] focus:outline-none focus:ring-2 focus:ring-[#505050] text-center mt-[2px]"
12-
value="10"
13-
autocomplete="off"
14-
/>
14+
<Input value="10" Class="mt-[2px]" />
1515
</div>
16-
<input
17-
class="w-[32px] bg-[#404040] rounded-[2px] focus:outline-none focus:ring-2 focus:ring-[#505050] text-center mt-[6px]"
18-
value="40"
19-
autocomplete="off"
20-
/>
16+
<Input value="40" Class="mt-[6px]" />
2117

2218
<!-- Padding -->
2319
<div
24-
class="grid grid-cols-3 col-span-4 rounded-[6px] border-[3px] border-[#2e2f31] px-[4px] py-[12px] gap-y-[8px] relative"
20+
class="grid grid-cols-3 col-span-4 rounded-[6px] border-[3px] border-[#2e2f31] px-[4px] py-[10px] gap-y-[8px] relative"
2521
>
2622
<div
2723
class="absolute top-[4px] left-[6px] text-[8px] tracking-wider font-semibold text-[#9a9898] italic"
2824
>
2925
PADDING
3026
</div>
3127
<div class="col-span-3">
32-
<input
33-
class="w-[32px] bg-[#404040] rounded-[2px] focus:outline-none focus:ring-2 focus:ring-[#505050] text-center mt-[6px]"
34-
value="20"
35-
autocomplete="off"
36-
/>
28+
<Input value="20" Class="mt-[6px]" />
3729
</div>
3830
<div>
39-
<input
40-
class="w-[32px] bg-[#404040] rounded-[2px] focus:outline-none focus:ring-2 focus:ring-[#505050] text-center"
41-
value="30"
42-
autocomplete="off"
43-
/>
31+
<Input value="30" />
4432
</div>
4533

4634
<!-- Inner box -->
4735
<div class="flex items-center justify-center">
4836
<div class="bg-[#2e2f31] h-[16px] w-[28px] rounded-[4px]" />
4937
</div>
5038
<div>
51-
<input
52-
class="w-[32px] bg-[#404040] rounded-[2px] focus:outline-none focus:ring-2 focus:ring-[#505050] text-center"
53-
value="50"
54-
autocomplete="off"
55-
/>
39+
<Input value="50" />
5640
</div>
5741
<div class="col-span-3">
58-
<input
59-
class="w-[32px] bg-[#404040] rounded-[2px] focus:outline-none focus:ring-2 focus:ring-[#505050] text-center"
60-
value="70"
61-
autocomplete="off"
62-
/>
42+
<Input value="70" />
6343
</div>
6444
</div>
6545
<div>
66-
<input
67-
class="w-[32px] bg-[#404040] rounded-[2px] focus:outline-none focus:ring-2 focus:ring-[#505050] text-center mt-[6px]"
68-
value="40"
69-
autocomplete="off"
70-
/>
46+
<Input value="40" Class="mt-[6px]" />
7147
</div>
7248
<div />
7349
<div class="col-span-4">
74-
<input
75-
class="w-[32px] bg-[#404040] rounded-[2px] focus:outline-none focus:ring-2 focus:ring-[#505050] text-center my-[2px]"
76-
value="10"
77-
autocomplete="off"
78-
/>
50+
<Input value="10" Class="my-[2px]" />
7951
</div>
8052
<div />
8153
</div>

‎src/lib/UI/Accordion.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
{#each Object.entries(componentsArray) as [key]}
2828
<div
2929
data-accordian-header
30-
class="flex justify-between px-[14px] py-[14px] text-[#d2d2d2] cursor-pointer w-full text-[13px] font-bold text-center tracking-wide"
30+
class="flex justify-between px-[14px] pt-[12px] text-[#d2d2d2] cursor-pointer w-full text-[13px] font-bold text-center tracking-wide pb-[14px]"
3131
>
3232
{key}
3333
<object data="Icons/caret-down.svg" title="" style="pointer-events: none;" />

‎src/lib/UI/Input.svelte

+17-10
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,23 @@
11
<script lang="ts">
2-
export let id: string = '';
2+
export let value: string = '10';
33
export let Class: string = '';
4-
export let show: boolean = true;
5-
export let placeholder: string = 'placeholder';
4+
5+
function incrementDecrementValue(e: KeyboardEvent) {
6+
const input = <HTMLInputElement>e.target;
7+
const inputValue = parseInt(input.value);
8+
9+
if (e.key === 'ArrowUp') {
10+
input.value = String(inputValue + 1);
11+
} else if (e.key === 'ArrowDown') {
12+
input.value = String(inputValue - 1);
13+
}
14+
}
615
</script>
716

817
<input
9-
{id}
10-
class={show
11-
? 'w-full text-[11px] bg-[#404040] font-sans font-semibold placeholder-[#b8b6b6a1] text-[#b8b6b6] border-[2px] border-[#505050] rounded-[5px] px-[10px] py-[7px] outline-none ' +
12-
Class
13-
: 'hidden'}
14-
{placeholder}
15-
spellcheck="false"
18+
class={'w-[32px] bg-[#404040] rounded-[2px] focus:outline-none focus:ring-2 focus:ring-[#505050] text-center ' +
19+
Class}
20+
{value}
21+
autocomplete="off"
22+
on:keydown={incrementDecrementValue}
1623
/>

‎src/lib/UI/InputBar.svelte

+14-12
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
1-
<script>
2-
export let FieldName = 'Input';
3-
export let value = '10';
1+
<script lang="ts">
2+
export let id: string = '';
3+
export let Class: string = '';
4+
export let show: boolean = true;
5+
export let placeholder: string = 'placeholder';
46
</script>
57

6-
<div
7-
class="flex justify-between rounded-[6px] bg-[#404040] p-[8px] gap-[10px] border-2 border-[#505050]"
8-
>
9-
<input
10-
class="w-full text-[11px] bg-[#404040] rounded-[2px] focus:outline-none focus:ring-2 font-semibold focus:ring-[#505050]"
11-
{value}
12-
/>
13-
<div class="flex w-full justify-center items-center font-bold uppercase">{FieldName}</div>
14-
</div>
8+
<input
9+
{id}
10+
class={show
11+
? 'w-full text-[11px] bg-[#404040] font-sans font-semibold placeholder-[#b8b6b6a1] text-[#b8b6b6] border-[2px] border-[#505050] rounded-[5px] px-[10px] py-[7px] outline-none ' +
12+
Class
13+
: 'hidden'}
14+
{placeholder}
15+
spellcheck="false"
16+
/>

‎src/lib/UI/MiniInputBar.svelte

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<script>
2+
export let FieldName = 'Input';
3+
export let value = '10';
4+
</script>
5+
6+
<div
7+
class="flex justify-between rounded-[6px] bg-[#404040] p-[8px] gap-[10px] border-2 border-[#505050]"
8+
>
9+
<input
10+
class="w-full text-[11px] bg-[#404040] rounded-[2px] focus:outline-none focus:ring-2 font-semibold focus:ring-[#505050]"
11+
{value}
12+
/>
13+
<div class="flex w-full justify-center items-center font-bold uppercase">{FieldName}</div>
14+
</div>

‎src/lib/UI/TagInput.svelte renamed to ‎src/lib/UI/TagInputBar.svelte

File renamed without changes.

0 commit comments

Comments
 (0)