hcengineering/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2024-12-23 11:31:57 +03:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Board: Add button shape and title props (#1381)

Browse Source 
Signed-off-by: Anna No <anna.no@xored.com>
This commit is contained in:
Anna No 2022-04-13 00:13:28 +07:00 committed by GitHub
parent b3d6a11161
commit 1c321d2da5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/ui/src/components/Button.svelte
View File

@ -24,6 +24,7 @@
export let labelParams: Record<string, any> = {} export let labelParams: Record<string, any> = {}
export let kind: 'primary' | 'secondary' | 'no-border' | 'transparent' | 'link' | 'dangerous' = 'secondary' export let kind: 'primary' | 'secondary' | 'no-border' | 'transparent' | 'link' | 'dangerous' = 'secondary'
export let size: 'small' | 'medium' | 'large' | 'x-large' = 'medium' export let size: 'small' | 'medium' | 'large' | 'x-large' = 'medium'
export let shape: 'circle' | undefined = undefined
export let icon: Asset | AnySvelteComponent | undefined = undefined export let icon: Asset | AnySvelteComponent | undefined = undefined
export let justify: 'left' | 'center' = 'center' export let justify: 'left' | 'center' = 'center'
export let disabled: boolean = false export let disabled: boolean = false
@ -31,7 +32,7 @@
export let width: string | undefined = undefined export let width: string | undefined = undefined
export let resetIconSize: boolean = false export let resetIconSize: boolean = false
export let focus: boolean = false export let focus: boolean = false
export let isCircle: boolean = false export let title: string | undefined = undefined
export let input: HTMLButtonElement | undefined = undefined export let input: HTMLButtonElement | undefined = undefined
@ -49,10 +50,11 @@
bind:this={input} bind:this={input}
class="button {kind} {size} jf-{justify}" class="button {kind} {size} jf-{justify}"
class:only-icon={iconOnly} class:only-icon={iconOnly}
class:border-radius-1={!isCircle} class:border-radius-1={shape !== 'circle'}
class:border-radius-4={isCircle} class:border-radius-4={shape === 'circle'}
disabled={disabled || loading} disabled={disabled || loading}
style={width ? 'width: ' + width : ''} style={width ? 'width: ' + width : ''}
{title}
on:click on:click
> >
{#if icon && !loading} {#if icon && !loading}

2
plugins/board-resources/src/components/editor/CardDetails.svelte
View File

@ -77,7 +77,7 @@
{#each members as member} {#each members as member}
<MemberPresenter value={member} size="large" /> <MemberPresenter value={member} size="large" />
{/each} {/each}
<Button icon={IconAdd} isCircle={true} kind="no-border" size="large" on:click={membersHandler} /> <Button icon={IconAdd} shape="circle" kind="no-border" size="large" on:click={membersHandler} />
</div> </div>
</div> </div>
{/if} {/if}

6
plugins/board-resources/src/components/presenters/MemberPresenter.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import type { Employee } from '@anticrm/contact' import { Employee, formatName } from '@anticrm/contact'
import { getFirstName, getLastName } from '@anticrm/contact' import { getFirstName, getLastName } from '@anticrm/contact'
import { ContactPresenter } from '@anticrm/contact-resources' import { ContactPresenter } from '@anticrm/contact-resources'
import { Button, showPopup } from '@anticrm/ui' import { Button, showPopup } from '@anticrm/ui'
@ -9,13 +9,15 @@
const firstName = getFirstName(value.name) const firstName = getFirstName(value.name)
const lastName = getLastName(value.name) const lastName = getLastName(value.name)
const nameLabel = `${firstName?.[0] ?? ''}${lastName?.[0] ?? ''}`.toUpperCase() const nameLabel = `${firstName?.[0] ?? ''}${lastName?.[0] ?? ''}`.toUpperCase()
const formattedName = formatName(value.name)
</script> </script>
{#if value} {#if value}
<Button <Button
{size} {size}
kind="no-border" kind="no-border"
isCircle={true} shape="circle"
title={formattedName}
on:click={() => { on:click={() => {
showPopup(ContactPresenter, { value }) // TODO: show proper popup showPopup(ContactPresenter, { value }) // TODO: show proper popup
}} }}