forked from tsai/budibase
Andrew Kingston
6 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> |
<script> |
||||
export let s = false; |
export let small = false |
||||
export let disabled; |
export let disabled |
||||
</script> |
</script> |
||||
|
|
||||
<button on:click class="spectrum-ClearButton" class:spectrum-ClearButton--small={s} {disabled}> |
<button |
||||
<svg class="spectrum-Icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true"> |
on:click |
||||
<use xlink:href="#spectrum-css-icon-Cross75" /> |
class="spectrum-ClearButton" |
||||
</svg> |
class:spectrum-ClearButton--small={small} |
||||
</button> |
{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> |
<script> |
||||
import "@spectrum-css/progressbar/dist/index-vars.css" |
import "@spectrum-css/progressbar/dist/index-vars.css" |
||||
import { tweened } from 'svelte/motion'; |
import { tweened } from "svelte/motion" |
||||
import { cubicOut } from 'svelte/easing'; |
import { cubicOut } from "svelte/easing" |
||||
|
|
||||
export let value = false |
export let value = false |
||||
export let easing = cubicOut |
export let easing = cubicOut |
||||
export let duration = 1000; |
export let duration = 1000 |
||||
export let width = false; |
export let width = false |
||||
export let sideLabel = false |
export let sideLabel = false |
||||
export let overBackground = false |
export let overBackground = false |
||||
|
|
||||
export let s = false; |
export let size = "M" |
||||
export let m = false; |
|
||||
export let l = false; |
|
||||
export let xl = false; |
|
||||
|
|
||||
const progress = tweened(0, { |
const progress = tweened(0, { |
||||
duration: duration, |
duration: duration, |
||||
easing: easing |
easing: easing, |
||||
}); |
}) |
||||
|
|
||||
$: if (value) $progress = value |
$: if (value) $progress = value |
||||
</script> |
</script> |
||||
|
|
||||
|
<div |
||||
<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;` : ''}> |
class:spectrum-ProgressBar--indeterminate={!value} |
||||
{#if $$slots} |
class:spectrum-ProgressBar--sideLabel={sideLabel} |
||||
<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> |
class="spectrum-ProgressBar spectrum-ProgressBar--size{size}" |
||||
{/if} |
value={$progress} |
||||
{#if value} |
role="progressbar" |
||||
<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> |
aria-valuenow={$progress} |
||||
{/if} |
aria-valuemin="0" |
||||
<div class="spectrum-ProgressBar-track"> |
aria-valuemax="100" |
||||
<div class="spectrum-ProgressBar-fill" style={value ? `width: ${$progress}%` : ''}></div> |
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> |
||||
<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> |
</div> |
||||
|
|||||
Loading…
Reference in new issue