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

#63 - keyboard modal, settings icon

Browse Source
This commit is contained in:
Jan Prochazka
2021-04-11 09:04:50 +02:00
parent 12fd5f6943
commit 1d401e302a
6 changed files with 122 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
packages/web/src/widgets/WidgetIconPanel.svelte
View File

@@ -1,7 +1,9 @@
<script lang="ts">
import { update } from 'lodash';
import FontIcon from '../icons/FontIcon.svelte';
import { selectedWidget, visibleCommandPalette, visibleToolbar } from '../stores';
import { currentDropDownMenu, selectedWidget, visibleCommandPalette, visibleToolbar } from '../stores';
let domSettings;
const widgets = [
{
@@ -39,7 +41,7 @@
title: 'Selected cell data detail view',
},
// {
// icon: 'fa-cog',
// icon: 'icon settings',
// name: 'settings',
// },
// {
@@ -52,18 +54,34 @@
$selectedWidget = name == $selectedWidget ? null : name;
}
//const handleChangeWidget= e => (selectedWidget.set(item.name))
function handleSettingsMenu() {
const rect = domSettings.getBoundingClientRect();
const left = rect.right;
const top = rect.top;
const items = [{ command: 'settings.commands' }];
currentDropDownMenu.set({ left, top, items });
}
</script>
{#if !$visibleToolbar}
<div class="wrapper mb-3" on:click={() => ($visibleCommandPalette = true)}>
<FontIcon icon="icon menu" />
<div class="main">
{#if !$visibleToolbar}
<div class="wrapper mb-3" on:click={() => ($visibleCommandPalette = true)}>
<FontIcon icon="icon menu" />
</div>
{/if}
{#each widgets as item}
<div class="wrapper" class:selected={item.name == $selectedWidget} on:click={() => handleChangeWidget(item.name)}>
<FontIcon icon={item.icon} title={item.title} />
</div>
{/each}
<div class="flex1">&nbsp;</div>
<div class="wrapper" on:click={handleSettingsMenu} bind:this={domSettings}>
<FontIcon icon="icon settings" />
</div>
{/if}
{#each widgets as item}
<div class="wrapper" class:selected={item.name == $selectedWidget} on:click={() => handleChangeWidget(item.name)}>
<FontIcon icon={item.icon} title={item.title} />
</div>
{/each}
</div>
<style>
.wrapper {
@@ -81,4 +99,9 @@
color: var(--theme-font-inv-1);
background: var(--theme-bg-inv-3);
}
.main {
display: flex;
flex: 1;
flex-direction: column;
}
</style>