nostr/coracle
1
0
Fork 0
mirror of https://github.com/coracle-social/coracle.git synced 2024-09-29 16:31:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Tidy up feed controls

Browse Source
This commit is contained in:
Jon Staab 2023-11-21 16:18:17 -08:00
parent 947cf7ab8d
commit 19d0041215
3 changed files with 48 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
src/app/shared/FeedControls.svelte
View File

@ -176,11 +176,11 @@
}) })
const open = () => { const open = () => {
modal = "maxi" isOpen = true
} }
const onEscape = () => { const onEscape = () => {
modal = null isOpen = false
} }
const submit = () => { const submit = () => {
@ -188,7 +188,7 @@
applyFilter() applyFilter()
} }
let modal = null let isOpen = false
let scopeOptions = [] let scopeOptions = []
let _filter: { let _filter: {
kinds?: Kind[] kinds?: Kind[]
@ -211,17 +211,12 @@
</script> </script>
<div> <div>
<div class="float-right flex justify-end gap-1"> <div class="float-right flex justify-end">
<div class="flex items-center gap-1"> <div class="flex items-center gap-1 pr-2">
<Toggle scale={0.6} value={!$hideReplies} on:change={toggleReplies} /> <Toggle scale={0.6} value={!$hideReplies} on:change={toggleReplies} />
<small class="text-gray-3">Show replies</small> <small class="text-gray-3">Show replies</small>
</div> </div>
<i <i class="fa fa-search cursor-pointer p-2" on:click={open} />
class="fa fa-search cursor-pointer p-2"
on:click={() => {
modal = modal ? null : "mini"
}} />
<i class="fa fa-sliders cursor-pointer p-2" on:click={open} />
<slot name="controls" /> <slot name="controls" />
</div> </div>
{#if parts.length > 0 || relays.length > 0} {#if parts.length > 0 || relays.length > 0}
@ -239,8 +234,8 @@
{/if} {/if}
</div> </div>
{#if modal} {#if isOpen}
<Modal {onEscape} mini={modal === "mini"}> <Modal {onEscape}>
<form on:submit|preventDefault={submit}> <form on:submit|preventDefault={submit}>
<Content size="lg"> <Content size="lg">
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
@ -250,48 +245,46 @@
<i slot="after" class="fa fa-times cursor-pointer" on:click={clearSearch} /> <i slot="after" class="fa fa-times cursor-pointer" on:click={clearSearch} />
</Input> </Input>
</div> </div>
{#if modal === "maxi"} <div class="grid grid-cols-2 gap-2">
<div class="grid grid-cols-2 gap-2"> <div class="flex flex-col gap-1">
<div class="flex flex-col gap-1"> <strong>Since</strong>
<strong>Since</strong> <DateInput bind:value={_filter.since} />
<DateInput bind:value={_filter.since} />
</div>
<div class="flex flex-col gap-1">
<strong>Until</strong>
<DateInput bind:value={_filter.until} />
</div>
</div> </div>
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
<strong>Kinds</strong> <strong>Until</strong>
<MultiSelect search={searchKinds} bind:value={_filter.kinds} getKey={prop("kind")}> <DateInput bind:value={_filter.until} />
<div slot="item" let:item>{item.label} (kind {item.kind})</div>
</MultiSelect>
</div> </div>
<div class="flex flex-col gap-1"> </div>
<strong>Authors</strong> <div class="flex flex-col gap-1">
<SelectButton <strong>Kinds</strong>
onChange={onScopeChange} <MultiSelect search={searchKinds} bind:value={_filter.kinds} getKey={prop("kind")}>
value={typeof _filter.authors === "string" ? _filter.authors : "custom"} <div slot="item" let:item>{item.label} (kind {item.kind})</div>
options={scopeOptions} /> </MultiSelect>
{#if Array.isArray(_filter.authors)} </div>
<PersonMultiSelect bind:value={_filter.authors} /> <div class="flex flex-col gap-1">
{/if} <strong>Authors</strong>
</div> <SelectButton
<div class="flex flex-col gap-1"> onChange={onScopeChange}
<strong>Topics</strong> value={typeof _filter.authors === "string" ? _filter.authors : "custom"}
<MultiSelect search={$searchTopics} bind:value={_filter["#t"]}> options={scopeOptions} />
<div slot="item" let:item> {#if Array.isArray(_filter.authors)}
<div class="-my-1"> <PersonMultiSelect bind:value={_filter.authors} />
#{item.name} {/if}
</div> </div>
<div class="flex flex-col gap-1">
<strong>Topics</strong>
<MultiSelect search={$searchTopics} bind:value={_filter["#t"]}>
<div slot="item" let:item>
<div class="-my-1">
#{item.name}
</div> </div>
</MultiSelect> </div>
</div> </MultiSelect>
<div class="flex flex-col gap-1"> </div>
<strong>Mentions</strong> <div class="flex flex-col gap-1">
<PersonMultiSelect bind:value={_filter["#p"]} /> <strong>Mentions</strong>
</div> <PersonMultiSelect bind:value={_filter["#p"]} />
{/if} </div>
<div class="flex justify-end"> <div class="flex justify-end">
<Anchor theme="button-accent" on:click={submit}>Apply Filters</Anchor> <Anchor theme="button-accent" on:click={submit}>Apply Filters</Anchor>
</div> </div>

2
src/app/views/Feeds.svelte
View File

@ -64,7 +64,7 @@
{#if $canSign} {#if $canSign}
{#if $userLists.length > 0} {#if $userLists.length > 0}
<Popover placement="bottom" opts={{hideOnClick: true}} theme="transparent"> <Popover placement="bottom" opts={{hideOnClick: true}} theme="transparent">
<i slot="trigger" class="fa fa-ellipsis-v cursor-pointer p-2" /> <i slot="trigger" class="fa fa-scroll cursor-pointer p-2" />
<div <div
slot="tooltip" slot="tooltip"
class="flex flex-col items-start overflow-hidden rounded border border-solid border-gray-8 bg-black"> class="flex flex-col items-start overflow-hidden rounded border border-solid border-gray-8 bg-black">

6
src/util/notes.ts
View File

@ -20,7 +20,7 @@ export const urlIsMedia = (url: string) =>
export const parseContent = ({content, tags = []}: {content: string; tags?: string[][]}) => { export const parseContent = ({content, tags = []}: {content: string; tags?: string[][]}) => {
const result: any[] = [] const result: any[] = []
let text = content.trim() || new Tags(tags).getValue('alt') || "" let text = content.trim() || new Tags(tags).getValue("alt") || ""
let buffer = "" let buffer = ""
const parseNewline = () => { const parseNewline = () => {
@ -59,7 +59,7 @@ export const parseContent = ({content, tags = []}: {content: string; tags?: stri
} }
const parseTopic = () => { const parseTopic = () => {
const topic = first(text.match(/^#\w+/i)) const topic: string = first(text.match(/^#\w+/i))
// Skip numeric topics // Skip numeric topics
if (topic && !topic.match(/^#\d+$/)) { if (topic && !topic.match(/^#\d+$/)) {
@ -100,7 +100,7 @@ export const parseContent = ({content, tags = []}: {content: string; tags?: stri
} }
const parseUrl = () => { const parseUrl = () => {
const raw = first( const raw: string = first(
text.match(/^([a-z\+:]{2,30}:\/\/)?[^<>\(\)\s]+\.[a-z]{2,6}[^\s]*[^<>"'\.!?,:\s]/gi) text.match(/^([a-z\+:]{2,30}:\/\/)?[^<>\(\)\s]+\.[a-z]{2,6}[^\s]*[^<>"'\.!?,:\s]/gi)
) )