acid-info/Kurate
1
0
Fork 0
mirror of https://github.com/acid-info/Kurate.git synced 2025-02-11 15:26:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: add dropdown menus to chat headers (#260)

Browse Source 
Co-authored-by: Vojtech Simetka <vojtech@simetka.cz>
This commit is contained in:
Barbara Gomes 2023-03-16 13:52:01 -04:00 committed by GitHub
parent 2b06356298
commit 3db6379a9b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 41 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/ui/src/lib/components/chat-screen.svelte
View File

@ -4,6 +4,7 @@
import Image from '$lib/components/icons/image.svelte'
import SendAltFilled from '$lib/components/icons/send-alt-filled.svelte'
import Info from '$lib/components/icons/information.svelte'
import Menu from '$lib/components/icons/overflow-menu-vertical.svelte'
import Button from '$lib/components/button.svelte'
import Header from '$lib/components/header.svelte'
@ -12,6 +13,8 @@
import InfoBox from '$lib/components/info-box.svelte'
import Persona from '$lib/components/persona.svelte'
import Divider from '$lib/components/divider.svelte'
import Dropdown from '$lib/components/dropdown.svelte'
import DropdownItem from '$lib/components/dropdown-item.svelte'
import SingleColumn from '$lib/components/single-column.svelte'
import LearnMore from './learn-more.svelte'
@ -41,7 +44,28 @@
</script>
<div class="root">
<Header {title} {onBack} />
<Header {title} {onBack}>
<!-- TODO: add actions to dropdown buttons -->
<Dropdown icon={Menu}>
{#if chat.blocked === true}
<DropdownItem on:click={() => console.log('delete for me')}>Delete for me</DropdownItem>
<DropdownItem on:click={() => console.log('delete & block')} danger>
Delete & block sender...
</DropdownItem>
{:else if chat.closed === true}
<DropdownItem on:click={() => console.log('re-open')}>Re-open chat</DropdownItem>
<DropdownItem on:click={() => console.log('delete for me')}>Delete for me</DropdownItem>
<DropdownItem on:click={() => console.log('delete & block')} danger>
Delete & block sender...
</DropdownItem>
{:else}
<DropdownItem on:click={() => console.log('close')}>Close chat</DropdownItem>
<DropdownItem on:click={() => console.log('delete & block')} danger>
Delete & block sender...
</DropdownItem>
{/if}
</Dropdown>
</Header>
<div class="original-post">
{#if showPost}
<SingleColumn>

16
packages/ui/src/lib/components/icons/overflow-menu-vertical.svelte Normal file
View File

@ -0,0 +1,16 @@
<script lang="ts">
import type { IconProps } from '$lib/types'
type $$Props = IconProps
let cls: string | undefined = undefined
export { cls as class }
export let size = 20
</script>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width={size} height={size} class={cls}>
<circle cx="16" cy="8" r="2" />
<circle cx="16" cy="16" r="2" />
<circle cx="16" cy="24" r="2" />
</svg>