feat(components/tiles): better small icon
This commit is contained in:
parent
073676b662
commit
1499e46a0f
5 changed files with 120 additions and 66 deletions
|
|
@ -8,6 +8,7 @@ Metro-like tile. Must be in a group to display correctly.
|
|||
import randomNumber from "$lib/utils/random-number";
|
||||
import { cva } from "class-variance-authority";
|
||||
import { onDestroy, onMount } from "svelte";
|
||||
import TileIconPage from "./pages/TileIconPage.svelte";
|
||||
|
||||
/**
|
||||
* Max angle value.
|
||||
|
|
@ -68,6 +69,8 @@ Metro-like tile. Must be in a group to display correctly.
|
|||
icon,
|
||||
column,
|
||||
children,
|
||||
link = "#",
|
||||
enabled = true,
|
||||
}: {
|
||||
/**
|
||||
* Size.
|
||||
|
|
@ -89,6 +92,16 @@ Metro-like tile. Must be in a group to display correctly.
|
|||
*/
|
||||
icon: string;
|
||||
|
||||
/**
|
||||
* Link.
|
||||
*/
|
||||
link?: string;
|
||||
|
||||
/**
|
||||
* Is tile enabled?
|
||||
*/
|
||||
enabled?: boolean;
|
||||
|
||||
/**
|
||||
* Pages.
|
||||
*/
|
||||
|
|
@ -98,30 +111,34 @@ Metro-like tile. Must be in a group to display correctly.
|
|||
/**
|
||||
* Tile style.
|
||||
**/
|
||||
const style = cva(
|
||||
[
|
||||
"relative",
|
||||
"bg-(--tile-color)",
|
||||
"perspective-distant",
|
||||
"active:scale-95",
|
||||
"active:transform-gpu",
|
||||
"active:transform-3d",
|
||||
"active:rotate-x-(--tile-rotate-x)",
|
||||
"active:rotate-y-(--tile-rotate-y)",
|
||||
"duration-75",
|
||||
"ease-in-out",
|
||||
],
|
||||
{
|
||||
variants: {
|
||||
size: {
|
||||
small: ["row-span-1", "col-span-1"],
|
||||
medium: ["row-span-2", "col-span-2"],
|
||||
wide: ["row-span-2", "col-span-4"],
|
||||
large: ["row-span-4", "col-span-4"],
|
||||
},
|
||||
const style = cva(["relative", "bg-(--tile-color)/80"], {
|
||||
variants: {
|
||||
size: {
|
||||
small: ["row-span-1", "col-span-1"],
|
||||
medium: ["row-span-2", "col-span-2"],
|
||||
wide: ["row-span-2", "col-span-4"],
|
||||
large: ["row-span-4", "col-span-4"],
|
||||
},
|
||||
enabled: {
|
||||
false: ["grayscale", "opacity-50"],
|
||||
true: [
|
||||
"active:scale-95",
|
||||
"perspective-distant",
|
||||
"active:transform-gpu",
|
||||
"active:transform-3d",
|
||||
"active:rotate-x-(--tile-rotate-x)",
|
||||
"active:rotate-y-(--tile-rotate-y)",
|
||||
"duration-75",
|
||||
"ease-in-out",
|
||||
],
|
||||
},
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
/**
|
||||
* Is tile active?
|
||||
*/
|
||||
const active = link !== "#" && enabled && children !== null;
|
||||
|
||||
/**
|
||||
* Icon size.
|
||||
|
|
@ -235,7 +252,7 @@ Metro-like tile. Must be in a group to display correctly.
|
|||
</script>
|
||||
|
||||
<a
|
||||
class={style({ size })}
|
||||
class={style({ size, enabled })}
|
||||
style="
|
||||
--tile-icon: url('{icon}');
|
||||
--tile-icon-size: {iconSize}px;
|
||||
|
|
@ -246,7 +263,7 @@ Metro-like tile. Must be in a group to display correctly.
|
|||
grid-row-start: {row};
|
||||
grid-column-start: {column};
|
||||
"
|
||||
onmousemove={updateDynamicMouseValues}
|
||||
onmousemove={active ? updateDynamicMouseValues : null}
|
||||
href="#h"
|
||||
>
|
||||
<!-- Tile pages -->
|
||||
|
|
@ -254,25 +271,31 @@ Metro-like tile. Must be in a group to display correctly.
|
|||
class="w-full h-full overflow-y-hidden scroll-smooth duration-150"
|
||||
bind:this={pages}
|
||||
>
|
||||
{@render children()}
|
||||
{#if active}
|
||||
{@render children()}
|
||||
{:else}
|
||||
<TileIconPage />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Tile border -->
|
||||
<div
|
||||
class="
|
||||
absolute top-0
|
||||
w-full h-full
|
||||
border-2 border-white
|
||||
opacity-0 hover:opacity-50 hover:mask-(--mask) active:opacity-100
|
||||
duration-75 ease-in-out
|
||||
"
|
||||
style="
|
||||
--mask: radial-gradient(
|
||||
{TILE_BASE_SIZE}px
|
||||
at {mousePosition.x}px {mousePosition.y}px,
|
||||
black 45%,
|
||||
transparent
|
||||
);
|
||||
"
|
||||
></div>
|
||||
{#if active}
|
||||
<!-- Tile border -->
|
||||
<div
|
||||
class="
|
||||
absolute top-0
|
||||
w-full h-full
|
||||
border-2 border-white
|
||||
opacity-0 hover:opacity-50 hover:mask-(--mask) active:opacity-100
|
||||
duration-75 ease-in-out
|
||||
"
|
||||
style="
|
||||
--mask: radial-gradient(
|
||||
{TILE_BASE_SIZE}px
|
||||
at {mousePosition.x}px {mousePosition.y}px,
|
||||
black 45%,
|
||||
transparent
|
||||
);
|
||||
"
|
||||
></div>
|
||||
{/if}
|
||||
</a>
|
||||
|
|
|
|||
10
src/lib/components/tiles/TileSmallIcon.svelte
Normal file
10
src/lib/components/tiles/TileSmallIcon.svelte
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<!--
|
||||
@component
|
||||
|
||||
Small icon for a tile pages.
|
||||
-->
|
||||
|
||||
<div
|
||||
class="w-8 mt-auto aspect-square bg-contain bg-center bg-no-repeat self-start m-2"
|
||||
style="background-image: var(--tile-icon);"
|
||||
></div>
|
||||
|
|
@ -5,6 +5,8 @@ Image page for a tile. Must be in a tile to display correctly.
|
|||
-->
|
||||
|
||||
<script lang="ts">
|
||||
import TileSmallIcon from "../TileSmallIcon.svelte";
|
||||
|
||||
let {
|
||||
image,
|
||||
}: {
|
||||
|
|
@ -19,8 +21,5 @@ Image page for a tile. Must be in a tile to display correctly.
|
|||
class="flex flex-col justify-end bg-cover bg-center bg-no-repeat"
|
||||
style="height: var(--tile-page-height); background-image: url('{image}');"
|
||||
>
|
||||
<div
|
||||
class="w-5 mt-auto aspect-square bg-contain bg-center bg-no-repeat self-end m-2"
|
||||
style="background-image: var(--tile-icon);"
|
||||
></div>
|
||||
<TileSmallIcon />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@ Text page for a tile. Must be in a tile to display correctly.
|
|||
-->
|
||||
|
||||
<script lang="ts">
|
||||
import TileSmallIcon from "../TileSmallIcon.svelte";
|
||||
|
||||
let {
|
||||
title,
|
||||
subtitle,
|
||||
|
|
@ -16,22 +18,18 @@ Text page for a tile. Must be in a tile to display correctly.
|
|||
} = $props();
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="p-2 w-full flex flex-col gap-1 select-none text-white"
|
||||
style="height: var(--tile-page-height);"
|
||||
>
|
||||
<h1 class="font-bold text-md">{title}</h1>
|
||||
<div class="w-full flex flex-col" style="height: var(--tile-page-height);">
|
||||
<div class="w-full flex flex-col gap-1 p-2 select-none text-white">
|
||||
<h1 class="font-bold text-md">{title}</h1>
|
||||
|
||||
{#if subtitle}
|
||||
<h2 class="text-md">{subtitle}</h2>
|
||||
{/if}
|
||||
{#if subtitle}
|
||||
<h2 class="text-md">{subtitle}</h2>
|
||||
{/if}
|
||||
|
||||
{#if text}
|
||||
<p class="text-sm">{text}</p>
|
||||
{/if}
|
||||
{#if text}
|
||||
<p class="text-sm">{text}</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="w-5 mt-auto aspect-square bg-contain bg-center bg-no-repeat self-end"
|
||||
style="background-image: var(--tile-icon);"
|
||||
></div>
|
||||
<TileSmallIcon />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,22 +12,46 @@
|
|||
</script>
|
||||
|
||||
<TileGroup title="a lot of mikhails" rows={3} columns={3}>
|
||||
<Tile size="small" row={5} column={2} icon={iconSynzr}>
|
||||
<Tile
|
||||
size="small"
|
||||
row={5}
|
||||
column={2}
|
||||
icon={iconSynzr}
|
||||
link="https://example.com"
|
||||
>
|
||||
<TileIconPage name="mikhail" />
|
||||
<TileTextPage title="Title" subtitle="Subtitle" text="Text" />
|
||||
</Tile>
|
||||
|
||||
<Tile size="medium" row={3} column={5} icon={iconSynzr}>
|
||||
<Tile
|
||||
size="medium"
|
||||
row={3}
|
||||
column={5}
|
||||
icon={iconSynzr}
|
||||
link="https://example.com"
|
||||
>
|
||||
<TileImagePage image={imageTestSquare} />
|
||||
<TileTextPage title="Title" subtitle="Subtitle" text="Text" />
|
||||
</Tile>
|
||||
|
||||
<Tile size="wide" row={5} column={3} icon={iconSynzr}>
|
||||
<Tile
|
||||
size="wide"
|
||||
row={5}
|
||||
column={3}
|
||||
icon={iconSynzr}
|
||||
link="https://example.com"
|
||||
>
|
||||
<TileIconPage name="mikhail" />
|
||||
<TileImagePage image={imageTestRectangle} />
|
||||
</Tile>
|
||||
|
||||
<Tile size="large" row={1} column={1} icon={iconSynzr}>
|
||||
<Tile
|
||||
size="large"
|
||||
row={1}
|
||||
column={1}
|
||||
icon={iconSynzr}
|
||||
link="https://example.com"
|
||||
>
|
||||
<TileIconPage name="mikhail" />
|
||||
<TileImagePage image={imageTestSquare} />
|
||||
</Tile>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue