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

buttons folder

Browse Source
This commit is contained in:
Jan Prochazka
2022-02-12 17:26:28 +01:00
parent 5a88423f62
commit e06b030707
74 changed files with 81 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/web/src/elements/CheckableColumnList.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
import FormStyledButton from './FormStyledButton.svelte';
import FormStyledButton from '../buttons/FormStyledButton.svelte';
export let selectedColumns;
export let allColumns;

19
packages/web/src/elements/CloseSearchButton.svelte
View File

@@ -1,19 +0,0 @@
<script lang="ts">
import FontIcon from '../icons/FontIcon.svelte';
import InlineButton from './InlineButton.svelte';
export let filter;
</script>
{#if filter}
<InlineButton
on:click
on:click={() => {
filter = '';
}}
title="Clear filter"
>
<FontIcon icon="icon close" />
</InlineButton>
{/if}

23
packages/web/src/elements/DropDownButton.svelte
View File

@@ -1,23 +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;
export let narrow = false;
let domButton;
function handleClick() {
const rect = domButton.getBoundingClientRect();
const left = rect.left;
const top = rect.bottom;
currentDropDownMenu.set({ left, top, items: menu });
}
</script>
<InlineButton square {narrow} on:click={handleClick} bind:this={domButton}>
<FontIcon {icon} />
</InlineButton>

38
packages/web/src/elements/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>

30
packages/web/src/elements/FormStyledButtonLikeLabel.svelte
View File

@@ -1,30 +0,0 @@
<script lang="ts">
export let disabled = false;
</script>
<label {...$$props} class:disabled>
<slot />
</label>
<style>
label {
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;
}
label:hover:not(.disabled) {
background-color: var(--theme-bg-button-inv-2);
}
label:active:not(.disabled) {
background-color: var(--theme-bg-button-inv-3);
}
label.disabled {
background-color: var(--theme-bg-button-inv-3);
color: var(--theme-font-inv-3);
}
</style>

65
packages/web/src/elements/InlineButton.svelte
View File

@@ -1,65 +0,0 @@
<script lang="ts">
export let disabled = false;
export let square = false;
export let narrow = false;
export let title = null;
let domButton;
export function getBoundingClientRect() {
return domButton.getBoundingClientRect();
}
</script>
<div class="outer buttonLike" {title} class:disabled class:square class:narrow 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;
}
.narrow {
padding: 3px 1px;
}
.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/elements/LargeButton.svelte
View File

@@ -1,54 +0,0 @@
<script lang="ts">
import FontIcon from '../icons/FontIcon.svelte';
import { createEventDispatcher } from 'svelte';
export let icon;
export let disabled = false;
const dispatch = createEventDispatcher();
function handleClick() {
if (!disabled) dispatch('click');
}
</script>
<div class="button" on:click={handleClick} class:disabled>
<div class="icon">
<FontIcon {icon} />
</div>
<div class="inner">
<slot />
</div>
</div>
<style>
.button {
padding: 5px 15px;
color: var(--theme-font-1);
border: 1px solid var(--theme-border);
width: 120px;
height: 60px;
background-color: var(--theme-bg-1);
}
.button:not(.disabled):hover {
background-color: var(--theme-bg-2);
}
.button:not(.disabled):active {
background-color: var(--theme-bg-3);
}
.button.disabled {
color: var(--theme-font-3);
}
.icon {
font-size: 30px;
text-align: center;
}
.inner {
text-align: center;
}
</style>

2
packages/web/src/elements/Pager.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
import InlineButton from '../elements/InlineButton.svelte';
import InlineButton from '../buttons/InlineButton.svelte';
import TextField from '../forms/TextField.svelte';
import FontIcon from '../icons/FontIcon.svelte';
import { createEventDispatcher } from 'svelte';

3
packages/web/src/elements/QueryDesignColumns.svelte
View File

@@ -7,13 +7,12 @@
</script>
<script>
import { map } from 'lodash';
import DataFilterControl from '../datagrid/DataFilterControl.svelte';
import { findDesignerFilterType } from '../designer/designerTools';
import CheckboxField from '../forms/CheckboxField.svelte';
import SelectField from '../forms/SelectField.svelte';
import TextField from '../forms/TextField.svelte';
import InlineButton from './InlineButton.svelte';
import InlineButton from '../buttons/InlineButton.svelte';
import TableControl from './TableControl.svelte';

2
packages/web/src/elements/TabControl.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import _ from 'lodash';
import DropDownButton from './DropDownButton.svelte';
import DropDownButton from '../buttons/DropDownButton.svelte';
interface TabDef {
label: string;