Skip to content

Several fixes #375

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
TorstenDittmann merged 4 commits into from
Nov 23, 2023
Merged

Several fixes #375

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
71ed30a
fix duplicated select options when native
TGlide Nov 21, 2023
2fde9c2
fix cards
TGlide Nov 21, 2023
6faee51
toc esc handling
TGlide Nov 21, 2023
44c84b3
make drafts non-clickable
TGlide Nov 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions src/lib/actions/clickOutside.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
export function clickOutside(node: HTMLElement, callback: () => void) {
const handleClick = (event: MouseEvent) => {
if (node && !node.contains(event.target as Node)) {
callback();
}
};

document.addEventListener('click', handleClick, true);

return {
destroy() {
document.removeEventListener('click', handleClick, true);
}
};
}
4 changes: 2 additions & 2 deletions src/lib/components/Select.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,14 +146,14 @@
{#each groups as group}
{@const isDefault = group.label === DEFAULT_GROUP}
{#if isDefault}
{#each options as option}
{#each group.options as option}
<option value={option.value} selected={option.value === value}>
{option.label}
</option>
{/each}
{:else}
<optgroup label={isDefault ? undefined : group.label}>
{#each options as option}
{#each group.options as option}
<option value={option.value} selected={option.value === value}>
{option.label}
</option>
Expand Down
13 changes: 13 additions & 0 deletions src/lib/layouts/Docs.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,21 @@
});

setContext('isDocs', true);

const handleKeydown = (e: KeyboardEvent) => {
if (e.key === 'Escape' && ($layoutState.showReferences || $layoutState.showSidenav)) {
e.preventDefault();
layoutState.update((state) => ({
...state,
showReferences: false,
showSidenav: false
}));
}
};
</script>

<svelte:window on:keydown={handleKeydown} />

<div class="u-position-relative">
<section class="aw-mobile-header is-transparent">
<div class="aw-mobile-header-start">
Expand Down
211 changes: 110 additions & 101 deletions src/lib/layouts/Sidebar.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,114 +1,123 @@
<script lang="ts" context="module">
export type NavLink = {
label: string;
href: string;
icon?: string;
isParent?: boolean;
};
export type NavLink = {
label: string;
href: string;
icon?: string;
isParent?: boolean;
};

export type NavGroup = {
label?: string;
items: Array<NavLink>;
};
export type NavGroup = {
label?: string;
items: Array<NavLink>;
};

export type NavParent = {
label: string;
href: string;
};
export type NavParent = {
label: string;
href: string;
};

export type NavTree = Array<NavGroup | NavLink>;
export type NavTree = Array<NavGroup | NavLink>;
</script>

<script lang="ts">
import Tooltip from '$lib/components/Tooltip.svelte';
import { layoutState, toggleSidenav } from './Docs.svelte';
import SidebarNavButton from './SidebarNavButton.svelte';
import { clickOutside } from '$lib/actions/clickOutside';

export let expandable = false;
export let navigation: NavTree;
export let parent: NavParent | undefined = undefined;
import Tooltip from '$lib/components/Tooltip.svelte';
import { layoutState, toggleSidenav } from './Docs.svelte';
import SidebarNavButton from './SidebarNavButton.svelte';

function isNavLink(item: NavLink | NavGroup): item is NavLink {
return 'href' in item;
}
export let expandable = false;
export let navigation: NavTree;
export let parent: NavParent | undefined = undefined;

function isNavLink(item: NavLink | NavGroup): item is NavLink {
return 'href' in item;
}
</script>

<nav class="aw-side-nav">
<div class="aw-side-nav-wrapper">
<button
class="aw-input-text aw-is-not-desktop"
on:click={() => ($layoutState.showSearch = true)}
>
<span class="aw-icon-search" />
<span class="text">Search in docs</span>
</button>
<div class="aw-side-nav-scroll">
{#if parent}
<section class="aw-side-nav-wrapper-parent">
<a href={parent.href} aria-label="go back">
<span class="icon-cheveron-left" aria-hidden="true" />
</a>
<span class="aw-side-nav-wrapper-parent-title aw-eyebrow">{parent.label}</span>
</section>
{/if}
{#each navigation as navGroup}
<section>
{#if isNavLink(navGroup)}
{#if expandable && !$layoutState.showSidenav}
<Tooltip placement="right">
<SidebarNavButton groupItem={navGroup} />
<svelte:fragment slot="tooltip">{navGroup.label}</svelte:fragment>
</Tooltip>
{:else}
<SidebarNavButton groupItem={navGroup} />
{/if}
{:else}
{#if navGroup.label}
<h2 class="aw-side-nav-header aw-eyebrow u-un-break-text">{navGroup.label}</h2>
{/if}
<ul>
{#each navGroup.items as groupItem}
<li>
{#if expandable && !$layoutState.showSidenav}
<Tooltip placement="right">
<SidebarNavButton {groupItem} />
<svelte:fragment slot="tooltip">{groupItem.label}</svelte:fragment>
</Tooltip>
{:else}
<SidebarNavButton {groupItem} />
{/if}
</li>
{/each}
</ul>
{/if}
</section>
{/each}
</div>
{#if expandable}
<button
on:click={toggleSidenav}
class="aw-icon-button u-margin-inline-start-auto"
style:margin-bottom="1rem"
aria-label="toggle nav"
>
<span class="icon-cheveron-right" aria-hidden="true" />
</button>
{/if}
<div class="aw-side-nav-mobile-footer-buttons">
<button href="https://cloud.appwrite.io/console" class="aw-button aw-u-inline-width-100-percent-mobile">
<span class="text">Go to console</span>
</button>
<nav class="aw-side-nav" use:clickOutside={() => ($layoutState.showSidenav = false)}>
<div class="aw-side-nav-wrapper">
<button
class="aw-input-text aw-is-not-desktop"
on:click={() => ($layoutState.showSearch = true)}
>
<span class="aw-icon-search" />
<span class="text">Search in docs</span>
</button>
<div class="aw-side-nav-scroll">
{#if parent}
<section class="aw-side-nav-wrapper-parent">
<a href={parent.href} aria-label="go back">
<span class="icon-cheveron-left" aria-hidden="true" />
</a>
<span class="aw-side-nav-wrapper-parent-title aw-eyebrow">{parent.label}</span>
</section>
{/if}
{#each navigation as navGroup}
<section>
{#if isNavLink(navGroup)}
{#if expandable && !$layoutState.showSidenav}
<Tooltip placement="right">
<SidebarNavButton groupItem={navGroup} />
<svelte:fragment slot="tooltip">{navGroup.label}</svelte:fragment>
</Tooltip>
{:else}
<SidebarNavButton groupItem={navGroup} />
{/if}
{:else}
{#if navGroup.label}
<h2 class="aw-side-nav-header aw-eyebrow u-un-break-text">
{navGroup.label}
</h2>
{/if}
<ul>
{#each navGroup.items as groupItem}
<li>
{#if expandable && !$layoutState.showSidenav}
<Tooltip placement="right">
<SidebarNavButton {groupItem} />
<svelte:fragment slot="tooltip"
>{groupItem.label}</svelte:fragment
>
</Tooltip>
{:else}
<SidebarNavButton {groupItem} />
{/if}
</li>
{/each}
</ul>
{/if}
</section>
{/each}
</div>
{#if expandable}
<button
on:click={toggleSidenav}
class="aw-icon-button u-margin-inline-start-auto"
style:margin-bottom="1rem"
aria-label="toggle nav"
>
<span class="icon-cheveron-right" aria-hidden="true" />
</button>
{/if}
<div class="aw-side-nav-mobile-footer-buttons">
<button
href="https://cloud.appwrite.io/console"
class="aw-button aw-u-inline-width-100-percent-mobile"
>
<span class="text">Go to console</span>
</button>

<a
href="https://github.com/appwrite/appwrite/stargazers"
target="_blank"
rel="noopener noreferrer"
class="aw-button is-text aw-u-inline-width-100-percent-mobile"
>
<span class="aw-icon-star" aria-hidden="true" />
<span class="text">Star on GitHub</span>
<span class="aw-inline-tag aw-sub-body-400">37.9K</span>
</a>
</div>
</div>
<a
href="https://github.com/appwrite/appwrite/stargazers"
target="_blank"
rel="noopener noreferrer"
class="aw-button is-text aw-u-inline-width-100-percent-mobile"
>
<span class="aw-icon-star" aria-hidden="true" />
<span class="text">Star on GitHub</span>
<span class="aw-inline-tag aw-sub-body-400">37.9K</span>
</a>
</div>
</div>
</nav>
Loading