dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-19 08:26:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

toolbar shows tab related commands aligned to right

Browse Source
This commit is contained in:
Jan Prochazka
2021-04-30 20:35:43 +02:00
parent 14bbc7b057
commit 8baad56315
9 changed files with 78 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
packages/web/src/widgets/Toolbar.svelte
View File

@@ -10,7 +10,8 @@
import _ from 'lodash';
import { openFavorite } from '../appobj/FavoriteFileAppObject.svelte';
import runCommand from '../commands/runCommand';
import { commands, commandsCustomized } from '../stores';
import FontIcon from '../icons/FontIcon.svelte';
import { activeTab, commands, commandsCustomized } from '../stores';
import getElectron from '../utility/getElectron';
import { useFavorites } from '../utility/metadataLoaders';
import ToolbarButton from './ToolbarButton.svelte';
@@ -25,26 +26,48 @@
);
</script>
<div class="container">
{#if !electron}
<ToolbarButton externalImage="logo192.png" on:click={() => runCommand('about.show')} />
{/if}
{#each ($favorites || []).filter(x => x.showInToolbar) as item}
<ToolbarButton on:click={() => openFavorite(item)} icon={item.icon || 'icon favorite'}>
{item.title}
</ToolbarButton>
{/each}
<div class="root">
<div class="container">
{#if !electron}
<ToolbarButton externalImage="logo192.png" on:click={() => runCommand('about.show')} />
{/if}
{#each ($favorites || []).filter(x => x.showInToolbar) as item}
<ToolbarButton on:click={() => openFavorite(item)} icon={item.icon || 'icon favorite'}>
{item.title}
</ToolbarButton>
{/each}
{#each list as command}
<ToolbarButton
icon={command.icon}
on:click={command.onClick}
disabled={!command.enabled}
title={getCommandTitle(command)}
>
{command.toolbarName || command.name}
</ToolbarButton>
{/each}
{#each list.filter(x => !x.isRelatedToTab) as command}
<ToolbarButton
icon={command.icon}
on:click={command.onClick}
disabled={!command.enabled}
title={getCommandTitle(command)}
>
{command.toolbarName || command.name}
</ToolbarButton>
{/each}
</div>
<div class="container">
{#if $activeTab && list.filter(x => x.isRelatedToTab).length > 0}
<div class="activeTab">
<div class="activeTabInner">
<FontIcon icon={$activeTab.icon} />
{$activeTab.title}:
</div>
</div>
{/if}
{#each list.filter(x => x.isRelatedToTab) as command}
<ToolbarButton
icon={command.icon}
on:click={command.onClick}
disabled={!command.enabled}
title={getCommandTitle(command)}
>
{command.toolbarName || command.name}
</ToolbarButton>
{/each}
</div>
</div>
<style>
@@ -54,4 +77,21 @@
align-items: stretch;
height: var(--dim-toolbar-height);
}
.root {
display: flex;
align-items: stretch;
justify-content: space-between;
}
.activeTab {
background-color: var(--theme-bg-2);
white-space: nowrap;
display: flex;
padding-left: 15px;
padding-right: 15px;
}
.activeTabInner {
align-self: center;
}
</style>