mirror of
https://github.com/coracle-social/coracle.git
synced 2024-09-29 08:21:20 +00:00
Fix some feed stuff, start implementing the new feed form design
This commit is contained in:
Jon Staab
parent
829104157f
commit
1db27a5e11
@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import {onMount} from "svelte"
|
||||
import {Storage} from "hurdak"
|
||||
import {prop} from 'ramda'
|
||||
import type {Feed} from "@welshman/feeds"
|
||||
import {createScroller} from "src/util/misc"
|
||||
import {fly} from "src/util/transition"
|
||||
@ -24,6 +25,7 @@
|
||||
export let onEvent = null
|
||||
|
||||
let element
|
||||
let filters = [{ids: []}]
|
||||
let limit = 0
|
||||
let opts = {
|
||||
feed,
|
||||
@ -39,7 +41,7 @@
|
||||
shouldHideReplies: Storage.getJson("hideReplies"),
|
||||
}
|
||||
|
||||
const {notes, start, load} = new FeedLoader(opts)
|
||||
const {notes, start, load, feedLoader} = new FeedLoader(opts)
|
||||
|
||||
const loadMore = async () => {
|
||||
limit += 5
|
||||
@ -49,9 +51,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
const update = opts => {
|
||||
const update = async opts => {
|
||||
limit = 0
|
||||
start(opts)
|
||||
filters = feedLoader.compiler.canCompile(opts.feed)
|
||||
? prop('filters', await feedLoader.compiler.compile(opts.feed))
|
||||
: [{ids: []}]
|
||||
}
|
||||
|
||||
$: {
|
||||
@ -77,6 +82,7 @@
|
||||
depth={opts.shouldHideReplies ? 0 : 2}
|
||||
context={note.replies || []}
|
||||
{showGroup}
|
||||
{filters}
|
||||
{anchor}
|
||||
{note} />
|
||||
</div>
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
import {FeedType, Scope, getSubFeeds} from "@welshman/feeds"
|
||||
import {slide} from 'src/util/transition'
|
||||
import {formatTimestampAsDate, getStringWidth} from "src/util/misc"
|
||||
import Card from "src/partials/Card.svelte"
|
||||
import Popover from "src/partials/Popover.svelte"
|
||||
import Subheading from "src/partials/Subheading.svelte"
|
||||
import Menu from "src/partials/Menu.svelte"
|
||||
@ -218,7 +219,7 @@
|
||||
|
||||
{#if isOpen}
|
||||
<Modal onEscape={closeModal}>
|
||||
<Subheading>Create a custom Feed</Subheading>
|
||||
<Subheading class="ml-6">Create a custom Feed</Subheading>
|
||||
<FeedForm {feed} onCancel={closeModal} onChange={saveFeed} />
|
||||
</Modal>
|
||||
{/if}
|
||||
|
||||
@ -3,6 +3,8 @@
|
||||
import {quantify, switcherFn, updatePath} from "hurdak"
|
||||
import {inc} from "@welshman/lib"
|
||||
import {FeedType, hasSubFeeds, getSubFeeds} from "@welshman/feeds"
|
||||
import Icon from "src/partials/Icon.svelte"
|
||||
import SelectTiles from "src/partials/SelectTiles.svelte"
|
||||
import Card from "src/partials/Card.svelte"
|
||||
import Popover from "src/partials/Popover.svelte"
|
||||
import Menu from "src/partials/Menu.svelte"
|
||||
@ -78,27 +80,37 @@
|
||||
</script>
|
||||
|
||||
<FlexColumn class="pb-32">
|
||||
<Field label="Feed Type">
|
||||
<Select value={feedType} onChange={onTypeChange}>
|
||||
<option value={FeedType.Filter}>Using filters</option>
|
||||
<option value={FeedType.List}>From lists</option>
|
||||
<option value={FeedType.DVM}>Data vending machine</option>
|
||||
<option value={FeedType.Relay}>Relays</option>
|
||||
<option value={FeedType.Union}>Union</option>
|
||||
<option value={FeedType.Intersection}>Intersection</option>
|
||||
<option value={FeedType.Difference}>Difference</option>
|
||||
<option value={FeedType.SymmetricDifference}>Symmetric Difference</option>
|
||||
</Select>
|
||||
<p slot="info">
|
||||
Select which feed type you'd like to use. In addition to some basic feed types, nostr also
|
||||
supports combinations of sub-feeds using set operators for advanced use cases.
|
||||
</p>
|
||||
</Field>
|
||||
<Card>
|
||||
<Field label="Choose a feed type">
|
||||
<SelectTiles
|
||||
options={[FeedType.Filter, FeedType.Relay, FeedType.DVM, "advanced"]}
|
||||
onChange={onTypeChange}
|
||||
value={feedType}>
|
||||
<div slot="item" class="flex flex-col items-center" let:option let:active>
|
||||
{#if option === FeedType.Filter}
|
||||
<Icon icon="people-nearby" class="w-12 h-12" color={active ? "accent" : "tinted-800"} />
|
||||
<span class="text-2xl staatliches">Standard</span>
|
||||
{:else if option === FeedType.Relay}
|
||||
<Icon icon="server" class="w-12 h-12" color={active ? "accent" : "tinted-800"} />
|
||||
<span class="text-2xl staatliches">Relays</span>
|
||||
{:else if option === FeedType.DVM}
|
||||
<Icon icon="network" class="w-12 h-12" color={active ? "accent" : "tinted-800"} />
|
||||
<span class="text-2xl staatliches">DVMs</span>
|
||||
{:else}
|
||||
<span class="w-12 h-12 flex items-center justify-center">
|
||||
<i class="fa fa-2xl fa-gears" />
|
||||
</span>
|
||||
<span class="text-2xl staatliches">Advanced</span>
|
||||
{/if}
|
||||
</div>
|
||||
</SelectTiles>
|
||||
</Field>
|
||||
</Card>
|
||||
{#if feedType === FeedType.Relay}
|
||||
<Field label="Relay Selections">
|
||||
<SearchSelect
|
||||
multiple
|
||||
value={feed[1] || []}
|
||||
value={current[1] || []}
|
||||
search={$searchRelayUrls}
|
||||
onChange={urls => setAtCursor(urls, [1])}>
|
||||
<span slot="item" let:item>{displayRelayUrl(item)}</span>
|
||||
@ -156,12 +168,12 @@
|
||||
{#each subFeeds as subFeed, i (displayFeed(subFeed) + i)}
|
||||
<Card class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<Anchor on:click={() => removeFeed(feed.indexOf(subFeed))}>
|
||||
<Anchor on:click={() => removeFeed(current.indexOf(subFeed))}>
|
||||
<i class="fa fa-trash fa-sm" />
|
||||
</Anchor>
|
||||
<span class="text-lg">{displayFeed(subFeed)}</span>
|
||||
</div>
|
||||
<Anchor class="flex items-center gap-2" on:click={() => pushCursor(feed.indexOf(subFeed))}>
|
||||
<Anchor class="flex items-center gap-2" on:click={() => pushCursor(current.indexOf(subFeed))}>
|
||||
<i class="fa fa-edit" /> Edit
|
||||
</Anchor>
|
||||
</Card>
|
||||
|
||||
@ -392,6 +392,7 @@
|
||||
note={r}
|
||||
depth={depth - 1}
|
||||
context={ctx}
|
||||
{filters}
|
||||
{anchor} />
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
@ -218,7 +218,7 @@
|
||||
"pointer-events-none opacity-50": disableActions,
|
||||
})}
|
||||
on:click={replyCtrl?.start}>
|
||||
<Icon icon="message" accent={Boolean(reply)} />
|
||||
<Icon icon="message" accent={reply ? 'accent' : 'neutral-100'} />
|
||||
{#if $repliesCount > 0}
|
||||
<span transition:fly|local={{y: 5, duration: 100}} class="-mt-px">{$repliesCount}</span>
|
||||
{/if}
|
||||
@ -229,7 +229,7 @@
|
||||
"pointer-events-none opacity-50": disableActions || !canZap,
|
||||
})}
|
||||
on:click={startZap}>
|
||||
<Icon icon="bolt" accent={Boolean(zap)} />
|
||||
<Icon icon="bolt" accent={zap ? 'accent' : 'neutral-100'} />
|
||||
{#if $zapsTotal > 0}
|
||||
<span transition:fly|local={{y: 5, duration: 100}} class="-mt-px"
|
||||
>{formatSats($zapsTotal)}</span>
|
||||
|
||||
@ -56,6 +56,8 @@ export class FeedLoader {
|
||||
isDeleted = isDeleted.get()
|
||||
|
||||
constructor(readonly opts: FeedOpts) {
|
||||
window.feed = this
|
||||
|
||||
// Use a custom feed loader so we can intercept the filters
|
||||
this.feedLoader = new CoreFeedLoader({
|
||||
...baseFeedLoader.options,
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
import {pluralize, seconds} from "hurdak"
|
||||
import {now, sortBy} from "@welshman/lib"
|
||||
import {PublishStatus} from "@welshman/net"
|
||||
import Square from "src/partials/Square.svelte"
|
||||
import Tile from "src/partials/Tile.svelte"
|
||||
import AltColor from "src/partials/AltColor.svelte"
|
||||
import Subheading from "src/partials/Subheading.svelte"
|
||||
import PublishCard from "src/app/shared/PublishCard.svelte"
|
||||
@ -20,36 +20,26 @@
|
||||
|
||||
<Subheading>Published Events</Subheading>
|
||||
<div class="grid grid-cols-4 justify-between gap-2 sm:grid-cols-5">
|
||||
<AltColor background class="rounded-xl">
|
||||
<Square class="flex aspect-square flex-grow flex-col">
|
||||
<p class="text-lg sm:text-2xl">{recent.length}</p>
|
||||
<span class="text-sm">{pluralize(recent.length, "Event")}</span>
|
||||
</Square>
|
||||
</AltColor>
|
||||
<AltColor background class="rounded-xl">
|
||||
<Square class="flex aspect-square flex-grow flex-col">
|
||||
<p class="text-lg sm:text-2xl">{relays.size}</p>
|
||||
<span class="text-sm">{pluralize(relays.size, "Relay")}</span>
|
||||
</Square>
|
||||
</AltColor>
|
||||
<AltColor background class="hidden rounded-xl sm:block">
|
||||
<Square class="flexflex-col aspect-square flex-grow">
|
||||
<p class="text-lg sm:text-2xl">{pending.length}</p>
|
||||
<span class="text-sm">Pending</span>
|
||||
</Square>
|
||||
</AltColor>
|
||||
<AltColor background class="rounded-xl">
|
||||
<Square class="flex aspect-square flex-grow flex-col">
|
||||
<p class="text-lg sm:text-2xl">{success.length}</p>
|
||||
<span class="text-sm">Succeeded</span>
|
||||
</Square>
|
||||
</AltColor>
|
||||
<AltColor background class="rounded-xl">
|
||||
<Square class="flex aspect-square flex-grow flex-col">
|
||||
<p class="text-lg sm:text-2xl">{recent.length - pending.length - success.length}</p>
|
||||
<span class="text-sm">Failed</span>
|
||||
</Square>
|
||||
</AltColor>
|
||||
<Tile background>
|
||||
<p class="text-lg sm:text-2xl">{recent.length}</p>
|
||||
<span class="text-sm">{pluralize(recent.length, "Event")}</span>
|
||||
</Tile>
|
||||
<Tile background>
|
||||
<p class="text-lg sm:text-2xl">{relays.size}</p>
|
||||
<span class="text-sm">{pluralize(relays.size, "Relay")}</span>
|
||||
</Tile>
|
||||
<Tile background lass="hidden sm:block">
|
||||
<p class="text-lg sm:text-2xl">{pending.length}</p>
|
||||
<span class="text-sm">Pending</span>
|
||||
</Tile>
|
||||
<Tile background>
|
||||
<p class="text-lg sm:text-2xl">{success.length}</p>
|
||||
<span class="text-sm">Succeeded</span>
|
||||
</Tile>
|
||||
<Tile background>
|
||||
<p class="text-lg sm:text-2xl">{recent.length - pending.length - success.length}</p>
|
||||
<span class="text-sm">Failed</span>
|
||||
</Tile>
|
||||
</div>
|
||||
{#each sortBy(p => -p.created_at, recent) as pub (pub.id)}
|
||||
<PublishCard {pub} />
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import {splitAt} from "@welshman/lib"
|
||||
import type {Filter, RouterScenario, RouterScenarioOptions} from "@welshman/util"
|
||||
import {isContextAddress, mergeFilters, getFilterId, decodeAddress} from "@welshman/util"
|
||||
import {isContextAddress, unionFilters, getFilterId, decodeAddress} from "@welshman/util"
|
||||
import {without, sortBy, prop} from "ramda"
|
||||
import {getSetting} from "src/engine/session/utils"
|
||||
import {hints} from "src/engine/relays/utils"
|
||||
@ -96,7 +96,7 @@ export const getFilterSelections = (
|
||||
const [keep, discard] = splitAt(getSetting("relay_limit"), selections)
|
||||
|
||||
for (const target of keep.slice(0, getSetting("relay_redundancy"))) {
|
||||
target.filters = mergeFilters(discard.concat(target).flatMap(prop("filters")))
|
||||
target.filters = unionFilters(discard.concat(target).flatMap(prop("filters")))
|
||||
}
|
||||
|
||||
return keep
|
||||
|
||||
@ -5,7 +5,7 @@ import {
|
||||
normalizeRelayUrl as normalize,
|
||||
getFilterId,
|
||||
fromNostrURI,
|
||||
mergeFilters,
|
||||
unionFilters,
|
||||
} from "@welshman/util"
|
||||
import type {Filter} from "@welshman/util"
|
||||
import {ConnectionStatus, NetworkContext} from "@welshman/net"
|
||||
@ -134,7 +134,7 @@ export const forceRelaySelections = (selections: RelayFilters[], forceRelays: st
|
||||
|
||||
return hints.relaySelectionsFromMap(newSelections).map(({values, relay}) => ({
|
||||
relay,
|
||||
filters: mergeFilters(values.map(id => filtersById.get(id))),
|
||||
filters: unionFilters(values.map(id => filtersById.get(id))),
|
||||
}))
|
||||
}
|
||||
|
||||
|
||||
@ -3,17 +3,45 @@
|
||||
import {themeColors} from 'src/partials/state'
|
||||
|
||||
export let icon
|
||||
export let accent = false
|
||||
export let color = "neutral-100"
|
||||
|
||||
$: color = $themeColors[accent ? "accent" : "neutral-100"]
|
||||
$: colorValue = $themeColors[color]
|
||||
</script>
|
||||
|
||||
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" class={cx("inline", $$props.class)}>
|
||||
{#if icon === "bolt"}
|
||||
<path stroke={color} stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" d="M12.6725 0.978028L1.6694 5.39306C1.23849 5.56596 1.02303 5.6524 0.955738 5.78244C0.897219 5.89553 0.897619 6.03092 0.956767 6.14968C1.02482 6.2863 1.24082 6.3937 1.67285 6.6085L7.45472 9.48326L3.71195 15.0219L14.7151 10.6069C15.1459 10.434 15.3614 10.3476 15.4287 10.2175C15.4872 10.1045 15.4868 9.96909 15.4277 9.85034C15.3596 9.71372 15.1436 9.60633 14.7115 9.39151L8.92968 6.51675L12.6725 0.978028Z" />
|
||||
<path stroke={colorValue} stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" d="M12.6725 0.978028L1.6694 5.39306C1.23849 5.56596 1.02303 5.6524 0.955738 5.78244C0.897219 5.89553 0.897619 6.03092 0.956767 6.14968C1.02482 6.2863 1.24082 6.3937 1.67285 6.6085L7.45472 9.48326L3.71195 15.0219L14.7151 10.6069C15.1459 10.434 15.3614 10.3476 15.4287 10.2175C15.4872 10.1045 15.4868 9.96909 15.4277 9.85034C15.3596 9.71372 15.1436 9.60633 14.7115 9.39151L8.92968 6.51675L12.6725 0.978028Z" />
|
||||
{:else if icon === "heart"}
|
||||
<path fill={color} fill-rule="evenodd" clip-rule="evenodd" d="M11.3958 0.786443C12.9493 1.22537 14.1583 2.44773 14.58 4.00598C14.9429 5.49836 14.4467 7.06881 13.2922 8.08172L8.14799 13.1622C7.87285 13.4319 7.43249 13.4319 7.15735 13.1622L1.97072 8.08172C0.816203 7.06881 0.319941 5.49836 0.682855 4.00598C1.10459 2.44773 2.31353 1.22537 3.86702 0.786443C5.17302 0.428476 6.57148 0.714991 7.63146 1.55772C8.69145 0.714991 10.0898 0.428476 11.3958 0.786443ZM7.63146 11.6692L12.3227 7.06985C13.0921 6.39474 13.4129 5.34213 13.1506 4.35269C12.85 3.2887 12.0201 2.45611 10.9571 2.15209C9.91177 1.87655 8.79988 2.20357 8.07017 3.00119C7.79503 3.27088 7.35466 3.27088 7.07952 3.00119C6.52652 2.41398 5.76298 2.07041 4.95674 2.04596C4.71721 2.04974 4.47925 2.08543 4.24915 2.15209C3.18613 2.45611 2.35623 3.2887 2.05563 4.35269C1.80674 5.35303 2.15006 6.40771 2.94012 7.06985L7.63146 11.6692Z" />
|
||||
<path fill={colorValue} fill-rule="evenodd" clip-rule="evenodd" d="M11.3958 0.786443C12.9493 1.22537 14.1583 2.44773 14.58 4.00598C14.9429 5.49836 14.4467 7.06881 13.2922 8.08172L8.14799 13.1622C7.87285 13.4319 7.43249 13.4319 7.15735 13.1622L1.97072 8.08172C0.816203 7.06881 0.319941 5.49836 0.682855 4.00598C1.10459 2.44773 2.31353 1.22537 3.86702 0.786443C5.17302 0.428476 6.57148 0.714991 7.63146 1.55772C8.69145 0.714991 10.0898 0.428476 11.3958 0.786443ZM7.63146 11.6692L12.3227 7.06985C13.0921 6.39474 13.4129 5.34213 13.1506 4.35269C12.85 3.2887 12.0201 2.45611 10.9571 2.15209C9.91177 1.87655 8.79988 2.20357 8.07017 3.00119C7.79503 3.27088 7.35466 3.27088 7.07952 3.00119C6.52652 2.41398 5.76298 2.07041 4.95674 2.04596C4.71721 2.04974 4.47925 2.08543 4.24915 2.15209C3.18613 2.45611 2.35623 3.2887 2.05563 4.35269C1.80674 5.35303 2.15006 6.40771 2.94012 7.06985L7.63146 11.6692Z" />
|
||||
{:else if icon === "message"}
|
||||
<path fill={color} fill-rule="evenodd" clip-rule="evenodd" d="M2.22282 0.976503H12.596C13.8237 0.976503 14.8188 1.9717 14.8188 3.19932V10.6087C14.8188 11.8363 13.8237 12.8315 12.596 12.8315H11.855V15.0544C11.8535 15.3535 11.6723 15.6224 11.3956 15.736C11.3077 15.7775 11.2113 15.7978 11.1141 15.7953C10.9172 15.7964 10.7278 15.7191 10.588 15.5804L7.84649 12.8315H2.22282C0.995195 12.8315 0 11.8363 0 10.6087V3.19932C0 1.9717 0.995195 0.976503 2.22282 0.976503ZM12.596 11.3497C13.0052 11.3497 13.3369 11.0179 13.3369 10.6087V3.19932C13.3369 2.79011 13.0052 2.45838 12.596 2.45838H2.22282C1.81361 2.45838 1.48193 2.79011 1.48193 3.19932V10.6087C1.48193 11.0179 1.81361 11.3497 2.22282 11.3497H8.15039C8.34733 11.3485 8.53655 11.4258 8.67638 11.5645L10.3732 13.2687V12.0906C10.3732 11.6814 10.7049 11.3497 11.1141 11.3497H12.596Z" />
|
||||
<path fill={colorValue} fill-rule="evenodd" clip-rule="evenodd" d="M2.22282 0.976503H12.596C13.8237 0.976503 14.8188 1.9717 14.8188 3.19932V10.6087C14.8188 11.8363 13.8237 12.8315 12.596 12.8315H11.855V15.0544C11.8535 15.3535 11.6723 15.6224 11.3956 15.736C11.3077 15.7775 11.2113 15.7978 11.1141 15.7953C10.9172 15.7964 10.7278 15.7191 10.588 15.5804L7.84649 12.8315H2.22282C0.995195 12.8315 0 11.8363 0 10.6087V3.19932C0 1.9717 0.995195 0.976503 2.22282 0.976503ZM12.596 11.3497C13.0052 11.3497 13.3369 11.0179 13.3369 10.6087V3.19932C13.3369 2.79011 13.0052 2.45838 12.596 2.45838H2.22282C1.81361 2.45838 1.48193 2.79011 1.48193 3.19932V10.6087C1.48193 11.0179 1.81361 11.3497 2.22282 11.3497H8.15039C8.34733 11.3485 8.53655 11.4258 8.67638 11.5645L10.3732 13.2687V12.0906C10.3732 11.6814 10.7049 11.3497 11.1141 11.3497H12.596Z" />
|
||||
{:else if icon === "people-nearby"}
|
||||
<path stroke={colorValue} stroke-width="1.04739" d="M7.22453 3.0352C7.22453 3.80648 7.84975 4.43172 8.62105 4.43172C9.39235 4.43172 10.0176 3.80648 10.0176 3.0352C10.0176 2.26392 9.39235 1.63867 8.62105 1.63867C7.84975 1.63867 7.22453 2.26392 7.22453 3.0352Z" />
|
||||
<path fill={colorValue} d="M8.62069 10.7159L8.16598 10.4561C8.2592 10.293 8.43279 10.1922 8.62069 10.1922C8.80859 10.1922 8.98218 10.293 9.0754 10.4561L8.62069 10.7159ZM9.77604 6.75144C9.48842 6.78183 9.23062 6.57329 9.20025 6.28566C9.16988 5.99803 9.37838 5.74023 9.66599 5.70985L9.77604 6.75144ZM7.57539 5.70985C7.86301 5.74023 8.07151 5.99803 8.04113 6.28566C8.01076 6.57329 7.75296 6.78183 7.46535 6.75144L7.57539 5.70985ZM12.9425 8.31446L11.4236 8.82077L11.0924 7.82715L12.6113 7.32083L12.9425 8.31446ZM11.1925 9.31039L12.0631 11.5739L11.0855 11.9499L10.2149 9.68634L11.1925 9.31039ZM4.63012 7.32083L6.14905 7.82715L5.8178 8.82077L4.29887 8.31446L4.63012 7.32083ZM7.02642 9.68634L6.15582 11.9499L5.17826 11.5739L6.04885 9.31039L7.02642 9.68634ZM9.2663 12.9013L8.16598 10.9758L9.0754 10.4561L10.1757 12.3817L9.2663 12.9013ZM5.13678 5.24424L6.4618 5.52816L6.24234 6.55231L4.91732 6.26839L5.13678 5.24424ZM10.7796 5.52817L12.1046 5.24424L12.3241 6.26839L10.9991 6.55231L10.7796 5.52817ZM9.0754 10.9758L7.97508 12.9013L7.06566 12.3817L8.16598 10.4561L9.0754 10.9758ZM6.4618 5.52816C6.53617 5.54411 6.57087 5.55155 6.60516 5.55864L6.39302 6.58432C6.35427 6.5763 6.31531 6.56795 6.24234 6.55231L6.4618 5.52816ZM10.9991 6.55231C10.9261 6.56795 10.8871 6.5763 10.8484 6.58432L10.6362 5.55864C10.6705 5.55155 10.7052 5.54411 10.7796 5.52817L10.9991 6.55231ZM10.6142 13.6835C10.0571 13.6835 9.54275 13.385 9.2663 12.9013L10.1757 12.3817C10.2656 12.5391 10.433 12.6361 10.6142 12.6361V13.6835ZM6.15582 11.9499C6.0286 12.2807 6.27278 12.6361 6.62722 12.6361V13.6835C5.53772 13.6835 4.78716 12.5907 5.17826 11.5739L6.15582 11.9499ZM6.14905 7.82715C6.304 7.87882 6.46893 7.93007 6.60285 8.01267L6.05269 8.90401C6.05891 8.90778 6.05367 8.90324 6.01324 8.88795C5.97079 8.87189 5.91353 8.85268 5.8178 8.82077L6.14905 7.82715ZM6.04885 9.31039C6.08509 9.2162 6.10667 9.15978 6.12126 9.11677C6.13516 9.07592 6.13495 9.069 6.13397 9.0762L7.17173 9.21808C7.15036 9.37401 7.08507 9.53391 7.02642 9.68634L6.04885 9.31039ZM6.60285 8.01267C7.0142 8.26663 7.23715 8.73915 7.17173 9.21808L6.13397 9.0762C6.14333 9.00777 6.11149 8.94025 6.05269 8.90401L6.60285 8.01267ZM4.25655 6.80256C4.25655 7.0377 4.40703 7.24647 4.63012 7.32083L4.29887 8.31446C3.64808 8.09758 3.20916 7.48856 3.20916 6.80256H4.25655ZM12.0631 11.5739C12.4542 12.5907 11.7036 13.6835 10.6142 13.6835V12.6361C10.9686 12.6361 11.2128 12.2807 11.0855 11.9499L12.0631 11.5739ZM11.4236 8.82077C11.3278 8.85268 11.2706 8.87189 11.2281 8.88795C11.1877 8.90324 11.1825 8.90778 11.1887 8.90401L10.6385 8.01267C10.7724 7.93007 10.9374 7.87882 11.0924 7.82715L11.4236 8.82077ZM10.2149 9.68634C10.1563 9.53391 10.091 9.37401 10.0697 9.21808L11.1074 9.0762C11.1064 9.069 11.1062 9.07585 11.1201 9.11677C11.1347 9.15978 11.1563 9.2162 11.1925 9.31039L10.2149 9.68634ZM11.1887 8.90401C11.1299 8.94025 11.0981 9.00777 11.1074 9.0762L10.0697 9.21808C10.0042 8.73915 10.2272 8.26663 10.6385 8.01267L11.1887 8.90401ZM14.0322 6.80256C14.0322 7.48856 13.5933 8.09758 12.9425 8.31446L12.6113 7.32083C12.8344 7.24647 12.9848 7.0377 12.9848 6.80256H14.0322ZM12.9848 6.80256C12.9848 6.45476 12.6641 6.19551 12.3241 6.26839L12.1046 5.24424C13.0967 5.03165 14.0322 5.78794 14.0322 6.80256H12.9848ZM7.97508 12.9013C7.69864 13.385 7.1843 13.6835 6.62722 13.6835V12.6361C6.80842 12.6361 6.97572 12.5391 7.06566 12.3817L7.97508 12.9013ZM3.20916 6.80256C3.20916 5.78794 4.14469 5.03164 5.13678 5.24424L4.91732 6.26839C4.57726 6.19551 4.25655 6.45476 4.25655 6.80256H3.20916ZM9.66599 5.70985C9.9911 5.67551 10.3149 5.6251 10.6362 5.55864L10.8484 6.58432C10.4932 6.65778 10.1353 6.71349 9.77604 6.75144L9.66599 5.70985ZM6.60516 5.55864C6.9265 5.6251 7.25028 5.67551 7.57539 5.70985L7.46535 6.75144C7.10602 6.71349 6.74816 6.65778 6.39302 6.58432L6.60516 5.55864Z" />
|
||||
<path stroke={colorValue} stroke-width="1.04739" stroke-linecap="round" d="M3.41625 10.7161C2.31055 11.272 1.63826 12.0061 1.63826 12.8109C1.63826 13.3334 1.92176 13.8262 2.42325 14.2597M13.8255 10.7161C14.9312 11.272 15.6035 12.0061 15.6035 12.8109C15.6035 14.5462 12.4773 15.953 8.62089 15.953C7.34907 15.953 6.15665 15.8 5.12958 15.5327" />
|
||||
{:else if icon === "server"}
|
||||
<path fill={colorValue} d="M10.0808 2.98758C9.79415 2.98758 9.56178 2.75521 9.56178 2.46858C9.56178 2.18195 9.79415 1.94959 10.0808 1.94959V2.98758ZM7.31279 1.94959C7.59942 1.94959 7.83179 2.18195 7.83179 2.46858C7.83179 2.75521 7.59942 2.98758 7.31279 2.98758V1.94959ZM8.00479 15.4435C7.71816 15.4435 7.48579 15.2111 7.48579 14.9245C7.48579 14.6379 7.71816 14.4055 8.00479 14.4055V15.4435ZM2.29582 9.38854C2.29582 9.67517 2.06345 9.90754 1.77682 9.90754C1.4902 9.90754 1.25782 9.67517 1.25782 9.38854H2.29582ZM7.31279 9.21555C7.02617 9.21555 6.79379 8.98317 6.79379 8.69655C6.79379 8.40992 7.02617 8.17755 7.31279 8.17755V9.21555ZM4.54481 8.17755C4.83143 8.17755 5.0638 8.40992 5.0638 8.69655C5.0638 8.98317 4.83143 9.21555 4.54481 9.21555V8.17755ZM15.0977 9.38854V8.69655H16.1357V9.38854H15.0977ZM15.0977 8.69655V8.00455H16.1357V8.69655H15.0977ZM8.00479 14.4055H10.0808V15.4435H8.00479V14.4055ZM2.29582 8.00455V8.69655H1.25782V8.00455H2.29582ZM16.1357 9.38854C16.1357 10.6787 16.1368 11.6986 16.0298 12.4949C15.9207 13.3062 15.6909 13.9629 15.173 14.4808L14.439 13.7468C14.7319 13.454 14.9074 13.0528 15.001 12.3567C15.0966 11.6455 15.0977 10.708 15.0977 9.38854H16.1357ZM10.0808 14.4055C11.4003 14.4055 12.3377 14.4044 13.0489 14.3088C13.7451 14.2152 14.1462 14.0397 14.439 13.7468L15.173 14.4808C14.6551 14.9986 13.9985 15.2284 13.1872 15.3376C12.3908 15.4446 11.3709 15.4435 10.0808 15.4435V14.4055ZM7.31279 2.98758C5.99329 2.98758 5.05585 2.98868 4.34468 3.08429C3.64853 3.17789 3.24738 3.35343 2.95453 3.64629L2.22053 2.91232C2.73842 2.39446 3.39512 2.16463 4.20642 2.05555C5.00277 1.94849 6.02263 1.94959 7.31279 1.94959V2.98758ZM1.25782 8.00455C1.25782 6.71438 1.25672 5.69454 1.36377 4.89817C1.4729 4.08685 1.70271 3.43019 2.22053 2.91232L2.95453 3.64629C2.66168 3.93915 2.48612 4.34027 2.39256 5.03648C2.29693 5.74761 2.29582 6.68504 2.29582 8.00455H1.25782ZM10.0808 1.94959C11.3709 1.94959 12.3908 1.94849 13.1872 2.05555C13.9985 2.16463 14.6551 2.39446 15.173 2.91232L14.439 3.64629C14.1462 3.35343 13.7451 3.17789 13.0489 3.08429C12.3377 2.98868 11.4003 2.98758 10.0808 2.98758V1.94959ZM15.0977 8.00455C15.0977 6.68504 15.0966 5.74761 15.001 5.03648C14.9074 4.34027 14.7319 3.93915 14.439 3.64629L15.173 2.91232C15.6909 3.43019 15.9207 4.08685 16.0298 4.89817C16.1368 5.69454 16.1357 6.71438 16.1357 8.00455H15.0977ZM2.29582 8.69655V9.38854H1.25782V8.69655H2.29582ZM15.6167 9.21555H7.31279V8.17755H15.6167V9.21555ZM4.54481 9.21555H1.77682V8.17755H4.54481V9.21555Z" />
|
||||
<path stroke={colorValue} stroke-width="1.03799" stroke-linecap="round" d="M7.6582 5.58252H4.54422" />
|
||||
<path stroke={colorValue} stroke-width="1.03799" stroke-linecap="round" d="M12.8486 12.5025V11.1185" />
|
||||
<path stroke={colorValue} stroke-width="1.03799" stroke-linecap="round" d="M12.8486 6.27462V4.89062" />
|
||||
<path stroke={colorValue} stroke-width="1.03799" stroke-linecap="round" d="M10.7725 12.5025V11.1185" />
|
||||
<path stroke={colorValue} stroke-width="1.03799" stroke-linecap="round" d="M10.7725 6.27462V4.89062" />
|
||||
<path stroke={colorValue} stroke-width="1.03799" stroke-linecap="round" d="M3.62149 12.077C3.47714 12.023 3.32192 11.9936 3.16014 11.9936C3.0016 11.9936 2.84922 12.0219 2.70736 12.0738M2.70736 12.0738C2.16539 12.2724 1.77614 12.8176 1.77614 13.4591C1.77614 14.2684 2.39576 14.9244 3.16014 14.9244H5.58212C6.15537 14.9244 6.62012 14.4324 6.62012 13.8254C6.62012 13.2184 6.15537 12.7263 5.58212 12.7263C5.51334 12.7263 5.44608 12.7334 5.38096 12.7469M2.70736 12.0738C2.78438 11.3417 3.37078 10.7725 4.08277 10.7725C4.84715 10.7725 5.46677 11.4285 5.46677 12.2378C5.46677 12.4169 5.43646 12.5884 5.38096 12.7469M5.38096 12.7469C5.24429 12.7754 5.11724 12.8322 5.00548 12.9114" />
|
||||
{:else if icon === "network"}
|
||||
<path stroke={colorValue} stroke-width="0.777214" d="M9.36229 4.88839C10.195 4.88839 10.8701 4.21333 10.8701 3.3806C10.8701 2.54787 10.195 1.8728 9.36229 1.8728C8.52956 1.8728 7.85449 2.54787 7.85449 3.3806C7.85449 4.21333 8.52956 4.88839 9.36229 4.88839Z" />
|
||||
<path stroke={colorValue} stroke-width="0.777214" d="M14.3135 10.1139C15.1462 10.1139 15.8213 9.43879 15.8213 8.60606C15.8213 7.77333 15.1462 7.09827 14.3135 7.09827C13.4807 7.09827 12.8057 7.77333 12.8057 8.60606C12.8057 9.43879 13.4807 10.1139 14.3135 10.1139Z" />
|
||||
<path stroke={colorValue} stroke-width="0.777214" d="M9.36229 15.0284C10.195 15.0284 10.8701 14.3533 10.8701 13.5206C10.8701 12.6879 10.195 12.0128 9.36229 12.0128C8.52956 12.0128 7.85449 12.6879 7.85449 13.5206C7.85449 14.3533 8.52956 15.0284 9.36229 15.0284Z" />
|
||||
<path stroke={colorValue} stroke-width="0.777214" d="M4.34764 12.816C5.18037 12.816 5.85543 12.1409 5.85543 11.3082C5.85543 10.4755 5.18037 9.80042 4.34764 9.80042C3.51491 9.80042 2.83984 10.4755 2.83984 11.3082C2.83984 12.1409 3.51491 12.816 4.34764 12.816Z" />
|
||||
<path stroke={colorValue} stroke-width="0.777214" d="M4.34764 6.91952C5.18037 6.91952 5.85543 6.24446 5.85543 5.41173C5.85543 4.57899 5.18037 3.90393 4.34764 3.90393C3.51491 3.90393 2.83984 4.57899 2.83984 5.41173C2.83984 6.24446 3.51491 6.91952 4.34764 6.91952Z" />
|
||||
<path stroke={colorValue} stroke-width="0.777214" d="M9.36021 9.22006C10.0327 9.22006 10.5778 8.67491 10.5778 8.00243C10.5778 7.32994 10.0327 6.78479 9.36021 6.78479C8.68773 6.78479 8.14258 7.32994 8.14258 8.00243C8.14258 8.67491 8.68773 9.22006 9.36021 9.22006Z" />
|
||||
<path stroke={colorValue} stroke-width="0.777214" d="M5.64551 4.64236L7.9072 3.76929" />
|
||||
<path stroke={colorValue} stroke-width="0.777214" d="M10.4199 4.45837L13.2386 7.5491" />
|
||||
<path stroke={colorValue} stroke-width="0.777214" d="M13.3909 9.79773L10.4375 12.4636" />
|
||||
<path stroke={colorValue} stroke-width="0.777214" d="M5.17578 6.67078L8.42713 12.3393" />
|
||||
<path stroke={colorValue} stroke-width="0.777214" d="M5.68164 12.0104L7.85525 13.0182" />
|
||||
<path stroke={colorValue} stroke-width="0.777214" d="M4.91211 9.9092L8.54688 4.64746" />
|
||||
<path stroke={colorValue} stroke-width="0.777214" d="M5.73535 6.00244L8.27943 7.44029" />
|
||||
<path stroke={colorValue} stroke-width="0.777214" d="M10.5801 8.13977L12.8055 8.30817" />
|
||||
<path stroke={colorValue} stroke-width="0.777214" d="M9.36035 9.22266L9.36294 12.0103" />
|
||||
{/if}
|
||||
</svg>
|
||||
|
||||
@ -1,40 +1,20 @@
|
||||
<script lang="ts">
|
||||
import cx from "classnames"
|
||||
import {without} from 'ramda'
|
||||
import SelectList from 'src/partials/SelectList.svelte'
|
||||
|
||||
export let options
|
||||
export let value
|
||||
export let onChange = null
|
||||
export let disabled = false
|
||||
export let multiple = false
|
||||
export let displayOption = x => x
|
||||
|
||||
const getClassName = (i, active) =>
|
||||
cx("px-4 py-2 transition-all", {
|
||||
"border-l border-solid border-neutral-100": i > 0,
|
||||
"bg-accent text-white": active,
|
||||
})
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<div class="inline-block">
|
||||
<div
|
||||
class="flex overflow-hidden rounded-full border border-solid border-neutral-100"
|
||||
class:pointer-events-none={disabled}
|
||||
class:opacity-75={disabled}
|
||||
class:cursor-pointer={!disabled}>
|
||||
{#each options as option, i}
|
||||
<div
|
||||
class={cx("px-4 py-2 transition-all", {
|
||||
"border-l border-solid border-neutral-100": i > 0,
|
||||
"bg-accent text-white": multiple ? value.includes(option) : value === option,
|
||||
})}
|
||||
on:click={() => {
|
||||
if (multiple) {
|
||||
value = value.includes(option) ? without([option], value) : [...value, option]
|
||||
} else {
|
||||
value = option
|
||||
}
|
||||
|
||||
onChange?.(value)
|
||||
}}>
|
||||
{displayOption(option)}
|
||||
</div>
|
||||
{/each}
|
||||
<div class="inline-block">
|
||||
<SelectList {...$$props} class="inline-flex overflow-hidden rounded-full border border-solid border-neutral-100">
|
||||
<div slot="item" let:i let:active let:option class={getClassName(i, active)}>
|
||||
{displayOption(option)}
|
||||
</div>
|
||||
</div>
|
||||
</SelectList>
|
||||
</div>
|
||||
|
||||
32
src/partials/SelectList.svelte
Normal file
32
src/partials/SelectList.svelte
Normal file
@ -0,0 +1,32 @@
|
||||
<script lang="ts">
|
||||
import cx from "classnames"
|
||||
import {without} from 'ramda'
|
||||
|
||||
export let options
|
||||
export let value
|
||||
export let onChange = null
|
||||
export let disabled = false
|
||||
export let multiple = false
|
||||
|
||||
const onClick = option => {
|
||||
if (multiple) {
|
||||
value = value.includes(option) ? without([option], value) : [...value, option]
|
||||
} else {
|
||||
value = option
|
||||
}
|
||||
|
||||
onChange?.(value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
class={$$props.class}
|
||||
class:pointer-events-none={disabled}
|
||||
class:opacity-75={disabled}
|
||||
class:cursor-pointer={!disabled}>
|
||||
{#each options as option, i}
|
||||
<div on:click={() => onClick(option)}>
|
||||
<slot name="item" {i} {option} active={multiple ? value.includes(option) : value === option} />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
19
src/partials/SelectTiles.svelte
Normal file
19
src/partials/SelectTiles.svelte
Normal file
@ -0,0 +1,19 @@
|
||||
<script lang="ts">
|
||||
import cx from "classnames"
|
||||
import Tile from 'src/partials/Tile.svelte'
|
||||
import SelectList from 'src/partials/SelectList.svelte'
|
||||
|
||||
const getClass = active =>
|
||||
cx('transition-all', {
|
||||
'bg-tinted-600 text-tinted-800': !active,
|
||||
'bg-tinted-200 text-neutral-900': active,
|
||||
})
|
||||
</script>
|
||||
|
||||
<SelectList {...$$props} class="grid grid-cols-{$$props.options.length} justify-between gap-4">
|
||||
<div slot="item" let:i let:active let:option>
|
||||
<Tile class={getClass(active)}>
|
||||
<slot name="item" {option} {active} />
|
||||
</Tile>
|
||||
</div>
|
||||
</SelectList>
|
||||
13
src/partials/Tile.svelte
Normal file
13
src/partials/Tile.svelte
Normal file
@ -0,0 +1,13 @@
|
||||
<script lang="ts">
|
||||
import cx from 'classnames'
|
||||
import Square from "src/partials/Square.svelte"
|
||||
import AltColor from "src/partials/AltColor.svelte"
|
||||
|
||||
export let background = false
|
||||
</script>
|
||||
|
||||
<AltColor {background} class={cx($$props.class, "rounded-xl overflow-hidden")}>
|
||||
<Square class="flex aspect-square flex-grow flex-col">
|
||||
<slot />
|
||||
</Square>
|
||||
</AltColor>
|
||||
Loading…
Reference in New Issue
Block a user