electron menu, about dialog

This commit is contained in:
Jan Prochazka 2021-03-17 19:04:28 +01:00
parent 08b5bce03c
commit 73bfac2bfb
5 changed files with 179 additions and 100 deletions

View File

@ -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'),
],
},
];

View File

@ -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),
});

View 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>

View 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>

View File

@ -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();