mirror of
https://github.com/DeNNiiInc/dbgate.git
synced 2026-04-28 18:46:02 +00:00
left iconbar
This commit is contained in:
Jan Prochazka
6
packages/web-svelte/src/App.svelte
Normal file
6
packages/web-svelte/src/App.svelte
Normal file
@@ -0,0 +1,6 @@
|
||||
<script lang="ts">
|
||||
import Screen from './Screen.svelte';
|
||||
|
||||
</script>
|
||||
|
||||
<Screen />
|
||||
31
packages/web-svelte/src/Screen.svelte
Normal file
31
packages/web-svelte/src/Screen.svelte
Normal file
@@ -0,0 +1,31 @@
|
||||
<script lang="ts">
|
||||
import WidgetIconPanel from './widgets/WidgetIconPanel.svelte';
|
||||
</script>
|
||||
|
||||
<div class="theme-dark">
|
||||
<div class="iconbar">
|
||||
<WidgetIconPanel />
|
||||
</div>
|
||||
<div class="statusbar" />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--widget-icon-size: 50px;
|
||||
--statusbar-height: 20px;
|
||||
}
|
||||
.iconbar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: var(--statusbar-height);
|
||||
width: var(--widget-icon-size);
|
||||
}
|
||||
.statusbar {
|
||||
position: fixed;
|
||||
height: var(--statusbar-height);
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
</style>
|
||||
104
packages/web-svelte/src/icons/FontIcon.svelte
Normal file
104
packages/web-svelte/src/icons/FontIcon.svelte
Normal file
@@ -0,0 +1,104 @@
|
||||
<script>
|
||||
export let icon;
|
||||
|
||||
const iconNames = {
|
||||
'icon minus-box': 'mdi mdi-minus-box-outline',
|
||||
'icon plus-box': 'mdi mdi-plus-box-outline',
|
||||
'icon invisible-box': 'mdi mdi-minus-box-outline icon-invisible',
|
||||
'icon cloud-upload': 'mdi mdi-cloud-upload',
|
||||
'icon import': 'mdi mdi-application-import',
|
||||
'icon export': 'mdi mdi-application-export',
|
||||
'icon new-connection': 'mdi mdi-database-plus',
|
||||
'icon tables': 'mdi mdi-table-multiple',
|
||||
'icon favorite': 'mdi mdi-star',
|
||||
'icon share': 'mdi mdi-share-variant',
|
||||
'icon add': 'mdi mdi-plus-circle',
|
||||
'icon connection': 'mdi mdi-connection',
|
||||
|
||||
'icon database': 'mdi mdi-database',
|
||||
'icon server': 'mdi mdi-server',
|
||||
'icon table': 'mdi mdi-table',
|
||||
'icon archive': 'mdi mdi-archive',
|
||||
'icon file': 'mdi mdi-file',
|
||||
'icon loading': 'mdi mdi-loading mdi-spin',
|
||||
'icon close': 'mdi mdi-close',
|
||||
'icon filter': 'mdi mdi-filter',
|
||||
'icon filter-off': 'mdi mdi-filter-off',
|
||||
'icon reload': 'mdi mdi-reload',
|
||||
'icon undo': 'mdi mdi-undo',
|
||||
'icon redo': 'mdi mdi-redo',
|
||||
'icon save': 'mdi mdi-content-save',
|
||||
'icon account': 'mdi mdi-account',
|
||||
'icon sql-file': 'mdi mdi-file',
|
||||
'icon web': 'mdi mdi-web',
|
||||
'icon home': 'mdi mdi-home',
|
||||
'icon query-design': 'mdi mdi-vector-polyline-edit',
|
||||
'icon form': 'mdi mdi-form-select',
|
||||
|
||||
'icon edit': 'mdi mdi-pencil',
|
||||
'icon delete': 'mdi mdi-delete',
|
||||
'icon arrow-up': 'mdi mdi-arrow-up',
|
||||
'icon arrow-down': 'mdi mdi-arrow-down',
|
||||
'icon arrow-left': 'mdi mdi-arrow-left',
|
||||
'icon arrow-begin': 'mdi mdi-arrow-collapse-left',
|
||||
'icon arrow-end': 'mdi mdi-arrow-collapse-right',
|
||||
'icon arrow-right': 'mdi mdi-arrow-right',
|
||||
'icon format-code': 'mdi mdi-code-tags-check',
|
||||
'icon show-wizard': 'mdi mdi-comment-edit',
|
||||
'icon disconnected': 'mdi mdi-lan-disconnect',
|
||||
'icon theme': 'mdi mdi-brightness-6',
|
||||
'icon error': 'mdi mdi-close-circle',
|
||||
'icon ok': 'mdi mdi-check-circle',
|
||||
'icon markdown': 'mdi mdi-application',
|
||||
'icon preview': 'mdi mdi-file-find',
|
||||
'icon eye': 'mdi mdi-eye',
|
||||
|
||||
'icon run': 'mdi mdi-play',
|
||||
'icon chevron-down': 'mdi mdi-chevron-down',
|
||||
'icon chevron-left': 'mdi mdi-chevron-left',
|
||||
'icon chevron-right': 'mdi mdi-chevron-right',
|
||||
'icon chevron-up': 'mdi mdi-chevron-up',
|
||||
'icon plugin': 'mdi mdi-toy-brick',
|
||||
'icon menu': 'mdi mdi-menu',
|
||||
|
||||
'img ok': 'mdi mdi-check-circle color-green-8',
|
||||
'img alert': 'mdi mdi-alert-circle color-blue-6',
|
||||
'img error': 'mdi mdi-close-circle color-red-7',
|
||||
'img warn': 'mdi mdi-alert color-gold-7',
|
||||
// 'img statusbar-ok': 'mdi mdi-check-circle color-on-statusbar-green',
|
||||
|
||||
'img archive': 'mdi mdi-table color-gold-7',
|
||||
'img archive-folder': 'mdi mdi-database-outline color-green-7',
|
||||
'img autoincrement': 'mdi mdi-numeric-1-box-multiple-outline',
|
||||
'img column': 'mdi mdi-table-column',
|
||||
'img server': 'mdi mdi-server color-blue-7',
|
||||
'img primary-key': 'mdi mdi-key-star color-yellow-7',
|
||||
'img foreign-key': 'mdi mdi-key-link',
|
||||
'img sql-file': 'mdi mdi-file',
|
||||
'img shell': 'mdi mdi-flash color-blue-7',
|
||||
'img chart': 'mdi mdi-chart-bar color-magenta-7',
|
||||
'img markdown': 'mdi mdi-application color-red-7',
|
||||
'img preview': 'mdi mdi-file-find color-red-7',
|
||||
'img favorite': 'mdi mdi-star color-yellow-7',
|
||||
'img query-design': 'mdi mdi-vector-polyline-edit color-red-7',
|
||||
|
||||
'img free-table': 'mdi mdi-table color-green-7',
|
||||
'img macro': 'mdi mdi-hammer-wrench',
|
||||
|
||||
'img database': 'mdi mdi-database color-gold-7',
|
||||
'img table': 'mdi mdi-table color-blue-7',
|
||||
'img view': 'mdi mdi-table color-magenta-7',
|
||||
'img procedure': 'mdi mdi-cog color-blue-7',
|
||||
'img function': 'mdi mdi-function-variant',
|
||||
|
||||
'img sort-asc': 'mdi mdi-sort-alphabetical-ascending color-green',
|
||||
'img sort-desc': 'mdi mdi-sort-alphabetical-descending color-green',
|
||||
|
||||
'img reference': 'mdi mdi-link-box',
|
||||
'img link': 'mdi mdi-link',
|
||||
'img filter': 'mdi mdi-filter',
|
||||
'img group': 'mdi mdi-group',
|
||||
};
|
||||
</script>
|
||||
|
||||
<span class={iconNames[icon] || icon} />
|
||||
10
packages/web-svelte/src/main.ts
Normal file
10
packages/web-svelte/src/main.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
import App from './App.svelte';
|
||||
|
||||
const app = new App({
|
||||
target: document.body,
|
||||
props: {
|
||||
name: 'world'
|
||||
}
|
||||
});
|
||||
|
||||
export default app;
|
||||
59
packages/web-svelte/src/widgets/WidgetIconPanel.svelte
Normal file
59
packages/web-svelte/src/widgets/WidgetIconPanel.svelte
Normal file
@@ -0,0 +1,59 @@
|
||||
<script>
|
||||
import FontIcon from '../icons/FontIcon.svelte';
|
||||
|
||||
const widgets = [
|
||||
{
|
||||
icon: 'icon database',
|
||||
name: 'database',
|
||||
title: 'Database connections',
|
||||
},
|
||||
// {
|
||||
// icon: 'fa-table',
|
||||
// name: 'table',
|
||||
// },
|
||||
{
|
||||
icon: 'icon file',
|
||||
name: 'file',
|
||||
title: 'Closed tabs & Saved SQL files',
|
||||
},
|
||||
{
|
||||
icon: 'icon archive',
|
||||
name: 'archive',
|
||||
title: 'Archive (saved tabular data)',
|
||||
},
|
||||
{
|
||||
icon: 'icon plugin',
|
||||
name: 'plugins',
|
||||
title: 'Extensions & Plugins',
|
||||
},
|
||||
{
|
||||
icon: 'icon favorite',
|
||||
name: 'favorites',
|
||||
title: 'Favorites',
|
||||
},
|
||||
// {
|
||||
// icon: 'fa-cog',
|
||||
// name: 'settings',
|
||||
// },
|
||||
// {
|
||||
// icon: 'fa-check',
|
||||
// name: 'settings',
|
||||
// },
|
||||
];
|
||||
</script>
|
||||
|
||||
{#each widgets as item}
|
||||
<div class="wrapper">
|
||||
<FontIcon icon={item.icon} />
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
<style>
|
||||
.wrapper {
|
||||
font-size: 23pt;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user