ivabus/gui
1
0
Fork 0
mirror of https://github.com/ivabus/gui synced 2025-06-07 15:50:27 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

#133 TopBar implementation

Browse source 
* rm side navbar
This commit is contained in:
neil 2023-01-11 11:50:20 +08:00
parent c93ce6ec0b
commit 12e18f9810
19 changed files with 123 additions and 193 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

136
modules/gui/src/components/NavBar/NavBar.svelte
View file

@ -1,136 +0,0 @@
<script lang="ts">
import { page } from '$app/stores';
import { searchStore } from '$libs/stores';
import SearchInput from '@tea/ui/SearchInput/SearchInput.svelte';
import Button from '@tea/ui/Button/Button.svelte';
import ProfileNavButton from './ProfileNavButton.svelte';
import { beforeUpdate } from 'svelte';
let routes = [
{
path: '/',
active: false,
label: 'DISCOVER'
},
{
path: '/documentation',
active: false,
label: 'DOCUMENTATION'
},
{
path: '/cli',
active: false,
label: 'TEA CLI INSTALL'
},
{
path: '/packages',
active: false,
label: 'PACKAGES'
},
{
path: 'https://github.com/teaxyz',
active: false,
label: 'VIEW ON GITHUB',
target: '_blank'
}
];
beforeUpdate(async () => {
const currentPath = $page.url.pathname;
for (let i = 0; i < routes.length; i++) {
let { path } = routes[i];
routes[i].active = currentPath.includes(path);
}
if (currentPath !== '/') {
routes[0].active = false;
}
});
const onSearch = (term: string) => {
searchStore.search(term);
};
</script>
<ul id="NavBar">
<nav class="flex justify-between">
<a href="/">
<img width="40" height="40" src="/images/tea-icon.png" alt="tea" />
</a>
</nav>
<SearchInput class="border border-gray py-4" size="small" {onSearch} />
{#each routes as route}
<li class={route.active ? 'nav_button active' : 'nav_button'}>
<a href={route.path} target={route.target || ''}>
<Button class="h-16 pl-4 text-left text-white" active={route.active}>{route.label}</Button>
</a>
</li>
{/each}
<footer class="w-full border border-x-0 border-gray">
<ProfileNavButton />
</footer>
</ul>
<style>
@tailwind base;
@tailwind components;
@tailwind utilities;
ul {
height: 100vh;
width: 100%;
}
@layer components {
.nav_button {
transition: all 0.3s;
color: theme('colors.white');
/* padding: theme('spacing.4') theme('spacing.2'); */
}
.nav_button button {
text-align: left;
}
.nav_button:hover {
color: theme('colors.black');
background-color: theme('colors.primary');
}
.nav_button.active {
color: theme('colors.black');
background-color: theme('colors.primary');
}
}
.titlebar-button {
display: inline-flex;
justify-content: center;
align-items: center;
width: 12px;
height: 12px;
border-radius: 8px;
opacity: 0.9;
}
.titlebar-button img {
transition: opacity 0.3s;
opacity: 0;
}
.titlebar-button:hover img {
opacity: 1;
}
#titlebar-close {
background-color: orangered;
}
#titlebar-minimize {
background-color: orange;
}
#titlebar-maximize {
background-color: green;
}
footer {
position: absolute;
bottom: 20px;
}
</style>

4
modules/gui/src/components/SearchPopupResults/SearchPopupResults.svelte
View file

@ -123,8 +123,8 @@
<style>
section {
position: fixed;
top: 0;
left: 240px;
top: 80px;
left: 0px;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 0.3s ease-in-out;

0
modules/gui/src/components/NavBar/ProfileNavButton.svelte → modules/gui/src/components/TopBar/ProfileNavButton.svelte
View file

70
modules/gui/src/components/TopBar/TopBar.svelte Normal file
View file

@ -0,0 +1,70 @@
<script lang="ts">
import { page } from '$app/stores';
import { beforeUpdate } from 'svelte';
import { searchStore } from '$libs/stores';
import SearchInput from '@tea/ui/SearchInput/SearchInput.svelte';
import { navStore } from '$libs/stores';
import ProfileNavButton from './ProfileNavButton.svelte';
let backLink = navStore.backLink;
const onSearch = (term: string) => {
searchStore.search(term);
};
let currentPath: string;
beforeUpdate(async () => {
currentPath = $page.url.pathname;
});
</script>
<header class="flex w-full border border-l-0 border-r-0 border-gray">
<a href="/">
<img width="40" height="40" src="/images/tea-icon.png" alt="tea" />
</a>
<ul id="PrevNextButtons" class="flex h-10 gap-4 pl-4 align-middle leading-10 text-gray">
<a href={$backLink} class={currentPath !== '/' ? 'active' : ''}>&#8592</a>
<a href={$backLink} class={currentPath === '/' ? 'active' : ''}>&#8594</a>
</ul>
<SearchInput
class="flex-grow border border-none py-4"
size="small"
placeholder="search the tea store"
{onSearch}
/>
<ul class="flex gap-4 pr-4 pt-2 align-middle text-gray">
<button class="icon-filter hover:text-white" />
<button class="icon-share hover:text-white" />
<button class="icon-star-empty hover:text-white" />
</ul>
<ProfileNavButton />
</header>
<menu
class="flex h-10 gap-4 border border-l-0 border-r-0 border-t-0 border-gray pl-4 align-middle leading-10 text-gray"
>
<a href="/cli" class={currentPath === '/cli' ? 'active' : ''}>install teaCli</a>
<a href="/documentation" class={currentPath === '/documentation' ? 'active' : ''}>documentation</a
>
<a href="/packages" class={currentPath === '/packages' ? 'active' : ''}>packages</a>
<a href="https://github.com/teaxyz" target="_blank" rel="noreferrer">
<i class="icon-star-empty" /> Github (5.2k)
</a>
</menu>
<style>
@tailwind base;
@tailwind components;
@tailwind utilities;
menu > a:hover {
color: white;
}
menu a.active {
color: white;
}
#PrevNextButtons a.active {
color: white;
}
</style>

3
modules/gui/src/libs/stores.ts
View file

@ -6,6 +6,7 @@ import type { GUIPackage } from '$libs/types';
import { getPackages, getFeaturedPackages, getPackageReviews, getAllPosts } from '@api';
import initAuthStore from './stores/auth';
import initNavStore from './stores/nav';
export const backLink = writable<string>('/');
@ -172,3 +173,5 @@ function initSearchStore() {
export const searchStore = initSearchStore();
export const authStore = initAuthStore();
export const navStore = initNavStore();

10
modules/gui/src/libs/stores/nav.ts Normal file
View file

@ -0,0 +1,10 @@
import { writable } from 'svelte/store';
export default function initNavStore() {
const backLink = writable<string>('/');
return {
backLink,
set: (newlink: string) => backLink.set(newlink)
};
}

28
modules/gui/src/routes/+layout.svelte
View file

@ -2,32 +2,19 @@
<script lang="ts">
import '$appcss';
import { navigating } from '$app/stores';
import NavBar from '$components/NavBar/NavBar.svelte';
import TopBar from '$components/TopBar/TopBar.svelte';
import FooterLinks from '$components/FooterLinks/FooterLinks.svelte';
import { backLink as backLinkStore } from '$libs/stores';
import SearchPopupResults from '$components/SearchPopupResults/SearchPopupResults.svelte';
let view: HTMLElement;
let backLink = '';
backLinkStore.subscribe((v) => {
backLink = v;
});
$: if ($navigating) view.scrollTop = 0;
</script>
<div id="main-layout">
<nav class="border border-t-0 border-l-0 border-b-0 border-gray">
<NavBar />
</nav>
<div id="main-layout" class="w-full">
<TopBar />
<section class="pt-24" bind:this={view}>
{#if backLink}
<header class="border-b border-gray px-16 text-3xl text-gray hover:text-primary">
<a href={backLink}>&#8592</a>
</header>
{/if}
<figure />
<div class="content">
@ -43,16 +30,11 @@
<style>
#main-layout {
width: 100vh;
height: 100vh;
}
nav {
position: fixed;
width: 240px;
}
section {
position: fixed;
left: 240px;
left: 0px;
right: 0px;
height: 100vh;
overflow-y: scroll;
@ -62,7 +44,7 @@
z-index: 0;
position: fixed;
top: 220px;
left: 240px;
left: 0px;
right: 0px;
bottom: 0px;
background-image: url('/images/gui-background-grid.svg');

4
modules/gui/src/routes/cli/+page.svelte
View file

@ -3,8 +3,8 @@
import PageHeader from '$components/PageHeader/PageHeader.svelte';
import CliBanner from '$components/CliBanner/CliBanner.svelte';
import BigBlackSpace from '$components/BigBlackSpace/BigBlackSpace.svelte';
import { backLink } from '$libs/stores';
backLink.set('/');
import { navStore } from '$libs/stores';
navStore.set('/');
</script>
<div>

4
modules/gui/src/routes/documentation/+page.svelte
View file

@ -3,8 +3,8 @@
import PageHeader from '$components/PageHeader/PageHeader.svelte';
import FeaturedCourses from '$components/FeaturedCourses/FeaturedCourses.svelte';
import EssentialWorkshops from '$components/EssentialWorkshops/EssentialWorkshops.svelte';
import { backLink } from '$libs/stores';
backLink.set('/');
import { navStore } from '$libs/stores';
navStore.set('/');
</script>
<div>

13
modules/gui/src/routes/others/+page.svelte
View file

@ -1,13 +0,0 @@
<script lang="ts">
import { invoke } from '@tauri-apps/api/tauri';
import Button from '@tea/ui/Button/Button.svelte';
let pkg = '';
async function installPackage() {
await invoke('install_package', { package: pkg });
}
</script>
<h1>Others</h1>
<input bind:value={pkg} />
<Button on:click={installPackage} label="install package" />
<a href="/">Back</a>

4
modules/gui/src/routes/packages/+page.svelte
View file

@ -2,8 +2,8 @@
import '$appcss';
import PageHeader from '$components/PageHeader/PageHeader.svelte';
import SearchPackages from '$components/SearchPackages/SearchPackages.svelte';
import { backLink } from '$libs/stores';
backLink.set('/');
import { navStore } from '$libs/stores';
navStore.set('/');
</script>
<div>

5
modules/gui/src/routes/packages/[slug]/+page.svelte
View file

@ -1,11 +1,12 @@
<script lang="ts">
import '$appcss';
import PageHeader from '$components/PageHeader/PageHeader.svelte';
import { backLink, packagesReviewStore } from '$libs/stores';
import { navStore, packagesReviewStore } from '$libs/stores';
import PackageBanner from '$components/PackageBanner/PackageBanner.svelte';
import PackageReviews from '$components/PackageReviews/PackageReviews.svelte';
import type { Review } from '@tea/ui/types';
backLink.set('/packages');
navStore.set('/packages');
/** @type {import('./$types').PageData} */
export let data;

4
modules/gui/src/routes/profile/+page.svelte
View file

@ -5,8 +5,8 @@
import Preflight from '$components/Preflight/Preflight.svelte';
import Badges from '$components/Badges/Badges.svelte';
import InstalledPackages from '$components/InstalledPackages/InstalledPackages.svelte';
import { backLink } from '$libs/stores';
backLink.set('/');
import { navStore } from '$libs/stores';
navStore.set('/');
</script>
<div>

3
modules/ui/src/SearchInput/SearchInput.svelte
View file

@ -5,6 +5,7 @@
export { clazz as class };
export let size: 'small' | 'medium' | 'large' = 'small';
export let onSearch: (text: string) => void;
export let placeholder = 'search_';
let timer: NodeJS.Timeout;
const onChange = (e: KeyboardEvent) => {
@ -20,7 +21,7 @@
<div class="icon pl-4">
<i class="icon-search-icon" />
</div>
<input type="search" class="pb-2" placeholder="search_" on:keyup={onChange} />
<input type="search" class="flex-grow pb-2" {placeholder} on:keyup={onChange} />
</section>
<!-- <input type="search" class="w-full bg-black h-12 p-4 border border-x-0 border-gray"/> -->

BIN
modules/ui/src/icons/fonts/tea-icons.eot
View file

Binary file not shown.

7
modules/ui/src/icons/fonts/tea-icons.svg
View file

@ -16,7 +16,6 @@
<glyph glyph-name="right-arrow" unicode="&#103;" d="M297 128c-2 3-4 7-4 11 0 4 2 9 5 12 4 2 7 5 11 7l146 84-438 0c-7 0-13 5-13 13 0 7 6 13 13 13l13 0 0 0 424 0-145 84c-4 1-7 4-11 6-3 4-5 8-5 13 0 4 2 8 4 11 2 3 6 4 9 4 3 0 5-1 7-2l176-101c5-3 8-6 12-10 4-5 6-11 6-17l0-2c0-7-2-13-6-18-3-4-7-7-12-10l-176-101c-2-1-4-2-7-2-3 0-7 2-9 5z"/>
<glyph glyph-name="telegram" unicode="&#104;" d="M509 459c-2 6-4 7-7 8-7 2-14 1-21-1 0 0-446-161-472-178-3-2-6-5-8-9-2-7 2-15 9-18l115-38c2 0 4 0 6 0 26 17 263 167 277 172 2 0 3 0 3-2-5-19-211-202-211-202-1-1-1-2-2-2l-10-114c0 0-5-35 30 0 25 24 49 45 60 55 41-27 83-58 101-73 7-6 15-9 24-9 11 1 20 9 22 19 0 0 81 328 84 372 0 4 1 7 1 10 0 3 0 7-1 10z"/>
<glyph glyph-name="twitter" unicode="&#105;" d="M161 51c194 0 299 159 299 297 0 5 0 9 0 14 20 14 38 33 52 54-19-9-40-14-61-16 23 12 39 33 47 57-21-12-43-20-67-25-20 21-47 33-76 33-28 0-55-11-74-31-20-19-31-46-31-73 0-9 1-17 3-24-85 4-164 43-217 109-28-48-14-109 33-140-17 1-33 5-48 13l0-1c0-50 36-93 85-103-9-2-19-3-28-3-7 0-13 0-20 2 14-43 53-72 98-73-37-29-83-44-131-44-8 0-17 0-25 1 48-31 104-47 161-47z"/>
<glyph glyph-name="tea-logo-iconasset-1" unicode="&#106;" d="M475 187c6-3 11-8 15-14 12-20 5-47-15-59l-75-52c-3-3-8-4-12-4-6 0-12 3-16 8-7 10-5 23 4 30l76 53 2 1 0 1-2 1-76 53c0 1-1 1-2 2-9 7-10 20-3 29 7 9 20 11 29 4l75-53 0 0z m-194 7c8 6 10 17 4 25 0 0 0 0 0 0-12 17-48 40-97 12-6-3-12-7-17-12-16-13-39-23-62 2-6 7-18 8-25 1-7-7-8-18-1-25 14-17 34-27 56-27 20 1 40 9 55 22 3 3 7 6 12 9 31 18 47 1 50-2 6-8 17-11 25-5 0 0 0 0 0 0z m35 70c-11-3-17-15-14-26 0-1 34-118-35-198-8-9-7-22 2-30 8-7 22-6 29 3 85 97 46 231 45 237-4 11-15 18-27 14l0 0z m-249-26c3 11-4 23-15 26-11 3-22-3-25-14-2-6-41-140 44-237 4-5 10-8 16-8 5 0 10 2 13 5 9 8 10 21 3 30l0 0c-70 80-37 197-36 198z m157-196l-81 0c-11 0-21-9-21-21 0-11 10-21 21-21l81 0c11 0 21 10 21 21 0 12-10 21-21 21l0 0z m-38 236c2-2 5-3 8-3 5 0 10 2 13 6 51 72 2 146 0 149-5 7-14 9-21 4-7-5-9-14-4-21 1-2 39-60 0-115-5-7-3-16 4-20z m-31 72c3 0 6 1 9 2 6 5 8 14 4 21-2 3-40 60 0 115 5 7 3 16-4 21-6 5-16 3-21-3-51-72-2-146 0-149 3-4 7-7 12-7z"/>
<glyph glyph-name="tea-circle" unicode="&#107;" d="M512 256c0-141-115-256-256-256-141 0-256 115-256 256 0 141 115 256 256 256 141 0 256-115 256-256z"/>
<glyph glyph-name="clipboard" unicode="&#108;" d="M403 464l-67 0-20 47-120 0-20-47-67 0c-15 0-27-12-27-27l0-409c0-15 12-27 27-27l294 0c15 0 27 12 27 27l0 409c0 15-12 27-27 27z m-189 20l84 0 8-20-100 0 8 20z m188-456l-292 0 0 408 292 0 0-408z m-254 362l216 0c4 0 7 4 7 7 0 4-3 7-7 7l-216 0c-4 0-7-3-7-7 0-3 3-7 7-7z m0-45l216 0c4 0 7 3 7 6 0 4-3 7-7 7l-216 0c-4 0-7-3-7-7 0-3 3-6 7-6z m0-46l216 0c4 0 7 3 7 7 0 3-3 6-7 6l-216 0c-4 0-7-3-7-6 0-4 3-7 7-7z m0-46l216 0c4 0 7 3 7 7 0 4-3 7-7 7l-216 0c-4 0-7-3-7-7 0-4 3-7 7-7z m0-46l216 0c4 0 7 3 7 7 0 4-3 7-7 7l-216 0c-4 0-7-3-7-7 0-4 3-7 7-7z m0-46l216 0c4 0 7 3 7 7 0 4-3 7-7 7l-216 0c-4 0-7-3-7-7 0-4 3-7 7-7z m0-45l216 0c4 0 7 3 7 6 0 4-3 7-7 7l-216 0c-4 0-7-3-7-7 0-3 3-6 7-6z m0-46l124 0c4 0 7 3 7 7 0 3-3 6-7 6l-124 0c-4 0-7-3-7-6 0-4 3-7 7-7z"/>
<glyph glyph-name="tea-checkmark" unicode="&#109;" d="M481 512l-450 0c-17 0-31-14-31-31l0-450c0-17 14-31 31-31l450 0c17 0 31 14 31 31l0 450c0 17-14 31-31 31z m-436-467l0 422 406 0-207-311-116 70c-11 7-25 3-31-7-7-11-3-25 7-31l154-93 209 314 0-364z"/>
@ -24,8 +23,12 @@
<glyph glyph-name="pattern-random-15" unicode="&#111;" d="M59 512l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z m138 0l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z m138 0l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z m138 0l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z m-414-138l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z m138 0l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z m138 0l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z m138 0l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z m-414-138l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z m138 0l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z m138 0l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z m138 0l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z m-414-138l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z m138 0l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z m138 0l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z m138 0l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z"/>
<glyph glyph-name="pattern-random-19" unicode="&#112;" d="M439 512l-201 0 0-91-37 0 0 91-201 0 0-201 91 0 0-110-91 0 0-201 512 0 0 421-73 0z m-183-18l165 0 0-73-165 0z m0-92l165 0 0-73-165 0z m-238-73l0 165 165 0 0-73-92 0 0-92z m165 73l0-73-73 0 0 73z m-165-384l0 165 73 0 0-165z m92 0l0 165 73 0 0-165z m384 384l0-384-293 0 0 183-91 0 0 110 91 0 0 91 37 0 0-91 201 0 0 91z m-256-347l201 0 0 201-201 0z m18 183l165 0 0-165-165 0z"/>
<glyph glyph-name="click-copy-icon" unicode="&#113;" d="M380 440l0 71-325 0 0-439 77 0 0-71 325 0 0 439z m-304-347l0 397 284 0 0-50-228 0 0-347z m360-71l-284 0 0 397 284 0z"/>
<glyph glyph-name="search-icon" unicode="&#114;" d="M422 340c0 92-74 166-166 166-92 0-166-74-166-166 0-85 64-156 147-165l0-169 38 0 0 169c83 9 147 80 147 165z m-166-128c-71 0-128 57-128 128 0 71 57 128 128 128 71 0 128-57 128-128 0-71-57-128-128-128z"/>
<glyph glyph-name="star-full" unicode="&#115;" d="M494 327c0-4-3-9-8-14l-103-101 24-143c0-1 0-3 0-5 0-4-1-8-3-10-2-3-4-5-8-5-4 0-8 2-12 4l-128 67-128-67c-4-2-8-4-12-4-4 0-7 2-9 5-2 2-3 6-3 10 0 1 0 3 1 5l24 143-104 101c-4 6-7 10-7 14 0 7 6 12 16 13l144 21 64 130c4 8 8 12 14 12 6 0 10-4 14-12l64-130 144-21c10-1 16-6 16-13z"/>
<glyph glyph-name="star-half" unicode="&#116;" d="M357 239l74 71-102 15-19 3-9 17-45 92 0-275 17-9 91-48-17 101-4 19z m129 74l-103-101 24-143c1-6 1-11-2-14-2-4-5-6-9-6-4 0-7 2-12 4l-128 67-128-67c-5-2-8-4-12-4-4 0-7 2-9 6-3 3-3 8-2 14l24 143-104 101c-6 7-8 12-6 17 2 6 7 9 15 10l144 21 64 130c4 8 8 12 14 12 5 0 10-4 14-12l64-130 144-21c8-1 13-4 15-10 2-5 0-10-7-17z"/>
<glyph glyph-name="star-empty" unicode="&#117;" d="M343 225l88 85-121 18-54 109-54-109-121-18 88-85-21-120 108 57 108-57z m151 102c0-4-3-9-8-14l-103-101 24-143c0-1 0-3 0-5 0-10-3-15-11-15-4 0-8 2-12 4l-128 67-128-67c-4-2-8-4-12-4-4 0-7 2-9 5-2 2-3 6-3 10 0 1 0 3 1 5l24 143-104 101c-4 6-7 10-7 14 0 7 6 12 16 13l144 21 64 130c4 8 8 12 14 12 6 0 10-4 14-12l64-130 144-21c10-1 16-6 16-13z"/>
<glyph glyph-name="tea-logo-iconasset-1" unicode="&#106;" d="M475 187c6-3 11-8 15-14 12-20 5-47-15-59l-75-52c-3-3-8-4-12-4-6 0-12 3-16 8-7 10-5 23 4 30l76 53 2 1 0 1-2 1-76 53c0 1-1 1-2 2-9 7-10 20-3 29 7 9 20 11 29 4l75-53 0 0z m-194 7c8 6 10 17 4 25 0 0 0 0 0 0-12 17-48 40-97 12-6-3-12-7-17-12-16-13-39-23-62 2-6 7-18 8-25 1-7-7-8-18-1-25 14-17 34-27 56-27 20 1 40 9 55 22 3 3 7 6 12 9 31 18 47 1 50-2 6-8 17-11 25-5 0 0 0 0 0 0z m35 70c-11-3-17-15-14-26 0-1 34-118-35-198-8-9-7-22 2-30 8-7 22-6 29 3 85 97 46 231 45 237-4 11-15 18-27 14l0 0z m-249-26c3 11-4 23-15 26-11 3-22-3-25-14-2-6-41-140 44-237 4-5 10-8 16-8 5 0 10 2 13 5 9 8 10 21 3 30l0 0c-70 80-37 197-36 198z m157-196l-81 0c-11 0-21-9-21-21 0-11 10-21 21-21l81 0c11 0 21 10 21 21 0 12-10 21-21 21l0 0z m-38 236c2-2 5-3 8-3 5 0 10 2 13 6 51 72 2 146 0 149-5 7-14 9-21 4-7-5-9-14-4-21 1-2 39-60 0-115-5-7-3-16 4-20z m-31 72c3 0 6 1 9 2 6 5 8 14 4 21-2 3-40 60 0 115 5 7 3 16-4 21-6 5-16 3-21-3-51-72-2-146 0-149 3-4 7-7 12-7z"/>
<glyph glyph-name="search-icon" unicode="&#114;" d="M291 459c-91 0-164-74-164-164 0-31 8-60 23-85l-79-79 0 0c-8-8-14-20-14-33 0-25 21-45 46-45 12 0 24 5 32 14l0-1 82 82c22-11 47-17 74-17 90 0 164 73 164 164 0 90-74 164-164 164z m1-263c-57 0-103 45-103 102 0 56 46 102 103 102 56 0 102-46 102-102 0-57-46-102-102-102z"/>
<glyph glyph-name="filter" unicode="&#118;" d="M461 398c0 18-14 32-32 33l0 0-343 0 0 0c0 0-1 0-2 0-18 0-33-15-33-33 0-11 5-20 13-26l154-154 0-96 0 0 0 0c0-7 4-12 9-15l0 0 40-23c0 0 1 0 1-1l0 0 0 0c3-1 6-2 9-2 10 0 17 8 17 17 0 1 0 1 0 2l0 0 0 118 156 155 0 0c7 6 11 15 11 25z m-296-33l0 0 0 0z"/>
<glyph glyph-name="upload" unicode="&#119;" d="M440 258l-93 0c-12 0-22-7-25-17-10-28-36-46-66-46-30 0-56 18-66 46-3 10-13 17-25 17l-93 0c-14 0-26-11-26-25l0-144c0-14 12-25 26-25l368 0c14 0 26 11 26 25l0 144c0 14-12 25-26 25z m-257 79l34 0 0-88c0-4 4-7 7-7l64 0c3 0 7 3 7 7l0 88 34 0c2 0 5 1 6 3 1 2 1 5-1 7l-73 98c-1 2-3 3-5 3l0 0c-3 0-5-1-6-3l-72-98c-2-2-2-5-1-7 1-2 4-3 6-3z"/>
<glyph glyph-name="share" unicode="&#120;" d="M421 229l0-74c0-22-8-42-25-58-16-16-35-24-58-24l-237 0c-23 0-42 8-59 24-16 16-24 36-24 58l0 238c0 23 8 42 24 58 17 16 36 24 59 24l72 0c3 0 5 0 7-2 2-2 3-4 3-7 0-5-3-8-8-9-15-5-27-11-38-17-2-1-3-1-4-1l-32 0c-13 0-24-5-33-14-9-9-13-19-13-32l0-238c0-12 4-23 13-32 9-9 20-13 33-13l237 0c13 0 24 4 33 13 9 9 13 20 13 32l0 62c0 3 2 6 5 8 5 2 11 6 16 10 3 3 6 4 10 3 4-2 6-5 6-9z m67 142l-109-110c-4-3-8-5-13-5-3 0-5 0-7 1-8 4-12 9-12 17l0 55-45 0c-62 0-104-12-125-37-23-26-30-71-22-135 1-5-1-8-5-10-2-1-3-1-4-1-3 0-5 2-7 4-2 3-4 6-6 9-2 3-6 10-11 19-6 10-11 20-15 29-4 9-7 20-11 32-3 13-5 25-5 35 0 10 1 18 1 26 1 8 2 17 4 26 2 9 5 18 8 25 4 8 8 16 14 23 5 8 12 15 19 22 8 6 17 12 27 17 11 6 23 10 36 14 13 4 28 7 46 9 17 2 36 3 56 3l45 0 0 55c0 8 4 13 12 17 2 1 4 1 7 1 5 0 9-2 13-5l109-110c4-4 6-8 6-13 0-5-2-9-6-13z"/>
</font></defs></svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 12 KiB

BIN
modules/ui/src/icons/fonts/tea-icons.ttf
View file

Binary file not shown.

BIN
modules/ui/src/icons/fonts/tea-icons.woff
View file

Binary file not shown.

21
modules/ui/src/icons/icons.css
View file

@ -64,9 +64,6 @@
.icon-twitter:before {
content: '\69';
}
.icon-tea-logo-iconasset-1:before {
content: '\6a';
}
.icon-tea-circle:before {
content: '\6b';
}
@ -88,9 +85,6 @@
.icon-click-copy-icon:before {
content: '\71';
}
.icon-search-icon:before {
content: '\72';
}
.icon-star-full:before {
content: '\73';
}
@ -100,3 +94,18 @@
.icon-star-empty:before {
content: '\75';
}
.icon-tea-logo-iconasset-1:before {
content: '\6a';
}
.icon-search-icon:before {
content: '\72';
}
.icon-filter:before {
content: '\76';
}
.icon-upload:before {
content: '\77';
}
.icon-share:before {
content: '\78';
}