mirror of
https://github.com/TxtDot/vigi.git
synced 2024-11-21 19:16:20 +03:00
feat: text-color
This commit is contained in:
parent
9c8437851d
commit
a23bead7d8
13 changed files with 373 additions and 220 deletions
2
.github/workflows/publish.yaml
vendored
2
.github/workflows/publish.yaml
vendored
|
@ -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
|
||||||
|
|
7
.vscode/extensions.json
vendored
7
.vscode/extensions.json
vendored
|
@ -1,7 +0,0 @@
|
||||||
{
|
|
||||||
"recommendations": [
|
|
||||||
"svelte.svelte-vscode",
|
|
||||||
"tauri-apps.tauri-vscode",
|
|
||||||
"rust-lang.rust-analyzer"
|
|
||||||
]
|
|
||||||
}
|
|
3
.vscode/settings.json
vendored
3
.vscode/settings.json
vendored
|
@ -1,3 +0,0 @@
|
||||||
{
|
|
||||||
"svelte.enable-ts-plugin": true
|
|
||||||
}
|
|
|
@ -140,7 +140,7 @@ impl VigiState {
|
||||||
)],
|
)],
|
||||||
)
|
)
|
||||||
} else {
|
} else {
|
||||||
todo!();
|
Err(VigiError::Parse)?
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
100
src/app.css
100
src/app.css
|
@ -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 {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
|
|
@ -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={() => {
|
||||||
|
|
|
@ -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;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
63
src/theme-classes.css
Normal 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;
|
||||||
|
}
|
|
@ -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: [],
|
||||||
|
|
Loading…
Add table
Reference in a new issue