Skip to content

Commit 33737c9

Browse files
zonbladezonblade
authored
Merge pull request #30 from zonblade/feature/new-ui
Feature/new UI
2 parents 995945d + 71cbf4c commit 33737c9

37 files changed

+986
-936
lines changed

‎router-gui/web-gui/src/app.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,10 @@ html, body {
1616

1717
body {
1818
@apply bg-gray-50 dark:bg-[#0d1117] text-gray-900 dark:text-gray-100;
19+
}
20+
21+
button {
22+
@apply rounded-none hover:cursor-pointer
23+
focus:outline-none focus:ring-0 focus:ring-offset-0
24+
active:outline-none active:ring-0 active:ring-offset-0;
1925
}

‎router-gui/web-gui/src/lib/components/ConnectionsList.svelte‎

Lines changed: 98 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -38,74 +38,22 @@
3838

3939
<div class="h-full flex flex-col">
4040
<div class="flex justify-between items-center mb-4">
41-
<h3 class="text-lg font-medium">Connections</h3>
41+
<h3 class="text-lg font-normal">Connections</h3>
4242
{#if !isAddingConnection}
4343
<button
4444
on:click={() => isAddingConnection = true}
45-
class="px-2 py-1 text-sm bg-[#238636] hover:bg-[#2ea043] text-white rounded"
45+
class="px-2 py-1 text-sm bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-800 dark:text-gray-200"
4646
>
4747
Add New
4848
</button>
4949
{/if}
5050
</div>
5151

52-
{#if isAddingConnection}
53-
<div class="mb-4 p-3 border border-gray-200 dark:border-gray-700 rounded-md">
54-
<h4 class="text-sm font-medium mb-2">New Connection</h4>
55-
<div class="space-y-2">
56-
<div>
57-
<label for="name" class="block text-xs font-medium mb-1">Name</label>
58-
<input
59-
type="text"
60-
id="name"
61-
bind:value={newConnection.name}
62-
class="w-full px-2 py-1 text-sm border border-gray-300 dark:border-gray-700 rounded bg-white dark:bg-[#0d1117] focus:outline-none focus:ring-1 focus:ring-[#1f6feb] focus:border-[#1f6feb]"
63-
placeholder="My Connection"
64-
/>
65-
</div>
66-
<div>
67-
<label for="host" class="block text-xs font-medium mb-1">Host</label>
68-
<input
69-
type="text"
70-
id="host"
71-
bind:value={newConnection.host}
72-
class="w-full px-2 py-1 text-sm border border-gray-300 dark:border-gray-700 rounded bg-white dark:bg-[#0d1117] focus:outline-none focus:ring-1 focus:ring-[#1f6feb] focus:border-[#1f6feb]"
73-
placeholder="localhost"
74-
/>
75-
</div>
76-
<div>
77-
<label for="port" class="block text-xs font-medium mb-1">Port</label>
78-
<input
79-
type="number"
80-
id="port"
81-
bind:value={newConnection.port}
82-
class="w-full px-2 py-1 text-sm border border-gray-300 dark:border-gray-700 rounded bg-white dark:bg-[#0d1117] focus:outline-none focus:ring-1 focus:ring-[#1f6feb] focus:border-[#1f6feb]"
83-
placeholder="8080"
84-
/>
85-
</div>
86-
<div class="flex justify-end space-x-2 mt-3">
87-
<button
88-
on:click={() => isAddingConnection = false}
89-
class="px-2 py-1 text-xs border border-gray-300 dark:border-gray-700 rounded"
90-
>
91-
Cancel
92-
</button>
93-
<button
94-
on:click={handleAddConnection}
95-
class="px-2 py-1 text-xs bg-[#238636] hover:bg-[#2ea043] text-white rounded"
96-
>
97-
Save
98-
</button>
99-
</div>
100-
</div>
101-
</div>
102-
{/if}
103-
10452
<div class="flex-1 overflow-y-auto">
10553
<div class="space-y-2">
10654
{#each $connections as connection}
10755
<div
108-
class="p-3 rounded-md cursor-pointer transition-colors {selectedConnectionId === connection.id ? 'bg-[#1f6feb]/10 border-[#1f6feb] border' : 'hover:bg-gray-100 dark:hover:bg-gray-800 border border-gray-200 dark:border-gray-700'}"
56+
class="p-3 cursor-pointer transition-colors {selectedConnectionId === connection.id ? 'bg-gray-100 dark:bg-gray-800 border-l-2 border-gray-500 dark:border-gray-400' : 'hover:bg-gray-50 dark:hover:bg-gray-900 border-l-2 border-transparent'}"
10957
on:click={() => selectedConnectionId = connection.id}
11058
on:keydown={(e) => e.key === 'Enter' && (selectedConnectionId = connection.id)}
11159
tabindex="0"
@@ -114,13 +62,13 @@
11462
>
11563
<div class="flex justify-between items-start">
11664
<div>
117-
<div class="font-medium">{connection.name}</div>
65+
<div class="font-normal">{connection.name}</div>
11866
<div class="text-sm text-gray-500 dark:text-gray-400">{connection.host}:{connection.port}</div>
11967
</div>
12068
{#if $connections.length > 1}
12169
<button
12270
on:click|stopPropagation={() => handleRemoveConnection(connection.id)}
123-
class="text-gray-500 hover:text-red-500 dark:text-gray-400 dark:hover:text-red-400"
71+
class="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
12472
aria-label="Remove connection {connection.name}"
12573
>
12674
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
@@ -133,4 +81,96 @@
13381
{/each}
13482
</div>
13583
</div>
136-
</div>
84+
85+
<!-- Popup Modal for Adding Connection -->
86+
{#if isAddingConnection}
87+
<div class="fixed inset-0 z-50 flex items-center justify-center">
88+
<!-- Backdrop with blur effect -->
89+
<div
90+
class="absolute inset-0 bg-gray-500/30 dark:bg-gray-900/50 backdrop-blur-sm transition-opacity"
91+
on:click={() => isAddingConnection = false}
92+
on:keydown={(e) => e.key === 'Escape' && (isAddingConnection = false)}
93+
tabindex="-1"
94+
></div>
95+
96+
<!-- Modal Content -->
97+
<div
98+
class="relative bg-white dark:bg-[#1a1a1a] border border-gray-200 dark:border-gray-800 w-full max-w-md p-5 transition-all"
99+
role="dialog"
100+
aria-modal="true"
101+
>
102+
<div class="flex justify-between items-center mb-4">
103+
<h4 class="text-base font-normal">New Connection</h4>
104+
<button
105+
on:click={() => isAddingConnection = false}
106+
class="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
107+
aria-label="Close modal"
108+
>
109+
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
110+
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
111+
</svg>
112+
</button>
113+
</div>
114+
115+
<div class="space-y-4">
116+
<div>
117+
<label for="name" class="block text-sm mb-1">Name</label>
118+
<input
119+
type="text"
120+
id="name"
121+
bind:value={newConnection.name}
122+
class="w-full px-3 py-2 border-b border-gray-300 dark:border-gray-700 bg-transparent focus:outline-none focus:border-gray-500 dark:focus:border-gray-400"
123+
placeholder="My Connection"
124+
/>
125+
</div>
126+
<div>
127+
<label for="host" class="block text-sm mb-1">Host</label>
128+
<input
129+
type="text"
130+
id="host"
131+
bind:value={newConnection.host}
132+
class="w-full px-3 py-2 border-b border-gray-300 dark:border-gray-700 bg-transparent focus:outline-none focus:border-gray-500 dark:focus:border-gray-400"
133+
placeholder="localhost"
134+
/>
135+
</div>
136+
<div>
137+
<label for="port" class="block text-sm mb-1">Port</label>
138+
<input
139+
type="number"
140+
id="port"
141+
bind:value={newConnection.port}
142+
class="w-full px-3 py-2 border-b border-gray-300 dark:border-gray-700 bg-transparent focus:outline-none focus:border-gray-500 dark:focus:border-gray-400"
143+
placeholder="8080"
144+
/>
145+
</div>
146+
<div class="flex justify-end space-x-3 mt-6">
147+
<button
148+
on:click={() => isAddingConnection = false}
149+
class="px-3 py-2 text-sm text-gray-600 dark:text-gray-400"
150+
>
151+
Cancel
152+
</button>
153+
<button
154+
on:click={handleAddConnection}
155+
class="px-3 py-2 text-sm bg-gray-800 hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600 text-white"
156+
>
157+
Save
158+
</button>
159+
</div>
160+
</div>
161+
</div>
162+
</div>
163+
{/if}
164+
</div>
165+
166+
<style>
167+
/* Animation for modal fade-in */
168+
.fixed {
169+
animation: fadeIn 0.2s ease-out;
170+
}
171+
172+
@keyframes fadeIn {
173+
from { opacity: 0; }
174+
to { opacity: 1; }
175+
}
176+
</style>

0 commit comments

Comments
 (0)