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: ""
with:
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."
releaseDraft: true
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 {
todo!();
Err(VigiError::Parse)?
}
};

View file

@ -2,14 +2,99 @@
@tailwind components;
@tailwind utilities;
:root {
--min: #96e28a;
--max: #193815;
/* Theme */
:root {
/* Theme Colors */
/* Green */
--min-bg: #96e28a;
--max-bg: #193815;
--max-text: #bef5b5;
--min-text: #fff;
/* Dark */
/* --min: #818181;
--max: #000; */
/* Blue */
/* --min: #8a9fe2;
--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 {
@apply bg-vigi-90 text-vigi-10 cursor-default;
user-select: none;
@ -31,7 +116,7 @@ body {
}
.browser-window {
@apply grow shadow-inner overflow-auto select-text cursor-auto;
@apply grow overflow-auto select-text cursor-auto;
}
.window-controls {
@ -58,13 +143,14 @@ body {
.sidebar {
@apply shrink-0 grow-0 flex flex-col w-1/5;
@apply ease-out duration-100;
@apply ease-out duration-300;
}
.sidebar.collapsed {
@apply basis-0;
@apply p-0 m-0 bg-transparent;
@apply p-0 m-0;
@apply overflow-hidden;
}
.top-bar {
@ -85,7 +171,7 @@ input::placeholder {
}
.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 {

View file

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

View file

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

View file

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

View file

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

View file

@ -7,7 +7,7 @@ export async function updateVigiState() {
let st = await invoke("get_js_state");
state.set(st as VigiState);
} catch (e) {
console.log(e);
writeError(e);
}
}
@ -16,10 +16,10 @@ export async function updateInput(input: string) {
try {
await invoke("update_input", { input });
} catch (e) {
console.log(e);
} finally {
await updateVigiState();
} catch (e) {
writeError(e, input);
} finally {
isLoading.set(false);
}
}
@ -45,8 +45,22 @@ export async function removeTab(index: number) {
export async function loadTab() {
isLoading.set(true);
try {
await invoke("load_tab");
await updateVigiState();
} catch (e) {
writeError(e);
} finally {
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;
}
if (e.key === "q") sidebarOpen = !sidebarOpen;
if (e.code === "KeyQ") sidebarOpen = !sidebarOpen;
});
</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) {
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} */
@ -9,8 +14,8 @@ export default {
content: ["./src/**/*.{html,js,svelte,ts}"],
theme: {
extend: {
colors,
textColor: colors,
colors: bgColors,
textColor: textColors,
},
},
plugins: [],