mirrors/dbgate
1
0
Fork 0
mirror of https://github.com/dbgate/dbgate synced 2024-11-07 20:26:23 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

theme could be in plugin

Browse Source
This commit is contained in:
Jan Prochazka 2022-01-29 18:17:04 +01:00
parent 157325f605
commit a49296e165
7 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/types/extensions.d.ts vendored
View File

@ -22,9 +22,10 @@ export interface FileFormatDefinition {
} }
export interface ThemeDefinition { export interface ThemeDefinition {
className: string; themeClassName: string;
themeName: string; themeName: string;
themeType: 'light' | 'dark'; themeType: 'light' | 'dark';
themeCss?: string;
} }
export interface PluginDefinition { export interface PluginDefinition {

6
packages/web/src/Screen.svelte
View File

@ -26,6 +26,12 @@
$: currentThemeType = $currentThemeDefinition?.themeType == 'dark' ? 'theme-type-dark' : 'theme-type-light'; $: currentThemeType = $currentThemeDefinition?.themeType == 'dark' ? 'theme-type-dark' : 'theme-type-light';
</script> </script>
<svelte:head>
{#if $currentThemeDefinition?.themeCss}
{@html `<style id="themePlugin">${$currentThemeDefinition?.themeCss}</style>`}
{/if}
</svelte:head>
<div <div
class={`${$currentTheme} ${currentThemeType} root dbgate-screen`} class={`${$currentTheme} ${currentThemeType} root dbgate-screen`}
use:dragDropFileTarget use:dragDropFileTarget

2
packages/web/src/commands/stdCommands.ts
View File

@ -30,7 +30,7 @@ import runCommand from './runCommand';
function themeCommand(theme: ThemeDefinition) { function themeCommand(theme: ThemeDefinition) {
return { return {
text: theme.themeName, text: theme.themeName,
onClick: () => currentTheme.set(theme.className), onClick: () => currentTheme.set(theme.themeClassName),
// onPreview: () => { // onPreview: () => {
// const old = get(currentTheme); // const old = get(currentTheme);
// currentTheme.set(css); // currentTheme.set(css);

6
packages/web/src/designer/Designer.svelte
View File

@ -695,13 +695,17 @@
if (css) css += '\n'; if (css) css += '\n';
css += cssItem; css += cssItem;
} }
if ($currentThemeDefinition?.themeCss) {
if (css) css += '\n';
css += $currentThemeDefinition?.themeCss;
}
saveFileToDisk(async filePath => { saveFileToDisk(async filePath => {
await apiCall('files/export-diagram', { await apiCall('files/export-diagram', {
filePath, filePath,
html: domCanvas.outerHTML, html: domCanvas.outerHTML,
css, css,
themeType: $currentThemeDefinition?.themeType, themeType: $currentThemeDefinition?.themeType,
themeClassName: $currentThemeDefinition?.className, themeClassName: $currentThemeDefinition?.themeClassName,
}); });
}); });
} }

2
packages/web/src/plugins/ThemeDark.svelte
View File

@ -1,5 +1,5 @@
<script context="module"> <script context="module">
export const className = 'theme-dark'; export const themeClassName = 'theme-dark';
export const themeName = 'Dark'; export const themeName = 'Dark';
export const themeType = 'dark'; export const themeType = 'dark';
</script> </script>

2
packages/web/src/plugins/ThemeLight.svelte
View File

@ -1,5 +1,5 @@
<script context="module"> <script context="module">
export const className = 'theme-light'; export const themeClassName = 'theme-light';
export const themeName = 'Light'; export const themeName = 'Light';
export const themeType = 'light'; export const themeType = 'light';
</script> </script>

2
packages/web/src/stores.ts
View File

@ -73,7 +73,7 @@ export const loadingPluginStore = writable({
}); });
export const currentThemeDefinition = derived([currentTheme, extensions], ([$currentTheme, $extensions]) => export const currentThemeDefinition = derived([currentTheme, extensions], ([$currentTheme, $extensions]) =>
$extensions.themes.find(x => x.className == $currentTheme) $extensions.themes.find(x => x.themeClassName == $currentTheme)
); );
subscribeCssVariable(selectedWidget, x => (x ? 1 : 0), '--dim-visible-left-panel'); subscribeCssVariable(selectedWidget, x => (x ? 1 : 0), '--dim-visible-left-panel');