mirror of
https://github.com/dbgate/dbgate
synced 2024-11-07 20:26:23 +00:00
electron menu, about dialog
This commit is contained in:
parent
08b5bce03c
commit
73bfac2bfb
@ -63,22 +63,7 @@ function buildMenu() {
|
||||
},
|
||||
},
|
||||
commandItem('group.save'),
|
||||
// {
|
||||
// label: 'Save',
|
||||
// click() {
|
||||
// mainWindow.webContents.executeJavaScript(`dbgate_tabCommand('save')`);
|
||||
// },
|
||||
// accelerator: 'Ctrl+S',
|
||||
// id: 'save',
|
||||
// },
|
||||
{
|
||||
label: 'Save As',
|
||||
click() {
|
||||
mainWindow.webContents.executeJavaScript(`dbgate_tabCommand('saveAs')`);
|
||||
},
|
||||
accelerator: 'Ctrl+Shift+S',
|
||||
id: 'saveAs',
|
||||
},
|
||||
commandItem('group.saveAs'),
|
||||
{ type: 'separator' },
|
||||
{ role: 'close' },
|
||||
],
|
||||
@ -86,19 +71,10 @@ function buildMenu() {
|
||||
{
|
||||
label: 'Window',
|
||||
submenu: [
|
||||
{
|
||||
label: 'New query',
|
||||
click() {
|
||||
mainWindow.webContents.executeJavaScript(`dbgate_newQuery()`);
|
||||
},
|
||||
},
|
||||
commandItem('new.query'),
|
||||
{ type: 'separator' },
|
||||
{
|
||||
label: 'Close all tabs',
|
||||
click() {
|
||||
mainWindow.webContents.executeJavaScript('dbgate_closeAll()');
|
||||
},
|
||||
},
|
||||
|
||||
commandItem('tabs.closeAll'),
|
||||
{ role: 'minimize' },
|
||||
],
|
||||
},
|
||||
@ -155,12 +131,7 @@ function buildMenu() {
|
||||
require('electron').shell.openExternal('https://github.com/dbgate/dbgate/issues/new');
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'About',
|
||||
click() {
|
||||
mainWindow.webContents.executeJavaScript(`dbgate_showAbout()`);
|
||||
},
|
||||
},
|
||||
commandItem('about.show'),
|
||||
],
|
||||
},
|
||||
];
|
||||
|
@ -3,6 +3,7 @@ import registerCommand from './registerCommand';
|
||||
import { derived, get } from 'svelte/store';
|
||||
import { ThemeDefinition } from 'dbgate-types';
|
||||
import ConnectionModal from '../modals/ConnectionModal.svelte';
|
||||
import AboutModal from '../modals/AboutModal.svelte';
|
||||
import { showModal } from '../modals/modalTools';
|
||||
import newQuery from '../query/newQuery';
|
||||
import saveTabFile from '../utility/saveTabFile';
|
||||
@ -45,6 +46,14 @@ registerCommand({
|
||||
testEnabled: () => getVisibleToolbar(),
|
||||
});
|
||||
|
||||
registerCommand({
|
||||
id: 'about.show',
|
||||
category: 'About',
|
||||
name: 'Show',
|
||||
toolbarName: 'About',
|
||||
onClick: () => showModal(AboutModal),
|
||||
});
|
||||
|
||||
registerCommand({
|
||||
id: 'new.connection',
|
||||
toolbar: true,
|
||||
@ -118,6 +127,15 @@ registerCommand({
|
||||
group: 'save',
|
||||
});
|
||||
|
||||
registerCommand({
|
||||
id: 'group.saveAs',
|
||||
category: null,
|
||||
isGroupCommand: true,
|
||||
name: 'Save As',
|
||||
keyText: 'Ctrl+Shift+S',
|
||||
group: 'saveAs',
|
||||
});
|
||||
|
||||
export function registerFileCommands({
|
||||
idPrefix,
|
||||
category,
|
||||
@ -142,9 +160,9 @@ export function registerFileCommands({
|
||||
});
|
||||
registerCommand({
|
||||
id: idPrefix + '.saveAs',
|
||||
group: 'saveAs',
|
||||
category,
|
||||
name: 'Save As',
|
||||
keyText: 'Ctrl+Shift+S',
|
||||
testEnabled: () => getCurrentEditor() != null,
|
||||
onClick: () => saveTabFile(getCurrentEditor(), true, folder, format, fileExtension),
|
||||
});
|
||||
|
28
packages/web/src/elements/Link.svelte
Normal file
28
packages/web/src/elements/Link.svelte
Normal file
@ -0,0 +1,28 @@
|
||||
<script lang="ts">
|
||||
import getElectron from '../utility/getElectron';
|
||||
|
||||
export let href;
|
||||
|
||||
const electron = getElectron();
|
||||
</script>
|
||||
|
||||
{#if electron}
|
||||
<a on:click={() => electron.shell.openExternal(href)}>
|
||||
<slot />
|
||||
</a>
|
||||
{:else}
|
||||
<a {href} target="_blank" rel="noopener noreferrer">
|
||||
<slot />
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
a {
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
color: var(--theme-font-link);
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
53
packages/web/src/modals/AboutModal.svelte
Normal file
53
packages/web/src/modals/AboutModal.svelte
Normal file
@ -0,0 +1,53 @@
|
||||
<script lang="ts">
|
||||
import FormStyledButton from '../elements/FormStyledButton.svelte';
|
||||
import { useConfig } from '../utility/metadataLoaders';
|
||||
import moment from 'moment';
|
||||
|
||||
import ModalBase from './ModalBase.svelte';
|
||||
import { closeCurrentModal } from './modalTools';
|
||||
import Link from '../elements/Link.svelte';
|
||||
|
||||
const config = useConfig();
|
||||
$: version = $config.version;
|
||||
$: buildTime = $config.buildTime;
|
||||
</script>
|
||||
|
||||
<ModalBase {...$$restProps}>
|
||||
<svelte:fragment slot="header">About DbGate</svelte:fragment>
|
||||
<div class="flex">
|
||||
<img src="/logo192.png" />
|
||||
<div>
|
||||
<div class="m-1">
|
||||
Version: <span>{version}</span>
|
||||
</div>
|
||||
<div class="m-1">
|
||||
Build date: <span>{moment(buildTime).format('YYYY-MM-DD')}</span>
|
||||
</div>
|
||||
<div class="m-1">
|
||||
Web: <Link href="https://dbgate.org">dbgate.org</Link>
|
||||
</div>
|
||||
<div class="m-1">
|
||||
Source codes: <Link href="https://github.com/dbgate/dbgate/">github</Link>
|
||||
</div>
|
||||
<div class="m-1">
|
||||
Docker container: <Link href="https://hub.docker.com/r/dbgate/dbgate">docker hub</Link>
|
||||
</div>
|
||||
<div class="m-1">
|
||||
Online demo: <Link href="https://demo.dbgate.org">demo.dbgate.org</Link>
|
||||
</div>
|
||||
<div class="m-1">
|
||||
Search plugins: <Link href="https://www.npmjs.com/search?q=keywords:dbgateplugin">npmjs.com</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<svelte:fragment slot="footer">
|
||||
<FormStyledButton value="Close" on:click={closeCurrentModal} />
|
||||
</svelte:fragment>
|
||||
</ModalBase>
|
||||
|
||||
<style>
|
||||
span {
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
@ -1,69 +1,4 @@
|
||||
<script lang="ts" context="module">
|
||||
function getTabDbName(tab) {
|
||||
if (tab.props && tab.props.conid && tab.props.database) return tab.props.database;
|
||||
if (tab.props && tab.props.archiveFolder) return tab.props.archiveFolder;
|
||||
return '(no DB)';
|
||||
}
|
||||
|
||||
function getTabDbKey(tab) {
|
||||
if (tab.props && tab.props.conid && tab.props.database)
|
||||
return `database://${tab.props.database}-${tab.props.conid}`;
|
||||
if (tab.props && tab.props.archiveFolder) return `archive://${tab.props.archiveFolder}`;
|
||||
return '_no';
|
||||
}
|
||||
|
||||
function getDbIcon(key) {
|
||||
if (key.startsWith('database://')) return 'icon database';
|
||||
if (key.startsWith('archive://')) return 'icon archive';
|
||||
return 'icon file';
|
||||
}
|
||||
|
||||
registerCommand({
|
||||
id: 'tabs.nextTab',
|
||||
category: 'Tabs',
|
||||
name: 'Next tab',
|
||||
keyText: 'Ctrl+Tab',
|
||||
testEnabled: () => getOpenedTabs().filter(x => !x.closedTime).length >= 2,
|
||||
onClick: () => {
|
||||
const tabs = get(openedTabs).filter(x => x.closedTime == null);
|
||||
if (tabs.length >= 2) setSelectedTab(tabs[tabs.length - 2].tabid);
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import _ from 'lodash';
|
||||
import { derived, get } from 'svelte/store';
|
||||
import registerCommand from '../commands/registerCommand';
|
||||
import FontIcon from '../icons/FontIcon.svelte';
|
||||
|
||||
import { currentDatabase, getOpenedTabs, openedTabs } from '../stores';
|
||||
import { setSelectedTab } from '../utility/common';
|
||||
import contextMenu from '../utility/contextMenu';
|
||||
|
||||
$: currentDbKey =
|
||||
$currentDatabase && $currentDatabase.name && $currentDatabase.connection
|
||||
? `database://${$currentDatabase.name}-${$currentDatabase.connection._id}`
|
||||
: '_no';
|
||||
|
||||
$: tabsWithDb = $openedTabs
|
||||
.filter(x => !x.closedTime)
|
||||
.map(tab => ({
|
||||
...tab,
|
||||
tabDbName: getTabDbName(tab),
|
||||
tabDbKey: getTabDbKey(tab),
|
||||
}));
|
||||
|
||||
$: tabsByDb = _.groupBy(tabsWithDb, 'tabDbKey');
|
||||
$: dbKeys = _.keys(tabsByDb).sort();
|
||||
|
||||
const handleTabClick = (e, tabid) => {
|
||||
if (e.target.closest('.tabCloseButton')) {
|
||||
return;
|
||||
}
|
||||
setSelectedTab(tabid);
|
||||
};
|
||||
|
||||
const closeTabFunc = closeCondition => tabid => {
|
||||
openedTabs.update(files => {
|
||||
const active = files.find(x => x.tabid == tabid);
|
||||
@ -109,6 +44,80 @@
|
||||
_.get(x, 'props.database') != _.get(active, 'props.database')
|
||||
);
|
||||
const closeOthers = closeTabFunc((x, active) => x.tabid != active.tabid);
|
||||
|
||||
function getTabDbName(tab) {
|
||||
if (tab.props && tab.props.conid && tab.props.database) return tab.props.database;
|
||||
if (tab.props && tab.props.archiveFolder) return tab.props.archiveFolder;
|
||||
return '(no DB)';
|
||||
}
|
||||
|
||||
function getTabDbKey(tab) {
|
||||
if (tab.props && tab.props.conid && tab.props.database)
|
||||
return `database://${tab.props.database}-${tab.props.conid}`;
|
||||
if (tab.props && tab.props.archiveFolder) return `archive://${tab.props.archiveFolder}`;
|
||||
return '_no';
|
||||
}
|
||||
|
||||
function getDbIcon(key) {
|
||||
if (key.startsWith('database://')) return 'icon database';
|
||||
if (key.startsWith('archive://')) return 'icon archive';
|
||||
return 'icon file';
|
||||
}
|
||||
|
||||
registerCommand({
|
||||
id: 'tabs.nextTab',
|
||||
category: 'Tabs',
|
||||
name: 'Next tab',
|
||||
keyText: 'Ctrl+Tab',
|
||||
testEnabled: () => getOpenedTabs().filter(x => !x.closedTime).length >= 2,
|
||||
onClick: () => {
|
||||
const tabs = get(openedTabs).filter(x => x.closedTime == null);
|
||||
if (tabs.length >= 2) setSelectedTab(tabs[tabs.length - 2].tabid);
|
||||
},
|
||||
});
|
||||
|
||||
registerCommand({
|
||||
id: 'tabs.closeAll',
|
||||
category: 'Tabs',
|
||||
name: 'Close all tabs',
|
||||
testEnabled: () => getOpenedTabs().filter(x => !x.closedTime).length >= 1,
|
||||
onClick: closeAll,
|
||||
});
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import _ from 'lodash';
|
||||
import { derived, get } from 'svelte/store';
|
||||
import registerCommand from '../commands/registerCommand';
|
||||
import FontIcon from '../icons/FontIcon.svelte';
|
||||
|
||||
import { currentDatabase, getOpenedTabs, openedTabs } from '../stores';
|
||||
import { setSelectedTab } from '../utility/common';
|
||||
import contextMenu from '../utility/contextMenu';
|
||||
|
||||
$: currentDbKey =
|
||||
$currentDatabase && $currentDatabase.name && $currentDatabase.connection
|
||||
? `database://${$currentDatabase.name}-${$currentDatabase.connection._id}`
|
||||
: '_no';
|
||||
|
||||
$: tabsWithDb = $openedTabs
|
||||
.filter(x => !x.closedTime)
|
||||
.map(tab => ({
|
||||
...tab,
|
||||
tabDbName: getTabDbName(tab),
|
||||
tabDbKey: getTabDbKey(tab),
|
||||
}));
|
||||
|
||||
$: tabsByDb = _.groupBy(tabsWithDb, 'tabDbKey');
|
||||
$: dbKeys = _.keys(tabsByDb).sort();
|
||||
|
||||
const handleTabClick = (e, tabid) => {
|
||||
if (e.target.closest('.tabCloseButton')) {
|
||||
return;
|
||||
}
|
||||
setSelectedTab(tabid);
|
||||
};
|
||||
|
||||
const handleMouseUp = (e, tabid) => {
|
||||
if (e.button == 1) {
|
||||
e.preventDefault();
|
||||
|
Loading…
Reference in New Issue
Block a user