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 moved to plugin

Browse Source
This commit is contained in:
Jan Prochazka 2021-02-26 16:52:22 +01:00
parent 8a0d10e50d
commit a101f21483
9 changed files with 136 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,6 +21,11 @@ export interface FileFormatDefinition {
getOutputParams?: (sourceName, values) => any;
}
export interface ThemeDefinition {
className: string;
themeName: string;
}
export interface PluginDefinition {
packageName: string;
manifest: any;
@ -31,4 +36,5 @@ export interface ExtensionsDirectory {
plugins: PluginDefinition[];
fileFormats: FileFormatDefinition[];
drivers: EngineDriver[];
themes: ThemeDefinition[];
}

2
packages/web/public/index.html
View File

@ -8,8 +8,6 @@
<link rel='icon' type='image/png' href='/favicon.png'>
<link rel='stylesheet' href='/global.css'>
<link rel='stylesheet' href='/theme-light.css'>
<link rel='stylesheet' href='/theme-dark.css'>
<link rel='stylesheet' href='/dimensions.css'>
<link rel='stylesheet' href='/bulma.css'>
<link rel='stylesheet' href='/icon-colors.css'>

56
packages/web/public/theme-dark.css
View File

@ -1,56 +0,0 @@
.theme-dark {
--theme-font-1: #ddd;
--theme-font-2: #919191;
--theme-font-3: #5e5e5e;
--theme-font-4: #2b2b2b;
--theme-font-hover: #8dcff8; /* blue-9 */
--theme-font-link: #65b7f3; /* blue-8 */
--theme-font-alt: #b2e58b; /* green-9 */
/* --theme-bg-0: #000;
--theme-bg-1: #333;
--theme-bg-2: #4d4d4d;
--theme-bg-3: #676767;
--theme-bg-4: #818181;
--theme-bg-alt: #111d2c; */
--theme-bg-0: #111;
--theme-bg-1: #333;
--theme-bg-2: #4d4d4d;
--theme-bg-3: #676767;
--theme-bg-4: #818181;
--theme-bg-alt: #111d2c;
--theme-bg-gold: #443111; /* gold-2 */
--theme-bg-orange: #442a11; /*orange-2 */
--theme-bg-green: #1d3712; /* green-2 */
--theme-bg-volcano: #441d12; /* volcano-2 */
--theme-font-inv-1: #FFFFFF;
--theme-font-inv-2: #b3b3b3;
--theme-font-inv-3: #808080;
--theme-font-inv-4: #4d4d4d;
--theme-bg-inv-1: #222;
--theme-bg-inv-2: #3c3c3c;
--theme-bg-inv-3: #565656;
--theme-bg-inv-4: #707070;
--theme-border: #555;
--theme-bg-hover: #112a45;
--theme-bg-selected: #15395b; /* blue-3 */
--theme-bg-statusbar-inv: blue;
--theme-icon-blue: #3c9ae8;
--theme-icon-green: #8fd460;
--theme-icon-red: #e84749;
--theme-icon-gold: #e8b339;
--theme-icon-yellow: #e8d639;
--theme-icon-magenta: #e0529c;
}

45
packages/web/public/theme-light.css
View File

@ -1,45 +0,0 @@
.theme-light {
--theme-font-1: #000000;
--theme-font-2: #4d4d4d;
--theme-font-3: #808080;
--theme-font-4: #b3b3b3;
--theme-font-hover: #061178; /* blue-9 */
--theme-font-link: #10239e; /* blue-8 */
--theme-font-alt: #135200; /* green-9 */
--theme-bg-0: #fff;
--theme-bg-1: #ededed;
--theme-bg-2: #d4d4d4;
--theme-bg-3: #bbbbbb;
--theme-bg-4: #a2a2a2;
--theme-bg-alt: #f0f5ff;
--theme-bg-gold: #fff1b8; /* gold-2 */
--theme-bg-orange: #ffe7ba; /*orange-2 */
--theme-bg-green: #d9f7be; /* green-2 */
--theme-bg-volcano: #ffd8bf; /* volcano-2 */
--theme-font-inv-1: #FFFFFF;
--theme-font-inv-2: #b3b3b3;
--theme-font-inv-3: #808080;
--theme-font-inv-4: #4d4d4d;
--theme-bg-inv-1: #222;
--theme-bg-inv-2: #3c3c3c;
--theme-bg-inv-3: #565656;
--theme-bg-inv-4: #707070;
--theme-border: #ccc;
--theme-bg-hover: #bae7ff;
--theme-bg-selected: #91d5ff; /* blue-3 */
--theme-bg-statusbar-inv: blue;
--theme-icon-blue: #096dd9; /* blue-7 */
--theme-icon-green: #237804; /* green-7 */
--theme-icon-red: #cf1322; /* red-7 */
--theme-icon-gold: #d48806; /* gold-7 */
--theme-icon-yellow: #d4b106; /* yellow-7 */
--theme-icon-magenta: #c41d7f; /* magenta-7 */
}

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

@ -1,11 +1,12 @@
import { currentTheme } from '../stores';
import { currentTheme, extensions } from '../stores';
import registerCommand from './registerCommand';
import { get } from 'svelte/store';
import { ThemeDefinition } from 'dbgate-types';
function themeCommand(text, css) {
function themeCommand(theme: ThemeDefinition) {
return {
text: text,
onClick: () => currentTheme.set(css),
text: theme.themeName,
onClick: () => currentTheme.set(theme.className),
// onPreview: () => {
// const old = get(currentTheme);
// currentTheme.set(css);
@ -19,5 +20,5 @@ function themeCommand(text, css) {
registerCommand({
id: 'theme.changeTheme',
text: 'Theme: Change',
getSubCommands: () => [themeCommand('Light', 'theme-light'), themeCommand('Dark', 'theme-dark')],
getSubCommands: () => get(extensions).themes.map(themeCommand),
});

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

@ -38,6 +38,7 @@
const extensions = {
plugins,
fileFormats: buildFileFormats(plugins),
themes: buildThemes(plugins),
drivers: buildDrivers(plugins),
};
return extensions;
@ -50,6 +51,7 @@
import axios from '../utility/axios';
import { useInstalledPlugins } from '../utility/metadataLoaders';
import { buildFileFormats } from './fileformats';
import { buildThemes } from './themes';
let pluginsDict = {};
const installedPlugins = useInstalledPlugins();

59
packages/web/src/plugins/ThemeDark.svelte Normal file
View File

@ -0,0 +1,59 @@
<script context="module">
export const className = 'theme-dark';
export const themeName = 'Dark';
</script>
<style>
:global(.theme-dark) {
--theme-font-1: #ddd;
--theme-font-2: #919191;
--theme-font-3: #5e5e5e;
--theme-font-4: #2b2b2b;
--theme-font-hover: #8dcff8; /* blue-9 */
--theme-font-link: #65b7f3; /* blue-8 */
--theme-font-alt: #b2e58b; /* green-9 */
/* --theme-bg-0: #000;
--theme-bg-1: #333;
--theme-bg-2: #4d4d4d;
--theme-bg-3: #676767;
--theme-bg-4: #818181;
--theme-bg-alt: #111d2c; */
--theme-bg-0: #111;
--theme-bg-1: #333;
--theme-bg-2: #4d4d4d;
--theme-bg-3: #676767;
--theme-bg-4: #818181;
--theme-bg-alt: #111d2c;
--theme-bg-gold: #443111; /* gold-2 */
--theme-bg-orange: #442a11; /*orange-2 */
--theme-bg-green: #1d3712; /* green-2 */
--theme-bg-volcano: #441d12; /* volcano-2 */
--theme-font-inv-1: #ffffff;
--theme-font-inv-2: #b3b3b3;
--theme-font-inv-3: #808080;
--theme-font-inv-4: #4d4d4d;
--theme-bg-inv-1: #222;
--theme-bg-inv-2: #3c3c3c;
--theme-bg-inv-3: #565656;
--theme-bg-inv-4: #707070;
--theme-border: #555;
--theme-bg-hover: #112a45;
--theme-bg-selected: #15395b; /* blue-3 */
--theme-bg-statusbar-inv: blue;
--theme-icon-blue: #3c9ae8;
--theme-icon-green: #8fd460;
--theme-icon-red: #e84749;
--theme-icon-gold: #e8b339;
--theme-icon-yellow: #e8d639;
--theme-icon-magenta: #e0529c;
}
</style>

52
packages/web/src/plugins/ThemeLight.svelte Normal file
View File

@ -0,0 +1,52 @@
<script context="module">
export const className = 'theme-light';
export const themeName = 'Light';
</script>
<style>
:global(.theme-light) {
--theme-font-1: #000000;
--theme-font-2: #4d4d4d;
--theme-font-3: #808080;
--theme-font-4: #b3b3b3;
--theme-font-hover: #061178; /* blue-9 */
--theme-font-link: #10239e; /* blue-8 */
--theme-font-alt: #135200; /* green-9 */
--theme-bg-0: #fff;
--theme-bg-1: #ededed;
--theme-bg-2: #d4d4d4;
--theme-bg-3: #bbbbbb;
--theme-bg-4: #a2a2a2;
--theme-bg-alt: #f0f5ff;
--theme-bg-gold: #fff1b8; /* gold-2 */
--theme-bg-orange: #ffe7ba; /*orange-2 */
--theme-bg-green: #d9f7be; /* green-2 */
--theme-bg-volcano: #ffd8bf; /* volcano-2 */
--theme-font-inv-1: #ffffff;
--theme-font-inv-2: #b3b3b3;
--theme-font-inv-3: #808080;
--theme-font-inv-4: #4d4d4d;
--theme-bg-inv-1: #222;
--theme-bg-inv-2: #3c3c3c;
--theme-bg-inv-3: #565656;
--theme-bg-inv-4: #707070;
--theme-border: #ccc;
--theme-bg-hover: #bae7ff;
--theme-bg-selected: #91d5ff; /* blue-3 */
--theme-bg-statusbar-inv: blue;
--theme-icon-blue: #096dd9; /* blue-7 */
--theme-icon-green: #237804; /* green-7 */
--theme-icon-red: #cf1322; /* red-7 */
--theme-icon-gold: #d48806; /* gold-7 */
--theme-icon-yellow: #d4b106; /* yellow-7 */
--theme-icon-magenta: #c41d7f; /* magenta-7 */
}
</style>

11
packages/web/src/plugins/themes.js Normal file
View File

@ -0,0 +1,11 @@
import * as light from './ThemeLight.svelte';
import * as dark from './ThemeDark.svelte';
export function buildThemes(plugins) {
const res = [light, dark];
for (const { content } of plugins) {
const { themes } = content;
if (themes) res.push(...themes);
}
return res;
}