Skip to content
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

Jump to bottom

[docs]: Updated the design of the search bar #344

Merged
merged 6 commits into from
Apr 20, 2023
Merged

[docs]: Updated the design of the search bar #344

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b5edd18
[docs]: Updated the design of the search bar
Caladan08 Apr 14, 2023
8b81db7
[docs]: Changed 'Search' text to paragraph tag
Caladan08 Apr 15, 2023
d008e2b
[docs]: Enforce 100% width
Caladan08 Apr 15, 2023
97661dd
[docs]: Removed blue background color of search modal
Caladan08 Apr 15, 2023
d7acce5
[docs]: Made the search links keyboard focusable
Caladan08 Apr 16, 2023
114bf34
[docs]: Corrected wrong language declarations in code blocks
Caladan08 Apr 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
36 changes: 36 additions & 0 deletions apps/docs/src/lib/components/SearchItem.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { Group } from '@svelteuidev/core';
import { createEventDispatcher } from 'svelte';

const dispatch = createEventDispatcher();

function addSearchLink() {
dispatch('addSearch');
}

type SearchType = {
title: String;
link: String;
section?: String;
};
export let search: SearchType;
</script>

<button
class="searchTerm"
on:click={() => {
addSearchLink();
goto(search.link.toString());
}}
>
<Group position="apart">
<div style="color: black">
<p class="searchItemTitle">{search.title}</p>
<p class="searchItemDescription">{search.section}</p>
</div>
<Group position="center" direction="column" override={{ color: '#f5f5f5' }}>
<p class="searchLink">{search.link}</p>
</Group>
</Group>
</button>
124 changes: 70 additions & 54 deletions apps/docs/src/lib/components/TopBar/TopBar.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,16 @@
colorScheme,
Modal,
TextInput,
Paper,
Box,
Kbd
Kbd,
createStyles
} from '@svelteuidev/core';
import { Sun, Moon, MagnifyingGlass } from 'radix-icons-svelte';
import { mobile } from '$lib/components';
import { config, searchLinks } from './data.js';
import { onMount } from 'svelte';
import { hotkey } from '@svelteuidev/composables';
import { browser } from '$app/environment';
import SearchItem from '$lib/components/SearchItem.svelte';

type SearchItem = {
title: string;
Expand All @@ -42,6 +42,8 @@
searchTerm = '';
}

let previousSection = '';

function onSearchValueInput() {
matchingSearches = searchLinks.filter((item) =>
item.title.toLowerCase().includes(searchTerm.toLowerCase())
Expand All @@ -60,34 +62,60 @@
localStorage.setItem('recentSearches', JSON.stringify(existingSearches));
}

function changePreviousSection(newVal: string) {
previousSection = newVal;
return newVal;
}

function validateSearchLink(searchLinkSection: string) {
return searchLinkSection === previousSection;
}

// @ts-nocheck
BeeMargarida marked this conversation as resolved.
Show resolved Hide resolved

const useStyles = createStyles(() => ({
'.svelteui-Modal-inner > div': {
width: '100%',
display: 'block !important'
},
'.svelteui-Modal-inner': {
display: 'block !important'
},
'.svelteui-Modal-modal': {
width: '100% !important',
maxWidth: '40rem',
marginRight: 'auto !important',
marginLeft: 'auto !important'
}
}));
$: ({ getStyles } = useStyles());
</script>

<div class="mobile_topbar">
<Menu mr="xl" transition="scale" transitionOptions={{ duration: 250 }}>
<Menu.Label>Navigation</Menu.Label>
{#each config.links as { title, href }}
<Menu.Item root="a" {href}>
{title}
</Menu.Item>
{/each}
<Divider />
<Menu.Label>Experimental Theme Toggle</Menu.Label>
<Menu.Item>
<ActionIcon variant="default" on:click={toggleTheme} size={30}>
{#if $colorScheme === 'dark'}
<Moon />
{:else}
<Sun />
{/if}
</ActionIcon>
</Menu.Item>
<Menu.Item>
<ActionIcon variant="default" on:click={changeModalState} size={30}>
<MagnifyingGlass />
</ActionIcon>
</Menu.Item>
</Menu>
<Menu mr="xl" transition="scale" transitionOptions={{ duration: 250 }}>
<Menu.Label>Navigation</Menu.Label>
{#each config.links as { title, href }}
<Menu.Item root="a" {href}>
{title}
</Menu.Item>
{/each}
<Divider />
<Menu.Label>Experimental Theme Toggle</Menu.Label>
<Menu.Item>
<ActionIcon variant="default" on:click={toggleTheme} size={30}>
{#if $colorScheme === 'dark'}
<Moon />
{:else}
<Sun />
{/if}
</ActionIcon>
</Menu.Item>
<Menu.Item>
<ActionIcon variant="default" on:click={changeModalState} size={30}>
<MagnifyingGlass />
</ActionIcon>
</Menu.Item>
</Menu>
</div>
<div class="desktop_topbar">
<ul style={`padding-right: 0.75rem`} use:hotkey={[['mod+k', () => changeModalState()]]}>
Expand All @@ -102,7 +130,7 @@
on:click={changeModalState}
>
<div style="display: flex; align-items: center">
<MagnifyingGlass size={25} />
<MagnifyingGlass size={25} color="#228be6" />
<p style="margin-left: 0.5rem; font-size: 1.1rem">Search</p>
</div>
<div>
Expand Down Expand Up @@ -138,9 +166,10 @@
<Modal
opened={modalOpened}
on:close={changeModalState}
title="SvelteUI Docs"
overflow="inside"
trapFocus
class={getStyles()}
withCloseButton={false}
>
<TextInput
placeholder="Search..."
Expand All @@ -155,40 +184,27 @@
</TextInput>
{#if searchTerm.length === 0}
{#if recentSearches.length > 0}
<p class="recentSearchesTitle">Recent searches:</p>
<h3 class="recentSearchesTitle">Recent searches:</h3>
{#each recentSearches as recentSearch}
<a
href={recentSearch.link}
style={`text-decoration: none`}
on:click={() => addSearch(recentSearch)}
>
<Paper class="searchTerm" withBorder>
<p class="searchItemTitle">{recentSearch.title}</p>
{#if recentSearch.section}
<p class="searchItemDescription">{recentSearch.section}</p>
{/if}
</Paper>
</a>
<SearchItem search={recentSearch} on:addSearch={() => addSearch(recentSearch)} />
{/each}
{:else}
<p class="noMatches">No recent searches</p>
{/if}
{:else if matchingSearches.length > 0}
{#each matchingSearches as matchingSearch}
<a
href={matchingSearch.link}
style={`text-decoration: none`}
on:click={() => addSearch(matchingSearch)}
>
<Paper class="searchTerm" withBorder>
<p class="searchItemTitle">{matchingSearch.title}</p>
{#if matchingSearch.section}
<p class="searchItemDescription">{matchingSearch.section}</p>
{/if}
</Paper>
</a>
<SearchItem search={matchingSearch} on:addSearch={() => addSearch(matchingSearch)} />
{/each}
{:else}
<p class="noMatches">No matches</p>
{/if}
<Divider />
{#each searchLinks as searchLink}
{#if validateSearchLink(searchLink.section)}
<SearchItem search={searchLink} on:addSearch={() => addSearch(searchLink)} />
{:else}
<h2>{changePreviousSection(searchLink.section)}</h2>
<SearchItem search={searchLink} on:addSearch={() => addSearch(searchLink)} />
{/if}
{/each}
</Modal>
86 changes: 43 additions & 43 deletions apps/docs/src/lib/components/TopBar/data.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,45 +12,25 @@ const discordStyles = {
};

export const searchLinks = [
{ title: "Introduction", link: "/introduction"},
{ title: "Installation", link: "/installation"},
{ title: "Learn the Basics", link: "/basics"},
{ title: "Contributing", link: "/contributing"},
{ title: "FAQ", link: "/faq"},
{ title: "Introduction", link: "/introduction", section: "Essentials" },
{ title: "Installation", link: "/installation", section: "Essentials" },
{ title: "Learn the Basics", link: "/basics", section: "Essentials" },
{ title: "Contributing", link: "/contributing", section: "Essentials" },
{ title: "FAQ", link: "/faq", section: "Essentials" },

{ title: "Version 0.5.0", link: "/changelog/v0-5-0", section: "Changelog" },
{ title: "Version 0.5.5", link: "/changelog/v0-5-5", section: "Changelog" },
{ title: "Version 0.6.0", link: "/changelog/v0-6-0", section: "Changelog" },
{ title: "Version 0.6.5", link: "/changelog/v0-6-5", section: "Changelog" },
{ title: "Version 0.7.0", link: "/changelog/v0-7-0", section: "Changelog" },

{ title: "use-browser-context", link: "/composables/use-browser-context", section: "Composables" },
{ title: "use-click-outside", link: "/composables/use-click-outside", section: "Composables" },
{ title: "use-clipboard", link: "/composables/use-clipboard", section: "Composables" },
{ title: "use-css-variable", link: "/composables/use-css-variable", section: "Composables" },
{ title: "use-debounce", link: "/composables/use-debounce", section: "Composables" },
{ title: "use-download", link: "/composables/use-download", section: "Composables" },
{ title: "use-element-size", link: "/composables/use-element-size", section: "Composables" },
{ title: "use-eye-dropper", link: "/composables/use-eye-dropper", section: "Composables" },
{ title: "use-focus-within", link: "/composables/use-focus-within", section: "Composables" },
{ title: "use-focus", link: "/composables/use-focus", section: "Composables" },
{ title: "use-hash", link: "/composables/use-hash", section: "Composables" },
{ title: "use-hot-key", link: "/composables/use-hot-key", section: "Composables" },
{ title: "use-id", link: "/composables/use-id", section: "Composables" },
{ title: "use-io", link: "/composables/use-io", section: "Composables" },
{ title: "use-lazy", link: "/composables/use-lazy", section: "Composables" },
{ title: "use-lock-scroll", link: "/composables/use-lock-scroll", section: "Composables" },
{ title: "use-long-press", link: "/composables/use-long-press", section: "Composables" },
{ title: "use-mouse-position", link: "/composables/use-mouse-position", section: "Composables" },
{ title: "use-os", link: "/composables/use-os", section: "Composables" },
{ title: "use-page-leave", link: "/composables/use-page-leave", section: "Composables" },
{ title: "use-persistent-tab", link: "/composables/use-persistent-tab", section: "Composables" },
{ title: "use-portal", link: "/composables/use-portal", section: "Composables" },
{ title: "use-raf-fn", link: "/composables/use-raf-fn", section: "Composables" },
{ title: "use-tab-leave", link: "/composables/use-tab-leave", section: "Composables" },
{ title: "use-throttle", link: "/composables/use-throttle", section: "Composables" },
{ title: "use-viewport-size", link: "/composables/use-viewport-size", section: "Composables" },
{ title: "use-web-worker", link: "/composables/use-web-worker", section: "Composables" },
{ title: "Customize Theme", link: "/theming/create-styles", section: "Theming" },
{ title: "Dark Theme", link: "/theming/dark-theme", section: "Theming" },
{ title: "Default Theme", link: "/theming/default-theme", section: "Theming" },
{ title: "Override", link: "/theming/override", section: "Theming" },
{ title: "Server Side Rendering", link: "/theming/ssr", section: "Theming" },
{ title: "SvelteUIProvider", link: "/theming/svelteui-provider", section: "Theming" },
{ title: "Utilities", link: "/theming/utilities", section: "Theming" },

{ title: "ActionIcon", link: "/core/action-icon", section: "Components" },
{ title: "Affix", link: "/core/affix", section: "Components" },
Expand Down Expand Up @@ -103,24 +83,44 @@ export const searchLinks = [
{ title: "TypographyProvider", link: "/core/typography-provider", section: "Components" },
{ title: "UnstyledButton", link: "/core/unstyled-button", section: "Components" },

{ title: "use-browser-context", link: "/composables/use-browser-context", section: "Composables" },
{ title: "use-click-outside", link: "/composables/use-click-outside", section: "Composables" },
{ title: "use-clipboard", link: "/composables/use-clipboard", section: "Composables" },
{ title: "use-css-variable", link: "/composables/use-css-variable", section: "Composables" },
{ title: "use-debounce", link: "/composables/use-debounce", section: "Composables" },
{ title: "use-download", link: "/composables/use-download", section: "Composables" },
{ title: "use-element-size", link: "/composables/use-element-size", section: "Composables" },
{ title: "use-eye-dropper", link: "/composables/use-eye-dropper", section: "Composables" },
{ title: "use-focus-within", link: "/composables/use-focus-within", section: "Composables" },
{ title: "use-focus", link: "/composables/use-focus", section: "Composables" },
{ title: "use-hash", link: "/composables/use-hash", section: "Composables" },
{ title: "use-hot-key", link: "/composables/use-hot-key", section: "Composables" },
{ title: "use-id", link: "/composables/use-id", section: "Composables" },
{ title: "use-io", link: "/composables/use-io", section: "Composables" },
{ title: "use-lazy", link: "/composables/use-lazy", section: "Composables" },
{ title: "use-lock-scroll", link: "/composables/use-lock-scroll", section: "Composables" },
{ title: "use-long-press", link: "/composables/use-long-press", section: "Composables" },
{ title: "use-mouse-position", link: "/composables/use-mouse-position", section: "Composables" },
{ title: "use-os", link: "/composables/use-os", section: "Composables" },
{ title: "use-page-leave", link: "/composables/use-page-leave", section: "Composables" },
{ title: "use-persistent-tab", link: "/composables/use-persistent-tab", section: "Composables" },
{ title: "use-portal", link: "/composables/use-portal", section: "Composables" },
{ title: "use-raf-fn", link: "/composables/use-raf-fn", section: "Composables" },
{ title: "use-tab-leave", link: "/composables/use-tab-leave", section: "Composables" },
{ title: "use-throttle", link: "/composables/use-throttle", section: "Composables" },
{ title: "use-viewport-size", link: "/composables/use-viewport-size", section: "Composables" },
{ title: "use-web-worker", link: "/composables/use-web-worker", section: "Composables" },

{ title: "SvelteUI Dates", link: "dates/getting-started-dates", section: "Dates" },
{ title: "Month", link: "/dates/month", section: "Dates" },

{ title: "SvelteUI Preprocessors", link: "preprocessors/getting-started-preprocessors", section: "Preprocessors"},
{ title: "view-source", link: "/preprocessors/view-source", section: "Preprocessors"},

{ title: "Typewriter", link: "/motion/typewriter", section: "Motion" },
{ title: "Flipboard", link: "/motion/flipboard", section: "Motion" },

{ title: "Prism", link: "/others/prism", section: "Others"},

{ title: "SvelteUI Preprocessors", link: "preprocessors/getting-started-preprocessors", section: "Preprocessors"},
{ title: "view-source", link: "/preprocessors/view-source", section: "Preprocessors"},

{ title: "Customize Theme", link: "/theming/create-styles", section: "Theming" },
{ title: "Dark Theme", link: "/theming/dark-theme", section: "Theming" },
{ title: "Default Theme", link: "/theming/default-theme", section: "Theming" },
{ title: "Override", link: "/theming/override", section: "Theming" },
{ title: "Server Side Rendering", link: "/theming/ssr", section: "Theming" },
{ title: "SvelteUIProvider", link: "/theming/svelteui-provider", section: "Theming" },
{ title: "Utilities", link: "/theming/utilities", section: "Theming" },
]

const links = [
Expand Down
6 changes: 3 additions & 3 deletions apps/docs/src/lib/pages/basics.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,11 @@ All SvelteUI components support light and dark color themes out of the box. You

```svelte
<script>
import { SvelteUIProvider } from '@svelteuidev/core';
import { SvelteUIProvider } from '@svelteuidev/core';
</script>

<SvelteUIProvider themeObserver="dark">
<YourApp />
<YourApp />
</SvelteUIProvider>
```

Expand Down Expand Up @@ -60,7 +60,7 @@ SvelteUI components work in SvelteKit environments without any configuration nee

You can import the props type of any component by adding `Props` to the component name:

```svel
```svelte
import type { ButtonProps } from '@svelteuidev/core';
```

Expand Down
2 changes: 1 addition & 1 deletion apps/docs/src/lib/pages/core/button.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ You can change styles of any element in button component with `override` prop to

Control button font-size, height and padding with `size` and border-radius with `radius` props. Both props have predefined values: `xs`, `sm`, `md`, `lg`, `xl`. Alternatively, you can use a number to set radius in px:

```tsx
```svelte
<Button radius="lg" /> // -> theme predefined large radius
<Button radius={10} /> // -> { borderRadius: '10px' }
<Button size="sm" /> // -> predefined small size
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/src/lib/pages/core/media-query.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ MediaQuery component adds styles to child element if the given media query match
MediaQuery only works with a single child element or component that renders an element. Strings, numbers, fragments and other parts will not have correct styles.
</Alert>

```tsx
```svelte
// Will work with MediaQuery – single element
<MediaQuery>
<button>Button</button>
Expand Down
4 changes: 2 additions & 2 deletions apps/docs/src/lib/pages/core/modal.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ It will still be possible to close modal by clicking on overlay or pressing esca
You can change modal width by setting `size` prop to predefined size or any valid width, for example, 55% or 200px.
Size controls modal width, max-width is set to 100% with spacing on left and right, no matter what `size` is passed 100% will not be exceeded:

```tsx
```svelte
<Modal size="sm" /> // -> predefined small size
<Modal size={378} /> // -> size in px
<Modal size="55%" /> // -> size in %
Expand Down Expand Up @@ -84,7 +84,7 @@ In most cases you should not turn these features off as it will make your modal

For better screen reader support set `closeButtonLabel` prop:

```tsx
```svelte
// sets title attribute on close button
<Modal closeButtonLabel="Close authentication modal" />
```