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

moved some widgets to elements

Browse Source
This commit is contained in:
Jan Prochazka
2021-03-06 08:09:29 +01:00
parent dcfd6ee1dc
commit 78d71602bf
20 changed files with 19 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/web/src/widgets/ConnectionList.svelte
View File

@@ -1,10 +1,10 @@
<script lang="ts">
import _ from 'lodash';
import InlineButton from './InlineButton.svelte';
import SearchInput from './SearchInput.svelte';
import InlineButton from '../elements/InlineButton.svelte';
import SearchInput from '../elements/SearchInput.svelte';
import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
import { useConnectionList, useServerStatus } from '../utility/metadataLoaders';
import SearchBoxWrapper from './SearchBoxWrapper.svelte';
import SearchBoxWrapper from '../elements/SearchBoxWrapper.svelte';
import AppObjectList from '../appobj/AppObjectList.svelte';
import * as connectionAppObject from '../appobj/ConnectionAppObject.svelte';
import SubDatabaseList from '../appobj/SubDatabaseList.svelte';

22
packages/web/src/widgets/DropDownButton.svelte
View File

@@ -1,22 +0,0 @@
<script lang="ts">
import _ from 'lodash';
import FontIcon from '../icons/FontIcon.svelte';
import { currentDropDownMenu } from '../stores';
import InlineButton from './InlineButton.svelte';
export let icon = 'icon chevron-down';
export let menu;
let domButton;
function handleClick() {
const rect = domButton.getBoundingClientRect();
const left = rect.left;
const top = rect.bottom;
currentDropDownMenu.set({ left, top, items: _.isFunction(menu) ? menu() : menu });
}
</script>
<InlineButton square on:click={handleClick} bind:this={domButton}>
<FontIcon {icon} />
</InlineButton>

38
packages/web/src/widgets/ErrorInfo.svelte
View File

@@ -1,38 +0,0 @@
<script lang="ts">
import FontIcon from '../icons/FontIcon.svelte';
export let message;
export let icon = 'img error';
export let isSmall = false;
</script>
{#if isSmall}
<div class="container-small">
<FontIcon {icon} />
{message}
</div>
{:else}
<div class="container">
<div class="icon">
<FontIcon {icon} />
</div>
{message}
</div>
{/if}
<style>
.container {
display: flex;
align-items: center;
margin-right: 10px;
}
.icon {
font-size: 20pt;
margin: 10px;
}
.container-small {
display: flex;
margin-right: 10px;
}
</style>

38
packages/web/src/widgets/FormStyledButton.svelte
View File

@@ -1,38 +0,0 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
export let type = 'button';
export let disabled = false;
export let value;
function handleClick() {
if (!disabled) dispatch('click');
}
</script>
<input {type} {value} class:disabled {...$$restProps} on:click={handleClick} />
<style>
input {
border: 1px solid var(--theme-bg-button-inv-2);
padding: 5px;
margin: 2px;
width: 100px;
background-color: var(--theme-bg-button-inv);
color: var(--theme-font-inv-1);
border-radius: 2px;
}
input:hover:not(.disabled) {
background-color: var(--theme-bg-button-inv-2);
}
input:active:not(.disabled) {
background-color: var(--theme-bg-button-inv-3);
}
input.disabled {
background-color: var(--theme-bg-button-inv-3);
color: var(--theme-font-inv-3);
}
</style>

59
packages/web/src/widgets/InlineButton.svelte
View File

@@ -1,59 +0,0 @@
<script lang="ts">
export let disabled = false;
export let square = false;
let domButton;
export function getBoundingClientRect() {
return domButton.getBoundingClientRect();
}
</script>
<div class="outer buttonLike" class:disabled class:square on:click bind:this={domButton}>
<div class="inner">
<slot />
</div>
</div>
<style>
.outer {
--bg-1: var(--theme-bg-1);
--bg-2: var(--theme-bg-3);
background: linear-gradient(to bottom, var(--bg-1) 5%, var(--bg-2) 100%);
background-color: var(--bg-1);
border: 1px solid var(--bg-2);
display: inline-block;
cursor: pointer;
vertical-align: middle;
color: var(--theme-font-1);
font-size: 12px;
padding: 3px;
margin: 0;
text-decoration: none;
display: flex;
}
.outer.disabled {
color: var(--theme-font-3);
}
.outer:hover:not(.disabled) {
border: 1px solid var(--theme-font-1);
}
.outer:active:not(.disabled) {
background: linear-gradient(to bottom, var(--bg-2) 5%, var(--bg-1) 100%);
background-color: var(--bg-2);
}
.inner {
margin: auto;
flex: 1;
text-align: center;
}
.square {
width: 18px;
}
</style>

54
packages/web/src/widgets/LoadingInfo.svelte
View File

@@ -1,54 +0,0 @@
<script lang="ts">
import FontIcon from '../icons/FontIcon.svelte';
export let message;
export let wrapper = false;
</script>
{#if wrapper}
<div class="wrapper">
<div class="box">
<div class="container">
<div class="spinner">
<FontIcon icon="icon loading" />
</div>
{message}
</div>
</div>
</div>
{:else}
<div class="container">
<div class="spinner">
<FontIcon icon="icon loading" />
</div>
{message}
</div>
{/if}
<style>
.container {
display: flex;
align-items: center;
margin-right: 10px;
}
.spinner {
font-size: 20pt;
margin: 10px;
}
.wrapper {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: space-around;
}
.box {
background-color: var(--theme-bg-2);
padding: 10px;
border: 1px solid var(--theme-border);
}
</style>

8
packages/web/src/widgets/SearchBoxWrapper.svelte
View File

@@ -1,8 +0,0 @@
<div><slot /></div>
<style>
div {
display: flex;
margin-bottom: 5px;
}
</style>

32
packages/web/src/widgets/SearchInput.svelte
View File

@@ -1,32 +0,0 @@
<script lang="ts">
import keycodes from '../utility/keycodes';
export let placeholder;
export let value;
let domInput;
function handleKeyDown(e) {
if (e.keyCode == keycodes.escape) {
value = '';
}
}
</script>
<input
type="text"
{placeholder}
bind:value
on:keydown={handleKeyDown}
bind:this={domInput}
on:focus={e => domInput.select()}
/>
<style>
input {
flex: 1;
min-width: 10px;
width: 10px;
border: none;
}
</style>

10
packages/web/src/widgets/SqlObjectList.svelte
View File

@@ -1,17 +1,17 @@
<script lang="ts">
import InlineButton from './InlineButton.svelte';
import SearchInput from './SearchInput.svelte';
import InlineButton from '../elements/InlineButton.svelte';
import SearchInput from '../elements/SearchInput.svelte';
import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
import { useDatabaseInfo, useDatabaseStatus } from '../utility/metadataLoaders';
import SearchBoxWrapper from './SearchBoxWrapper.svelte';
import SearchBoxWrapper from '../elements/SearchBoxWrapper.svelte';
import AppObjectList from '../appobj/AppObjectList.svelte';
import _ from 'lodash';
import * as databaseObjectAppObject from '../appobj/DatabaseObjectAppObject.svelte';
import SubColumnParamList from '../appobj/SubColumnParamList.svelte';
import { chevronExpandIcon } from '../icons/expandIcons';
import ErrorInfo from './ErrorInfo.svelte';
import ErrorInfo from '../elements/ErrorInfo.svelte';
import axios from '../utility/axios';
import LoadingInfo from './LoadingInfo.svelte';
import LoadingInfo from '../elements/LoadingInfo.svelte';
export let conid;
export let database;

2
packages/web/src/widgets/SqlObjectListWrapper.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts">
import _ from 'lodash';
import { currentDatabase } from '../stores';
import ErrorInfo from './ErrorInfo.svelte';
import ErrorInfo from '../elements/ErrorInfo.svelte';
import SqlObjectList from './SqlObjectList.svelte';
import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';

93
packages/web/src/widgets/TabControl.svelte
View File

@@ -1,93 +0,0 @@
<script lang="ts">
interface TabDef {
label: string;
slot?: number;
component?: any;
props?: any;
}
export let tabs: TabDef[];
export let value = 0;
export let isInline = false;
</script>
<div class="main">
<div class="tabs">
{#each tabs as tab, index}
<div class="tab-item" class:selected={value == index} on:click={() => (value = index)}>
<span class="ml-2">
{tab.label}
</span>
</div>
{/each}
</div>
<div class="content-container">
{#each tabs as tab, index}
<div class="container" class:isInline class:tabVisible={index == value}>
<svelte:component this={tab.component} {...tab.props} />
{#if tab.slot == 0}<slot name="0" />{/if}
{#if tab.slot == 1}<slot name="1" />{/if}
{#if tab.slot == 2}<slot name="2" />{/if}
{#if tab.slot == 3}<slot name="3" />{/if}
{#if tab.slot == 4}<slot name="4" />{/if}
{#if tab.slot == 5}<slot name="5" />{/if}
{#if tab.slot == 6}<slot name="6" />{/if}
{#if tab.slot == 7}<slot name="7" />{/if}
</div>
{/each}
</div>
</div>
<style>
.main {
display: flex;
flex: 1;
flex-direction: column;
}
.tabs {
display: flex;
height: var(--dim-tabs-height);
right: 0;
background-color: var(--theme-bg-2);
}
.tab-item {
border-right: 1px solid var(--theme-border);
padding-left: 15px;
padding-right: 15px;
display: flex;
align-items: center;
cursor: pointer;
}
/* .tab-item:hover {
color: ${props => props.theme.tabs_font_hover};
} */
.tab-item.selected {
background-color: var(--theme-bg-1);
}
.content-container {
flex: 1;
position: relative;
}
.container:not(.isInline) {
position: absolute;
display: flex;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.container:not(.tabVisible):not(.isInline) {
visibility: hidden;
}
.container.isInline:not(.tabVisible) {
display: none;
}
</style>