Skip to content

Commit 5f84c2a

Browse files
manuel3108manuel3108
committed
make the toolbar nicer
1 parent fc5427d commit 5f84c2a

File tree

3 files changed

+118
-81
lines changed

3 files changed

+118
-81
lines changed

‎packages/svelte/src/toolbar/Icon.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!-- Grabbed from https://github.com/sveltejs/branding/blob/master/svelte-logo.svg -->
22
<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"
3-
><title>svelte-logo</title><path
3+
><title>svelte-inspector</title><path
44
d="M94.1566,22.8189c-10.4-14.8851-30.94-19.2971-45.7914-9.8348L22.2825,29.6078A29.9234,29.9234,0,0,0,8.7639,49.6506a31.5136,31.5136,0,0,0,3.1076,20.2318A30.0061,30.0061,0,0,0,7.3953,81.0653a31.8886,31.8886,0,0,0,5.4473,24.1157c10.4022,14.8865,30.9423,19.2966,45.7914,9.8348L84.7167,98.3921A29.9177,29.9177,0,0,0,98.2353,78.3493,31.5263,31.5263,0,0,0,95.13,58.117a30,30,0,0,0,4.4743-11.1824,31.88,31.88,0,0,0-5.4473-24.1157"
55
style="fill:#ff3e00"
66
/><path

‎packages/svelte/src/toolbar/ToolBar.svelte‎

Lines changed: 109 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
/** @type import('./public.d.ts').ResolvedConfig */
88
config
99
} = $props();
10-
let open = $state(true); // todo change this to false
10+
let open = $state(false); // Default to closed
1111
1212
/** @type {SvelteMap<string, Record<string, any>>} */
1313
let active_tools = $state(new SvelteMap());
@@ -20,6 +20,8 @@
2020
let dragOffsetY = 0;
2121
2222
onMount(() => {
23+
toolbar.style.right = '20px';
24+
toolbar.style.bottom = '20px';
2325
recalculate_toolbar_panel_position();
2426
});
2527
@@ -33,14 +35,17 @@
3335
if (tool.component) mounted_component = mountTool(tool.component, tool.name, { tool });
3436
3537
active_tools.set(tool.name, mounted_component);
36-
tool.activate();
38+
if (tool.activate) tool.activate();
3739
} else {
3840
const mounted_component = active_tools.get(tool.name);
3941
if (tool.component && mounted_component) unmountTool(mounted_component, tool.name);
4042
41-
tool.deactivate();
43+
if (tool.deactivate) tool.deactivate();
4244
active_tools.delete(tool.name);
4345
}
46+
47+
if (active_tools.size === 0) toolbarPanels.style.display = 'none';
48+
else toolbarPanels.style.display = 'block';
4449
}
4550
4651
/**
@@ -99,24 +104,21 @@
99104
100105
async function toggle_toolbar() {
101106
open = !open;
102-
103-
// need to wait here, so that the toolbar can close first
104107
await tick();
105-
106108
recalculate_toolbar_panel_position();
107109
}
108110
109111
function recalculate_toolbar_panel_position() {
110112
const rect = toolbar.getBoundingClientRect();
111113
toolbarPanels.style.right = toolbar.style.right;
112-
toolbarPanels.style.bottom = parseFloat(toolbar.style.bottom ?? 0) + rect.height + 'px';
114+
toolbarPanels.style.bottom = parseFloat(toolbar.style.bottom ?? 0) + rect.height + 10 + 'px'; // Add a small gap
113115
}
114116
</script>
115117
116118
<svelte:window onresize={recalculate_toolbar_panel_position} />
117119
118120
<div
119-
class="toolbar"
121+
class="svelte-toolbar"
120122
bind:this={toolbar}
121123
draggable="true"
122124
ondrag={drag}
@@ -125,7 +127,7 @@
125127
tabindex="-1"
126128
>
127129
{#if open}
128-
<ul class="tools">
130+
<ul class="svelte-toolbar-tools">
129131
{#each config.tools as tool}
130132
<li class:active={active_tools.has(tool.name)}>
131133
<button onclick={() => toggle_tool(tool)} aria-label={tool.name}>{@html tool.icon}</button
@@ -134,72 +136,133 @@
134136
{/each}
135137
</ul>
136138
{/if}
137-
<button type="button" class="toolbar-selector" onclick={toggle_toolbar}>
139+
<button type="button" class="svelte-toolbar-selector" onclick={toggle_toolbar}>
138140
<Icon />
139141
</button>
140142
</div>
141-
<div class="toolbar-panels" bind:this={toolbarPanels}></div>
143+
<div class="svelte-toolbar-panels" bind:this={toolbarPanels}></div>
142144
143145
<style>
144-
.toolbar-selector {
146+
.svelte-toolbar {
147+
display: inline-flex;
148+
background-color: var(--toolbar-background);
149+
color: var(--toolbar-color);
150+
position: fixed;
151+
z-index: 1000;
152+
border-radius: 8px;
153+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
154+
padding: 8px;
155+
}
156+
157+
.svelte-toolbar-selector {
145158
cursor: pointer;
159+
background: none;
160+
border: none;
161+
padding: 8px;
162+
border-radius: 6px;
163+
transition: background-color 0.2s ease-in-out;
146164
}
147165
148-
.toolbar-selector :global(svg) {
149-
width: 50px;
150-
height: 50px;
166+
.svelte-toolbar-selector:hover {
167+
background-color: var(--toolbar-selector-hover-background);
151168
}
152169
153-
.tools {
170+
.svelte-toolbar-selector :global(svg) {
171+
width: 24px;
172+
height: 24px;
173+
fill: var(--toolbar-icon-color);
174+
}
175+
176+
.svelte-toolbar-tools {
154177
list-style: none;
155178
margin: 0;
156179
padding: 0;
157180
display: flex;
158181
align-items: center;
159182
}
160183
161-
.tools li {
184+
.svelte-toolbar-tools li {
162185
display: inline-block;
163-
background-color: #444;
164-
border: #111 1px solid;
165-
border-radius: 50%;
166-
margin: 0 10px;
167-
height: 50px;
168-
width: 50px;
169-
}
170-
171-
.tools li.active {
172-
border-color: #ff3e00;
186+
margin: 0 4px;
173187
}
174188
175-
.tools li button {
176-
padding: 0;
189+
.svelte-toolbar-tools li button {
190+
padding: 8px;
177191
display: flex;
178192
align-items: center;
179193
justify-content: center;
180-
width: 100%;
181-
height: 100%;
194+
width: 36px;
195+
height: 36px;
196+
border-radius: 50%;
197+
border: none;
198+
background-color: var(--tool-button-background);
199+
color: var(--tool-button-color);
200+
cursor: pointer;
201+
transition:
202+
background-color 0.2s ease-in-out,
203+
border-color 0.2s ease-in-out;
182204
}
183205
184-
.tools li button :global(svg) {
185-
height: 30px;
186-
width: 30px;
206+
.svelte-toolbar-tools li button:hover {
207+
background-color: var(--tool-button-hover-background);
187208
}
188209
189-
.toolbar {
190-
display: inline-flex;
191-
background-color: #666; /* TODO: consider dark / light mode */
192-
color: white;
193-
position: fixed;
194-
right: 0;
195-
bottom: 0;
210+
.svelte-toolbar-tools li.active button {
211+
border: 2px solid var(--accent-color);
212+
}
213+
214+
.svelte-toolbar-tools li :global(svg) {
215+
filter: grayscale(100%);
216+
}
217+
218+
.svelte-toolbar-tools li.active :global(svg) {
219+
filter: unset;
220+
}
221+
222+
.svelte-toolbar-tools li button :global(svg) {
223+
height: 20px;
224+
width: 20px;
225+
fill: var(--tool-icon-color);
196226
}
197227
198-
.toolbar-panels {
228+
.svelte-toolbar-panels {
199229
position: fixed;
200-
background-color: #999;
201-
right: 0;
202-
bottom: 0;
203-
display: flex;
230+
z-index: 999;
231+
background-color: var(--panel-background);
232+
border-radius: 8px;
233+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
234+
padding: 16px;
235+
display: none;
236+
flex-direction: column;
237+
gap: 8px;
238+
color: var(--toolbar-color);
239+
}
240+
241+
:root {
242+
--toolbar-background: #f0f0f0;
243+
--toolbar-color: #222;
244+
--toolbar-selector-hover-background: #e0e0e0;
245+
--toolbar-icon-color: #333;
246+
--tool-button-background: #fff;
247+
--tool-button-color: #333;
248+
--tool-button-hover-background: #eee;
249+
--tool-icon-color: #333;
250+
--accent-color: #ff3e00;
251+
--panel-background: #fff;
252+
}
253+
254+
@media (prefers-color-scheme: dark) {
255+
:root {
256+
--toolbar-background: #1e1e27;
257+
--toolbar-color: white;
258+
--toolbar-selector-hover-background: #333344;
259+
--toolbar-icon-color: #d4d4d8;
260+
--tool-button-background: #333344;
261+
--tool-button-color: #d4d4d8;
262+
--tool-button-hover-background: #444;
263+
--tool-icon-color: #d4d4d8;
264+
--accent-color: #ff3e00;
265+
--panel-background: #252531;
266+
}
204267
}
205268
</style>

‎packages/svelte/src/toolbar/tools/config/Config.svelte‎

Lines changed: 8 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -10,39 +10,13 @@
1010
</select>
1111
</label>
1212
</div>
13-
<div>
14-
<label for="position"
15-
>Position
1613

17-
<select id="position">
18-
<option value="top-left">top left</option>
19-
<option value="top-left">top right</option>
20-
<option value="top-left">bottom right</option>
21-
<option value="top-left">bottom left</option>
22-
</select>
23-
</label>
24-
</div>
25-
<div>
26-
<label for="position"
27-
>Position
28-
29-
<select id="position">
30-
<option value="top-left">top left</option>
31-
<option value="top-left">top right</option>
32-
<option value="top-left">bottom right</option>
33-
<option value="top-left">bottom left</option>
34-
</select>
35-
</label>
36-
</div>
37-
<div>
38-
<label for="position"
39-
>Position
14+
<style>
15+
select option {
16+
color: black;
17+
}
4018
41-
<select id="position">
42-
<option value="top-left">top left</option>
43-
<option value="top-left">top right</option>
44-
<option value="top-left">bottom right</option>
45-
<option value="top-left">bottom left</option>
46-
</select>
47-
</label>
48-
</div>
19+
select:not(:checked) {
20+
color: var(--toolbar-color);
21+
}
22+
</style>

0 commit comments

Comments
 (0)