Skip to content

Commit

Permalink
start app bar, tabs, add github logo, better nav drawer
Browse files Browse the repository at this point in the history
  • Loading branch information
matyunya committed Jun 27, 2019
1 parent cb4492f commit 2e130bd
Show file tree
Hide file tree
Showing 17 changed files with 170 additions and 170 deletions.
3 changes: 3 additions & 0 deletions src/components/AppBar.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<header class="fixed w-full top-0 left-0 z-30 flex-wrap flex p-0 h-16 items-center bg-primary-300 elevation-3">
<slot></slot>
</header>
2 changes: 1 addition & 1 deletion src/components/Checkbox.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
type="checkbox"
/>
<div class="relative w-auto h-auto z-0">
<Ripple color={value ? 'primary' : 'gray'}>
<Ripple color={value && !disabled ? 'primary' : 'gray'}>
{#if value}
<Icon color={disabled ? 'text-gray-500' : color}>
check_box
Expand Down
16 changes: 0 additions & 16 deletions src/components/List/index.svelte

This file was deleted.

10 changes: 0 additions & 10 deletions src/components/Nav.svelte

This file was deleted.

13 changes: 7 additions & 6 deletions src/components/NavigationDrawer.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -24,25 +24,26 @@

{#if value || persistent}
<div
class="fixed w-full h-screen top-0 left-0"
class="fixed w-full h-screen top-0 left-0 mt-16"
class:pointer-events-none={persistent}
>
{#if !persistent}
<Scrim on:click={() => value = false} />
{/if}
<div
class="h-screen absolute flex w-auto z-50 drawer pointer-events-auto"
<nav
role="navigation"
class="h-screen absolute flex w-auto z-40 drawer pointer-events-auto overflow-y-auto"
class:right-0={right}
class:left-0={left}
class:elevation-4={elevation}
>
<div
transition:fly={{duration: 200, x: right ? 200 : -200, opacity: 1, easing: cubicIn }}
class="bg-white w-full"
class:elevation-4={elevation}
class:bordered={!elevation}>
<slot navigation></slot>
<slot></slot>
</div>
</div>
</nav>
</div>
{/if}

Expand Down
4 changes: 2 additions & 2 deletions src/components/RadioButton.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,15 @@
}
</script>

<div class="flex block items-center mb-2 cursor-pointer" on:click={select}>
<div class="flex block items-center mb-2 cursor-pointer z-0" on:click={select}>
<input
aria-label={label}
class="hidden"
type="radio"
role="radio"
selected={selected === value}
/>
<Ripple color={value ? 'primary' : 'gray'}>
<Ripple color={value && !disabled ? 'primary' : 'gray'}>
{#if selected === value}
<Icon color={disabled ? 'text-gray-500' : color}>
radio_button_checked
Expand Down
2 changes: 1 addition & 1 deletion src/components/Scrim.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
import { quadOut, quadIn } from 'svelte/easing';
</script>

<div class="opacity-50 bg-black fixed top-0 left-0 z-40 w-full h-screen"
<div class="opacity-50 bg-black fixed top-0 left-0 z-50 w-full h-screen"
in:fade={{duration: 200, easing: quadIn}}
out:fade={{duration: 200, easing: quadOut}}
on:click
Expand Down
51 changes: 51 additions & 0 deletions src/components/Tabs/Tab.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<script>
import Icon from '../Icon.svelte';
export let icon = '';
export let name = '';
export let value = '';
export let text = '';
export let navigation = true;
export let to = '';
$: selected = name && name === value;
</script>

<style>
.tab-item {
@apply text-white cursor-pointer flex items-center opacity-75 text-sm;
transition: background-color .2s ease-out;
}
.navigation {
&:hover {
@apply bg-local;
}
&.selected {
@apply bg-primary-50 text-white opacity-100;
transition: background-color .2s ease-in;
}
}
</style>

<li
class="tab-item p-4 ripple-white"
class:selected
on:click={() => {
value = name;
}}
>
{#if icon}
<Icon
c="pr-6"
color={selected && navigation ? 'text-primary-500' : ''}
>{icon}</Icon>
{/if}

<div class="flex flex-col p-0">
<div>
<slot>{text}</slot>
</div>
</div>
</li>
3 changes: 3 additions & 0 deletions src/components/Tabs/Tabs.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<div class="flex py-0 h-full">
<slot></slot>
</div>
7 changes: 7 additions & 0 deletions src/components/Tabs/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import Tab from './Tab.svelte';
import Tabs from './Tabs.svelte';

export default {
Wrapper: Tabs,
Tab,
};
25 changes: 18 additions & 7 deletions src/routes/_layout.svelte
Original file line number Diff line number Diff line change
@@ -1,21 +1,32 @@
<script>
import Nav from '../components/Nav.svelte';
export let segment;
import AppBar from '../components/AppBar.svelte';
import Tabs from '../components/Tabs';
import Spacer from '../components/Spacer.svelte';
</script>

<style>
:global(body) {
@apply bg-gray-200 text-black;
@apply bg-gray-200;
}
main {
@apply relative p-8 max-w-4xl mx-auto my-10;
@apply relative p-8 max-w-4xl mx-auto mb-10 mt-24;
box-sizing: border-box;
}
</style>

<Nav {segment} />
<main class="bg-white rounded-lg p-5 mt-10 elevation-10">
<AppBar>
<h6 class="text-white tracking-widest px-8 font-thin text-xl">MELTÉ</h6>
<Spacer />
<Tabs.Wrapper>
<Tabs.Tab to="/">Components</Tabs.Tab>
<Tabs.Tab to="/typography">Typography</Tabs.Tab>
</Tabs.Wrapper>
<a href="https://github.com/matyunya/melte" class="px-4">
<img src="/github.png" alt="Github Melte" width="24" height="24">
</a>
</AppBar>

<main class="bg-white container rounded-lg p-5 elevation-10">
<slot></slot>
</main>
110 changes: 60 additions & 50 deletions src/routes/index.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -72,43 +72,57 @@
</svelte:head>

<div>
<h2 class="text-xl pb-4" id="text-fields"><a href="#text-fields">Text fields</a></h2>
<h4>Basic</h4>
<h5 class="mt-4 mb-2" id="text-fields"><a href="#text-fields">Text fields</a></h5>
<h6>Basic</h6>
<TextField label="Test label" />
<h4>With hint</h4>
<h6>With hint</h6>
<TextField label="Test label" hint="Test hint" persistentHint />
<h4>With error</h4>
<h6>With error</h6>
<TextField label="Test label" error="Test error" />
<h4>Outlined</h4>
<h6>Outlined</h6>
<TextField label="Test label" outlined />
<h4>Outlined with hint</h4>
<h6>Outlined with hint</h6>
<TextField label="Test label" outlined hint="Test hint" />
<h4>Outlined with error</h4>
<h6>Outlined with error</h6>
<TextField label="Test label" outlined error="Test error" />
<h4>Outlined textarea</h4>
<h6>Outlined textarea</h6>
<TextField label="Test label" textarea rows=5 outlined />

<h2 class="text-xl pb-4 pt-8" id="buttons"><a href="#buttons">Buttons</a></h2>
<h4>Basic</h4>
<Button>Button</Button>
<h4>Block</h4>
<Button block>Button</Button>
<h4>Outlined</h4>
<Button block outlined>Button</Button>
<h4>Text</h4>
<Button text>Button</Button>
<h4>Disabled</h4>
<Button block disabled>Button</Button>
<h4>Fab</h4>
<Button icon="change_history" />
<h4>Fab flat</h4>
<Button icon="change_history" text light />

<h2 class="text-xl pb-4 pt-8" id="checkboxes"><a href="#checkboxes">Checkboxes</a></h2>
<h5 class="mt-4 mb-2" id="buttons"><a href="#buttons">Buttons</a></h5>
<h6>Basic</h6>
<div class="py-2">
<Button>Button</Button>
</div>
<h6>Block</h6>
<div class="py-2">
<Button block>Button</Button>
</div>
<h6>Outlined</h6>
<div class="py-2">
<Button block outlined>Button</Button>
</div>
<h6>Text</h6>
<div class="py-2">
<Button text>Button</Button>
</div>
<h6>Disabled</h6>
<div class="py-2">
<Button block disabled>Button</Button>
</div>
<h6>Fab</h6>
<div class="py-2">
<Button icon="change_history" />
</div>
<h6>Fab flat</h6>
<div class="py-2">
<Button icon="change_history" text light />
</div>

<h5 class="mt-4 mb-2" id="checkboxes"><a href="#checkboxes">Checkboxes</a></h5>
<Checkbox label="A checkbox" />
<Checkbox disabled label="A disabled checkbox" />

<h2 class="text-xl pb-4 pt-8" id="checkboxes"><a href="#checkboxes">Radio buttons</a></h2>
<h5 class="mt-4 mb-2" id="checkboxes"><a href="#checkboxes">Radio buttons</a></h5>
<RadioButtonGroup
name="test"
items={[
Expand All @@ -124,60 +138,56 @@
{ value: 2, label: 'Two' }
]} />

<h2 class="text-xl pb-4 pt-8" id="lists"><a href="#lists">Lists</a></h2>
<h4>One-line</h4>
<h5 class="mt-4 mb-2" id="lists"><a href="#lists">Lists</a></h5>
<h6>One-line</h6>
<List items={listOneLine} />
<h4>Two-line</h4>
<h6>Two-line</h6>
<List items={listTwoLines} />

<h4>Dense</h4>
<h6>Dense</h6>
<List dense items={listTwoLines} />

<h2 class="text-xl pb-4 pt-8" id="selects"><a href="#selects">Selects</a></h2>
<h4>A typical select</h4>
<h5 class="mt-4 mb-2" id="selects"><a href="#selects">Selects</a></h5>
<h6>A typical select</h6>
<Select label="A select" items={[
{ value: 1, text: 'One' },
{ value: 2, text: 'Two' }
]} />
<h4>Outlined select</h4>
<h6>Outlined select</h6>
<Select outlined label="A select" items={[
{ value: 1, text: 'One' },
{ value: 2, text: 'Two' }
]} />

<h2 class="text-xl pb-4 pt-8" id="snackbars"><a href="#snackbars">Snackbars</a></h2>
<h5 class="mt-4 mb-2" id="snackbars"><a href="#snackbars">Snackbars</a></h5>
<Snackbar bind:value={showSnackbar}>
<div>Have a nice day.</div>
<div slot="action">
<Button text on:click={() => showSnackbar = false}>Dismiss</Button>
</div>
</Snackbar>
<Button on:click={() => showSnackbar = true}>Show snackbar</Button>
<div class="py-2">
<Button on:click={() => showSnackbar = true}>Show snackbar</Button>
</div>

<h2 class="text-xl pb-4 pt-8" id="dialogs"><a href="#dialogs">Dialogs</a></h2>
<h5 class="mt-4 mb-2" id="dialogs"><a href="#dialogs">Dialogs</a></h5>
<Dialog bind:value={showDialog}>
<h3 slot="title">What do you think?</h3>
<h5 slot="title">What do you think?</h5>
<div class="text-gray-700">I'm not sure about today's weather.</div>
<div slot="actions">
<Button text on:click={() => showDialog = false}>Disagree</Button>
<Button text on:click={() => showDialog = false}>Agree</Button>
</div>
</Dialog>
<Button on:click={() => showDialog = true}>Show dialog</Button>
<div class="py-2">
<Button on:click={() => showDialog = true}>Show dialog</Button>
</div>

<h2 class="text-xl pb-4 pt-8" id="navigation-drawers">
<a href="#navigation-drawers">Navigation drawers</a>
</h2>
<h5 class="mt-4 mb-2" id="navigation-drawers"><a href="#navigation-drawers">Navigation drawers</a></h5>

<div class="my-4">
<Checkbox label="To the right" bind:value={right} />
</div>
<div class="my-4">
<Checkbox label="Persistent" bind:value={persistent} />
</div>
<div class="my-4">
<Checkbox label="With elevation" bind:value={elevation} />
</div>
<Checkbox label="To the right" bind:value={right} />
<Checkbox label="Persistent" bind:value={persistent} />
<Checkbox label="With elevation" bind:value={elevation} />

<NavigationDrawer
bind:value={showNavigation}
Expand Down
Binary file added static/github.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed static/great-success.png
Binary file not shown.
Binary file removed static/logo.png
Binary file not shown.
Loading

0 comments on commit 2e130bd

Please sign in to comment.