mirror of https://github.com/Budibase/budibase.git
Andrew Kingston
5 years ago
35 changed files with 262 additions and 410 deletions
@ -1,59 +0,0 @@ |
|||
<script> |
|||
export let onClose |
|||
export let dark = false |
|||
export let small = false |
|||
</script> |
|||
|
|||
<button class:small class:dark on:click={onClose}>×</button> |
|||
|
|||
<style> |
|||
button { |
|||
display: block; |
|||
box-sizing: border-box; |
|||
position: absolute; |
|||
font-size: var(--font-size-l); |
|||
z-index: 1000; |
|||
top: var(--spacing-l); |
|||
right: var(--spacing-l); |
|||
margin: 0; |
|||
padding: 0; |
|||
width: 1.5rem; |
|||
height: 1.5rem; |
|||
border: 0; |
|||
color: black; |
|||
border-radius: var(--border-radius-xl); |
|||
background: white; |
|||
transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1), |
|||
background 0.2s cubic-bezier(0.25, 0.1, 0.25, 1); |
|||
-webkit-appearance: none; |
|||
outline: none; |
|||
} |
|||
|
|||
button:hover { |
|||
background-color: var(--grey-2); |
|||
cursor: pointer; |
|||
} |
|||
|
|||
button:active { |
|||
background-color: var(--grey-4); |
|||
cursor: pointer; |
|||
} |
|||
.small { |
|||
font-size: var(--font-size-m); |
|||
line-height: 110%; |
|||
width: 1.3rem; |
|||
height: 1.3rem; |
|||
} |
|||
.dark { |
|||
color: white; |
|||
background: black; |
|||
} |
|||
.dark:hover { |
|||
background-color: var(--grey-8); |
|||
cursor: pointer; |
|||
} |
|||
.dark:active { |
|||
background-color: var(--grey-9); |
|||
cursor: pointer; |
|||
} |
|||
</style> |
|||
@ -1,36 +0,0 @@ |
|||
<script> |
|||
import { View } from "svench"; |
|||
import Close from "./Close.svelte"; |
|||
</script> |
|||
|
|||
<style> |
|||
div { |
|||
display: block; |
|||
position: relative; |
|||
min-width: 400px; |
|||
height: 200px; |
|||
border: var(--border-dark); |
|||
border-radius: var(--border-radius-l); |
|||
} |
|||
</style> |
|||
|
|||
<View name="default"> |
|||
<div> |
|||
<Close /> |
|||
</div> |
|||
</View> |
|||
<View name="dark color"> |
|||
<div> |
|||
<Close dark /> |
|||
</div> |
|||
</View> |
|||
<View name="small"> |
|||
<div> |
|||
<Close small /> |
|||
</div> |
|||
</View> |
|||
<View name="small dark"> |
|||
<div> |
|||
<Close small dark /> |
|||
</div> |
|||
</View> |
|||
@ -1,10 +1,19 @@ |
|||
<script> |
|||
export let s = false; |
|||
export let disabled; |
|||
export let small = false |
|||
export let disabled |
|||
</script> |
|||
|
|||
<button on:click class="spectrum-ClearButton" class:spectrum-ClearButton--small={s} {disabled}> |
|||
<svg class="spectrum-Icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true"> |
|||
<use xlink:href="#spectrum-css-icon-Cross75" /> |
|||
</svg> |
|||
</button> |
|||
<button |
|||
on:click |
|||
class="spectrum-ClearButton" |
|||
class:spectrum-ClearButton--small={small} |
|||
{disabled} |
|||
> |
|||
<svg |
|||
class="spectrum-Icon spectrum-UIIcon-Cross75" |
|||
focusable="false" |
|||
aria-hidden="true" |
|||
> |
|||
<use xlink:href="#spectrum-css-icon-Cross75" /> |
|||
</svg> |
|||
</button> |
|||
|
|||
@ -0,0 +1,40 @@ |
|||
<div class="drawer-contents"> |
|||
<div class="container" data-cy="binding-dropdown-modal"> |
|||
<div class="sidebar"> |
|||
<slot name="sidebar" /> |
|||
</div> |
|||
<div class="main"> |
|||
<slot name="main" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<style> |
|||
.drawer-contents { |
|||
height: 40vh; |
|||
overflow-y: auto; |
|||
} |
|||
.container { |
|||
height: 100%; |
|||
display: grid; |
|||
grid-template-columns: 290px 1fr; |
|||
} |
|||
.sidebar { |
|||
border-right: var(--border-light); |
|||
overflow: auto; |
|||
} |
|||
|
|||
.sidebar::-webkit-scrollbar { |
|||
display: none; |
|||
} |
|||
|
|||
.main { |
|||
font-family: var(--font-sans); |
|||
} |
|||
.main :global(textarea) { |
|||
min-height: 200px; |
|||
} |
|||
.main :global(p) { |
|||
margin: 0; |
|||
} |
|||
</style> |
|||
@ -1,50 +0,0 @@ |
|||
<script> |
|||
export let href, |
|||
icon, |
|||
title, |
|||
active = false |
|||
</script> |
|||
|
|||
<a {href} target="_blank" class="nav-item" class:active> |
|||
{#if icon} |
|||
<span class="nav-item-icon"> |
|||
<svelte:component this={icon} /> |
|||
</span> |
|||
{/if} |
|||
{#if title} |
|||
<div class="nav-item-title">{title}</div> |
|||
{/if} |
|||
</a> |
|||
|
|||
<style> |
|||
.nav-item { |
|||
cursor: pointer; |
|||
padding: 12px; |
|||
height: 2rem; |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
border-radius: var(--border-radius-s); |
|||
} |
|||
|
|||
.nav-item:hover { |
|||
background-color: var(--grey-1); |
|||
} |
|||
|
|||
.nav-item-title { |
|||
font-family: var(--font-sans); |
|||
font-size: var(--font-size-xs); |
|||
color: var(--ink); |
|||
font-weight: 400; |
|||
margin-left: 12px; |
|||
} |
|||
|
|||
.nav-item-icon { |
|||
color: var(--grey-7); |
|||
} |
|||
|
|||
.active { |
|||
background-color: var(--grey-2); |
|||
} |
|||
</style> |
|||
@ -1,19 +0,0 @@ |
|||
<script> |
|||
import { View } from "svench"; |
|||
import Home from "./Home.svelte"; |
|||
import Contribution from "../Icons/Contribution.svelte"; |
|||
</script> |
|||
|
|||
<View name="default"> |
|||
<Home |
|||
href="https://github.com/Budibase/budibase/blob/master/CONTRIBUTING.md" |
|||
title="Contribute" |
|||
icon={Contribution} /> |
|||
</View> |
|||
<View name="active"> |
|||
<Home |
|||
active |
|||
href="https://github.com/Budibase/budibase/blob/master/CONTRIBUTING.md" |
|||
title="Contribute" |
|||
icon={Contribution} /> |
|||
</View> |
|||
@ -1,38 +1,63 @@ |
|||
<script> |
|||
import "@spectrum-css/progressbar/dist/index-vars.css" |
|||
import { tweened } from 'svelte/motion'; |
|||
import { cubicOut } from 'svelte/easing'; |
|||
import "@spectrum-css/progressbar/dist/index-vars.css" |
|||
import { tweened } from "svelte/motion" |
|||
import { cubicOut } from "svelte/easing" |
|||
|
|||
export let value = false |
|||
export let easing = cubicOut |
|||
export let duration = 1000; |
|||
export let width = false; |
|||
export let sideLabel = false |
|||
export let overBackground = false |
|||
export let value = false |
|||
export let easing = cubicOut |
|||
export let duration = 1000 |
|||
export let width = false |
|||
export let sideLabel = false |
|||
export let overBackground = false |
|||
|
|||
export let s = false; |
|||
export let m = false; |
|||
export let l = false; |
|||
export let xl = false; |
|||
export let size = "M" |
|||
|
|||
const progress = tweened(0, { |
|||
duration: duration, |
|||
easing: easing |
|||
}); |
|||
const progress = tweened(0, { |
|||
duration: duration, |
|||
easing: easing, |
|||
}) |
|||
|
|||
$: if (value) $progress = value |
|||
$: if (value) $progress = value |
|||
</script> |
|||
|
|||
|
|||
<div class:spectrum-ProgressBar--indeterminate={!value} class:spectrum-ProgressBar--sideLabel={sideLabel} class:spectrum-ProgressBar--sizeS={s} class:spectrum-ProgressBar--sizeM={m} class:spectrum-ProgressBar--sizeL={l} class:spectrum-ProgressBar--sizeXL={xl} class="spectrum-ProgressBar" value={$progress} role="progressbar" aria-valuenow={$progress} aria-valuemin="0" aria-valuemax="100" style={width ? `width: ${width}px;` : ''}> |
|||
{#if $$slots} |
|||
<div class:spectrum-FieldLabel--sizeS={s} class:spectrum-FieldLabel--sizeM={m} class:spectrum-FieldLabel--sizeL={l} class:spectrum-FieldLabel--sizeXL={xl} class="spectrum-FieldLabel spectrum-ProgressBar-label"><slot /></div> |
|||
{/if} |
|||
{#if value} |
|||
<div class:spectrum-FieldLabel--sizeS={s} class:spectrum-FieldLabel--sizeM={m} class:spectrum-FieldLabel--sizeL={l} class:spectrum-FieldLabel--sizeXL={xl} class="spectrum-FieldLabel spectrum-ProgressBar-percentage">{Math.round($progress)}%</div> |
|||
{/if} |
|||
<div class="spectrum-ProgressBar-track"> |
|||
<div class="spectrum-ProgressBar-fill" style={value ? `width: ${$progress}%` : ''}></div> |
|||
<div |
|||
class:spectrum-ProgressBar--indeterminate={!value} |
|||
class:spectrum-ProgressBar--sideLabel={sideLabel} |
|||
class="spectrum-ProgressBar spectrum-ProgressBar--size{size}" |
|||
value={$progress} |
|||
role="progressbar" |
|||
aria-valuenow={$progress} |
|||
aria-valuemin="0" |
|||
aria-valuemax="100" |
|||
style={width ? `width: ${width}px;` : ""} |
|||
> |
|||
{#if $$slots} |
|||
<div |
|||
class:spectrum-FieldLabel--sizeS={s} |
|||
class:spectrum-FieldLabel--sizeM={m} |
|||
class:spectrum-FieldLabel--sizeL={l} |
|||
class:spectrum-FieldLabel--sizeXL={xl} |
|||
class="spectrum-FieldLabel spectrum-ProgressBar-label" |
|||
> |
|||
<slot /> |
|||
</div> |
|||
{/if} |
|||
{#if value} |
|||
<div |
|||
class:spectrum-FieldLabel--sizeS={s} |
|||
class:spectrum-FieldLabel--sizeM={m} |
|||
class:spectrum-FieldLabel--sizeL={l} |
|||
class:spectrum-FieldLabel--sizeXL={xl} |
|||
class="spectrum-FieldLabel spectrum-ProgressBar-percentage" |
|||
> |
|||
{Math.round($progress)}% |
|||
</div> |
|||
<div class="spectrum-ProgressBar-label" hidden=""></div> |
|||
{/if} |
|||
<div class="spectrum-ProgressBar-track"> |
|||
<div |
|||
class="spectrum-ProgressBar-fill" |
|||
style={value ? `width: ${$progress}%` : ""} |
|||
/> |
|||
</div> |
|||
<div class="spectrum-ProgressBar-label" hidden="" /> |
|||
</div> |
|||
|
|||
Loading…
Reference in new issue