starred/yaak
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-01-11 20:00:29 +01:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

More theme stuff

Browse Source
This commit is contained in:
Gregory Schier
2024-05-24 17:36:48 -07:00
parent 11814b56f1
commit f3024a259e
17 changed files with 142 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -15,7 +15,7 @@
@media (prefers-color-scheme: dark) {
html, body {
background-color: black;
background-color: #1b1a29;
}
}
</style>

1
src-tauri/capabilities/capabilities.json
View File

@@ -48,6 +48,7 @@
"window:allow-set-title",
"window:allow-start-dragging",
"window:allow-unmaximize",
"window:allow-theme",
"clipboard-manager:allow-read-text",
"clipboard-manager:allow-write-text"
]

2
src-tauri/gen/schemas/capabilities.json
View File

@@ -1 +1 @@
{"main":{"identifier":"main","description":"Main permissions","local":true,"windows":["*"],"permissions":["os:allow-os-type","event:allow-emit","clipboard-manager:allow-write-text","clipboard-manager:allow-read-text","dialog:allow-open","dialog:allow-save","event:allow-listen","event:allow-unlisten","fs:allow-read-file","fs:allow-read-text-file",{"identifier":"fs:scope","allow":[{"path":"$APPDATA"},{"path":"$APPDATA/**"}]},"shell:allow-open",{"identifier":"shell:allow-execute","allow":[{"args":true,"name":"protoc","sidecar":true}]},"window:allow-close","window:allow-is-fullscreen","window:allow-maximize","window:allow-minimize","window:allow-toggle-maximize","window:allow-set-decorations","window:allow-set-title","window:allow-start-dragging","window:allow-unmaximize","clipboard-manager:allow-read-text","clipboard-manager:allow-write-text"]}}
{"main":{"identifier":"main","description":"Main permissions","local":true,"windows":["*"],"permissions":["os:allow-os-type","event:allow-emit","clipboard-manager:allow-write-text","clipboard-manager:allow-read-text","dialog:allow-open","dialog:allow-save","event:allow-listen","event:allow-unlisten","fs:allow-read-file","fs:allow-read-text-file",{"identifier":"fs:scope","allow":[{"path":"$APPDATA"},{"path":"$APPDATA/**"}]},"shell:allow-open",{"identifier":"shell:allow-execute","allow":[{"args":true,"name":"protoc","sidecar":true}]},"window:allow-close","window:allow-is-fullscreen","window:allow-maximize","window:allow-minimize","window:allow-toggle-maximize","window:allow-set-decorations","window:allow-set-title","window:allow-start-dragging","window:allow-unmaximize","window:allow-theme","clipboard-manager:allow-read-text","clipboard-manager:allow-write-text"]}}

10
src-tauri/src/lib.rs
View File

@@ -1292,6 +1292,15 @@ async fn cmd_update_folder(folder: Folder, w: WebviewWindow) -> Result<Folder, S
upsert_folder(&w, folder).await.map_err(|e| e.to_string())
}
#[tauri::command]
async fn cmd_write_file_dev(w: WebviewWindow, pathname: &str, contents: &str) -> Result<(), String> {
if !is_dev() {
panic!("Cannot write arbitrary files when not in dev mode");
}
fs::write(pathname, contents).map_err(|e| e.to_string())
}
#[tauri::command]
async fn cmd_delete_folder(w: WebviewWindow, folder_id: &str) -> Result<Folder, String> {
delete_folder(&w, folder_id)
@@ -1669,6 +1678,7 @@ pub fn run() {
cmd_update_http_request,
cmd_update_settings,
cmd_update_workspace,
cmd_write_file_dev,
])
.build(tauri::generate_context!())
.expect("error while running tauri application")

18
src-tauri/src/window_menu.rs
View File

@@ -107,15 +107,15 @@ pub fn app_menu(app_handle: &AppHandle) -> tauri::Result<Menu<Wry>> {
&PredefinedMenuItem::fullscreen(app_handle, None)?,
#[cfg(target_os = "macos")]
&PredefinedMenuItem::separator(app_handle)?,
// &MenuItemBuilder::with_id("zoom_reset".to_string(), "Zoom to Actual Size")
// .accelerator("CmdOrCtrl+0")
// .build(app_handle)?,
// &MenuItemBuilder::with_id("zoom_in".to_string(), "Zoom In")
// .accelerator("CmdOrCtrl+=")
// .build(app_handle)?,
// &MenuItemBuilder::with_id("zoom_out".to_string(), "Zoom Out")
// .accelerator("CmdOrCtrl+-")
// .build(app_handle)?,
&MenuItemBuilder::with_id("zoom_reset".to_string(), "Zoom to Actual Size")
.accelerator("CmdOrCtrl+0")
.build(app_handle)?,
&MenuItemBuilder::with_id("zoom_in".to_string(), "Zoom In")
.accelerator("CmdOrCtrl+=")
.build(app_handle)?,
&MenuItemBuilder::with_id("zoom_out".to_string(), "Zoom Out")
.accelerator("CmdOrCtrl+-")
.build(app_handle)?,
],
)?,
&window_menu,

67
src-web/components/Settings/SettingsDesign.tsx
View File

@@ -1,12 +1,25 @@
import { invoke } from '@tauri-apps/api/core';
import { open } from '@tauri-apps/plugin-dialog';
import React from 'react';
import { useLocalStorage } from 'react-use';
import { useThemes } from '../../hooks/useThemes';
import { capitalize } from '../../lib/capitalize';
import { catppuccinMacchiato } from '../../lib/theme/themes/catppuccin';
import { githubLight } from '../../lib/theme/themes/github';
import { monokaiProDefault } from '../../lib/theme/themes/monokai-pro';
import { rosePineDefault } from '../../lib/theme/themes/rose-pine';
import { yaakDark } from '../../lib/theme/themes/yaak';
import { getThemeCSS } from '../../lib/theme/window';
import { Banner } from '../core/Banner';
import { Button } from '../core/Button';
import { Editor } from '../core/Editor';
import type { IconProps } from '../core/Icon';
import { Icon } from '../core/Icon';
import { IconButton } from '../core/IconButton';
import { InlineCode } from '../core/InlineCode';
import { Input } from '../core/Input';
import { Separator } from '../core/Separator';
import { HStack, VStack } from '../core/Stacks';
const buttonColors = [
'primary',
@@ -37,8 +50,62 @@ const icons: IconProps['icon'][] = [
];
export function SettingsDesign() {
const themes = useThemes();
const [exportDir, setExportDir] = useLocalStorage<string | null>('theme_export_dir', null);
const saveThemes = async () => {
const dir = await open({ directory: true });
if (!dir) return;
const allThemesCSS = themes.themes.map(getThemeCSS).join('\n\n');
const coreThemeCSS = [
yaakDark,
catppuccinMacchiato,
rosePineDefault,
monokaiProDefault,
githubLight,
]
.map(getThemeCSS)
.join('\n\n');
await invoke('cmd_write_file_dev', {
pathname: dir + '/themes-all.css',
contents: coreThemeCSS,
});
await invoke('cmd_write_file_dev', {
pathname: dir + '/themes-slim.css',
contents: allThemesCSS,
});
};
return (
<div className="p-2 flex flex-col gap-3">
<VStack space={2}>
<InlineCode>{exportDir}</InlineCode>
<HStack space={2}>
<Button
size="sm"
color="secondary"
variant="border"
onClick={() => {
open({ directory: true }).then(setExportDir);
}}
>
Change Export Dir
</Button>
<Button
disabled={exportDir == null}
size="sm"
color="primary"
variant="border"
onClick={saveThemes}
>
Export CSS
</Button>
</HStack>
</VStack>
<Separator className="my-6" />
<Input
label="Field Label"
name="demo"

1
src-web/components/Settings/SettingsDialog.tsx
View File

@@ -30,7 +30,6 @@ export const SettingsDialog = () => {
value={tab}
addBorders
label="Settings"
tabListClassName="h-md !-ml-1 mt-2"
onChangeValue={setTab}
tabs={tabs
.filter((t) => t !== Tab.Design || isDev)

4
src-web/components/core/Editor/Editor.css
View File

@@ -56,7 +56,7 @@
}
}
.placeholder-widget {
.placeholder {
/* Colors */
@apply bg-background text-fg-subtle border-background-highlight-secondary;
@apply hover:border-background-highlight hover:text-fg hover:bg-background-highlight-secondary;
@@ -150,7 +150,7 @@
.cm-editor .cm-foldPlaceholder {
@apply px-2 border border-fg-subtler bg-background-highlight;
@apply hover:text-fg hover:border-fg-subtle;
@apply hover:text-fg hover:border-fg-subtle text-fg;
@apply cursor-default !important;
}

6
src-web/components/core/Editor/twig/placeholder.ts
View File

@@ -11,10 +11,8 @@ class PlaceholderWidget extends WidgetType {
}
toDOM() {
const elt = document.createElement('span');
elt.className = `x-theme-placeholder-widget placeholder-widget ${
this.isExistingVariable
? 'x-theme-placeholder-widget--primary'
: 'x-theme-placeholder-widget--danger'
elt.className = `x-theme-placeholder placeholder ${
this.isExistingVariable ? 'x-theme-placeholder--primary' : 'x-theme-placeholder--danger'
}`;
elt.title = !this.isExistingVariable ? 'Variable not found in active environment' : '';
elt.textContent = this.name;

14
src-web/components/core/Tabs/Tabs.tsx
View File

@@ -74,6 +74,7 @@ export function Tabs({
aria-label={label}
className={classNames(
tabListClassName,
addBorders && '!-ml-1 h-md mt-2',
'flex items-center overflow-x-auto overflow-y-visible hide-scrollbars mt-1 mb-2',
// Give space for button focus states within overflow boundary.
'-ml-5 pl-3 pr-1 py-1',
@@ -109,7 +110,6 @@ export function Tabs({
{option && 'shortLabel' in option
? option.shortLabel
: option?.label ?? 'Unknown'}
<TabAccent enabled isActive={isActive} />
<Icon
size="sm"
icon="chevronDown"
@@ -127,7 +127,6 @@ export function Tabs({
className={btnClassName}
>
{t.label}
<TabAccent enabled isActive={isActive} />
</button>
);
}
@@ -160,14 +159,3 @@ export const TabContent = memo(function TabContent({
</div>
);
});
function TabAccent({ isActive, enabled }: { isActive: boolean; enabled: boolean }) {
return (
<div
className={classNames(
'w-full opacity-40 border-b-2',
isActive && enabled ? 'border-b-background-highlight' : 'border-b-transparent',
)}
/>
);
}

18
src-web/hooks/usePreferredAppearance.ts Normal file
View File

@@ -0,0 +1,18 @@
import { useEffect, useState } from 'react';
import {
type Appearance,
getPreferredAppearance,
subscribeToPreferredAppearanceChange,
} from '../lib/theme/window';
export function usePreferredAppearance() {
const [preferredAppearance, setPreferredAppearance] = useState<Appearance>();
// Set appearance when preferred theme changes
useEffect(() => {
getPreferredAppearance().then(setPreferredAppearance);
return subscribeToPreferredAppearanceChange(setPreferredAppearance);
}, []);
return preferredAppearance;
}

15
src-web/hooks/useResolvedAppearance.ts
View File

@@ -1,17 +1,8 @@
import { useEffect, useState } from 'react';
import type { Appearance } from '../lib/theme/window';
import { getPreferredAppearance, subscribeToPreferredAppearanceChange } from '../lib/theme/window';
import { usePreferredAppearance } from './usePreferredAppearance';
import { useSettings } from './useSettings';
export function useResolvedAppearance() {
const [preferredAppearance, setPreferredAppearance] = useState<Appearance>(
getPreferredAppearance(),
);
// Set appearance when preferred theme changes
useEffect(() => {
return subscribeToPreferredAppearanceChange(setPreferredAppearance);
}, []);
const preferredAppearance = usePreferredAppearance();
const settings = useSettings();
const appearance =
@@ -19,5 +10,7 @@ export function useResolvedAppearance() {
? preferredAppearance
: settings.appearance;
console.log('HELLO', settings?.appearance, preferredAppearance);
return appearance;
}

10
src-web/lib/theme/themes/catppuccin.ts
View File

@@ -1,9 +1,9 @@
import { Color } from '../color';
import type { YaakTheme } from '../window';
const catppuccinLatte: YaakTheme = {
export const catppuccinLatte: YaakTheme = {
name: 'Catppuccin Latte',
id: 'catppuccin-light',
id: 'catppuccin-latte',
background: new Color('#eff1f5', 'light'),
foreground: new Color('#4c4f69', 'dark'),
foregroundSubtle: new Color('#6c6f85', 'light'),
@@ -31,9 +31,9 @@ const catppuccinLatte: YaakTheme = {
},
};
const catppuccinMacchiato: YaakTheme = {
export const catppuccinMacchiato: YaakTheme = {
name: 'Catppuccin Macchiato',
id: 'catppuccin-Macchiato',
id: 'catppuccin-macchiato',
background: new Color('#1e2030', 'dark'),
foreground: new Color('#cad3f5', 'dark'),
foregroundSubtle: new Color('#a5adcb', 'dark'),
@@ -77,7 +77,7 @@ const catppuccinMacchiato: YaakTheme = {
},
};
const catppuccinFrappe: YaakTheme = {
export const catppuccinFrappe: YaakTheme = {
name: 'Catppuccin Frappé',
id: 'catppuccin-frappe',
background: new Color('#292c3c', 'dark'),

14
src-web/lib/theme/themes/github.ts
View File

@@ -34,22 +34,22 @@ const githubDark: YaakTheme = {
},
};
const githubLight: YaakTheme = {
export const githubLight: YaakTheme = {
id: 'github-light',
name: 'GitHub',
background: new Color('#ffffff', 'light'),
backgroundHighlight: new Color('#e8ebee', 'light'),
backgroundHighlightSecondary: new Color('#f6f8fa', 'light'),
backgroundHighlight: new Color('hsl(210,15%,92%)', 'light'),
backgroundHighlightSecondary: new Color('hsl(210,29%,94%)', 'light'),
foreground: new Color('#1f2328', 'light'),
foregroundSubtle: new Color('#636c76', 'light'),
foregroundSubtler: new Color('#828d94', 'light'),
colors: {
primary: new Color('#8250df', 'light'),
secondary: new Color('#6e7781', 'light'),
info: new Color('#0969da', 'light'),
success: new Color('#1a7f37', 'light'),
notice: new Color('#9a6700', 'light'),
warning: new Color('#bc4c00', 'light'),
info: new Color('hsl(212,92%,48%)', 'light'),
success: new Color('hsl(137,66%,32%)', 'light'),
notice: new Color('hsl(40,100%,40%)', 'light'),
warning: new Color('hsl(24,100%,44%)', 'light'),
danger: new Color('#d1242f', 'light'),
},
};

2
src-web/lib/theme/themes/monokai-pro.ts
View File

@@ -1,7 +1,7 @@
import { Color } from '../color';
import type { YaakTheme } from '../window';
const monokaiProDefault: YaakTheme = {
export const monokaiProDefault: YaakTheme = {
id: 'monokai-pro',
name: 'Monokai Pro',
background: new Color('#2d2a2e', 'dark'),

4
src-web/lib/theme/themes/rose-pine.ts
View File

@@ -1,7 +1,7 @@
import { Color } from '../color';
import type { YaakTheme } from '../window';
const rosePineClassic: YaakTheme = {
export const rosePineDefault: YaakTheme = {
id: 'rose-pine',
name: 'Rosé Pine',
background: new Color('#191724', 'dark'),
@@ -105,4 +105,4 @@ const rosePineDawn: YaakTheme = {
},
};
export const rosePine = [rosePineClassic, rosePineDawn, rosePineMoon];
export const rosePine = [rosePineDefault, rosePineDawn, rosePineMoon];

22
src-web/lib/theme/window.ts
View File

@@ -180,7 +180,7 @@ function placeholderCSS(color: ColorName, colors?: Partial<RootColors>): string
}
return [
variablesToCSS(`.x-theme-placeholder-widget--${color}`, placeholderColorVariables(cssColor)),
variablesToCSS(`.x-theme-placeholder--${color}`, placeholderColorVariables(cssColor)),
].join('\n\n');
}
@@ -219,7 +219,8 @@ export function getThemeCSS(theme: YaakTheme): string {
} catch (err) {
console.error(err);
}
return themeCSS;
return [`/* ${theme.name} */`, `[data-theme="${theme.id}"] {`, themeCSS, '}'].join('\n');
}
export function addThemeStylesToDocument(theme: YaakTheme) {
@@ -230,20 +231,16 @@ export function addThemeStylesToDocument(theme: YaakTheme) {
}
styleEl.setAttribute('data-theme', theme.id);
styleEl.textContent = [
`/* ${theme.name} */`,
`[data-theme="${theme.id}"] {`,
getThemeCSS(theme),
'}',
].join('\n');
styleEl.textContent = getThemeCSS(theme);
}
export function setThemeOnDocument(theme: YaakTheme) {
document.documentElement.setAttribute('data-theme', theme.id);
}
export function getPreferredAppearance(): Appearance {
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
export async function getPreferredAppearance(): Promise<Appearance> {
const a = await getCurrent().theme();
return a ?? 'light';
}
export function subscribeToPreferredAppearanceChange(
@@ -252,7 +249,10 @@ export function subscribeToPreferredAppearanceChange(
const container = { unsubscribe: () => {} };
getCurrent()
.onThemeChanged((t) => cb(t.payload))
.onThemeChanged((t) => {
console.log('THEME CHANGED', t);
cb(t.payload);
})
.then((l) => {
container.unsubscribe = l;
});