dave/clickhouse-agx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui(panel): change icons

Browse Source
This commit is contained in:
Yann Amsellem
2025-01-16 17:37:36 +01:00
parent aeccd1f70b
commit fd9e17d05a
5 changed files with 52 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/lib/icons/CommandLine.svelte
View File

@@ -1,25 +0,0 @@
<script lang="ts">
import type { SvelteHTMLElements } from 'svelte/elements';
interface Props extends Omit<SvelteHTMLElements['svg'], 'width' | 'height'> {
size?: string | number | null;
}
let { size = 24, ...rest }: Props = $props();
</script>
<svg
viewBox="0 0 24 24"
aria-hidden="true"
width={size}
height={size}
{...rest}
data-name="command-line"
>
<path
fill="currentColor"
fill-rule="evenodd"
d="M2.25 6a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V6Zm3.97.97a.75.75 0 0 1 1.06 0l2.25 2.25a.75.75 0 0 1 0 1.06l-2.25 2.25a.75.75 0 0 1-1.06-1.06l1.72-1.72-1.72-1.72a.75.75 0 0 1 0-1.06Zm4.28 4.28a.75.75 0 0 0 0 1.5h3a.75.75 0 0 0 0-1.5h-3Z"
clip-rule="evenodd"
/>
</svg>

16
src/lib/icons/PanelBottom.svelte Normal file
View File

@@ -0,0 +1,16 @@
<script lang="ts">
import type { SvelteHTMLElements } from 'svelte/elements';
interface Props extends Omit<SvelteHTMLElements['svg'], 'width' | 'height'> {
size?: string | number | null;
}
let { size = 24, ...rest }: Props = $props();
</script>
<svg width={size} height={size} viewBox="0 0 20 20" {...rest} data-name="panel-bottom">
<path
fill="currentColor"
d="M2 6a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3zm3-2a2 2 0 0 0-2 2v5h14V6a2 2 0 0 0-2-2z"
/>
</svg>

16
src/lib/icons/PanelLeft.svelte Normal file
View File

@@ -0,0 +1,16 @@
<script lang="ts">
import type { SvelteHTMLElements } from 'svelte/elements';
interface Props extends Omit<SvelteHTMLElements['svg'], 'width' | 'height'> {
size?: string | number | null;
}
let { size = 24, ...rest }: Props = $props();
</script>
<svg width={size} height={size} viewBox="0 0 24 24" {...rest} data-name="panel-left">
<path
d="M4.75 4A2.75 2.75 0 0 0 2 6.75v10.5A2.75 2.75 0 0 0 4.75 20h14.5A2.75 2.75 0 0 0 22 17.25V6.75A2.75 2.75 0 0 0 19.25 4H4.75ZM9 18.5v-13h10.25c.69 0 1.25.56 1.25 1.25v10.5c0 .69-.56 1.25-1.25 1.25H9Z"
fill="currentColor"
/>
</svg>

67
src/lib/icons/TreeView.svelte
View File

@@ -1,67 +0,0 @@
<script lang="ts">
import type { SvelteHTMLElements } from 'svelte/elements';
interface Props extends Omit<SvelteHTMLElements['svg'], 'width' | 'height'> {
size?: string | number | null;
}
let { size = 24, ...rest }: Props = $props();
</script>
<svg width={size} height={size} viewBox="0 0 256 256" {...rest} data-name="tree-view">
<rect
x="56"
y="24"
width="48"
height="48"
rx="8"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
/>
<rect
x="168"
y="96"
width="48"
height="48"
rx="8"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
/>
<rect
x="168"
y="184"
width="48"
height="48"
rx="8"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
/>
<line
x1="80"
y1="120"
x2="168"
y2="120"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
/>
<path
d="M80,72V192a16,16,0,0,0,16,16h72"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
/>
</svg>

39
src/routes/+page.svelte
View File

@@ -10,11 +10,11 @@
import TimeCounter from '$lib/components/TimeCounter.svelte';
import { setAppContext } from '$lib/context';
import Bars3 from '$lib/icons/Bars3.svelte';
import CommandLine from '$lib/icons/CommandLine.svelte';
import PanelBottom from '$lib/icons/PanelBottom.svelte';
import PanelLeft from '$lib/icons/PanelLeft.svelte';
import Play from '$lib/icons/Play.svelte';
import Plus from '$lib/icons/Plus.svelte';
import Save from '$lib/icons/Save.svelte';
import TreeView from '$lib/icons/TreeView.svelte';
import type { Table } from '$lib/olap-engine';
import { engine, type OLAPResponse } from '$lib/olap-engine';
import { PanelState } from '$lib/PanelState.svelte';
@@ -46,7 +46,7 @@
if (response && last?.content !== query) await addHistoryEntry(query);
if (response) dataPanel.open = true;
if (response) bottomPanel.open = true;
}
let tables = $state.raw<Table[]>([]);
@@ -164,7 +164,7 @@
$effect(() => {
if (!isMobile) drawerOpened = false;
else itemPanel.open = false;
else leftPanel.open = false;
});
let tabs = $state<Tab[]>([]);
@@ -206,8 +206,8 @@
$effect(() => void saveTabs($state.snapshot(tabs), selectedTabIndex).catch(console.error));
const dataPanel = new PanelState('65%', false, '100%');
const itemPanel = new PanelState('242px', true);
const bottomPanel = new PanelState('65%', false, '100%');
const leftPanel = new PanelState('242px', true);
</script>
<svelte:window onkeydown={handleKeyDown} bind:innerWidth={screenWidth} />
@@ -236,9 +236,9 @@
{/if}
<SplitPane
type="horizontal"
disabled={!itemPanel.open || isMobile}
bind:pos={itemPanel.position}
min={!itemPanel.open || isMobile ? '0px' : '242px'}
disabled={!leftPanel.open || isMobile}
bind:pos={leftPanel.position}
min={!leftPanel.open || isMobile ? '0px' : '242px'}
max="40%"
>
{#snippet a()}
@@ -250,9 +250,9 @@
<SplitPane
type="vertical"
min="20%"
max={dataPanel.open ? '80%' : '100%'}
bind:pos={dataPanel.position}
disabled={!dataPanel.open}
max={bottomPanel.open ? '80%' : '100%'}
bind:pos={bottomPanel.position}
disabled={!bottomPanel.open}
--color="hsl(0deg 0% 20%)"
>
{#snippet a()}
@@ -308,11 +308,11 @@
{#if !isMobile}
<footer>
<button
class:active={itemPanel.open}
onclick={() => (itemPanel.open = !itemPanel.open)}
class:active={leftPanel.open}
onclick={() => (leftPanel.open = !leftPanel.open)}
style:margin-left="7px"
>
<TreeView size="12" />
<PanelLeft size="12" />
</button>
<div class="spacer"></div>
<TimeCounter bind:this={counter} />
@@ -320,11 +320,11 @@
<span class="label">build-{BUILD}</span>
{/if}
<button
class:active={dataPanel.open}
onclick={() => (dataPanel.open = !dataPanel.open)}
class:active={bottomPanel.open}
onclick={() => (bottomPanel.open = !bottomPanel.open)}
style:margin-right="7px"
>
<CommandLine size="12" />
<PanelBottom size="12" />
</button>
</footer>
{/if}
@@ -450,6 +450,7 @@
gap: 8px;
font-family: monospace;
color: hsl(0deg 0% 70%);
font-size: 9px;
& > .spacer {
flex: 1;
@@ -466,7 +467,7 @@
aspect-ratio: 1;
flex-shrink: 0;
background-color: transparent;
color: hsl(0deg 0% 100%);
color: inherit;
&.active {
color: hsl(204deg 88% 65%);