feat: text-color

This commit is contained in:
Artemy Egorov 2024-07-31 14:03:32 +03:00
parent 9c8437851d
commit a23bead7d8
13 changed files with 373 additions and 220 deletions

View file

@ -58,7 +58,7 @@ jobs:
TAURI_KEY_PASSWORD: "" TAURI_KEY_PASSWORD: ""
with: with:
tagName: v__VERSION__ # the action automatically replaces \_\_VERSION\_\_ with the app version. tagName: v__VERSION__ # the action automatically replaces \_\_VERSION\_\_ with the app version.
releaseName: "Vigi v__VERSION__" releaseName: "vigi v__VERSION__"
releaseBody: "See the assets to download this version and install." releaseBody: "See the assets to download this version and install."
releaseDraft: true releaseDraft: true
prerelease: false prerelease: false

View file

@ -1,7 +0,0 @@
{
"recommendations": [
"svelte.svelte-vscode",
"tauri-apps.tauri-vscode",
"rust-lang.rust-analyzer"
]
}

View file

@ -1,3 +0,0 @@
{
"svelte.enable-ts-plugin": true
}

View file

@ -140,7 +140,7 @@ impl VigiState {
)], )],
) )
} else { } else {
todo!(); Err(VigiError::Parse)?
} }
}; };

View file

@ -2,14 +2,99 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
:root { /* Theme */
--min: #96e28a;
--max: #193815;
:root {
/* Theme Colors */
/* Green */
--min-bg: #96e28a;
--max-bg: #193815;
--max-text: #bef5b5;
--min-text: #fff;
/* Dark */
/* --min: #818181;
--max: #000; */
/* Blue */
/* --min: #8a9fe2; /* --min: #8a9fe2;
--max: #151a38; */ --max: #151a38; */
/* Red */
/* --min: #e28a8a;
--max: #641515; */
/* End Theme Colors */
} }
/* Theme Classes */
.color-vigi-0 {
@apply text-vigi-0 bg-vigi-0;
}
.color-vigi-5 {
@apply text-vigi-5 bg-vigi-5;
}
.color-vigi-10 {
@apply text-vigi-10 bg-vigi-10;
}
.color-vigi-15 {
@apply text-vigi-15 bg-vigi-15;
}
.color-vigi-20 {
@apply text-vigi-20 bg-vigi-20;
}
.color-vigi-25 {
@apply text-vigi-25 bg-vigi-25;
}
.color-vigi-30 {
@apply text-vigi-30 bg-vigi-30;
}
.color-vigi-35 {
@apply text-vigi-35 bg-vigi-35;
}
.color-vigi-40 {
@apply text-vigi-40 bg-vigi-40;
}
.color-vigi-45 {
@apply text-vigi-45 bg-vigi-45;
}
.color-vigi-50 {
@apply text-vigi-50 bg-vigi-50;
}
.color-vigi-55 {
@apply text-vigi-55 bg-vigi-55;
}
.color-vigi-60 {
@apply text-vigi-60 bg-vigi-60;
}
.color-vigi-65 {
@apply text-vigi-65 bg-vigi-65;
}
.color-vigi-70 {
@apply text-vigi-70 bg-vigi-70;
}
.color-vigi-75 {
@apply text-vigi-75 bg-vigi-75;
}
.color-vigi-80 {
@apply text-vigi-80 bg-vigi-80;
}
.color-vigi-85 {
@apply text-vigi-85 bg-vigi-85;
}
.color-vigi-90 {
@apply text-vigi-90 bg-vigi-90;
}
.color-vigi-95 {
@apply text-vigi-95 bg-vigi-95;
}
.color-vigi-100 {
@apply text-vigi-100 bg-vigi-100;
}
/* End Theme Classes */
/* End theme */
/* Components */
body { body {
@apply bg-vigi-90 text-vigi-10 cursor-default; @apply bg-vigi-90 text-vigi-10 cursor-default;
user-select: none; user-select: none;
@ -31,7 +116,7 @@ body {
} }
.browser-window { .browser-window {
@apply grow shadow-inner overflow-auto select-text cursor-auto; @apply grow overflow-auto select-text cursor-auto;
} }
.window-controls { .window-controls {
@ -58,13 +143,14 @@ body {
.sidebar { .sidebar {
@apply shrink-0 grow-0 flex flex-col w-1/5; @apply shrink-0 grow-0 flex flex-col w-1/5;
@apply ease-out duration-100; @apply ease-out duration-300;
} }
.sidebar.collapsed { .sidebar.collapsed {
@apply basis-0; @apply basis-0;
@apply p-0 m-0 bg-transparent; @apply p-0 m-0;
@apply overflow-hidden;
} }
.top-bar { .top-bar {
@ -85,7 +171,7 @@ input::placeholder {
} }
.tabs { .tabs {
@apply flex flex-col gap-1 mt-2 grow overflow-auto; @apply flex flex-col-reverse gap-1 mt-2 grow overflow-auto justify-end;
} }
.tab { .tab {

View file

@ -30,7 +30,6 @@
</script> </script>
<Block className="browser-window"> <Block className="browser-window">
<div>
{#if loading} {#if loading}
<div transition:slide> <div transition:slide>
<GooLoadSpin /> <GooLoadSpin />
@ -38,5 +37,4 @@
{/if} {/if}
<Renderer {data} /> <Renderer {data} />
</div>
</Block> </Block>

View file

@ -14,7 +14,7 @@
let currentTabIndex = 0; let currentTabIndex = 0;
state.subscribe(async (state) => { state.subscribe(async (state) => {
tabs = state.tabs.toReversed(); tabs = state.tabs;
currentTabIndex = state.current_tab_index; currentTabIndex = state.current_tab_index;
if (tabs.length === 0) { if (tabs.length === 0) {
@ -36,11 +36,7 @@
<div class="tabs"> <div class="tabs">
{#each tabs as tab, i (tab.id)} {#each tabs as tab, i (tab.id)}
<Tab <Tab {tab} active={currentTabIndex === i} index={i} />
{tab}
active={currentTabIndex === tabs.length - 1 - i}
id={tabs.length - 1 - i}
/>
{/each} {/each}
</div> </div>
{/if} {/if}

View file

@ -9,7 +9,7 @@
export let active = false; export let active = false;
export let tab: StateTab; export let tab: StateTab;
export let id: number; export let index: number;
let tabElement: HTMLButtonElement; let tabElement: HTMLButtonElement;
@ -26,13 +26,13 @@
on:mouseenter={() => (hovered = true)} on:mouseenter={() => (hovered = true)}
on:mouseleave={() => (hovered = false)} on:mouseleave={() => (hovered = false)}
role="tab" role="tab"
tabindex={id} tabindex={index}
> >
{#if hovered} {#if hovered}
<button <button
class="close-button" class="close-button"
transition:slide={{ duration: 100, axis: "x" }} transition:slide={{ duration: 100, axis: "x" }}
on:click={() => removeTab(id)} on:click={() => removeTab(index)}
> >
<Close /> <Close />
</button> </button>
@ -45,7 +45,7 @@
bind:this={tabElement} bind:this={tabElement}
on:click={() => { on:click={() => {
if (!active) { if (!active) {
selectTab(id); selectTab(index);
} }
}} }}
> >

View file

@ -48,6 +48,7 @@
on:keypress={(e) => { on:keypress={(e) => {
if (e.key === "Enter") { if (e.key === "Enter") {
updateInput(currentInput); updateInput(currentInput);
iEl.blur();
} }
}} }}
on:focus={() => { on:focus={() => {

View file

@ -7,7 +7,7 @@ export async function updateVigiState() {
let st = await invoke("get_js_state"); let st = await invoke("get_js_state");
state.set(st as VigiState); state.set(st as VigiState);
} catch (e) { } catch (e) {
console.log(e); writeError(e);
} }
} }
@ -16,10 +16,10 @@ export async function updateInput(input: string) {
try { try {
await invoke("update_input", { input }); await invoke("update_input", { input });
} catch (e) {
console.log(e);
} finally {
await updateVigiState(); await updateVigiState();
} catch (e) {
writeError(e, input);
} finally {
isLoading.set(false); isLoading.set(false);
} }
} }
@ -45,8 +45,22 @@ export async function removeTab(index: number) {
export async function loadTab() { export async function loadTab() {
isLoading.set(true); isLoading.set(true);
try {
await invoke("load_tab"); await invoke("load_tab");
await updateVigiState(); await updateVigiState();
} catch (e) {
writeError(e);
} finally {
isLoading.set(false); isLoading.set(false);
} }
}
function writeError(e: unknown, input?: string) {
state.update((st) => {
st.current_data = [{ id: 0, body: `Error: ${e}`, argument: null }];
if (input) st.top_bar_input = input;
return st;
});
}

View file

@ -27,7 +27,7 @@
) { ) {
return; return;
} }
if (e.key === "q") sidebarOpen = !sidebarOpen; if (e.code === "KeyQ") sidebarOpen = !sidebarOpen;
}); });
</script> </script>

63
src/theme-classes.css Normal file
View file

@ -0,0 +1,63 @@
.color-vigi-0 {
@apply text-vigi-0 bg-vigi-0;
}
.color-vigi-5 {
@apply text-vigi-5 bg-vigi-5;
}
.color-vigi-10 {
@apply text-vigi-10 bg-vigi-10;
}
.color-vigi-15 {
@apply text-vigi-15 bg-vigi-15;
}
.color-vigi-20 {
@apply text-vigi-20 bg-vigi-20;
}
.color-vigi-25 {
@apply text-vigi-25 bg-vigi-25;
}
.color-vigi-30 {
@apply text-vigi-30 bg-vigi-30;
}
.color-vigi-35 {
@apply text-vigi-35 bg-vigi-35;
}
.color-vigi-40 {
@apply text-vigi-40 bg-vigi-40;
}
.color-vigi-45 {
@apply text-vigi-45 bg-vigi-45;
}
.color-vigi-50 {
@apply text-vigi-50 bg-vigi-50;
}
.color-vigi-55 {
@apply text-vigi-55 bg-vigi-55;
}
.color-vigi-60 {
@apply text-vigi-60 bg-vigi-60;
}
.color-vigi-65 {
@apply text-vigi-65 bg-vigi-65;
}
.color-vigi-70 {
@apply text-vigi-70 bg-vigi-70;
}
.color-vigi-75 {
@apply text-vigi-75 bg-vigi-75;
}
.color-vigi-80 {
@apply text-vigi-80 bg-vigi-80;
}
.color-vigi-85 {
@apply text-vigi-85 bg-vigi-85;
}
.color-vigi-90 {
@apply text-vigi-90 bg-vigi-90;
}
.color-vigi-95 {
@apply text-vigi-95 bg-vigi-95;
}
.color-vigi-100 {
@apply text-vigi-100 bg-vigi-100;
}

View file

@ -1,7 +1,12 @@
let colors = {}; let bgColors = {};
let textColors = {};
for (let i = 0; i <= 100; i += 5) { for (let i = 0; i <= 100; i += 5) {
colors[`vigi-${i}`] = `color-mix(in hsl, var(--max) ${i}%, var(--min))`; bgColors[`vigi-${i}`] =
`color-mix(in oklch, var(--max-bg) ${i}%, var(--min-bg))`;
textColors[`vigi-${i}`] =
`color-mix(in oklch, var(--max-text) ${i}%, var(--min-text))`;
} }
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
@ -9,8 +14,8 @@ export default {
content: ["./src/**/*.{html,js,svelte,ts}"], content: ["./src/**/*.{html,js,svelte,ts}"],
theme: { theme: {
extend: { extend: {
colors, colors: bgColors,
textColor: colors, textColor: textColors,
}, },
}, },
plugins: [], plugins: [],